/* =========================================================
   LABORATOIRE KASR AL BALADIA
   STYLE FINAL
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --primary: #008b8c;

    --primary-dark: #006f70;

    --primary-light: #dff5f5;

    --text: #24323a;

    --muted: #68757a;

    --border: #e1ecec;

    --soft: #f5fafa;

    --white: #ffffff;

    --whatsapp: #25D366;

    --shadow:
        0 15px 40px rgba(0, 90, 90, 0.08);

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

    scroll-padding-top: 90px;

}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);

    background: #ffffff;

    line-height: 1.6;

}


img {

    max-width: 100%;

}


a {

    text-decoration: none;

}


button,
input,
select,
textarea {

    font: inherit;

}


.container {

    width: min(90%, 1180px);

    margin-inline: auto;

}


/* =========================================================
   HEADER
========================================================= */

.header {

    height: 112px;

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

    border-bottom:
        1px solid var(--border);

    position: sticky;

    top: 0;

    z-index: 1000;

    backdrop-filter: blur(10px);

    transition:
        height 0.45s cubic-bezier(.4, 0, .2, 1),
        box-shadow 0.45s ease,
        background 0.45s ease;

}


.navbar {

    height: 112px;

    min-height: 112px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

    position: relative;

    transition:
        height 0.45s cubic-bezier(.4, 0, .2, 1),
        min-height 0.45s cubic-bezier(.4, 0, .2, 1);

}


/* =========================================================
   LOGO
========================================================= */

.logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    transition:
        transform 0.55s cubic-bezier(.4, 0, .2, 1);

}


.logo img {

    width: 88px;

    height: 88px;

    object-fit: contain;

    display: block;

    transition:
        width 0.45s cubic-bezier(.4, 0, .2, 1),
        height 0.45s cubic-bezier(.4, 0, .2, 1);

}


/* =========================================================
   NAVIGATION
========================================================= */

.navigation {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-left: auto;

    transition:
        transform 0.45s cubic-bezier(.4, 0, .2, 1),
        gap 0.35s ease;

}


.navigation a {

    position: relative;

    color: #3d4b51;

    font-size: 14px;

    font-weight: 600;

    padding: 10px 0;

    transition:
        color 0.25s ease;

}


.navigation a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 2px;

    width: 0;

    height: 2px;

    background: var(--primary);

    transition:
        width 0.25s ease;

}


.navigation a:hover {

    color: var(--primary);

}


.navigation a:hover::after {

    width: 100%;

}


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

.menu-toggle {

    display: none;

    width: 44px;

    height: 44px;

    border:
        1px solid var(--border);

    background: #ffffff;

    border-radius: 10px;

    cursor: pointer;

    padding: 9px;

}


.menu-toggle span {

    display: block;

    width: 100%;

    height: 2px;

    background: var(--primary);

    margin: 5px 0;

    transition: 0.25s;

}


.menu-toggle.is-active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.menu-toggle.is-active span:nth-child(2) {

    opacity: 0;

}


.menu-toggle.is-active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


/* =========================================================
   BOUTONS
========================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 13px 23px;

    border-radius: 8px;

    font-weight: 700;

    border:
        1px solid transparent;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;

}


.btn:hover {

    transform:
        translateY(-2px);

}


.btn-primary,
.btn-header {

    background:
        var(--primary);

    color: #ffffff;

}


.btn-primary:hover,
.btn-header:hover {

    background:
        var(--primary-dark);

    box-shadow:
        0 8px 22px
        rgba(0, 139, 140, 0.18);

}


.btn-secondary {

    border-color:
        var(--primary);

    color:
        var(--primary);

    background:
        transparent;

}


.btn-secondary:hover {

    background:
        var(--primary);

    color:
        #ffffff;

}


.btn-header {

    font-size: 13px;

    flex-shrink: 0;

    transform-origin:
        right center;

    transition:
        transform 0.4s
        cubic-bezier(.4, 0, .2, 1),
        padding 0.4s ease,
        font-size 0.4s ease;

}


.btn-whatsapp,
.btn-home-whatsapp {

    background:
        var(--whatsapp);

    color:
        #ffffff;

}


.btn-whatsapp:hover,
.btn-home-whatsapp:hover {

    background:
        #1da851;

    color:
        #ffffff;

}


.btn-home-primary {

    background:
        var(--primary);

    color:
        #ffffff;

}


/* =========================================================
   HEADER AU DÉFILEMENT
========================================================= */

.header.scrolled {

    height: 68px;

    box-shadow:
        0 5px 22px
        rgba(0, 80, 80, 0.13);

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

}


.header.scrolled .navbar {

    height: 68px;

    min-height: 68px;

}


.header.scrolled .logo img {

    width: 52px;

    height: 52px;

}


.header.scrolled .navigation {

    transform:
        translateX(15px);

    gap: 21px;

}


