/* ============================================================
   AGENCE AUGUSTIN — Heroes de référence
   Chaque variante reproduit directement son Hero React associé.
   Aucun style ne dépend du type de page WordPress.
   ============================================================ */

#main-content .hero {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    background: var(--aa-lin) !important;
}

#main-content .hero__media {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
}

#main-content .hero__overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

#main-content .hero__content {
    position: relative !important;
    z-index: 2 !important;
}

#main-content .hero__content-inner {
    width: 100% !important;
}

#main-content .hero__title {
    margin: 0 !important;
    font-family: "Cormorant Garamond", serif !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-optical-sizing: auto !important;
    font-kerning: normal !important;
    text-transform: uppercase !important;
    text-wrap: wrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

#main-content .hero__subtitle,
#main-content .hero__intro {
    font-family: "DM Sans", sans-serif !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-optical-sizing: auto !important;
    font-kerning: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

#main-content .hero__subtitle > :first-child,
#main-content .hero__intro > :first-child {
    margin-top: 0 !important;
}

#main-content .hero__subtitle > :last-child,
#main-content .hero__intro > :last-child {
    margin-bottom: 0 !important;
}

#main-content .hero__rule {
    display: block !important;
    width: 3rem !important;
    height: 1px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    background: var(--aa-or) !important;
}

/* ============================================================
   HERO HOME — référence : Home.tsx
   h-screen · min-h-[680px] · texte en bas à gauche
   ============================================================ */

#main-content .hero.hero--home {
    height: 100vh !important;
    min-height: 680px !important;
    margin: 0 !important;
    background: var(--aa-brun) !important;
    color: var(--aa-lin) !important;
}

#main-content .hero.hero--home .hero__media {
    object-position: center center !important;
}

#main-content .hero.hero--home .hero__overlay {
    background: linear-gradient(
        90deg,
        rgba(60, 42, 30, .68) 0%,
        rgba(60, 42, 30, .34) 48%,
        rgba(60, 42, 30, .08) 100%
    ) !important;
}

#main-content .hero.hero--home .hero__content {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    width: 100% !important;
    padding: 0 0 4rem !important;
}

#main-content .hero.hero--home .hero__content > .container {
    width: 100% !important;
}

#main-content .hero.hero--home .hero__content-inner {
    max-width: 820px !important;
    margin: 0 !important;
    text-align: left !important;
}

#main-content .hero.hero--home .hero__title {
    width: auto !important;
    max-width: 820px !important;
    color: var(--aa-lin) !important;
    font-size: clamp(2.65rem, 6.15vw, 5.8rem) !important;
    line-height: .92 !important;
    letter-spacing: .03em !important;
    text-align: left !important;
}

#main-content .hero.hero--home .hero__subtitle {
    width: auto !important;
    max-width: none !important;
    margin: 1.75rem 0 0 !important;
    color: var(--aa-lin) !important;
    font-size: clamp(1.05rem, 1.55vw, 1.42rem) !important;
    line-height: 1.55 !important;
    opacity: .88 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

/* ============================================================
   HERO IMAGE — référence : APropos.tsx
   min-h-[92vh] · image object-top · texte en bas à gauche
   ============================================================ */

#main-content .hero.hero--image {
    display: flex !important;
    align-items: flex-end !important;
    height: auto !important;
    min-height: 92vh !important;
    margin: 0 !important;
    background: var(--aa-brun) !important;
    color: var(--aa-lin) !important;
}

#main-content .hero.hero--image .hero__image {
    object-position: center top !important;
}

#main-content .hero.hero--image .hero__overlay {
    background: linear-gradient(
        90deg,
        rgba(60, 42, 30, .78) 0%,
        rgba(60, 42, 30, .42) 46%,
        rgba(60, 42, 30, .12) 100%
    ) !important;
}

#main-content .hero.hero--image .hero__content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 5rem !important;
}

#main-content .hero.hero--image .hero__content > .container {
    width: 100% !important;
}

#main-content .hero.hero--image .hero__content-inner {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

