/* ============================================================
   page-contact.css — CSS spécifique de la page institutionnelle
   « Contact » (sprint Contact post-C6).

   Squelette C0 — vide. Les règles seront ajoutées section par
   section sur les commits C1 → C5.

   Patterns charte-1 prévus :
   - .sacem-section--alt-like (fond cream) — pourra réutiliser
     le pattern --alt de C6 ou en créer un local selon arbitrage
   - .sacem-section--hibiscus-tl / --hibiscus-br (filigranes
     charte-1, le Hero gradient utilisera un hibiscus filigrane
     adapté fond foncé via filter brightness invert)

   Nouveau pattern introduit par ce sprint (réutilisable) :
   - .sacem-hero--gradient : Hero court fond gradient charte
     (--sacem-gradient-primary) avec hibiscus filigrane variante
     fond foncé. Première consommation du gradient SACEM PF en
     Hero (jusqu'à présent réservé aux CTA finaux).
   ============================================================ */

/* ============================================================
   Section 1 — HERO gradient + hibiscus filigrane (C1)
   ----
   Nouveau pattern utilitaire `.sacem-hero--gradient` (réutilisable
   sur d'autres pages si besoin). Diffère de `.sacem-hero--photo`
   (charte-1 Hero photo plein écran) par :
   - fond `var(--sacem-gradient-primary)` (gradient signature) au
     lieu d'un overlay sur photo
   - padding-block plus court (5rem 4rem) au lieu de min-height: 100vh
   - hibiscus filigrane en `::after` rendu en blanc via
     `filter: brightness(0) invert(1)` sur l'asset hibiscus PNG

   L'opacité de l'hibiscus a été itérée en C1 entre 0.08 / 0.10 / 0.12
   avant arbitrage tech lead — valeur finale figée ici.
   ============================================================ */

.sacem-hero--gradient {
    position: relative;
    padding-top: var(--nav-height-desktop, 88px);
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
    /* Padding-top supplémentaire pour respirer sous la nav fixed +
       padding-block bottom modéré (Hero court). */
    padding-block-start: calc(var(--nav-height-desktop, 88px) + clamp(2rem, 5vw, 3.5rem));
    background: var(--sacem-gradient-primary);
    color: #fff;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.sacem-hero--gradient::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -5%;
    width: 50%;
    height: 120%;
    /* C1 itération 2 — asset PNG hibiscus-gris2 (déjà en niveaux
       de gris, traités côté charte-1) au lieu de hibiscus.svg.
       Le contour gris natif sur le gradient violet→orange donne
       un rendu filigrane plus organique qu'un blanc plat. */
    background-image: url('../img/hibiscus-gris2.png');
    background-position: bottom right;
    background-size: contain;
    background-repeat: no-repeat;
    /* C1 — opacity 0.25 figée après 3 itérations MCP (0.08/0.10/0.12
       sur hibiscus.svg blanc → invisible, 0.10/0.12/0.15 sur
       hibiscus-gris2.png → trop discret, 0.20/0.25/0.30 sur
       hibiscus-gris2.png → arbitrage final). Rendu "hibiscus
       emblème SACEM Polynésie en signature identitaire" voulu par
       directeur projet, sans concurrencer le focal texte. */
    opacity: 0.25;
    /* Pas de filter CSS — l'asset hibiscus-gris2.png est déjà en
       niveaux de gris natural, le contraste sur le gradient
       violet→orange donne un rendu organique sans manipulation. */
    pointer-events: none;
    z-index: 1;
}

.sacem-hero--gradient__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-contact-hero__eyebrow {
    font-size: var(--sacem-fs-micro);
    letter-spacing: 0.15em;
    margin-bottom: 1.25rem;
}

.sacem-contact-hero__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    line-height: 1.2;
    color: #fff;
    margin: 0 0 1.5rem;
}

/* Accent du titre — Fraunces italic blanc en local (cf. note
   d'en-tête). 1.05em + padding-right 0.1em alignés sur
   l'équilibrage optique `.sacem-accent` C2.4bis. */
.sacem-contact-hero__title-accent {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-variation-settings: 'SOFT' 100, 'opsz' 144;
    font-size: 1.05em;
    padding-right: 0.1em;
    color: #fff;
}

