/* JAFLand — thème de jafland.info
   L'allure historique du site : feuillage, titre bordeaux en italique, titres rouille,
   encadrés beige. Texte agrandi, accueil en résumés, adapté au téléphone. */

:root {
  --bordeaux: #660000;
  --rouille: #933522;
  --brun: #866c48;
  --beige: #f4ecd9;
  --beige-clair: #faf5ea;
  --bord: #e2d4b2;
  --texte: #333333;
  --gris: #6b6b6b;
  --titres: "Trebuchet MS", "Times New Roman", "New York", serif;
  --corps: Verdana, Geneva, Lucida, Helvetica, sans-serif;
  --largeur: 77.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; padding: 0 1.5rem 1.5rem; background: #efe6cf url("../../public/chinaberry21.jpg") repeat; color: var(--texte); font-family: var(--corps); font-size: 0.9375rem; line-height: 1.65; }
img, video, iframe, object, embed { max-width: 100%; }
img { height: auto; }
a { color: var(--rouille); text-decoration: none; }
a:hover { color: var(--bordeaux); text-decoration: underline; }
:focus-visible { outline: 3px solid #1f5fbf; outline-offset: 2px; }
.visually-hidden, .sr, .blognav__title, .blogextra__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Liens d'évitement ---------- */
.skip-links { list-style: none; margin: 0; padding: 0; }
.skip-links a { position: absolute; left: -999rem; top: 0; background: #fff; color: var(--texte); padding: 0.6rem 1rem; z-index: 10; }
.skip-links a:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- En-tête : le titre sur le feuillage ---------- */
.banner { text-align: center; padding: 1.6rem 0.5rem 1.25rem; }
.site-title { margin: 0; font-family: var(--titres); font-style: italic; font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); line-height: 1.1; }
.site-title a, .site-title a:visited { color: var(--bordeaux); text-decoration: none; }
.site-title a:hover { color: var(--rouille); text-decoration: none; }

/* Rubriques : une ligne de liens en tête de la feuille blanche */
.rubriques { max-width: var(--largeur); margin: 0 auto; background: var(--beige-clair); border: 1px solid var(--bord); border-bottom: 0; padding: 0.6rem 1.75rem; }
.rubriques__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.15rem; font-family: var(--titres); font-size: 0.875rem; line-height: 1.6; }
.rubriques__item a { color: var(--rouille); }

/* ---------- La feuille blanche ---------- */
.wrapper { max-width: var(--largeur); margin: 0 auto; background: #fff; border: 1px solid var(--bord); padding: 0.25rem 1.75rem 1.75rem; display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 1.75rem; align-items: start; }
.main { min-width: 0; }
#breadcrumb, .breadcrumb { font-size: 0.8rem; color: var(--gris); margin: 1rem 0 0; }

/* ---------- Liste d'articles (accueil, rubriques, recherche) ---------- */
.post.short { padding: 1.5rem 0 1.4rem; border-bottom: 2px solid var(--rouille); }
.post-title { font-family: var(--titres); font-weight: 400; color: var(--rouille); text-align: center; line-height: 1.3; }
.post.short .post-title { margin: 0 0 0.35rem; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.375rem); }
.post-title a, .post-title a:visited { color: var(--rouille); }
.post-info { margin: 0 0 1rem; font-size: 0.8125rem; color: var(--gris); text-align: center; }
.post-summary { overflow: hidden; }
.post-summary > p { margin: 0 0 0.75rem; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.post-icon { float: right; width: 26%; max-width: 150px; margin: 0.2rem 0 0.6rem 1.15rem; border: 1px solid var(--bord); }
.post.short:nth-of-type(even) .post-icon { float: left; margin: 0.2rem 1.15rem 0.6rem 0; }
/* Bandeaux très larges : pleine largeur au-dessus du résumé (classe posée par jafland.js) */
.post.short .post-icon.post-icon--bandeau { float: none; display: block; width: auto; max-width: 100%; margin: 0 auto 0.9rem; }
.post-summary > p.post-read-it { margin: 0; text-align: left; font-size: 0.875rem; }
.post-read-it a { text-decoration: underline; }
.post-read-it .comment_count { margin-left: 1rem; color: var(--gris); text-decoration: none; }

/* ---------- En-tête de rubrique / recherche / archives ---------- */
.content-info { border-bottom: 2px solid var(--rouille); padding: 1rem 0 0.8rem; text-align: center; }
.content-info h2 { margin: 0 0 0.4rem; font-family: var(--titres); font-weight: 400; font-size: 1.6rem; color: var(--bordeaux); line-height: 1.2; }
.content-info .feeds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.2rem; font-size: 0.8rem; }

/* ---------- Article ---------- */
.navlinks { font-size: 0.8125rem; color: var(--gris); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1.5rem; margin: 1rem 0; }
.navlinks .navlinks-separator, .navlinks.topnl { display: none; }
.navlinks:not(.topnl) { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--bord); }
.post.simple, .post.full { padding-top: 1.25rem; }
.post.simple .post-title, .post.full .post-title { margin: 0 0 0.4rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); text-wrap: balance; }
.post.simple > header .post-meta, .post.full > header .post-meta { font-size: 0.8125rem; color: var(--gris); text-align: center; padding-bottom: 1rem; margin-bottom: 1.4rem; border-bottom: 2px solid var(--rouille); }
.post-meta p { margin: 0; }
.post-permalink { display: none; }
.post-tags-list { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.8rem; }

