/* ══════════════════════════════════════════════════════════════
   PUNCH — Styles formulaires (soumission + édition)
   Design "light" : champs souslignés, hero blanc, sections épurées.
   S'applique à toute page utilisant un <form class="acf-form">.
   ══════════════════════════════════════════════════════════════ */

/* Variables locales — basées sur les variables globales du child */
.form {
    --ligne   : rgba(11, 11, 11, 0.14);
    --pad    : clamp(24px, 5vw, 64px);
    --gris-label  : rgba(11, 11, 11, 0.55);
    --gris-texte  : rgba(11, 11, 11, 0.7);
    --gris-placeholder  : rgba(11, 11, 11, 0.3);
    background    : var(--punch-blanc);
    color         : var(--punch-noir);
    font-family   : var(--punch-font-base);
}


/* ══════════════════════════════════════════════════════════════
   HERO DU FORMULAIRE
   ══════════════════════════════════════════════════════════════ */
/* Wrapper rouge : bandeau hero brutaliste (page-formulaire + page-edition + page-contact)
   Structure : <section.entete.bg-punch-rouge> > <div.container-fluid> > contenu
   - .entete : padding vertical + position relative (pour le watermark)
   - .container-fluid : padding horizontal géré par var(--pad) (custom override) */
.form .entete {
    background    : var(--punch-rouge);
    color         : var(--punch-blanc);
    padding       : 80px 0 72px;
    border-bottom : 0;
    position      : relative;
    overflow      : hidden;
}
.form .entete > .container-fluid {
    padding-left  : var(--pad);
    padding-right : var(--pad);
    max-width     : 1600px;
}

/* Styles génériques (utilisés AUSSI hors .entete : ex. page-acces.php sur fond blanc) */
.form .legende {
    display        : inline-flex;
    align-items    : center;
    gap            : 14px;
    font-size      : 12px;
    letter-spacing : 0.22em;
    font-weight    : 700;
    text-transform : uppercase;
    color          : var(--punch-rouge);
    margin         : 0 0 24px;
    position       : relative;
    z-index        : 2;
}
.form .legende::after {
    content    : '';
    display    : inline-block;
    width      : 60px;
    height     : 1.5px;
    background : var(--punch-rouge);
}
.form .titre {
    font-family    : var(--punch-font-display);
    font-size      : clamp(48px, 8vw, 104px);
    line-height    : 0.92;
    letter-spacing : -0.01em;
    text-transform : uppercase;
    margin         : 0 0 24px;
    color          : var(--punch-noir);
    font-weight    : 400;
    position       : relative;
    z-index        : 2;
}
.form .titre .red {
    color: var(--punch-rouge);
}
.form .accroche {
    font-size  : 15px;
    line-height: 1.6;
    max-width  : 64ch;
    margin     : 0;
    color      : var(--gris-texte);
    position   : relative;
    z-index    : 2;
}
.form .accroche p {
    margin: 0 0 8px;
    color : var(--gris-texte);
}

/* Surcharges INSIDE .entete : tout en blanc, accent noir encadré */
.form .entete .legende,
.form .entete .legende::after {
    color      : var(--punch-blanc);
    background : var(--punch-blanc);
}
.form .entete .legende {
    background: transparent;
}
.form .entete .titre {
    color: var(--punch-blanc);
}
.form .entete .titre .red {
    color: var(--punch-noir);
}
.form .entete .accroche,
.form .entete .accroche p {
    color: var(--punch-blanc);
}
.form .entete .accroche a {
    color           : var(--punch-blanc);
    text-decoration : underline;
}


/* ══════════════════════════════════════════════════════════════
   LAYOUT 2 COLONNES — form (gauche, blanc) + aside (droite, rouge)
   Pattern unifié avec page-acces (.pwd-page → .form-page)
   ══════════════════════════════════════════════════════════════ */
.form .form-page {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    min-height           : calc(100vh - 320px);
    margin               : 0;
    padding              : 0;
    max-width            : none;
}