.sacem-contact-hero__lede {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-lede);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    max-width: 720px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .sacem-hero--gradient {
        padding-block-start: calc(var(--nav-height-mobile, 80px) + clamp(1.5rem, 5vw, 2.5rem));
    }
}

/* ============================================================
   Cartes Contact (.sacem-card) — ATTÉNUATION DU MAUVE INTERNE (retouche 1)
   ----
   Le gradient interne charté (--sacem-card-bg : #fff → --sacem-card-end
   #f2dceb) est jugé trop saturé sur Contact. On l'atténue UNIQUEMENT ici,
   en override scopé `body.sacem-page-contact` — le token partagé n'est PAS
   touché (Missions et toutes les .sacem-card du site gardent leur mauve).
   Technique : on rejoue la même formule 135° blanc → mauve, mais le coin
   mauve est éclairci via color-mix vers le blanc (50 %) à partir du token
   charté --sacem-card-end (aucune couleur inventée). Reste perceptible,
   pas de blanc uni. Curseur d'ajustement = le pourcentage du color-mix.
   S'applique à TOUTES les cartes Contact : Coordonnées + Services + Form. */
body.sacem-page-contact .sacem-card {
    background: linear-gradient(135deg,
        #ffffff 0%,
        color-mix(in srgb, var(--sacem-card-end), #ffffff 50%) 100%);
}

/* ============================================================
   Section 2 — COORDONNÉES (C2)
   ----
   Fond cream signature (utilitaire local — pas de classe partagée
   avec --alt de C6 AP pour éviter le couplage sémantique inter-
   sprints). Header centré minimaliste + grid 3 cards uniformes
   (Adresse / Téléphone / Horaires).

   Cards centrées avec icône SVG Lucide en haut (violet charte) +
   titre eyebrow local (uppercase, letter-spacing, SANS le trait
   ::before de `.sacem-eyebrow` pour éviter la concurrence visuelle
   avec l'icône au-dessus) + contenu multi-ligne (nl2br au render).

   Layout responsive : 3 cols ≥ 768px → 1 col mobile (pas d'étape
   intermédiaire 2 cols, contenu court).
   ============================================================ */

.sacem-contact-coordonnees {
    /* Fond porté par le système de dégradé progressif (cf. bloc en fin de
       fichier). isolation:isolate retiré : il créait un contexte d'empilement
       qui aurait piégé le ::before hibiscus de la classe partagée. */
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

.sacem-contact-coordonnees__inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* Header section (pattern aligné sur les autres sections C6) */
.sacem-contact-coordonnees__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 3rem;
}

.sacem-contact-coordonnees__eyebrow {
    margin-bottom: 1rem;
}

.sacem-contact-coordonnees__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--sacem-text-primary, #1f1f1f);
    margin: 0;
}

.sacem-contact-coordonnees__title-accent {
    /* Hérite intégralement de `.sacem-accent` (charte-1). */
}

/* Grid 3 cards uniformes, gap équivalent à C6.8 Chiffres.
   align-items: stretch → les 3 cartes prennent la hauteur de la plus grande
   (Adresse/Horaires multi-lignes vs Téléphone court) — égalisation par la
   grille, robuste si le contenu change (retouche 3). */
.sacem-contact-coordonnees__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: stretch;
}

/* Card Coordonnées — REVIREMENT (retouche 2) : passe en .sacem-card
   (relief partagé, mauve atténué via l'override scopé ci-dessous). On ne
   garde ici que les spécificités Contact : contenu CENTRÉ (≠ Services qui
   est aligné gauche) + flex-column pour que le box stretch fonctionne. */
.sacem-contact-coordonnees__card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Icône SVG — taille calée sur le rendu Chiffres 2025 (40px),
   couleur violet charte. Stroke currentColor hérite la couleur via
   color: var(--sacem-violet) sur le span parent. */
.sacem-contact-coordonnees__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
    color: var(--sacem-violet, #6B1F7C);
}

.sacem-contact-coordonnees__card-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Titre card — style eyebrow LOCAL (uppercase, letter-spacing) SANS
   le trait `::before` de `.sacem-eyebrow` (éviter la concurrence
   visuelle avec l'icône SVG au-dessus). */
.sacem-contact-coordonnees__card-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-micro);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sacem-violet, #6B1F7C);
    margin: 0 0 0.75rem;
}

