/* ===================================
   OSTEOPATHIE PAGE
=================================== */

.osteopathie-page {
    padding:
        18px
        0
        30px;

    background: white;
}


/* ===================================
   FIRST DESKTOP VIEW
=================================== */

.osteopathie-top-screen {
    display: flex;
    flex-direction: column;
}


/* ===================================
   MAIN OSTEOPATHIE CARD
=================================== */

.osteopathie-main-card {
    display: grid;

    grid-template-columns:
        minmax(0, 34%)
        minmax(0, 66%);

    align-items: stretch;

    margin-bottom: 22px;

    overflow: hidden;

    border:
        1px solid
        #d9e9f0;

    border-radius: 11px;

    background:
        linear-gradient(
            120deg,
            #edf7fb,
            #f8fcfd
        );

    scroll-margin-top: 110px;
}

.osteopathie-main-image {
    min-width: 0;

    overflow: hidden;

    background: #e3eef3;
}

.osteopathie-main-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}

.osteopathie-main-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding:
        22px
        30px;
}

.osteopathie-main-content h1 {
    margin:
        0
        0
        4px;

    color: var(--title);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.95rem;

    font-weight: 400;

    line-height: 1.1;
}

.osteopathie-main-content h2 {
    margin:
        0
        0
        13px;

    color: #6f98b2;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.12rem;

    font-weight: 400;

    line-height: 1.2;
}

.osteopathie-main-content p {
    margin:
        0
        0
        9px;

    color: var(--text-light);

    font-size: 0.80rem;

    line-height: 1.48;
}

.osteopathie-main-content p:last-child {
    margin-bottom: 0;
}


/* ===================================
   POUR QUI TITLE
=================================== */

.osteopathie-pour-qui-heading {
    margin:
        0
        auto
        18px;

    text-align: center;
}

.osteopathie-pour-qui-heading h2 {
    margin:
        0
        0
        6px;

    color: var(--title);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.8rem;

    font-weight: 400;

    line-height: 1.2;
}

.osteopathie-pour-qui-heading > p:last-child {
    margin:
        0
        auto;

    max-width: 720px;

    color: var(--text-light);

    font-size: 0.8rem;

    line-height: 1.5;
}


/* ===================================
   PUBLIC CARDS
=================================== */

.osteopathie-public-card {
    display: grid;

    grid-template-columns:
        minmax(260px, 29%)
        minmax(0, 71%);

    align-items: stretch;

    margin-bottom: 11px;

    overflow: hidden;

    border:
        1px solid
        #dbeaf1;

    border-radius: 9px;

    background: #fbfdfe;

    scroll-margin-top: 110px;

    box-shadow:
        0 2px 8px
        rgba(30, 72, 95, 0.04);
}

.osteopathie-public-image {
    min-width: 0;

    overflow: hidden;

    background: #e8f1f5;
}

.osteopathie-public-image img {
    width: 100%;
    height: 100%;

    min-height: 180px;

    object-fit: cover;

    object-position: center;
}

.osteopathie-public-content {
    min-width: 0;

    padding:
        18px
        24px
        20px;
}

.osteopathie-public-content h2 {
    margin:
        0
        0
        9px;

    color: var(--title);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.35rem;

    font-weight: 400;

    line-height: 1.2;
}

.osteopathie-public-content p {
    margin:
        0
        0
        9px;

    color: var(--text-light);

    font-size: 0.79rem;

    line-height: 1.55;
}

.osteopathie-public-content p:last-child {
    margin-bottom: 0;
}


/* NOTE */

.osteopathie-note {
    margin-top: 12px !important;

    padding:
        9px
        12px;

    border-left:
        3px solid
        #8db8d1;

    background:
        #edf7fb;

    color:
        #4c6a79 !important;
}


/* LIST */

.osteopathie-list {
    margin:
        0
        0
        10px;

    padding-left: 19px;

    color: var(--text-light);

    font-size: 0.79rem;

    line-height: 1.55;
}

.osteopathie-list li {
    margin-bottom: 4px;
}


/* INLINE LINK */

.osteopathie-inline-link {
    color: #5798bc;

    font-weight: 600;

    text-decoration: underline;
}

.osteopathie-inline-link:hover {
    color: #397b9f;
}


/* ===================================
   OSTEOPATHIE DESKTOP HEIGHTS
=================================== */

/*
   This is the validated compact variant:
   250px on small laptops,
   270px on normal desktops,
   290px on tall desktops.

   The top-screen wrapper fills the rest of the viewport AFTER
   the full "Pour qui ?" heading, so the Nourrissons card does
   not appear half-cut at the bottom.
*/

@media (min-width: 1001px) {

    .osteopathie-top-screen {
        /*
           Le premier écran desktop se termine APRÈS le bloc "Pour qui ?".
           On lui donne toute la hauteur disponible sous le header, avec une
           petite marge de sécurité afin que la carte "Nourrissons" reste
           complètement sous le pli et n'apparaisse qu'après le scroll.
        */
        min-height:
            calc(
                100svh -
                var(--desktop-header-height) +
                18px
            );
    }

}


