/* ===== DESIGN TOKENS ===== */
:root {
    /* ===== CONTENT (bleus navy — ligne 1) ===== */
    --color-content-50:  #488EFF;
    --color-content-100: #2176FE;
    --color-content-200: #0360F6;
    --color-content-300: #0351CF;
    --color-content-400: #0442A8;
    --color-content-500: #043382;  /* inchangé */
    --color-content-600: #03245C;  /* inchangé */
    --color-content-700: #021D4B;
    --color-content-800: #01173A;
    --color-content-900: #011028;
    --color-content-950: #000017;

    /* ===== BACKGROUND (bleus très clairs — ligne 2) ===== */
    --color-background-50:  #FBFCFE;  /* inchangé */
    --color-background-100: #F0F4FB;  /* inchangé */
    --color-background-200: #E6ECF8;  /* inchangé */
    --color-background-300: #DBE5F5;  /* inchangé */
    --color-background-400: #D1DDF1;
    --color-background-500: #C7D6EE;  /* inchangé */
    --color-background-600: #BDCFEA;
    --color-background-700: #9CB6DD;  /* inchangé */
    --color-background-800: #7C9ED0;
    --color-background-900: #5D85C1;  /* inchangé */
    --color-background-950: #456FAB;

    /* ===== ACTION (bleus intermédiaires — ligne 3) ===== */
    --color-action-50:  #AABEF3;
    --color-action-100: #8AABED;
    --color-action-200: #6A88E7;
    --color-action-300: #4B73DF;
    --color-action-400: #2C5AD7;
    --color-action-500: #254CB9;  /* inchangé */
    --color-action-600: #203F97;  /* inchangé */
    --color-action-700: #1B3479;  /* inchangé */
    --color-action-800: #153479;
    --color-action-900: #102D62;
    --color-action-950: #081021;

    /* ===== WARNING (oranges — ligne 4) ===== */
    --color-warning-50:  #FFFCFA;  /* inchangé */
    --color-warning-100: #FFEADC;  /* inchangé */
    --color-warning-200: #FEDABE;
    --color-warning-300: #FCCBA1;
    --color-warning-400: #FABD65;
    --color-warning-500: #F7AF09;
    --color-warning-600: #F4A34E;
    --color-warning-700: #EF8C26;  /* inchangé */
    --color-warning-800: #E7BC20;
    --color-warning-900: #A5CC11;
    --color-warning-950: #7C450F;

    /* ===== IMPORTANT (rouges — ligne 5) ===== */
    --color-important-50:  #FFFAFA;  /* inchangé */
    --color-important-100: #FFDFDF;  /* inchangé */
    --color-important-200: #FFC8C4;
    --color-important-300: #FEAEA9;
    --color-important-400: #FEB28E;
    --color-important-500: #FEB173;
    --color-important-600: #FD6C58;
    --color-important-700: #FA452D;  /* inchangé */
    --color-important-800: #F12309;  /* inchangé */
    --color-important-900: #C21E0A;
    --color-important-950: #941009;

    /* ===== POSITIVE (teals — ligne 6) ===== */
    --color-positive-50:  #EFF7F8;  /* inchangé */
    --color-positive-100: #D5E9EC;
    --color-positive-200: #BCDBDF;
    --color-positive-300: #A3CCD1;
    --color-positive-400: #88BDC2;
    --color-positive-500: #74ADB3;
    --color-positive-600: #5E9DA3;
    --color-positive-700: #508084;  /* inchangé */
    --color-positive-800: #406385;
    --color-positive-900: #304747;
    --color-positive-950: #1F282B;

    /* ===== NEUTRAL / TEXT (gris — ligne 7) ===== */
    --color-neutral-50:  #EEEEF3;
    --color-neutral-100: #E0E1E9;
    --color-neutral-200: #D2D5DE;
    --color-neutral-300: #C5C9D3;
    --color-neutral-400: #B8BBC7;
    --color-neutral-500: #AAABB6;
    --color-neutral-600: #9196A2;
    --color-neutral-700: #7E838B;
    --color-neutral-800: #5E5B88;
    --color-neutral-900: #5D6083;
    --color-neutral-950: #4C4B4F;

    /* ===== ALIASES SÉMANTIQUES (inchangés) ===== */
    --color-primary-foreground: var(--color-background-50);
    --color-foreground:         var(--color-content-600);
    --color-muted-foreground:   var(--color-content-400);
    --color-border:             var(--color-background-100);
    --color-background:         var(--color-background-50);
    --color-text-body:          var(--color-content-600);

    /* ===== LAYOUT ===== */
    --radius-sm: 5px;
    --radius-lg: 20px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --radius-round: 50%;

    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 20px;
    --space-lg: 40px;

    /* ===== BREAKPOINTS (max-width, desktop-first) — source unique =====
       sm 640px (téléphones) · md 900px (tablette / bascule nav) · lg 1080px (petit desktop)
       ⚠️ var() est INTERDIT dans @media : écrire ces valeurs exactes à la main.
       Les customs props ci-dessous ne servent qu'en JS (matchMedia) et de doc. */
    --bp-sm: 640px;
    --bp-md: 900px;
    --bp-lg: 1080px;
/*    
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;
    --color-text-subtle: #6b7280;
    --color-text-faint: #020203;
    --color-teal-bg: #e0f2f1;
*/    
    --color-text-secondary:     var(--color-action-600);
    --color-text-muted:         var(--color-neutral-700);
    --color-text-subtle:        var(--color-neutral-600);
    --color-text-faint:         var(--color-neutral-950);
    --color-teal-bg: var(--color-positive-50);

}


/* ===== RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    overflow-x: clip;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--color-background-50);
    color: var(--color-foreground);
    line-height: 1.6;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ===== HEADER / NAV ===== */
.nav {
    padding: 16px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: rgba(251, 252, 254, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 101;
    border-bottom: 1px solid var(--color-border);
}

.contact-nav {
    background: var(--color-background-200);
    backdrop-filter: none;
    border-bottom: none;
}

/* ===== SCROLL PROGRESS ===== */
#scroll-progress {
    position: sticky;
    top: calc(var(--nav-height, 82px) + var(--banner-height, 38px));
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--color-action-500);
    z-index: 102;
    transition: width .2s ease-out;
    pointer-events: none;
}

.nav-logo svg {
    display: block;
    height: 36px;
    width: auto;
}

.nav-actions {
    display: flex;
    gap: 28px;
    align-items: center;
}

.nav-link {
    color: var(--color-content-600);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    padding: 8px 4px;
    position: relative;
    transition: color .5s ease;
    height: stretch;
    display: flex;
    align-items: flex-end;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-action-500);
    transition: width .5s ease, left .5s ease;
}

.nav-link:hover {
    color: var(--color-action-500);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
    left: 0;
}

.nav-link.active {
    color: var(--color-action-500);
}

.nav-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Lien nav sur deux lignes (Centres de santé / Maisons de santé) */
.nav-link-stack {
    line-height: 1.4em;
    text-align: center;
}

/* Chip "fin 2026" — à venir (orange, distinct du badge positif) */
.nav-badge-soon {
    background: var(--color-warning-700);
    text-transform: none;
}

.nav-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--color-positive-700);
    color: var(--color-background-50);
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.3;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    transition: background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1);
}

.btn-primary {
    background: var(--color-action-500);
    color: var(--color-primary-foreground);
}

.btn-primary:hover {
    background: var(--color-background-200);
    color: var(--color-action-500);
}

.btn-secondary {
    background: var(--color-background-200);
    color: var(--color-action-500);
    border: none;
}

.btn-secondary:hover {
    background: var(--color-background-100);
}

.btn-tertiary {
    background: var(--color-background-50);
    color: var(--color-action-500);
    border: none;
}

.btn-tertiary:hover {
    background: var(--color-background-400);
}

.btn-white {
    background: var(--color-background-50);
    color: var(--color-action-500);
}

.btn-white:hover {
    background: var(--color-background-300);
}

.btn-nav {
    padding: 8px 20px;
    font-size: .85rem;
}

/* ===== SECTIONS COMMUNES ===== */
section {
    padding: 80px 40px;
}

.section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 56px;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--color-background-200);
    border-radius: var(--radius-lg);
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-action-500);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.section-header h2 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: 16px;
    line-height: 1.2;
}

.section-header p {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    max-width: 1080px;
    margin: 0 auto;
}

.section-header--left {
    text-align: left;
    margin-bottom: 32px;
}

/* ===== BREADCRUMB ===== */
.breadcrumb {
    padding: 9px 40px;
    font-size: .8rem;
    color: var(--color-text-muted);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.breadcrumb a {
    color: var(--color-action-500);
    text-decoration: none;
}

.breadcrumb-sep {
    margin: 0 6px;
    opacity: .4;
}

/* ===== ARTICLE LAYOUT ===== */
.article-section {
    padding: 64px 40px;
    max-width: 800px;
    margin: 0 auto;
}

.article-section--hero {
    padding-top: 60px;
    padding-bottom: 0;
}

.article-section--narrow-top {
    padding-top: 0;
}

.article-section--flush-bottom {
    padding-bottom: 0;
}

.article-section--wide {
    max-width: 960px;
}

.article-section--toc {
    padding: 32px 40px 0;
}

/* ===== ENCART CONTENT ===== */    
.encart-section {
    padding: 20px 40px;
    max-width: 1080px;
    background: var(--color-background-100);
    border-radius: var(--radius-lg);
    margin: 0 auto;
}

.encart-body-text {
    font-size: 1rem;
    color: var(--color-text-body);
    line-height: 1.8;
    margin-bottom: 16px;
    text-align: center;
}

@media (max-width: 900px) {
    .encart-section {
        padding: 20px;
        max-width: unset;
    }
    
    .encart-body-text {
        font-size: 1rem;
        color: var(--color-text-body);
        line-height: 1.8;
        margin-bottom: 16px;
        text-align: center;
    }
}



/* ===== ARTICLE TYPOGRAPHY ===== */
.article-h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-foreground);
    line-height: 1.2;
    margin-bottom: 20px;
}

.article-h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: 24px;
}

.article-h2--tight {
    margin-bottom: 16px;
}

.article-body-text {
    font-size: 1rem;
    color: var(--color-text-body);
    line-height: 1.8;
    margin-bottom: 16px;
}

.article-body-text:last-child {
    margin-bottom: 0;
}

