/*
 * Formulaires du thème Discovery.
 *
 * Champs, boutons, formulaire de recherche, formulaire de commentaire et
 * motif de divulgation.
 *
 * Les champs héritent de la typographie du document : un champ dont la taille
 * de texte serait fixée en pixels ne suivrait pas le réglage de taille choisi
 * dans le navigateur, et déclenche par ailleurs un agrandissement automatique
 * à la mise au point sur certains appareils.
 *
 * Les zones de saisie et les boutons portent une bordure dont le contraste
 * avec l'arrière-plan atteint le rapport de trois pour un exigé par le
 * critère WCAG 2.1 1.4.11 pour les éléments d'interface.
 */


/* =============================================================
   Champs
   ============================================================= */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: var(--discovery-space-2) var(--discovery-space-3);
    color: var(--discovery-color-text);
    font: inherit;
    background-color: var(--discovery-color-surface);
    border: 1px solid var(--discovery-color-border);
    border-radius: var(--discovery-radius-sm);
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

/*
 * Les cases à cocher et les boutons radio conservent leur dimension propre :
 * les étirer à la largeur du conteneur les rendrait méconnaissables.
 */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    accent-color: var(--discovery-color-link);
}

label {
    display: inline-block;
    margin-block-end: var(--discovery-space-1);
}


/* =============================================================
   Boutons
   ============================================================= */

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--discovery-space-2);
    padding: var(--discovery-space-2) var(--discovery-space-4);
    color: var(--discovery-color-text);
    font: inherit;
    background-color: var(--discovery-color-surface);
    border: 1px solid var(--discovery-color-border);
    border-radius: var(--discovery-radius-sm);
    cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    border-color: var(--discovery-color-link);
}

button[disabled],
input[disabled] {
    color: var(--discovery-color-muted);
    cursor: default;
}


/* =============================================================
   Formulaire de recherche
   ============================================================= */

.discovery-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-2);
    align-items: end;
}

.discovery-search-label {
    flex: 1 0 100%;
    margin: 0;
}

.discovery-search-field {
    flex: 1 1 14rem;
    min-width: 0;
}

.discovery-search-submit {
    flex: 0 0 auto;
}


/* =============================================================
   Affinage de la recherche
   ============================================================= */

.discovery-search-refine {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-3);
    margin-block-end: var(--discovery-space-6);
}

.discovery-search-refine-panel {
    padding: var(--discovery-space-4);
    background-color: var(--discovery-color-surface);
    border: 1px solid var(--discovery-color-border);
    border-radius: var(--discovery-radius-md);
}

.discovery-search-refine-toggle {
    align-self: start;
}


/* =============================================================
   Divulgation
   ============================================================= */

/*
 * Le bouton de divulgation est écrit masqué par le balisage et révélé par le
 * script. Aucune règle ne le masque ni ne le montre ici : l'attribut hidden
 * du navigateur suffit, et une règle d'affichage porterait sur lui à
 * l'encontre de cet attribut.
 */
.discovery-disclosure {
    align-self: start;
}

.discovery-disclosure-panel {
    min-width: 0;
}


/* =============================================================
   Formulaire de commentaire
   ============================================================= */

.discovery-comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-4);
}

.discovery-comment-form p {
    margin: 0;
}

.discovery-comment-form label {
    display: block;
}

/*
 * L'indication de champ obligatoire est signalée par sa forme et par le texte
 * qui l'accompagne, non par sa seule couleur.
 */
.discovery-comment-form .required {
    font-weight: 600;
}

.discovery-comment-form .comment-notes,
.discovery-comment-form .form-submit {
    margin: 0;
}

.discovery-comment-form .comment-notes {
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}