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

body{
    background:white;
    color:#5c4532;
    font-family:Georgia, serif;
}

#header{
#    padding:30px 60px;
#}

header{
    padding:30px 60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

#.tagline{
#    font-family:"Cormorant Garamond", serif;
#    font-size:36px;
#    font-weight:500;
#}

.logo{
    font-family: "Birthstone", cursive;
    font-size: 72px;
    font-weight: 400;
    line-height: 1;
}

#section{
#    padding:80px 60px;
#}

section{
    padding:80px 100px 80px 60px;
}

.hero{
    padding:0;
    height:100vh;
    overflow:hidden;
    position:relative;
}

.hero-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:scale(1.05);
    pointer-events:none;
}


.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    margin-top:40px;
}

.grid-3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;
    margin-top:40px;
}


h2{
    font-family: "Birthstone", cursive;
    font-size: 78px;
    font-weight: 400;
    line-height: 0.9;
    margin-bottom: 25px;
}

footer{
    padding:60px;
}

.hero{
    padding:0;
    height:100vh;
    overflow:hidden;
}

.hero video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.grid-2{
    gap:60px;
}

.grid-3{
    gap:20px;
}

.card{
    display:flex;
    flex-direction:column;
}

.card img{
    width:50%;
    height:clamp(220px, 16vw, 420px);
    object-fit:contain;
    display:block;
    margin:0 auto 20px;
}

.lab img{
    width:100%;
    height:clamp(320px, 20vw, 520px);
    object-fit:contain;
}

.card h4{
    font-family: "Cormorant Garamond", serif;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-left: 60px;
}

h3{
    font-family: "Cormorant Garamond", serif;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 30px;
}


.card p{
    line-height:1.6;
    margin-bottom:16px;  # vertical margin between paragraphs
    max-width:60ch;
    padding-left:60px; # margin
}

.collection .intro{
    max-width:100ch;
    margin-bottom:50px;
    #margin:0 auto 50px auto;
}

.collection .intro p{
    line-height:1.6;
    margin-left:60px;
    margin-bottom:18px;
}

.collection .intro p:nth-of-type(2){
    --intro-shift: clamp(0px, 8vw, 240px);
    margin-left: calc(60px + var(--intro-shift));
    transform:none;
}


/* ===== Mathematics Behind ===== */

.math-slider{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;

    gap:40px;

    margin-top:10px;

    scrollbar-width:none;          /* Firefox */
}

.math-slider::-webkit-scrollbar{
    display:none;                  /* Chrome/Safari */
}

.math-slide{
    flex:0 0 100%;
    scroll-snap-align:start;
}

.math-slide .grid-2{
    margin-top:0;
    line-height:1.6;
    margin-bottom:16px;  # vertical margin between paragraphs
    max-width:60ch;
    padding-left:60px; # margin
}



.math-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
}

.math-slide h3{
    font-family: "Cormorant Garamond", serif;
    font-size: 36px;
    font-weight: 500;   /* или даже 400 */
    margin-bottom: 20px;
}

.math-image{
    width:30%;
    height:auto;
    margin:5px auto 10px;
    display:block;
}

.math-video{
    width:50%;
    height:auto;
    display:block;
    margin:auto;
}


/* navigation dots */



.math-dots span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#c7b8a7;
}

.math-dots span.active{
    background:#5c4532;
}

.math-slide p{
    line-height:1.6;
    margin-bottom:18px;
}

.math-slide h3{
    margin-bottom:16px;
}

.math-image-large {
    width: 50%;
}


.math-image-large2 {
    width: 36%;
}

.math-image-large3{
    width:40%;
    height:auto;
    margin:5px auto 10px;
    display:block;
}






/* ===== Bibliographie ===== */

.bibliography {
    padding: 0 60px;
}

.bibliography h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 20px;
    margin-top: -50px;
}

.bibliography-content {
    margin-left: 60px;
    max-width: 80ch;
}

.bibliography-content p {
    line-height: 1.35;
    margin-bottom: 12px;
}

.math-slide a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #c7b8a7;
}


.bibliography p {
    padding: 8px 12px;
    margin-left: -12px;
    border-radius: 4px;
    transition: background-color 0.5s ease;
}

.bibliography p.highlight {
    background-color: #eee7df;
}





.bibliography {
    margin-bottom: 20px;
    margin-top: -50px;
}

#bibliography summary {
    margin-left: 30px;
}

.bibliography summary {
    cursor: pointer;
    list-style-position: outside;
}

.bibliography summary h3 {
    display: inline;
    font-family: "Cormorant Garamond", serif;
    font-size: 36px;
    font-weight: 500;
}

