/* Permanent approved Grand typography and page composition. */
/* Explicit semantic sizes; never derived from a page's rem value. */


html:root {
    --type-feature-title: 48px;
    --type-page-title: 36px;
    --type-section-title: 28px;
    --type-card-title: 23px;
    --type-subheading: 21px;
    --type-compact-heading: 18px;
    --type-lead: 18px;
    --type-body: 16px;
    --type-secondary: 15px;
    --type-article: 19px;
    --type-meta: 13px;
    --type-breadcrumb: 14px;
    --type-nav: 15px;
    --type-button: 15px;
    --type-brand: 18px;
    --type-brand-sub: 16px;
    --type-price: 48px;
    --type-topbar: 15px;
}

html:root {
    --space-content: 8px;
    --space-heading-content: 8px;
    --space-section: 18px;
    --space-section-compact: 12px;
}

html:root .home-first-screen-content {
    display: contents;
}

html:root body {
    font-size: var(--type-body);
}

html:root .section-label,
html:root .home-eyebrow,
html:root .article-date,
html:root .patient-overlay span,
html:root .site-footer {
    font-size: var(--type-meta);
}

html:root .top-bar {
    font-size: var(--type-topbar);
}

html:root .brand-name {
    font-size: var(--type-brand);
}

html:root .brand-profession {
    font-size: var(--type-brand-sub);
}

html:root .main-nav a,
html:root .mobile-nav a {
    font-size: var(--type-nav);
}

html:root .site-breadcrumb,
html:root .conseils-breadcrumb,
html:root .article-detail-breadcrumb,
html:root .seance-breadcrumb {
    font-size: var(--type-breadcrumb);
}

html:root .home-hero h1,
html:root .seance-title,
html:root .conseils-title,
html:root .article-detail-hero h1 {
    font-size: var(--type-feature-title);
}

html:root .cabinet-heading h1,
html:root .osteopathie-main-content h1,
html:root .parcours-heading h1,
html:root .rdv-heading h1 {
    font-size: var(--type-page-title);
}

html:root .section-heading h2,
html:root .cabinet-gallery-heading h2,
html:root .osteopathie-pour-qui-heading h2,
html:root .seance-card-title,
html:root .conseils-empty p,
html:root .article-detail-content h2 {
    font-size: var(--type-section-title);
}

html:root .osteopathie-public-content h2,
html:root .parcours-item-content h2,
html:root .conseils-card-title,
html:root .seance-booking-title,
html:root .article-detail-content h3 {
    font-size: var(--type-card-title);
}

html:root .osteopathie-main-content h2,
html:root .rdv-info strong,
html:root .article-detail-content h4 {
    font-size: var(--type-subheading);
}

html:root .home-article-body h3,
html:root .practical-column h3,
html:root .patient-overlay strong,
html:root .seance-step-title {
    font-size: var(--type-compact-heading);
}

html:root .home-hero-intro,
html:root .seance-subtitle,
html:root .conseils-subtitle {
    font-size: var(--type-lead);
}

html:root .home-intro-text p,
html:root .cabinet-description p,
html:root .osteopathie-main-content p,
html:root .osteopathie-public-content p,
html:root .osteopathie-list,
html:root .parcours-item-content p,
html:root .parcours-list,
html:root .seance-payment,
html:root .seance-booking-text,
html:root .seance-contact-link,
html:root .seance-contact-text,
html:root .seance-process-intro,
html:root .seance-reimbursement p,
html:root .seance-step-text,
html:root .conseils-card-summary,
html:root .conseils-search-input,
html:root .rdv-intro {
    font-size: var(--type-body);
    line-height: 1.45;
}

html:root .practical-column p,
html:root .osteopathie-pour-qui-heading > p:last-child,
html:root .cabinet-photo-card figcaption,
html:root .seance-tarif-label,
html:root .rdv-info a,
html:root .rdv-info p,
html:root .rdv-hours p,
html:root .rdv-hours-note {
    font-size: var(--type-secondary);
    line-height: 1.4;
}

html:root .conseils-card-date,
html:root .article-detail-date,
html:root .parcours-year,
html:root .article-detail-content ol > li::before {
    font-size: var(--type-meta);
}

html:root .home-primary-button,
html:root .secondary-button,
html:root .text-link,
html:root .parcours-link,
html:root .seance-cta,
html:root .conseils-card-link,
html:root .conseils-page-link,
html:root .conseils-reset-link,
html:root .article-detail-back,
html:root .rdv-widget-full-link {
    font-size: var(--type-button);
}

html:root .seance-price {
    font-size: var(--type-price);
}

html:root .seance-step-number {
    font-size: var(--type-compact-heading);
}

html:root .article-detail-content {
    font-size: var(--type-article);
    line-height: 1.7;
}