/* Contenu card — paragraphe multi-ligne via nl2br au render */
.sacem-contact-coordonnees__card-content {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-body);
    line-height: 1.65;
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 0;
}

@media (max-width: 768px) {
    .sacem-contact-coordonnees__grid {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 4vw, 2rem);
    }
}

/* ============================================================
   Section 3 — SERVICES (C3)
   ----
   Fond blanc, header centré, grid 2×2 desktop → 1 col mobile,
   4 cards riches alignées LEFT (description + email + contact/note
   + lien optionnel).

   Pattern card avec subtle shadow au repos + élévation hover
   (cohérent avec autres cards projet, ex. C6.3 Vue d'ensemble qui
   utilisait un pattern proche).

   Email cliquable mailto: en violet bold ; lien interne optionnel
   en violet avec flèche →.
   ============================================================ */

.sacem-contact-services {
    /* Fond porté par le système de dégradé progressif (cf. bloc en fin de fichier). */
    padding-block: clamp(3.5rem, 8vw, 6rem);
    position: relative;
    isolation: isolate;
}

.sacem-contact-services__inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-contact-services__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 3rem;
}

.sacem-contact-services__eyebrow {
    margin-bottom: 1rem;
}

.sacem-contact-services__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--sacem-text-primary, #1f1f1f);
    margin: 0;
}

.sacem-contact-services__title-accent {
    /* Hérite intégralement de `.sacem-accent` (charte-1). */
}

/* Grid 2×2 desktop, 1 col mobile (breakpoint 768px).
   align-items: stretch → toutes les cartes d'une même rangée prennent la
   hauteur de la plus grande (la carte « Aide aux projets » a un lien
   « Découvrir les programmes » en plus → plus haute). Égalisation par la
   grille, pas de hauteur fixe (retouche 3). */
.sacem-contact-services__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 2rem);
    align-items: stretch;
}

/* Card Services — composition .sacem-card (charte partagée) + spécificités
   Contact. Le contenant (gradient interne blanc→mauve via --sacem-card-bg,
   ombre de repos, liseré gradient top animé au hover, élévation au survol)
   est fourni par .sacem-card posée AU MARKUP (contact.php). On ne garde ici
   que ce qui est propre à Contact : l'alignement gauche du contenu (icône,
   titre, email, lien) + flex-column pour pousser le pied de carte en bas. */
.sacem-contact-card {
    text-align: left; /* aligné gauche — décision tech lead C3 */
    display: flex;
    flex-direction: column;
}

/* Icône SVG — 32px violet en haut de card */
.sacem-contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 0.875rem;
    color: var(--sacem-violet, #6B1F7C);
}

.sacem-contact-card__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Titre H3 — Outfit bold taille moyenne */
.sacem-contact-card__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--sacem-fs-h3);
    line-height: 1.3;
    color: var(--sacem-text-primary, #1f1f1f);
    margin: 0 0 0.625rem;
}

.sacem-contact-card__description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-sm);
    line-height: 1.6;
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 0 0 1rem;
}

/* Email mailto: en violet bold, hover underline accentué */
.sacem-contact-card__email-wrap {
    margin: 0 0 0.625rem;
}

.sacem-contact-card__email {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-sm);
    color: var(--sacem-violet, #6B1F7C);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-thickness 0.15s ease;
    word-break: break-word; /* anti-débordement pour les emails longs */
}

.sacem-contact-card__email:hover,
.sacem-contact-card__email:focus-visible {
    text-decoration-thickness: 2px;
}

/* Méta : contact ou note */
.sacem-contact-card__meta {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-meta);
    line-height: 1.5;
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 0 0 0.25rem;
}

.sacem-contact-card__meta--note {
    font-style: italic;
    opacity: 0.85;
}

/* Lien interne optionnel — violet + flèche.
   margin-top: auto → poussé en BAS de la carte flex-column (retouche 3) :
   la carte « Aide aux projets » garde son lien aligné sur le bas, à hauteur
   du contenu des cartes voisines. padding-top assure un écart minimal même
   quand le contenu remplit presque la carte. */
.sacem-contact-card__link-wrap {
    margin: 0;
    margin-top: auto;
    padding-top: 0.875rem;
}

.sacem-contact-card__link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-sm);
    color: var(--sacem-violet, #6B1F7C);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: gap 0.15s ease;
}

