/**
 * "Vos accompagnants" — the agency's trust page (page-vos-accompagnants.php).
 *
 * Enqueued with hm-home.css as a dependency, so every --hm-* token and
 * every shared component (.hm-button, .hm-eyebrow, .hm-section, .hm-shell,
 * .hm-section-heading) already exists. Only this page's own rules belong
 * here — not a second copy of the component library, and not a parallel
 * palette.
 *
 * Design direction: navy type on white and a very light blue-grey, with
 * the lagoon turquoise for marks and coral reserved for CTAs only. Thin
 * hairlines instead of cards wherever a card can be avoided, and shadows
 * used once. The aim is a boutique travel brand rather than the stacked
 * rounded boxes a generic WordPress theme produces.
 *
 * All prefixed .hm-ab- so nothing here can collide with the old
 * .hm-about- rules if any survive in a cached stylesheet somewhere.
 */

.hm-ab {
    background: var(--hm-white);
    color: var(--hm-ink);
    overflow-x: hidden;
}

/* A tint of the navy rather than a neutral grey — the section grounds
   stay in the same family as the type sitting on them. */
.hm-ab {
    --hm-ab-mist: #f4f7f8;
    --hm-ab-hair: rgba(8, 47, 58, 0.12);
}

.hm-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/*
 * hm-home.css sets `.hm-section h2` very large and very tight
 * (clamp(2.15rem, 4.3vw, 4.5rem), letter-spacing -.045em) for the
 * homepage's poster-scale headings. This page's headings are smaller and
 * read as editorial rather than poster, and that tracking looks cramped
 * at this size. Reset it once here instead of per-heading; individual
 * sizes are still set section by section below.
 */
.hm-ab .hm-section h2 {
    letter-spacing: -0.015em;
    line-height: 1.12;
}

.hm-ab .hm-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.hm-ab .hm-button .hm-ab-icon {
    width: 20px;
    height: 20px;
}

/* ============================================================
   1. HERO
   ============================================================ */

.hm-ab-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(460px, 66vh, 640px);
    padding-top: var(--hm-header-h, 90px);
    background: var(--hm-navy) var(--hm-ab-hero-image) center 38%/cover no-repeat;
    color: #fff;
    isolation: isolate;
}
.hm-ab-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(5,35,44,.30) 0%, rgba(5,35,44,.18) 38%, rgba(5,35,44,.78) 100%);
}
.hm-ab-hero__content {
    max-width: 760px;
    padding-block: 0 clamp(44px, 7vw, 84px);
}
.hm-ab-hero h1 {
    margin: 0;
    max-width: 15ch;
    font-size: clamp(2rem, 5.4vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: #fff;
}
/* The italic lead is the one typographic flourish on the page. It carries
   the brand promise, so it gets the warm accent rather than plain white. */
.hm-ab-hero__lead {
    margin: 18px 0 0;
    max-width: 40ch;
    font-style: italic;
    font-size: clamp(1.02rem, 2.1vw, 1.3rem);
    line-height: 1.5;
    color: #f6d9a8;
}
.hm-ab-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(22px, 3vw, 32px);
}
.hm-ab-hero .hm-button--ghost {
    background: rgba(255, 255, 255, 0.94);
    color: var(--hm-navy);
    border-color: transparent;
}
.hm-ab-hero .hm-button--ghost:hover {
    background: #fff;
}

/* ---- Trust strip: deliberately light. A hairline, not a bar. ---- */

.hm-ab-strip {
    border-bottom: 1px solid var(--hm-ab-hair);
    background: var(--hm-white);
}
.hm-ab-strip__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 20px;
    padding-block: clamp(18px, 2.4vw, 26px);
}
.hm-ab-strip p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    font-size: 0.9rem;
    color: var(--hm-ink);
}
.hm-ab-strip .hm-ab-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--hm-lagoon);
}

/* ============================================================
   2. THREE PILLARS
   ============================================================ */

