:root {
    --bg: #ece8e1;
    --paper: #f7f3ee;
    --white: #ffffff;
    --black: #0e0d0d;
    --gold: #c4a26a;
    --gold-soft: #d8c9b4;
    --red: #d65959;
    --text: #2d2926;
    --muted: #746b64;
    --line: rgba(0, 0, 0, 0.08);
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
    --radius: 14px;
}

* {box-sizing: border-box}

html {scroll-behavior: smooth}

body {
    margin: 0;
    color: var(--text);
    background: var(--white);
    line-height: 1.45;
}

/* polices */

.barlow-regular {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.barlow-bold {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.barlow-condensed-bold {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.lora-italic {
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
}

/* tag */

h1, h2, h3 {
    margin: 0;
    line-height: 1.05;
}

p {margin: 0 0 16px}

ul {
    margin: 0 0 16px 16px;
    padding: 0;
}

ul.points li::marker {
  color: var(--red);
}

/* vidéo entrée */

#fullwidth-video {
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    display: grid;
    align-items: center;
    background: var(--black);
    transition: height 1000ms ease-in-out;
    position: relative;
}


    #fullwidth-video .fullwidth-video-bg {
        position: absolute; 
        z-index: 1; 
        top: 0px; 
        left: 0px; 
        bottom: 0px; 
        right: 0px; 
        overflow: hidden;
        background-color: transparent; 
        background-repeat: no-repeat;
        background-position: center center;
        background-image:url(/assets/images/logo-khem-eleven.jpg);
    }


        #fullwidth-video video {
            margin: auto;
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 0%;
            transform: translate(0%, -50%);
            visibility: visible;
            opacity: 1;
            width: 100%;
            height: 90%;
            object-fit: cover;
        }

/* conteneur */

.container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}
.container-min {
    width: min(900px, calc(100% - 40px));
    margin: 0 auto;
}

/* header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding-bottom: 90px;
    color: white;
    background-color: transparent;
    background-image: url(/assets/images/bandeau-arrondi-haut.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}

    .header-inner {
        padding: 24px 0 18px;
    }

        .brand-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

            #brand-logo {
                width: 250px;
                height: auto;
                /* animation */
                opacity: 0;
                transition: opacity 1s ease-in-out 0s;
            }
            
            #brand-logo.visible {opacity: 1}

            .brand-links {
                display: flex;
                align-items: center;
                justify-content: end;
                gap: 20px;
            }

                .picto > img {
                  width: 25px;
                  height: 25px;
                  line-height: 1;
                }

                .cta-button > img {
                  width: 160px;
                  height: auto;
                  line-height: 1;
                }

/* main nav */

.main-nav {
    scroll-target-group: auto;
}

    .main-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px 26px;
        margin-top: 20px;
        align-items: center;
    }

        .main-nav a {
            color: rgba(255,255,255,0.82);
            text-decoration: none;
            text-transform: uppercase;
            font-size: 85%;
            letter-spacing: 0.08em;
        }

            .main-nav a.active,
            .main-nav a:hover,
            .main-nav a:focus {
                color: white;
                font-weight: bold;
            }

            a:target-current {
                color: white;
                font-weight: bold;
            }

        .main-nav span,
        .second-nav span {
            align-self: stretch;
        }
        
        .second-nav span {
            align-self: stretch;
            border-left: 1px solid var(--gold);
        }
        
    
    @media (max-width: 720px) {
        
        .brand-links,
        .main-nav {
            display: none;
        }
        
        .main-nav {
            flex-direction: column;
        }
        
        .main-nav span {
            border-top: 1px solid var(--gold);
        }
        
    }
    
    @media (min-width: 721px) {
        
        .main-nav {
            flex-direction: row;
        }
        
        .main-nav span {
            border-left: 1px solid var(--gold);
        }
        
    }
        
/* main */

