/* ===========================================================
   CONTACT — Base
   =========================================================== */

.content-page.contact-page {
    background: rgb(var(--textColor));
    color: rgb(var(--backgroundLight));
}

.contact-page .contact-pill {
    display: none;
}

.contact-page a {
    color: rgb(var(--backgroundLight));
}


/* ===========================================================
   CONTACT — Hero (Apple-ish card)
   =========================================================== */

.contact-hero .container {
    padding-top: var(--s6);
    padding-bottom: var(--s6);
}

.contact-hero-card {
    /* Apple-ish glass, sobre (dark page) */
    --glassRadius: 34px;
    --glassBlur: 18px;
    --glassAlpha: 0.055;
    --glassSat: 1.12;

    --glassCaustics:
        radial-gradient(60% 55% at 18% 22%, rgb(255 255 255 / 0.070) 0%, transparent 72%),
        radial-gradient(60% 55% at 82% 30%, rgb(255 255 255 / 0.045) 0%, transparent 74%);

    --glassBorder: rgb(255 255 255 / 0.14);
    --glassShadow:
        0 28px 80px rgb(0 0 0 / 0.22),
        inset 0 1px 0 rgb(255 255 255 / 0.14),
        inset 0 -1px 0 rgb(0 0 0 / 0.14),
        inset 0 0 0 1px rgb(255 255 255 / 0.06);

    padding: clamp(18px, 3vw, 44px);
    text-align: center;

    margin-inline: auto;
}

.contact-title {
    font-family: var(--fontAccent);
    letter-spacing: .03em;
    color: rgb(var(--backgroundLight));
    font-size: clamp(3.2rem, 10vw, 6.2rem);
    line-height: 0.95;
    text-wrap: balance;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.contact-title__kicker {
    display: block;
    font-size: 1em;
    line-height: 0.95;
}

.contact-title__sub {
    display: block;
    font-family: var(--fontTitle);
    font-weight: 900;
    font-size: clamp(0.85rem, 2.4vw, 1.25rem);
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: rgb(var(--backgroundLight));
}

.contact-title em {
    font-family: var(--fontAccent);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.contact-subtitle {
    margin-top: var(--s2);
    font-size: clamp(1.4rem, 5.5vw, 2.4rem);
    letter-spacing: 0.04em;
    color: rgb(var(--backgroundLight));
}

.contact-subtitle em {
    font-family: var(--fontAccent);
    font-style: italic;
    font-weight: 400;
}

.contact-subtitle strong {
    font-family: var(--fontTitle);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.contact-hero-divider {
    width: 100%;
    height: 2px;
    margin: var(--s4) auto;
    background: rgb(var(--accentColor) / 0.22);
    border-radius: var(--radius-cut);
}

.contact-intro {
    max-width: 86ch;
    margin: var(--s4) auto 0;

    font-family: var(--fontText);
    line-height: 1.75;
    font-size: clamp(1.02rem, 1.05vw, 1.12rem);
    color: rgb(var(--backgroundLight));

    text-wrap: pretty;
    hyphens: auto;
    text-align: left;
}

/* ===========================================================
   CONTACT — Sections layout
   =========================================================== */

.contact-blocks {
    padding-bottom: var(--s6);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s6);
}


/* ── Contenu textuel dans les blocs ─────────────────────────────────────────── */
.contact-block-content {
    font-family: var(--fontText);
    line-height: 1.75;
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    color: rgb(var(--backgroundLight));
}

.contact-block-content p,
.contact-block-content li {
    margin: 0 0 var(--s2);
    font-family: var(--fontText);
    line-height: 1.75;
    color: rgb(var(--backgroundLight));
}

.contact-block-content p:last-child,
.contact-block-content li:last-child {
    margin-bottom: 0;
}

.contact-block-content ul,
.contact-block-content ol {
    padding-left: 0;
    list-style: none;
    margin: 0 0 var(--s3);
}

.contact-block-content ul li {
    position: relative;
    padding-left: calc(var(--s4) + 10px);
}

.contact-block-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 999px;
    border: 1px solid rgb(var(--backgroundLight) / 0.7);
    background: rgb(var(--backgroundLight) / 0.20);
}

.contact-block {
    padding: var(--s4);
}
.contact-offers {
    padding: 0 !important;
}

/* ===========================================================
   CONTACT — Section titles (shared)
   =========================================================== */

:where(.contact-block-title, .contact-form-title) {
    text-align: center;
    font-family: var(--fontTitle);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--backgroundLight));
    font-size: clamp(1.1rem, 3.8vw, 1.5rem);
    margin-bottom: var(--s4);
    position: relative;
}