.article-lead {
    font-size: 1.15rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.article-lead--spaced {
    margin-bottom: 32px;
}

.article-list {
    font-size: 1rem;
    color: var(--color-text-body);
    line-height: 2;
    padding-left: 24px;
}

.article-caption {
    font-size: .9rem;
    color: var(--color-text-subtle);
    font-style: italic;
    margin-top: 12px;
}

/* ===== ARTICLE BLOCKQUOTE ===== */
.article-blockquote {
    border-left: 4px solid var(--color-action-500);
    padding: 20px 24px;
    background: var(--color-background-100);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 0;
}

.article-blockquote p {
    font-size: 1.05rem;
    font-style: italic;
    color: var(--color-foreground);
    line-height: 1.7;
    margin-bottom: 8px;
}

.article-blockquote cite {
    font-size: .85rem;
    color: var(--color-text-subtle);
    font-style: normal;
    font-weight: 600;
}

/* ===== ARTICLE TABLE ===== */
.article-table-wrap {
    overflow-x: auto;
}

.article-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    line-height: 1.6;
}

.article-table thead tr {
    background: var(--color-background-200);
    text-align: left;
}

.article-table th {
    padding: 12px 16px;
    font-weight: 600;
    border-bottom: 2px solid var(--color-background-300);
}

.article-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-background-200);
}

.article-table td:first-child {
    font-weight: 600;
}

/* ===== SECTION BADGE ===== */
.section-badge {
    display: inline-block;
    padding: 6px 16px;
    background: var(--color-background-200);
    color: var(--color-action-500);
    border-radius: 100px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.section-badge.positive {
    background: var(--color-positive-700);
    color: var(--color-background-50);
}


/* ===== FAQ ACCORDION ===== */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-summary {
    padding: 20px 0;
    font-weight: 600;
    font-size: 1rem;

    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-summary::-webkit-details-marker {
    display: none;
}

.faq-chevron {
    flex-shrink: 0;
    transition: transform .2s;
}

details[open] .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 0 20px;
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* ===== PRICING CARDS ===== */
.pricing-grid {
    display: flex;
    gap: 24px;
    max-width: 1060px;
    margin: 0 auto;
}

.pricing-grid--single {
    max-width: 520px;
}

.pricing-card {
    flex: 1;
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
}

.pricing-card--light {
    background: var(--color-background-300);
}

.pricing-card--primary {
    background: var(--color-action-600);
    color: var(--color-background-50);
}

.pricing-card--dark {
    background: var(--color-content-600);
    color: var(--color-background-50);
}

.pricing-card h3 {
    margin-bottom: 4px;
}

.pricing-subtitle {
    font-size: .8rem;
    margin-bottom: 16px;
    min-height: 1.2em;
}

.pricing-card--light .pricing-subtitle {
    color: var(--color-text-muted);
}

.pricing-card--primary .pricing-subtitle,
.pricing-card--dark .pricing-subtitle {
    color: rgba(255, 255, 255, .7);
}

.pricing-amount {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 2px;
}

.pricing-card--light .pricing-amount {
    color: var(--color-action-500);
}

.pricing-unit {
    font-size: .9rem;
    font-weight: 400;
}

.pricing-card--light .pricing-unit {
    color: var(--color-text-muted);
}

.pricing-card--primary .pricing-unit,
.pricing-card--dark .pricing-unit {
    color: rgba(255, 255, 255, .7);
}

.pricing-note {
    font-size: .75rem;
    margin-bottom: 4px;
}

.pricing-card--light .pricing-note {
    color: var(--color-text-faint);
}

.pricing-card--primary .pricing-note,
.pricing-card--dark .pricing-note {
    color: rgba(255, 255, 255, .5);
}

.pricing-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 20px;
    align-self: flex-start;
}

.pricing-badge--limited {
    background: var(--color-positive-700);
    color: var(--color-background-50);
}

.pricing-spacer {
    display: inline-block;
    min-height: 1.6em;
    margin-bottom: 20px;
}

/* ===== CALCULATEUR DE TARIF (/solution) ===== */
.pricing-calculator {
    max-width: 940px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: var(--color-background-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.calc-panel {
    padding: 32px;
}

.calc-features {
    padding: 32px;
    background: var(--color-background-100);
    border-left: 1px solid var(--color-border);
}

.calc-billing,
.calc-mode {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: var(--color-background-200);
    border-radius: var(--radius-md);
}

.calc-billing-opt,
.calc-mode-opt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 8px;
    border: none;
    background: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text-body);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.calc-billing-opt.is-active,
.calc-mode-opt.is-active {
    background: var(--color-background-50);
    color: var(--color-action-600);
    box-shadow: 0 1px 4px rgba(3, 36, 92, .1);
}

.calc-billing-note,
.calc-mode-note {
    font-size: .7rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.calc-billing-opt.is-active .calc-billing-note,
.calc-mode-opt.is-active .calc-mode-note {
    color: var(--color-action-500);
}

.calc-field {
    margin-top: 24px;
}

.calc-label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text-body);
    margin-bottom: 12px;
}

.calc-label strong {
    color: var(--color-action-600);
}

.calc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: transparent;
    outline: none;
    cursor: pointer;
}

.calc-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right,
            var(--color-action-500) var(--pct, 0%),
            var(--color-background-300) var(--pct, 0%));
}

.calc-slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right,
            var(--color-action-500) var(--pct, 0%),
            var(--color-background-300) var(--pct, 0%));
}

.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--color-action-500);
    box-shadow: 0 1px 5px rgba(3, 36, 92, .3);
    cursor: pointer;
}

.calc-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: var(--color-action-500);
    box-shadow: 0 1px 5px rgba(3, 36, 92, .3);
    cursor: pointer;
}

.calc-scale {
    position: relative;
    height: 1.1em;
    margin: 8px 9px 0;
    font-size: .72rem;
    color: var(--color-text-muted);
}

.calc-scale span {
    position: absolute;
    top: 0;
    white-space: nowrap;
    transform: translateX(-50%);
}

.calc-scale span:nth-child(1) {
    left: 0;
    transform: none;
}

.calc-scale span:nth-child(2) {
    left: 20%;
}

.calc-scale span:nth-child(3) {
    left: 40%;
}

.calc-scale span:nth-child(4) {
    left: 60%;
}

.calc-scale span:nth-child(5) {
    left: 80%;
}

.calc-scale span:nth-child(6) {
    left: 100%;
    transform: translateX(-100%);
}

.calc-scale--steps span:first-child {
    font-weight: 600;
    color: var(--color-action-600);
}

.calc-mode-hint {
    margin-top: 8px;
    font-size: .78rem;
    color: var(--color-text-muted);
}

.calc-result {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}

.calc-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.calc-price s {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.calc-price strong {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--color-foreground);
    line-height: 1;
}

.calc-unit {
    font-size: .9rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.calc-breakdown {
    margin-top: 8px;
    font-size: .85rem;
    color: var(--color-text-secondary);
}

.calc-features-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-action-600);
    margin-bottom: 16px;
}

.calc-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.calc-features-list li {
    position: relative;
    padding-left: 26px;
    font-size: .9rem;
    color: var(--color-text-body);
    line-height: 1.4;
}

.calc-features-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
}

.calc-features-list li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 5px;
    height: 8px;
    border: solid var(--color-action-500);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.calc-features-list li.is-bold {
    font-weight: 700;
}

@media (max-width: 900px) {
    .pricing-calculator {
        grid-template-columns: 1fr;
    }

    .calc-features {
        border-left: none;
        border-top: 1px solid var(--color-border);
    }
}

.pricing-list {
    list-style: "+   ";
    padding-left: 16px;
    margin: 0;
    font-size: .8rem;
    flex: 1;
}

.pricing-card--light .pricing-list {
    color: var(--color-text-secondary);
}

.pricing-card--primary .pricing-list,
.pricing-card--dark .pricing-list {
    color: rgba(255, 255, 255, .85);
}

.pricing-list li {
    padding: 7px 0px;
}

.pricing-list-highlight {
    padding: 8px 12px 8px 24px !important;
    margin: 0 -12px 0 -24px;
    border-radius: 6px;
    font-weight: 700;
    list-style: none;

}

.pricing-card--light .pricing-list-highlight {
    background: var(--color-background-50);
}

.pricing-card--primary .pricing-list-highlight,
.pricing-card--dark .pricing-list-highlight {
    background: rgba(255, 255, 255, .1);
}

.pricing-list-accent {
    color: var(--color-positive-700);
}

.pricing-list-bold {
    font-weight: 600;
}

.pricing-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px;
    border-radius: var(--radius-lg);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.pricing-card--light .pricing-cta {
    background: var(--color-action-500);
    color: var(--color-background-50);
}

.pricing-card--primary .pricing-cta {
    background: var(--color-background-50);
    color: var(--color-action-500);
}

.pricing-card--dark .pricing-cta {
    background: var(--color-background-50);
    color: var(--color-content-600);
}

.offres-pilote-note {
    text-align: center;
    margin-top: 32px;
    font-size: .9rem;
    color: var(--color-text-secondary);
}

.offres-pilote-note h3 {
    text-align: center;
    font-size: .9rem;
    color: var(--color-text-secondary);
}

.offres-pilote-note a {
    color: var(--color-action-500);
    font-weight: 600;
    text-decoration: none;
}

.offres-pilote-note a:hover {
    text-decoration: underline;
}

/* ===== EARLY BIRD BANNER ===== */
.earlybird-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    margin: 0 auto 32px;
    background: var(--color-positive-100);
    color: var(--color-positive-700);
    border-radius: 100px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.earlybird-wrapper {
    text-align: center;
}

/* ===== SOURCE MENTION ===== */
.source-mention {
    text-align: center;
    font-size: .8rem;
    color: var(--color-text-subtle);
    font-style: italic;
    padding: 32px 40px;
    max-width: 800px;
    margin: 0 auto;
}

/* ===== GHOST BUTTON ===== */
.btn-ghost-white {
    background: rgba(255, 255, 255, .2);
    color: var(--color-background-50);
}

.btn-ghost-white:hover {
    background: var(--color-action-700);
    color: var(--color-background-50);
}

/* ===== HONEYPOT ===== */
.form-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* ===== PILOT COMMITMENTS ===== */
.pilot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

.pilot-card {
    border-radius: var(--radius-lg);
    padding: 32px;
}

.pilot-card--light {
    background: var(--color-background-200);
}

.pilot-card--accent {
    background: var(--color-action-500);
    color: var(--color-background-50);
}

.pilot-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: 16px;
}

.pilot-card--accent h3 {
    color: var(--color-background-50);
}

.pilot-card ul {
    font-size: .95rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    padding-left: 20px;
}

.pilot-card--accent ul {
    color: var(--color-background-50);
}

/* ===== BARRES LOGOS ===== */
.logo-bar {
    background: var(--color-background-300);
    padding: 28px 40px;
}

.logo-bar--50 {
    background: var(--color-background-50) !important;
}

.logo-bar--100 {
    background: var(--color-background-100) !important;
}

.logo-bar-title {
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-action-500);
    margin-bottom: 16px;
}

.logo-bar-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    flex-wrap: wrap;
}