.post-excerpt, .post-content { text-align: justify; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.post-excerpt { margin-bottom: 1.4rem; }
.post-excerpt::after, .post-content::after { content: ""; display: block; clear: both; }
.post-excerpt p, .post-content p { margin: 0 0 1em; }
.post-excerpt > :last-child, .post-content > :last-child { margin-bottom: 0; }
.post-content h2, .post-content h3, .post-content h4, .post-content h5,
.post-excerpt h2, .post-excerpt h3, .post-excerpt h4 { font-family: var(--titres); font-weight: 700; color: var(--rouille); text-align: left; hyphens: manual; line-height: 1.3; margin: 1.8em 0 0.6em; }
.post-content h2, .post-excerpt h2 { font-size: 1.3rem; }
.post-content h3, .post-excerpt h3 { font-size: 1.15rem; }
.post-content h4, .post-excerpt h4 { font-size: 1.05rem; }
.post-content ul, .post-content ol, .post-excerpt ul, .post-excerpt ol { padding-left: 1.5rem; margin: 0 0 1em; }
.post-content li, .post-excerpt li { margin-bottom: 0.35em; }
.post-content blockquote, .post-excerpt blockquote { margin: 1.3em 0; padding: 0.6em 1.1rem; background: var(--beige-clair); border: 1px solid var(--bord); font-style: italic; }
.post-content pre, .post-excerpt pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--beige-clair); border: 1px solid var(--bord); padding: 1rem; font-size: 0.875em; line-height: 1.5; text-align: left; hyphens: manual; }
.post-content hr, .post-excerpt hr { border: 0; border-top: 1px solid var(--bord); margin: 2em 0; }
.post-content table, .post-excerpt table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.875rem; text-align: left; hyphens: manual; }
.post-content th, .post-content td, .post-excerpt th, .post-excerpt td { border: 1px solid var(--bord); padding: 0.4rem 0.6rem; vertical-align: top; }
/* Les images insérées avec des dimensions fixes ne débordent plus de la colonne */
.post-content img, .post-excerpt img { max-width: 100% !important; height: auto !important; }
.post-content figure, .post-excerpt figure { margin: 1.4em 0; max-width: 100%; }
.post-content figcaption, .post-excerpt figcaption { font-size: 0.8125rem; color: var(--gris); text-align: center; }
.post-content [style*="width"], .post-excerpt [style*="width"] { max-width: 100%; }
.post-attachments { margin-top: 2rem; }