#main-content .hero.hero--image .hero__title {
    width: auto !important;
    max-width: none !important;
    color: var(--aa-lin) !important;
    font-size: clamp(3.5rem, 8vw, 7rem) !important;
    line-height: .92 !important;
    letter-spacing: .02em !important;
    text-align: left !important;
}

#main-content .hero.hero--image .hero__subtitle {
    width: max-content !important;
    max-width: none !important;
    margin: 1.75rem 0 0 !important;
    color: var(--aa-lin) !important;
    font-size: clamp(1.08rem, 1.75vw, 1.35rem) !important;
    line-height: 1.7 !important;
    opacity: .84 !important;
    text-align: left !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* ============================================================
   HERO MINIMAL — référence : ExperienceFamille.tsx
   Hero compact sous Header solide, introduction, texte centré et règle dorée.
   ============================================================ */

#main-content .hero.hero--minimal {
    display: flex !important;
    align-items: center !important;
    min-height: clamp(520px, calc(100svh - 190px), 680px) !important;
    margin-top: 72px !important;
    padding: 3.75rem 0 3.25rem !important;
    border-bottom: 1px solid rgba(60, 42, 30, .08) !important;
    background: var(--aa-lin) !important;
    color: var(--aa-brun) !important;
}

#main-content .hero.hero--minimal .hero__content {
    width: 100% !important;
    text-align: center !important;
}

#main-content .hero.hero--minimal .hero__intro {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 2.5rem !important;
    color: var(--aa-ardoise) !important;
    font-size: .76rem !important;
    line-height: 1.5 !important;
    letter-spacing: .22em !important;
    opacity: 1 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

#main-content .hero.hero--minimal .hero__breadcrumb {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .75rem !important;
    margin: 0 0 2.5rem !important;
    font-family: var(--aa-font-body) !important;
    font-size: .68rem !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
}

#main-content .hero.hero--minimal .hero__breadcrumb a {
    color: var(--aa-ardoise) !important;
}

#main-content .hero.hero--minimal .hero__breadcrumb > span:first-of-type {
    color: var(--aa-ardoise) !important;
    opacity: .4 !important;
}

#main-content .hero.hero--minimal .hero__breadcrumb > span:last-child {
    color: var(--aa-brun) !important;
}

#main-content .hero.hero--minimal .hero__content-inner {
    max-width: 896px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
}

#main-content .hero.hero--minimal .hero__title {
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    color: var(--aa-brun) !important;
    font-size: clamp(2.7rem, 6vw, 5.4rem) !important;
    line-height: .95 !important;
    letter-spacing: .12em !important;
    text-align: center !important;
}

#main-content .hero.hero--minimal .hero__subtitle {
    width: 100% !important;
    max-width: 58ch !important;
    margin: 1.5rem auto 0 !important;
    color: var(--aa-ardoise) !important;
    font-size: clamp(1rem, 1.7vw, 1.28rem) !important;
    line-height: 1.72 !important;
    text-align: center !important;
}

#main-content .hero.hero--minimal .hero__rule {
    margin-top: 1.75rem !important;
}

/* ============================================================
   HERO SIGNATURE — référence : Signature.tsx
   Hero volontairement court pour laisser voir largement la section suivante.
   ============================================================ */

#main-content .hero.hero--signature {
    display: flex !important;
    align-items: center !important;
    min-height: 56vh !important;
    margin-top: 72px !important;
    padding: 4.5rem 0 3.5rem !important;
    border-bottom: 1px solid rgba(60, 42, 30, .08) !important;
    background: var(--aa-lin) !important;
    color: var(--aa-brun) !important;
}

#main-content .hero.hero--signature .hero__content {
    width: 100% !important;
}

#main-content .hero.hero--signature .hero__content-inner {
    max-width: 896px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
}

#main-content .hero.hero--signature .hero__title {
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    color: var(--aa-brun) !important;
    font-size: clamp(3rem, 7vw, 6rem) !important;
    line-height: .92 !important;
    letter-spacing: .04em !important;
    text-align: center !important;
}

#main-content .hero.hero--signature .hero__subtitle {
    width: 100% !important;
    max-width: 58ch !important;
    margin: 1.75rem auto 0 !important;
    color: var(--aa-ardoise) !important;
    font-size: clamp(1rem, 1.7vw, 1.28rem) !important;
    line-height: 1.72 !important;
    text-align: center !important;
}