.logo-bar-logos img {
    height: 48px;
    width: auto;
    filter: grayscale(1) sepia(1) saturate(1) hue-rotate(190deg) brightness(0.65);
    opacity: .6;
    transition: filter .3s, opacity .3s;
    object-fit: contain;
}

.logo-bar-logos img:hover {
    filter: none;
    opacity: 1;
}

/* ===== TÉMOIGNAGES ===== */
.testimonials {
    padding: 80px 24px;
    background: var(--color-background-50);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    background: var(--color-background-50);
    border: 1px solid var(--color-background-200);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform .2s, box-shadow .2s;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(3, 36, 92, .12);
}

.testimonial-quote {
    color: var(--color-action-500);
    flex-shrink: 0;
}

.testimonial-text {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--color-foreground);
    font-style: italic;
    margin: 0;
    flex: 1;
}

.testimonial-author {
    border-top: 1px solid var(--color-background-200);
    padding-top: 16px;
}

.testimonial-role {
    font-weight: 600;
    color: var(--color-foreground);
    margin: 0 0 2px;
}

.testimonial-location {
    font-size: .9rem;
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 900px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }
}

/* ===== ACTUALITÉS ===== */
.news {
    background: var(--color-background-300);
}

.news-carousel-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.news-carousel {
    flex: 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.news-track {
    display: flex;
    gap: 24px;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.news-embed {
    flex: 0 0 calc((100% - 48px) / 3);
    background: var(--color-background-50);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.news-embed iframe {
    display: block;
    width: 100%;
    border: none;
}

/* Flèches desktop */
.news-arrow {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-round);
    border: 1px solid var(--color-border);
    background: var(--color-background-50);
    color: var(--color-foreground);
    display: flex;
    align-items: center;
    justify-content: center;

    transition: all .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.news-arrow:hover {
    background: var(--color-action-500);
    color: var(--color-background-50);
    border-color: var(--color-action-500);
}

.news-arrow:disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}

/* Dots mobile (masqués sur desktop) */
.news-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.news-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-round);
    background: var(--color-background-100);
    border: none;

    padding: 0;
    transition: background .2s, transform .2s;
}

.news-dot.active {
    background: var(--color-action-500);
    transform: scale(1.2);
}

.news-follow {
    text-align: center;
    margin-top: 40px;
}

/* Bouton outline LinkedIn */
.btn-outline {
    background: var(--color-background-50);
    color: var(--color-action-500);
    border: none;
}

.btn-outline:hover {
    background: var(--color-action-500);
    color: var(--color-background-50);
    border: none;
}

.btn-outline:active {
    background: var(--color-action-600);
    color: var(--color-background-50);
    border: none;
}

/* ===== CTA FINAL ===== */
.cta-section {
    text-align: center;
    padding: 80px 40px 0;
}

.cta-card {
    background: var(--color-action-600);
    color: var(--color-background-50);
    border-radius: var(--radius-lg);
    padding: 64px 48px;
    margin-bottom: -60px;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 80px rgba(37, 76, 185, .5);
}

.cta-section h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.cta-section p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .7);
    max-width: 600px;
    margin: 0 auto 36px;
}

.cta-badge {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-background-50);
    margin-bottom: 20px;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== FOOTER ===== */
.footer {
    background: var(--color-content-700);
    color: rgba(255, 255, 255, .5);
    padding: 120px 40px 32px;
    margin-top: auto;
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 2fr 1fr auto;
    gap: 40px;
}

.footer-brand p {
    font-size: .85rem;
    line-height: 1.6;
    margin-top: 16px;
    max-width: 360px;
}

.footer-brand svg {
    height: 28px;
    width: auto;
}

.footer-brand svg .cls-mps {
    fill: rgba(255, 255, 255, .6);
}

.footer-tagline {
    display: block;
    width: 280px;
    height: auto;
    margin-top: 8px;
    opacity: .6;
}

.footer-col h3 {
    color: var(--color-background-50);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 16px;
}

.footer-col a {
    display: block;
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
    font-size: .85rem;
    padding: 4px 0;
    transition: color .2s;
}

.footer-col a:hover {
    color: var(--color-background-50);
}

.footer-col p {
    font-size: .85rem;
    line-height: 1.5;
}

.footer-partner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.footer-partner p {
    font-size: .85rem;
    line-height: 1.6;
    margin-bottom : 16px;
}

.footer-partner-badge {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.footer-partner-badge img {
    display: block;
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.footer-social a {
    display: inline-flex;
    padding: 0;
}

.footer-social svg {
    width: 20px;
    height: 20px;
    fill: rgba(255, 255, 255, .5);
    transition: fill .2s;
}

.footer-social a:hover svg {
    fill: var(--color-background-50);
}

.footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-bottom p {
    font-size: .75rem;
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
    font-size: .75rem;
    transition: color .2s;
}

.footer-bottom-links a:hover {
    color: var(--color-background-50);
}

/* ===== MODAL ===== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 29, 72, .6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--color-background-50);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    padding: 40px;
    position: relative;
    animation: modalIn .25s ease-out;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--color-background-200);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
    transition: background .2s;
}

.modal-close:hover {
    background: var(--color-background-300);
}

.modal-close svg {
    width: 18px;
    height: 18px;
}

.modal h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: 6px;
}

.modal .modal-subtitle {
    font-size: .9rem;
    color: var(--color-text-secondary);
    margin-bottom: 28px;
}

.form-group {
    margin-bottom: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-group label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: .9rem;
    font-family: inherit;
    color: var(--color-foreground);
    background: var(--color-background-50);
    transition: border-color .2s;
}

.form-group textarea {
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-action-500);
    box-shadow: 0 0 0 3px rgba(37, 76, 185, .12);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-text-faint);
}

/* Test placeholder plus clair sur le formulaire patient */
.patient-search input::placeholder {
    color: var(--color-neutral-300);
}

.form-group.has-error input,
.form-group.has-error select {
    border-color: var(--color-important-700);
    box-shadow: 0 0 0 3px rgba(241, 35, 9, .08);
}

.form-error {
    display: none;
    font-size: .75rem;
    color: var(--color-important-700);
    margin-top: 5px;
    align-items: center;
    gap: 4px;
}

.form-group.has-error .form-error {
    display: flex;
}

.form-error svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.form-submit {
    width: 100%;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.form-submit svg {
    flex-shrink: 0;
}

.form-group-checkbox {
    margin-top: 4px;
}

.form-group label.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    font-size: .75rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    margin-top: 1px;
}

.checkbox-box svg {
    width: 12px;
    height: 12px;
    stroke: var(--color-background-50);
    opacity: 0;
    transition: opacity .15s;
}

.checkbox-label input:checked+.checkbox-box {
    background: var(--color-action-500);
    border-color: var(--color-action-500);
}

.checkbox-label input:checked+.checkbox-box svg {
    opacity: 1;
}

.checkbox-text a {
    color: var(--color-action-500);
    text-decoration: underline;
}

.form-group-checkbox.has-error .checkbox-box {
    border-color: var(--color-important-700);
}

.form-success {
    display: none;
    text-align: center;
    padding: 20px 0;
}

.form-success.active {
    display: block;
}

.form-success .success-icon {
    width: 56px;
    height: 56px;
    background: var(--color-positive-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.form-success .success-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-positive-500);
}

.form-success h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: 8px;
}

.form-success p {
    font-size: .9rem;
    color: var(--color-text-secondary);
}

/* ===== MODAL ZCAL ===== */
.modal-zcal {
    max-width: 1100px;
    width: 95vw;
    padding: 0;
    height: 90vh;
    max-height: 730px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.modal-zcal .modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1010;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.modal-zcal iframe {
    width: 100%;
    height: 100%;
    border: none;
    flex: 1;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp .6s ease-out;
}

/* ===== HERO ===== */
.hero {
    padding: 80px 0 60px;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 48px;
}

.fullpage-hero {
    min-height: calc(85dvh - var(--nav-height, 82px));
}

.hero-content {
    flex-shrink: 0;
    max-width: 690px;
    margin-left: max(40px, calc((100vw - 1280px) / 2));
}

.launch-banner {
    position: sticky;
    top: var(--nav-height, 82px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-positive-700);
    color: var(--color-background-50);
    padding: 10px 20px;
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;

}

.launch-banner-close {
    position: absolute;
    right: 20px;
    display: block;
    opacity: .7;
}

.launch-banner:hover .launch-banner-close {
    opacity: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--color-background-200);
    border-radius: var(--radius-lg);
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-action-500);
    margin-bottom: 24px;
}

.hero h1 {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--color-foreground);
    line-height: 1.15;
    margin-bottom: 20px;
}

.hero h1 span {
    color: var(--color-action-500);
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-action-500);
    margin: 0 0 14px;
    line-height: 1.4;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--color-text-secondary);
    margin-bottom: 32px;
    line-height: 1.7;
}

.hero-lead {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--color-foreground);
    margin-bottom: 10px;
    line-height: 1.4;
}

.hero-baseline {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin-bottom: 32px;
    line-height: 1.6;
}

.hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.hero-segments {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.hero-segments .btn-outline {
    font-size: .85rem;
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .8rem;
    color: var(--color-text-muted);
}

.hero-trust-logos {
    display: flex;
    gap: 16px;
    align-items: center;
}

.hero-trust-logos span {
    font-weight: 600;
    font-size: .75rem;
    color: var(--color-action-600);
    padding: 4px 10px;
    background: var(--color-background-100);
    border-radius: 6px;
}

.hero-visual {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.hero-image {
    width: 100%;
    max-width: 760px;
    height: auto;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    display: block;
    object-fit: cover;
}

.hero-visual-link {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    transition: opacity .2s ease;
}

.hero-visual-link:hover {
    opacity: .94;
}

.hero-visual--v2 {
    justify-content: flex-end;
}

.hm {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    background: var(--color-background-300);
    border-right: none;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    padding: 18px;
    box-shadow: 0 24px 60px -28px rgba(3, 36, 92, .35);
}

.hm-bar,
.hm-bar2 {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 4px 14px;
}

.hm-bar i,
.hm-bar2 i {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-background-500);
    display: inline-block;
}

.hm-bar2 p {
    color: var(--color-neutral-700);
    font-size: .8rem;
    text-align: right;
    width: stretch;
}

.hm-bar i:nth-child(1) { background: var(--color-important-700); }
.hm-bar i:nth-child(2) { background: var(--color-warning-500); }
.hm-bar i:nth-child(3) { background: var(--color-positive-500); }

.hm-bar2 i:nth-child(1) { background: var(--color-neutral-400); }
.hm-bar2 i:nth-child(2) { background: var(--color-neutral-300); }
.hm-bar2 i:nth-child(3) { background: var(--color-neutral-200); }

.hm-bar img {
    margin-left: auto;
    height: 18px;
    width: auto;
    display: block;
    opacity: .95;
}

/* ===== Flux avant → après ===== */
.hm-flow {
    width: 100%;
    max-width: 890px;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) auto minmax(0, 1.18fr);
    align-items: stretch;
    gap: 10px;
}