:where(.contact-block-title, .contact-form-title)::after {
    content: "";
    display: block;
    width: min(520px, 100%);
    height: 2px;
    margin: var(--s2) auto 0;
    background: rgb(var(--accentColor) / 0.22);
}

/* ===========================================================
   CONTACT — Zone
   =========================================================== */

.contact-zone-content {
    font-family: var(--fontText);
    line-height: 1.55;
    color: rgb(var(--backgroundLight));
    margin-bottom: var(--s3);
}

.contact-zone-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--s2);
}

/* Zone WYSIWYG : on neutralise les bullets natifs */
.contact-zone-list ul,
.contact-zone-list ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-zone-list li {
    position: relative;
    padding-left: calc(var(--s4) + 10px);
    font-family: var(--fontText);
    line-height: 1.55;
    color: rgb(var(--backgroundLight));
}

.contact-zone-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgb(var(--accentColor) / 0.95);
    background: rgb(var(--accentColor) / 0.18);
}

/* ===========================================================
   CONTACT — Offers accordion (Apple-ish + smooth)
   =========================================================== */

.offers {
    --offersRadius: 16px;
    --offersBorder: rgb(255 255 255 / 0.14);
    --offersGlassBg: rgb(255 255 255 / 0.06);
    --offersBlur: 12px;
    --offersShadow:
        0 18px 46px rgb(0 0 0 / 0.20),
        inset 0 1px 0 rgb(255 255 255 / 0.10),
        inset 0 -1px 0 rgb(0 0 0 / 0.12),
        inset 0 0 0 1px rgb(255 255 255 / 0.06);

    display: grid;

    border: 1px solid var(--offersBorder);
    border-radius: var(--offersRadius);
    overflow: hidden;

    background: var(--offersGlassBg);
    -webkit-backdrop-filter: blur(var(--offersBlur)) saturate(1.35);
    backdrop-filter: blur(var(--offersBlur)) saturate(1.35);

    box-shadow: var(--offersShadow);
}

.offer {
    border: 0;
    background: transparent;
}

.offer+.offer {
    border-top: 1px solid var(--offersBorder);
}

/* Summary */
.offer-summary {
    list-style: none;
    cursor: pointer;

    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;

    padding: 14px;
    min-height: 56px;

    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.offer-summary::-webkit-details-marker {
    display: none;
}

.offer-summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--accentColor) / 0.35);
    border-radius: 12px;
}

.offer-summary>* {
    position: relative;
    z-index: 1;
}

/* Chevron pill */
.offer-ico {
    --icoBg: rgb(255 255 255 / 0.06);
    --icoShadow:
        inset 0 1px 0 rgb(255 255 255 / 0.14),
        inset 0 -1px 0 rgb(0 0 0 / 0.12),
        inset 0 0 0 1px rgb(255 255 255 / 0.06);

    display: inline-grid;
    place-items: center;

    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;

    position: relative;
    overflow: hidden;
    isolation: isolate;

    background: var(--icoBg);
    -webkit-backdrop-filter: blur(10px) saturate(1.35);
    backdrop-filter: blur(10px) saturate(1.35);

    box-shadow: var(--icoShadow);
    color: rgb(var(--backgroundLight));
}

/* Shine only on the pill */
.offer-ico::after {
    content: "";
    position: absolute;
    inset: -60%;
    pointer-events: none;
    z-index: 0;

    background: linear-gradient(120deg,
            transparent 35%,
            rgb(var(--accentColor) / 0.26) 50%,
            transparent 65%);

    transform: translateX(-70%) rotate(12deg);
    opacity: 0;

    mix-blend-mode: overlay;
    transition: transform 0.55s ease, opacity 0.18s ease;
}

.offer-icon {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    display: block;
    transition: transform 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {

    .offer-summary:hover .offer-ico::after,
    .offer-summary:focus-visible .offer-ico::after {
        opacity: 1;
        transform: translateX(70%) rotate(12deg);
    }
}

/* Title */
.offer-title {
    text-align: center;
    font-family: var(--fontTitle);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--backgroundLight));
}

