/*
 * 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 : leur texte suit ainsi le
 * réglage de taille choisi dans le navigateur. Une taille fixée en pixels
 * échappe à ce réglage, 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. Un champ
   se distingue ainsi plus nettement qu'avec la couleur de bordure ordinaire,
   qui y tient 4,06:1 pour 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 :
 * leur forme est ce qui les distingue, et elle se perd à toute autre taille.
 */
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
   ============================================================= */

/*
 * L'attribut de masquage l'emporte sur la disposition posée ci-dessous. Une
 * règle d'auteur sur un élément prime sur celle du navigateur qui masque les
 * éléments portant cet attribut : sans ce rappel, un bouton masqué reste
 * affiché, et inerte tant qu'aucun script ne l'active.
 *
 * La règle est posée avant celle qui donne leur disposition aux commandes, et
 * sa spécificité supérieure la fait l'emporter quel que soit l'ordre.
 */
button[hidden],
input[hidden],
select[hidden],
textarea[hidden] {
    display: none;
}

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
 * gouverne seul son affichage.
 */
.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 navigue au seul changement de valeur se déclenche à 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. Cette place laisse à la liste la largeur dont les
 * noms de langue les plus longs ont besoin pour paraître en entier.
 */
.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, que la règle générale des champs
 * étend sinon à toute la place disponible. Le bouton de validation tient ainsi
 * sur la même ligne.
 */
.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;
}