/* ============================================
   HOME PAGE  (index.html)
   ============================================ */

/* ---------- HERO ---------- */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    padding: 0;
    background-image: url('../assets/img/shared/curve-down.svg');
    /* Stretch the ocre shape to fill the whole hero so portrait viewports
       stay ocre instead of revealing the light page bg behind the gradient.
       The curved bottom edge stays proportional on every screen size. */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    display: flex;
    flex-direction: column;
}

.hero-inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Opaque at the top, fully transparent at the bottom (--ocre = #592A27) */
    background: linear-gradient(to bottom, var(--ocre) 0%, rgba(89, 42, 39, 0) 100%);
    
}

/* ---------- INTRO ---------- */
.intro {
    padding: 6.6667rem var(--grid-margin) 5.5556rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--grid-gutter);
    align-items: center;
    position: relative;
    background: var(--light-bg);
    z-index: 1;
    min-height: 100vh;
}

.intro-text {
    grid-column: 2 / 12;
    /* maquette tofixe : texte brun = Exposure [0] (--font-body) */
    font-family: var(--font-body);
    font-size: var(--fs-feature);
    font-weight: var(--fw-regular);
    line-height: var(--lh-feature);
    color: var(--ocre);
    text-align: center;
}

.intro-text strong {
    /* maquette tofixe : texte cuivre = Exposure Tight [-20] (--font-heading).
       L'emphase vient de la coupe Tight + la couleur, PAS du gras : Exposure ne
       livre que la graisse 400, donc --fw-bold synthétiserait un faux-gras absent
       de la maquette. Même pattern que .ap-cuivre-em (apropos.css). */
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    color: var(--cuivre);
}

/* RDV button positioning on the home intro grid.
   Component styles live in css/rdv-button.css. */
.intro-rdv {
    grid-column: 12 / 13;
    z-index: 100;
}

/* ---------- À PROPOS INTERSECT (topper above .apropos-section) ---------- */
.apropos-intersect {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    /* The SVG (1920×860) is a curved-top brown shape: the arch occupies the top
       ~9.4% of the width, the solid brown body the remaining ~35.4%. We overlap
       the section UP over that solid body so the brown reads as one continuous
       block — but the overlap MUST stay below the arch base or it flattens the
       apex. A %-based margin is resolved against the containing block's WIDTH,
       the same basis as the image's auto height, so this overlap is the same
       fraction of the curve at every viewport ratio and never crops the arch.
       (The old -50vh was viewport-HEIGHT-relative and ate the apex on tall
       windows.) -34% < the 35.4% body, leaving a hair of seamless brown. */
    /* maquette tofixe #8 : agrandir l'espace ENTRE la section animée (stone)
       et « Je m'appelle Clélia ». On pousse la courbe vers le bas via margin-top
       (l'espace visé est AU-DESSUS de la courbe). margin-bottom reste l'overlap
       d'origine sous la courbe. */
    margin-top: 9vh;
    margin-bottom: -34%;
    pointer-events: none;
    position: relative;
}

