/* ============================================
   À PROPOS PAGE  (apropos.html)
   ============================================ */

/* ---------- HERO ---------- */
.ap-hero {
    position: relative;
    /* Radius behavior matched to the landing-page hero, but the curve is held in
       a band pinned to the very bottom so ALL hero content sits on a full ocre
       background first (≈ the first viewport) and only THEN does the curved edge
       sweep in to reveal the section below. Two layers:
         1. the Intersect SVG, pinned to the bottom — its solid top continues the
            ocre body and its curved bottom (transparent) reveals the next section;
         2. a solid ocre fill covering everything above the band.
       The band is tall enough that the visible sweep (≈ 0.27 × band height) reads
       as the same gentle curve as the landing page; because it's a fixed band
       (not stretched to the whole hero), the curve never eats into the content. */
    --ap-hero-curve: 57.7778rem;
    background-image:
        url('../assets/img/shared/curve-down.svg'),
        linear-gradient(var(--ocre), var(--ocre));
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, center top;
    background-size: 100% var(--ap-hero-curve),
                     100% calc(100% - var(--ap-hero-curve) + 2.2222rem);
    overflow: hidden;
    padding: 0;
}

/* Full-width up to 4K (was capped at 1920, which pinned the hero to a centred
   band on large screens). The grid inside carries the page margins. */
.ap-hero-inner {
    width: 100%;
    max-width: 213.3333rem;
    margin: 0 auto;
    position: relative;
    /* Floor sized so the portrait + text sit on the ocre body AND the curve band
       (~280px) below stays clear of the content. Content taller than this grows
       the hero. */
    min-height: 72.2222rem;
    padding-bottom: 3.3333rem;
}

/* Break the page-header out to the full viewport width (inner has no side
   padding, so this stays a clean full-bleed). */