.hm-panel--before { grid-column: 1; }
.hm-arrow         { grid-column: 2; }

.hm-panel {
    min-width: 0;
    background: var(--color-background-50);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
}

.hm-panel--before {
    padding: 20px;
    background: var(--color-background-100);
    border-radius: var(--radius-lg);

}

.hm-panel--after {
    background: var(--color-background-200);
}

.hm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

/* Cadre qui tient tout le contenu d'une colonne (agenda / slots) */
.hm-frame {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hm-frame--before {
    margin-top: 10px;
    padding: 0px;
    border: transparent;
    border-radius: var(--radius-md);
    background: var(--color-background-100);
}   
.hm-head b {
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-foreground);
}

.hm-pill {
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.hm-pill--live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    color: var(--color-important-700);
}

.hm-pill--live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-important-600);
    box-shadow: 0 0 0 0 rgba(253, 108, 88, .6);
    animation: hm-pulse 2s infinite;
}

@keyframes hm-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(253, 108, 88, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(253, 108, 88, 0); }
    100% { box-shadow: 0 0 0 0 rgba(253, 108, 88, 0); }
}

/* --- Agenda "subi" (patients intercalés) --- */
.hm-agenda {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hm-row {
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
}

.hm-row time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text-subtle);
    min-width: 34px;
}

/* --- Pied du panneau subi : bilan des imprévus refusés --- */
.hm-before-foot {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hm-before-foot span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--color-important-800);
}

.hm-before-foot svg {
    flex-shrink: 0;
    color: var(--color-important-700);
}

/* --- Salle d'attente = créneaux d'urgence prédéfinis --- */
.hm-slots {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hm-slot {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-foreground);
    background: var(--color-background-50);
    border: 1px solid var(--color-background-300);
    border-radius: 9px;
    padding: 9px 11px;
}

.hm-slot .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot--blue { background: var(--color-action-500); }
.dot--darkblue { background: var(--color-content-600); }

.hm-slot .eta {
    margin-left: auto;
    font-size: .74rem;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.hm-slot--active {
    background: var(--color-background-300);
    border-color: transparent;
}

.hm-slot--active .eta {
    font-weight: 700;
}

.hm-slot--sas {
    background: var(--color-background-100);
    border-color: transparent;
}

.sas-badge {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--color-background-50);
    background: var(--color-action-500);
    padding: 2px 6px;
    border-radius: 5px;
}

/* --- Reprise des soins programmés (sous la salle d'attente, dans l'app) --- */
.hm-resume {
    margin-top: 12px;
    padding: 13px 14px;
}

.hm-resume-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-positive-800);
    margin-bottom: 10px;
}

.hm-planned {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}



.hm-planned li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .76rem;
    color: var(--color-text-muted);
    background: var(--color-background-100);
    border-radius: 8px;
    padding: 8px 11px;
}

.hm-planned li.hm-row--before {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .76rem;
    color: var(--color-text-muted);
    padding: 2px;
}

.hm-planned time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--color-text-subtle);
    min-width: 36px;
}

.hm-planned .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-background-800);
    flex-shrink: 0;
}

/* --- Transition : gros chevron double (bascule subi → piloté) --- */
.hm-arrow {
    align-self: center;
    justify-self: center;
    display: flex;
    color: var(--color-action-500);
}

.hm-arrow svg {
    width: 34px;
    height: 34px;
    animation: hm-arrow-nudge 1.9s ease-in-out infinite;
}

.hm-arrow .ch-1 { stroke: var(--color-background-300); }
.hm-arrow .ch-2 { stroke: var(--color-background-600); }

@keyframes hm-arrow-nudge {
    0%, 100% { transform: translateX(-2px); }
    50%      { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .hm-arrow svg { animation: none; }
}

/* Tagline en grand en visuel du hero (page À propos) */
.about-hero-tagline {
    width: 100%;
    max-width: 640px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.hero-definition {
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height:1.5;
}

/* Lien style "définition" : couleur héritée, soulignement pointillé */
.link-def {
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: help;
    transition: text-decoration-color .2s, color .2s;
}

.link-def:hover,
.link-def:focus-visible {
    color: var(--color-action-500);
    text-decoration-color: var(--color-action-500);
}

/* ===== SECTION PROBLEME ===== */
.problem {
    background: var(--color-content-600);
    color:var(--color-background-50);
}

.problem .section-label {
    background: rgba(255, 255, 255, .2);
    color:var(--color-background-50);
}

.problem .section-header h2 {
    color:var(--color-background-50);
}

.section .section-header h2 span,
.section-header h2 span {
    color:var(--color-action-500);
}

.problem .section-header h2 span {
    color:var(--color-background-700);
}

.problem .section-header p {
    color: rgba(255, 255, 255, .70);
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.problem-card {
    background: var(--color-content-700);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
}

a.problem-card--link,
a.problem-card--link h3,
a.problem-card--link p,
a.problem-card--link .problem-stat {
    text-decoration: none;
}

a.problem-card--link {
    display: block;
    color: inherit;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

a.problem-card--link:hover {
    background: var(--color-content-600);
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .25);
}

.problem-card-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, .08);
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    transition: background .2s ease, color .2s ease, gap .2s ease;
}

a.problem-card--link:hover .problem-card-arrow {
    background: rgba(255, 255, 255, .15);
    color: var(--color-background-50);
    gap: 10px;
}

.problem-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, .1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.problem-icon svg {
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, .5);
}

.problem-stat {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-background-50);
    margin-bottom: 8px;
    line-height: 1;
}

.problem-stat-alt1 {
    color: var(--color-action-500);
}

.problem-stat-alt2 {
    color: var(--color-positive-700);
}

.problem-stat-alt {
    color: var(--color-important-700);
}

.problem-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.problem-card p {
    font-size: .875rem;
    color: rgba(255, 255, 255, .70);
    line-height: 1.5;
}

.stat-source {
    font-size: .75rem !important;
    opacity: .6;
    font-style: italic;
    margin-top: 4px;
}

.problem-quote {
    padding: 24px 40px 0;
    text-align: center;
    position: relative;
}

.problem-quote p {
    font-size: 1.1rem;
    font-style: italic;
    color: rgba(255, 255, 255, .65);
    max-width: 860px;
    margin: 0 auto;
    line-height: 1.7;
}

.problem-quote::before {
    content: "\201C";
    font-size: 4rem;
    color: var(--color-action-500);
    line-height: 1;
    display: block;
    margin-bottom: -8px;
}

/* ===== SECTION PARCOURS ===== */
.parcours {
    background: var(--color-background-100);
}

/* Résumé SEO en intro de la FAQ : visible, sobre, intentionnel. */
.seo-summary {
    max-width: 720px;
    margin: 0 auto 48px;
    padding: 0 24px;
    text-align: center;
}

.seo-summary h2 {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text-body);
    margin: 0 0 14px;
}

.seo-summary p {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--color-text-body);
    margin: 0;
}

.seo-summary strong {
    color: var(--color-text-body);
    font-weight: 600;
}

@media (max-width: 640px) {
    .seo-summary {
        margin-bottom: 36px;
        padding: 0 4px;
    }
}

@media (max-width: 640px) {
    .flag {
        width: 24px;
    }
}

/* ===== VALUE TIMELINE ===== */
.value-timeline {
    max-width: 900px;
    margin: 0 auto;
}

.value-timeline-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.value-timeline-segment {
    background: var(--color-action-500);
}

.value-timeline-segment:nth-child(2) {
    background: var(--color-background-500);
}

.value-timeline-segment:nth-child(3) {
    background: var(--color-content-600);
}

.value-timeline-segment + .value-timeline-segment {
    margin-left: 3px;
}

.value-timeline-labels {
    display: flex;
    font-size: .75rem;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 32px;
    position: relative;
    height: 1.4em;
}

.value-timeline-labels span {
    position: absolute;
    transform: translateX(-50%);
}

.value-timeline-labels span:first-child {
    left: 0;
    transform: none;
}

.value-timeline-labels span:nth-child(2) {
    left: 20%;
}

.value-timeline-labels span:nth-child(3) {
    left: 60%;
}

.value-timeline-labels span:last-child {
    left: auto;
    right: 0;
    transform: none;
    color: var(--color-foreground);
    font-size: .85rem;
    font-weight: 700;
}

.value-timeline-details {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    gap: 32px;
}

.value-timeline-item h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: 8px;
}

.value-timeline-item p {
    font-size: .85rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.value-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-round);
    margin-bottom: 12px;
}

.value-timeline-item:nth-child(1) .value-timeline-dot {
    background: var(--color-action-500);
}

.value-timeline-item:nth-child(2) .value-timeline-dot {
    background: var(--color-background-500);
}

.value-timeline-item:nth-child(3) .value-timeline-dot {
    background: var(--color-content-600);
}

.steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    position: relative;
}

.steps-3 {
    grid-template-columns: repeat(3, 1fr);
}

.steps-4 {
    grid-template-columns: repeat(4, 1fr);
}

.steps::before {
    content: '';
    position: absolute;
    top: 24px;
    left: var(--steps-left, 10%);
    width: var(--steps-length, 80%);
    height: 3px;
    background: var(--color-border);
    z-index: 0;
}

.steps::after {
    content: '';
    position: absolute;
    top: 24px;
    left: var(--steps-left, 10%);
    width: var(--steps-progress, 0px);
    height: 3px;
    background: var(--color-action-500);
    z-index: 1;
    will-change: width;
}

.step {
    text-align: center;
    position: relative;
    z-index: 2;
}

.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-action-500);
    color: var(--color-background-50);
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}

.step-number.active {
    box-shadow: 0 0 0 4px rgba(37, 76, 185, .2);
    transform: scale(1.1);
}

/* Numéro et icône superposés au centre du cercle */
.step-num,
.step-ico {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity .3s, transform .3s;
}

.step-num {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.step-ico {
    width: 22px;
    height: 22px;
    color: var(--color-background-50);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5);
}

/* Quand le step est actif : numéro disparaît, icône apparaît */
.step-number.active .step-num {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5);
}

