/* ============================================
   CONTACT PAGE  (contact.html)
   ============================================ */

/* ---------- HERO ---------- */
/* Extra bottom padding clears the FAQ arch dome (which rises ~100px into this
   section) so there's breathing room between the form and the teal curve. */
.contact-hero { padding: 3.3333rem 0 12.2222rem; background: var(--light-bg); }

/* Hero wrapper — scales to 4K like the landing page instead of pinning. */
.contact-hero-content {
    width: 100%;
    max-width: 213.3333rem;
    margin: 0 auto;
    padding: 0 var(--grid-margin);
}

/* Title sits above the image + form row. */
.contact-hero-title {
    /* Corps « je suis là pour vous. » = Exposure [0] (--font-body) ; « Contactez-moi, »
       passe en Tight [-20] via le <strong>. Largeur portée de la colonne 1 à la
       colonne 5 de la grille 12 col (au lieu d'un cap fixe ~700px). */
    font-family: var(--font-body);
    color: var(--teal);
    margin-bottom: clamp(2.5rem, 5vw, 5rem);
    max-width: calc((5 / 12) * 100%);
}

.contact-hero-title strong {
    /* 1ère ligne « Contactez-moi, » = Exposure Tight [-20] (--font-heading), graisse
       Regular (pas de faux-gras). nowrap : reste seule sur la 1ère ligne (le <br>
       renvoie le reste à la ligne suivante). */
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    white-space: nowrap;
}

/* Row: half-circle bleeding off the left viewport edge + a wide form beside it.
   The circle is absolutely positioned and stretched to the full row height so it
   matches the form's height; the row reserves left padding so the form clears it. */
.contact-hero-row {
    position: relative;
    /* Place the form on grid columns 4–11: reserve columns 1–3 (+ their gutters)
       on the left and column 12 (+ its gutter) on the right. The % resolves
       against .contact-hero-content's content box (= the full grid content
       width), so col = (W − 11·gutter)/12 and (col + gutter) = (W + gutter)/12.
       Left = 3 columns → 3·(col + gutter); right = 1 column → (col + gutter). */
    padding-left: calc(3 * (100% + var(--grid-gutter)) / 12);
    padding-right: calc((100% + var(--grid-gutter)) / 12);
    min-height: clamp(20rem, 40vw, 33.3333rem);
    display: flex;
    align-items: center;
}

.contact-hero-circle {
    position: absolute;
    left: calc(-1 * var(--grid-margin)); /* reach the viewport edge, flush */
    top: 0;
    bottom: 0;            /* span the full row height = the form's height */
    line-height: 0;
    pointer-events: none;
}

.contact-hero-circle img {
    display: block;
    height: 100%;        /* equal to the form height (via the stretched .contact-hero-circle) */
    width: auto;
}

.contact-hero-main {
    flex: 1;
    min-width: 0;
}

/* ---------- FORM ---------- */
.contact-form { width: 100%; display: flex; flex-direction: column; gap: clamp(1.3333rem, 2.5vw, 2.2222rem); }

/* Connected bordered grid: the container draws the top + left rules and each
   cell the right + bottom, so shared edges collapse into single teal lines. */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--teal);
    border-left: 1px solid var(--teal);
}

.form-cell {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    color: var(--dark);
    background: transparent;
    border: none;
    border-right: 1px solid var(--teal);
    border-bottom: 1px solid var(--teal);
    border-radius: 0;
    padding: clamp(0.7778rem, 1.2vw, 1.2222rem) clamp(0.8889rem, 1.4vw, 1.4444rem);
    width: 100%;
    outline: none;
}

.form-cell::placeholder { color: var(--teal); opacity: 0.7; }
.form-cell:focus { background: rgba(7, 98, 105, 0.04); }

.form-cell--full {
    grid-column: 1 / -1;
    min-height: clamp(16.6667rem, 33vw, 25rem);
    resize: vertical;
}

/* Bottom row: contact-preference radios on the left, submit on the right. */
.form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.3333rem;
    flex-wrap: wrap;
}

.form-preferences { display: flex; gap: clamp(1.3333rem, 3vw, 2.6667rem); flex-wrap: wrap; }

.form-preferences label {
    display: flex;
    align-items: center;
    gap: 0.6667rem;
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body-sm);
    color: var(--teal);
    cursor: pointer;
}

/* Custom teal radios: hollow ring → filled dot when checked. */
.form-preferences input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.1111rem;
    height: 1.1111rem;
    margin: 0;
    border: 1px solid var(--teal);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}