.sacem-contact-card__link:hover,
.sacem-contact-card__link:focus-visible {
    gap: 0.5rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (max-width: 768px) {
    .sacem-contact-services__grid {
        grid-template-columns: 1fr;
        gap: clamp(1.25rem, 4vw, 1.75rem);
    }
}

/* ============================================================
   Section 4 — FORMULAIRE de contact (C4)
   ----
   Fond cream signature (cohérence rythme alterné cream/blanc),
   header centré, container max-width 720px qui injecte le shortcode
   Contact Form 7 paramétré via l'option SACEM PF.

   Le CSS override les inputs CF7 natifs pour matcher la charte :
   border-radius, padding généreux, focus violet, labels Outfit
   medium, bouton submit gradient via .sacem-btn--primary.
   ============================================================ */

.sacem-contact-form-section {
    /* Fond porté par le système de dégradé progressif (cf. bloc en fin de fichier). */
    padding-block: clamp(3.5rem, 8vw, 6rem);
    position: relative;
    isolation: isolate;
}

.sacem-contact-form-section__inner {
    max-width: 720px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-contact-form-section__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.sacem-contact-form-section__eyebrow {
    margin-bottom: 1rem;
}

.sacem-contact-form-section__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--sacem-text-primary, #1f1f1f);
    margin: 0 0 1.25rem;
}

.sacem-contact-form-section__title-accent {
    /* Hérite intégralement de `.sacem-accent` (charte-1). */
}

.sacem-contact-form-section__lede {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-lede);
    line-height: 1.65;
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 0;
}

/* Container du formulaire (CF7 injecte ses propres balises dedans).
   Relief porté par .sacem-card (charte partagée, posée au markup) : gradient
   interne blanc→mauve, ombre de repos, liseré gradient top. On ne garde ici
   que le padding généreux propre au formulaire (plus large que le padding
   carte par défaut). Fond/border/radius fournis par .sacem-card. */