/* ---------- KINÉSIOLOGIE INTRO ---------- */
.kinesio-intro {
    padding: clamp(2.2222rem, 4vh, 5.5556rem) 0;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kinesio-intro .section-title-row h2 {
    /* <br> in the markup controls the 3-line wrap; no width cap so a line never re-wraps */
    max-width: none;
    /* texte foncé = Exposure [0] (--font-body), graisse Regular (pas de gras) */
    font-family: var(--font-body);
    color: var(--ocre);
}

.kinesio-intro .section-title-row h2 strong {
    /* emphase = Exposure Tight [-20] (--font-heading) + couleur cuivre, graisse Regular.
       L'emphase vient de la coupe Tight + la couleur, PAS du gras (Exposure ne livre que 400). */
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    color: var(--cuivre);
}

.kinesio-intro-grid {
    /* Center the circle vertically against the text block so the image keeps
       equal space above and below relative to the text (the circle drives the
       row height; the shorter text is centered within its span). */
    align-items: center;
    /* Gap between the title (top) and the image/text block (lower).
       Fluid with a floor: ~40px on short viewports (so the section still fits
       100vh at 1920), growing to the Figma gap (~340px) on 4K. */
    margin-top: max(2.2222rem, (100vh - 55.5556rem) * 0.32);
}

.kinesio-intro-image {
    grid-column: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    margin-left: calc(-1 * var(--grid-margin));
}

.kinesio-intro-image .circle-large {
    width: clamp(27.7778rem, 55vh, 61.1111rem) !important;
    height: clamp(27.7778rem, 55vh, 61.1111rem) !important;
    border-radius: 50% !important;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: -25vw !important;
}

.kinesio-intro-image .circle-large img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.kinesio-intro-text {
    /* Start at column 5; cap the line length with an absolute max-width so the
       7-line wrap is identical at every viewport (the font is capped ~53px, so a
       fixed px width keeps the same wrap on 1920 and 4K instead of over-wrapping). */
    grid-column: 5 / -1;
    max-width: 65.5556rem;
    /* No padding-top nudge: the grid now centers this block against the circle,
       so any offset here would break the equal top/bottom spacing. */
    display: flex;
    align-items: flex-start;
}

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

.kinesio-intro-text p strong {
    /* maquette : « équilibre naturel » = Exposure Tight [-20], même couleur, graisse Regular
       (le paragraphe 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);
}

/* ---------- KINÉSIOLOGIE DARK SECTION ---------- */
.kinesio-section {
    background: var(--ocre);
    overflow: hidden;
    padding: 2.2222rem 0 3.3333rem;
    min-height: 100vh;
}

/* Le conteneur remplit la section en colonne ; le slider prend la hauteur
   restante sous le titre et centre verticalement son contenu (cercles + texte
   centrés sur l'axe vertical du slide — demande tofixe). */
.kinesio-section .grid-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 5.5556rem);
}

.kinesio-section .section-title-row h2 {
    /* première ligne = Exposure [0] (--font-body), graisse Regular (pas de gras) */
    font-family: var(--font-body);
    color: var(--cuivre);
    max-width: calc((8 / 12) * 100%);
}

.kinesio-section .section-title-row h2 strong {
    /* seconde ligne = Exposure Tight [-20] (--font-heading), même couleur cuivre,
       graisse Regular (l'emphase vient de la coupe Tight, pas du gras). */
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
}

.kinesio-slider {
    position: relative;
    display: grid;
    flex: 1;               /* prend la hauteur restante sous le titre */
    align-content: center; /* centre verticalement le slide et son contenu */
    min-height: 0;
}