.header.scrolled .btn-header {

    transform:
        scale(0.88);

}


/* =========================================================
   HERO
========================================================= */

.hero {

    min-height: 610px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            120deg,
            #eefafa,
            #ffffff 70%
        );

}


.hero-content {

    display: grid;

    grid-template-columns:
        1.2fr 0.8fr;

    align-items: center;

    gap: 70px;

    padding:
        65px 0;

}


.badge,
.home-badge {

    display: inline-block;

    padding:
        8px 15px;

    border-radius:
        30px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size: 12px;

    font-weight: 700;

    letter-spacing:
        1.2px;

    margin-bottom:
        20px;

}


.hero h1 {

    font-size:
        clamp(42px, 5vw, 58px);

    line-height:
        1.08;

    margin-bottom:
        25px;

    color:
        #21343a;

}


.hero h1 span {

    color:
        var(--primary);

}


.hero p {

    font-size:
        17px;

    color:
        #5d6b70;

    max-width:
        650px;

    margin-bottom:
        15px;

}


.hero-buttons {

    display:
        flex;

    gap:
        15px;

    flex-wrap:
        wrap;

    margin-top:
        30px;

}


.hero-card {

    min-height:
        350px;

    background:
        #ffffff;

    border-radius:
        22px;

    padding:
        45px 35px;

    box-shadow:
        0 20px 55px
        rgba(0, 100, 100, 0.12);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border:
        1px solid
        rgba(0, 139, 140, 0.08);

}


.medical-icon {

    width:
        100px;

    height:
        100px;

    border-radius:
        50%;

    background:
        var(--primary);

    color:
        #ffffff;

    font-size:
        60px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    margin-bottom:
        25px;

}


.hero-card h3 {

    font-size:
        24px;

}


.hero-info {

    margin-top:
        25px;

    padding-top:
        20px;

    border-top:
        1px solid
        var(--border);

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

}


.hero-info strong {

    color:
        var(--primary);

}


/* =========================================================
   QUICK SERVICES
========================================================= */

.quick-services {

    background:
        var(--primary);

    color:
        #ffffff;

}


.quick-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

}


.quick-item {

    padding:
        28px 20px;

    display:
        flex;

    gap:
        15px;

    align-items:
        center;

    border-right:
        1px solid
        rgba(255,255,255,.2);

}


.quick-item:last-child {

    border-right:
        0;

}


.quick-icon {

    width:
        45px;

    height:
        45px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.15);

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    font-size:
        22px;

    flex-shrink:
        0;

}


.quick-item h3 {

    font-size:
        15px;

}


.quick-item p {

    font-size:
        12px;

    opacity:
        .8;

}


/* =========================================================
   SECTIONS
========================================================= */

.section {

    padding:
        100px 0;

}


.two-columns {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        80px;

    align-items:
        center;

}


.laboratoire-photo {

    width:
        100%;

    height:
        430px;

    object-fit:
        cover;

    border-radius:
        20px;

    box-shadow:
        var(--shadow);

}


.section-label {

    color:
        var(--primary);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    margin-bottom:
        15px;

}


.section-content h2,
.section-heading h2,
.contact-section h2 {

    font-size:
        clamp(32px, 4vw, 40px);

    line-height:
        1.2;

    color:
        var(--text);

    margin-bottom:
        25px;

}


.section-content h2 span,
.section-heading h2 span,
.contact-section h2 span {

    color:
        var(--primary);

}


.section-content p,
.section-heading p,
.contact-section
.section-heading > p {

    color:
        #647177;

    margin-bottom:
        15px;

}


.features {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        15px;

    margin-top:
        25px;

}


.features div {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.features strong {

    color:
        var(--primary);

}


/* =========================================================
   SERVICES
========================================================= */

.services-section {

    background:
        #f6fafa;

}


.section-heading {

    text-align:
        center;

    max-width:
        720px;

    margin:
        0 auto 50px;

}


.services-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        25px;

}


.service-card {

    background:
        #ffffff;

    padding:
        35px;

    border-radius:
        16px;

    border:
        1px solid
        #edf3f3;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.045);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.service-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.08);

}


.service-icon {

    width:
        60px;

    height:
        60px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    border-radius:
        14px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    font-size:
        30px;

    margin-bottom:
        25px;

}


.service-card h3 {

    font-size:
        21px;

    margin-bottom:
        12px;

}


.service-card p {

    color:
        var(--muted);

    margin-bottom:
        20px;

}


.service-card a {

    color:
        var(--primary);

    font-weight:
        700;

}


/* =========================================================
   PRÉLÈVEMENT À DOMICILE
========================================================= */

.home-service {

    position:
        relative;

    overflow:
        hidden;

    padding:
        100px 0;

    background:
        linear-gradient(
            135deg,
            #eefafa 0%,
            #ffffff 55%,
            #e4f6f4 100%
        );

}