.form-preferences input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 0.2222rem;
    border-radius: 50%;
    background: var(--teal);
}

.btn-primary {
    background: var(--teal);
    color: var(--or);
    padding: 0.7778rem 2.2222rem;
    border-radius: 2.0556rem;
    font-family: var(--font-heading);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: var(--transition);
    border: none;
}

.btn-primary:hover { opacity: 0.9; transform: translateY(-0.1111rem); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ---------- FORM FEEDBACK ---------- */
.form-feedback {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    padding: 0.6667rem 0.8889rem;
    border-radius: 0.2222rem;
    margin: 0;
}
.form-feedback[hidden] { display: none; }
.form-feedback--success { color: var(--teal); border: 1px solid var(--teal); }
.form-feedback--error { color: #b00020; border: 1px solid #b00020; }
.form-feedback--error a { color: inherit; text-decoration: underline; }

/* ---------- FAQ ---------- */
/* Teal background + gold text, arch dome on top and a corner marble — mirrors
   the .ks-memoire section in css/kinesiologie.css. */
.faq-section {
    position: relative;
    /* Extra bottom padding drops the bottom-anchored corner marble (.faq-marble)
       away from the last FAQ answer in the right column, which otherwise sits
       directly above it — clearance per the maquette. */
    padding: 5rem 0 9.4444rem;
    background: var(--teal);
    overflow: visible;
}

/* Concave dome rising into the light contact section above. Reuses the exact
   arch asset + offset from .ks-memoire::before. */
.faq-section::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 — lift the dome above the section edge */
    pointer-events: none;
    z-index: 1;
}

/* Keep title + items above the decorative arch/marble. */
.faq-section .section-container {
    position: relative;
    z-index: 2;
}

/* Decorative image anchored to the bottom-right corner of the section. */
.faq-marble {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40vw;
    aspect-ratio: 723 / 293;
    background: url('../assets/img/contact/bottom_faq.svg') bottom right / contain no-repeat;
    pointer-events: none;
    /* Above the .faq-section::before arch (z-index 1) so the dome doesn't crop
       the top of the image; the text content (z-index 2) still paints over it. */
    z-index: 2;
}

.faq-title {
    /* h2 typography from base — only color varies */
    color: var(--or);
    margin-bottom: 1.3333rem;
}

/* Full-viewport-width gold rule separating the FAQ title from the content.
   Breaks out of .section-container's padding/max-width to span the whole vw. */
.faq-line {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 1px;
    background: var(--or);
    margin-bottom: 2.6667rem;
}

/* FAQ on the 12-col grid: two INDEPENDENT columns (each 5 cols wide). Items
   stack vertically inside their column (flex) rather than being placed row by
   row, so a short item never leaves a stretched gap above the next divider —
   every separator keeps equal spacing above/below regardless of item heights. */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--grid-gutter);
    /* Shared text/divider measure. bullet(18) + gap(16) + measure ≈ the width of
       one 5-col track at 2K (≈1000px @ 2560-wide), so FAQ content FILLS its full
       5 columns through laptop-HD and 2K, then holds a readable ~75ch line at 4K
       instead of stretching to ~110ch. 100% (below) is the real 5-col track, so
       content can never exceed 5 columns at any width. */
    --faq-measure: 53.7778rem;
}

/* Left = cols 1–5, right = cols 7–11 (col 6 = centre gutter, col 12 blank).
   Each column stacks its items as a flex column. */
.faq-col { display: flex; flex-direction: column; min-width: 0; }
.faq-col--left  { grid-column: 1 / span 5; }
.faq-col--right { grid-column: 7 / span 5; }

/* Each item: gold bullet + text body, like the .ks-quand list rows. Symmetric
   vertical padding → each divider sits midway between the two items it joins. */
.faq-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8889rem;
    /* Espace vertical autour de chaque séparateur (≈52px de chaque côté du trait). */
    padding: 2.8889rem 0;
}

.faq-bullet {
    --faq-bullet-size: 1rem;
    width: var(--faq-bullet-size);
    height: var(--faq-bullet-size);
    flex-shrink: 0;
    /* Centre la puce sur la 1ère ligne du titre h3 : (hauteur de ligne − puce) / 2.
       Suit la taille fluide du h3 (var(--fs-h3) × var(--lh-h3)) à toute largeur. */
    margin-top: calc((var(--fs-h3) * var(--lh-h3) - var(--faq-bullet-size)) / 2);
}

