/*
 * Contenus du thème Discovery.
 *
 * Titres, corps de texte, méta, taxonomies, images mises en avant, pages
 * d'absence de contenu et zone de commentaires.
 *
 * Les tailles de titre suivent l'échelle fluide déclarée dans la feuille
 * principale : elles s'adaptent à la largeur de la fenêtre sans point de
 * rupture, et restent proportionnées à la taille de texte choisie par la
 * personne dans son navigateur.
 */


/* =============================================================
   Titres
   ============================================================= */

.discovery-entry-title,
.discovery-archive-title,
.discovery-no-results-title,
.discovery-error-404-title,
.discovery-search-page-title {
    margin: 0;
    font-size: var(--discovery-text-3xl);
    line-height: var(--discovery-line-tight);
}

.discovery-entry-title a {
    color: inherit;
    text-decoration: none;
}

.discovery-entry-title a:hover,
.discovery-entry-title a:focus {
    text-decoration: underline;
}


/* =============================================================
   En-tête d'archive
   ============================================================= */

.discovery-archive-header,
.discovery-no-results-header,
.discovery-error-404-header,
.discovery-search-page-header {
    margin-block-end: var(--discovery-space-6);
}

.discovery-archive-description {
    margin-block-start: var(--discovery-space-3);
    color: var(--discovery-color-muted);
}


/* =============================================================
   Méta et taxonomies
   ============================================================= */

.discovery-entry-meta {
    margin-block-start: var(--discovery-space-2);
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

/*
 * Les données de publication sont des couples intitulé-valeur, rendus en
 * liste de définitions. Chaque couple est réuni dans un conteneur, ce qui
 * permet de les aligner sans rompre la liste : une liste de définitions
 * n'admet entre ses termes et ses valeurs que des conteneurs, et non des
 * éléments de disposition arbitraires.
 */
.discovery-entry-meta-liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-1) var(--discovery-space-4);
    margin: 0;
}

/*
 * L'intitulé et sa valeur se lisent sur une ligne, séparés par un espace. Le
 * couple ne se coupe pas en fin de ligne : une date détachée de son intitulé
 * ne se rattacherait à rien.
 */
.discovery-entry-meta-donnee {
    display: flex;
    align-items: baseline;
    gap: var(--discovery-space-1);
    white-space: nowrap;
}

.discovery-entry-meta-donnee dt {
    margin: 0;
}

/*
 * Les deux-points sont produits par la feuille et non par le balisage : ils
 * relèvent de la présentation, et un lecteur d'écran restitue déjà la
 * relation entre le terme et sa valeur.
 */
.discovery-entry-meta-donnee dt::after {
    content: ":";
}

/*
 * La valeur reprend le retour à la ligne que le couple refuse : un nom
 * d'auteur long doit pouvoir se replier plutôt que déborder.
 */
.discovery-entry-meta-donnee dd {
    margin: 0;
    color: var(--discovery-color-text);
    white-space: normal;
}


.discovery-entry-taxonomy {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-2);
    margin-block-start: var(--discovery-space-6);
    font-size: var(--discovery-text-sm);
}

.discovery-entry-categories,
.discovery-entry-tags {
    margin: 0;
}

.discovery-taxonomy-label {
    color: var(--discovery-color-muted);
}

.discovery-edit-link {
    display: inline-block;
    margin-block-start: var(--discovery-space-4);
    font-size: var(--discovery-text-sm);
}


/* =============================================================
   Image mise en avant
   ============================================================= */

.discovery-post-thumbnail {
    margin: 0 0 var(--discovery-space-5);
}

.discovery-post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: var(--discovery-radius-md);
}


/* =============================================================
   Lien de lecture
   ============================================================= */

.discovery-more-link {
    display: inline-block;
    margin-block-start: var(--discovery-space-3);
    font-weight: var(--discovery-weight-semibold);
}


/* =============================================================
   Pagination interne d'un contenu
   ============================================================= */

.discovery-page-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-2);
    align-items: center;
    margin-block-start: var(--discovery-space-6);
}

.discovery-page-links-title {
    color: var(--discovery-color-muted);
}


/* =============================================================
   Absence de contenu et adresse introuvable
   ============================================================= */

.discovery-no-results-content,
.discovery-error-404-content,
.discovery-search-page-content {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-5);
}

.discovery-error-404-message,
.discovery-search-page-invitation {
    margin: 0;
}


/* =============================================================
   Widgets
   ============================================================= */

/*
 * Le titre d'un widget. Le composant est rendu dans les zones d'en-tête, dans
 * la colonne latérale et dans le pied de page : son apparence est déclarée
 * une fois pour les trois.
 */
.discovery-widget-title {
    margin-block: 0 var(--discovery-space-2);
    font-size: var(--discovery-text-lg);
    line-height: var(--discovery-line-tight);
}