.home-service::before {

    content:
        "";

    position:
        absolute;

    width:
        450px;

    height:
        450px;

    border-radius:
        50%;

    background:
        rgba(0,139,140,.07);

    top:
        -180px;

    right:
        -120px;

}


.home-service-container {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1.15fr .85fr;

    align-items:
        center;

    gap:
        80px;

}


.home-service-text {

    max-width:
        680px;

}


.home-service h2 {

    font-size:
        clamp(36px,4vw,46px);

    line-height:
        1.15;

    color:
        var(--text);

    margin-bottom:
        22px;

}


.home-service h2 span {

    color:
        var(--primary);

}


.home-service-text > p {

    color:
        #657277;

    font-size:
        17px;

    max-width:
        620px;

    margin-bottom:
        30px;

}


.home-features {

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;

    margin-bottom:
        30px;

}


.home-feature {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

}


.feature-circle {

    width:
        42px;

    height:
        42px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--primary);

    color:
        #ffffff;

    font-weight:
        700;

}


.home-feature strong {

    display:
        block;

    color:
        var(--text);

    font-size:
        15px;

}


.home-feature span {

    display:
        block;

    color:
        #748086;

    font-size:
        13px;

}


.home-buttons {

    display:
        flex;

    gap:
        14px;

    flex-wrap:
        wrap;

}


.home-service-visual {

    min-height:
        430px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.home-circle {

    width:
        300px;

    height:
        300px;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:
        0 25px 70px
        rgba(0,100,100,.15);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border:
        12px solid
        #dff3f1;

}


.home-medical-icon {

    width:
        80px;

    height:
        80px;

    border-radius:
        50%;

    background:
        var(--primary);

    color:
        #ffffff;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        50px;

    margin-bottom:
        15px;

}


.home-circle strong {

    font-size:
        22px;

}


.home-circle span {

    color:
        var(--primary);

    font-weight:
        700;

}


.floating-card {

    position:
        absolute;

    background:
        #ffffff;

    padding:
        14px 20px;

    border-radius:
        10px;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.10);

    font-weight:
        700;

    font-size:
        13px;

    color:
        var(--text);

}


.card-one {

    top:
        50px;

    left:
        10px;

}


.card-two {

    bottom:
        50px;

    right:
        10px;

}


/* =========================================================
   HORAIRES
========================================================= */

.schedule {

    max-width:
        800px;

    margin:
        auto;

    border:
        1px solid
        var(--border);

    border-radius:
        15px;

    overflow:
        hidden;

    background:
        #ffffff;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.035);

}


.schedule div {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        22px 30px;

    border-bottom:
        1px solid
        var(--border);

}


.schedule div:last-child {

    border-bottom:
        0;

}


.schedule span {

    color:
        #657177;

}


.schedule strong {

    color:
        var(--primary);

}


.schedule .closed {

    color:
        #777;

}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {

    background:
        var(--soft);

    padding:
        100px 0;

}


.contact-grid {

    display:
        grid;

    grid-template-columns:
        .72fr 1.28fr;

    gap:
        30px;

    align-items:
        stretch;

}


.contact-card {

    background:
        #ffffff;

    padding:
        35px;

    border-radius:
        16px;

    box-shadow:
        var(--shadow);

    border:
        1px solid
        #edf3f3;

}


.contact-row {

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    padding-bottom:
        20px;

    margin-bottom:
        20px;

    border-bottom:
        1px solid
        var(--border);

}


.contact-row:last-of-type {

    margin-bottom:
        0;

}


.contact-row strong {

    color:
        var(--text);

    font-size:
        15px;

}


.contact-row span {

    color:
        var(--muted);

}


.contact-row a {

    color:
        var(--primary);

    font-weight:
        700;

}


.contact-buttons {

    display:
        flex;

    gap:
        12px;

    margin-top:
        25px;

    flex-wrap:
        wrap;

}


/* =========================================================
   GOOGLE MAPS AGRANDIE
========================================================= */

.map-container {

    min-height:
        560px;

    height:
        560px;

    overflow:
        hidden;

    border-radius:
        18px;

    box-shadow:
        0 18px 45px
        rgba(0,80,80,.12);

    background:
        #eaf3f3;

}


.map-container iframe {

    width:
        100%;

    height:
        560px;

    min-height:
        560px;

    display:
        block;

    border:
        0;

}


.map-button {

    text-align:
        center;

    margin-top:
        24px;

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    background:
        #203238;

    color:
        #ffffff;

    padding:
        35px 0;

}


.footer-content {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        25px;

}


.footer strong {

    font-size:
        15px;

}


.footer p {

    color:
        rgba(255,255,255,.65);

    font-size:
        13px;

}


