/**
 * Formulaire de prise de rendez-vous.
 * Les couleurs sont reprises du thème (variables CSS) avec un repli si le plugin
 * était utilisé sur un autre thème.
 */

.hc-rdv {
    --rdv-ink:    var(--ink, #10262c);
    --rdv-soft:   var(--ink-soft, #486169);
    --rdv-line:   var(--line, #dfe8ea);
    --rdv-green:  var(--primary, #0f6357);
    --rdv-blue:   var(--accent, #1f74b6);
    --rdv-pale:   var(--accent-pale, #f4f9fd);
    --rdv-radius: var(--radius, 18px);

    max-width: 780px;
    margin-inline: auto;
}

/* ── Bandeau d'urgence ─────────────────────────────────────────────────── */
.hc-rdv__urgent {
    display: flex; flex-direction: column; gap: .35rem;
    background: var(--rdv-pale);
    border-left: 4px solid var(--rdv-blue);
    border-radius: 0 var(--rdv-radius) var(--rdv-radius) 0;
    padding: 1.1rem 1.35rem;
    margin-bottom: 2rem;
    font-size: .97rem;
    color: var(--rdv-soft);
}
.hc-rdv__urgent strong { color: var(--rdv-ink); }

/* ── Champs ────────────────────────────────────────────────────────────── */
.hc-rdv__form { display: grid; gap: 1.35rem; }
.hc-rdv__row { display: grid; gap: 1.35rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .hc-rdv__row { grid-template-columns: 1fr; } }

.hc-rdv__field { display: grid; gap: .45rem; margin: 0; border: 0; padding: 0; }
.hc-rdv__field > span,
.hc-rdv__field > legend {
    font-weight: 700; font-size: .92rem; color: var(--rdv-ink); padding: 0;
}
.hc-rdv__field em { color: var(--rdv-blue); font-style: normal; }
.hc-rdv__field small { font-weight: 400; color: var(--rdv-soft); }

.hc-rdv input[type="text"],
.hc-rdv input[type="tel"],
.hc-rdv input[type="email"],
.hc-rdv input[type="date"],
.hc-rdv select,
.hc-rdv textarea {
    width: 100%;
    /* 1rem minimum : sous 16 px, Safari sur iPhone zoome automatiquement au focus
       et la mise en page saute sous les doigts de la visiteuse. */
    font: inherit; font-size: 1rem;
    padding: .8rem 1rem;
    border: 1px solid var(--rdv-line);
    border-radius: 12px;
    background: #fff;
    color: var(--rdv-ink);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.hc-rdv textarea { resize: vertical; min-height: 96px; }
.hc-rdv input:focus, .hc-rdv select:focus, .hc-rdv textarea:focus {
    outline: none;
    border-color: var(--rdv-blue);
    box-shadow: 0 0 0 3px rgba(31, 116, 182, .16);
}
/* `:user-invalid` et non `:invalid` : un champ obligatoire encore vide EST invalide
   au chargement de la page. Avec `:invalid`, la date s'affichait en rouge avant même
   que la visiteuse ait touché le formulaire — et `:not(:placeholder-shown)` ne rattrape
   rien sur un `type="date"`, qui n'a pas de placeholder. `:user-invalid` n'entre en jeu
   qu'après une interaction ou une tentative d'envoi. */
.hc-rdv input:user-invalid,
.hc-rdv select:user-invalid,
.hc-rdv textarea:user-invalid { border-color: #c0392b; }

.hc-rdv__hint { font-size: .86rem; color: var(--rdv-soft); }

/* ── Matin / après-midi ────────────────────────────────────────────────── */
.hc-rdv__periods { border: 0; }
.hc-rdv__periods { display: grid; gap: .45rem; align-content: start; }
.hc-rdv__radio {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem 1rem; border: 1px solid var(--rdv-line); border-radius: 12px;
    cursor: pointer; background: #fff; font-size: .97rem;
}
.hc-rdv__radio:has(input:checked) {
    border-color: var(--rdv-blue); background: var(--rdv-pale); font-weight: 700;
}
.hc-rdv__radio input { accent-color: var(--rdv-blue); width: 18px; height: 18px; }

.hc-rdv__checkbox { display: flex; flex-direction: row; align-items: center; gap: .65rem; }
.hc-rdv__checkbox input { width: 18px; height: 18px; accent-color: var(--rdv-blue); }
.hc-rdv__checkbox span { font-size: .97rem; color: var(--rdv-soft); }

/* ── Piège à robots : invisible, mais pas display:none — certains robots
      ignorent les champs masqués de cette façon. ─────────────────────────── */
.hc-rdv__trap {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* ── Actions ───────────────────────────────────────────────────────────── */
.hc-rdv__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.hc-rdv__submit {
    font: inherit; font-weight: 700; font-size: 1rem;
    padding: .95rem 2rem; border: 0; border-radius: 999px;
    background: var(--rdv-green); color: #fff; cursor: pointer;
    transition: transform .16s ease, background-color .16s ease;
}
.hc-rdv__submit:hover:not(:disabled) { transform: translateY(-2px); background: var(--primary-deep, #084c43); }
.hc-rdv__submit:disabled { opacity: .6; cursor: progress; }
.hc-rdv__call { font-weight: 700; color: var(--rdv-blue); text-decoration: none; }

.hc-rdv__legal { font-size: .86rem; color: var(--rdv-soft); margin: 0; }

/* ── Résultat ──────────────────────────────────────────────────────────── */
.hc-rdv__result {
    margin-top: 1.5rem; padding: 1.5rem 1.75rem; border-radius: var(--rdv-radius);
    border: 1px solid var(--rdv-line);
}
.hc-rdv__result h3 { margin: 0 0 .5rem; }
.hc-rdv__result p:last-child { margin-bottom: 0; }
.hc-rdv__result--ok    { background: #eaf5f1; border-color: #b9ddd0; }
.hc-rdv__result--warn  { background: #fdf5e6; border-color: #e9d3a3; }
.hc-rdv__result--error { background: #fbecea; border-color: #e8bdb8; }