.hm-ab-pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3.4vw, 48px);
}
.hm-ab-pillar {
    /* Separated by a rule rather than boxed — three cards here would
       start the "everything is a card" drift the brief warns against. */
    padding-left: clamp(18px, 2vw, 26px);
    border-left: 1px solid var(--hm-ab-hair);
}
.hm-ab-pillar .hm-ab-icon {
    color: var(--hm-lagoon);
    margin-bottom: 14px;
}
.hm-ab-pillar h3 {
    margin: 0 0 8px;
    font-size: 1.12rem;
    color: var(--hm-navy);
}
.hm-ab-pillar p {
    margin: 0;
    color: var(--hm-muted);
    line-height: 1.62;
    max-width: 34ch;
}

/* ============================================================
   3. WHO IS HMT
   ============================================================ */

.hm-ab-who__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.hm-ab-who__copy h2 {
    margin: 6px 0 18px;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.14;
    color: var(--hm-navy);
    text-wrap: balance;
}
.hm-ab-who__copy p {
    margin: 0 0 14px;
    color: var(--hm-muted);
    line-height: 1.68;
    max-width: 54ch;
}
.hm-ab-who__signature {
    margin-top: 20px !important;
    padding-top: 18px;
    border-top: 1px solid var(--hm-ab-hair);
    font-size: 1.06rem;
    font-style: italic;
    color: var(--hm-navy) !important;
}
.hm-ab-who__visual img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: var(--hm-radius);
}

/* ============================================================
   4. MOHAMED — one section, framed once
   ============================================================ */

.hm-ab-founder__card {
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding: clamp(20px, 3vw, 40px);
    border: 1px solid var(--hm-ab-hair);
    border-radius: var(--hm-radius);
    background: var(--hm-white);
}
.hm-ab-founder__visual {
    border-radius: calc(var(--hm-radius) - 6px);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--hm-ab-mist);
}
.hm-ab-founder__visual img,
.hm-ab-founder__visual .hm-about-photo-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hm-ab-founder__copy h2 {
    margin: 4px 0 2px;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--hm-navy);
}
.hm-ab-founder__role {
    margin: 0 0 16px;
    font-size: 0.95rem;
    color: var(--hm-lagoon);
    letter-spacing: 0.02em;
}
.hm-ab-founder__copy p {
    margin: 0 0 12px;
    color: var(--hm-muted);
    line-height: 1.68;
    max-width: 56ch;
}

/* ============================================================
   5. NOTRE ENGAGEMENT — the promise
   ============================================================ */

.hm-ab-journey {
    background: var(--hm-ab-mist);
}
.hm-ab-journey__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(34px, 4.6vw, 56px);
}
.hm-ab-journey__head h2 {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    color: var(--hm-navy);
    text-wrap: balance;
}
.hm-ab-journey__head p {
    margin: 0;
    color: var(--hm-muted);
    line-height: 1.6;
}

.hm-ab-journey__track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2.4vw, 32px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.hm-ab-stage {
    position: relative;
    text-align: center;
    padding-top: 6px;
}
/* The connecting hairline. Drawn between stages only — never trailing off
   the last one — and hidden from assistive tech since it carries no
   meaning that the ordered list doesn't already convey. */
.hm-ab-stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 32px;
    left: calc(50% + 34px);
    right: calc(-50% + 34px);
    border-top: 1px dashed rgba(8, 47, 58, 0.22);
}
.hm-ab-stage__mark {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--hm-white);
    border: 1px solid var(--hm-ab-hair);
    color: var(--hm-lagoon);
}
.hm-ab-stage h3 {
    margin: 0 0 8px;
    font-size: 1.02rem;
    color: var(--hm-navy);
}
.hm-ab-stage p {
    margin: 0 auto;
    max-width: 26ch;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--hm-muted);
}

/* ============================================================
   6. POURQUOI VOYAGER AVEC HMT
   ============================================================ */

.hm-ab-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(26px, 3.4vw, 46px) clamp(24px, 3vw, 48px);
}
.hm-ab-reason .hm-ab-icon {
    color: var(--hm-lagoon);
    margin-bottom: 12px;
}
.hm-ab-reason h3 {
    margin: 0 0 6px;
    font-size: 1.04rem;
    color: var(--hm-navy);
}
.hm-ab-reason p {
    margin: 0;
    max-width: 32ch;
    font-size: 0.94rem;
    line-height: 1.62;
    color: var(--hm-muted);
}