/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1000px) {


    .header {

        height:
            96px;

    }


    .navbar {

        height:
            96px;

        min-height:
            96px;

    }


    .logo img {

        width:
            76px;

        height:
            76px;

    }


    .header.scrolled {

        height:
            68px;

    }


    .header.scrolled .navbar {

        height:
            68px;

        min-height:
            68px;

    }


    .header.scrolled .logo img {

        width:
            52px;

        height:
            52px;

    }


    .header.scrolled .navigation {

        transform:
            translateX(8px);

        gap:
            16px;

    }


    .hero-content,
    .home-service-container {

        gap:
            45px;

    }


    .services-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .contact-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .map-container,
    .map-container iframe {

        height:
            500px;

        min-height:
            500px;

    }

}


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

@media (max-width: 900px) {


    .header {

        height:
            86px;

    }


    .navbar {

        height:
            86px;

        min-height:
            86px;

    }


    .logo img {

        width:
            68px;

        height:
            68px;

    }


    .menu-toggle {

        display:
            block;

        margin-left:
            auto;

    }


    .navigation {

        display:
            none;

        position:
            absolute;

        left:
            5%;

        right:
            5%;

        top:
            82px;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        background:
            #ffffff;

        border:
            1px solid
            var(--border);

        border-radius:
            12px;

        box-shadow:
            0 15px 35px
            rgba(0,0,0,.08);

        padding:
            8px;

    }


    .navigation.is-open {

        display:
            flex;

    }


    .navigation a {

        padding:
            13px 15px;

        border-radius:
            8px;

    }


    .navigation a:hover {

        background:
            var(--soft);

    }


    .navigation a::after {

        display:
            none;

    }


    .btn-header {

        display:
            none;

    }


    .hero {

        padding:
            70px 0;

    }


    .hero-content,
    .two-columns,
    .home-service-container,
    .contact-grid {

        grid-template-columns:
            1fr;

    }


    .hero-card {

        max-width:
            560px;

        width:
            100%;

        margin:
            auto;

    }


    .quick-grid {

        grid-template-columns:
            1fr;

    }


    .quick-item {

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(255,255,255,.2);

    }


    .quick-item:last-child {

        border-bottom:
            0;

    }


    .home-service-visual {

        min-height:
            360px;

    }


    .contact-grid {

        gap:
            30px;

    }


    .map-container,
    .map-container iframe {

        height:
            480px;

        min-height:
            480px;

    }


    .footer-content {

        flex-direction:
            column;

        text-align:
            center;

    }


    .header.scrolled {

        height:
            68px;

    }


    .header.scrolled .navbar {

        height:
            68px;

        min-height:
            68px;

    }


    .header.scrolled .logo img {

        width:
            52px;

        height:
            52px;

    }


    .header.scrolled .navigation {

        transform:
            none;

    }

}


/* =========================================================
   PETIT SMARTPHONE
========================================================= */

@media (max-width: 600px) {


    .container {

        width:
            92%;

    }


    .header {

        height:
            82px;

    }


    .navbar {

        height:
            82px;

        min-height:
            82px;

    }


    .logo img {

        width:
            64px;

        height:
            64px;

    }


    .navigation {

        top:
            78px;

    }


    .header.scrolled {

        height:
            64px;

    }


    .header.scrolled .navbar {

        height:
            64px;

        min-height:
            64px;

    }


    .header.scrolled .logo img {

        width:
            48px;

        height:
            48px;

    }


    .hero {

        padding:
            55px 0;

    }


    .hero h1 {

        font-size:
            36px;

    }


    .hero p {

        font-size:
            15px;

    }


    .hero-buttons,
    .home-buttons,
    .contact-buttons {

        flex-direction:
            column;

    }


    .hero-buttons .btn,
    .home-buttons .btn,
    .contact-buttons .btn {

        width:
            100%;

    }


    .hero-card {

        min-height:
            310px;

        padding:
            35px 25px;

    }


    .section,
    .home-service,
    .contact-section {

        padding:
            70px 0;

    }


    .section-content h2,
    .section-heading h2,
    .contact-section h2,
    .home-service h2 {

        font-size:
            32px;

    }


    .laboratoire-photo {

        height:
            320px;

    }


    .features {

        grid-template-columns:
            1fr;

    }


    .services-grid {

        grid-template-columns:
            1fr;

    }


    .service-card {

        padding:
            28px;

    }


    .home-service-visual {

        min-height:
            320px;

    }


    .home-circle {

        width:
            245px;

        height:
            245px;

    }


    .home-medical-icon {

        width:
            65px;

        height:
            65px;

        font-size:
            40px;

    }


    .floating-card {

        font-size:
            11px;

        padding:
            10px 14px;

    }


    .card-one {

        left:
            0;

        top:
            20px;

    }


    .card-two {

        right:
            0;

        bottom:
            20px;

    }


    .schedule div {

        padding:
            18px;

        font-size:
            14px;

    }


    .contact-card {

        padding:
            25px;

    }


    .map-container,
    .map-container iframe {

        height:
            400px;

        min-height:
            400px;

    }
/* =========================================================
   INSTAGRAM - DESIGN PREMIUM
========================================================= */

.footer-social {
    display: flex;
    align-items: center;
}


/* Bouton */

.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    padding: 10px 17px;

    border: 1px solid rgba(255,255,255,0.20);

    border-radius: 12px;

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

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;

}


