/*
 * 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 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-4);
    margin-block-start: var(--discovery-space-2);
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

/*
 * Les deux éléments de méta portent chacun une étiquette masquée
 * visuellement, restituée par les lecteurs d'écran. Aucune règle ne la
 * révèle : la mécanique de masquage relève de la feuille principale, et le
 * rendu visuel se passe d'une étiquette là où la nature de chaque valeur est
 * évidente.
 */
.discovery-entry-date,
.discovery-entry-author {
    display: inline-flex;
    align-items: center;
    gap: var(--discovery-space-1);
}

.discovery-entry-author a {
    color: inherit;
}

.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: 600;
}


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

.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: 600;
}

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