.step-number.active .step-ico {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.step h3 {
    font-size: .9rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: 6px;
    min-height: 2.8em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step p {
    font-size: .8rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .6s cubic-bezier(.25, .1, .25, 1), transform .6s cubic-bezier(.25, .1, .25, 1);
}

.step-number.active ~ div p {
    opacity: 1;
    transform: translateY(0);
}

/* ===== SECTION BENEFICES ===== */
.benefits {
    background: var(--color-background-100);
}

/* Showcase: conteneur principal screenshot + cards overlay */
.benefits-showcase {
    position: relative;
}

/* Texte lead-in centré au-dessus du screenshot */
.benefits-showcase-text {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 32px;
}

.benefits-showcase-text p {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 8px;
}

.benefits-showcase-text p:last-child {
    margin-bottom: 0;
}

/* Screenshot pleine largeur */
.benefits-screenshot {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.benefits-screenshot img {
    width: 100%;
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 40px rgba(3, 36, 92, .12);
}

/* Dégradé sombre en bas pour contraste avec les cartes */
.benefits-screenshot::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(2, 29, 72, .55));
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    pointer-events: none;
}

/* Grid cartes - overlap sur le screenshot */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: -500px;
    position: relative;
    z-index: 2;
    padding: 0 24px;
}

.benefits-grid-flat {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    margin-top: 0;
    padding: 0;
    position: static;
    z-index: auto;
}

.benefits-grid-flat .benefit-card {
    opacity: 1;
    transform: none;
    grid-column: span 2;
}

/* Ligne 2 : 2 cards occupent chacune 3 colonnes (50%) */
.benefits-grid-flat .benefit-card:nth-child(4),
.benefits-grid-flat .benefit-card:nth-child(5) {
    grid-column: span 3;
}


.benefit-card-ghost {
    display: none;
}

/* Cartes flottantes - effet frosted glass */
.benefit-card {
    background: var(--color-background-50);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(219, 229, 245, .6);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: 0 8px 32px rgba(3, 36, 92, .15), 0 2px 8px rgba(3, 36, 92, .08);
    /* Slide-in desktop : état initial caché */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .6s ease-out, transform .6s ease-out, box-shadow .25s;
}

.benefit-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.benefit-card.is-visible:hover {
    box-shadow: 0 12px 48px rgba(3, 36, 92, .2), 0 4px 12px rgba(3, 36, 92, .1);
    transform: translateY(-4px);
}

.benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.benefit-icon svg {
    width: 28px;
    height: 28px;
}

.benefit-icon-blue {
    background: var(--color-background-200);
    color: var(--color-action-500);
}

.benefit-icon-green {
    background: var(--color-positive-100);
    color: var(--color-positive-500);
}

.benefit-icon-teal {
    background: #e0f2f1;
    color: var(--color-positive-900);
}

.benefit-icon-red {
    background: #fde8e8;
    color: var(--color-important-700);
}

.benefit-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.benefit-top .benefit-icon {
    margin-bottom: 0;
}

.benefit-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: 10px;
    min-height: 2.75em;
}

.benefit-stat {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-content-600);
    margin-bottom: 4px;
}

.benefit-card p {
    font-size: .9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.benefit-list {
    list-style: none;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.benefit-list li {
    font-size: .85rem;
    color: var(--color-text-secondary);
    padding-left: 20px;
    position: relative;
}

.benefit-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-action-500);
}

/* ===== SECTION PDSA / SAS ===== */
.pdsa {
    background: var(--color-background-300);
}

.pdsa .section-header p a {
    color: var(--color-action-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pdsa .section-header p a:hover {
    color: var(--color-action-700);
}

.pdsa-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Sous-cadre PDSA/SAS dans /solution */
.pdsa-frame {
    max-width: 980px;
    margin: 0 auto;
    padding: 40px;
    background: var(--color-background-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.pdsa-frame .pdsa-cards {
    grid-template-columns: repeat(2, 1fr);
}

.pdsa-frame .pdsa-card {
    background: var(--color-background-200);
}


.pdsa-card {
    background: var(--color-background-100);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .5s ease-out, transform .5s ease-out, box-shadow .25s;
}

.pdsa-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pdsa-card.is-visible:hover {
    box-shadow: 0 8px 32px rgba(3, 36, 92, .12);
    transform: translateY(-3px);
}

.pdsa-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: 10px;
}

.pdsa-card p {
    font-size: .9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.pdsa-card p a {
    color: var(--color-action-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pdsa-card p a:hover {
    color: var(--color-action-700);
}

.pdsa-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 20px;
    margin:0 20px;
}

.pdsa-legal {
    background: var(--color-background-100);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: .82rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.pdsa-legal a {
    color: var(--color-action-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pdsa-legal a:hover {
    color: var(--color-action-700);
}

/* ===== MOBILE NAV DRAWER ===== */
.nav-hamburger {
    display: none;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--color-content-600);
    border: none;

    padding: 8px 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .2s ease, transform .15s ease;
}

.nav-hamburger:hover {
    opacity: .7;
}

.nav-hamburger:active {
    transform: scale(.96);
}

.nav-hamburger-label-open,
.nav-hamburger-label-close {
    transition: opacity .2s ease;
}

.nav-hamburger-arrow {
    display: inline-block;
    transition: transform .3s ease;
    margin-left: 2px;
}

.nav-hamburger.is-active .nav-hamburger-arrow {
    transform: rotate(180deg);
}

.nav-hamburger-label-close {
    display: none;
}

.nav-hamburger.is-active .nav-hamburger-label-open {
    display: none;
}

.nav-hamburger.is-active .nav-hamburger-label-close {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 29, 72, .4);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.nav-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 360px;
    height: 100%;
    background: rgba(251, 252, 254, .97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 201;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    padding: 80px 24px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -4px 0 24px rgba(2, 29, 72, .08);
}

.nav-drawer.is-open {
    transform: translateX(0);
}

.nav-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-drawer-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    color: var(--color-content-600);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    transition: background .2s ease, color .2s ease;
}

.nav-drawer-link:hover,
.nav-drawer-link:focus-visible {
    background: var(--color-background-200);
    color: var(--color-action-500);
}

.nav-drawer-link.active {
    color: var(--color-action-500);
    background: var(--color-background-200);
}

.nav-drawer-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.nav-drawer-header a {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.nav-drawer-header svg {
    height: 32px;
    width: auto;
}

.nav-drawer-cta {
    margin-top: 16px;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.nav-drawer-link .nav-badge {
    font-size: .65rem;
    padding: 2px 8px;
    background: var(--color-positive-700);
    color: var(--color-background-50);
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}

/* ===== GRILLE COMPARATIF SANS / AVEC ===== */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

.compare-sans,
.compare-avec {
    border-radius: var(--radius-lg);
    padding: 32px;
}

.compare-sans {
    background: var(--color-background-100);
}

.compare-sans h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: 16px;
}

.compare-sans ul {
    font-size: .95rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    padding-left: 20px;
}

.compare-avec {
    background: var(--color-action-500);
    color: var(--color-background-50);
}

.compare-avec h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.compare-avec ul {
    font-size: .95rem;
    line-height: 1.8;
    padding-left: 20px;
}

/* ===== SECTION INTEGRATION ===== */
.integration {
    background: var(--color-background-300);
}

.integration-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

#integration .integration-cards {
    grid-template-columns: repeat(2, 1fr);
}

#avantages .integration-cards {
    grid-template-columns: repeat(3, 1fr);
}

.integration-cards-2 {
    grid-template-columns: repeat(2, 1fr);
}

.integration-card {
    background: var(--color-background-100);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    text-align: center;
}

.integration-card-alt {
    background: var(--color-background-200);
}

.integration-card:hover {
    background: var(--color-background-50);
    transition: ease-in-out .2s;
}

/* Carte entière cliquable (ex. Accès aux soins) */
.integration-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: background .2s ease-in-out, border-color .2s ease-in-out, transform .2s ease-in-out;
}

.integration-card--link:hover {
    background: var(--color-background-50);
    border-color: var(--color-action-500);
    transform: translateY(-2px);
}

.integration-card-more {
    display: block;
    margin-top: 12px;
    font-weight: 600;
    color: var(--color-action-500);
}

/* ===== INTEROP — hero "opérationnel en quelques heures" ===== */
.integration-hero {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    background: var(--color-background-100);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    margin-bottom: 24px;
}

.integration-hero-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background-300);
    color: var(--color-action-500);
}

.integration-hero-body {
    flex: 1;
}

.integration-hero-body h3 {
    font-size: 1.6rem;
    margin: 0 0 10px;
}

.integration-hero-body > p {
    margin: 0 0 20px;
    max-width: 60ch;
}

.integration-hero-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.integration-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--color-text-strong, inherit);
}

.integration-hero-points svg {
    flex-shrink: 0;
    color: var(--color-positive-700);
}

/* Item « à venir » : minuteur en ambre plutôt que la coche teal « disponible ». */
.integration-hero-points li.acces-soon svg {
    color: var(--color-warning-700);
}

.integration-card--reassurance {
    text-align: left;
}

.integration-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.integration-icon--blue-100 {
    background: var(--color-background-100);
    color: var(--color-action-500);
}

.integration-icon--blue {
    background: var(--color-background-200);
    color: var(--color-action-500);
}

.integration-icon--green {
    background: var(--color-positive-100);
    color: var(--color-positive-700);
}

.integration-icon--teal {
    background: var(--color-positive-100);
    color: var(--color-positive-700);
}

.integration-icon--important {
    background: var(--color-important-100);
    color: var(--color-important-800);
}

.integration-icon svg {
    width: 24px;
    height: 24px;
}

/* ===== ACCES PATIENTS — coming soon ===== */
.integration-card--coming {
    position: relative;
    background: var(--color-background-200);
    border-style: dashed;
}

.coming-soon-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--color-positive-700);
    color: var(--color-background-50);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 100px;
}

.coming-soon-badge--info {
    background: var(--color-action-500);
    color: var(--color-background-50);
}

.coming-soon-badge--inline {
    position: static;
    margin-left: 4px;
}

/* ===== KPI GROUPS (pilotes - Ce qu'on mesure) ===== */
.kpi-groups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
    align-items: stretch;
}

.kpi-group {
    background: var(--color-background-100);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.kpi-group-header {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-background-300);
    margin-bottom: 24px;
}

.kpi-group-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-action-500);
    margin-bottom: 8px;
}

.kpi-group-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0;
}

.kpi-group-desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-top: 6px;
}

.kpi-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

.kpi-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.kpi-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kpi-icon svg {
    width: 20px;
    height: 20px;
}

.kpi-icon--blue {
    background: var(--color-background-200);
    color: var(--color-action-500);
}

.kpi-icon--teal,
.kpi-icon--green {
    background: var(--color-positive-100);
    color: var(--color-positive-700);
}

.kpi-text h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0 0 4px;
}

.kpi-text p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 900px) {
    .kpi-groups {
        grid-template-columns: 1fr;
    }

    .kpi-group {
        padding: 24px;
    }
}

.acces-patients-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-md);
}

.acces-patients-visual {
    display: flex;
    justify-content: center;
}

.acces-patients-frosted {
    position: relative;
    width: 100%;
    max-width: 320px;
    filter: drop-shadow(0 24px 48px rgba(3, 36, 92, .18));
}

.acces-patients-frosted img {
    width: 100%;
    height: auto;
    display: block;
}

