/* ============================================
   KINÉSIOLOGIE PAGE  (kinesiologie.html)
   ============================================ */

/* ---------- HEADER VARIANT (light bg, teal text) ----------
   The teal header accents (.nav-links--teal, .hamburger--teal, .header-line--teal)
   now live in the shared header.css so every teal page shares them. */
.page-header--light { background: var(--light-bg); }

/* Container 4K behaviour is now handled globally by .section-container
   (max-width: 3840px in styles.css). Section content sits on the shared 12-col
   .grid via .col-* utilities in the markup, so it fills 2K/4K like the landing
   page. */

/* ============================================
   SECTION 1 – HERO
   ============================================ */
.ks-hero {
    background: var(--light-bg);
    /* maquette tofixe #11 : agrandir l'espace au-dessus de la vague teal.
       padding-bottom fluide pour creuser le vide entre le texte et l'arche
       (qui remonte depuis .ks-memoire) — plus généreux sur grand écran. */
    padding: 3.3333rem 0 clamp(8.8889rem, 16vh, 15.5556rem);
    position: relative;
    overflow: visible;
    min-height: 90vh;
    min-height: 90svh;
}

.ks-hero__title {
    /* h1 typography from base. Seconde ligne « au cœur de la kinésiologie »
       = Exposure [0] (--font-body) ; couleur teal. */
    font-family: var(--font-body);
    color: var(--teal);
    margin-bottom: 2.7778rem;
}

.ks-hero__title strong {
    /* première ligne « La mémoire du corps » = Exposure Tight [-20] (--font-heading),
       graisse Regular (l'emphase vient de la coupe Tight, pas du faux-gras). */
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
}

/* Layout grid comes from the shared .grid class (12 cols + gutter) in the
   markup; this rule only sets cross-axis alignment. Image-col = cols 1–4,
   text-col = cols 5–12 (see .col-* classes in kinesiologie.html). */
.ks-hero__content {
    /* Stretch the row so the text column fills the circle's height and its
       justify-content: center can vertically center the text against it. */
    align-items: stretch;
}

.ks-hero__image-col {
    position: relative;
    align-self: start;
}

/* Circle fills its 4-col cell so it scales proportionally out to 4K (like the
   landing-page circles) instead of staying a fixed size and leaving a gap.
   Bleeds off the left edge by the page margin, echoing the Figma. */
.ks-hero__circle {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    margin-left: calc(-1 * var(--grid-margin));
}

.ks-hero__circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ks-hero__text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 1.1111rem;
    position: relative;
}

.ks-hero__text {
    font-family: var(--font-body);
    font-size: var(--fs-h3);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--teal);
    max-width: 42.0556rem;
}

.ks-hero__text strong {
    /* « intelligence corporelle » : coupe Tight [-20] à graisse Regular, même couleur
       (le texte est en --font-body, donc on bascule la coupe ici plutôt que de gras). */
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
}

/* RDV badge is its own grid cell (col 12) so it sits in the top-right
   whitespace and never overlaps the hero text. */
.ks-hero__rdv {
    align-self: start;
    justify-self: end;
    margin-top: 0.5556rem;
}

/* Decorative gold dots */
.ks-hero__dots {
    position: absolute;
    right: var(--grid-margin);
    bottom: 4.4444rem;
    display: flex;
    flex-direction: column;
    gap: 2.7222rem;
}

.dot-or {
    width: 3.6111rem;
    height: 3.6111rem;
    background: var(--or);
    border-radius: 50%;
    display: block;
}

/* ============================================
   SECTION 2 – MÉMOIRE CORPORELLE
   ============================================ */
.ks-memoire {
    background: var(--teal);
    padding: 4.4444rem 0 5.5556rem;
    position: relative;
    overflow: visible;
    /* min-height (not a fixed height) + svh so stacked mobile content can grow
       instead of overflowing into the next section. */
    min-height: 100svh;
    display: flex;
    align-items: center;
}

.ks-memoire::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1440 / 860;
    background: url('../assets/img/kinesiologie/arch-blue.svg') top center / 100% 100% no-repeat;
    transform: translateY(-11.5%); /* 99/860 ≈ 11.5% — décale l'arche transparente au-dessus de la section */
    pointer-events: none;
}