main {
    position: relative;
    top: -180px;
}

    section {
        position: relative;
        overflow: hidden;
        scroll-margin-top: 200px;
    }

        .section-inner {
            padding: 82px 0;
        }
        
            .parallax {
                position: relative;
                background-position: center bottom;
                background-size: cover;
                background-repeat: no-repeat;
                background-attachment: fixed;
            }

            .parallax::before {
                content: '';
                padding-bottom: 55%;
                display: block;
            }
      
            @media (min-width: 751px) {
                .parallax::before {
                    padding-bottom: 35%;
                }
            }
            
            @media (min-width: 1501px) {
                .parallax::before {
                    padding-bottom: 25%;
                }
            }
            


/* */
            
.eyebrow {
    margin-bottom: 18px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    color: var(--muted);
}

.lead {
    margin-top: 22px;
    font-size: 20px;
    line-height: 1.18;
}

.accent {
    color: var(--red);
}

.maj {text-transform: uppercase}
.paddL {padding-left: 25px}

/* call to action */

.section-cta {
    margin-top: 60px;
    max-width: 360px;
}

    .section-cta .line {
        width: 58px;
        height: 8px;
        background: var(--gold);
        margin-bottom: 14px;
    }
    
    .section-cta p {
        margin: 0;
        color: var(--red);
    }

    .section-cta a:link,
    .section-cta a:visited {
        color: var(--black);
        text-transform: uppercase;
        text-decoration: none;
    }

/* intention (hero) */

.hero {
    background-color: transparent;
    background-image: url(/assets/images/photo1-750px.jpg);
    background-repeat: no-repeat;
    /*background-size: contain;*/
    background-position: right bottom;
}

@media (min-width: 751px) {
    .hero {
        background-image: url(/assets/images/photo1-1500px.jpg);
        background-size: contain;
        background-position: right bottom;
    }
}

@media (min-width: 1501px) {
    .hero {
        background-image: url(/assets/images/photo1-2500px.jpg);
    }
}

    .hero-grid {
        display: grid;
        gap: 40px;
        /*
        grid-template-columns: 1.05fr 0.95fr;
        padding: 76px 0 88px;
        */
    }

        .hero-grid > div {
            padding: 76px 0 88px;
            background: linear-gradient(to right, white, 50%, transparent);
            overflow: hidden;
            /* animation */
            position: relative;
            left: -100dvw;
            transition: left 1s 0s;
        }
        
        .hero-grid.visible > div {left: 0}
        
            .hero h1 {
                max-width: 640px;
                font-size: clamp(36px, 6vw, 51px);
                color: var(--red);
            }
            
            .hero-copy {
                max-width: 620px;
                margin-top: 22px;
                padding-bottom: 30px;
                color: #544c45;
            }
            
            .hero-cta > .section-cta {
                /* animation */
                position: relative;
                left: -100dvw;
                transition: left 1s 1s;
            }
        
            .hero-cta.visible > .section-cta {left: 0}
            
            

/* posture */