/* Survol */

.instagram-link:hover {

    color: #ffffff;

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

    border-color:
        rgba(255,255,255,0.40);

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 22px
        rgba(0,0,0,0.12);

}


/* =========================================================
   VRAI PICTOGRAMME INSTAGRAM
========================================================= */

.instagram-logo {

    width: 31px;
    height: 31px;

    position: relative;

    display: flex;

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

    border: 2px solid #ffffff;

    border-radius: 9px;

    transition:
        transform 0.35s ease;

}


/* Cercle central */

.instagram-logo::before {

    content: "";

    width: 11px;
    height: 11px;

    border:
        2px solid #ffffff;

    border-radius: 50%;

}


/* Petit point */

.instagram-dot {

    position: absolute;

    width: 4px;
    height: 4px;

    background: #ffffff;

    border-radius: 50%;

    top: 5px;
    right: 5px;

}


/* Animation du logo */

.instagram-link:hover .instagram-logo {

    transform:
        rotate(8deg)
        scale(1.08);

}


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

@media (max-width: 600px) {

    .footer-social {

        justify-content: center;

        width: 100%;

    }


    .instagram-link {

        justify-content: center;

        padding:
            11px 18px;

    }
/* =========================================================
   INSTAGRAM - FOOTER
========================================================= */

.footer-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

}


.footer-brand {

    flex-shrink: 0;

}


.footer-social {

    display: flex;

    align-items: center;

}


.instagram-link {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    padding: 10px 17px;

    border: 1px solid rgba(255,255,255,0.25);

    border-radius: 12px;

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

    transition: all 0.3s ease;

}


.instagram-link:hover {

    color: #ffffff;

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

    border-color: rgba(255,255,255,0.50);

    transform: translateY(-3px);

    box-shadow:
        0 8px 22px rgba(0,0,0,0.15);

}


/* LOGO INSTAGRAM */

.instagram-logo {

    width: 31px;

    height: 31px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid #ffffff;

    border-radius: 9px;

    transition: transform 0.35s ease;

}


/* Cercle intérieur */

.instagram-logo::before {

    content: "";

    width: 11px;

    height: 11px;

    border: 2px solid #ffffff;

    border-radius: 50%;

}


/* Petit point */

.instagram-dot {

    position: absolute;

    width: 4px;

    height: 4px;

    background: #ffffff;

    border-radius: 50%;

    top: 5px;

    right: 5px;

}


/* Animation */

.instagram-link:hover .instagram-logo {

    transform:
        rotate(8deg)
        scale(1.08);

}


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

@media (max-width: 600px) {

    .footer-content {

        flex-direction: column;

        text-align: center;

        gap: 20px;

    }

    .footer-social {

        justify-content: center;

        width: 100%;

    }

    .instagram-link {

        justify-content: center;

    }

}
}

/* =========================================================
   INSTAGRAM DANS LES INFORMATIONS DE CONTACT
========================================================= */

.instagram-contact-link {
    color: #c13584;
    font-weight: 700;
    transition: color 0.25s ease, transform 0.25s ease;
}

.instagram-contact-link:hover {
    color: #a52d70;
    text-decoration: underline;
}

.instagram-contact-row strong {
    color: var(--text);
}


/* =========================================================
   SEO LOCAL + ACCESSIBILITÉ — AJOUTS À LA VERSION (4)
   ========================================================= */

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(0, 139, 140, 0.35);
    outline-offset: 3px;
}