/* Icône SVG pleine du CTA "Découvrir les centres" : alignée sur la couleur du bouton */
.nav-access-icon {
    fill: currentColor;
    stroke: currentColor;
}

.acces-patients-frosted a {
    display: block;
    transition: opacity .2s ease;
}

.acces-patients-frosted a:hover {
    opacity: .94;
}

.acces-patients-frosted-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .15);
    -webkit-mask-image: url(../img/mps-access-mobile.webp);
    mask-image: url(../img/mps-access-mobile.webp);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}

.acces-patients-frosted-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, .92);
    color: var(--color-content-600);
    border: 1px solid rgba(3, 36, 92, .12);
    border-radius: 100px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 6px 16px rgba(3, 36, 92, .12);
}

@media (max-width: 900px) {
    .acces-patients-cards {
        max-width: none;
        margin-left: 0;
    }

    .acces-patients-visual {
        order: -1;
    }

    .acces-patients-frosted {
        max-width: 240px;
    }
}

.acces-patients-cta {
    text-align: center;
    margin-top: 24px;
}

.btn-coming-soon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--color-background-200);
    color: var(--color-text-secondary);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: not-allowed;
    opacity: .75;
    pointer-events: none;
}

.btn-coming-soon svg {
    flex-shrink: 0;
}

/* ===== CTA pilote proéminent (tarifs /solution) ===== */
.btn-lg {
    padding: 16px 32px;
    font-size: 1rem;
}

.tarifs-pilote-cta {
    margin-top: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.tarifs-pilote-cta .offres-pilote-note {
    margin: 0;
}

/* ===== RECHERCHE PATIENT (/patient) ===== */
.patient-search {
    margin: 28px 0 8px;
    padding: 24px;
    background: var(--color-background-200);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    max-width: 560px;
}

.patient-search-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.patient-search .form-group {
    margin-bottom: 0;
}

.patient-autocomplete {
    position: relative;
}

.patient-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--color-background-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(3, 36, 92, .12);
    overflow: hidden;
}

.patient-suggestions.is-open {
    display: block;
}

.patient-suggestion {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: .9rem;
    color: var(--color-foreground);
    cursor: pointer;
}

.patient-suggestion:hover,
.patient-suggestion:focus {
    background: var(--color-background-200);
}

.patient-search .form-submit {
    margin-top: 16px;
    width: 100%;
    justify-content: center;
}

.patient-search-hint {
    margin: 16px 0 0;
    font-size: .85rem;
    font-weight: 500;
    color: var(--color-text-body);
    line-height: 1.5;
}

.patient-search-legal {
    margin-top: 12px;
    font-size: .78rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .patient-search-row {
        grid-template-columns: 1fr;
    }

    .patient-search {
        max-width: 100%;
    }
}

/* ===== INTEGRATION — variante sombre ===== */
.integration--dark {
    background: var(--color-content-600);
    color: var(--color-background-50);
}

.integration--dark .section-header h2,
.integration--dark .integration-card h3 {
    color: var(--color-background-50);
}

.integration--dark .section-header p,
.integration--dark .integration-card p {
    color: rgba(255, 255, 255, .75);
}

.integration--dark .integration-card {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
}

.integration--dark .integration-card:hover {
    background: rgba(255, 255, 255, .08);
}

.integration--dark .integration-icon--blue,
.integration--dark .integration-icon--blue-100 {
    background: rgba(255, 255, 255, .08);
    color: #94b3ff;
}

.integration--dark .integration-icon--green,
.integration--dark .integration-icon--teal {
    background: rgba(74, 222, 128, .12);
    color: #4ade80;
}

/* ===== SOIN NON PROGRAMMÉ EN CHIFFRES — stats sourcées ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1060px;
    margin: 0 auto;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    background: var(--color-background-100);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(3, 36, 92, .08);
}

.stat-card-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-action-500);
}

.stat-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0;
    line-height: 1.35;
}

.stat-card p {
    font-size: .85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.stat-card .stat-source {
    font-size: .72rem;
    color: var(--color-text-faint);
    font-style: italic;
    flex: none;
}

.stat-card-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-action-500);
    font-size: .85rem;
    font-weight: 600;
    transition: gap .2s ease;
}

.stat-card:hover .stat-card-arrow {
    gap: 10px;
}

/* ===== VALEUR DES 12h — note de fin ===== */
.valeur-12h-note {
    text-align: center;
    margin-top: 24px;
    font-size: .95rem;
    font-style: italic;
    color: var(--color-text-secondary);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== POUR ALLER PLUS LOIN — cross-linking ressources ===== */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    max-width: 1060px;
    margin: 0 auto;
}

.related-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    background: var(--color-background-100);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(3, 36, 92, .08);
    border-color: var(--color-action-500);
}

.related-label {
    align-self: flex-start;
    padding: 3px 10px;
    background: var(--color-background-200);
    color: var(--color-text-secondary);
    border-radius: 100px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.related-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0;
    line-height: 1.35;
}

.related-card p {
    font-size: .85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.related-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-action-500);
    font-size: .85rem;
    font-weight: 600;
    transition: gap .2s ease;
}

.related-card:hover .related-arrow {
    gap: 10px;
}

/* ===== POSITIONNEMENT — schéma 2 flux ===== */
.persona-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1060px;
    margin: 0 auto 24px;
}

.persona-flow {
    position: relative;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

/* La carte est un lien <a> : on neutralise le soulignement sur tout son contenu. */
.persona-flow,
.persona-flow h3,
.persona-flow p,
.persona-flow .persona-arrow {
    text-decoration: none;
}

.persona-flow {
    gap: var(--space-xs);
}

.persona-flow:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .15);
}

.persona-flow--planned {
    background: var(--color-content-600);
    color:var(--color-background-50);}

.persona-flow--imprevu {
    background: var(--color-action-500);
}

.persona-flow h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.6;
    color: var(--color-background-100);
}

.persona-flow p {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-background-50);
}

.persona-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-top:  60px;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-background-10);
    border-radius: 100px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text-body);
    transition: background .2s ease, color .2s ease, gap .2s ease;
}

a.persona-flow--planned .persona-arrow {
    background: rgba(255, 255, 255, .9);
}
a.persona-flow--imprevu .persona-arrow {
    background: rgba(255, 255, 255, .8);
}

a.persona-flow:hover .persona-arrow {
    background: rgba(255, 255, 255, .25);
    color: var(--color-background-50);
    font-weight: 700;
    gap: var(--space-sm);
}

/* Badge icône en tête de carte (cohérent avec les autres sections). */
.persona-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-sm);
    border-radius: 14px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.persona-icon svg {
    width: 26px;
    height: 26px;
}

/* ===== Variante « convergence » : deux publics → une plateforme ===== */
.persona-grid--converge {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    column-gap: clamp(40px, 5vw, 72px);
    row-gap: 0;
    position: relative;
}

.persona-grid--converge .persona-flow,
.persona-grid--converge .persona-hub {
    position: relative;
    z-index: 1;
}

/* Respiration fixe entre le texte et la pilule CTA. */
.persona-grid--converge .persona-arrow {
    margin-top: var(--space-lg);
}

/* Point de convergence : pas de logo (déjà nommé dans le titre). Le hub n'est
   qu'une petite zone qui accueille les deux doubles chevrons en quinconce. */
.persona-hub {
    align-self: center;
    position: relative;
    width: 80px;
    height: 58px;
}

/* Double chevron repris du hero, en quinconce : médecins ›› ‹‹ patients,
   décalés en diagonale (›› en haut à gauche, ‹‹ en bas à droite). */
.persona-conv-arrow {
    position: absolute;
    display: flex;
    z-index: 2;
}

.persona-conv-arrow svg {
    width: 34px;
    height: 34px;
    animation: hm-arrow-nudge 1.9s ease-in-out infinite;
}

.persona-conv-arrow--left {
    top: 4px;
    left: 4px;
}

.persona-conv-arrow--right {
    right: 4px;
    bottom: 4px;
    transform: scaleX(-1);
}

/* Double chevron dégradé façon hero, décalé plus foncé pour ressortir sur le
   fond background-300 de la section (le couple du hero y serait invisible). */
.persona-conv-arrow .ch-1 { stroke: var(--color-background-400); }
.persona-conv-arrow .ch-2 { stroke: var(--color-background-600); }

@media (prefers-reduced-motion: reduce) {
    .persona-conv-arrow svg {
        animation: none;
    }
}


.persona-list {
    padding-left: 20px;
    flex: 1;
    font-size: .95rem;
    line-height: 1.8;
}

.persona-list li {
    line-height: 2rem;
}

.persona-footer {
    font-size: .78rem;
    font-style: italic;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid;
    line-height: 1.45;
}

.persona-flow--planned .persona-footer {
    color: var(--color-text-faint);
    border-top-color: var(--color-border);
}

.persona-flow--imprevu .persona-footer {
    color: rgba(255, 255, 255, .75);
    border-top-color: rgba(255, 255, 255, .2);
}

.persona-convergence {
    color: var(--color-action-600) !important;
    font-style: unset !important;
}

/* Encart "à venir" — annonce CSNP (fin 2026) */
.persona-announce {
    max-width: 1060px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 22px 28px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-background-50);
}

.persona-announce-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--color-positive-700);
    color: var(--color-background-50);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 100px;
    white-space: nowrap;
}

.persona-announce-text {
    flex: 1 1 360px;
}

.persona-announce-text h3 {
    font-size: 1.05rem;
    margin: 0 0 4px;
}

.persona-announce-text p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: .95rem;
    line-height: 1.6;
}

.persona-announce-link {
    white-space: nowrap;
    font-weight: 600;
    color: var(--color-action-500);
    text-decoration: none;
}

.persona-announce-link:hover {
    text-decoration: underline;
}


@media (max-width: 900px) {
    .persona-grid {
        grid-template-columns: 1fr;
    }

    /* Sur mobile, on fait remonter le flux « imprévu » avant le flux planifié. */
    .persona-flow--imprevu {
        order: -1;
    }
    .persona-flow--planned {
        background: var(--color-background-200);
    }

    /* --- Variante convergence en colonne --- */
    .persona-grid--converge {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: clamp(22px, 7vw, 34px);
    }

    /* Ordre narratif médecins → plateforme → patients (on annule le flip). */
    .persona-grid--converge .persona-flow--imprevu {
        order: 0;
    }

    /* On garde un fond foncé lisible (texte clair) sur la carte médecins. */
    .persona-grid--converge .persona-flow--planned {
        background: var(--color-content-600);
    }

    /* En colonne : le hub (zone des chevrons) reste centré ; les deux doubles
       chevrons passent en vertical, toujours en quinconce (⌄ décalé à gauche
       et en haut, ⌃ décalé à droite et en bas). */
    .persona-grid--converge .persona-hub {
        justify-self: center;
        width: 80px;
        height: auto;
        min-height: 56px;
    }

    .persona-grid--converge .persona-conv-arrow--left {
        left: calc(50% - 13px);
        top: 2px;
        transform: translateX(-50%) rotate(90deg);
    }

    .persona-grid--converge .persona-conv-arrow--right {
        left: calc(50% + 13px);
        right: auto;
        top: auto;
        bottom: 2px;
        transform: translateX(-50%) rotate(-90deg);
    }

    .persona-announce {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    /* En colonne, le flex-basis de 360px s'appliquerait sur la hauteur et
       creuserait un grand vide sous le texte : on le neutralise. */
    .persona-announce-text {
        flex: 0 0 auto;
        width: 100%;
    }

}

.integration-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: 8px;
}