.kinesio-slide {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.kinesio-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.kinesio-slide.active .ks-circle-main {
    animation: ksSlideIn 0.7s ease 0.1s both;
}

.kinesio-slide.active .ks-circle-secondary {
    animation: ksScaleIn 0.7s ease 0.2s both;
}

.kinesio-slide.active .ks-text {
    animation: ksFadeUp 0.6s ease 0.3s both;
}

@keyframes ksSlideIn {
    from {
        opacity: 0;
        transform: translateX(-1.6667rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ksScaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ksFadeUp {
    from {
        opacity: 0;
        transform: translateY(1.1111rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kinesio-grid-layout {
    align-items: center;
    min-height: 30.5556rem;
    position: relative;
}

.ks-circle-main {
    grid-column: 1 / 6;
    grid-row: 1;
    /* maquette tofixe #7 : réduire le cercle « ancrage intérieur » (100% → 85%) */
    width: 85%;
    justify-self: center;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}

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

.ks-circle-secondary {
    grid-column: 4 / 7;
    grid-row: 1;
    /* maquette tofixe #7 : réduire le cercle secondaire en proportion (100% → 85%) */
    width: 85%;
    justify-self: center;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    z-index: 0;
    position: relative;
    align-self: center;
}

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

.ks-overlay {
    position: absolute;
    inset: 0;
    background: rgba(89, 42, 39, 0.5);
    border-radius: 50%;
    pointer-events: none;
}

.ks-text {
    grid-column: 8 / 12;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1111rem;
    text-align: center;
}

.ks-text .ancora-icon {
    width: 3.8889rem;
    height: 4rem;
}

.ks-text .quote-small {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--cuivre);
}

.ks-text .quote-large {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    font-weight: var(--fw-regular);
    line-height: var(--lh-lead);
    color: var(--cuivre);
}

/* Mots accentués dans les citations du slider (« essence », « Ajustement »…) :
   coupe Tight à graisse Regular, comme la maquette. Sans cette règle, le <strong>
   non stylé hériterait du gras par défaut du navigateur → faux-gras sur Exposure (400 only). */
.ks-text .quote-small strong,
.ks-text .quote-large strong {
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
}

.ks-dots {
    grid-column: 12 / 13;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7778rem;
}

.ks-dots .dot {
    width: 1.1111rem;
    height: 1.1111rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
}

.ks-dots .dot.active {
    background: var(--cuivre);
}

.ks-dots .dot:not(.active) {
    background: transparent;
    border: 1px solid var(--cuivre);
}

/* ---------- STONES SECTION ---------- */
.stone-section {
    height: 200vh;
    position: relative;
    padding: 0;
}

/* Container: positioned absolutely by JS to stay centred in viewport */
.stone-section .grid-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    max-width: none;
    margin: 0;
}

/* JS toggles these classes */
.stone-section .grid-container.is-fixed {
    position: fixed;
    top: 0;
}

.stone-section .grid-container.is-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
}

.stone-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--grid-gutter);
    align-items: center;
    width: 100%;
}

.stone-circle {
    grid-row: 1;
    grid-column: span 6;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    will-change: transform, opacity;
}

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

/* Z-order: stone-3 (right) in front, stone-2 middle, stone-1 back */
.stone-1 {
    grid-column: 1 / 7;
    z-index: 1;
}

.stone-2 {
    grid-column: 4 / 10;
    z-index: 2;
}

.stone-3 {
    grid-column: 7 / 13;
    z-index: 3;
}

@media (max-width: 768px) {
    .stone-section { height: 180vh; }
}

@media (max-width: 480px) {
    .stone-section { height: 160vh; }
}

/* ---------- À PROPOS SECTION (home) ---------- */
.apropos-section {
    background: var(--ocre);
    /* maquette tofixe #5 : agrandir l'espace sous le bloc À propos,
       avant la bande marbrée (respiration ocre demandée sur la maquette). */
    padding: 0 0 clamp(3.5556rem, 8vw, 8.3333rem);
    position: relative;
}

.apropos-section .section-title-row h2 {
    /* lignes 2-3 = Exposure [0] (--font-body), graisse Regular (pas de gras) */
    font-family: var(--font-body);
    color: var(--cuivre);
    max-width: 90%;
}

.apropos-section .section-title-row h2 strong {
    /* première ligne = Exposure Tight [-20] (--font-heading), même couleur cuivre,
       graisse Regular (l'emphase vient de la coupe Tight, pas du faux-gras). */
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
}

.apropos-grid {
    align-items: flex-start;
}

.apropos-image {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1.1111rem 0;
}

.apropos-image .circle-portrait {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}

.apropos-image .circle-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.apropos-text {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: 0;
}

.apropos-text .text-quote {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    font-weight: var(--fw-regular);
    line-height: var(--lh-lead);
    color: var(--cuivre);
    padding: 0.5556rem;
    margin-bottom: 0.5556rem;
}

.apropos-text .text-quote strong {
    /* « nouvelles visions » = Exposure Tight [-20] (--font-heading), même couleur cuivre,
       graisse Regular (l'emphase vient de la coupe Tight, pas du faux-gras). */
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
}

.apropos-text .text-body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--cuivre);
    padding: 0.5556rem;
    margin-bottom: 1.1111rem;
}

.apropos-text .btn {
    align-self: flex-start;
}

/* ---------- TEXTURE SECTION ---------- */
.texture-section {
    position: relative;
    /* couvre toute la hauteur de la fenêtre +20%, sans marge/padding haut & bas */
    height: 120vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.texture-section .texture-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.texture-section .texture-line-top,
.texture-section .texture-line-bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--cuivre);
}

.texture-section .texture-line-top {
    top: 0;
}

.texture-section .texture-line-bottom {
    bottom: 0;
}