.noscript-notice {
    padding: 12px 5%;
    text-align: center;
    background: #f5fafa;
    color: #24323a;
    font-size: 13px;
    border-top: 1px solid #e1ecec;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   AJOUTS CIBLÉS : PHOTO ACCUEIL, GALERIE ET TAGS
========================================================= */
.hero-card { padding: 22px 24px 28px; }
.hero-lab-photo {
    display: block; width: 100%; height: clamp(210px, 23vw, 285px);
    object-fit: cover; border-radius: 16px; margin-bottom: 22px;
    box-shadow: 0 9px 24px rgba(0, 100, 100, .10);
}
.hero-card h3 { line-height: 1.3; }
.hero-card > p { margin-top: 7px; margin-bottom: 0; }
.laboratoire-gallery {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 270px 145px; gap: 12px; min-width: 0;
}
.laboratoire-gallery img {
    display: block; width: 100%; height: 100%; min-width: 0;
    object-fit: cover; border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 90, 90, .10);
}
.laboratoire-gallery .gallery-main { grid-column: 1 / -1; }
.service-card { display: flex; flex-direction: column; min-width: 0; }
.analysis-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 23px; }
.analysis-tag {
    display: inline-block; padding: 5px 9px; border-radius: 7px;
    border: 1px solid #cfe9e8; background: #eff9f8;
    color: #006f70; font-size: 11.5px; font-weight: 600;
    line-height: 1.35; overflow-wrap: anywhere;
}
.service-card > a { margin-top: auto; }
@media (max-width: 900px) {
    .hero-lab-photo { height: clamp(220px, 45vw, 320px); }
    .laboratoire-gallery { grid-template-rows: 310px 170px; }
}
@media (max-width: 600px) {
    .hero-card { padding: 18px 18px 25px; }
    .hero-lab-photo { height: clamp(190px, 55vw, 270px); }
    .laboratoire-gallery { grid-template-rows: 220px 120px; gap: 9px; }
    .laboratoire-gallery img { border-radius: 12px; }
    .service-card { padding: 25px 22px; }
    .analysis-tags { gap: 6px; }
    .analysis-tag { font-size: 11px; padding: 5px 8px; }
}

/* Galerie finalisée avec les deux photographies fournies */
.laboratoire-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 390px; }
.laboratoire-gallery .gallery-main { grid-column: auto; }
.laboratoire-gallery img { object-position: center; }
@media (max-width: 900px) { .laboratoire-gallery { grid-template-rows: 390px; } }
@media (max-width: 600px) { .laboratoire-gallery { grid-template-rows: 255px; gap: 9px; } }