@media (min-width: 1001px) and (max-height: 820px) {

    .osteopathie-page {
        padding-top: 12px;
    }

    .osteopathie-top-screen {
        min-height:
            calc(
                100svh -
                var(--desktop-header-height) +
                12px
            );
    }

    .osteopathie-main-card {
        min-height: 250px;

        margin-bottom: 17px;
    }

    .osteopathie-main-image {
        min-height: 250px;
    }

    .osteopathie-main-content {
        padding:
            17px
            26px;
    }

    .osteopathie-main-content h1 {
        font-size: 1.75rem;
    }

    .osteopathie-main-content h2 {
        margin-bottom: 9px;

        font-size: 1rem;
    }

    .osteopathie-main-content p {
        margin-bottom: 7px;

        font-size: 0.76rem;

        line-height: 1.4;
    }

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

    .osteopathie-pour-qui-heading h2 {
        font-size: 1.55rem;
    }

    .osteopathie-public-card {
        margin-bottom: 9px;
    }

    .osteopathie-public-content {
        padding:
            14px
            20px
            16px;
    }

    .osteopathie-public-content h2 {
        font-size: 1.2rem;
    }

    .osteopathie-public-content p,
    .osteopathie-list {
        font-size: 0.75rem;

        line-height: 1.45;
    }

    .osteopathie-public-image img {
        min-height: 160px;
    }
}


@media (min-width: 1001px) and (min-height: 821px) and (max-height: 1050px) {

    .osteopathie-main-card {
        min-height: 270px;
    }

    .osteopathie-main-image {
        min-height: 270px;
    }
}


@media (min-width: 1001px) and (min-height: 1051px) {

    .osteopathie-main-card {
        min-height: 290px;
    }

    .osteopathie-main-image {
        min-height: 290px;
    }
}


/* ===================================
   TABLET
=================================== */

@media (max-width: 1000px) {


    /* OSTEOPATHIE */

    .osteopathie-main-card {
        grid-template-columns:
            36% 64%;
    }

    .osteopathie-main-content {
        padding:
            22px
            24px;
    }

    .osteopathie-main-content h1 {
        font-size: 1.7rem;
    }

    .osteopathie-public-card {
        grid-template-columns:
            32% 68%;
    }

    .osteopathie-public-content {
        padding:
            16px
            20px
            18px;
    }

}


/* ===================================
   MOBILE
=================================== */

@media (max-width: 700px) {


    /* OSTEOPATHIE */

    .osteopathie-page {
        padding:
            15px
            0
            30px;
    }

    .osteopathie-main-card {
        display: flex;

        flex-direction: column;

        margin-bottom: 23px;

        scroll-margin-top: 85px;
    }

    .osteopathie-main-image {
        width: 100%;

        height: 205px;

        min-height: 0;
    }

    .osteopathie-main-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center 48%;
    }

    .osteopathie-main-content {
        padding:
            20px
            18px
            22px;
    }

    .osteopathie-main-content h1 {
        font-size: 1.7rem;
    }

    .osteopathie-main-content h2 {
        margin-bottom: 12px;

        font-size: 1.05rem;
    }

    .osteopathie-main-content p {
        font-size: 0.79rem;

        line-height: 1.5;
    }

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

    .osteopathie-pour-qui-heading h2 {
        font-size: 1.45rem;
    }

    .osteopathie-pour-qui-heading > p:last-child {
        font-size: 0.77rem;
    }

    .osteopathie-public-card {
        display: flex;

        flex-direction: column;

        margin-bottom: 14px;

        scroll-margin-top: 85px;
    }

    .osteopathie-public-image {
        height: 190px;
    }

    .osteopathie-public-image img {
        width: 100%;
        height: 100%;

        min-height: 0;

        object-fit: cover;
    }

    .osteopathie-public-content {
        padding:
            17px
            17px
            19px;
    }

    .osteopathie-public-content h2 {
        margin-bottom: 8px;

        font-size: 1.25rem;
    }

    .osteopathie-public-content p,
    .osteopathie-list {
        font-size: 0.78rem;

        line-height: 1.52;
    }

}


/* ===================================
   SMALL MOBILE
=================================== */

@media (max-width: 420px) {

    .osteopathie-main-image {
        height: 185px;
    }

    .osteopathie-public-image {
        height: 170px;
    }

}

/* ===================================
   OSTEOPATHIE - FINAL DESKTOP VIEW
   Main section fills most of the screen.
   At the bottom of the first viewport we see:
   - "Pour qui ?"
   - "L’ostéopathie à chaque étape de la vie"
   - the explanatory sentence
   The "Nourrissons" card begins only after scrolling.
=================================== */