.ap-hero-inner .page-header {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Hero layout grid (12 cols via the shared .grid class on the wrapper). The
   grid carries the page margins so its columns line up with every other grid on
   the site; portrait = cols 1–5, text = cols 6–12. */
.ap-hero-grid {
    padding: 0 var(--grid-margin);
    align-items: center;
    margin-top: 6.6667rem;
    position: relative;
}

/* Portrait: near-circular capsule that fills its 5-col cell (so it scales out
   to 4K like the landing-page circles) and bleeds to the left viewport edge. */
.ap-portrait {
    width: 100%;
    aspect-ratio: 860 / 872;
    border-radius: 50%;
    overflow: hidden;
    margin-left: -30%;
    align-self: start;
    pointer-events: none;
}

.ap-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Decorative brand texture (upper right area) */
.ap-hero-brand {
    position: absolute;
    right: 0;
    top: 11.1111rem;
    width: 30rem;
    aspect-ratio: 3840 / 2160;
    pointer-events: none;
    opacity: 0.15;
}

.ap-hero-brand img {
    width: 100%;
    height: auto;
}

/* Text content: right column, aligned with Figma grid.
   In normal flow (not absolute) so its height drives the hero's height — the
   hero grows to contain it instead of clipping it. It follows the header in the
   flow; margin-top recreates the original vertical offset, margin-left keeps it
   clear of the portrait on the left. */
/* Placed on grid cols 6–12 via .col-start-6 .col-7 in the markup; the grid
   handles horizontal placement and vertical centring. */
.ap-hero-text {
    position: relative;
    align-self: center;
}

.ap-hero-title {
    /* h1 typography from base — only color varies */
    color: var(--cuivre);
    margin-bottom: 3.1111rem;
    padding: 0.5556rem 0;
}

.ap-hero-p1 {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    font-weight: var(--fw-regular);
    color: var(--cuivre);
    line-height: var(--lh-lead);
    margin-bottom: 2rem;
    max-width: 43.5556rem;
}

.ap-hero-p2 {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    color: var(--cuivre);
    line-height: var(--lh-body);
}

.ap-cuivre-em {
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    color: var(--cuivre);
}

/* ---------- QUOTE SECTION ---------- */
.ap-quote {
    position: relative;
    background: var(--light-bg);
    overflow: hidden;
    min-height: 47.7778rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4.4444rem 0;
}

/* Full-width marble wave decorations (top and bottom) */
.ap-intersect {
    position: absolute;
    left: 0;
    width: 100%;
    height: 47.7778rem;
    pointer-events: none;
}

.ap-intersect img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ap-intersect-1 {
    top: 0;
}

.ap-intersect-2 {
    bottom: 0;
    transform: rotate(180deg);
}

/* Flanking Ancora Forme shapes */
.ap-ancora {
    position: absolute;
    width: 35.8889rem;
    pointer-events: none;
}

.ap-ancora img {
    width: 100%;
    height: auto;
}

.ap-ancora-left {
    left: -20.7222rem;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
}

.ap-ancora-right {
    right: -20.7222rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Quote text (centered) */
.ap-quote-inner {
    position: relative;
    z-index: 2;
    /* The quote type doubles from 1920→3840 (vw tokens), but rem is fixed at 18px,
       so a frozen 56rem measure left the 4K text cramped in a tiny column. Grow the
       measure at the SAME rate as the type: 56rem (1008px) @≤1920 → 112rem (2016px)
       @3840. The max(56rem, …) form keeps ≤1920 identical (52.5vw = 56rem at 1920,
       smaller below → floors at 56rem). max-width:90% still caps it on small screens. */
    width: max(56rem, min(52.5vw, 112rem));
    max-width: 90%;
    text-align: center;
    padding: 0.2778rem 0;
}

.ap-quote-inner p {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    font-weight: var(--fw-regular);
    color: var(--ocre);
    line-height: var(--lh-lead);
}

.ap-quote-inner p:first-child {
    margin-bottom: 1.1111rem;
}

.ap-cuivre {
    font-family: var(--font-heading);
    color: var(--cuivre);
}

/* ---------- SEPARATOR (full-width 16:9 intersect) ---------- */
.ap-sep {
    width: 100%;
    line-height: 0;
    padding-bottom: 1rem;
    /* avoid inline-img baseline gap */
}

.ap-sep img {
    display: block;
    width: 100%;
    /* Full width while keeping the SVG's own proportions — the curved top edge
       is part of the shape, so it must not be cropped or flattened. */
    height: auto;
}

/* ---------- VALUES SECTION ---------- */
.ap-values {
    position: relative;
    background: var(--light-bg);
    overflow: hidden;
    padding: 0 0 6.6667rem;
}

.ap-values-inner {
    /* Was capped at 1920px, which throttled the (correct) 12-col values grid
       nested inside it down to 1920 on 4K. Scale out to match .grid-container. */
    width: 100%;
    max-width: 213.3333rem;
    margin: 0 auto;
    position: relative;
    /* Height is now driven by the values grid (the marble composition itself);
       no fixed floor needed. */
    min-height: 0;
    /* Column layout so the title + line stay pinned at the top while the values
       list is vertically centred in the remaining space (see .ap-values-list). */
    display: flex;
    flex-direction: column;
}

/* Title: "Mes valeurs" — symmetric top/bottom padding so the gap above the
   title matches the gap between the title and the line below it. */
.ap-values-title {
    /* h2 typography from base (--fs-section) — only color/padding vary, so this
       section title matches every other section title sitewide. */
    color: var(--ocre);
    padding: 0.5556rem var(--grid-margin);
    padding-bottom: 1rem;
    padding-top: 0;
}

/* Separator line under the title — full viewport width (breaks out of the
   centred max-width inner). Safe against horizontal scroll because the
   .ap-values section is overflow:hidden. */
.ap-values-sep {
    height: 1px;
    background: var(--ocre);
    /* Breathing room below the line before the values list, matching the
       section's 120px bottom padding. */
    margin: 0 0 6.6667rem;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Values layout: a 12-col grid — list on cols 1–5, the ring+circle visual on
   cols 7–11. Both track the fluid grid at every width (the old manual calc /
   absolute px only lined up at 1920). The visual reserves space for the circle's
   downward overlap (margin-bottom), so it drives the row height; the list then
   stretches to that height and distributes the four values down the column,
   level with the circle on the right. */
.ap-values-grid { align-items: stretch; }
.ap-values-list {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(2.2222rem, 4vw, 3.3333rem);
}

/* Right visual (cols 7–11): ring sits at the top (in-flow → sets the block's
   height = its own diameter); marble circle overlaps its lower ~56%. */
.ap-values-visual {
    position: relative;
    align-self: start;
    margin-bottom: 56%;   /* reserve the circle's downward overlap (≈0.56 × diameter) */
}

.ap-value {
    padding: 0;
}

.ap-value-name {
    /* cohérence typo : <h3> en famille titre comme les h3 des autres pages
       (FAQ contact, étapes kinésiologie) — seule la taille varie */
    font-family: var(--font-heading);
    font-size: var(--fs-lead-sm);
    line-height: var(--lh-lead-sm);
    color: var(--ocre);
    letter-spacing: 0.01em;
    padding: 0.5556rem 0;
}

.ap-value-desc {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    color: var(--ocre);
    line-height: var(--lh-body);
    padding-bottom: 0.5556rem;
}

.ap-value-line {
    height: 1px;
    background: var(--ocre);
    border: none;
    margin: 0;
    width: 100%;
}

/* Ocre outline ring — fills the cols 7–11 cell (in-flow, so it sets the visual's
   height); circle shape via aspect-ratio. */
.ap-values-ring {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0.1111rem solid var(--ocre);
    border-radius: 50%;
    pointer-events: none;
}

/* Marble circle — same diameter as the ring, overlapping its lower ~56%. */
.ap-values-circle {
    position: absolute;
    top: 56%;
    left: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
}

.ap-values-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stagger animations */
.ap-values-list .ap-value:nth-of-type(2) { transition-delay: 100ms; }
.ap-values-list .ap-value:nth-of-type(3) { transition-delay: 200ms; }
.ap-values-list .ap-value:nth-of-type(4) { transition-delay: 300ms; }

/* Softer hero curve on tablet/mobile, mirroring the home page: the desktop
   shape dips too steeply once stretched to a portrait viewport. */
@media (max-width: 1024px) {
    /* Swap to the softer curve, but KEEP the solid ocre fill layer — overriding
       background-image with the SVG alone drops the gradient and leaves the area
       above the curve band uncovered (shows the light page bg as a grey gap). */
    .ap-hero {
        background-image:
            url('../assets/img/shared/curve-down-soft.svg'),
            linear-gradient(var(--ocre), var(--ocre));
    }
}

/* ---------- QUOTE: keep the centred text clear of the flanking marble ----------
   The .ap-ancora circles are fixed-width and bleed 15.1667rem (≈273px) in from
   each edge. Below 1280px they crowd the centred quote, so hide them (this is the
   single source of truth — they were previously hidden at ≤1024 and ≤768 too).
   Where they DO show (≥1281px), cap the measure so the centred block always keeps
   a gap from the marble: 36rem = 2 × (15.1667rem bleed + ~2.83rem breathing gap).
   This guarantees ≥~51px clearance each side at every width the images appear. */
@media (max-width: 1280px) {
    .ap-ancora { display: none; }
}

@media (min-width: 1281px) {
    .ap-quote-inner { max-width: min(90%, calc(100% - 36rem)); }
}

/* ---------- RESPONSIVE: 1920px and up (2K / 4K) ----------
   The type tokens (styles.css) scale the hero text up to 2× from 1920→3840 so
   4K mirrors the 1920 design enlarged, and the portrait scales with the fluid
   grid. The one element that DIDN'T follow was the paragraph measure: a fixed
   max-width: 784px. Frozen while the type doubled, p1 wrapped into a tall narrow
   column and p2 sprawled the full cell. Here the measure grows at the SAME rate
   as the type/grid (784→1568, i.e. ×2 by 3840) so the whole composition scales
   as one proportioned unit. The max(784px, min(…)) form keeps ≤1920 identical
   (resolves to exactly 784px there) and only grows beyond it. */
@media (min-width: 1920px) {
    .ap-hero-p1,
    .ap-hero-p2 {
        max-width: max(43.5556rem, min(40.83vw, 87.1111rem));
    }

    /* Hero floor — keep the ocre background fully behind the portrait at 4K.
       The bottom curve band is a fixed 1040px pinned to the section bottom, and
       the curve-down SVG leaves ~281px of light-bg at its left/right EDGES — the
       exact spot the portrait bleeds into. Below ~2378px wide the portrait grows
       taller than the old 1300px floor, so content (not the floor) drives the
       height and that 281px gray edge cuts across the portrait's lower half.
       Measured: portrait bottom ≈ 44.375vw + 184px. Raise the floor to
       portrait_bottom + 281 (curve edge) + ~55 (margin) so solid ocre always
       clears the portrait before the curve sweeps in. Smooth from 1920 up. */
    .ap-hero-inner {
        min-height: calc(44.4vw + 28.8889rem);
    }
}

/* ---------- RESPONSIVE: 1440px and below ----------
   Portrait + text are 12-col grid items now, so they shrink fluidly with the
   grid — no per-breakpoint sizing. Only the vertical offset + the hero floor
   (which must clear the bottom curve band) are tuned per tier. */
@media (max-width: 1440px) {
    .ap-hero-grid  { margin-top: 5.5556rem; }
    .ap-hero-inner { min-height: 65.5556rem; }
}

/* ---------- RESPONSIVE: 1100px ---------- */
@media (max-width: 1100px) {
    .ap-hero-grid  { margin-top: 4.4444rem; }
    .ap-hero-inner { min-height: 57.7778rem; }
    .ap-hero-title { margin-bottom: 1.6667rem; }
}

/* ---------- RESPONSIVE: 768px (tablet / mobile) ---------- */
@media (max-width: 768px) {
    /* Gentler band on the short stacked mobile hero, with enough bottom room that
       the text always clears the curved edge below it. */
    .ap-hero { padding: 0; --ap-hero-curve: 44.4444rem; }
    .ap-hero-inner { min-height: auto; padding-bottom: 7.7778rem; }

    /* Grid collapses to one column (styles.css); reset the desktop offset and
       cap the portrait back to a small circle. */
    .ap-hero-grid { margin-top: 1.1111rem; }

    .ap-portrait {
        width: 15.5556rem;
        aspect-ratio: 1;
        border-radius: 50%;
        margin-left: -2.2222rem;
        margin-top: 1.1111rem;
    }

    .ap-hero-brand { display: none; }

    .ap-hero-text { padding: 1.6667rem 0; }

    .ap-hero-title  { margin-bottom: 1.1111rem; }
    .ap-hero-p1     { margin-bottom: 1.1111rem; }

    .ap-quote { min-height: 27.7778rem; padding: 3.3333rem 0; }

    /* Hide the decorative circle composition on phones; the list fills the
       single column via the Phase-0 grid collapse. */
    .ap-values-visual { display: none; }
}

/* ---------- RESPONSIVE: 480px ---------- */
@media (max-width: 480px) {
    .ap-portrait {
        width: 12.2222rem;
        margin-left: -1.6667rem;
    }

    /* typography is fluid via clamp() — no per-tag size overrides */
}