.bibliography-content {
    margin-left: 60px;
    margin-top: 20px;
}

.bibliography-content p {
    line-height: 1.35;
    margin-bottom: 12px;
}









.waiting-list{
    margin:-20px auto 0;
    max-width:40ch;
    text-align:center;
}

.waiting-list h3{
    font-family:"Cormorant Garamond", serif;
    font-size:36px;
    font-weight:500;
    margin-bottom:16px;
}

.waiting-list p{
    line-height:1.6;
    margin-bottom:28px;
}

.contact-button{
    display:inline-block;
    padding:12px 28px;
    border:1px solid #5c4532;
    color:#5c4532;
    text-decoration:none;
    font-family:"Cormorant Garamond", serif;
    font-size:20px;
    transition:all 0.2s ease;
}

.contact-button:hover{
    background:#5c4532;
    color:white;
}




.intro-brand{
    padding:100px 60px 40px;
    text-align:center;
}

.intro-brand::before,
.intro-brand::after{
    content:"";
    display:block;
    width:40px;
    height:3px;
    background:#c7b8a7;
    margin:0 auto 30px;
}

.intro-brand::after{
    margin:30px auto 0;
}

.intro-brand p{
    max-width:75ch;
    margin:0 auto;
    line-height:1.5;
    font-size:20px;
}




/* ===== Galerie des réalisations ===== */

.realizations-gallery{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:18px;
    max-width:1000px;
    margin:0 auto;
}

.realization-main,
.realization-side img{
    width:100%;
}

.realization-main img{
    width:100%;
    height:600px;
    object-fit:contain;
    display:block;
}

.realization-side{
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:18px;
}

.realization-side img{
    width:80%;
    height:290px;
    object-fit:cover;
    display:block;
}







.math-slide .grid-2 {
    margin-top: 0;
}

.math-slide p {
    line-height: 1.35;
    margin-bottom: 12px;
}


.poincare-figures {
    display: flex;
    align-items: flex-start;
    gap: 35px;
    margin-top: 20px;
}

.poincare-figure {
    margin: 0;
    flex: 1;
    min-width: 0;
    text-align: center;
}

.poincare-figure img {
    width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.poincare-figure figcaption {
    margin-top: 8px;
    font-size: 0.7em;
    line-height: 1.;
    white-space: normal;
    text-align: center;
}

.poincare-figure figcaption span {
    display: block;
    margin-top: -15px;
}







.voronoi-figures {
    width: fit-content;
    margin: 0 auto;
}

.voronoi-caption {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 0.7em;
    line-height: 1.2;
    text-align: center;
}


.single-figure {
    width: fit-content;
    margin: 0 auto;
    text-align: center;
}

.single-caption {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 0.7em;
    line-height: 1.2;
}









/* ===== Fluid desktop ===== */

@media (max-width: 1200px) {
    

    section{
        padding-left:40px;
        padding-right:40px;
    }

    .grid-2,
    .grid-3{
        min-width:0;
    }

    .grid-2 > *,
    .grid-3 > *{
        min-width:0;
    }

    .card p,
    .card h4{
        padding-left:30px;
    }

    .collection .intro p{
        margin-left:30px;
    }

   .collection .intro p:nth-of-type(2){
    margin-left:30px;
    }


    .poincare-figure{
        min-width:0;
    }





    .origin .grid-3 .card:first-child h4,
.origin .grid-3 .card:first-child p{
    width:clamp(100%, calc(100% + 240px - 20vw), 150%);
}

.origin .grid-3 .card:last-child h4,
.origin .grid-3 .card:last-child p{
    width:clamp(100%, calc(100% + 240px - 20vw), 150%);
    margin-left:clamp(-75px, calc(-120px + 10vw), 0px);
}


.origin .grid-3 .card img{
    width:min(220px, 70%);
    margin-bottom:clamp(0px, 1vw, 20px);
    height:auto;
    aspect-ratio:1 / 1;
    object-fit:contain;
}
    

}



@media (min-width: 1800px) {

    .realizations-gallery{
        width:min(1400px, calc(100vw - 120px));
    }

    .realization-main img{
        height:auto;
        aspect-ratio:1 / 1;
        object-fit:contain;
    }

    .realization-side img{
        width:100%;
        height:auto;
        aspect-ratio:1 / 1;
        object-fit:contain;
    }

}












.hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:clamp(4px, 0.35vw, 11px);
    background:#716152;
    z-index:10;
    pointer-events:none;
}












/* ===== Tablet + Mobile Hero ===== */

