.hdp {
    &.home {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: linear-gradient(to bottom, rgba(255, 225, 215, 0.5) 0%, var(--white) 100%);
        /* padding-top = hauteur header fixe + respiration
           mobile <768px  : header 92px  → 110px
           768px-1023px   : top 36px + header 92px → 150px
           ≥1024px        : top 36px + header 112px → 180px          */
        padding: 110px 0 80px;

        @media (min-width: 768px) {
            padding: 150px 0 80px;
        }

        @media (min-width: 1024px) {
            padding: 230px 0 80px;
        }

        .container {
            max-width: 1024px;
        }

        .hdp__content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hdp__title h1 {
            margin: 0;
            max-width: 64rem;
            color: var(--color-deep-blue);
            font-weight: var(--bold);
            letter-spacing: -0.025em;
            line-height: 1.05;
            font-size: clamp(1.75rem, 4.5vw, 4rem);
        }

        .hdp__intro {
            margin-top: 32px;
            max-width: 42rem;

            *:not(.bouton) {
                color: var(--color-primary-dark);
            }

            h2 {
                color: var(--color-primary) !important;
            }

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

        .section__btn {
            margin: 40px 0 0;

            .bouton {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                height: 56px;
                min-height: 56px;
                padding: 0 12px 0 28px !important;
                border-radius: var(--border-radius-full);
                background-color: var(--color-cta);
                color: var(--white);
                font-size: 16px;
                font-weight: var(--medium);
                transition: var(--transition);

                &::after {
                    content: '';
                    flex: 0 0 auto;
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    background-color: var(--white);
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff6648' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 20px 20px;
                    transition: var(--transition);
                }

                &:hover {
                    background-color: var(--color-deep-blue);

                    &::after {
                        transform: rotate(45deg);
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23081125' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E");
                    }
                }
            }
        }
    }

    /* En-tête de page intérieure (fil d'ariane + titre + intro + image),
       aligné à gauche, calqué sur la maquette Lovable (pages Collège, etc.). */
    &.hdp--head {
        position: relative;
        /* padding: 110px 0 0;

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

        @media (min-width: 1024px) {
            padding: 180px 0 0;
        } */

        .hdp__content {
            display: flex;
            flex-direction: column;
            text-align: left;
        }

        .hdp__breadcrumb {
            margin-bottom: var(--spacing-6);
        }

        .hdp__breadcrumb-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: var(--spacing-2);
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: var(--font-size-sm);
            line-height: var(--line-height-sm);
            color: var(--color-primary-dark-60);
        }

        .hdp__breadcrumb-item {
            display: inline-flex;
            align-items: center;

            * {
                font-size: 14px;
            }
        }

        .hdp__breadcrumb-link {
            color: var(--color-primary-dark-60);
            text-decoration: none;
            transition: var(--transition);
        }

        .hdp__breadcrumb-link:hover {
            color: var(--color-primary);
            text-decoration: underline;
        }

        .hdp__breadcrumb-link--muted {
            color: var(--color-primary-dark-40);
        }

        .hdp__breadcrumb-current {
            color: var(--color-primary-dark);
            font-weight: var(--medium);
        }

        .hdp__breadcrumb-sep {
            flex: 0 0 auto;
            width: 16px;
            height: 16px;
            background-color: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
        }

        .hdp__title h1 {
            margin: 0;
            color: var(--color-deep-blue);
            font-weight: var(--bold);
            letter-spacing: -0.025em;
            line-height: 1.05;
            font-size: clamp(2rem, 4vw, 3.5rem);
        }

        .hdp__intro {
            margin-top: 32px;

            *:not(.bouton) {
                color: var(--color-primary-dark);
            }

            h2 {
                color: var(--color-primary) !important;
            }

            p {
                margin: 10px 0;
                font-size: 16px;
                line-height: var(--line-height-relaxed);

                &:has(.bouton) {
                    margin-top: 20px;
                }
            }

            /* Espacement entre paragraphes/listes/tableaux successifs collés dans le wysiwyg
               (space-y-5 Lovable ≈ 20px) — les <p>/<ul>/<h3>/<table> qui se suivent, hors 1er
               enfant. */
            > * + * {
                margin-top: 20px;
            }

            /* Sous-titre h2 optionnel (ex. "Maquette du D.E.S...", page 3ème cycle DES) —
               plus spécifique que ".hdp__intro *" ci-dessus, gagne sans !important. */
            h2 {
                margin: 0 0 16px;
                color: var(--color-primary);
                font-weight: var(--bold);
                letter-spacing: -0.025em;
                font-size: 1.5rem;

                @media (min-width: 768px) {
                    font-size: 1.875rem;
                }
            }

            /* Sous-titre h3 optionnel (ex. "Liste attestations", page Formation diplômante). */
            h3 {
                margin: 16px 0 0;
                color: var(--color-deep-blue);
                font-weight: var(--bold);
                font-size: 1.25rem;
            }

            /* Tableaux optionnels collés dans le wysiwyg (ex. tarifs/attestations, page
               Formation diplômante) — calé pixel pour pixel sur Lovable : le rayon/bordure/
               scroll horizontal sont portés par un DIV WRAPPER (.table-scroll, à coder en dur
               autour de <table> dans le HTML poussé), JAMAIS par <table> directement.
               border-radius + overflow:hidden ne se combinent pas fiablement avec
               border-collapse:collapse sur un <table> selon les navigateurs — constaté en
               production (tableaux "non stylés" malgré la règle), d'où le passage au wrapper. */
      

            /* Lien-bouton en ligne dans le texte (ex. "S'inscrire") — pilule orange compacte,
               distincte de .section__btn .bouton (plus grande, avec cercle d'icône, réservée au
               bouton de fin de bloc haut_de_page_fixe). Utilisation : coller un lien avec cette
               classe directement dans le champ hdp_texte. */
            .hdp__inline-btn {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 10px 20px;
                border-radius: var(--border-radius-full);
                background-color: var(--color-cta) !important;
                color: var(--white);
                font-size: 14px;
                font-weight: var(--semibold);
                text-decoration: none;
                transition: background-color 0.2s ease;
            }

            .hdp__inline-btn:hover {
                background-color: var(--color-deep-blue);
            }

            .hdp__inline-btn svg {
                flex-shrink: 0;
            }
        }

        .hdp__media {
            margin: 40px 0 0;
            width: 100%;
            overflow: hidden;
            border-radius: var(--border-radius-2xl);
            background-color: var(--grey);

            img {
                display: block;
                width: 100%;
                height: auto;
                object-fit: cover;
            }
        }

        .section__btn {
            margin: 40px 0 0;
        }
    }

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

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

        @media (min-width: 1024px) {
            padding: 180px 0 20px 0;
        }

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

            .container {
                .hdp__intro {
                    max-width: 960px;
                    margin: 0 auto;

                    .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;
                }
            }
        }

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

            .container {
                h1 {
                    color: var(--color-primary-light);
                    margin: 20px auto 0 auto !important;
                }

                h2 {
                    color: var(--white);
                    font-size: 40px;
                    line-height: 46px;
                    font-weight: var(--extrabold);
                    font-style: italic;

                    @media (min-width: 992px) {
                        font-size: 52px;
                        line-height: 60px;
                    }
                }
            }
        }

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

            .hdp__content {
                text-align: center;

                h1 {
                    max-width: 800px;
                    margin: 10px auto;
                    color: var(--color-primary-dark);
                }

                .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;
                            }
                        }
                    }
                }
            }
        }
    }
}