/* ---------- AVIS / TESTIMONIALS ---------- */
.avis-section {
    padding: 3.3333rem 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avis-section .grid-container {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.avis-section .section-title-row h2 {
    /* Two-tone title: "Un grand merci" (strong) in cuivre, the rest in ocre.
       Seconde ligne « pour votre confiance » = Exposure [0] (--font-body). */
    font-family: var(--font-body);
    color: var(--ocre);
}

.avis-section .section-title-row h2 strong {
    /* « Un grand merci » = Exposure Tight [-20] (--font-heading), couleur cuivre,
       graisse Regular (l'emphase vient de la coupe Tight, pas du faux-gras). */
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    color: var(--cuivre);
}


.avis-grid {
    align-items: center;
    overflow: visible;
    min-height: clamp(25rem, 57vw, 45.6667rem);
}

.avis-card {
    grid-column: 4 / 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1667rem;
}

.avis-card .ancora-icon {
    width: 2.9444rem;
    height: 3.0556rem;
}

.avis-card .avis-quote {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    font-weight: var(--fw-regular);
    line-height: var(--lh-lead);
    text-align: center;
    color: var(--ocre);
    padding: 0.5556rem;
}

.avis-card .avis-author {
    font-family: var(--font-body);
    font-size: var(--fs-ui);
    font-weight: var(--fw-regular);
    line-height: var(--lh-ui);
    color: var(--cuivre);
    text-align: right;
    width: 100%;
    padding: 0.5556rem;
}

.avis-decor--left,
.avis-decor--right {
    display: flex;
    align-items: center;
    overflow: visible;
    pointer-events: none;
}

.avis-decor--left {
    grid-column: 1 / 4;
    justify-content: flex-start;
}

.avis-decor--left img {
    height: clamp(25rem, 57vw, 45.6667rem);
    width: auto;
    max-width: none;
    flex-shrink: 0;
    /* left edge at grid-margin, shift left by (W/2 + grid-margin) → center at viewport left edge */
    transform: translateX(calc(-50% - var(--grid-margin)));
}

.avis-decor--right {
    grid-column: 10 / 13;
    justify-content: flex-end;
}

.avis-decor--right img {
    height: clamp(25rem, 57vw, 45.6667rem);
    width: auto;
    max-width: none;
    flex-shrink: 0;
    /* right edge at viewport-grid-margin, shift right by (W/2 + grid-margin) → center at viewport right edge */
    transform: translateX(calc(50% + var(--grid-margin))) rotate(180deg);
}

/* ---------- PAGE-LOAD HEADER ANIMATIONS ---------- */
.header-logo {
    animation: enterFromTop 600ms var(--ease-out-quart) both;
}

.nav-links,
.hamburger {
    animation: enterFromTop 600ms var(--ease-out-quart) 80ms both;
}

/* Hero marble circle */
.hero-shape img {
    animation: heroAppear 1.2s var(--ease-out-expo) 300ms both;
    /* maquette tofixe #5 : agrandir légèrement le cercle (50% → 56%) */
    width: 56%;
    position: relative;
    margin: auto;
}

/* ---------- TARIFS ---------- */
.tarifs-section {
    background: var(--cuivre);
    /* maquette tofixe #10 : section Tarifs verrouillée à 80vh.
       min-height (pas height) : la section grandit si le contenu déborde. */
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 4.4444rem 0 5.5556rem;
    position: relative;
}

/* Le conteneur de grille remplit toute la hauteur de la section pour que la
   colonne logo (align-self: stretch) — et donc le filet vertical — atteigne le
   bas de la section. */
.tarifs-section .grid-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tarifs-title-row {
    padding: 1.1667rem 0.5556rem;
}

.tarifs-title-row h2 {
    /* only color varies */
    color: var(--ocre);
}

/* Full-bleed separator: breaks out of the grid-container to span the whole
   viewport width (same technique as the shared .section-line). */
.tarifs-line {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 1px;
    background: var(--ocre);
    margin-bottom: 3.3333rem;
}

.tarifs-grid {
    flex: 1;                  /* grandit pour remplir la hauteur de la section */
    align-items: flex-start;  /* le texte détails reste calé en haut... */
    align-content: stretch;   /* ...mais la rangée s'étire (logo plein-hauteur) */
}

.tarifs-intro-text {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    font-weight: var(--fw-regular);
    line-height: var(--lh-lead);
    color: var(--ocre);
    padding: 0 0.5556rem;
    margin-bottom: 3.1111rem;
}

/* Logo spans cols 1–4. The ::after divider draws the vertical line on the
   col 4/5 boundary. Its negative offsets stretch it from the horizontal title
   separator (top: -60px = the .tarifs-line margin-bottom) down to the very
   bottom edge of the section (bottom: -100px = the section's padding-bottom,
   i.e. the top of the footer). */
.tarifs-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding-right: var(--grid-gutter);
}

.tarifs-logo::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3.3333rem;
    bottom: -5.5556rem;
    width: 1px;
    background: var(--ocre);
}