.discovery-widget > * + * {
    margin-block-start: var(--discovery-space-3);
}


/* =============================================================
   Zone de commentaires
   ============================================================= */

.discovery-comments {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-6);
    margin-block-start: var(--discovery-space-10);
    padding-block-start: var(--discovery-space-6);
    border-block-start: 1px solid var(--discovery-color-border);
}

.discovery-comments-title,
.discovery-comment-reply-title {
    margin: 0;
    font-size: var(--discovery-text-xl);
    line-height: var(--discovery-line-tight);
}

.discovery-comments-closed {
    margin: 0;
    color: var(--discovery-color-muted);
}


/* =============================================================
   Liste des commentaires
   ============================================================= */

/*
 * Le retrait des puces s'accompagne du rôle de liste porté par l'élément :
 * sous certains moteurs, retirer le style de liste supprime la sémantique
 * restituée par les lecteurs d'écran.
 */
.discovery-comment-list,
.discovery-comment-list .children {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

/*
 * Les réponses sont mises en retrait et signalées par une bordure latérale.
 * La profondeur d'un commentaire est ainsi perceptible autrement que par sa
 * seule position horizontale.
 */
.discovery-comment-list .children {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-6);
    margin-block-start: var(--discovery-space-6);
    padding-inline-start: var(--discovery-space-5);
    border-inline-start: 2px solid var(--discovery-color-border);
}

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

.discovery-comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-2) var(--discovery-space-4);
    align-items: center;
}

.discovery-comment-author {
    display: flex;
    gap: var(--discovery-space-3);
    align-items: center;
}

.discovery-comment-author img {
    border-radius: var(--discovery-radius-full);
}

.discovery-comment-author-name {
    font-weight: var(--discovery-weight-semibold);
}

.discovery-comment-metadata,
.discovery-comment-edit {
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

.discovery-comment-content > * + * {
    margin-block-start: var(--discovery-space-3);
}

/*
 * Un commentaire en attente de validation est signalé par une bordure et une
 * surface, et non par sa seule couleur.
 */
.discovery-comment-moderation {
    margin: 0;
    padding: var(--discovery-space-2) var(--discovery-space-3);
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
    background-color: var(--discovery-color-surface);
    border-inline-start: 3px solid var(--discovery-color-border);
}

.discovery-comment-reply {
    font-size: var(--discovery-text-sm);
}

/* =============================================================
   Largeur de lecture et alignements de blocs
   ============================================================= */

/*
 * Le conteneur reste en flux normal et chaque enfant reçoit sa propre largeur
 * maximale. C'est le mécanisme de la disposition contrainte de WordPress, et
 * il obtient deux choses qu'une colonne unique bornée ne permet pas ensemble :
 * les blocs alignés larges s'étendent, puisque le conteneur n'est pas
 * rétréci, et les blocs flottants gardent leur flottement, puisqu'ils sont
 * exclus de la contrainte.
 *
 * Le conteneur est borné à la largeur ample. Une image alignée à gauche
 * flotte au bord du conteneur, non au bord du texte : sans cette borne, elle
 * se détacherait de la colonne de lecture d'autant que la fenêtre est large.
 */
.discovery-entry-content {
    max-inline-size: var(--discovery-large-max);
    margin-inline: auto;
}

/*
 * La pseudo-classe :where n'ajoute aucune spécificité : une extension ou
 * l'outil de personnalisation reprend ces largeurs avec un sélecteur de
 * classe simple.
 */
.discovery-entry-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-inline-size: var(--discovery-lecture-max);
    margin-inline: auto;
}

.discovery-entry-content > .alignwide {
    max-inline-size: var(--discovery-large-max);
}

.discovery-entry-content .alignfull {
    max-inline-size: none;
}

/*
 * Une image ou une vidéo alignée large ou pleine largeur occupe la largeur
 * qui lui est accordée : à sa taille naturelle, l'alignement resterait sans
 * effet visible.
 */
.discovery-entry-content .alignwide img,
.discovery-entry-content .alignfull img,
.discovery-entry-content .alignwide video,
.discovery-entry-content .alignfull video {
    inline-size: 100%;
}

/*
 * L'espace de compte ne présente pas de texte courant mais des panneaux, des
 * cartes et des tableaux : la largeur de lecture ne s'y applique pas. Le
 * conteneur garde la largeur ample, qui borne alors la section entière.
 */
.discovery-entry-compte > .discovery-entry-content > * {
    max-inline-size: none;
}


/* =============================================================
   Rythme vertical du contenu
   ============================================================= */

/*
 * L'écart entre deux blocs successifs. La règle vise les enfants directs :
 * les blocs imbriqués gardent le rythme que leur donne leur propre
 * conteneur.
 */
.discovery-entry-content > * + * {
    margin-block-start: var(--discovery-space-4);
}