.integration-card p {
    font-size: .85rem;
    color: var(--color-text-secondary);
}

/* ===== BADGE MELIA ===== */
.melia-label {
    display: inline-flex;
    padding: 3px 10px;
    background: var(--color-action-500);
    color: var(--color-background-50);
    font-size: .75rem;
    font-weight: 600;
    border-radius: 8px;
    margin-bottom: 8px;
}

/* ===== SECTION EQUIPE ===== */

.team {
    background: var(--color-background-300);
}

.team-home {
    background: var(--color-background-100);
}

.team-story {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.team-story p {
    font-size: .95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;
}

.team-story p:last-child {
    margin-bottom: 0;
}

.team-header {
    text-align: center;
    margin-bottom: 40px;
}

.team-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: 8px;
}

.team-header p {
    font-size: 1rem;
    color: var(--color-text-secondary);
}

/* ===== PAGES LÉGALES ===== */
.legal-page {
    background: var(--color-background-200);
    padding: 80px 40px;
    min-height: 100vh;
}

.legal-inner {
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-background-50);
    border-radius: var(--radius-lg);
    padding: 60px;
    box-shadow: 0 1px 3px rgba(3, 36, 92, .06);
}

.legal-inner h1 {
    font-size: 2rem;
    color: var(--color-content-700);
    margin-bottom: 8px;
}

.legal-updated {
    font-size: .85rem;
    color: var(--color-text-muted);
    margin-bottom: 40px;
}

.legal-inner h2 {
    font-size: 1.15rem;
    color: var(--color-content-600);
    margin-top: 36px;
    margin-bottom: 12px;
}

.legal-inner p {
    font-size: .9rem;
    color: var(--color-foreground);
    line-height: 1.75;
    margin-bottom: 12px;
}

.legal-inner ul {
    list-style: none;
    padding: 0;
    margin-bottom: 12px;
}

.legal-inner ul li {
    font-size: .9rem;
    color: var(--color-foreground);
    line-height: 1.75;
    padding-left: 20px;
    position: relative;
}

.legal-inner ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-action-500);
}

.legal-inner a {
    color: var(--color-action-500);
    text-decoration: none;
}

.legal-inner a:hover {
    text-decoration: underline;
}