/* Keep section content above the decorative arch. ::before is absolutely
   positioned, so without an explicit stacking context it paints over the static
   text whenever the section is short (content-height tablet/mobile). */
.ks-memoire .section-container {
    position: relative;
    z-index: 1;
}

/* 12-col .grid from markup: image-col = cols 1–5, text-col = cols 7–11
   (la 12e colonne reste libre — maquette tofixe #12). */
.ks-memoire__content {
    /* maquette tofixe #12 : centrer le texte par rapport au cercle */
    align-items: center;
}

.ks-memoire__image-col {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 24.4444rem;
}

/* Gold circle border behind image — scales with its column (caps higher than
   before so it fills the cols 1–5 cell at 2K/4K instead of floating small). */
.ks-memoire__circle-border {
    position: absolute;
    width: clamp(17.7778rem, 26vw, 33.3333rem);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--or);
    left: 0;
    /* Vertically centred to share the same y-axis center as the image circle
       (which is centred by the flex container) instead of pinning to the top. */
    top: 50%;
    transform: translateY(-50%);
}

.ks-memoire__circle-img {
    position: relative;
    width: clamp(16.6667rem, 27vw, 34.4444rem);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    margin-left: clamp(2.2222rem, 4vw, 5rem);
}

.ks-memoire__circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ks-memoire__text-col {
    padding-top: 1.1111rem;
}

.ks-memoire__text {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--or);
    margin-bottom: 1.1111rem;
}

.ks-memoire__text strong {
    /* « mémoire corporelle », « mieux comprendre »… : coupe Tight [-20] à graisse Regular,
       même couleur or (le texte est en --font-body, on bascule la coupe ici). */
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
}

.ks-memoire__nb {
    /* corps de la note = Exposure [0] (--font-body) ; seul « NB » passe en Tight [-20] */
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    line-height: var(--lh-caption);
    color: var(--or);
    margin-top: 2.2222rem;
    opacity: 0.85;
}

.ks-memoire__nb strong {
    /* « NB » = Exposure Tight [-20] (--font-heading), graisse Regular (pas de faux-gras). */
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
}

/* Vertical gold line */
.ks-memoire__line-vertical {
    position: absolute;
    left: 33.5%;
    top: 100%;
    width: 1px;
    height: 36.3333rem;
    background: var(--or);
}

/* ============================================
   SECTION 3 – QUAND CONSULTER
   ============================================ */
.ks-quand {
    background: var(--teal);
    padding: 0;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ks-quand .section-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ks-quand__line-top {
    width: 100%;
    height: 1px;
    background: var(--or);
}

.ks-quand__line-separator {
    width: calc(100% + 2 * var(--grid-margin));
    height: 1px;
    background: var(--or);
    margin-left: calc(-1 * var(--grid-margin));
}

.ks-quand__title {
    /* « Quand consulter ? » entièrement en Exposure [0] (--font-body) ; couleur gold */
    font-family: var(--font-body);
    color: var(--or);
    padding: 1.1667rem 0;
    margin-bottom: 0;
}

/* 12-col .grid from markup: intro = cols 1–4, list-left = cols 5–8,
   list-right = cols 9–12 (three equal quarters of the grid). */
.ks-quand__content {
    align-items: stretch;
    flex: 1;
}

.ks-quand__intro {
    position: relative;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--or);
    padding: 2.7778rem 3.3333rem 0 0;
}

.ks-quand__intro-text {
    font-family: var(--font-body);
    font-size: var(--fs-h3);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--or);
    position: relative;
    z-index: 1;
}

.ks-quand__intro-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 180%;
    min-width: 60vw;
    transform: translate(-55%, 55%);
    pointer-events: none;
}

.ks-quand__list-left {
    padding: 2.7778rem 2.2222rem;
}

.ks-quand__list-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.7778rem 0 2.7778rem 2.2222rem;
}

.ks-quand__list-left ul,
.ks-quand__list-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10vh;
}

.ks-quand__list-left li,
.ks-quand__list-right li {
    display: flex;
    align-items: flex-start;
    gap: 0.5556rem;
}