@media (max-width: 991.98px) {
    .form .form-page {
        grid-template-columns: 1fr;
    }
}

/* ── Colonne gauche : le formulaire (fond blanc + contour rouge) ─ */
.form .form-left {
    padding       : clamp(40px, 6vw, 80px) clamp(24px, 5vw, 80px);
    background    : var(--punch-blanc);
    color         : var(--punch-noir);
    display       : flex;
    flex-direction: column;
    border        : 16px solid var(--punch-rouge);
    border-right  : 0; /* la colonne droite rouge fait office de bord droit */
}

@media (max-width: 991.98px) {
    .form .form-left {
        border-right  : 16px solid var(--punch-rouge);
        border-bottom : 0; /* la colonne droite (qui passe en dessous) fait le bas */
    }
}

/* ── Colonne droite : aside info (fond rouge) ─────────────── */
.form .form-right {
    position    : relative;
    overflow    : hidden;
    background  : var(--punch-rouge);
    color       : var(--punch-blanc);
    padding     : clamp(40px, 6vw, 80px) clamp(24px, 5vw, 80px);
    display     : flex;
    align-items : flex-start;
}

/* Watermark "P" Aldo en fond */
.form .form-right__watermark {
    position      : absolute;
    top           : -8%;
    right         : -4%;
    font-family   : var(--punch-font-display);
    font-size     : clamp(20rem, 35vw, 36rem);
    line-height   : 0.85;
    color         : rgba(255, 255, 255, 0.10);
    user-select   : none;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    margin        : 0;
}

/* ── Contenu aside (titre + étapes / récap + aide) ────────── */
.form .form__info {
    position : relative;
    z-index  : 1;
    max-width: 460px;
}

.form .form__info-title {
    font-family   : var(--punch-font-display);
    font-size     : clamp(2rem, 3.2vw + 1rem, 3.6rem);
    line-height   : 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color         : var(--punch-blanc);
    margin        : 0 0 32px;
}

.form .form__info p,
.form .form__info-help {
    color    : var(--punch-blanc);
    font-size: 14px;
    line-height: 1.6;
    margin   : 0 0 12px;
}

/* ── Liste 4 étapes ──────────────────────────────────────── */
.form .form__steps {
    list-style    : none;
    margin        : 0 0 32px;
    padding       : 0;
    display       : flex;
    flex-direction: column;
    gap           : 20px;
}

.form .form__steps li {
    display       : flex;
    gap           : 16px;
    align-items   : flex-start;
    padding-bottom: 20px;
    border-bottom : 1px solid rgba(255, 255, 255, 0.25);
    margin        : 0;
    list-style    : none;
    opacity       : 0.85;
    transition    : opacity 0.2s;
}

.form .form__steps li:last-child {
    border-bottom : 0;
    padding-bottom: 0;
}

.form .form__steps li.is-current {
    opacity: 1;
}

.form .form__steps li.is-done .form__step-num {
    background: var(--punch-blanc);
    color     : var(--punch-rouge);
}

.form .form__step-num {
    flex-shrink   : 0;
    font-family   : var(--punch-font-display);
    font-size     : 1.5rem;
    line-height   : 1;
    color         : var(--punch-blanc);
    background    : transparent;
    border        : 2px solid var(--punch-blanc);
    border-radius : 0;
    width         : 44px;
    height        : 44px;
    display       : inline-flex;
    align-items   : center;
    justify-content: center;
}

.form .form__step-body {
    flex : 1;
    color: var(--punch-blanc);
}

.form .form__step-body strong {
    display      : block;
    font-family  : var(--punch-font-base);
    font-size    : 1rem;
    font-weight  : 700;
    line-height  : 1.3;
    margin-bottom: 4px;
    color        : var(--punch-blanc);
}

.form .form__step-body small {
    display    : block;
    font-family: var(--punch-font-base);
    font-size  : 13px;
    line-height: 1.5;
    color      : rgba(255, 255, 255, 0.85);
}