/* The text block (question + answer) fills its 5-col track (100%) but never
   exceeds the readability cap (--faq-measure). So it spans the full 5 columns at
   laptop-HD/2K and holds a comfortable measure at 4K. See --faq-measure above. */
.faq-item__body { max-width: min(100%, var(--faq-measure)); }

.faq-item h3 {
    /* Titres de la liste FAQ = Exposure [0] (--font-body) ; couleur gold */
    font-family: var(--font-body);
    color: var(--or);
    margin-bottom: 0.5556rem;
}

.faq-item__body p {
    /* p typography from base — only color varies */
    color: var(--or);
}

/* Stacked answer paragraphs (e.g. the "Pour les enfants" / "Pour les adultes"
   split) get a small gap so they read as distinct points. */
.faq-item__body p + p { margin-top: 0.8889rem; }

/* Bold lead-ins inside answers ("Pour les enfants :", "1h15 à 1h30"). Exposure
   ships only weight 400, so this is a synthesized bold — intentional here, to
   match the design's emphasis. */
.faq-item__body strong { font-weight: var(--fw-bold); }

/* Gold dividers between stacked items inside a column — every item except the
   first in its column gets a top rule. With symmetric item padding the rule sits
   exactly midway between the two items it separates (equal spacing above/below).
   Width = bullet + gap + --faq-measure, so the rule lines up with the answer
   text and shares its 5-col-fill / readable-cap behaviour past ~2K. */
.faq-col .faq-item:not(:first-child) {
    position: relative;
}
.faq-col .faq-item:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: min(100%, calc(1rem + 0.8889rem + var(--faq-measure))); /* bullet + gap + text measure */
    height: 0.0833rem;
    background: var(--or);
}

/* Stagger (2-column layout) */
.faq-grid .faq-item:nth-child(2) { transition-delay: 60ms; }
.faq-grid .faq-item:nth-child(3) { transition-delay: 120ms; }
.faq-grid .faq-item:nth-child(4) { transition-delay: 60ms; }
.faq-grid .faq-item:nth-child(5) { transition-delay: 120ms; }
.faq-grid .faq-item:nth-child(6) { transition-delay: 180ms; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
    .contact-hero-content { padding: 0 1.1111rem; }

    /* Sur mobile la grille se replie : le titre prend toute la largeur dispo
       plutôt que ~5/12 (qui serait trop étroit pour « Contactez-moi, »). */
    .contact-hero-title { max-width: none; }

    /* Form-first layout: hide the decorative marble circle on mobile for a
       cleaner UI (it added little on small screens and pushed the form down). */
    .contact-hero-row { display: block; padding-left: 0; padding-right: 0; min-height: 0; }
    .contact-hero-circle { display: none; }

    .form-grid   { grid-template-columns: 1fr; }
    .form-bottom { justify-content: flex-start; }

    /* ---- FAQ: single-column mobile layout ---- */
    /* Tighter section rhythm; the arch dome (::before) keeps its aspect-ratio. */
    .faq-section { padding: 3.1111rem 0 4rem; }
    .faq-title   { margin-bottom: 1rem; }
    .faq-line    { margin-bottom: 1.5556rem; }

    /* Hide the bottom-corner marble — at phone widths it crowds the stacked
       items and adds little. Mirrors the hidden .contact-hero-circle above. */
    .faq-marble { display: none; }

    /* One column: flatten the two flex columns (display:contents promotes their
       items into .faq-grid) and let `order` (set inline per item in the renderer)
       restore the authored 1→7 sequence. */
    .faq-grid { display: flex; flex-direction: column; }
    .faq-col  { display: contents; }
    .faq-item { padding: 1.2222rem 0; }

    /* The right column's first item is the 2nd visual item on mobile, so it also
       needs a top rule. The base `.faq-col .faq-item:not(:first-child)` covers
       items 3→7; only the very first (left column) stays rule-less. */
    .faq-col--right .faq-item:first-child { position: relative; }
    .faq-col--right .faq-item:first-child::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: min(100%, calc(1rem + 0.8889rem + var(--faq-measure)));
        height: 0.0833rem;
        background: var(--or);
    }
}

/* ---- FAQ: fine-tuning for phones ---- */
@media (max-width: 480px) {
    .faq-section { padding: 2.6667rem 0 3.3333rem; }
    .faq-item    { padding: 1.1111rem 0; gap: 0.6667rem; }
    /* Plus petite puce ; width/height/margin-top dérivent de la variable et se
       recalculent automatiquement (centrage conservé). */
    .faq-bullet  { --faq-bullet-size: 0.8889rem; }
}