/* ============================================================
   7. HOW IT WORKS — the mechanics
   ============================================================ */

.hm-ab-how__head {
    max-width: 620px;
    margin-bottom: clamp(30px, 4vw, 48px);
}
.hm-ab-how__head h2 {
    margin: 6px 0 0;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    color: var(--hm-navy);
    text-wrap: balance;
}
.hm-ab-how__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 2.6vw, 36px);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.hm-ab-how__steps li {
    padding-top: 18px;
    border-top: 2px solid var(--hm-lagoon);
}
.hm-ab-how__num {
    display: block;
    margin-bottom: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--hm-lagoon);
    font-variant-numeric: tabular-nums;
}
.hm-ab-how__steps h3 {
    margin: 0 0 8px;
    font-size: 1.04rem;
    color: var(--hm-navy);
}
.hm-ab-how__steps p {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.62;
    color: var(--hm-muted);
}
.hm-ab-how__cta {
    margin-top: clamp(30px, 4vw, 44px);
}

/* ============================================================
   8. TESTIMONIALS
   ============================================================ */

.hm-ab-reviews {
    background: var(--hm-ab-mist);
}
.hm-ab-reviews__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: clamp(24px, 3.2vw, 38px);
}
.hm-ab-reviews__head h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--hm-navy);
}
.hm-ab-reviews__all {
    font-size: 0.94rem;
    color: var(--hm-lagoon);
    text-decoration: none;
}
.hm-ab-reviews__all:hover { text-decoration: underline; }

.hm-ab-reviews__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.2vw, 28px);
}
.hm-ab-review {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: clamp(20px, 2.4vw, 28px);
    background: var(--hm-white);
    border: 1px solid var(--hm-ab-hair);
    border-radius: 16px;
}
.hm-ab-review__stars {
    color: #f0a500;
    letter-spacing: 0.12em;
    font-size: 0.94rem;
}
.hm-ab-review blockquote {
    margin: 0;
    flex: 1;
}
.hm-ab-review blockquote p {
    margin: 0;
    color: var(--hm-ink);
    line-height: 1.62;
    font-size: 0.96rem;
}
.hm-ab-review figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--hm-ab-hair);
}
.hm-ab-review__author {
    font-weight: 600;
    color: var(--hm-navy);
    font-size: 0.94rem;
}
.hm-ab-review__meta {
    font-size: 0.85rem;
    color: var(--hm-muted);
}

/* ============================================================
   9. VERIFIED NUMBERS
   ============================================================ */

.hm-ab-stats {
    background: var(--hm-navy);
    color: #fff;
}
.hm-ab-stats__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 40px);
    padding-block: clamp(38px, 5vw, 62px);
    text-align: center;
}
.hm-ab-stat__value {
    margin: 0 0 6px;
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.hm-ab-stat__label {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.76);
}

/* ============================================================
   10. FINAL CTA
   ============================================================ */

.hm-ab-final {
    position: relative;
    background: var(--hm-navy-deep) var(--hm-ab-final-image) center/cover no-repeat;
    color: #fff;
    isolation: isolate;
}
.hm-ab-final__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(5,35,44,.72) 0%, rgba(5,35,44,.82) 100%);
}
.hm-ab-final__inner {
    padding-block: clamp(56px, 8vw, 104px);
    text-align: center;
}
.hm-ab-final h2 {
    margin: 0 auto 14px;
    max-width: 18ch;
    font-size: clamp(1.7rem, 3.8vw, 2.7rem);
    line-height: 1.1;
    color: #fff;
    text-wrap: balance;
}
.hm-ab-final__inner > p {
    margin: 0 auto;
    max-width: 46ch;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.6;
}
.hm-ab-final__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(24px, 3vw, 34px);
}
.hm-ab-final .hm-button--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.55);
}
.hm-ab-final .hm-button--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
}
.hm-ab-final__reassure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px clamp(20px, 3vw, 40px);
    margin: clamp(30px, 4vw, 44px) 0 0;
    padding: 0;
    list-style: none;
}
.hm-ab-final__reassure li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.82);
}
.hm-ab-final__reassure .hm-ab-icon {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.62);
}
.hm-ab-final__link {
    margin: 22px 0 0;
    font-size: 0.9rem;
}
.hm-ab-final__link a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1024px) {
    .hm-ab-why__grid { grid-template-columns: repeat(2, 1fr); }
    .hm-ab-how__steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .hm-ab-who__grid { grid-template-columns: 1fr; }
    .hm-ab-who__visual { order: -1; }
    .hm-ab-who__visual img { max-height: 320px; }

    .hm-ab-founder__card { grid-template-columns: 1fr; }
    .hm-ab-founder__visual { max-width: 300px; }

    .hm-ab-pillars__grid { grid-template-columns: 1fr; gap: 22px; }
    .hm-ab-pillar { padding-left: 18px; }
    .hm-ab-pillar p { max-width: none; }
}

