/* ===============================
   Widget DP - Formulaire
   =============================== */
.dp-form{position:relative}
.dp-form__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.dp-form.dp-cols-1 .dp-form__grid{grid-template-columns:1fr}

.dp-col-100{grid-column:span 2}
.dp-col-50{grid-column:span 1}
.dp-col-33{grid-column:span 1}
.dp-form.dp-cols-1 .dp-col-100,
.dp-form.dp-cols-1 .dp-col-50,
.dp-form.dp-cols-1 .dp-col-33{grid-column:span 1}

.dp-form__label,.dp-form__group-label{font-weight:600;margin-bottom:6px;display:block}
.dp-req{color:var(--dp-form-required, #c00)}

.dp-input,.dp-textarea,.dp-select{
    width:100%;
    border:1px solid var(--dp-form-border, var(--dp-color-border, #dedede));
    border-radius:var(--dp-form-input-radius, var(--dp-radius-sm, 8px));
    padding:10px 12px;
    font:inherit;
    font-family:var(--dp-font-base, inherit);
    font-weight:var(--dp-font-base-weight, 400);
    background:var(--dp-form-surface, var(--dp-color-surface, #fff));
}
.dp-textarea{min-height:110px;resize:vertical}

.dp-options{display:flex;flex-direction:column;gap:6px}
.dp-opt{display:flex;align-items:center;gap:8px}

.dp-form__heading{margin:12px 0 6px;font-size:18px;color:var(--dp-form-heading, var(--dp-color-text, #303030))}
.dp-form__sep{border:0;border-top:1px solid var(--dp-form-separator, var(--dp-color-border, #dedede));margin:6px 0}

/* Champ fichier */
.dp-file-input{
    position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0,0,0,0);
}
.dp-file-label{
    display:flex;align-items:center;gap:10px;cursor:pointer;
}
.dp-file-btn{
    display:inline-block;padding:8px 14px;border-radius:var(--dp-form-file-radius, var(--dp-radius-sm, 6px));
    background: var(--dp-btn-bg, var(--dp-form-button-bg, var(--dp-color-primary, #61c2d0)));color: var(--dp-btn-text, var(--dp-form-button-text, var(--dp-color-on-primary, #fff)));
    font-weight:600;font-size:.9rem;white-space:nowrap;
}
.dp-file-name{
    font-size:.875rem;color:var(--dp-color-text-muted, #5b5b5b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;
}
.dp-file-hint{margin:4px 0 0;font-size:.8rem;color:var(--dp-color-text-muted, #5b5b5b);}

/* Consentement RGPD + inscription newsletter */
.dp-form__rgpd,.dp-form__newsletter{margin-top:14px;}
.dp-rgpd-label{
    display:flex;align-items:flex-start;gap:10px;font-size:.9rem;cursor:pointer;
}
.dp-rgpd-cb{
    margin-top:2px;flex-shrink:0;width:16px;height:16px;cursor:pointer;accent-color:var(--dp-form-button-bg, var(--dp-color-primary, #61c2d0));
}
.dp-rgpd-label a{color:var(--dp-form-button-bg, var(--dp-color-primary, #61c2d0));}

.dp-form__actions{margin-top:16px;display:flex;gap:12px;align-items:center}
.dp-btn{
    appearance:none;border:0;border-radius:var(--dp-radius-pill, 999px);padding:10px 18px;
    background: var(--dp-btn-bg, var(--dp-form-button-bg, var(--dp-color-primary, #61c2d0)));color: var(--dp-btn-text, var(--dp-form-button-text, var(--dp-color-on-primary, #fff)));font-weight:700;cursor:pointer
}
.dp-btn[disabled]{opacity:.6;cursor:not-allowed}
.dp-form__msg{font-size:.95rem}

/* ===============================================================
   Le bouton d'envoi : ses propres états
   ===============================================================
   Le bouton n'avait aucune règle de survol. Il héritait donc de celle que le
   thème pose sur TOUT bouton pour neutraliser le rose de Hello Elementor :

       :where(.dp-body) :is([type="submit"], button):hover { … }

   Cette règle pèse (0,2,0) — le sélecteur d'attribut plus `:hover` — quand
   `.dp-btn` seul n'en pèse que (0,1,0). Au survol, le bouton quittait donc la
   couleur de la charte pour le bleu sombre du thème, et son libellé passait en
   blanc. Sur une charte pastel, ça se lit comme une panne : le bouton change de
   marque au passage du curseur.

   Le sélecteur est préfixé par `button` — (0,2,1) — et non simplement doublé :
   à égalité de poids, c'est l'ordre de chargement qui tranche, et il place
   aujourd'hui `main.css` avant cette feuille. Il suffirait qu'une mise en file
   change pour que le bug revienne, sans que personne ne touche à ces lignes.

   Les couleurs viennent de la charte, qui a calculé le texte lisible sur
   chaque aplat : `on-primary-dark` et non un blanc en dur, sans quoi une
   nuance de survol claire porterait un libellé invisible.
   =============================================================== */
button.dp-btn:hover,
button.dp-btn:focus-visible {
    background: var(--dp-btn-bg-hover, var(--dp-form-button-bg-hover, var(--dp-color-primary-dark, #52a5b1)));
    color: var(--dp-btn-text-hover, var(--dp-form-button-text-hover, var(--dp-color-on-primary-dark, #303030)));
    border-color: var(--dp-btn-bg-hover, transparent);
}

/* L'anneau de focus ne paraît qu'au clavier : `:focus` tout court se déclenche
   aussi au clic, et laissait le bouton cerclé après l'envoi. */
button.dp-btn:focus-visible {
    outline: none;
    box-shadow: var(--dp-focus-ring, 0 0 0 3px rgba(65, 126, 136, 0.28));
}

/* Pression : on retombe à plat, comme les autres boutons de la charte. Un
   bouton qui reste soulevé au clic ne dit pas qu'il a été pressé. */
button.dp-btn:active {
    transform: scale(0.98);
}

/* Désactivé, il ne réagit plus du tout — ni couleur, ni relief. */
button.dp-btn[disabled]:hover,
button.dp-btn[disabled]:focus-visible {
    background: var(--dp-btn-bg, var(--dp-form-button-bg, var(--dp-color-primary, #61c2d0)));
    color: var(--dp-btn-text, var(--dp-form-button-text, var(--dp-color-on-primary, #303030)));
    transform: none;
    box-shadow: none;
}