/* BHK Remplacement Form -- formulaire de demande de remplacement (Espace kines).
 *
 * Couleurs : TOKENS UNIQUEMENT (var(--alfred-*)), zero valeur de marque en dur (UX-C4).
 * Les neutres restent en hex : ce sont des gris de structure, pas des couleurs de marque.
 * Le jaune --bhk-selection n'apparait pas ici : il reste reserve aux CTA de prise de RDV.
 *
 * Regles appliquees (design/regles-ux-web.md) : UX-H1 hierarchie typographique, UX-H4
 * proximite (une section = une carte), UX-T1 longueur de ligne bornee, UX-T2 corps >= 16px,
 * UX-E1 echelle d'espacement, UX-E3 cibles tactiles >= 44px, UX-E4 marge interieure portee
 * par le conteneur, UX-C1 contraste, UX-I3 tout etat interactif se voit.
 */

.bhk-rpl-wrap {
    /* 18 champs : la borne large laisse respirer les paires, la borne de lecture
       (UX-T1) est portee plus bas par les textes, pas par le formulaire entier. */
    max-width: 820px;
    margin: 0 auto;
    /* Echelle d'espacement (UX-E1) : 8 / 12 / 16 / 24 / 32 / 48. */
    --rpl-1: 8px;
    --rpl-2: 12px;
    --rpl-3: 16px;
    --rpl-4: 24px;
    --rpl-5: 32px;
    --rpl-6: 48px;
    --rpl-radius: 10px;
    --rpl-border: #e3dcda;
    --rpl-label: #3a3a3a;
    --rpl-help: #6b6b6b;
    --rpl-field-bg: #ffffff;
}

/* --- Mention des champs obligatoires ------------------------------------- */

/* Une etiquette, pas un paragraphe orphelin entre le titre et le premier champ.
   Elle reprend le rose de la charte et le gris des textes secondaires du site
   (mesure : 5,14 sur ce fond, au-dessus du seuil de 4,5). L'asterisque est
   BORDEAUX et porte `aria-hidden` : il repete un signe deja present dans les
   libelles et n'a pas a etre lu deux fois ; la phrase reste comprehensible sans
   lui (UX-C3 : la couleur ne porte jamais seule le sens). */
.bhk-rpl-required-note {
    display: inline-flex;
    align-items: baseline;
    gap: var(--rpl-1);
    margin: 0 0 var(--rpl-4);
    padding: 7px 16px;
    background: var(--alfred-accent);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.4;
    color: #666666;
}

.bhk-rpl-required-star {
    color: var(--alfred-primary);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

/* --- Le formulaire -------------------------------------------------------- */

.bhk-rpl-form {
    display: flex;
    flex-direction: column;
    gap: var(--rpl-4);
    counter-reset: bhk-rpl-section;
}

/* Une section = une carte : la proximite groupe (UX-H4), la carte borne le
   regard sur quatre champs a la fois plutot que sur dix-huit (UX-I2). */
.bhk-rpl-fieldset {
    border: 1px solid var(--rpl-border);
    border-radius: var(--rpl-radius);
    padding: var(--rpl-5) var(--rpl-4) var(--rpl-5);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rpl-4);
    background: var(--rpl-field-bg);
}

@media (min-width: 769px) {
    .bhk-rpl-fieldset {
        padding: var(--rpl-5);
    }
}

/* Legende numerotee : le compteur vit dans le CSS, le PHP n'a pas a le porter. */
.bhk-rpl-legend {
    counter-increment: bhk-rpl-section;
    display: flex;
    align-items: center;
    gap: var(--rpl-2);
    padding: 0 var(--rpl-1) 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--alfred-primary);
}

.bhk-rpl-legend::before {
    content: counter(bhk-rpl-section);
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--alfred-primary);
    color: var(--alfred-text-on-primary);
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bhk-rpl-row {
    display: flex;
    flex-direction: column;
    gap: var(--rpl-1);
}

/* Mobile d'abord : une colonne. Les paires ne s'ouvrent qu'au-dela. */
.bhk-rpl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rpl-4);
}

@media (min-width: 769px) {
    .bhk-rpl-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .bhk-rpl-grid > .bhk-rpl-row {
        min-width: 0;             /* sinon un champ long pousse sa colonne */
    }
}

.bhk-rpl-label {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    color: var(--rpl-label);
}