/* Existing TinyMCE inline font sizes otherwise outrank the reading scale. */
html:root .article-detail-content [style*="font-size"]:not(h2):not(h3):not(h4) {
    font-size: var(--type-article) !important;
}

/* The appointment-hours note retains its existing !important priority. */
html:root .rdv-hours-note {
    font-size: var(--type-secondary) !important;
}

html:root .site-footer {
    padding-bottom: 6px;
}

/* Give larger card copy room without changing the continuous 18px grid gap. */
@media (min-width: 1001px) {
    /* Keep Séance text at its true CSS pixel size. */
    .seance-page {
        zoom: 1;
    }

    .seance-intro > .container,
    .seance-content {
        width: min(94%, var(--container-width));
    }

    .home-main-screen {
        min-height: 0;
        display: block;
    }

    html:root .home-first-screen-content {
        --home-hero-height: clamp(260px, 37svh, 400px);
        --home-intro-min-height: clamp(175px, 25svh, 270px);

        min-height: calc(100svh - var(--desktop-header-height));
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .home-advice {
        margin-top: 0;
    }

    .cabinet-main-image {
        height: clamp(263.9px, 34.57svh, 345.7px);
    }

    .cabinet-description p {
        max-width: none;
    }

    .home-hero-box,
    .home-hero-image {
        height: var(--home-hero-height);
    }

    .patient-card {
        height: clamp(112px, 14svh, 155px);
    }

    .home-intro {
        padding-top: var(--space-section-compact);
    }

    .home-hero-text {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .home-hero-intro {
        margin: var(--space-content) 0;
    }

    .home-intro-box,
    .home-intro-image,
    .home-intro-text {
        height: auto;
        min-height: var(--home-intro-min-height);
    }

    .home-intro-image {
        position: relative;
    }

    .home-intro-image img {
        position: absolute;
        top: 12px;
        left: 12px;
        width: calc(100% - 24px);
        height: calc(100% - 24px);
    }

    .conseils-intro {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .conseils-content {
        padding-top: 6px;
    }

    .conseils-search {
        margin-bottom: 8px;
    }

    .conseils-card-image {
        height: max(48px, calc(var(--conseils-row-height) - var(--conseils-card-copy-space) - 16px));
    }

    .seance-intro {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .seance-content {
        gap: var(--space-section-compact);
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .seance-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-content);
    }

    .seance-step:first-child {
        grid-column: 1 / -1;
    }

    .seance-step::after {
        display: none;
    }

    .seance-booking-card,
    .seance-reimbursement,
    .seance-process,
    .seance-step {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .seance-booking-card,
    .seance-reimbursement {
        padding-right: 18px;
        padding-left: 18px;
    }

    .seance-step {
        padding-right: 12px;
        padding-left: 12px;
    }

    .seance-step-top {
        gap: 16px;
    }

    .parcours-timeline {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .parcours-item-content {
        padding-bottom: 6px;
    }

    .parcours-item-content h2 {
        margin-bottom: 4px;
    }

    .parcours-item-content p {
        margin-bottom: 4px;
    }

    .parcours-list {
        margin-bottom: 4px;
    }

    .parcours-list li {
        margin-bottom: 2px;
    }

    .parcours-heading {
        margin-bottom: 8px;
    }

    .osteopathie-pour-qui-heading {
        margin-top: 12px;
    }

    .section-heading,
    .section-heading-row,
    .cabinet-gallery-heading,
    .rdv-heading {
        margin-bottom: var(--space-heading-content);
    }

    .cabinet-gallery {
        padding-top: var(--space-section);
    }

    .osteopathie-main-card,
    .osteopathie-pour-qui-heading,
    .parcours-heading {
        margin-bottom: var(--space-section);
    }
}

@media (max-width: 1000px) {


    html:root {
        --type-feature-title: 36px;
        --type-page-title: 31px;
        --type-section-title: 26px;
    }

}

@media (min-width: 1001px) and (max-height: 820px) {
    .cabinet-photo {
        height: clamp(169.5px, 21.31svh, 198.6px);
    }

    .conseils-search {
        margin-bottom: 24px;
    }

    .conseils-card-image {
        height: max(48px, calc(var(--conseils-row-height) - var(--conseils-card-copy-space) - 8px));
    }

    .parcours-page {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .osteopathie-pour-qui-heading {
        margin-top: 6px;
    }
}

@media (min-width: 1001px) and (min-height: 821px) and (max-height: 1050px) {
    .cabinet-photo {
        height: clamp(198.6px, 23.25svh, 237.4px);
    }
}

@media (min-width: 1001px) and (max-height: 1050px) {
    .cabinet-main-image {
        height: clamp(281.1px, 36.82svh, 368.2px);
    }
}

@media (min-width: 1001px) and (min-height: 1051px) {
    .cabinet-photo {
        height: clamp(204.7px, 20.92svh, 232px);
    }

    .osteopathie-pour-qui-heading {
        margin-top: 14px;
    }
}