#main-content .hero.hero--signature .hero__rule {
    margin-top: 2.25rem !important;
}

/* ============================================================
   HERO JOURNAL — référence : Journal.tsx
   En-tête éditorial compact, centré, avec rythme vertical resserré.
   ============================================================ */

#main-content .hero.hero--journal {
    display: flex !important;
    align-items: center !important;
    min-height: 46vh !important;
    margin-top: 72px !important;
    padding: 5rem 0 3.5rem !important;
    border-bottom: 1px solid rgba(60, 42, 30, .08) !important;
    background: var(--aa-lin) !important;
    color: var(--aa-brun) !important;
}

#main-content .hero.hero--journal .hero__content {
    width: 100% !important;
}

#main-content .hero.hero--journal .hero__content-inner {
    display: flex !important;
    max-width: 768px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

#main-content .hero.hero--journal .hero__intro {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1.5rem !important;
    color: var(--aa-ardoise) !important;
    font-size: .65rem !important;
    line-height: 1.5 !important;
    letter-spacing: .22em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

#main-content .hero.hero--journal .hero__title {
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    color: var(--aa-brun) !important;
    font-size: clamp(3.2rem, 7vw, 6.2rem) !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    text-align: center !important;
}

#main-content .hero.hero--journal .hero__subtitle {
    width: 100% !important;
    max-width: 46ch !important;
    margin: 2rem auto 0 !important;
    color: var(--aa-ardoise) !important;
    font-size: .9rem !important;
    line-height: 1.9 !important;
    text-align: center !important;
}

/* ============================================================
   HERO EXPERTISE — référence : Expertises.tsx
   Composition centrée, compacte et terminée par une règle dorée.
   ============================================================ */

#main-content .hero.hero--expertise {
    display: block !important;
    min-height: 0 !important;
    margin-top: 72px !important;
    padding: 8rem 0 !important;
    border-bottom: 1px solid rgba(60, 42, 30, .08) !important;
    background: var(--aa-lin) !important;
    color: var(--aa-brun) !important;
}

#main-content .hero.hero--expertise .hero__content {
    width: 100% !important;
}

#main-content .hero.hero--expertise .hero__content-inner {
    display: flex !important;
    max-width: 896px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

#main-content .hero.hero--expertise .hero__intro {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 2rem !important;
    color: var(--aa-ardoise) !important;
    font-size: .76rem !important;
    line-height: 1.5 !important;
    letter-spacing: .22em !important;
    opacity: .72 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

#main-content .hero.hero--expertise .hero__title {
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    color: var(--aa-brun) !important;
    font-size: clamp(2.7rem, 6vw, 5.4rem) !important;
    line-height: .95 !important;
    letter-spacing: .12em !important;
    text-align: center !important;
}

#main-content .hero.hero--expertise .hero__subtitle {
    width: 100% !important;
    max-width: 58ch !important;
    margin: 2rem auto 0 !important;
    color: var(--aa-ardoise) !important;
    font-size: clamp(1rem, 1.7vw, 1.28rem) !important;
    line-height: 1.75 !important;
    text-align: center !important;
}

#main-content .hero.hero--expertise .hero__rule {
    margin-top: 2.5rem !important;
}

/* WordPress admin bar: preserve the visible viewport geometry while logged in. */
body.admin-bar {
    --aa-admin-bar-offset: 32px;
}

body.admin-bar #main-content .hero.hero--home {
    height: calc(100vh - var(--aa-admin-bar-offset)) !important;
    min-height: calc(680px - var(--aa-admin-bar-offset)) !important;
}

body.admin-bar #main-content .hero.hero--image {
    min-height: calc(92vh - var(--aa-admin-bar-offset)) !important;
}

@media (min-width: 768px) {
    #main-content .hero.hero--home .hero__content {
        padding-bottom: 5.5rem !important;
    }

    #main-content .hero.hero--image .hero__content {
        padding-bottom: 7rem !important;
    }

    #main-content .hero.hero--minimal {
        padding-top: 4rem !important;
        padding-bottom: 3.5rem !important;
    }

    #main-content .hero.hero--signature {
        padding-top: 4.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    #main-content .hero.hero--journal {
        padding-top: 6rem !important;
        padding-bottom: 4rem !important;
    }

    #main-content .hero.hero--expertise {
        padding-top: 12rem !important;
        padding-bottom: 12rem !important;
    }
}