.ks-bullet {
    width: 0.7222rem;
    height: 0.7222rem;
    flex-shrink: 0;
    margin-top: 0.3333rem;
}

.ks-quand__list-left span,
.ks-quand__list-right span {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--or);
}

.ks-quand__cta {
    text-align: left;
}

.ks-quand__cta p {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--or);
    margin-bottom: 0.2778rem;
}

.ks-quand__link {
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--or);
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.ks-quand__link:hover {
    opacity: 0.7;
}

/* ============================================
   SECTION 4 – COMMENT SE DÉROULE UNE SÉANCE
   ============================================ */
.ks-seance {
    padding: 0;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ks-seance .section-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* maquette tofixe #14 + revue 05.06.26 (issue 10, pt 1) : agrandir l'espace en haut (40 → 70 → 110) */
    padding-top: 6.1111rem;
    padding-bottom: 2.2222rem;
}

.ks-seance__title {
    /* première ligne « Comment se déroule » = Exposure [0] (--font-body) ; couleur teal */
    font-family: var(--font-body);
    color: var(--teal);
    padding: 1.1667rem 0;
}

.ks-seance__title strong {
    /* seconde ligne « une séance ? » = Exposure Tight [-20] (--font-heading),
       graisse Regular (l'emphase vient de la coupe Tight, pas du faux-gras). */
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
}

.ks-seance__line {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 1px;
    background: var(--teal);
    /* maquette tofixe #14 + revue 05.06.26 (issue 10, pt 2) : resserrer l'espace au milieu (40 → 20 → 10) */
    margin-bottom: 0.5556rem;
}

.ks-seance__subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-h3);
    font-weight: var(--fw-regular);
    line-height: var(--lh-h3);
    color: var(--teal);
    max-width: 42.6111rem;
    /* maquette tofixe #14 : agrandir l'espace avant l'étape 1 (40 → 70) */
    margin-bottom: 3.8889rem;
}

/* 12-col .grid from markup: text/steps = cols 1–7; the decorative circle is
   absolutely positioned (bleeds off the right), so it needs no column. */
.ks-seance__content {
    /* revue 05.06.26 (issue 10, pt 2) : aligner le contenu en haut pour
       resserrer l'écart trait → intro (le centrage vertical le creusait). */
    align-items: start;
    min-height: 100vh;
    margin-top: 10vh; /* remonte le bloc de 20 % de la hauteur de viewport pour compenser l'espace créé par le padding-top de la section (issue 10, pt 1) — le bloc est ainsi visuellement centré dans la section malgré le padding élargi. */
}

.ks-seance__steps {
    display: flex;
    flex-direction: column;
    /* revue 05.06.26 (issue 10, pt 3) : agrandir le gap entre étapes (50 → 70 → 96) */
    gap: 5.3333rem;
}

.ks-step {
    display: flex;
    align-items: flex-start;
    gap: 2.2222rem;
}

.ks-step__number {
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    font-weight: var(--fw-regular);
    line-height: var(--lh-display);
    color: var(--teal);
    flex-shrink: 0;
    width: 4.2222rem;
    text-align: center;
}

.ks-step__body {
    padding-top: 1.1111rem;
}

.ks-step__title {
    /* h3 typography from base — only color varies */
    color: var(--teal);
    margin-bottom: 0.3333rem;
}

.ks-step__text {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--teal);
}

/* Decorative texture image */
/* revue 05.06.26 (issue 10, pt 1) : réduire l'image de 20 % (100vh → 80vh) pour
   aérer le haut de section ; débord droit ajusté (-50vh → -40vh) pour garder le cadrage. */
.ks-seance__image {
    position: absolute;
    right: -45vh;
    transform: translateY(-50%);
    min-height: 100vh;
    width: 100vh;
}

.ks-seance__image img {
    display: block;
    object-fit: cover;
}

