.hdp {

    /* Hero home (haut_de_page_fixe + disposition "section") : dimensions et
       espacements calqués sur lovable/src/components/home/Cover.tsx (relevé
       le 2026-09-08, pas d'équivalent 80vh dans la source -- min-height fixe
       en mobile, height fixe en desktop). */
    &.home {
        color: var(--white);
        padding: 0;
        position: relative;
        min-height: 640px;
        align-items: flex-end;
        display: flex;
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;

        @media (min-width: 992px) {
            min-height: unset;
            height: 860px;
        }

        /* Dégradé sombre gauche -> transparent, pour lisibilité du texte sur la photo */
        &::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(to right, color-mix(in srgb, var(--color-secondary) 92%, transparent) 8%, transparent 80%);
        }

        /* Correspond au conteneur dégradé de Cover.tsx (px-5 pb-24 pt-40,
           lg:px-30 lg:pb-40 lg:pr-[540px]) : pas de max-width centré, la
           marge de droite (540px) laisse la photo visible. */
        .container {
            position: relative;
            z-index: 2;
            width: 100%;
        }

        .hdp__content {
            display: flex;
            flex-direction: column;
            text-align: left;
            align-items: flex-start;
            margin: 0;
            max-width: none;
            gap: 20px;
            padding: 160px 0 96px;

            @media (min-width: 992px) {
                padding: 160px 0;
            }

            .hdp__title {
                @media (min-width: 992px) {

                    max-width: 65%;
                }

                h1 {
                    color: var(--white);
                    text-align: left;
                    max-width: none;
                    margin: 0;
                    font-size: clamp(38px, 5vw, 68px);
                    line-height: 1.06;
                    font-weight: var(--medium);

                    span {
                        font-weight: var(--medium);
                    }
                }
            }

            .hdp__intro {
                color: var(--white);
                text-align: left;
                margin: 0;
                max-width: 520px;

                p {
                    color: var(--white);
                    margin: 0;
                    font-size: 16px;
                    line-height: 24px;
                    font-weight: var(--light);
                }
            }

            .cta {
                margin: 0;
                gap: 20px;
                justify-content: flex-start;

                &:has(.cta.section__btn+.bouton) {
                    display: flex;
                    flex-direction: row;
                    gap: 15px;
                    flex-wrap: wrap;
                }

                &:not(.section__btn):has(.cta+.bouton) {
                    padding-top: 20px;
                }
            }
        }
    }

    &.hdp--head {
        position: relative;

        .container {
            height: 100%;
            display: flex;

            .hdp__img {
                height: 100%;
                left: 0;
                -o-object-fit: cover;
                object-fit: cover;
                position: absolute;
                top: 0;
                width: 100%;
                z-index: 1;
            }

            .hdp__content {
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                position: relative;
                z-index: 2;
                height: fit-content;
                margin: auto;
                gap: 10px;

                .section__btn {
                    margin: auto;
                }

                @media (max-width: 767px) {
                    padding-top: 80px;
                }

                .cta {
                    margin: auto;
                }

                .hdp__title {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                }

                .hdp__intro {
                    max-width: 960px;
                    margin: 0 auto;
                    color: var(--dark-grey);

                    p {
                        margin: 0;
                    }
                }

                .avis_google {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 8px;

                    .stars_google {
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .star_google {
                            width: 20px;
                            height: 20px;
                        }
                    }

                    .score {
                        font-family: var(--title-font);
                        font-size: 24px;
                        line-height: 24px;
                        font-weight: var(--extrabold);
                        font-style: italic;
                        /* color: var(--color-primary); */
                        color: #42eb84;
                    }

                    p {
                        margin: 0;
                        font-size: 16px;
                        line-height: 24px;
                    }
                }

                .hdp__elements_bas {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 16px;
                    margin-bottom: 32px;
                    flex-wrap: wrap;
                }

                #calcom-embed-link {
                    margin: auto;
                }
            }
        }
    }

    &.hdp--section {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 560px;
        display: flex;
        align-items: center;
        padding: 80px 0 20px 0;

        @media (min-width: 992px) {
            padding: 150px 0 20px 0;
        }

        &:not(.single) {
            background-image: url('../../img/bg_hdp.jpg');

            .container {
                .hdp__intro {

                    .cta {
                        &:has(.bouton+.bouton, .bouton+.bouton--alt, .bouton--alt+.bouton, .bouton--alt+.bouton--alt) {
                            display: flex;
                            justify-content: center;
                            gap: 16px;
                        }
                    }
                }

                .hdp__elements_bas {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 16px;
                    margin-bottom: 32px;
                }
            }
        }

        .container {
            color: var(--dark);
            position: relative;

            .hdp__content {
                text-align: center;

                .hdp__elements_surtitre {
                    display: flex;
                    justify-content: center;

                    .cta.surtitre {
                        &:has(img) {
                            width: 41px !important;
                            height: 41px !important;
                            padding: 0px 2px !important;

                            &:not(:first-child) {
                                margin-left: -10px;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* La home combine .home ET .hdp--section (disposition_image_de_fond = "section") :
   ce bloc, placé après les deux ci-dessus pour gagner sur l'ordre de cascade à
   spécificité égale, garantit le texte blanc aligné à gauche du hero Cover. */
.hdp.home.hdp--section {
    .container {
        color: var(--white);

        .hdp__content {
            text-align: left;
        }
    }
}

/* Hero "Postuler" (haut_de_page_fixe + disposition_image_de_fond = "section", HORS home) :
   calé sur lovable/src/components/postuler/PostulerHero.tsx (relevé le 2026-09-09).
   Le sélecteur :not(.home) garantit qu'aucune propriété ne peut toucher le hero home
   (383, bloc .home ci-dessus, à ne jamais modifier) : aujourd'hui, disposition_image_de_fond
   = "section" hors home n'est utilisé QUE par la page Contact/Postuler (937) -- ce correctif
   est donc appliqué à la variante générique "section" (et non scopé par ID de page), pour
   rester valable si une future page réutilise cette disposition hors home. CSS plat
   (pas de syntaxe imbriquée), conforme à l'étape 7 du brief. */
.hdp.hdp--section:not(.home) {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    min-height: 560px;
    padding: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

@media (min-width: 992px) {
    .hdp.hdp--section:not(.home) {
        min-height: unset;
        height: 680px;
    }
}

/* Dégradé sombre gauche -> transparent, pour lisibilité du texte blanc sur la photo */
.hdp.hdp--section:not(.home)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, color-mix(in oklab, var(--color-secondary) 98%, transparent) 8%, transparent 80%);
}

.hdp.hdp--section:not(.home) .container {
    position: relative;
    z-index: 2;
    width: 100%;
    color: var(--white);
}

.hdp.hdp--section:not(.home) .container .hdp__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: 0;
    max-width: none;
    gap: 20px;
    padding: 128px 0 80px;
}

@media (min-width: 992px) {
    .hdp.hdp--section:not(.home) .container .hdp__content {
        padding: 128px 0 112px;
    }

    .hdp.hdp--section:not(.home) .container .hdp__content .hdp__title {
        max-width: 65%;
    }
}

.hdp.hdp--section:not(.home) .container .hdp__content .hdp__title h1 {
    color: var(--white);
    text-align: left;
    max-width: none;
    margin: 0;
    font-size: clamp(30px, 3.6vw, 68px);
    line-height: 1.1;
    font-weight: var(--medium);
}

.hdp.hdp--section:not(.home) .container .hdp__content .hdp__title h1 span {
    font-family: var(--title-font);
    font-style: italic;
    color: var(--color-primary);
}

.hdp.hdp--section:not(.home) .container .hdp__content .hdp__intro {
    color: var(--white);
    text-align: left;
    margin: 0;
    max-width: 560px;
}

.hdp.hdp--section:not(.home) .container .hdp__content .hdp__intro p {
    color: var(--white);
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--light);
}

/* Pas de bouton dans le hero Postuler (ajouter_bouton=false côté ACF) : le PHP rend
   quand même un <div class="cta"> non vide au sens strict (retour à la ligne =
   noeud texte), d'où :not(:has(*)) plutôt que :empty pour neutraliser son gap/padding
   résiduel quand aucun bouton n'est présent. */
.hdp.hdp--section:not(.home) .container .hdp__content .cta:not(:has(*)) {
    display: none;
}

/* Hero "Le concept" (haut_de_page_fixe + disposition_image_de_fond = "section", page 1822,
   je-m-installe/le-concept) : calé sur lovable/src/components/le-concept/ConceptHero.tsx
   (relevé le 2026-09-09). Ce hero reprend EXACTEMENT la taille de titre du hero home
   (Cover.tsx : clamp(38px,5vw,68px), line-height 1.06, intro max-width 520px) -- alors que
   le bloc générique :not(.home) ci-dessus est calé sur le hero "Postuler" (page 937,
   PostulerHero.tsx : clamp(30px,3.6vw,50px)), plus petit. Override scopé par ID de page
   plutôt que modificateur générique : à ce jour un seul autre hero hors home ("Postuler")
   utilise cette disposition et sa taille diffère de celle-ci -- pas encore assez
   d'occurrences pour dégager une convention fiable "grande vs petite" taille. Si une
   3e page reprend un jour la taille "grande" (identique home), il sera temps d'introduire
   un vrai modificateur (champ ACF ou classe dédiée) plutôt que d'empiler les scopes par ID. */
body.page-id-1822 .hdp.hdp--section:not(.home) .container .hdp__content .hdp__title h1 {
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.06;
}

body.page-id-1822 .hdp.hdp--section:not(.home) .container .hdp__content .hdp__intro {
    max-width: 520px;
}