.tarifs-logo img {
    width: 100%;
    max-width: 16.6667rem;
    height: auto;
}

.tarifs-details {
    width: 100%;
}

.tarifs-details .tarif-group {
    margin-bottom: 1.1111rem;
}

.tarifs-details .tarif-group-title {
    /* cohérence typo : contenu de lecture (listes de prix) en Exposure,
       comme les listes à puces et paragraphes des autres pages */
    font-family: var(--font-body);
    font-size: var(--fs-ui);
    font-weight: var(--fw-regular);
    line-height: var(--lh-ui);
    color: var(--ocre);
    padding: 1.2222rem 0.5556rem 0;
}

.tarifs-details .tarif-group-items {
    font-family: var(--font-body);
    font-size: var(--fs-ui);
    font-weight: var(--fw-regular);
    line-height: var(--lh-ui);
    color: var(--ocre);
    padding: 0 0.5556rem 0.5556rem;
}

.tarifs-details .tarif-group-items strong {
    /* en-têtes « Première séance : » et « A partir de la deuxième séance : »
       = Exposure Tight [-20] (--font-heading), graisse Regular (pas de faux-gras). */
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
}

.tarifs-details .tarif-note {
    /* cohérence typo : note NB en famille titre, alignée sur .ks-memoire__nb
       (kinésiologie) et la convention .t-caption */
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    line-height: var(--lh-caption);
    color: var(--ocre);
    padding: 2.5556rem 0.5556rem 0.5556rem;
}

/* ============================================================
   RESPONSIVE
   Tiers (max-width, largest→smallest): 1440 laptop · 1024 tablet
   · 768 mobile · 480 phone. Desktop ≥1440 is the design base.
   The 12-col grid + its children auto-collapse to one column at
   ≤768 (see styles.css), so most stacking happens there; the
   rules below tune sizing, spacing and bespoke mobile layouts.
   ============================================================ */

/* ---------- TABLET ≤1024 ---------- */
@media (max-width: 1024px) {
    /* Softer hero curve — the desktop shape dips too steeply once stretched
       to a portrait viewport. */
    .hero { background-image: url('../assets/img/shared/curve-down-soft.svg'); }

    /* Hero marble circle — grow it on portrait/tablet to fill the wider stage. */
    .hero-shape img { width: 80%; }

    /* Intro — keep the centred statement; the floating RDV is too narrow to
       sit in a single column at this width. */
    .intro     { min-height: 100svh; }
    .intro-rdv { display: none; }

    /* Kinésiologie intro — shrink the bleeding circle, drop the 100vh lock. */
    .kinesio-intro      { min-height: auto; padding: clamp(2.6667rem, 7vh, 5rem) 0; }
    .kinesio-intro-grid { margin-top: 2.2222rem; }
    .kinesio-intro-image .circle-large {
        width:  clamp(17.7778rem, 42vw, 27.7778rem) !important;
        height: clamp(17.7778rem, 42vw, 27.7778rem) !important;
        margin-left: -8vw !important;
    }
    .kinesio-intro-text { padding-top: 0; }

    /* Kinésiologie dark slider — release the height lock + title width cap. */
    .kinesio-section { min-height: auto; }
    .kinesio-section .grid-container { min-height: auto; }
    .kinesio-section .section-title-row h2 { max-width: none; }
    .kinesio-grid-layout { min-height: 0; }

    /* Avis — release the 100vh lock. */
    .avis-section .grid-container { min-height: auto; }

    /* À propos teaser — cap circle so it doesn't dominate. */
    .apropos-image .circle-portrait { width: min(100%, 23.3333rem); }
}