.posture {
    background-color: var(--white);
    /* animation */
    transition: background-color 3s;
}

    .posture.visible {background-color: var(--gold-soft)}
    
    .posture-head {
        color: var(--text);
        /* animation */
        transition: color 1s 0s;
    }
    
    .posture-head.visible {color: #f8f2ea}

        .posture h2 > span {
            font-size: clamp(38px, 5.5vw, 52px);
            /* animation */
            position: relative;
            left: -100dvw;
            transition: left 1s 0s;
        }
        
        .posture h2.visible > span {left: 0}
    
    .posture-cta {
        display: flex;
        justify-content: end;
    }
    
        .posture-cta > .section-cta {
            /* animation */
            position: relative;
            left: 100dvw;
            transition: left 1s 1s;
        }
    
        .posture-cta.visible > .section-cta {left: 0}
     
        .posture-cta .line {background: rgba(255,255,255,0.86)}

/* offer */

.offer {
    background: white;
}

    .offer h2 {
        font-size: clamp(36px, 6vw, 51px);
        color: var(--red);
    }

    .offer-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 96px;
        margin-top: 42px;
        overflow: hidden;
    }
    
        .card > div {position: relative}

        /* animation */
        
        @media (max-width: 1100px) {
            
            .card > div {
                transition-property: left;
                transition-duration: 1s;
                transition-delay: 0s;
            }
            
            .card:nth-child(1) > div {left: -100dvw}
            .card:nth-child(2) > div {left: 100dvw}
            .card:nth-child(3) > div {left: -100dvw}
            
            .card.visible > div {left: 0}
            
            .offer-cta > .section-cta {transition-delay: 0s}
            
        }
        
        @media (min-width: 1101px) {
            
            .card > div {
                top: 100%;
                transition-property: top;
                transition-duration: 1s;
            }
            
            .card:nth-child(1) {transition-delay: 0s;}
            .card:nth-child(2) > div {transition-delay: 1s}
            .card:nth-child(3) > div {transition-delay: 2s}
            
            .card.visible > div {top: 0}
            
            .offer-cta > .section-cta {transition-delay: 3s}
            
        }    
    
            .card h3 {
                font-size: 22px;
                line-height: 1.2;
                text-transform: uppercase;
                color: #b08a57;
            }

            .card .intro {
                margin-top: 16px;
                font-weight: 700;
                line-height: 1.2;
            }

            .examples {}

                .examples-title {
                    margin-bottom: 12px;
                    text-transform: uppercase;
                    color: white;
                    background: var(--gold);
                    padding: 0 10px;
                    display: inline-block;
                }
                
    .offer-cta {
        display: flex;
        justify-content: end;
    }
    
        .offer-cta > .section-cta {
            /* animation */
            position: relative;
            left: 100dvw;
            transition-property: left;
            transition-duration: 1s;
        }
    
        .offer-cta.visible > .section-cta {left: 0}

/* story */

.story {
    background-color: transparent;
    background-image: url(/assets/images/photo2-750px.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center 150px;
}

    .container-story.section-inner {
        margin-bottom: 80vw;
        padding: 0;
    }

    .story h2 {
        /*font-size: clamp(42px, 5vw, 72px);*/
        font-size: clamp(38px, 5.5vw, 52px);
        color: #b08a57;
    }

    .story-grid {
        display: grid;
        gap: 120px;
        grid-template-columns: 1.05fr 0.9fr;
        padding: 0 0 88px 0;
    }
    
        .story-grid > div {
            display: flex;
            flex-direction: column;
        }
        
            .story-copy {
                margin-top: 20px;
                font-size: 20px;
                color: #5c554d;
            }
            
            .story-cta {/*margin-top: 50px*/}
    
            .story-cta > .section-cta {
                /* animation */
                position: relative;
                left: -100dvw;
                transition: left 1s 2s;
            }
        
            .story-cta.visible > .section-cta {left: 0}

            .timeline-box > div {
                background: white;
                border-radius: var(--radius);
                padding: 28px;
                box-shadow: var(--shadow);
                /* animation */
                position: relative;
                left: 100dvw;
                transition: left 1s 1s;
            }

            .timeline-box.visible > div {left: 0}

                .timeline-box h3 {
                    font-size: clamp(24px, 5vw, 32px);
                    color: var(--red);
                    line-height: 1;
                }

                .timeline {
                    list-style: none;
                    margin: 22px 0 0;
                    padding: 0;
                }

                    .timeline li {
                        display: flex;
                        gap: 16px;
                        padding: 6px 0;
                        font-size: 14px;
                    }
                    
                        .year {
                            flex: 0 0 32px;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            height: 16px;
                            /* border-radius: 999px; */
                            background: var(--gold);
                            color: white;
                            font-weight: 700;
                        }
                        
    @media (min-width: 751px) {
        .story {
            /*
            background-image: url(/assets/images/photo2-1500px.jpg);
            background-position: -200px 0px;
            */
            background-position: center 120px;
        }
        .container-story.section-inner {
            margin-bottom: 65vw;
        }
    }

    @media (min-width: 1501px) {
        .story {
            background-image: url(/assets/images/photo2-2500px.jpg);
            background-position: -200px bottom;
        }
        
        .container-story.section-inner {
            margin-bottom: 0;
            padding: 82px 0 41px 0;
        }
        
        .story-grid {padding: 0 0 32px 0;}
    }

/* references */

.references {
    position: relative;
    margin-bottom: -200px;
}


    .references h2 {
        font-size: clamp(42px, 5vw, 72px);
    }

    .references-grid {
        display: grid;
        /*grid-template-columns: repeat(4, 1fr);*/
        grid-template-columns: 1.05fr 0.5fr;
        gap: 40px;
        margin-top: 34px;
    }

        .ref-items > div {
            column-count: 3;
            /* animation */
            position: relative;
            left: -100dvw;
            transition: left 1s 0s;
        }
        
        .ref-items.visible > div {left: 0}
        
            .ref-item {
                font-size: 24px;
                color: #5e564e;
            }

                .ref-item::before {
                    content: "• ";
                    color: var(--red);
                }
                
        .references-cta > .section-cta {
            /* animation */
            position: relative;
            left: 100dvw;
            transition: left 1s 1s;
        }
    
        .references-cta.visible > .section-cta {left: 0}

    #video2 {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: -1;
    }

        #video2 video {width: 100%}
    
