.page-builder{
    display: flex;
    flex-direction: column;
    background-color: #FFF;

    .simple-link{
        font-size: .875rem;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        text-transform: uppercase;
        text-decoration: none;
        display: flex;
        gap: .75rem;
        transition: all ease-in-out 300ms;
    }
    .simple-link:after{
        content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13" fill="none"><path d="M1 0.5L7 6.5L1 12.5" stroke="black"/></svg>');
        margin-top: .0625rem;
    }
    .simple-link-white:after{
        content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13" fill="none"><path d="M1 0.5L7 6.5L1 12.5" stroke="white"/></svg>');
        margin-top: .0625rem;
    }
    .simple-link:hover{
        gap: 1.125rem;
    }

    .btn-link{
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;
        padding: 1rem 1.5rem;
        border: .0625rem solid #FFF;
        transition: all ease-in-out 300ms;
        text-decoration: none;
        
    }
    .btn-link:hover{
        background-color: #FFF;
        color: #000!important;
    }
    .btn-link-black{
        border: .0625rem solid #000;
    }
    .btn-link-black:hover{
        background-color: #000;
        color: #fff!important;
    }


    .bloc{
        max-width: 90rem;
        margin: 0 auto 60px;
    }
    .bloc:last-child{
        margin-bottom: 0;
    }
    .hero{
        .header-texte-wrapper {
            position: relative;
            max-width: 800px;
        }
        
        .header-texte {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            transition: all 0.3s ease;
            text-align: center;
        }
        
        .header-texte[data-expanded="true"] {
            -webkit-line-clamp: unset;
            line-clamp: unset;
        }
        
        .expand-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
            margin: 20px auto;
        }
        
        .expand-btn:hover {
            opacity: 0.7;
        }
        
        .header-texte[data-expanded="true"] + .expand-btn svg {
            transform: rotate(180deg);
        }
    }
    .ligne-de-blocs{
        display: flex;
        flex-direction: row;
        gap: 30px;
        width: 100%;
        .bloc-item{
            display: flex;
            flex-direction: column;

            background-color: #FAF9F6;
            width: 100%;
            .photo{
                overflow: hidden;
                .photo-link{
                    display: block;
                }
            }
            img{
                width: 100%;
                height: 320px;
                object-fit: cover;
                transition: transform .5s ease;
            }
            .titre{
                margin-left: 24px;
                margin-top: 30px;
                margin-bottom: 30px;
                a{
                    color: inherit;
                    text-decoration: none;
                    transition: opacity .3s ease;
                }
            }
            .simple-link{
                margin-left: 24px;
                margin-bottom: 30px;
            }
        }
        .bloc-item--linked{
            cursor: pointer;
        }
        .bloc-item:hover{
            img{
                transform: scale(1.04);
            }
            .titre a{
                opacity: .7;
            }
            .simple-link{
                gap: 1.125rem;
            }
        }
    }
    .ligne-de-produits{
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        margin-bottom: 3.75rem !important; /* 60px maquette — marge basse sous le bloc (important : le thème écrase sinon) */
        .ligne-de-produits__header{
            display: flex;
            flex-direction: column;
            gap: 20px;
            text-align: left;

            /* Ligne titre : surtitre + H2 à gauche, bouton à droite aligné
               avec le bas du H2 (le texte optionnel est SOUS cette ligne,
               sinon il ferait descendre le bouton). Pattern home .title. */
            .ligne-de-produits__header-top{
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                flex-wrap: wrap;
                gap: 20px;
            }
            .ligne-de-produits__header-left{
                display: flex;
                flex-direction: column;
                gap: 20px;
            }
            .surtitre{
                font-size: 16px;
                font-style: normal;
                font-weight: 300;
                line-height: normal;
                letter-spacing: 0.64px;
                text-transform: uppercase;
                display: flex;
                gap: 20px;
            }
            .surtitre:before{
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='9' viewBox='0 0 33 9' fill='none'%3E%3Cline y1='4.5' x2='32' y2='4.5' stroke='black'/%3E%3Cpath d='M28 0.5L32 4.5L28 8.5' stroke='black'/%3E%3C/svg%3E");
                display: block;
                width: 32px;
                height: 8px;
            }
            .btn-link{
                flex: 0 0 auto;
            }
        }
        .ligne-de-produits__titre{
            font-family: "Larken";
            font-size: 44px;
            font-style: normal;
            font-weight: 100;
            line-height: 52px;
            margin: 0;
        }
        .ligne-de-produits__texte{
            font-size: 16px;
            font-weight: 300;
            line-height: 24px;
            p{ margin: 0; }
            p + p{ margin-top: .75em; }
        }
        .grille{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 5rem 1.25rem;
        }
        .card{
            display: flex;
            flex-direction: column;
            gap: 2rem;
            position: relative;
            /* flex-start (défaut) : les infos suivent l'image (32px), les titres
               s'alignent en haut même quand un titre voisin passe sur 2 lignes.
               (space-between poussait .infos en bas des cartes étirées par la grid.) */
            justify-content: flex-start;
            .card__media,
            .card__title-link{
                color: inherit;
                text-decoration: none;
                display: block;
            }
            .images{
                width: 100%;
                aspect-ratio: 1;
                overflow: hidden; 

                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                .secondary{
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                    transition: all ease-in-out 300ms;
                    height: unset;
                    aspect-ratio: 1;
                }
            }

            .infos{
                display: flex;
                flex-direction: column;
                gap: 1.25rem;

                h3{
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 100;
                    line-height: normal;
                    margin-bottom: 0;
                }
                .separator{
                    background-color: #DEDCD2;
                    width: 100%;
                    height: .0625rem;
                }
                .price{
                    font-size: .875rem;
                    font-style: normal;
                    font-weight: 300;
                    line-height: 1.25rem;
                    color: #000;
                }
                .btn-link{
                    width: fit-content;
                    color: #000;
                }
            }
        }
        .card:hover{
            .secondary{
                opacity: 1;
            }
            .btn-link{
                background-color: #000;
                color: #fff!important;
            }
        }
    }
    .texte-2-colonnes{
            .title{
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                flex-wrap: wrap;
                margin-bottom: 40px;
                
                .surtitre{
                    
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 300;
                    line-height: normal;
                    letter-spacing: 0.64px;
                    text-transform: uppercase;
                    margin-bottom: 20px;
                    display: flex;
                    gap: 20px;
                }
                .surtitre:before{
                    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='9' viewBox='0 0 33 9' fill='none'%3E%3Cline y1='4.5' x2='32' y2='4.5' stroke='black'/%3E%3Cpath d='M28 0.5L32 4.5L28 8.5' stroke='black'/%3E%3C/svg%3E");
                    display: block;
                    width: 32px;
                    height: 8px;
                }
                .titre{
                    font-family: "Larken";
                    font-size: 44px;
                    font-style: normal;
                    font-weight: 100;
                    line-height: 52px;
                    
                }
            }
            .content{
                display: flex;
                gap: 30px;
                .colonne{
                    flex-basis: 0;
                    flex-grow: 1;
                }
            }
    }
    .hero-media{
        background-color: #FAF9F6;
        position: relative;
        width: 100%;
        &::before{
            content: "";
            position: absolute;
            top: 0;
            left: 100%;
            width: 1000px;
            height: 100%;
            background-color: #FAF9F6;
        }
        &::after{
            content: "";
            position: absolute;
            top: 0;
            right: 100%;
            width: 1000px;
            height: 100%;
            background-color: #FAF9F6;
        }
        .hero-media__inner{
            display: grid;
            grid-template-columns: 1fr 1fr;
            .hero-media__media{
                width: 100%;
                aspect-ratio: 1 / 1; /* format carré (maquette Figma) — l'image est croppée en cover */
                overflow: hidden;
                img,
                video{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }
                /* Iframe YouTube en mode inline */
                .hero-media__iframe-wrap{
                    width: 100%;
                    height: 100%;
                    iframe{
                        width: 100%;
                        height: 100%;
                        display: block;
                        border: 0;
                    }
                }
                /* Poster cliquable (mode popup) */
                &.hero-media__media--clickable{
                    position: relative;
                    .hero-media__poster{
                        appearance: none;
                        -webkit-appearance: none;
                        border: 0;
                        padding: 0;
                        margin: 0;
                        background: #000;
                        width: 100%;
                        height: 100%;
                        position: relative;
                        cursor: pointer;
                        display: block;
                        overflow: hidden;
                        > img{
                            transition: transform .4s ease, opacity .3s ease;
                        }
                        .hero-media__play{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            width: 86px;
                            height: 60px;
                            transform: translate(-50%, -50%);
                            transition: transform .3s ease;
                            img{
                                width: 100%;
                                height: 100%;
                                display: block;
                                object-fit: contain;
                            }
                        }
                        &:hover,
                        &:focus-visible{
                            > img{ transform: scale(1.03); opacity: .9; }
                            .hero-media__play{
                                transform: translate(-50%, -50%) scale(1.08);
                            }
                        }
                        &:focus-visible{
                            outline: 2px solid #fff;
                            outline-offset: -4px;
                        }
                    }
                }
            }
            .hero-media__content{
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 40px;
                gap: 30px;
                .hero-media__text p{
                    margin-bottom: 1em !important;
                }
            }
        }
    }

    /* Lightbox vidéo (mode popup) */
    .hero-media__dialog{
        padding: 0;
        border: 0;
        background: transparent;
        max-width: 90vw;
        max-height: 90vh;
        width: min(1100px, 90vw);
        overflow: visible;
        &::backdrop{
            background: rgba(0, 0, 0, .85);
        }
        .hero-media__dialog-body{
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            background: #000;
            iframe,
            video{
                width: 100%;
                height: 100%;
                display: block;
                border: 0;
            }
        }
        .hero-media__close{
            appearance: none;
            -webkit-appearance: none;
            position: absolute;
            top: -42px;
            right: 0;
            width: 36px;
            height: 36px;
            line-height: 1;
            font-size: 32px;
            color: #fff;
            background: transparent;
            border: 0;
            cursor: pointer;
            padding: 0;
            z-index: 2;
            &:hover,
            &:focus-visible{ opacity: .7; }
            &:focus-visible{ outline: 1px solid #fff; outline-offset: 4px; }
        }
    }
}
html.hero-media-lock{
    overflow: hidden;
}
.page-builder{
    .separateur{
        width: 100%;
        margin-top: 8px;
        hr{
            border: 0;                      /* neutralise les resets thème */
            background-color: #DEDCD2;      /* filet DA (idem .separator des cartes) */
            width: 100%;
            height: .0625rem;               /* 1px */
            margin: 0;
        }
    }
    .grille-produits{

    }
    .bloc-horizontal {
        display: flex;
        align-items: center;
        gap: 40px;
        height: 300px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 100px;
    }
    .bloc-horizontal:last-child{
        margin-bottom: 0;
    }
    
    /* Photo */
    .bloc-horizontal__photo {
        flex-shrink: 0;
        overflow: hidden;
        height: 100%;
    }
    
    .bloc-horizontal__photo img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
    
    /* Variante : Photo 1/3 de largeur */
    .bloc-horizontal.un_tiers .bloc-horizontal__photo {
        flex: 0 0 33.333%;
    }
    
    .bloc-horizontal.un_tiers .bloc-horizontal__contenu {
        flex: 1;
    }
    
    /* Variante : Photo 2/3 de largeur */
    .bloc-horizontal.deux_tiers .bloc-horizontal__photo {
        flex: 0 0 66.666%;
    }
    
    .bloc-horizontal.deux_tiers .bloc-horizontal__contenu {
        flex: 1;
    }
    
    /* Contenu texte */
    .bloc-horizontal__contenu {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 40px 40px 40px 0; 

    }
    
    .bloc-horizontal__titre {
        font-size: 1.5rem;
        line-height: 1.25rem;
        font-weight: 300 !important;
        margin: 0 0 1.5rem !important;
        text-align: left !important;
    }
    
    .bloc-horizontal__texte {
        padding-bottom: 0px !important;
        margin-bottom: auto;
        font-family: var(--typosans) !important;
        font-size: 0.875rem;
        line-height: 1.375rem;
        font-weight: 300;
        letter-spacing: 0px;
    }
    
    .bloc-horizontal__texte p {
        margin: 0 0 15px 0;
    }
    
    .bloc-horizontal__texte p:last-child {
        margin-bottom: 0;
    }

    .details-finitions{
        .grille{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        .details-finitions__card{
            background-color: #FAF9F6;
            padding: 32px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .details-finitions__header{
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
        }
        .details-finitions__titre{
            font-family: "Larken";
            font-size: 28px;
            font-weight: 100;
            line-height: 1.2;
            margin: 0;
            flex: 1;
        }
        .details-finitions__badge{
            flex-shrink: 0;
            background-color: #000;
            color: #FFF;
            font-size: 11px;
            font-weight: 400;
            letter-spacing: .5px;
            text-transform: uppercase;
            padding: 6px 14px;
            border-radius: 999px;
            white-space: nowrap;
            line-height: 1.4;
        }
        .details-finitions__details{
            list-style: none;
            padding: 0 0 24px;
            margin: 0;
            border-bottom: 1px solid #DEDCD2;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .details-finitions__detail{
            font-size: 14px;
            font-weight: 300;
            line-height: 1.5;
            color: #000;
        }
        .details-finitions__description{
            font-size: 13px;
            font-weight: 300;
            line-height: 1.5;
            color: #000;
            p{ margin: 0; }
            p + p{ margin-top: .5em; }
        }
    }
}

@media only screen and (max-width: 43.125rem){
    .page-builder{
        .ligne-de-blocs{
            flex-direction: column;
            .bloc-item{
                img{
                    height: 200px;
                }
            }
        }
        .texte-2-colonnes{
            .content{
                flex-direction: column;
            }
        }
        .details-finitions{
            .grille{
                grid-template-columns: 1fr;
            }
        }
        .hero-media{
            .hero-media__inner{
                grid-template-columns: 1fr;
                .hero-media__media{
                    height: 280px;
                }
                .hero-media__content{
                    padding: 40px 24px;
                    gap: 0;
                    h1{
                        font-size: 36px;
                        margin: 24px 0;
                    }
                    .hero-media__text p{
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 20px;
                    }
                }
            }
        }
    }
}