@media (min-width: 1001px) {

    .osteopathie-page {
        padding-top: 12px;
    }

    .osteopathie-top-screen {
        /*
           Exact first desktop viewport under the 90px header.
           Everything inside this wrapper fits before the fold.
        */
        height:
            calc(
                100svh -
                var(--desktop-header-height)
            );

        min-height: 0;

        display: flex;
        flex-direction: column;

        overflow: hidden;
    }

    .osteopathie-main-card {
        /*
           Reserve about 100px at the bottom for the complete "Pour qui ?"
           heading and its one explanatory line.
        */
        height:
            calc(
                100svh -
                var(--desktop-header-height) -
                112px
            );

        min-height: 0;
        max-height: none;

        margin: 0;

        flex: 0 0 auto;
    }

    .osteopathie-main-image {
        height: 100%;
        min-height: 0;
    }

    .osteopathie-main-image img {
        height: 100%;
        min-height: 0;

        object-fit: cover;
        object-position: center;
    }

    .osteopathie-pour-qui-heading {
        min-height: 0 !important;

        margin:
            14px
            auto
            0;

        padding: 0 0 8px;

        display: block;

        flex: 0 0 auto;

        text-align: center;
    }

    .osteopathie-pour-qui-heading .section-label {
        margin-bottom: 3px;
    }

    .osteopathie-pour-qui-heading h2 {
        margin:
            0
            0
            4px;

        font-size: 1.62rem;

        line-height: 1.15;
    }

    .osteopathie-pour-qui-heading > p:last-child {
        margin: 0 auto;

        font-size: 0.76rem;

        line-height: 1.3;
    }

    /*
       First real audience card starts after the first viewport.
       No part of "Nourrissons" is visible before scrolling.
    */
    #nourrissons {
        margin-top: 14px;
    }
}


/* Small laptop / lower desktop */

@media (min-width: 1001px) and (max-height: 820px) {

    .osteopathie-main-card {
        height:
            calc(
                100svh -
                var(--desktop-header-height) -
                102px
            );
    }

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

        padding-bottom: 6px;
    }

    .osteopathie-pour-qui-heading h2 {
        font-size: 1.45rem;
    }

    .osteopathie-pour-qui-heading > p:last-child {
        font-size: 0.72rem;
    }
}


/* Standard desktop */

@media (min-width: 1001px) and (min-height: 821px) and (max-height: 1050px) {

    .osteopathie-main-card {
        height:
            calc(
                100svh -
                var(--desktop-header-height) -
                112px
            );
    }
}


/* Tall desktop */

@media (min-width: 1001px) and (min-height: 1051px) {

    .osteopathie-main-card {
        height:
            calc(
                100svh -
                var(--desktop-header-height) -
                122px
            );
    }

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

    .osteopathie-pour-qui-heading h2 {
        font-size: 1.72rem;
    }
}


/* Tablet / mobile stay in natural document flow */

@media (max-width: 1000px) {

    .osteopathie-top-screen {
        height: auto;
        min-height: 0;

        overflow: visible;
    }

    .osteopathie-main-card {
        height: auto;
    }

    .osteopathie-pour-qui-heading {
        min-height: 0 !important;
    }
}

/* ===================================
   OSTEOPATHIE - SCROLL HINT
   Discreet cue showing that more content is available below.
=================================== */

@media (min-width: 1001px) {

    .osteopathie-top-screen {
        position: relative;
    }

    .osteopathie-scroll-hint {
        position: absolute;

        left: 50%;
        bottom: 3px;

        width: 30px;
        height: 30px;

        display: flex;
        align-items: center;
        justify-content: center;

        transform: translateX(-50%);

        border:
            1px solid
            rgba(118, 169, 200, 0.42);

        border-radius: 50%;

        background:
            rgba(255, 255, 255, 0.88);

        text-decoration: none;

        box-shadow:
            0 2px 8px
            rgba(43, 91, 117, 0.08);

        opacity: 0.82;

        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            border-color 0.18s ease;
    }

    .osteopathie-scroll-hint:hover {
        opacity: 1;

        border-color:
            rgba(118, 169, 200, 0.78);

        transform:
            translateX(-50%)
            translateY(2px);
    }

    .osteopathie-scroll-hint-arrow {
        width: 8px;
        height: 8px;

        border-right:
            2px solid
            #76a9c8;

        border-bottom:
            2px solid
            #76a9c8;

        transform:
            rotate(45deg)
            translate(-1px, -1px);

        animation:
            osteopathie-scroll-bounce
            1.8s
            ease-in-out
            infinite;
    }

    @keyframes osteopathie-scroll-bounce {
        0%,
        100% {
            transform:
                rotate(45deg)
                translate(-1px, -1px);
        }

        50% {
            transform:
                rotate(45deg)
                translate(2px, 2px);
        }
    }

}


/* No floating cue on tablet/mobile */
@media (max-width: 1000px) {

    .osteopathie-scroll-hint {
        display: none;
    }

}


/* Accessibility: no animation when reduced motion is requested */
@media (prefers-reduced-motion: reduce) {

    .osteopathie-scroll-hint-arrow {
        animation: none;
    }
}

/* Keep the validated first-viewport boundary after adding the breadcrumb. */
@media (min-width: 1001px) {
    .osteopathie-main-card {
        height: calc(100svh - var(--desktop-header-height) - 112px - 26px);
    }
}

@media (min-width: 1001px) and (max-height: 820px) {
    .osteopathie-main-card {
        height: calc(100svh - var(--desktop-header-height) - 102px - 26px);
    }
}