/* ============================================================
   Serapid — haut_de_page_fixe
   Hero wrapper arrondi, background image + overlay dégradé,
   sur-titre, H1 multi-lignes, intro, 2 CTAs, icônes sociales.
   ============================================================ */

/* -------------------------------------------------------
   Conteneur externe (padding latéral de la page)
------------------------------------------------------- */
.hdp {
    padding: 71px 0 0 0 !important;

    @media (min-width: 992px) {
        padding: 113px 0 0 0 !important;
    }
}

.hdp__outer {
    padding-top: 5px;
}

/* -------------------------------------------------------
   Wrapper (carte arrondie avec overflow hidden)
------------------------------------------------------- */
.hdp__wrapper {
    position: relative;
    border-radius: var(--border-radius-card);
    overflow: hidden;
    background: var(--color-navy-deep);
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* -------------------------------------------------------
   Image de fond
------------------------------------------------------- */
.hdp__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* -------------------------------------------------------
   Overlay dégradé navy (rgba(38,69,100,0.96) → rgba(15,26,37,0.50))
------------------------------------------------------- */
.hdp__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(38, 69, 100, 0.96) 20%,
            rgba(15, 26, 37, 0.50) 80%);
    z-index: 1;
}

/* -------------------------------------------------------
   Zone intérieure (flex colonne, espace entre content et socials)
------------------------------------------------------- */
.hdp__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 560px;
    padding: 64px 20px 40px;
    color: var(--white);
}

@media (min-width: 576px) {
    .hdp__inner {
        min-height: 640px;
        padding: 80px 32px 40px;
    }
}

@media (min-width: 992px) {
    .hdp__inner {
        min-height: 760px;
        padding: 96px 40px 40px;
    }
}

/* -------------------------------------------------------
   Variante hdp--section (ex: page rigid-chain) — calquée sur le
   SectionHero Lovable : min-height 420px (<992px) / 560px (≥992px)
   et contenu centré verticalement (pas de socials ancrés en bas).
   Scopé pour ne pas affecter le hero d'accueil (hdp--head).
------------------------------------------------------- */
.hdp--section .hdp__inner {
    justify-content: center;
    min-height: 420px;
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (min-width: 992px) {
    .hdp--section .hdp__inner {
        min-height: 560px;
    }
}

/* -------------------------------------------------------
   Bloc contenu principal (centré)
------------------------------------------------------- */
.hdp__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 1100px;
    gap: 0;
    /* les gaps sont gérés individuellement via margin */
}

/* -------------------------------------------------------
   Sur-titre
------------------------------------------------------- */
.hdp__surtitre {
    font-family: var(--main-font);
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--white);
    margin: 0 0 16px;
}

@media (min-width: 576px) {
    .hdp__surtitre {
        font-size: 14px;
        line-height: 22px;
    }
}

@media (min-width: 992px) {
    .hdp__surtitre {
        font-size: 16px;
        line-height: 24px;
    }
}