/* Présentation soignée des analyses courantes — sans modifier les autres sections */
.services-grid { align-items: stretch; }
.service-card { padding: 30px 28px; }
.service-card p { margin-bottom: 18px; }
.analysis-list { margin: 2px 0 25px; padding: 17px 0 0; border-top: 1px solid var(--border); }
.analysis-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; color: var(--primary-dark); font-size: 11px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.analysis-heading-line { display: inline-block; width: 17px; height: 3px; border-radius: 9px; background: var(--primary); flex-shrink: 0; }
.analysis-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; align-content: flex-start; }
.analysis-tag { display: inline-flex; align-items: center; max-width: 100%; padding: 7px 11px; border-radius: 9px; border: 1px solid #d9ebea; background: #f3faf9; color: #176c6d; font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: .005em; overflow-wrap: anywhere; transition: background .2s ease, border-color .2s ease; }
.analysis-tag:hover { background: #e3f5f3; border-color: #a9d9d5; }
.service-card > a { margin-top: auto; padding-top: 3px; }
@media (max-width: 600px) { .service-card { padding: 25px 21px; } .analysis-tags { gap: 7px; } .analysis-tag { padding: 6px 9px; font-size: 11.5px; } }

/* Politique qualité — intégration dans la colonne de droite, sous le texte existant */
.quality-policy { margin-top: 30px; padding: 25px 27px; background: linear-gradient(145deg,#f0fafa,#fff); border: 1px solid #d5ebea; border-left: 4px solid var(--primary); border-radius: 17px; box-shadow: 0 12px 30px rgba(0,90,90,.06); }
.quality-policy-eyebrow { color: var(--primary); font-size: 11px; font-weight: 700; letter-spacing: .13em; margin-bottom: 7px; }
.quality-policy h3 { font-size: clamp(20px,2.2vw,25px); line-height: 1.25; margin-bottom: 13px; color: var(--text); }
.quality-policy p { font-size: 14px; line-height: 1.65; margin-bottom: 10px; }
.quality-policy ul { list-style: none; padding: 0; margin: 13px 0 19px; display: grid; gap: 9px; }
.quality-policy li { position: relative; padding-left: 22px; color: #475d62; font-size: 13.5px; line-height: 1.5; }
.quality-policy li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--primary); font-weight: 700; }
.quality-policy-link { display: inline-flex; gap: 7px; align-items: center; color: var(--primary-dark); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.quality-policy-link:hover { color: var(--primary); }
.quality-policy-signature { display: block; margin-top: 13px; font-size: 12px; color: var(--muted); font-style: italic; }
@media (max-width: 600px) { .quality-policy { margin-top: 25px; padding: 21px 19px; } .quality-policy li { font-size: 13px; } }



/* Section Notre laboratoire : disposition unique, sans règles contradictoires */
#laboratoire .laboratoire-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(22px, 3vw, 40px);
}
#laboratoire .laboratoire-left, #laboratoire .laboratoire-right { min-width: 0; }
#laboratoire .laboratoire-left { display: flex; }
#laboratoire .laboratoire-gallery {
  display: grid; width: 100%; height: 100%; min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
#laboratoire .laboratoire-gallery .gallery-main { grid-column: auto; }
#laboratoire .laboratoire-gallery img {
  display: block; width: 100%; height: 100%; min-height: 0;
  object-fit: cover; object-position: center;
  border-radius: 18px; box-shadow: var(--shadow);
}
#laboratoire .laboratoire-right { display: flex; flex-direction: column; }
#laboratoire .laboratoire-heading { text-align: left; margin: 0 0 20px; }
#laboratoire .laboratoire-heading h2 {
  font-size: clamp(28px, 3vw, 40px); line-height: 1.2;
  color: var(--text); margin: 0;
}
#laboratoire .laboratoire-heading h2 span { color: var(--primary); }
#laboratoire .section-content { max-width: none; margin: 0; }
#laboratoire .quality-policy-document {
  display: block; width: 100%; margin: 26px 0 0; padding: 10px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow);
}
#laboratoire .quality-policy-document img {
  display: block; width: 100%; height: auto; object-fit: contain; border-radius: 9px;
}
#laboratoire .quality-policy-document figcaption {
  text-align: center; font-size: 12px; font-weight: 700;
  color: var(--primary-dark); padding: 10px 4px 3px;
}
/* Analyses : listes, pas de badges */
.analysis-tags { display: none; }
.analysis-items { list-style: none; padding: 0; margin: 0; display: grid; }
.analysis-items li { position: relative; padding: 7px 0 7px 21px; color: #40575c; font-size: 13px; line-height: 1.4; border-bottom: 1px solid #edf3f3; }
.analysis-items li:last-child { border-bottom: 0; }
.analysis-items li::before { content: ''; position: absolute; top: 15px; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
@media (max-width: 700px) {
  #laboratoire .laboratoire-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  #laboratoire .laboratoire-gallery { height: auto; grid-template-rows: 280px 280px; }
}
@media (max-width: 390px) {
  #laboratoire .laboratoire-gallery { grid-template-rows: 230px 230px; }
}

/* CORRECTION DEFINITIVE : deux colonnes même sur écran étroit.
   Les sélecteurs spécifiques priment sur les anciens breakpoints. */
#laboratoire .container.laboratoire-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(12px, 2.5vw, 32px);
}
#laboratoire .laboratoire-left { min-width: 0; display: flex; }
#laboratoire .laboratoire-right { min-width: 0; display: flex; flex-direction: column; }
#laboratoire .section-image.laboratoire-gallery {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px; height: 100%; width: 100%; min-height: 0;
}
#laboratoire .section-image.laboratoire-gallery img {
  width: 100%; height: 100%; min-height: 0; display: block;
  object-fit: cover; border-radius: 15px;
}
#laboratoire .quality-policy-document img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 700px) {
  #laboratoire .container.laboratoire-layout {
    grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
    gap: 12px;
  }
  #laboratoire .section-image.laboratoire-gallery {
    height: 100%; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px;
  }
  #laboratoire .laboratoire-heading { margin-bottom: 9px; }
  #laboratoire .laboratoire-heading h2 { font-size: clamp(15px, 3.8vw, 25px); line-height: 1.25; }
  #laboratoire .laboratoire-heading .section-label { font-size: 9px; letter-spacing: 1px; margin-bottom: 5px; }
  #laboratoire .section-content p { font-size: clamp(10px, 2.6vw, 13px); line-height: 1.45; margin-bottom: 8px; }
  #laboratoire .features { grid-template-columns: 1fr; gap: 4px; margin-top: 10px; }
  #laboratoire .features div { gap: 5px; font-size: clamp(9px, 2.4vw, 12px); }
  #laboratoire .quality-policy-document { padding: 5px; margin-top: 12px; border-radius: 9px; }
  #laboratoire .quality-policy-document figcaption { font-size: 9px; padding: 5px 0 0; }
}