/* The teal footer variant (.footer--teal) now lives in the shared footer.css
   so every teal page (kinésiologie, contact, …) shares one source of truth. */

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    /* Circle still fills its 4-col cell; just trim the off-screen bleed. */
    .ks-hero__circle { margin-left: -2.2222rem; }

    /* Content-driven height on tablet so the centred block doesn't leave a
       huge empty band on tall portrait viewports. */
    .ks-memoire { min-height: auto; }

    .ks-quand {
        height: auto;
        min-height: auto;
    }

    /* Re-span on the 12-col grid: full-width intro, then the two lists as
       halves (cols 1–6 / 7–12) — instead of swapping the grid template. */
    .ks-quand__intro {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: 1px solid var(--or);
        padding: 2.2222rem 0;
    }

    .ks-quand__list-left  { grid-column: 1 / 7;  padding: 2.2222rem 1.1111rem 2.2222rem 0; }
    .ks-quand__list-right { grid-column: 7 / 13; padding: 2.2222rem 0 2.2222rem 1.1111rem; }

    /* La section passe en height:auto ici, donc le 10vh desktop (qui servait à
       remplir le 100vh) n'a plus de hauteur à combler : on borne le rythme pour
       garder une liste aérée sans trous géants en portrait. */
    .ks-quand__list-left ul,
    .ks-quand__list-right ul {
        gap: clamp(2.2222rem, 6vh, 5rem);
    }

    /* Decorative circle overlaps the intro + list text once the columns reflow
       — hide it from tablet down. */
    .ks-quand__intro-image {
        display: none;
    }

    .ks-hero__rdv {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Content-driven height on phones — no viewport-height lock. */
    .ks-hero { min-height: auto; }

    .ks-hero__content {
        grid-template-columns: 1fr;
    }

    .ks-hero__circle {
        width: 17.3333rem;
        height: 17.3333rem;
        margin-left: -1.6667rem;
    }

    .ks-hero__dots {
        display: none;
    }

    .ks-memoire__content {
        grid-template-columns: 1fr;
    }

    .ks-memoire__image-col {
        min-height: 16.6667rem;
        justify-content: flex-start;
    }

    .ks-memoire__circle-border {
        width: 15.5556rem;
        height: 15.5556rem;
    }

    .ks-memoire__circle-img {
        width: 15.5556rem;
        height: 15.5556rem;
        margin-left: 1.6667rem;
    }

    .ks-memoire__line-vertical {
        display: none;
    }

    .ks-quand {
        height: auto;
    }

    .ks-quand__content {
        grid-template-columns: 1fr;
    }

    .ks-quand__intro {
        border-bottom: 1px solid var(--or);
        padding: 2.2222rem 0;
    }

    .ks-quand__list-left {
        padding: 2.2222rem 0;
        border-bottom: 1px solid var(--or);
    }

    .ks-quand__list-right {
        padding: 2.2222rem 0 3.3333rem;
    }

    /* Pile verticale sur mobile : on abandonne le vh (instable avec la barre
       d'adresse) pour un rythme fixe et compact, plus lisible au scroll. */
    .ks-quand__list-left ul,
    .ks-quand__list-right ul {
        gap: 2.7778rem;
    }

    .ks-quand__cta {
        text-align: left;
        margin-top: 2.2222rem;
    }

    .ks-seance {
        height: auto;
        /* Content-driven height on phones — no viewport-height lock. */
        min-height: auto;
        padding: 3.3333rem 0;
    }

    .ks-seance .section-container {
        justify-content: flex-start;
        padding-top: 0;
        padding-bottom: 0;
    }

    .ks-seance__content {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    /* Le gap desktop élargi (96px, issue 10 pt 3) est trop grand sur mobile :
       on garde un rythme compact pour limiter le scroll. */
    .ks-seance__steps {
        gap: 2.6667rem;
    }

    .ks-seance__image {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        min-height: auto;
        height: 16.6667rem;
        width: 16.6667rem;
        margin: 2.2222rem auto 0;
    }

    .ks-seance__image img {
        height: 16.6667rem;
        width: 16.6667rem;
    }

    .ks-step {
        gap: 1.1111rem;
    }

    .ks-step__number {
        width: 2.7778rem;
        font-size: calc(3.6667rem * var(--type-scale));   /* scaled step number on mobile */
    }
}

@media (max-width: 480px) {
    .ks-step__number {
        width: 2.2222rem;
    }
}