@media (max-width: 767px) {
    #main-content .hero.hero--home .hero__subtitle {
        width: auto !important;
        max-width: none !important;
        white-space: normal !important;
    }

    #main-content .hero.hero--image .hero__content {
        padding-bottom: 5rem !important;
    }

    #main-content .hero.hero--image .hero__subtitle {
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        text-wrap: nowrap !important;
    }

    #main-content .hero.hero--minimal {
        min-height: clamp(500px, 70svh, 620px) !important;
        padding-top: 3.25rem !important;
        padding-bottom: 2.75rem !important;
    }

    #main-content .hero.hero--signature {
        min-height: 56vh !important;
        padding-top: 4.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    #main-content .hero.hero--journal {
        min-height: 46vh !important;
        padding-top: 5rem !important;
        padding-bottom: 3.5rem !important;
    }

    #main-content .hero.hero--expertise {
        padding-top: 8rem !important;
        padding-bottom: 8rem !important;
    }

    #main-content .hero.hero--journal .hero__intro,
    #main-content .hero.hero--expertise .hero__intro {
        max-width: 34ch !important;
        margin-right: auto !important;
        margin-left: auto !important;
        line-height: 1.8 !important;
        white-space: normal !important;
    }
}

@media (max-width: 782px) {
    body.admin-bar {
        --aa-admin-bar-offset: 46px;
    }
}

/* Staggered entrances copied from the React Hero timing. */
#main-content .hero.hero--home .hero__title.reveal {
    transition-delay: .08s !important;
}

#main-content .hero.hero--home .hero__subtitle.reveal {
    transition-delay: .18s !important;
}

#main-content .hero.hero--expertise .hero__title.reveal {
    transition-delay: .08s !important;
}

#main-content .hero.hero--expertise .hero__subtitle.reveal {
    transition-delay: .16s !important;
}

#main-content .hero.hero--expertise .hero__rule.reveal {
    transition-delay: .24s !important;
}

/* ============================================================
   V70 — Hero Image optional parent link / CTA + Minimal intro colour
   Reference: EspaceEnfant.tsx Hero.
   ============================================================ */

#main-content .hero.hero--image .hero__breadcrumb--image {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .75rem !important;
    width: 100% !important;
    margin: 0 0 2.25rem !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: .68rem !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    letter-spacing: .18em !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

#main-content .hero.hero--image .hero__breadcrumb--image a {
    color: var(--aa-or-pale) !important;
}

#main-content .hero.hero--image .hero__breadcrumb--image > span:first-of-type {
    color: var(--aa-or-pale) !important;
    opacity: .55 !important;
}

#main-content .hero.hero--image .hero__breadcrumb--image > span:last-child {
    color: var(--aa-lin) !important;
}

#main-content .hero.hero--image .hero__cta {
    margin-top: 2rem !important;
    text-align: left !important;
}

#main-content .hero.hero--image .hero__cta .hero-cta {
    color: var(--aa-lin) !important;
    font-size: .72rem !important;
}

/* Both fields use the exact same foreground token. The text-fill declaration
   prevents inherited browser or page rules from changing the intro alone. */
#main-content .hero.hero--minimal .hero__intro,
#main-content .hero.hero--minimal .hero__intro *,
#main-content .hero.hero--minimal .hero__subtitle,
#main-content .hero.hero--minimal .hero__subtitle * {
    color: var(--aa-ardoise) !important;
    -webkit-text-fill-color: var(--aa-ardoise) !important;
}

#main-content .hero.hero--minimal .hero__intro {
    opacity: 1 !important;
}

/* ============================================================
   V74 — Hero Minimal optional parent link
   Reference: ExperienceFamille.tsx breadcrumb, centred above the title.
   ============================================================ */
#main-content .hero.hero--minimal .hero__breadcrumb--minimal {
    width: 100% !important;
    justify-content: center !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
}