/* footer */

main + footer {
    border-bottom: 18px solid var(--gold);
    background-color: transparent;
    background-image: url(/assets/images/bandeau-arrondi-footer.png);
    background-repeat: no-repeat;
    background-position: center top;
    color: rgba(255,255,255,0.82);
    text-align: center;
    padding: 50px 20px 28px 20px;
    font-size: 14px;
}

    main + footer > div {
        display: flex;
        justify-content: center;
        align-items: center;
        gap:14px 10px;
    }
    
        @media (min-width: 721px) {
            main + footer > div > a:not(:first-child) {display: none}
        }
        

    .second-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px 10px;
        margin-top: 20px;
    }

        .second-nav a {
            color: rgba(255,255,255,0.82);
            text-decoration: none;
            text-transform: uppercase;
            font-size: 85%;
            letter-spacing: 0.08em;
        }
        
        .second-nav button {
            color: rgba(255,255,255,0.82);
            text-decoration: none;
            text-transform: uppercase;
            font-size: 80%;
            letter-spacing: 0.08em;
            background: transparent;
            border: none;
            cursor: pointer;
        }
        
/* dialog */

:is( html, body ):has( :modal ) {
    overflow: hidden ;
}
		
::backdrop {
  background: rgba(0,0,0,1);
  opacity: 0.75;
}

    dialog {
        border: none;
        max-width: 700px;
    }
    
    .dialog--content {}
    
        .dialog--content h2 {font-size: clamp(36px, 6vw, 51px)}
    
    .dialog--footer {
        padding-top: 20px;
        display: flex;
        justify-content: end;
    }
    
        .dialog--footer button {
            background: transparent;
            border: none;
            cursor: pointer;
            text-decoration: underline;
        }

/* media query */

@media (max-width: 1100px) {
    
    .hero-grid,
    .story-grid,
    .posture-grid,
    .offer-grid,
    .references-grid {
        grid-template-columns: 1fr;
    }

    .timeline-box h3 { font-size: 34px; }
    .ref-item { font-size: 20px; }
    
}

@media (max-width: 720px) {
    
    
    
    .container { width: min(100% - 28px, 1200px); }
    .brand-row {
        flex-direction: column;
    }
    .brand-title { font-size: 26px; }
    .hero-grid { padding: 48px 0 0; }
    .section-inner { padding: 58px 0; }
    .hero-lead, .story-lead { font-size: 22px; }
    .hero-visual { min-height: 360px; }
    .ref-item { font-size: 18px; }
    .eagle { font-size: 84px; right: 14px; bottom: 120px; }
    
}

@media (min-width: 721px) {
    
    #fullwidth-video video {height: 100%}
    
    main {
        top: -90px;
    }
    
    .references {
        margin-bottom: -100px;
    }

}