/* ---------- Commentaires ---------- */
.post-feedback, #comments, #pings, #comment-form { margin-top: 2.25rem; }
.post-feedback h3, #comments h3, #pr h3, #comment-form h3 { font-family: var(--titres); font-weight: 400; font-size: 1.25rem; color: var(--rouille); margin: 0 0 1rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--brun); }
.comments-list { list-style: none; margin: 0; padding: 0; }
.comment, .ping { padding: 0.9rem 1rem; margin-bottom: 0.6rem; background: var(--beige-clair); border: 1px solid var(--bord); overflow-wrap: break-word; }
.comment-info { margin: 0 0 0.4rem; font-size: 0.8125rem; color: var(--gris); }
.comment-number { margin-right: 0.3rem; }
.comment-content { font-size: 0.875rem; line-height: 1.6; }
.comment-content p { margin: 0 0 0.8em; }
.comments-feed { font-size: 0.8125rem; }
.field { margin: 0 0 1rem; }
.field label { display: block; font-weight: 700; margin-bottom: 0.25rem; font-size: 0.875rem; }
input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], textarea, select { font: inherit; font-size: 0.9375rem; width: 100%; max-width: 100%; padding: 0.5rem 0.6rem; border: 1px solid #b9a77f; background: #fff; color: var(--texte); }
textarea { min-height: 9rem; }
button, input[type="submit"], input[type="button"] { font-family: var(--titres); font-size: 0.9375rem; padding: 0.5rem 1rem; border: 1px solid var(--rouille); background: var(--rouille); color: #fff; cursor: pointer; }
button:hover, input[type="submit"]:hover, input[type="button"]:hover { background: var(--bordeaux); border-color: var(--bordeaux); }
input.preview, button.preview { background: #fff; color: var(--rouille); }
.form-help, .comment-form-message { font-size: 0.8125rem; color: var(--gris); }
.error { background: #fdecec; border: 1px solid #d9a1a1; padding: 0.7rem 1rem; }
.message { background: #eef6ee; border: 1px solid #a9cfa9; padding: 0.7rem 1rem; }

/* ---------- Pagination ---------- */
.pagination { margin-top: 1.5rem; text-align: center; color: var(--gris); font-size: 0.875rem; }

/* ---------- Colonne de droite : les encadrés beige ---------- */
.sidebar { font-size: 0.8125rem; line-height: 1.6; min-width: 0; padding-top: 1.4rem; }
#blognav, #blogextra { display: flex; flex-direction: column; gap: 0.5rem; }
#blogextra { margin-top: 0.5rem; }
.sidebar .widget { background: var(--beige); border: 1px solid var(--bord); padding: 0.25rem 0.875rem 0.875rem; overflow-wrap: break-word; }
.sidebar .widget h2, .sidebar .widget h3 { font-family: var(--titres); font-weight: 400; font-size: 0.9375rem; color: var(--rouille); line-height: 1.3; margin: 0 0 0.5rem; padding: 0.5rem 0 0.25rem; border-bottom: 1px solid var(--brun); }
.sidebar .widget p { margin: 0 0 0.6rem; }
.sidebar .widget p:last-child { margin-bottom: 0; }
.sidebar .widget ul { list-style: none; margin: 0; padding: 0; }
.sidebar .widget ul ul { padding-left: 1rem; }
.sidebar .widget li { padding: 0.15rem 0; }
.sidebar .widget img { display: block; margin: 0.3rem 0; }
/* La recherche passe en tête de colonne */
.sidebar .widget.search { order: -1; }
.sidebar .widget.search form p, .sidebar .widget.search p { display: flex; gap: 0.35rem; margin: 0; }
.sidebar .widget.search input[type="search"], .sidebar .widget.search input[type="text"] { flex: 1 1 auto; min-width: 0; font-size: 0.875rem; }
.sidebar .widget.search input[type="submit"], .sidebar .widget.search button { flex: 0 0 auto; padding: 0.4rem 0.7rem; font-size: 0.875rem; }
/* Rubriques déjà en tête de page ; anciens mouchards sans contenu visible */
.sidebar .widget.categories, .sidebar .widget.text:has(script) { display: none; }

/* ---------- Pied de page ---------- */
.gotop { max-width: var(--largeur); margin: 0 auto; padding: 0.6rem 0 0; font-size: 0.8125rem; text-align: right; }
.gotop a { background: #fff; padding: 0.2rem 0.6rem; }
.footer { max-width: var(--largeur); margin: 0.6rem auto 0; font-size: 0.75rem; text-align: center; color: #4a3b22; }
.footer > * { margin-left: auto; margin-right: auto; }
.footer__widgets { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.footer .widget { background: #fff; border: 1px solid var(--bord); padding: 0.4rem 0.9rem; text-align: left; }
.blogcustom__title { display: none; }
.footer .widget h2, .footer .widget h3 { font-family: var(--titres); font-weight: 400; font-size: 0.875rem; color: var(--rouille); margin: 0 0 0.2rem; }
.footer .widget ul { list-style: none; margin: 0; padding: 0; }
.poweredby { display: inline-block; margin: 0.6rem 0 0; background: #fff; padding: 0.3rem 0.8rem; }

/* ---------- Archives, mots-clés ---------- */
.arch-list { padding-left: 1.2rem; }
.arch-block h3 { font-family: var(--titres); font-weight: 400; color: var(--rouille); font-size: 1.15rem; }

/* ---------- Écrans moyens : la colonne passe sous les articles ---------- */
@media (max-width: 62rem) {
  .wrapper { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .sidebar { padding-top: 0; }
  #blognav, #blogextra { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); align-items: start; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 48rem) {
  body { padding: 0 0.375rem 1rem; }
  .banner { padding: 1rem 0.25rem 0.85rem; }
  .rubriques { padding: 0.5rem 0.75rem; }
  .rubriques__list { gap: 0.2rem 0.9rem; font-size: 0.875rem; }
  .wrapper { padding: 0.25rem 0.875rem 1.25rem; }
  .post-summary > p, .post-excerpt, .post-content { text-align: left; }
  .post-icon { width: 30%; margin-left: 0.875rem; }
  .post.short:nth-of-type(even) .post-icon { margin-right: 0.875rem; }
  #blognav, #blogextra { display: flex; }
  /* Les images flottantes des articles passent au-dessus du texte au lieu de l'écraser */
  .post-content img[style*="float"], .post-excerpt img[style*="float"],
  .post-content [style*="float"]:has(> img), .post-excerpt [style*="float"]:has(> img) { float: none !important; display: block; margin: 0.4rem auto 1rem !important; }
}

@media print {
  body { background: #fff; padding: 0; }
  .rubriques, .sidebar, .gotop, .navlinks, #comment-form { display: none; }
  .wrapper { border: 0; padding: 0; display: block; }
}