/* ==========================================================================
   TAYEBOOKS — Journal, archives, recherche, 404, pages
   --------------------------------------------------------------------------
   Cette feuille était déclarée dans le chargement conditionnel mais n'avait
   jamais été écrite. Le chargeur ignore silencieusement un fichier absent —
   ce qui permet d'avancer phase par phase, mais laisse aussi passer un oubli
   sans un mot. Les gabarits du journal, de la recherche, de la 404 et des
   pages sortaient donc sans mise en forme propre.

   Le parti pris est l'inverse de celui du catalogue : là on vend, ici on
   LIT. Le texte reprend donc une colonne étroite, un interligne plus ample
   et une taille confortable — mais avec la même palette et les mêmes jetons,
   pour qu'on reste dans la même librairie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   En-tête de section — archives, recherche
   -------------------------------------------------------------------------- */

.tb-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-end: var(--space-6);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.tb-section-head__title {
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* --------------------------------------------------------------------------
   Liste d'articles
   --------------------------------------------------------------------------
   Une pile, pas une grille : un article se choisit sur son titre, et une
   grille de titres se lit moins vite qu'une colonne.
   -------------------------------------------------------------------------- */

.tb-posts,
.tb-results {
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-max);
}

.tb-entry {
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--color-border-soft);
}

.tb-entry:first-child { padding-block-start: 0; }

.tb-entry__title {
  margin-block: var(--space-1) var(--space-2);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.tb-entry__title a { color: var(--color-text); }

.tb-entry__title a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.tb-entry__excerpt {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-soft);

  /* Trois lignes suffisent à décider ; au-delà, on ouvre l'article. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Article seul, et page
   -------------------------------------------------------------------------- */

.tb-post__header { margin-block-end: var(--space-6); }

.tb-post__title,
.tb-page__title {
  margin-block-start: var(--space-2);
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/*
   Le corps du texte.

   `.tb-content` porte déjà la grille d'alignement de Gutenberg (base.css) ;
   on n'y touche pas, on ne fait que donner au TEXTE de quoi se lire : un
   interligne ample et de l'air entre les paragraphes.
*/
.tb-content > p,
.tb-content > ul,
.tb-content > ol,
.tb-content > blockquote,
.tb-content > figure,
.tb-content > table { margin-block-end: var(--space-5); }

.tb-content > p,
.tb-content > ul,
.tb-content > ol {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

.tb-content > h2,
.tb-content > h3,
.tb-content > h4 {
  margin-block: var(--space-7) var(--space-3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.tb-content > h2 { font-size: var(--fs-page); }
.tb-content > h3 { font-size: var(--fs-section); }
.tb-content > h4 { font-size: var(--fs-body); }

.tb-content > ul,
.tb-content > ol { padding-inline-start: var(--space-6); }

.tb-content li { margin-block-end: var(--space-2); }

.tb-content a {
  color: var(--color-link);
  text-decoration: underline;
}

/* Le filet du côté du texte, pas à gauche en dur : juste en arabe aussi. §5 */
.tb-content blockquote {
  padding-inline-start: var(--space-5);
  border-inline-start: 3px solid var(--color-accent);
  color: var(--color-text-soft);
}

.tb-content img,
.tb-content figure img {
  max-inline-size: 100%;
  block-size: auto;
}

.tb-content figcaption {
  margin-block-start: var(--space-2);
  font-size: var(--fs-meta);
  color: var(--color-text-soft);
  text-align: center;
}

.tb-content code {
  padding-inline: var(--space-1);
  background-color: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.tb-content pre {
  margin-block-end: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  overflow-x: auto;
}

.tb-content pre code { padding: 0; background: none; }

.tb-content hr {
  margin-block: var(--space-7);
  border: 0;
  border-block-start: 1px solid var(--color-border);
}

.tb-content table { inline-size: 100%; border-collapse: collapse; }

.tb-content th,
.tb-content td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-soft);
  font-size: var(--fs-body);
  text-align: start;
}

.tb-content th { background-color: var(--color-surface); font-weight: var(--fw-bold); }

/* Article découpé en plusieurs pages (<!--nextpage-->). */
.tb-page-links {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
  font-size: var(--fs-meta);
}

/* --------------------------------------------------------------------------
   Pagination
   --------------------------------------------------------------------------
   Rendue par `the_posts_pagination()` : on habille SON balisage plutôt que
   d'en écrire un autre, pour que la navigation clavier et les libellés
   d'accessibilité du cœur restent intacts.
   -------------------------------------------------------------------------- */

.navigation.pagination { margin-block-start: var(--space-7); }

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.navigation.pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--tap-target);
  min-block-size: var(--tap-target);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body);
  color: var(--color-text);
}

.navigation.pagination .page-numbers:hover { background-color: var(--color-surface); }

.navigation.pagination .page-numbers.current {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  font-weight: var(--fw-bold);
}

.navigation.pagination .page-numbers.dots {
  border-color: transparent;
  color: var(--color-text-soft);
}

/* La flèche suit le sens de l'écriture. §70 */
:dir(rtl) .navigation.pagination .page-numbers .tb-icon { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Commentaires
   -------------------------------------------------------------------------- */

.tb-comments {
  max-inline-size: var(--content-max);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
}

.tb-comments__title {
  margin-block-end: var(--space-5);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
}

.tb-comments .comment-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.tb-comments .comment-list .children {
  list-style: none;
  /* En arabe, la réponse s'indente à droite. §5 */
  margin-inline-start: var(--space-5);
  padding-inline-start: var(--space-5);
  border-inline-start: 1px solid var(--color-border-soft);
}

.tb-comments .comment-body {
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border-soft);
}

.tb-comments .comment-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-block-end: var(--space-2);
  font-size: var(--fs-meta);
  color: var(--color-text-soft);
}