/* ── Récap (page-edition) ────────────────────────────────── */
.form .form__recap {
    margin : 0 0 24px;
    padding: 0 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.form .form__recap dt {
    font-size      : 11px;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : rgba(255, 255, 255, 0.75);
    margin         : 0 0 4px;
    font-weight    : 700;
}

.form .form__recap dd {
    margin     : 0 0 16px;
    font-size  : 16px;
    font-weight: 600;
    color      : var(--punch-blanc);
}

.form .form__recap dd:last-child {
    margin-bottom: 0;
}

/* ── Lien aide en bas de l'aside ─────────────────────────── */
.form .form__aide {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.form .form__aide p {
    margin: 0 0 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.form .form__aide a {
    color          : var(--punch-blanc);
    text-decoration: underline;
    font-weight    : 700;
    font-size      : 14px;
    word-break     : break-word;
}

/* ── Notice succès (page-edition après save) ─────────────── */
.form .acf-notice-success {
    background : rgba(46, 125, 50, 0.06);
    border     : 1px solid #2e7d32;
    color      : #1b5e20;
    padding    : 16px 20px;
    margin     : 0 0 24px;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   PAGE CONTACT — coordonnées aside + fallback message
   ══════════════════════════════════════════════════════════════ */
.form .contact-coords {
    margin       : 0 0 28px;
    padding      : 0 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.form .contact-coords:last-of-type {
    border-bottom : 0;
    padding-bottom: 0;
    margin-bottom : 28px;
}

.form .contact-coords__label {
    font-size      : 11px;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : rgba(255, 255, 255, 0.75);
    margin         : 0 0 8px;
    font-weight    : 700;
}

.form .contact-coords__value {
    margin     : 0;
    font-size  : 15px;
    line-height: 1.5;
    color      : var(--punch-blanc);
}

.form .contact-coords__value strong {
    font-weight: 700;
    color      : var(--punch-blanc);
}

.form .contact-coords__value a {
    color          : var(--punch-blanc);
    text-decoration: underline;
    word-break     : break-word;
}

.form .contact-empty {
    padding      : 32px;
    background   : rgba(11, 11, 11, 0.04);
    border       : 1px dashed rgba(11, 11, 11, 0.25);
    border-radius: 0;
    color        : var(--gris-texte);
    font-size    : 15px;
    line-height  : 1.6;
}

.form .contact-empty p {
    margin: 0 0 12px;
}

.form .contact-empty code {
    background : rgba(11, 11, 11, 0.08);
    padding    : 2px 6px;
    font-family: monospace;
    font-size  : 13px;
}

/* ══════════════════════════════════════════════════════════════
   CF7 — styles cohérents avec les autres formulaires
   ══════════════════════════════════════════════════════════════ */
.form .wpcf7 form {
    margin: 0;
}

.form .wpcf7-form-control-wrap {
    display: block;
    margin : 0;
}

.form .wpcf7 label {
    display       : block;
    font-size     : 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight   : 700;
    color         : rgba(11, 11, 11, 0.82);
    margin        : 0 0 8px;
}

.form .wpcf7-text,
.form .wpcf7-email,
.form .wpcf7-tel,
.form .wpcf7-url,
.form .wpcf7-textarea,
.form .wpcf7-select {
    width        : 100%;
    padding      : 12px;
    background   : rgba(151, 139, 139, 0.07);
    color        : var(--punch-noir);
    border       : 0;
    border-bottom: 3px solid var(--punch-rouge);
    border-radius: 0;
    font         : 400 16px/1.4 var(--punch-font-base);
    box-sizing   : border-box;
}

.form .wpcf7-textarea {
    min-height: 160px;
    resize    : vertical;
}

.form .wpcf7-text:focus,
.form .wpcf7-email:focus,
.form .wpcf7-tel:focus,
.form .wpcf7-url:focus,
.form .wpcf7-textarea:focus,
.form .wpcf7-select:focus {
    outline   : 0;
    background: rgba(151, 139, 139, 0.18);
}

.form .wpcf7 p {
    margin: 0 0 20px;
}

.form .wpcf7-submit {
    display         : inline-block;
    padding         : 14px 32px;
    background      : var(--punch-rouge);
    color           : var(--punch-blanc);
    border          : 2px solid var(--punch-rouge);
    font-family     : var(--punch-font-base);
    font-size       : 14px;
    font-weight     : 700;
    letter-spacing  : 0.08em;
    text-transform  : uppercase;
    cursor          : pointer;
    transition      : transform 0.2s, box-shadow 0.2s;
}

.form .wpcf7-submit:hover {
    transform : translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 var(--punch-noir);
}

.form .wpcf7-response-output {
    margin     : 24px 0 0;
    padding    : 14px 18px;
    border     : 2px solid var(--punch-noir);
    font-weight: 600;
}

.form .wpcf7-not-valid-tip {
    color    : var(--punch-rouge);
    font-size: 13px;
    margin   : 4px 0 0;
}

/* ── Fallback : ancien wrapper .corps (si encore utilisé) ── */
.form .corps {
    max-width: 880px;
    margin   : 0 auto;
    padding  : 56px var(--pad) 0;
}

/* Le wrapper du <form class="acf-form"> */
.form .acf-form,
.form .acf-form .acf-fields {
    background: transparent;
    border    : 0;
    padding   : 0;
    margin    : 0;
    box-shadow: none;
}


/* ══════════════════════════════════════════════════════════════
   CHAMPS ACF — Champs soulignés à l'ouverture (style "light")
   ══════════════════════════════════════════════════════════════ */
.form .acf-field {
    border     : 0 !important;
    padding    : 0 !important;
    margin     : 0 0 24px !important;
    background : transparent !important;
}

/* Clearfix sur le wrapper des champs (ACF utilise des floats) */
.form .acf-fields::after {
    content: '';
    display: table;
    clear  : both;
}

/* Champs en largeur partielle (data-width sur 30/40/50/60/70) :
   on ajoute un padding-right pour créer le gap entre colonnes.
   box-sizing border-box pour que la largeur inline reste correcte. */
.form .acf-field[data-width] {
    box-sizing   : border-box !important;
    padding-right: 40px !important;
}
.form .acf-field[data-width="100"] {
    padding-right: 0 !important;
}
/* Le DERNIER champ d'une paire (50/50, 60/40, etc.) ne doit pas avoir
   de padding-right (sinon espace inutile à droite avant l'aside).
   Détection par sibling combinator : un champ partiel précédé d'un autre. */
.form .acf-field[data-width="50"] + .acf-field[data-width="50"],
.form .acf-field[data-width="60"] + .acf-field[data-width="40"],
.form .acf-field[data-width="40"] + .acf-field[data-width="60"],
.form .acf-field[data-width="70"] + .acf-field[data-width="30"],
.form .acf-field[data-width="30"] + .acf-field[data-width="70"],
.form .acf-field[data-width="33"] + .acf-field[data-width="33"] + .acf-field[data-width="33"] {
    padding-right: 0 !important;
}

/* Label */
.form .acf-label {
    margin-bottom: 6px !important;
    padding      : 0 !important;
}
.form .acf-label label {
    font-family    : var(--punch-font-base);
    font-size      : 12px;
    letter-spacing : 0.14em;
    font-weight    : 600;
    text-transform : uppercase;
    color          : rgba(11, 11, 11, 0.82);
    line-height    : 1.4;
    margin         : 0;
    display        : block;
}
.form .acf-label .acf-required {
    color       : var(--punch-rouge);
    margin-left : 3px;
}

/* Texte d'aide (instructions ACF) */
.form .acf-label p,
.form .acf-input > .description,
.form .acf-field .description {
    font-size  : 11.5px;
    color      : rgba(11, 11, 11, 0.5) !important;
    margin     : 4px 0 0 !important;
    line-height: 1.5;
}


/* ══════════════════════════════════════════════════════════════
   INPUTS / TEXTAREA / SELECT — Ligne fine sous le texte
   ══════════════════════════════════════════════════════════════ */
.form .acf-input input[type="text"],
.form .acf-input input[type="email"],
.form .acf-input input[type="url"],
.form .acf-input input[type="tel"],
.form .acf-input input[type="number"],
.form .acf-input input[type="date"],
.form .acf-input input[type="time"],
.form .acf-input input[type="password"],
.form .acf-input textarea,
.form .acf-input select,
.form .acf-input .select2-selection {
    width            : 100% !important;
    padding          : 12px !important;
    background       : #978b8b12 !important;  /* gris très léger */
    color            : var(--punch-noir) !important;
    border           : 0 !important;
    border-bottom    : 3px solid var(--punch-rouge) !important;
    border-radius    : 0 !important;
    font             : 400 16px/1.4 var(--punch-font-base) !important;
    outline          : none !important;
    transition       : border-color .15s, background .15s;
    box-shadow       : none !important;
    min-height       : 0 !important;
    height           : auto !important;
    box-sizing       : border-box !important;
}
.form .acf-input input:focus,
.form .acf-input textarea:focus,
.form .acf-input select:focus {
    background: rgba(151, 139, 139, 0.18) !important;
}
.form .acf-input input::placeholder,
.form .acf-input textarea::placeholder {
    color: rgba(11, 11, 11, 0.3);
}
.form .acf-input textarea {
    resize     : vertical !important;
    min-height : 100px !important;
    line-height: 1.5 !important;
}

/* Select natif — chevron en CSS */
.form .acf-input select {
    appearance         : none;
    -webkit-appearance : none;
    -moz-appearance    : none;
    padding-right      : 24px !important;
    cursor             : pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--punch-noir) 50%),
        linear-gradient(135deg, var(--punch-noir) 50%, transparent 50%) !important;
    background-position: calc(100% - 4px) 19px, calc(100% - 0px) 19px !important;
    background-size    : 5px 5px !important;
    background-repeat  : no-repeat !important;
}

/* Select2 (ACF dropdown stylé) */
.form .select2-container .select2-selection--single,
.form .select2-container .select2-selection--multiple {
    background    : transparent !important;
    border        : 0 !important;
    border-bottom : 1px solid rgba(11, 11, 11, 0.25) !important;
    border-radius : 0 !important;
    min-height    : 44px !important;
}
.form .select2-container--focus .select2-selection--single,
.form .select2-container--focus .select2-selection--multiple,
.form .select2-container--open .select2-selection--single,
.form .select2-container--open .select2-selection--multiple {
    border-bottom-color: var(--punch-rouge) !important;
    border-bottom-width: 2px !important;
}
.form .select2-container .select2-selection__rendered {
    color       : var(--punch-noir) !important;
    line-height : 44px !important;
    padding     : 0 !important;
}
.form .select2-container .select2-selection__placeholder {
    color: rgba(11, 11, 11, 0.3) !important;
}
.form .select2-container .select2-selection__arrow {
    top: 12px !important;
}
.form .select2-dropdown {
    border-color: rgba(11, 11, 11, 0.15);
    border-radius: 0;
}
.form .select2-results__option--highlighted {
    background-color: var(--punch-rouge) !important;
    color           : var(--punch-blanc) !important;
}


/* ══════════════════════════════════════════════════════════════
   TITRE WP (post_title) — quand on active 'post_title' => true
   ACF génère .acf-field-_post_title avec un input texte simple
   ══════════════════════════════════════════════════════════════ */
.form .acf-field._post_title input,
.form .acf-field[data-key="_post_title"] input {
    /* hérite des styles inputs (déjà défini plus haut) */
}


/* ══════════════════════════════════════════════════════════════
   RADIO / CHECKBOX — Pills (incluant champs taxonomy en checkbox)
   ══════════════════════════════════════════════════════════════ */

/* Wrapper ACF des checklists taxonomy — retire le filet gris par défaut */
.form .categorychecklist-holder {
    border    : 0;
    background: transparent;
    padding   : 0;
    max-height: none;
    overflow  : visible;
}

.form .acf-radio-list,
.form .acf-checkbox-list {
    display   : flex;
    flex-wrap : wrap;
    gap       : 6px;
    margin    : 0;
    padding   : 0;
}
.form .acf-radio-list li,
.form .acf-checkbox-list li {
    margin: 0;
}
.form .acf-radio-list label,
.form .acf-checkbox-list label {
    display       : inline-block;
    padding       : 8px 14px;
    border        : 1px solid rgba(11, 11, 11, 0.2);
    background    : var(--punch-blanc);
    color         : var(--punch-noir);
    font-size     : 12.5px;
    letter-spacing: 0.04em;
    font-weight   : 500;
    cursor        : pointer;
    border-radius : 999px;
    transition    : all .12s;
    line-height   : 1.4;
}
.form .acf-radio-list label:hover,
.form .acf-checkbox-list label:hover {
    border-color: var(--punch-rouge);
    color       : var(--punch-rouge);
}
.form .acf-radio-list input[type="radio"],
.form .acf-checkbox-list input[type="checkbox"] {
    position : absolute;
    opacity  : 0;
    width    : 1px;
    height   : 1px;
    pointer-events: none;
}
.form .acf-radio-list li:has(input:checked) label,
.form .acf-checkbox-list li:has(input:checked) label {
    background  : var(--punch-rouge);
    color       : var(--punch-blanc);
    border-color: var(--punch-rouge);
}


/* ══════════════════════════════════════════════════════════════
   IMAGE / FILE UPLOAD — Drop zone
   ══════════════════════════════════════════════════════════════ */
.form .acf-image-uploader,
.form .acf-file-uploader {
    border        : 1px dashed rgba(11, 11, 11, 0.3) !important;
    padding       : 28px !important;
    text-align    : center;
    background    : rgba(11, 11, 11, 0.02) !important;
    transition    : all .15s;
    border-radius : 0 !important;
    box-shadow    : none !important;
}
.form .acf-image-uploader:hover,
.form .acf-file-uploader:hover {
    border-color: var(--punch-rouge) !important;
    background  : rgba(235, 36, 45, 0.03) !important;
}
.form .acf-image-uploader p,
.form .acf-file-uploader p {
    font-size : 14px;
    font-weight: 600;
    margin    : 0 0 4px;
    color     : var(--punch-noir);
}
.form .acf-image-uploader .acf-button,
.form .acf-file-uploader .acf-button,
.form .acf-button {
    background    : var(--punch-rouge) !important;
    color         : var(--punch-blanc) !important;
    border        : 2px solid var(--punch-rouge) !important;
    padding       : 10px 18px !important;
    font-size     : 12px !important;
    letter-spacing: 0.14em;
    font-weight   : 600;
    text-transform: uppercase;
    border-radius : 0 !important;
    cursor        : pointer;
    transition    : all .15s;
    box-shadow    : none !important;
    text-shadow   : none !important;
    height        : auto !important;
    line-height   : 1.4 !important;
}
.form .acf-button:hover {
    background: var(--punch-blanc) !important;
    color     : var(--punch-rouge) !important;
}


/* ══════════════════════════════════════════════════════════════
   BOUTON SUBMIT — Primaire (plein)
   ══════════════════════════════════════════════════════════════ */
.form .acf-form-submit {
    padding-top: 32px;
    margin-top : 32px;
    border-top : 1px solid var(--ligne);
    display    : flex;
    gap        : 12px;
    align-items: center;
    flex-wrap  : wrap;
    justify-content: flex-end;
}

/* Bouton secondaire — outline (à côté du submit principal) */
.form .acf-form-submit .btn-secondaire {
    background     : transparent;
    color          : var(--punch-noir);
    border         : 2px solid var(--punch-noir);
    border-radius  : 0;
    padding        : 14px 28px;
    font-family    : var(--punch-font-display);
    font-size      : 14px;
    letter-spacing : 0.14em;
    font-weight    : 600;
    text-transform : uppercase;
    text-decoration: none;
    cursor         : pointer;
    transition     : all .15s;
    line-height    : 1.2;
}
.form .acf-form-submit .btn-secondaire:hover {
    background: var(--punch-noir);
    color     : var(--punch-blanc);
}
.form .acf-form-submit input[type="submit"],
.form input[type="submit"].button-primary {
    background     : var(--punch-rouge) !important;
    color          : var(--punch-blanc) !important;
    border         : 2px solid var(--punch-rouge) !important;
    border-radius  : 0 !important;
    padding        : 14px 28px !important;
    font-family    : var(--punch-font-display) !important;
    font-size      : 14px !important;
    letter-spacing : 0.14em !important;
    font-weight    : 600 !important;
    text-transform : uppercase !important;
    cursor         : pointer;
    transition     : all .15s;
    box-shadow     : none !important;
    text-shadow    : none !important;
    height         : auto !important;
    line-height    : 1.2 !important;
}
.form .acf-form-submit input[type="submit"]:hover {
    background: var(--punch-noir) !important;
    border-color: var(--punch-noir) !important;
}


/* ══════════════════════════════════════════════════════════════
   MESSAGES (succès / erreur)
   ══════════════════════════════════════════════════════════════ */
.form .acf-notice,
.form .acf-error-message {
    background    : rgba(235, 36, 45, 0.06) !important;
    border        : 1px solid var(--punch-rouge) !important;
    border-radius : 0 !important;
    color         : var(--punch-rouge) !important;
    padding       : 16px 20px !important;
    font-size     : 13px;
    margin-bottom : 24px;
}


/* ══════════════════════════════════════════════════════════════
   COMPTEUR DE CARACTÈRES (si présent)
   ══════════════════════════════════════════════════════════════ */
.form .acf-input .maxlength-counter,
.form .compteur {
    font-size     : 11px;
    color         : rgba(11, 11, 11, 0.5);
    text-align    : right;
    margin-top    : 4px;
    letter-spacing: 0.06em;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .form .titre { font-size: clamp(32px, 9vw, 56px); }
    .form .acf-field.acf-field-50 {
        width        : 100% !important;
        margin-right : 0 !important;
        display      : block;
    }
    .form .corps { padding: 40px var(--pad) 0; }
    .form .entete { padding: 60px var(--pad) 40px; }
}


/* ══════════════════════════════════════════════════════════════
   PAGE FORMULAIRE — Étape 1 (sélection / création de structure)
   Compact, sans whitespace excessif.
   ══════════════════════════════════════════════════════════════ */
.form .punch-event-form-wrapper {
    max-width: 720px;
    margin   : 0;
}

.form .form-step-indicator {
    display       : inline-flex;
    align-items   : center;
    gap           : 12px;
    font-size     : 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color         : var(--gris-label);
    margin        : 0 0 24px;
    font-weight   : 700;
}
.form .form-step-indicator__current {
    color: var(--punch-rouge);
}

.form .step1-existing h3,
.form .step1-new h3 {
    font-family   : var(--punch-font-display);
    color         : var(--punch-rouge);
    font-size     : clamp(24px, 3vw, 38px);
    line-height   : 1;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin        : 0 0 16px;
}

.form .step1-existing .fld {
    margin: 0 0 16px;
}

.form .step1-existing .pwd__actions {
    margin: 0;
}

.form .step1-existing .punch-btn {
    background      : var(--punch-rouge);
    color           : var(--punch-blanc);
    border          : 2px solid var(--punch-rouge);
    padding         : 12px 28px;
    font-family     : var(--punch-font-base);
    font-size       : 14px;
    font-weight     : 700;
    letter-spacing  : 0.08em;
    text-transform  : uppercase;
    cursor          : pointer;
    transition      : transform 0.2s, box-shadow 0.2s;
}
.form .step1-existing .punch-btn:hover {
    transform : translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 var(--punch-noir);
}

/* Toggle "Ma structure n'est pas dans la liste — je la crée" */
.form .step1-toggle-wrap {
    margin   : 24px 0 0;
    font-size: 14px;
    color    : var(--gris-texte);
}
.form .step1-toggle-btn {
    background : transparent;
    border     : 0;
    border-bottom: 2px solid var(--punch-rouge);
    color      : var(--punch-rouge);
    font-family: inherit;
    font-size  : 14px;
    font-weight: 700;
    padding    : 2px 0;
    cursor     : pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.form .step1-toggle-btn:hover {
    color           : var(--punch-noir);
    border-bottom-color: var(--punch-noir);
}

/* Section création — séparée visuellement quand révélée */
.form .step1-new {
    margin-top : 48px;
    padding-top: 32px;
    border-top : 1px solid rgba(11, 11, 11, 0.12);
}
.form .step1-new[hidden] {
    display: none;
}
.form .step1-new .punch-form-intro {
    margin    : 0 0 24px;
    font-size : 14px;
    color     : var(--gris-texte);
    line-height: 1.5;
}
.form .step1-empty-hint {
    margin   : 0 0 24px;
    font-size: 14px;
    color    : var(--gris-texte);
}


/* ══════════════════════════════════════════════════════════════
   PAGE 404 — wrapper d'actions sous le bandeau .entete
   Les boutons utilisent .punch-btn (classes génériques plus bas) pour
   rester cohérents avec le formulaire CF7 de page-contact.
   ══════════════════════════════════════════════════════════════ */
.punch-page-404 .pb404-actions {
    background : var(--punch-blanc);
    padding    : 56px var(--pad) 96px;
    border-top : 0;
}
.punch-page-404 .pb404-actions__inner {
    max-width     : 720px;
    margin        : 0 auto;
    display       : flex;
    flex-direction: column;
    gap           : 14px;
}

@media (max-width: 575.98px) {
    .punch-page-404 .pb404-actions { padding: 32px 18px 64px; }
}


/* ══════════════════════════════════════════════════════════════
   CLASSES GÉNÉRIQUES — réutilisables sur toute page chargeant
   formulaire.css (carte, 404, contact, formulaire, etc.).
   Style aligné sur le formulaire CF7 de page-contact :
     - .punch-btn         = .wpcf7-submit (CTA principal rouge)
     - .punch-btn--ghost  = variante outline (action secondaire)
     - .punch-input       = .wpcf7-text   (input fond gris pâle, border-bottom rouge)
   ══════════════════════════════════════════════════════════════ */

.punch-btn {
    display       : inline-block;
    padding       : 14px 32px;
    background    : var(--punch-rouge);
    color         : var(--punch-blanc);
    border        : 2px solid var(--punch-rouge);
    font-family   : var(--punch-font-base);
    font-size     : 14px;
    font-weight   : 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor        : pointer;
    text-decoration: none;
    text-align    : center;
    line-height   : 1.2;
    transition    : transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
    box-sizing    : border-box;
}
.punch-btn:hover,
.punch-btn:focus-visible {
    transform : translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 var(--punch-noir);
    color     : var(--punch-blanc);
    outline   : 0;
}

.punch-btn--ghost {
    background  : transparent;
    color       : var(--punch-noir);
    border-color: var(--punch-noir);
}
.punch-btn--ghost:hover,
.punch-btn--ghost:focus-visible {
    background  : var(--punch-rouge);
    color       : var(--punch-blanc);
    border-color: var(--punch-rouge);
}

/* Variante full-width pour mobile / colonnes étroites */
.punch-btn--block {
    display: block;
    width  : 100%;
}

/* Input texte aligné sur le style CF7 */
.punch-input {
    width        : 100%;
    padding      : 12px;
    background   : rgba(151, 139, 139, 0.07);
    color        : var(--punch-noir);
    border       : 0;
    border-bottom: 3px solid var(--punch-rouge);
    border-radius: 0;
    font         : 400 16px/1.4 var(--punch-font-base);
    box-sizing   : border-box;
    margin       : 0;
    outline      : 0;
    transition   : background 0.15s;
}
.punch-input:focus,
.punch-input:focus-visible {
    background: rgba(151, 139, 139, 0.18);
    outline   : 0;
}
.punch-input::placeholder {
    color: rgba(11, 11, 11, 0.3);
}