.offer-title em {
    font-family: var(--fontAccent);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.03em;
}

/* Body (content) */
.offer-body {
    padding: 14px 16px 16px;
    border-top: 1px solid var(--offersBorder);
    background: rgb(0 0 0 / 0.06);

    font-family: var(--fontText);
    line-height: 1.55;
    color: rgb(var(--backgroundLight));
}
.offer-body p {
    margin-bottom: var(--s2);
}

/* Smooth open/close (JS wraps .offer-body inside .offer-body-wrap) */
.offer-body-wrap {
    --accDur: 420ms;

    overflow: hidden;
    height: 0;
    transition: height var(--accDur) cubic-bezier(.16, 1, .3, 1);
}

.offer-body {
    opacity: 0;
    transform: translateY(-2px);
    transition:
        opacity 260ms ease,
        transform var(--accDur) cubic-bezier(.16, 1, .3, 1);
}

.offer[open] .offer-body {
    opacity: 1;
    transform: translateY(0);
}

/* Chevron rotation */
.offer[open] .offer-icon {
    transform: rotate(180deg);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .offer-body-wrap,
    .offer-body,
    .offer-ico::after,
    .offer-icon {
        transition: none;
    }

    .offer-ico::after {
        opacity: 0;
        transform: none;
    }

    .offer-body {
        opacity: 1;
        transform: none;
    }
}

/* ===========================================================
   CONTACT — Form
   =========================================================== */

.form-container {
    padding: var(--s4);
}

.contact-form-wrap {
    padding: var(--s6) 0 var(--s8);
}

.contact-form {
    margin-top: var(--s5);
}

.form-grid {
    display: grid;
    gap: var(--s4);
}

.field {
    display: grid;
    gap: var(--s2);
}

.field--full {
    grid-column: 1 / -1;
}

.field-label {
    font-family: var(--fontAccent);
    font-style: italic;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgb(var(--backgroundLight));
    font-size: 0.95rem;
    padding: 0 var(--s2);
}

.field-label small {
    font-style: normal;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 0.9;
}

.field-input {
    width: 100%;
    height: 40px;
    padding: 0 var(--s3);

    background: rgb(var(--accentColor) / 0.85);
    border: 2px solid rgb(var(--backgroundLight));
    color: rgb(var(--textColor));
    border-radius: var(--s3);

    font-family: var(--fontText);
    outline: none;
}

.field-input::placeholder {
    color: rgb(var(--textColor) / 0.55);
}

.field-input:focus-visible {
    box-shadow: 0 0 0 3px rgb(var(--accentColor) / 0.35);
}

.field-textarea {
    height: auto;
    padding: var(--s3);
    resize: vertical;
    min-height: 140px;
}

.field-icon {
    position: relative;
}

.field-icon svg {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: rgb(var(--textColor));
    opacity: 0.85;
    pointer-events: none;
}

/* Select appearance reset */
.field-icon :where(select.field-input, .field-input) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
}

/* Services fieldset */
.fieldset-services {
    border: 2px solid rgb(var(--accentColor) / 0.22);
    padding: var(--s3) var(--s4) var(--s4);
    border-radius: var(--s3);
}

.fieldset-services .field-label {
    margin-bottom: var(--s2);
}

.fieldset-services .check {
    padding-block: 2px;
}

/* Check / Consent */
:where(.check, .consent) {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    font-family: var(--fontText);
    color: rgb(var(--backgroundLight));
}

.check {
    letter-spacing: 0.02em;
}

:where(.check input, .consent input) {
    width: 16px;
    height: 16px;
    accent-color: rgb(var(--accentColor));
}

/* ===========================================================
   CF7 — Integration
   =========================================================== */

.contact-page .wpcf7 {
    width: 100%;
}

.contact-page .wpcf7 form {
    margin: 0;
}

.contact-page .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* ----- Services (checkbox list) ----- */
.fieldset-services .checks {
    display: grid;
    gap: var(--s2);
}

/* wrapper checkbox CF7 */
.fieldset-services .checks .wpcf7-form-control.wpcf7-checkbox {
    display: grid;
    gap: var(--s2);
}