@media (max-width: 1199px) {

    .hero {
        height: auto;
    }

    .hero video {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }

    .hero-frame {
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.05);
    }

}


.math-dots{
    display:flex;
    justify-content:center;
    gap:10px;
}

.math-dots-top{
    display:none;
}

.math-dots-bottom{
    display:flex;
}




/* ===== Mobile ===== */

@media (max-width: 767px) {

    header {
        padding: 24px 24px;
    }

    .logo {
        font-size: 52px;
    }

    section {
        padding: 50px 24px;
    }


    /* Hero */

    .hero {
        height: auto;
    }

    .hero video {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }

    .hero-frame {
        width: 100%;
        height: 100%;
        inset: 0;
        object-fit: cover;
        transform: scale(1.05);
    }


    /* Typography */

    h2 {
        font-size: 52px;
        line-height: 0.95;
        margin-bottom: 22px;
    }

    h3 {
        font-size: 30px;
        margin-bottom: 20px;
    }


    /* Grids */

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
        gap: 45px;
    }


    /* Text */

    .card h4,
    .card p {
        padding-left: 0;
    }

    .card h4 {
        font-size: 26px;
    }

    .card p {
        line-height: 1.5;
    }


    /* Intro */

    .collection .intro p {
        margin-left: 0;
    }

    .collection .intro p:nth-of-type(2) {
        margin-left: 0;
        transform: none;
    }


    /* Laboratory images */

    .lab img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }


    /* Scientists / other cards */

    .card img {
        width: min(75%, 280px);
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }


    /* Mathematics */

    .math-columns {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .math-slide .grid-2 {
        padding-left: 0;
        max-width: none;
    }

    .math-slide h3 {
        font-size: 30px;
    }

    .math-image {
        width: 70%;
    }

    .math-image-large {
        width: 80%;
    }

    .math-image-large2 {
        width: 70%;
    }

    .math-image-large3 {
        width: 80%;
    }

    .math-video {
        width: 80%;
    }


    /* Poincaré figures */

    .poincare-figures {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .poincare-figure {
        width: 100%;
    }

    .poincare-figure img {
        width: min(80%, 360px);
    }


    /* Collection cards */

    .collection .grid-3 {
        gap: 50px;
    }


    /* Gallery */

    .realizations-gallery {
        grid-template-columns: 1fr;
        gap: 18px;
        width: 100%;
    }

    .realization-main img,
    .realization-side img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
    }

    .realization-side {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        gap: 18px;
    }


    /* Footer */

    footer {
        padding: 40px 24px;
    }


        /* Prevent cards from overflowing horizontally */
    .grid-2 > *,
    .grid-3 > *,
    .card {
        min-width: 0;
        width: 100%;
    }

    .card p,
    .card h4 {
        width: 100%;
        max-width: none;
        padding-left: 0;
    }


       /* Mathematics slider: dots above and below on mobile */

.math {
    display: flex;
    flex-direction: column;
}

.math h2 {
    order: 1;
}



/* Mobile: dots both above and below the slider */

.math-dots-top {
    display: flex !important;
    order: 2;
    margin-top: 0;
    margin-bottom: 25px;
}

.math-slider {
    order: 3;
}

.math-dots-bottom {
    display: flex !important;
    order: 4;
    margin-top: 25px;
}







        /* Reset desktop card overlap on mobile */

        .origin .grid-3 .card:first-child h4,
        .origin .grid-3 .card:first-child p,
        .origin .grid-3 .card:last-child h4,
        .origin .grid-3 .card:last-child p {
            width: 100%;
            margin-left: 0;
        }







            /* Origin: clean mobile layout */
    .origin .grid-3 {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
    }

    .origin .grid-3 .card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-left: 0;
    }

    .origin .grid-3 .card h4,
    .origin .grid-3 .card p {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        padding-left: 0;
        box-sizing: border-box;
    }




        /* Mathematics: image groups must stay inside the slide */

        .math-slide {
            min-width: 0;
            overflow: hidden;
        }
    
        .math-slide div[style*="display:flex"] {
            max-width: 100%;
            min-width: 0;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px !important;
        }
    
        .math-slide div[style*="display:flex"] img {
            max-width: 100%;
            height: auto;
            box-sizing: border-box;
        }



    /* Bibliography: use the full mobile width */

    .bibliography {
        padding: 0 24px;
        margin-top: 0;
    }

    #bibliography summary {
        margin-left: 0;
    }

    .bibliography-content {
        margin-left: 0;
        max-width: none;
    }

    .bibliography-content p {
        padding-left: 0;
        padding-right: 0;
    }


}