/* Tableau 2 colonnes x 2 lignes : structure explicite à quatre cases */
#laboratoire .laboratoire-tableau {
 display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 grid-template-rows:auto auto; gap:18px; align-items:stretch;
 width:min(90%,1180px); margin-inline:auto;
}
#laboratoire .laboratoire-tableau > .lab-cell {min-width:0; margin:0;}
#laboratoire .lab-photo-one {grid-column:1;grid-row:1;}
#laboratoire .lab-presentation {grid-column:2;grid-row:1; background:#fff; border:1px solid var(--border);border-radius:18px;padding:clamp(16px,2.5vw,32px);box-shadow:var(--shadow);}
#laboratoire .lab-photo-two {grid-column:1;grid-row:2;}
#laboratoire .lab-policy {grid-column:2;grid-row:2; display:flex;align-items:stretch;justify-content:center;}
#laboratoire .lab-photo-one img,#laboratoire .lab-photo-two img {display:block;width:100%;height:100%;min-height:0;max-height:750px;object-fit:cover;border-radius:18px;box-shadow:var(--shadow);}
#laboratoire .lab-presentation .laboratoire-heading {margin-bottom:20px;}
#laboratoire .lab-presentation .laboratoire-heading h2 {font-size:clamp(24px,3vw,39px);line-height:1.2;}
#laboratoire .lab-presentation .laboratoire-heading h2 span {color:var(--primary);}
#laboratoire .lab-policy .quality-policy-document {margin:0;width:100%;height:100%;padding:10px;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center;}
#laboratoire .lab-policy .quality-policy-document img {display:block;width:100%;height:auto;max-height:740px;object-fit:contain;}
@media(max-width:900px){#laboratoire .laboratoire-tableau {gap:12px;}#laboratoire .lab-presentation {padding:14px;}#laboratoire .lab-presentation .laboratoire-heading h2 {font-size:clamp(16px,3vw,28px);}#laboratoire .lab-presentation .features {grid-template-columns:1fr;gap:6px;}#laboratoire .lab-presentation p {font-size:clamp(11px,1.7vw,15px);}}
@media(max-width:600px){#laboratoire .laboratoire-tableau{width:96%;gap:8px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}#laboratoire .lab-presentation{padding:9px;border-radius:10px;}#laboratoire .lab-presentation .laboratoire-heading h2{font-size:clamp(13px,3.3vw,19px);}#laboratoire .lab-presentation .section-label{font-size:9px;letter-spacing:.5px;margin-bottom:5px;}#laboratoire .lab-presentation p{font-size:clamp(9px,2.4vw,12px);line-height:1.45;margin-bottom:7px;}#laboratoire .lab-presentation .features{margin-top:8px;gap:3px;}#laboratoire .lab-presentation .features div{font-size:clamp(9px,2.3vw,12px);gap:4px;}#laboratoire .lab-photo-one img,#laboratoire .lab-photo-two img{border-radius:10px;}#laboratoire .lab-policy .quality-policy-document{padding:3px;border-radius:10px;}#laboratoire .lab-policy .quality-policy-document figcaption{font-size:9px;}}

/* Ajustement final : photos compactes dans le tableau 2 × 2 */
#laboratoire .laboratoire-tableau { grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows:auto auto; align-items:start; }
#laboratoire .lab-photo-one, #laboratoire .lab-photo-two { align-self:start; overflow:hidden; border-radius:16px; }
#laboratoire .lab-photo-one img, #laboratoire .lab-photo-two img { width:100%; height:310px; max-height:none; min-height:0; object-fit:cover; object-position:center; }
#laboratoire .lab-photo-one img { object-position:center 55%; }
#laboratoire .lab-photo-two img { object-position:center 50%; }
#laboratoire .lab-policy .quality-policy-document { height:auto; }
#laboratoire .lab-policy .quality-policy-document img { max-height:620px; }
@media (max-width:900px) { #laboratoire .lab-photo-one img,#laboratoire .lab-photo-two img {height:240px;} }
@media (max-width:600px) {
 #laboratoire .laboratoire-tableau {grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);gap:9px;}
 #laboratoire .lab-photo-one img,#laboratoire .lab-photo-two img {height:170px;}
 #laboratoire .lab-presentation {padding:10px;}
}

/* Section laboratoire : composition photographique unique fournie par le laboratoire. */
#laboratoire.laboratoire-composition-section {padding: 65px 0;}
#laboratoire .laboratoire-composition-container {width:min(94%, 1180px); margin-inline:auto;}
#laboratoire .laboratoire-composition-image {display:block;width:100%;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 12px 35px rgba(0,90,90,.09);}
#laboratoire .laboratoire-composition-accessible {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
#laboratoire .laboratoire-politique-link {margin-top:18px;text-align:right;}
#laboratoire .laboratoire-politique-link a {color:var(--primary);font-weight:700;}
@media(max-width:600px){#laboratoire.laboratoire-composition-section{padding:35px 0;}#laboratoire .laboratoire-composition-container{width:98%;}#laboratoire .laboratoire-composition-image{border-radius:6px;}#laboratoire .laboratoire-politique-link{text-align:center;font-size:13px;}}

/* Conserver exactement les proportions de la photographie fournie (1715 × 2048). */
#laboratoire .laboratoire-composition-image {
  display:block !important; width:100% !important; height:auto !important;
  max-height:none !important; aspect-ratio:1715 / 2048;
  object-fit:contain !important; object-position:center !important;
  border-radius:0 !important; box-shadow:none !important;
}

/* Logo entièrement contenu dans la bande blanche du header */
.logo { align-self: center; }
.logo img { max-height: 100%; object-fit: contain; }