.tb-comments .comment-author img {
  border-radius: 50%;
  vertical-align: middle;
}

.tb-comments .comment-author .fn {
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.tb-comments .comment-content { line-height: var(--lh-relaxed); }
.tb-comments .comment-content p { margin-block-end: var(--space-3); }

.tb-comments .reply { margin-block-start: var(--space-2); font-size: var(--fs-meta); }
.tb-comments .reply a { color: var(--color-link); }

.tb-comments .comment-awaiting-moderation {
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--fs-meta);
  color: var(--color-warning);
}

/* Le formulaire */
.tb-comments .comment-respond { margin-block-start: var(--space-6); }

.tb-comments .comment-reply-title {
  margin-block-end: var(--space-3);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
}

.tb-comments .comment-form p { margin-block-end: var(--space-4); }

.tb-comments .comment-form label {
  display: block;
  margin-block-end: var(--space-1);
  font-size: var(--fs-meta);
  color: var(--color-text-soft);
}

.tb-comments .comment-form input[type="text"],
.tb-comments .comment-form input[type="email"],
.tb-comments .comment-form input[type="url"],
.tb-comments .comment-form textarea {
  inline-size: 100%;
  min-block-size: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-background);
  color: var(--color-text);
  /* 15px minimum, sinon iOS zoome à la mise au point. §52 */
  font-size: var(--fs-input);
  font-family: inherit;
}

.tb-comments .comment-form textarea {
  min-block-size: 7rem;
  line-height: var(--lh-body);
  resize: vertical;
}

.tb-comments .comment-form input:focus-visible,
.tb-comments .comment-form textarea:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.tb-comments .comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-meta);
}

.tb-comments .comment-form .comment-form-cookies-consent label {
  margin-block-end: 0;
  color: var(--color-text);
}

.tb-comments .comment-notes,
.tb-comments .logged-in-as {
  font-size: var(--fs-meta);
  color: var(--color-text-soft);
}

.tb-comments .form-submit .submit {
  min-block-size: var(--tap-target);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-accent-hover);
  border-radius: var(--radius-lg);
  background-color: var(--color-accent);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-button);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.tb-comments .form-submit .submit:hover { background-color: var(--color-accent-hover); }

.tb-comments .comment-navigation { margin-block-end: var(--space-5); font-size: var(--fs-meta); }

.tb-comments .no-comments {
  font-size: var(--fs-body);
  color: var(--color-text-soft);
}


/* --------------------------------------------------------------------------
   Téléphone
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .tb-section-head { margin-block-end: var(--space-5); }

  /* Une réponse imbriquée ne doit pas réduire le texte à une colonne de
     deux mots : on garde le filet, on supprime la marge. */
  .tb-comments .comment-list .children {
    margin-inline-start: var(--space-2);
    padding-inline-start: var(--space-3);
  }
}