.bhk-rpl-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;             /* UX-E3 : cible tactile confortable */
    padding: 12px 14px;
    font-family: inherit;
    font-size: 16px;              /* UX-T2, et pas de zoom auto sur iOS */
    line-height: 1.4;
    color: #222;
    background: var(--rpl-field-bg);
    /* La bordure DELIMITE le champ : c'est un composant d'interface, seuil 3,0
       (WCAG 1.4.11). Mesure 3,45 sur blanc ; le #cfc7c5 d'origine tombait a 1,66. */
    border: 1px solid #8a8a8a;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bhk-rpl-input::placeholder {
    /* Un placeholder est du TEXTE : seuil 4,5 (WCAG 1.4.3), mesure 4,54 sur blanc.
       Le #9a9a9a d'origine plafonnait a 2,81 -- illisible pour qui voit mal. */
    color: #767676;
}

.bhk-rpl-input:hover {
    border-color: #5f5f5f;
}

/* Tout etat interactif se voit (UX-I3) -- et le focus reste visible au clavier. */
.bhk-rpl-input:focus,
.bhk-rpl-input:focus-visible {
    outline: none;
    border-color: var(--alfred-primary);
    box-shadow: 0 0 0 3px var(--alfred-accent);
}

.bhk-rpl-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Les select natifs restent natifs (UX-I4 : les conventions d'abord), on ne
   redessine que ce qui les aligne sur les autres champs. */
select.bhk-rpl-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--alfred-primary) 50%),
                      linear-gradient(135deg, var(--alfred-primary) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

/* --- Cases a cocher des specialites --------------------------------------- */

.bhk-rpl-checks {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rpl-1);
}

@media (min-width: 600px) {
    .bhk-rpl-checks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bhk-rpl-check {
    display: flex;
    align-items: center;
    gap: var(--rpl-2);
    min-height: 44px;             /* UX-E3 */
    padding: 0 var(--rpl-2);
    font-size: 15px;
    line-height: 1.35;
    color: var(--rpl-label);
    border: 1px solid var(--rpl-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.bhk-rpl-check:hover {
    border-color: var(--alfred-primary);
    background: var(--alfred-accent);
}

.bhk-rpl-check input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--alfred-primary);
}

/* --- Consentement et envoi ------------------------------------------------ */

.bhk-rpl-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--rpl-2);
    max-width: 72ch;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rpl-help);
    cursor: pointer;
}

.bhk-rpl-consent input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--alfred-primary);
}

.bhk-rpl-consent a {
    color: var(--alfred-primary);
    text-decoration: underline;   /* UX-C3 : la couleur ne porte jamais seule le sens */
}

.bhk-rpl-row--submit {
    align-items: stretch;
}

.bhk-rpl-submit {
    width: 100%;
    min-height: 52px;
    padding: 14px 32px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: var(--alfred-text-on-primary);
    background: var(--alfred-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 600px) {
    .bhk-rpl-row--submit {
        align-items: flex-start;
    }
    .bhk-rpl-submit {
        width: auto;
        min-width: 280px;
    }
}

.bhk-rpl-submit:hover {
    background: var(--alfred-primary-hover);
}

.bhk-rpl-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--alfred-accent), 0 0 0 5px var(--alfred-primary);
}

.bhk-rpl-submit[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Bandeaux de reponse -------------------------------------------------- */

.bhk-rpl-notice {
    padding: var(--rpl-3) var(--rpl-4);
    border-radius: var(--rpl-radius);
    border-left: 4px solid transparent;
    margin-bottom: var(--rpl-4);
    max-width: 72ch;
    font-size: 16px;
    line-height: 1.55;
}

.bhk-rpl-notice--ok {
    background: #eef7f0;
    border-color: #2c7a44;
    color: #1c5c31;
}

.bhk-rpl-notice--ok strong {
    color: #144724;
    font-size: 17px;
    letter-spacing: 0.02em;
}

/* Etat d'erreur : couleur ET liseré ET mot explicite (UX-C3). */
.bhk-rpl-notice--err {
    background: #fdeceb;
    border-color: var(--alfred-primary);
    color: #8d2119;
}

/* --- Divers --------------------------------------------------------------- */

/* Honeypot : masque a l'oeil et aux lecteurs d'ecran, present dans le DOM. */
.bhk-rpl-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bhk-rpl-noscript {
    margin-top: var(--rpl-4);
    font-size: 15px;
    color: var(--rpl-label);
}

.bhk-rpl-noscript a {
    color: var(--alfred-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Le mouvement ne s'impose a personne (protocole motion, WCAG 2.2.2). */
@media (prefers-reduced-motion: reduce) {
    .bhk-rpl-input,
    .bhk-rpl-check,
    .bhk-rpl-submit {
        transition: none;
    }
}