.sacem-contact-form-section__form-wrap {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Le form-wrap n'est pas une carte « survolable » : on neutralise l'élévation
   au survol héritée de .sacem-card (un formulaire entier qui bondit au hover
   serait incongru) et on rend le liseré gradient top PERMANENT (relief léger
   et stable). Override scopé page Contact — la classe partagée n'est pas
   touchée. */
body.sacem-page-contact .sacem-contact-form-section__form-wrap:hover {
    transform: none;
    box-shadow: var(--sacem-card-shadow);
    border-color: rgba(26, 14, 18, 0.06);
}

body.sacem-page-contact .sacem-contact-form-section__form-wrap::before {
    transform: scaleX(1);
}

/* Message admin-only si ID CF7 = 0 */
.sacem-contact-form-section__admin-warning {
    background-color: rgba(242, 139, 30, 0.08);
    border-left: 4px solid var(--sacem-orange, #F28B1E);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
}

.sacem-contact-form-section__admin-warning p {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-sm);
    line-height: 1.6;
    color: var(--sacem-text-primary, #1f1f1f);
    margin: 0 0 0.5rem;
}

.sacem-contact-form-section__admin-warning p:last-child {
    margin-bottom: 0;
    font-size: var(--sacem-fs-sm);
    color: var(--sacem-text-secondary, #4a4a4a);
}

.sacem-contact-form-section__admin-warning code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.875em;
}

/* ============================================================
   Overrides Contact Form 7 — matche la charte SACEM PF
   ----
   CF7 injecte un markup standard. On override .wpcf7-form,
   .wpcf7-form-control (inputs/textarea/select), .wpcf7-list-item
   (acceptance checkbox), .wpcf7-submit, .wpcf7-response-output.
   Scope CSS limité au container .sacem-contact-form-section
   pour ne pas impacter d'autres formulaires CF7 ailleurs sur le
   site (s'il y en a un jour).
   ============================================================ */

.sacem-contact-form-section .sacem-form__field {
    margin: 0 0 1.25rem;
}

.sacem-contact-form-section .sacem-form__field label {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-sm);
    color: var(--sacem-text-primary, #1f1f1f);
    margin-bottom: 0.5rem;
}

.sacem-contact-form-section .sacem-form__field label [aria-hidden] {
    color: var(--sacem-orange, #F28B1E);
    margin-left: 0.15em;
}

/* Inputs / textarea / select — pattern unifié */
.sacem-contact-form-section input[type="text"].wpcf7-form-control,
.sacem-contact-form-section input[type="email"].wpcf7-form-control,
.sacem-contact-form-section textarea.wpcf7-form-control,
.sacem-contact-form-section select.wpcf7-form-control {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: var(--sacem-fs-body);
    line-height: 1.5;
    color: var(--sacem-text-primary, #1f1f1f);
    background-color: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sacem-contact-form-section input[type="text"].wpcf7-form-control:focus,
.sacem-contact-form-section input[type="email"].wpcf7-form-control:focus,
.sacem-contact-form-section textarea.wpcf7-form-control:focus,
.sacem-contact-form-section select.wpcf7-form-control:focus {
    outline: none;
    border-color: var(--sacem-violet, #6B1F7C);
    box-shadow: 0 0 0 3px rgba(107, 31, 124, 0.12);
}

.sacem-contact-form-section textarea.wpcf7-form-control {
    resize: vertical;
    min-height: 140px;
}

/* Acceptance RGPD — checkbox + label inline */
.sacem-contact-form-section .sacem-form__field--rgpd .wpcf7-list-item {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.sacem-contact-form-section .sacem-form__field--rgpd .wpcf7-list-item label {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-weight: 400;
    font-size: var(--sacem-fs-meta);
    line-height: 1.5;
    margin: 0;
    cursor: pointer;
    color: var(--sacem-text-secondary, #4a4a4a);
}

.sacem-contact-form-section .sacem-form__field--rgpd input[type="checkbox"] {
    margin-top: 0.2em;
    accent-color: var(--sacem-violet, #6B1F7C);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sacem-contact-form-section .sacem-form__field--rgpd a {
    color: var(--sacem-violet, #6B1F7C);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Submit — calque le pattern .sacem-btn--primary directement sur
   l'élément <input type="submit"> généré par CF7, sans dépendre de
   classes utilitaires ajoutées au form-tag (l'éditeur du form en
   wp-admin n'a pas à les renseigner). */
.sacem-contact-form-section .sacem-form__submit-wrap {
    margin: 1.5rem 0 0;
    text-align: center;
}

.sacem-contact-form-section .wpcf7-submit,
.sacem-contact-form-section input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: calc(0.95rem + 2px) calc(1.85rem + 2px);
    border: 0;
    border-radius: 999px;
    background: var(--sacem-gradient-accent, linear-gradient(90deg, #B73B90 0%, #D64A6B 45%, #EF5A3B 75%, #F28B1E 100%));
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: var(--sacem-fs-sm);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(183, 59, 144, 0.28);
    transition: transform .25s, background .25s, color .25s, box-shadow .25s;
    -webkit-appearance: none;
    appearance: none;
}

.sacem-contact-form-section .wpcf7-submit:hover,
.sacem-contact-form-section input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(183, 59, 144, 0.4);
    color: #fff;
}

.sacem-contact-form-section .wpcf7-submit:focus-visible,
.sacem-contact-form-section input[type="submit"]:focus-visible {
    outline: 2px solid var(--sacem-violet, #6B1F7C);
    outline-offset: 3px;
}

.sacem-contact-form-section .wpcf7-submit:disabled,
.sacem-contact-form-section input[type="submit"]:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

/* Spinner CF7 (apparaît pendant l'envoi) — laissé à droite du libellé,
   couleur blanche pour rester lisible sur le gradient. */
.sacem-contact-form-section .wpcf7-spinner {
    background-color: rgba(255, 255, 255, 0.9);
    margin-left: 0.5rem;
}

/* Messages de réponse CF7 (succès / erreur) */
.sacem-contact-form-section .wpcf7-response-output {
    margin: 1.5rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: var(--sacem-fs-sm);
}

.sacem-contact-form-section .wpcf7 form.sent .wpcf7-response-output {
    border-left: 4px solid var(--sacem-violet, #6B1F7C);
    background-color: rgba(107, 31, 124, 0.05);
    color: var(--sacem-text-primary, #1f1f1f);
}

.sacem-contact-form-section .wpcf7 form.invalid .wpcf7-response-output,
.sacem-contact-form-section .wpcf7 form.unaccepted .wpcf7-response-output,
.sacem-contact-form-section .wpcf7 form.spam .wpcf7-response-output {
    border-left: 4px solid var(--sacem-orange, #F28B1E);
    background-color: rgba(242, 139, 30, 0.08);
    color: var(--sacem-text-primary, #1f1f1f);
}

/* Messages d'erreur par champ */
.sacem-contact-form-section .wpcf7-not-valid-tip {
    display: block;
    margin-top: 0.375rem;
    color: var(--sacem-orange, #F28B1E);
    font-size: var(--sacem-fs-meta);
    font-family: var(--font-body);
}

.sacem-contact-form-section .wpcf7-not-valid {
    border-color: var(--sacem-orange, #F28B1E) !important;
}

/* ============================================================
   Section 5 — MAP (Google Maps iframe embed) — C5
   ----
   Fond blanc (alternance respectée : Hero gradient → Coordonnées
   cream → Services blanc → Form cream → Map blanc). Container
   non-bleed, header eyebrow + H2 accent + lede, puis wrapper
   iframe avec border-radius + box-shadow + overflow:hidden pour
   clipper proprement la carte.

   Hauteur 450px desktop / 300px mobile via media query 768px.
   ============================================================ */

.sacem-contact-map {
    /* Fond porté par le système de dégradé progressif (ancrage bas, cf. bloc
       en fin de fichier). position:relative + overflow:hidden fournis par la
       classe partagée .sacem-section--hibiscus-br. */
    padding-block: clamp(3rem, 6vw, 5rem);
}

.sacem-contact-map__container {
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.sacem-contact-map__header {
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.sacem-contact-map__eyebrow {
    color: var(--sacem-violet, #6B1F7C);
    margin-bottom: 0.75rem;
}

.sacem-contact-map__title {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 1rem;
    color: var(--sacem-text-primary, #1f1f1f);
}

.sacem-contact-map__lede {
    max-width: 60ch;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: var(--sacem-fs-lede);
    line-height: 1.6;
    color: var(--sacem-text-secondary, #4a4a4a);
}

.sacem-contact-map__embed-wrap {
    position: relative;
    width: 100%;
    height: 450px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    background-color: var(--sacem-cream, #FAF6F2);
}

.sacem-contact-map__iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 768px) {
    .sacem-contact-map__embed-wrap {
        height: 300px;
        border-radius: 12px;
    }
}

/* ====== Habillage dégradés — fond progressif par section ======
   Pattern repris de page-missions.css / page-sacem-polynesie.css (« Système 1 »).
   --p-top / --p-bot = position de la section (0 = haut → 1 = bas). color-mix
   interpole entre les tokens d'ancrage charte --sacem-bg-grad-start (#fff) et
   --sacem-bg-grad-end (#efe7dd).

   RETOUCHE 4 — la Map SORT du dégradé continu : elle reçoit son PROPRE
   dégradé autonome blanc → beige (--p-top:0 → --p-bot:1), exactement comme
   la section « Documents » de page-sacem-polynesie.css (section qui se
   démarque). Les 3 sections restantes (Coordonnées → Services → Form)
   couvrent donc à présent TOUT l'intervalle 0 → 1 et s'achèvent proprement
   sur le Formulaire (--p-bot:1) : le bloc continu se termine sur sa teinte
   beige naturelle, sans coupure à mi-dégradé. La Map redémarre ensuite au
   blanc → démarcation nette assumée (le but de la retouche : la Map se
   distingue), identique au précédent SP « Documents ».
   Recalage : 3 segments contigus de 1/3 chacun (0 → 0.33 → 0.67 → 1).
   Hero (gradient foncé) et overrides CF7 internes inchangés. ====== */
.sacem-contact-coordonnees   { --p-top: 0;    --p-bot: 0.33; background: linear-gradient(180deg, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-top) * 100%)) 0%, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-bot) * 100%)) 100%); }
.sacem-contact-services      { --p-top: 0.33; --p-bot: 0.67; background: linear-gradient(180deg, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-top) * 100%)) 0%, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-bot) * 100%)) 100%); }
.sacem-contact-form-section  { --p-top: 0.67; --p-bot: 1;    background: linear-gradient(180deg, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-top) * 100%)) 0%, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-bot) * 100%)) 100%); }
/* Map — dégradé AUTONOME blanc → beige (se démarque, cf. SP Documents). */
.sacem-contact-map           { --p-top: 0;    --p-bot: 1;    background: linear-gradient(180deg, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-top) * 100%)) 0%, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-bot) * 100%)) 100%); }