/* ===== PAGE CONTACT ===== */
.contact-page {
    background: var(--color-background-200);
    padding: 80px 40px;
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.contact-inner {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 0 56px;
    background: var(--color-background-50);
    border-radius: var(--radius-lg);
    padding: 48px 48px 40px;
}

.contact-intro {
    position: sticky;
    top: 120px;
    align-self: start;
}

.contact-inner h1 {
    font-size: 2rem;
    color: var(--color-content-700);
    margin-bottom: 12px;
}

.contact-subtitle {
    font-size: .9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

.contact-inner select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: .9rem;
    color: var(--color-content-600);
    background: var(--color-background-50);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.contact-inner select:focus {
    outline: none;
    border-color: var(--color-action-500);
    box-shadow: 0 0 0 3px rgba(37, 76, 185, .12);
}

.contact-inner textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: .9rem;
    font-family: inherit;
    color: var(--color-content-600);
    resize: vertical;
    min-height: 120px;
}

.contact-inner textarea:focus {
    outline: none;
    border-color: var(--color-action-500);
    box-shadow: 0 0 0 3px rgba(37, 76, 185, .12);
}

.contact-inner .has-error select,
.contact-inner .has-error textarea {
    border-color: var(--color-important-700);
    box-shadow: 0 0 0 3px rgba(241, 35, 9, .08);
}

/* ===== RESPONSIVE 900px — NAV + spacing only ===== */
@media (max-width: 900px) {
    .nav-link {
        display: none;
    }

    .btn-nav {
        display: none;
    }

    .nav-hamburger {
        display: flex;
    }

    section {
        padding: 60px 24px;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .integration-cards,
    #integration .integration-cards,
    #avantages .integration-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefits-grid-flat {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .benefits-grid-flat .benefit-card,
    .benefits-grid-flat .benefit-card.is-visible,
    .benefits-grid-flat .benefit-card:nth-child(4),
    .benefits-grid-flat .benefit-card:nth-child(5) {
        grid-column: auto;
        width: 100%;
        max-width: none;
        opacity: 1;
    }

    .article-section {
        padding: 40px 24px;
    }

    .article-section--hero {
        padding-top: 40px;
    }

    .article-section--toc {
        padding: 24px 24px 0;
    }

    .article-h1 {
        font-size: 2rem;
    }

    .breadcrumb {
        padding: 9px 24px;
    }
}

/* ===== RESPONSIVE 1080px — stack hero plus tôt ===== */
@media (max-width: 1368px) {
    .hero {
        flex-direction: column;
        gap: var(--space-lg);
    }
    .fullpage-hero {
        min-height: unset;
    }
    .hm {
        max-width: 100%;
        border-right: 1px solid var(--color-background-300);
        border-radius: var(--radius-lg);
    }
}

@media (max-width: 1080px) {
    .hero {
        flex-direction: column;
        gap: var(--space-lg);
        padding: 40px 40px 60px;
        max-width: 720px;
        margin: 0 auto;
        align-items: stretch;
    }

    .hero-content {
        max-width: 100%;
        margin-left: 0;
    }

    .hero-visual {
        width: 100%;
        justify-content: stretch;
    }

    .hero-image {
        border-radius: var(--radius-md);
        max-width: 100%;
        width: 100%;
    }

    .hm {
        max-width: 100%;
        border-right: 1px solid var(--color-background-300);
        border-radius: var(--radius-lg);
    }
}

/* ===== RESPONSIVE 768px — layout shifts ===== */
@media (max-width: 900px) {
    .hero {
        padding: 20px 40px 60px;
        text-align: center;
    }

    .hero-ctas {
        justify-content: center;
    }

    .hero-trust {
        justify-content: center;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .pdsa-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pdsa-frame {
        padding: 20px;
    }

    .pdsa-frame .pdsa-cards {
        grid-template-columns: 1fr;
    }

    .pdsa-card {
        opacity: 1;
        transform: none;
    }

    .compare-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .compare-sans,
    .compare-avec {
        padding: 24px;
    }

    .pricing-grid {
        flex-direction: column;
    }

    .value-timeline-details {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pilot-grid {
        grid-template-columns: 1fr;
    }

    /* Carrousel mobile : 1 post visible + dots */
    .news-arrow {
        display: none;
    }

    .news-carousel-wrapper {
        gap: 0;
    }

    .news-embed {
        flex: 0 0 100%;
        position: relative;
    }

    .news-embed::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .news-track {
        gap: 0;
    }

    .news-dots {
        display: flex;
    }

    /* --- Benefits mobile : horizontal scroll-jack --- */
    .benefits {
        background: var(--color-background-50);
    }

    .benefits .section-inner {
        min-height: inherit;
    }

    .benefits .section-header h2 {
        color: var(--color-foreground);
    }

    .benefits .section-header p {
        color: var(--color-text-secondary);
    }

    .benefits-showcase {
        position: sticky;
        top: 48px;
        height: calc(100vh - 48px);
        overflow: hidden;
    }

    .benefits-screenshot {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        max-height: 55vh;
        overflow: hidden;
        border-radius: var(--radius-md);
    }

    .benefits-screenshot img {
        border-radius: var(--radius-md);
        width: 100%;
        height: auto;
    }

    .benefits-screenshot::after {
        display: block;
        height: 70%;
        background: linear-gradient(to bottom, transparent, rgba(2, 29, 72, .70));
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        opacity: 0;
        transition: opacity .4s ease-out;
    }

    .benefits-screenshot.has-overlay::after {
        opacity: 1;
    }

    .benefits-grid {
        display: flex;
        gap: 16px;
        position: absolute;
        top: calc(40vh - 60px);
        left: 0;
        z-index: 2;
        padding: 0 20px 0 32px;
        margin-top: 0;
        will-change: transform;
    }

    .benefits-showcase-text {
        text-align: left;
        position: relative;
        z-index: 3;
        padding-top: 12px;
    }

    .benefit-card,
    .benefit-card.is-visible {
        width: calc(100vw - 100px);
        max-width: 400px;
        flex-shrink: 0;
        background: var(--color-background-50);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid rgba(219, 229, 245, .5);
        box-shadow: none;
        padding: 24px 20px;
        opacity: .35;
        transform: none;
        transition: opacity .3s ease-out;
    
    }

    .benefit-card.is-active {
        opacity: 1;
    }

    .benefit-card.benefit-card-ghost {
        display: block;
        opacity: 0 !important;
        pointer-events: none;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0;
        height: 0;
        min-height: 0;
        overflow: hidden;
    }

    .benefit-card:hover {
        transform: none;
        box-shadow: 0 8px 32px rgba(3, 36, 92, .12), 0 2px 8px rgba(3, 36, 92, .06);
    }


    .steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .steps::before {
        display: block;
        top: 24px;
        bottom: 24px;
        left: 23px;
        right: auto;
        width: 3px;
        height: auto;
        background: var(--color-border);
        z-index: 0;
    }

    .steps::after {
        content: '';
        position: absolute;
        top: 24px;
        left: 23px;
        width: 3px;
        height: var(--steps-progress, 0px);
        background: var(--color-action-500);
        z-index: 1;
        will-change: height;
    }

    .step {
        display: grid;
        grid-template-columns: 48px 1fr;
        text-align: left;
        gap: 16px;
        align-items: start;
        z-index: 2;
    }

    .step h3 {
        justify-content: left;
    }

    .step-number {
        margin: 0;
        grid-row: 1 / 3;
        transition: transform .3s, box-shadow .3s;
    }

    .step-number.active {
        box-shadow: 0 0 0 4px rgba(37, 76, 185, .2);
        transform: scale(1.1);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .cta-section {
        padding: 60px 24px 0;
    }

    .footer {
        padding: 100px 24px 32px;
    }

    .legal-page {
        padding: 120px 24px 60px;
    }

    .legal-inner {
        padding: 40px 32px;
    }

    .contact-page {
        padding: 90px 24px 60px;
    }

    .contact-inner {
        gap: 0 40px;
        padding: 40px 32px;
    }
}

@media (max-width: 900px) {
    #integration .integration-cards {
        grid-template-columns: 1fr;
    }

    .integration-hero {
        flex-direction: column;
        gap: 20px;
        padding: 28px;
    }

    .integration-hero-body h3 {
        font-size: 1.35rem;
    }
}

/* ===== RESPONSIVE 640px ===== */
@media (max-width: 640px) {
    .hm-flow {
        grid-template-columns: 1fr;
    }

    .hm-panel--before,
    .hm-arrow,
    .hm {
        grid-column: 1;
    }

    .hm-panel--before {
        margin-top: 0;
    }

    .hm-arrow {
        transform: rotate(90deg);
        margin: 2px auto;
    }

    .problem-grid {
        grid-template-columns: 1fr;
    }

    .benefits-grid-flat {
        grid-template-columns: 1fr;
    }

    .integration-cards,
    #avantages .integration-cards {
        grid-template-columns: 1fr;
    }

    .nav {
        padding: 12px 16px;
    }

    .cta-section {
        padding: 48px 16px 0;
    }

    .cta-card {
        padding: 40px 24px;
        margin-bottom: -40px;
    }

    .cta-section h2 {
        font-size: 1.75rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-buttons .btn {
        justify-content: center;
    }

    .footer {
        padding: 72px 16px 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }

    .footer-partner {
        align-items: center;
        justify-content: center;
    }

    .footer-partner-badge {
        align-items: center;
        justify-content: center;
    }

    .footer-col {
        display: none;
    }

    .footer-brand p {
        max-width: none;
        font-size: .8rem;
    }

    .footer-tagline {
        margin: 8px auto 0;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-bottom {
        margin-top: 24px;
        flex-direction: column;
        text-align: center;
    }

    /* Barres logos mobile */
    .logo-bar {
        padding: 24px 16px;
    }

    .logo-bar-logos {
        gap: 20px 28px;
    }

    .logo-bar-logos img {
        height: 28px;
    }

    .logo-bar-title {
        margin-bottom: 12px;
    }



    .legal-page {
        padding: 100px 16px 48px;
    }

    .legal-inner {
        padding: 32px 20px;
    }

    .legal-inner h1 {
        font-size: 1.5rem;
    }

    .legal-inner h2 {
        font-size: 1.05rem;
    }

    .contact-page {
        padding: 80px 16px 48px;
    }

    .contact-inner {
        grid-template-columns: 1fr;
        padding: 32px 20px;
    }

    .contact-intro {
        position: static;
        margin-bottom: 24px;
    }

    .contact-inner h1 {
        font-size: 1.5rem;
    }

    .modal {
        padding: 28px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* Benefits mobile - ajuster pour nav plus petite */
    .benefits-showcase {
        top: 52px;
        height: calc(100vh - 52px);
    }

    .benefits-screenshot {
        max-height: 45vh;
    }

    .benefits-grid {
        top: calc(32vh - 60px);
    }

    .benefit-card,
    .benefit-card.is-visible {
        padding: 20px 16px;
        width: calc(100vw - 90px);
    }

    .benefit-card h3 {
        min-height: auto;
    }

    /* Hero mobile */
    .hero h1 {
        font-size: 1.75rem;
    }

    .hero-eyebrow {
        font-size: 0.7rem;
        margin-bottom: 10px;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-lead {
        font-size: 1.15rem;
    }

    .hero-baseline {
        font-size: .95rem;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-ctas .btn {
        justify-content: center;
    }

    .problem-quote {
        padding: 24px 16px;
    }

    .team-founders {
        flex-wrap: wrap;
        gap: 32px;
    }

    .founder-photo {
        width: 110px;
        height: 110px;
    }
}

/* ===== LANDSCAPE MOBILE - désactiver scroll-jack ===== */
@media (max-width: 1080px) and (orientation: landscape) {
    .benefits {
        background: var(--color-background-50);
    }

    .benefits .section-header h2 {
        color: var(--color-content-700);
    }

    .benefits .section-header p {
        color: var(--color-text-secondary);
    }

    .benefits-showcase {
        position: relative;
        top: auto;
        height: auto;
        overflow: visible;
    }

    .benefits-screenshot {
        position: relative;
        top: auto;
        max-height: 30vh;
    }

    .benefits-grid {
        position: relative;
        bottom: auto;
        display: grid;
        grid-template-columns: 1fr;
        width: auto;
        margin-top: 16px;
        transform: none !important;
    }

    .benefit-card {
        width: auto;
        max-width: none;
        opacity: 1;
    }

}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .benefit-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .benefits-grid {
        transition: none !important;
    }

    .nav-hamburger {
        transition: none !important;
    }

    .nav-drawer {
        transition: none !important;
    }

    .nav-overlay {
        transition: none !important;
    }
}

/* ============================================================
   PAGE PATIENT — refonte (hero navy + sections)
   ============================================================ */

/* --- Hero navy plein écran --- */
.hero--patient {
    background: var(--color-content-600);
    color: var(--color-background-50);
    overflow: hidden;
}

.hero--patient .hero-eyebrow {
    color: var(--color-action-50);
}

.hero--patient h1,
.hero--patient h1 span {
    color: var(--color-background-50);
}

.hero--patient h1 span {
    color: var(--color-action-50);
}

.hero--patient .hero-subtitle {
    color: rgba(255, 255, 255, .78);
}

.hero--patient .hero-trust {
    color: rgba(255, 255, 255, .72);
    flex-wrap: wrap;
}

/* garde le fond navy full-bleed quand le hero passe en colonne (≤1080px) */
@media (max-width: 1080px) {
    .hero--patient {
        max-width: none;
        margin: 0;
        padding-left: max(40px, calc((100vw - 720px) / 2));
        padding-right: max(40px, calc((100vw - 720px) / 2));
    }
}

/* --- Formulaire lieu + email sur fond sombre --- */
.patient-search--dark {
    background: var(--color-action-600);
    border-color: rgba(255, 255, 255, .16);
}

.patient-search--dark .form-group label {
    color: rgba(255, 255, 255, .88);
}

.patient-search--dark .form-group input {
    background: var(--color-background-50);
    border-color: rgba(255, 255, 255, .2);
    color: var(--color-foreground);
}

.patient-search--dark .patient-search-hint {
    color: rgba(255, 255, 255, .82);
}

.patient-search--dark .patient-search-legal {
    color: rgba(255, 255, 255, .62);
}

.patient-search--dark .patient-search-legal a {
    color: var(--color-action-50);
}

/* --- Visuel téléphone dans le hero --- */
.hero-phone {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-phone::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(72, 142, 255, .4), transparent 68%);
    z-index: 0;
}

.hero-phone img {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 100%;
    max-height: 540px;
    display: block;
    filter: drop-shadow(0 32px 64px rgba(0, 0, 0, .45));
}

@media (max-width: 1080px) {
    .hero-phone img {
        max-height: 460px;
    }
}

/* --- Section "Le bon soin, au bon moment" : texte + capture --- */
.section--tint {
    background: var(--color-background-100);
}

.patient-split {
    display: flex;
    align-items: center;
    gap: 56px;
}

.patient-split-text {
    flex: 1;
    min-width: 0;
}

.patient-split-visual {
    flex: 1;
    min-width: 0;
}

.patient-split-visual img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: 0 28px 64px -30px rgba(3, 36, 92, .4);
    display: block;
}

.patient-points {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.patient-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--color-text-body);
}

.patient-points svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--color-positive-700);
}

@media (max-width: 900px) {
    .patient-split {
        flex-direction: column;
        gap: 32px;
    }
}

/* --- Bandeau "Vos données protégées" : pills --- */
.data-pills {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

.data-pills span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 100px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--color-background-50);
}

.data-pills svg {
    flex-shrink: 0;
    color: #4ade80;
}

/* --- CTA final : ligne secondaire "vous êtes médecin ?" ---
   Sélecteur .cta-card pour passer devant `.cta-section p` (plus spécifique),
   sinon font-size/margin sont écrasés. */
.cta-card .cta-card-foot {
    margin: 28px auto 0;
    font-size: .82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .65);
}

.cta-card-foot a {
    color: var(--color-background-50);
    font-weight: 600;
    text-decoration: underline;
}

/* =============================================================
   Barre de partage social (partials/share.php)
   Composant global : socle inline horizontal, rail vertical sticky
   sur grand écran, bouton natif sur mobile.
   ============================================================= */
.article-share { display: flex; align-items: center; gap: 10px; margin-top: 28px; justify-content: center; }
/* wrapper d'alignement pour les pages hors-article (Solution, Patients…) */
.article-share-host { max-width: 860px; margin: 0 auto; padding: 0 40px; }
.article-share-label {
    font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-text-muted); margin-right: 2px;
}
.article-share-btn {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    width: 38px; height: 38px; padding: 0; border-radius: 50%;
    border: 1px solid var(--color-border); background: var(--color-background-100);
    color: var(--color-text-secondary); cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.article-share-btn:hover { color: var(--color-action-500); border-color: var(--color-action-500); }
.article-share-btn svg { width: 18px; height: 18px; }
.article-share-copied {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--color-content-600); color: #fff; font-size: .7rem; font-weight: 600;
    padding: 4px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none;
    box-shadow: 0 6px 18px rgba(3, 36, 92, .22);
}
/* Bouton de partage natif (feuille de partage OS) — activé par JS via .can-native,
   affiché uniquement sur mobile ; ailleurs on garde les icônes. */
.article-share-native {
    display: none; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 100px; cursor: pointer;
    border: 0px; 
    color: var(--color-action-500); 
    background: var(--color-background-50);
    font-family: inherit; font-size: .85rem; font-weight: 600;
}
.article-share-native svg { width: 18px; height: 18px; }

@media (max-width: 767px) {
    .article-share.can-native .article-share-btn,
    .article-share.can-native .article-share-label { display: none; }
    .article-share.can-native .article-share-native { display: inline-flex; }
}

/* Grand écran : la barre devient un rail vertical sticky collé au bord gauche
   de la page (10px de marge). */
@media (min-width: 1280px) {
    .article-share {
        position: fixed; z-index: 20;
        top: 50%; transform: translateY(-50%);
        left: 10px;
        flex-direction: column; gap: 8px; margin-top: 0;
        padding: 10px 9px; border-radius: 100px;
        /* fond légèrement translucide + flou d'arrière-plan (givré discret) */
        background: color-mix(in srgb, var(--color-background-50) 78%, transparent);
        -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
        border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
        box-shadow: 0 10px 30px rgba(3, 36, 92, .10);
    }
    /* dans le rail, le wrapper d'alignement ne doit rien contraindre */
    .article-share-host { max-width: none; margin: 0; padding: 0; }
    .article-share .article-share-label { display: none; }
}