/*
 * Un titre reçoit un écart plus grand que celui qui sépare deux paragraphes.
 * L'espace au-dessus d'un titre le rattache à la section qu'il ouvre plutôt
 * qu'à celle qu'il ferme, et le distingue du texte courant autrement que par
 * sa seule taille.
 */
.discovery-entry-content > * + :is(h2, h3, h4, h5, h6) {
    margin-block-start: var(--discovery-space-8);
}


/* =============================================================
   Titres du contenu
   ============================================================= */

/*
 * Les titres d'un article suivent l'échelle du thème. Les marges des titres
 * étant remises à zéro par le socle, leur taille resterait sinon celle que
 * leur donne le navigateur, étrangère à l'échelle et indépendante de la
 * taille du texte courant.
 *
 * Le premier niveau n'est pas visé : le titre de la publication le porte
 * déjà, et un article n'en comporte qu'un.
 */
.discovery-entry-content :is(h2, h3, h4, h5, h6) {
    line-height: var(--discovery-line-tight);
    text-wrap: balance;
}

.discovery-entry-content h2 {
    font-size: var(--discovery-text-2xl);
}

.discovery-entry-content h3 {
    font-size: var(--discovery-text-xl);
}

.discovery-entry-content h4 {
    font-size: var(--discovery-text-lg);
}

.discovery-entry-content :is(h5, h6) {
    font-size: var(--discovery-text-base);
    font-weight: var(--discovery-weight-semibold);
}


/* =============================================================
   Introduction éditoriale
   ============================================================= */

/*
 * Le texte saisi dans la page servant les publications. Il reçoit les mêmes
 * règles que le contenu d'un article, largeur de lecture comprise : c'est du
 * texte courant, quel que soit l'endroit où il paraît.
 */
.discovery-archive-introduction {
    margin-block-end: var(--discovery-space-8);
}


/* =============================================================
   Barre de vues
   ============================================================= */

/*
 * Le formulaire des onglets est posé hors de la liste et ne porte que des
 * champs cachés : il n'occupe aucune place et n'a pas à en réserver.
 */
.discovery-vues-formulaire {
    display: none;
}

.discovery-vues {
    margin-block-end: var(--discovery-space-4);
}


/* =============================================================
   Tri et décompte
   ============================================================= */

.discovery-archive-tri {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--discovery-space-2);
    margin-block-end: var(--discovery-space-4);
}

.discovery-archive-tri label {
    flex: 1 0 100%;
    margin-block-end: 0;
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

.discovery-archive-tri select {
    width: auto;
    min-width: 0;
}

.discovery-archive-decompte {
    margin: 0 0 var(--discovery-space-4);
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}


/* =============================================================
   Grille des termes
   ============================================================= */

/*
 * La grille tient quatre termes de front sur un écran large et se réduit
 * selon la place disponible. Le nombre de colonnes et la largeur minimale
 * d'un terme passent par des variables facultatives, que l'outil de
 * personnalisation redéfinit sans toucher à la règle.
 *
 * La largeur maximale est calculée sur ces deux valeurs, gouttières
 * comprises : elle plafonne réellement le nombre de colonnes, là où une
 * largeur posée indépendamment en laisserait paraître une de plus sur un
 * conteneur assez large.
 */
.discovery-termes {
    --discovery-termes-gouttiere: var(--discovery-space-4);

    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(var(--discovery-terme-min, 12rem), 1fr)
    );
    gap: var(--discovery-termes-gouttiere);
    max-inline-size: calc(
        var(--discovery-termes-colonnes, 4) * var(--discovery-terme-min, 12rem)
        + (var(--discovery-termes-colonnes, 4) - 1) * var(--discovery-termes-gouttiere)
    );
    margin: 0;
    padding: 0;
    list-style: none;
}

.discovery-terme {
    display: flex;
    min-width: 0;
}

/*
 * Le terme entier est cliquable, et non son seul intitulé : une cible réduite
 * au texte serait plus difficile à atteindre, au pointeur comme au doigt.
 */
.discovery-terme-lien {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--discovery-space-1);
    min-width: 0;
    padding: var(--discovery-space-4);
    color: var(--discovery-color-text);
    text-decoration: none;
    background-color: var(--discovery-color-surface);
    border: 1px solid var(--discovery-color-muted);
    border-radius: var(--discovery-radius-md);
}

.discovery-terme-lien:hover,
.discovery-terme-lien:focus-visible {
    border-color: var(--discovery-color-text);
    text-decoration: underline;
}

.discovery-terme-nom {
    font-weight: var(--discovery-weight-semibold);
    overflow-wrap: break-word;
}

.discovery-terme-nombre {
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

.discovery-termes-absence {
    margin: 0;
    color: var(--discovery-color-muted);
}