/* ---------- MOBILE ≤768 ---------- */
@media (max-width: 768px) {
    /* Hero — small-viewport-height avoids the iOS URL-bar jump. */
    .hero       { min-height: 100svh; }
    .hero-inner { padding-bottom: 10vh; }
    /* Marble circle: fill the 90% wrapper instead of sitting at 60% of it,
       so the hero shape reads large on phones. */
    .hero-shape     { width: 90%; }
    .hero-shape img { width: 100%; }

    /* Intro — centre the brand statement in the viewport. */
    .intro {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Content-driven height on phones — no viewport-height lock. */
        min-height: auto;
        padding: 3.1111rem 1.1111rem;
    }
    /* Intentional mobile sizes below the fluid clamp floors — wrapped in
       × --type-scale so they shrink with the global knob. */
    .intro-text {
        font-size:   calc(1.5365rem * var(--type-scale));
        line-height: calc(1.7693rem * var(--type-scale));
        padding: 0;
    }
    .intro-rdv { display: none; }

    /* Kinésiologie intro — contained circle, text stacked below. */
    .kinesio-intro       { padding: 2.6667rem 0; }
    .kinesio-intro-grid  { margin-top: 1.3333rem; gap: 1.5556rem; }
    .kinesio-intro-image { justify-content: center; margin-left: 0; }
    .kinesio-intro-image .circle-large {
        width:  min(72vw, 20rem) !important;
        height: min(72vw, 20rem) !important;
        margin-left: 0 !important;
    }
    .kinesio-intro-text   { padding-top: 0; }
    .kinesio-intro-text p {
        font-size:   calc(1.2222rem * var(--type-scale-body));
        line-height: calc(1.5278rem * var(--type-scale-body));
    }

    /* Kinésiologie dark slider — single circle, centred quote, dots in a row
       (columns already stacked by the Phase-0 collapse). */
    .kinesio-section     { padding: 2.6667rem 1.1111rem; }
    .kinesio-grid-layout { gap: 1.2222rem; min-height: 0; }
    .ks-circle-main      { max-width: 17.7778rem; margin: 0 auto; }
    .ks-circle-secondary { display: none; }
    .ks-text             { text-align: center; }
    .ks-dots             { flex-direction: row; justify-content: center; gap: 0.6667rem; }

    /* Stones — collapse the 200vh scroll choreography to a short static trio
       of lightly-overlapping circles (home.js no-ops the animation here). */
    .stone-section                 { height: auto; padding: 2.2222rem 0; }
    .stone-section .grid-container { position: static; height: auto; }
    .stone-row                     { display: flex; justify-content: center; align-items: center; }
    .stone-circle                  { width: 36%; }
    .stone-2                       { margin: 0 -5%; }

    /* The desktop curve pulls À propos up over the stones (−60vh); on mobile
       that overlaps the teaser text into them. Let À propos follow naturally. */
    .apropos-intersect { margin-top: 0; margin-bottom: -1px; }

    /* À propos teaser. */
    .apropos-image                  { justify-content: center; }
    .apropos-image .circle-portrait { width: 16.6667rem; }
    .apropos-text .text-quote {
        font-size:   calc(1.3333rem * var(--type-scale-body));
        line-height: calc(1.6667rem * var(--type-scale-body));
    }
    /* .text-body intentionally omitted — it now follows the shared --fs-body
       token on mobile too, matching every other body paragraph (20px floor). */

    /* Texture band. */
    .texture-section { height: 22.2222rem; }

    /* Avis — full-width card; hide the flanking circles (correct selectors). */
    .avis-decor--left, .avis-decor--right { display: none; }

    /* Tarifs — release the 80vh lock once the grid stacks to one column, so the
       section is driven by its content instead of stretching with empty space. */
    .tarifs-section { min-height: auto; padding: 3.1111rem 0 3.5556rem; }

    /* keep the brand logo modest when stacked full-width; drop the
       vertical divider/padding now that logo and details are in one column. */
    .tarifs-logo {
        margin-bottom: 1.7778rem;
        padding-right: 0;
    }
    .tarifs-logo::after { display: none; }
    .tarifs-logo img { max-width: 11.1111rem; }
}

/* ---------- PHONE ≤480 ---------- */
@media (max-width: 480px) {
    .apropos-image .circle-portrait { width: 13.3333rem; }
    .ks-circle-main { max-width: 14.4444rem; }
}