/*
 * 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
   =============================================================

   Le fond d'un champ est celui des surfaces du thème, comme celui des cartes
   et des panneaux qui en contiennent. La bordure est donc la seule limite
   visible d'un champ posé sur une carte, et elle emploie la couleur atténuée :
   elle atteint 8,79:1 sur une surface et 10,02:1 sur le fond de page, là où la
   couleur de bordure ordinaire tombe à 2,63:1 sur une surface, sous le seuil
   de 3:1 du critère WCAG 1.4.11. */

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-muted);
    border-radius: var(--discovery-radius-sm);
}

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

/*
 * Le texte de remplacement suit la couleur atténuée du thème. Sa couleur par
 * défaut varie selon le navigateur et n'atteint pas toujours le contraste
 * exigé sur un fond sombre.
 */
::placeholder {
    color: var(--discovery-color-muted);
    opacity: 1;
}

/*
 * 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-muted);
    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: var(--discovery-weight-semibold);
}

.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);
}


/* =============================================================
   Sélecteurs
   ============================================================= */

/*
 * Motif commun aux sélecteurs du thème : une étiquette, une liste et un
 * bouton de validation. La langue l'emploie aujourd'hui, la devise l'emploiera
 * de la même façon.
 *
 * La validation est explicite et le bouton fait partie du motif. Une liste
 * qui déclencherait la navigation au seul changement de valeur se
 * déclencherait à chaque touche de direction pour qui la parcourt au clavier.
 */
.discovery-selecteur {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-2);
    align-items: end;
    margin: 0;
    min-width: 0;
    max-width: 100%;
}

/*
 * L'étiquette occupe une ligne entière au-dessus des contrôles, comme dans le
 * formulaire de recherche. Placée à côté, elle réduirait la liste à une
 * largeur où les noms de langue les plus longs seraient tronqués.
 */
.discovery-selecteur label {
    flex: 1 0 100%;
    margin-block-end: 0;
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

/*
 * La liste revient à une largeur souple. La règle générale des champs l'étend
 * à toute la largeur disponible, ce qui repousserait le bouton de validation
 * sur la ligne suivante en toute circonstance.
 */
.discovery-selecteur select {
    flex: 1 1 10rem;
    width: auto;
    min-width: 0;
}

.discovery-selecteur-bouton {
    flex: 0 0 auto;
}


/* =============================================================
   Restriction de la recherche par objet
   ============================================================= */

/*
 * Le groupe occupe une ligne entière du formulaire, entre le champ et le
 * bouton. Il perd la bordure que les navigateurs donnent aux groupes de
 * champs : le panneau d'affinage en porte déjà une, et deux cadres imbriqués
 * n'apportent rien.
 */
.discovery-recherche-objets {
    flex: 1 0 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.discovery-recherche-objets legend {
    padding: 0;
    margin-block-end: var(--discovery-space-2);
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

/*
 * Chaque case reste attachée à son intitulé : le couple ne se coupe pas en
 * fin de ligne, et la zone cliquable couvre les deux.
 */
.discovery-recherche-objet {
    display: inline-flex;
    align-items: center;
    gap: var(--discovery-space-1);
    margin-inline-end: var(--discovery-space-4);
    white-space: nowrap;
}

.discovery-recherche-objet label {
    margin: 0;
    cursor: pointer;
}