/*
 * Forms - styles des formulaires de contact, parrainage, terrain, candidature.
 *
 * Markup minimaliste : <p class="mam-form__field"><label><input/textarea></p>.
 * Pas de framework, juste des classes BEM dediees.
 */

.mam-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    background: var(--c-paper-pure);
    padding: var(--sp-5) var(--sp-5);
    border: 1px solid var(--color-hairline);
}

/* Formulaires en pattern (parrainage, contact) : le wpautop applique en aval
   injecte des <br> entre les <label> (sauts de ligne du markup) -> dans une
   .mam-form__row--two ces <br> deviennent des items de grille parasites qui
   cassent l'appariement (CP et Ville empilees au lieu d'etre cote a cote).
   On neutralise tout <br> / <p> vide dans un formulaire (jamais signifiant). */
.mam-form br,
.mam-form p:empty {
    display: none;
}

.mam-form__row {
    display: grid;
    gap: var(--sp-4);
}

.mam-form__row--two {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 600px) {
    .mam-form__row--two { grid-template-columns: 1fr; }
}

.mam-form__field {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.mam-form__field label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    color: var(--color-text-muted);
}

.mam-form__field label span[aria-hidden] {
    color: var(--color-accent);
}

.mam-form__field input[type="text"],
.mam-form__field input[type="email"],
.mam-form__field input[type="tel"],
.mam-form__field input[type="number"],
.mam-form__field input[type="url"],
.mam-form__field select,
.mam-form__field textarea {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-hairline);
    background: var(--c-paper-pure);
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--fs-md);
    line-height: 1.4;
    transition: border-color var(--dur-hover) var(--ease-editorial);
}

.mam-form__field textarea {
    resize: vertical;
    min-height: 120px;
}

.mam-form__field input:focus,
.mam-form__field select:focus,
.mam-form__field textarea:focus,
.mam-form__field input:focus-visible,
.mam-form__field select:focus-visible,
.mam-form__field textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-accent);
}

.mam-form__field input[aria-invalid="true"],
.mam-form__field select[aria-invalid="true"],
.mam-form__field textarea[aria-invalid="true"] {
    border-color: #c73e1d;
}

.mam-form__field-error {
    color: #c73e1d;
    font-size: var(--fs-xs);
    text-transform: none;      /* sinon herite du uppercase des libelles */
    letter-spacing: normal;
    font-weight: var(--fw-regular);
    margin: 4px 0 0;
}

/* Les formulaires de PAGE utilisent .mam-form__label (pas .mam-form__field) :
   on etend le style d'erreur + on gere le consentement invalide (2026-07). */
.mam-form__label input[aria-invalid="true"],
.mam-form__label select[aria-invalid="true"],
.mam-form__label textarea[aria-invalid="true"] {
    border-color: #c73e1d;
    outline: 1px solid #c73e1d;
}
.mam-form__consent input[type="checkbox"][aria-invalid="true"] {
    outline: 2px solid #c73e1d;
    outline-offset: 2px;
}

/* Marqueur "*" des champs obligatoires + legende. */
.mam-form__req {
    color: var(--color-accent);
    font-weight: var(--fw-semibold);
}
.mam-form__req-note {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.mam-form__req-note span {
    color: var(--color-accent);
}

.mam-form__rgpd {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.mam-form__rgpd label {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    cursor: pointer;
}

.mam-form__rgpd input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 4px;
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.mam-form__rgpd a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.mam-form__rgpd a:hover {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
}

.mam-form__submit {
    margin: var(--sp-2) 0 0;
    display: flex;
    justify-content: flex-start;
}

.mam-form__submit .mam-btn[disabled] {
    opacity: 0.6;
    pointer-events: none;
}

.mam-form__status {
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    line-height: 1.5;
    border-left: 3px solid var(--color-hairline);
    background: var(--color-bg-alt);
    display: none;
}

.mam-form__status:not(:empty) {
    display: block;
}

.mam-form__status--loading {
    border-left-color: var(--color-accent);
    color: var(--color-text-muted);
}

.mam-form__status--success {
    border-left-color: #2d7a3d;
    background: #e8f5ea;
    color: #1a4d24;
}

.mam-form__status--error {
    border-left-color: #c73e1d;
    background: #fde8e3;
    color: #8a2812;
}

/* Demande de plans (CR 08/06) : groupe de cases "Pieces souhaitees" en pilules,
   etat coche en fuchsia (coherent avec l'accent du site). */
.mam-form__pieces {
    border: 0;
    margin: 0;
    padding: 0;
}
.mam-form__pieces-legend {
    display: block;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-2);
    padding: 0;
}
.mam-form__pieces-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.mam-form__pieces-opt {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.mam-form__pieces-opt:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--c-paper);
}

/* ====================================================================
   Autocomplete commune (combobox JS accent-insensible, cf main.js).
   Le dropdown est ajoute au <body> et positionne sous l'input via JS
   (position:absolute, top/left/width inline) : HTML valide (pas de <ul>
   dans le <label>) et zero impact sur la mise en page du moteur.
   Progressive enhancement du <datalist> natif.
   ==================================================================== */
.mam-combo-list {
    position: absolute;
    z-index: 9999;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    max-height: 288px;
    overflow-y: auto;
    background: var(--c-paper, #fff);
    border: 1px solid var(--color-border, #d9d6cf);
    box-shadow: 0 10px 30px rgba(10, 10, 10, 0.14);
}
.mam-combo-list[hidden] {
    display: none;
}
.mam-combo-item {
    padding: 10px 14px;
    font-size: var(--fs-md);
    line-height: 1.3;
    color: var(--color-text);
    cursor: pointer;
}
.mam-combo-item.is-active,
.mam-combo-item:hover {
    background: var(--color-accent);
    color: var(--c-paper, #fff);
}