/* items */
.fieldset-services .checks .wpcf7-list-item {
    display: block;
    margin: 0;
}

.fieldset-services .checks .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);

    font-family: var(--fontText);
    color: rgb(var(--backgroundLight));
    letter-spacing: 0.02em;
}

.fieldset-services .checks input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: rgb(var(--accentColor));
}

/* ----- Consent (acceptance) ----- */
.contact-page .consent {
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.contact-page .consent a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.contact-page .consent .wpcf7-form-control-wrap {
    display: inline-flex;
    width: auto;
}

.contact-page .consent .wpcf7-form-control.wpcf7-acceptance {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.contact-page .consent .wpcf7-list-item {
    margin: 0;
}

.contact-page .consent .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    margin: 0;
}

/* ----- Messages & erreurs CF7 (plus lisibles) ----- */

/* Tip sous champ (inline) */
.contact-page .wpcf7-not-valid-tip {
    margin-top: var(--s1);
    padding: 6px 10px;
    border-radius: 10px;

    font-family: var(--fontText);
    font-size: 0.9rem;
    line-height: 1.35;

    color: rgb(255 210 210);
    background: rgb(255 80 80 / 0.12);
    border: 1px solid rgb(255 80 80 / 0.28);
}

/* Champ invalide : halo un peu plus “error” */
.contact-page .wpcf7-not-valid.field-input,
.contact-page .wpcf7-not-valid .field-input {
    border-color: rgb(255 90 90 / 0.9);
    box-shadow:
        0 0 0 3px rgb(255 90 90 / 0.18),
        0 10px 30px rgb(0 0 0 / 0.18);
}

/* Bloc global (success / error) — version glass cohérente */
.contact-page .wpcf7 form .wpcf7-response-output {
    margin: var(--s4) 0 0;
    padding: var(--s3) var(--s4);
    border-radius: var(--s3);

    font-family: var(--fontText);
    line-height: 1.55;
    text-align: center;

    /* base glass cohérente */
    background:
        radial-gradient(60% 55% at 18% 22%, rgb(255 255 255 / 0.055) 0%, transparent 72%),
        radial-gradient(60% 55% at 82% 30%, rgb(255 255 255 / 0.035) 0%, transparent 74%),
        rgb(255 255 255 / 0.04);

    border: 1px solid rgb(255 255 255 / 0.14);
    box-shadow:
        0 18px 46px rgb(0 0 0 / 0.20),
        inset 0 1px 0 rgb(255 255 255 / 0.10),
        inset 0 -1px 0 rgb(0 0 0 / 0.12),
        inset 0 0 0 1px rgb(255 255 255 / 0.06);

    -webkit-backdrop-filter: blur(12px) saturate(1.25);
    backdrop-filter: blur(12px) saturate(1.25);

    color: rgb(var(--backgroundLight));
}

/* Erreur / validation */
.contact-page .wpcf7 form .wpcf7-response-output.wpcf7-validation-errors,
.contact-page .wpcf7 form .wpcf7-response-output.wpcf7-aborted,
.contact-page .wpcf7 form .wpcf7-response-output.wpcf7-spam-blocked {
    border-color: rgb(255 90 90 / 0.45);
    background: rgb(255 90 90 / 0.10);
    box-shadow: 0 18px 46px rgb(0 0 0 / 0.22);
}

/* Succès */
.contact-page .wpcf7 form .wpcf7-response-output.wpcf7-mail-sent-ok {
    border-color: rgb(120 255 170 / 0.35);
    background: rgb(120 255 170 / 0.08);
    box-shadow: 0 18px 46px rgb(0 0 0 / 0.22);
}

/* Spinner CF7 */
.contact-page .wpcf7-spinner {
    display: block;
    margin: var(--s3) auto 0;
}

/* ===========================================================
   CONTACT — Desktop
   =========================================================== */

@media (min-width: 1024px) {
    .contact-hero .container {
        padding-top: var(--s7);
        padding-bottom: var(--s6);
    }

    .contact-blocks {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: var(--s7);
        padding-bottom: var(--s7);
    }

    .form-container {
        padding: var(--s6);
    }

    .form-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--s5);
        row-gap: var(--s4);
    }

    .contact-submit.btn {
        justify-self: center;
        width: 220px;
    }
}