/* -------------------------------------------------------
   Fil d'Ariane Rank Math
------------------------------------------------------- */
.hdp__breadcrumb {
    font-family: var(--main-font);
    font-size: 12px !important;
    line-height: 18px !important;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 16px;
    max-width: 100%;
}
.hdp__breadcrumb p,
.hdp__breadcrumb a,
.hdp__breadcrumb .separator,
.hdp__breadcrumb .last {
    font-size: 12px !important;
    line-height: 18px !important;
    margin: 0;
}
.hdp__breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color .2s ease;
}
.hdp__breadcrumb a:hover {
    color: var(--color-gold, #d4a441);
    text-decoration: underline;
}
.hdp__breadcrumb .separator {
    margin: 0 6px;
    opacity: 0.6;
}
.hdp__breadcrumb .last {
    color: #ffffff;
    font-weight: 500;
}

/* -------------------------------------------------------
   H1
------------------------------------------------------- */
.hdp__title {
    font-family: var(--title-font);
    font-size: 32px;
    line-height: 38px;
    font-weight: 400;
    margin: 0 0 24px;
}

@media (min-width: 576px) {
    .hdp__title {
        font-size: 40px;
        line-height: 48px;
        margin-bottom: 32px;
    }
}

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

.hdp__title h1 {
    margin: 0;
}

.hdp__title *:not(span) {
    color: var(--white);
}

.hdp__gold {
    color: var(--color-gold);
}

/* -------------------------------------------------------
   Introduction
------------------------------------------------------- */
.hdp__intro {
    max-width: 760px;
    font-family: var(--main-font);
    font-size: 15px;
    line-height: 24px;
    font-weight: 300;
    color: var(--white);
    margin: 0 0 40px;
}

.hdp__intro p {
    margin: 0;
    font-size: 20px;
    line-height: 32px;
}

.hdp__intro strong {
    font-weight: 700;
}

@media (min-width: 576px) {
    .hdp__intro {
        font-size: 17px;
        line-height: 28px;
    }
}

@media (min-width: 992px) {
    .hdp__intro {
        font-size: 20px;
        line-height: 32px;
    }
}

/* -------------------------------------------------------
   CTAs
------------------------------------------------------- */
.hdp__ctas {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
}

@media (min-width: 576px) {
    .hdp__ctas {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: auto;
        gap: 16px;
    }
}

/* Bouton primaire (gold) */
.hdp__cta--gold {
    background: var(--color-gold);
    color: var(--white);
    border: 1px solid transparent;
}

.hdp__cta--gold:hover {
    background: var(--color-dark-gold);
    color: var(--white);
}

/* Compatibilité ancienne classe bouton.php si utilisée ailleurs dans le HDP */
.hdp__ctas .bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0px 24px;
    border-radius: var(--border-radius-full);
    color: var(--white);
    font-family: var(--main-font);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    line-height: 1;
    margin: 0;
}

.hdp__ctas .bouton:hover {
    background: var(--color-dark-gold);
    color: var(--white);
}

/* CTA secondaire (contour blanc) */
.hdp__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--border-radius-full);
    font-family: var(--main-font);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1;
}

.hdp__cta--outline {
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: transparent;
    color: var(--white);
}

.hdp__cta--outline:hover {
    background: var(--white);
    color: var(--color-navy);
    border-color: var(--white);
}

.hdp__cta-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.hdp__cta:hover .hdp__cta-arrow,
.hdp__cta--outline:hover .hdp__cta-arrow {
    transform: translateX(2px);
}

/* -------------------------------------------------------
   Réseaux sociaux (barre en bas du hero)
------------------------------------------------------- */
.hdp__socials {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    border-radius: var(--border-radius-card);
    border: 1px solid rgba(38, 69, 100, 0.48);
    background: rgba(38, 69, 100, 0.48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin-top: 48px;
}

@media (min-width: 576px) {
    .hdp__socials {
        margin-top: 64px;
    }
}

.hdp__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: var(--transition);
}

.hdp__social-link svg {
    width: 20px;
    height: 20px;
    display: block;
}

.hdp__social-link:hover {
    color: var(--color-gold);
}

/* -------------------------------------------------------
   Éléments sur-titre (mode repeater)
------------------------------------------------------- */
.hdp__elements_surtitre {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.hdp__surtitre-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hdp__surtitre-picto {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* -------------------------------------------------------
   Éléments bas
------------------------------------------------------- */
.hdp__elements_bas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.hdp__element-bas {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--white);
    text-decoration: none;
    font-family: var(--main-font);
    font-size: 14px;
    transition: var(--transition);
}

.hdp__element-bas:hover {
    color: var(--color-gold);
}

.hdp__element-bas-picto {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* -------------------------------------------------------
   Variante : mode hdp--section (plein écran sans wrapper)
------------------------------------------------------- */
.hdp.hdp--section:not(.hdp--serapid) {
    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) {
    .hdp.hdp--section:not(.hdp--serapid) {
        padding: 150px 0 20px 0;
    }
}

.hdp {
    * p {
        &:not(.cta):not(.section__btn) {
            color: var(--white) !important;
        }
    }
}