/* ============================================================
   MOBILE
   ------------------------------------------------------------
   A large share of this page's traffic arrives from Instagram and
   WhatsApp, so mobile is the primary layout rather than a fallback.

   The two horizontal tracks (journey stages, reviews) become
   scroll-snap carousels using the same markup — no JavaScript, so
   there is no carousel library to load, nothing to initialise, and
   nothing that can break and leave the content unreachable. The
   next card is deliberately left peeking so the gesture is
   discoverable without dots or arrows.
   ============================================================ */

@media (max-width: 767px) {
    /* Four items across becomes two — at this width four icons and
       four labels collapse into an unreadable row. */
    .hm-ab-strip__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 12px;
    }
    .hm-ab-strip p {
        justify-content: flex-start;
        font-size: 0.84rem;
    }

    .hm-ab-hero { min-height: clamp(440px, 74vh, 620px); }
    .hm-ab-hero h1 { max-width: 13ch; }
    .hm-ab-hero__actions { flex-direction: column; align-items: stretch; }
    .hm-ab-hero__actions .hm-button { justify-content: center; }

    .hm-ab-why__grid { grid-template-columns: 1fr; gap: 24px; }
    .hm-ab-reason p { max-width: none; }

    .hm-ab-how__steps { grid-template-columns: 1fr; gap: 20px; }
    .hm-ab-how__cta .hm-button { width: 100%; justify-content: center; }

    /* ---- Scroll-snap carousels ---- */
    .hm-ab-journey__track,
    .hm-ab-reviews__track {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Bleed to the screen edges so the peeking card reads as
           "more to the right" rather than a clipped layout.
           14px matches .hm-shell's own inset at this breakpoint
           (width: 100% - 28px in hm-home.css) — the track has to line
           up with the text above it, then break out past it. */
        margin-inline: -14px;
        padding-inline: 14px;
        padding-bottom: 4px;
    }
    .hm-ab-journey__track::-webkit-scrollbar,
    .hm-ab-reviews__track::-webkit-scrollbar { display: none; }

    .hm-ab-stage,
    .hm-ab-review {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }

    /* The connecting hairline is a desktop device; between snapped
       cards it would just be a stray line. */
    .hm-ab-stage:not(:last-child)::after { display: none; }

    .hm-ab-stage {
        text-align: left;
        padding: 22px;
        background: var(--hm-white);
        border: 1px solid var(--hm-ab-hair);
        border-radius: 16px;
    }
    .hm-ab-stage__mark {
        width: 48px;
        height: 48px;
        margin-bottom: 14px;
    }
    .hm-ab-stage p { max-width: none; }

    .hm-ab-stats__inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
    .hm-ab-stat__value { font-size: clamp(1.4rem, 7vw, 2rem); }
    .hm-ab-stat__label { font-size: 0.76rem; }

    .hm-ab-final__actions { flex-direction: column; }
    .hm-ab-final__actions .hm-button { width: 100%; justify-content: center; }
    .hm-ab-final__reassure {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hm-ab-journey__track,
    .hm-ab-reviews__track { scroll-behavior: auto; }
}