/*
 * Gabarits « Article » (single) et « Article d'archive » — refonte du
 * 20/10/2026, validée par Eric : une colonne de lecture centrée de 680 px
 * (fil d'Ariane, surtitre, titre, corps, lien de fin, commentaires), et des
 * images BORD À BORD qui sortent de la colonne. Aucun chapô : le premier
 * paragraphe est à la taille du texte courant.
 * Chargé uniquement sur ces gabarits (functions.php).
 * Règle de spécificité : deux classes, ou une classe et un élément.
 * Tailles fixes en rem (racine 16 px).
 */

/* ---------- Bande : colonne centrée de 680 px, marges clamp(20px, 5vw, 80px) ----------
 * Grille à trois pistes : marge, colonne, marge. Tout enfant va dans la
 * colonne ; une image prend les trois pistes (bord à bord), sans 100vw ni
 * marge négative : aucun défilement horizontal, barre de défilement comprise. */
.wp-block-group.article-lecture,.article-lecture .wp-block-post-content.corps-article{
	--bande:clamp(1.25rem,5vw,5rem);
	display:grid;grid-template-columns:[plein-start] minmax(var(--bande),1fr) [colonne-start] minmax(0,42.5rem) [colonne-end] minmax(var(--bande),1fr) [plein-end];
	align-content:start}
.article-lecture > *,.article-lecture .corps-article > *{grid-column:colonne;min-width:0}
.wp-block-group.article-lecture{padding-bottom:3.5rem}

/* Fil d'Ariane dans la colonne (la partie de modèle porte sa propre marge). */
.article-lecture .wp-block-group.fil-ariane{padding-left:0;padding-right:0}

/* ---------- Surtitre : catégorie et date ---------- */
.wp-block-group.tete-archive{padding:2.875rem 0 0}
.tete-archive .wp-block-group.surtitre{gap:.5em;margin:0 0 1rem}
.surtitre p,.surtitre .wp-block-post-terms,.surtitre .wp-block-post-date{margin:0;max-width:none;font-family:var(--wp--preset--font-family--mono);
	font-size:.625rem;font-weight:400;letter-spacing:.05625rem;line-height:normal;text-transform:uppercase;color:var(--wp--preset--color--gris)}

/* ---------- Titre (H1) : Sans 44 px, graisse 200 ---------- */
.tete-archive h1.wp-block-post-title{margin:0;max-width:none;font-size:2.75rem;font-weight:200;line-height:1.1;letter-spacing:-.1rem;color:var(--wp--preset--color--encre)}

/* ---------- Avis « Archive » (gabarit article-archive) ---------- */
.article-lecture p.avis{max-width:none;margin:1.75rem 0 0;padding:18px 22px;background:var(--wp--preset--color--papier-2);border-left:2px solid var(--wp--preset--color--ardoise);
	font-size:.84375rem;line-height:1.8;color:var(--wp--preset--color--encre-douce)}
p.avis strong{color:var(--wp--preset--color--encre)}
p.avis a{border-bottom:1px solid var(--wp--preset--color--filet)}
p.avis a:hover{border-color:var(--wp--preset--color--encre)}

/* ---------- Image d'ouverture : bord à bord ---------- */
.article-lecture > .wp-block-post-featured-image.ouverture-article{grid-column:plein;margin:2.5rem 0 0}
.ouverture-article picture,.ouverture-article img{display:block;width:100%;height:auto}

/* ---------- Corps : 17 px, graisse 300, interligne 1,72 ---------- */
.article-lecture > .wp-block-post-content.corps-article{grid-column:plein;margin-top:2.5rem}
.article-lecture .corps-article > p,.article-lecture .corps-article li{max-width:none;font-size:1.0625rem;font-weight:300;line-height:1.72;color:var(--wp--preset--color--encre-douce)}
/* Espacements, du plus général au plus précis (même spécificité : l'ordre tranche).
 * 24 px entre paragraphes ; 52 px au-dessus d'un H2, 18 px dessous ;
 * 40 px autour d'une image, d'une citation, d'un tableau, d'une vidéo. */
.article-lecture .corps-article > *{margin-top:1.5rem;margin-bottom:0}
.article-lecture .corps-article > :first-child{margin-top:0}
.article-lecture .corps-article > ul,.article-lecture .corps-article > ol{padding-left:1.25em}
.article-lecture .corps-article li{margin:0}
.article-lecture .corps-article li + li{margin-top:.5rem}
.article-lecture .corps-article p a,.article-lecture .corps-article li a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}

/* Titres dans la colonne, à l'alignement et à la largeur des paragraphes. */
.article-lecture .corps-article > h2{max-width:none;font-size:1.8rem;font-weight:300;line-height:1.15;letter-spacing:-.05375rem;color:var(--wp--preset--color--encre)}
.article-lecture .corps-article > h3,.article-lecture .corps-article > h4{max-width:none;font-size:1.25rem;font-weight:400;line-height:1.3;letter-spacing:-.02em;color:var(--wp--preset--color--encre)}

/* Citation, tableau, vidéo : dans la colonne. */
.article-lecture .corps-article > .wp-block-quote{padding:0 0 0 1.25rem;border-left:2px solid var(--wp--preset--color--ardoise)}
.article-lecture .corps-article > .wp-block-quote p{font-size:1.0625rem;font-weight:300;line-height:1.72;color:var(--wp--preset--color--encre)}
.article-lecture .corps-article > .wp-block-table table{width:100%;border-collapse:collapse;font-size:.9375rem}
.article-lecture .corps-article > .wp-block-table td,.article-lecture .corps-article > .wp-block-table th{padding:8px 10px;border-bottom:1px solid var(--wp--preset--color--filet)}
.article-lecture .corps-article .wp-block-embed iframe{width:100%;max-width:100%}

/* ---------- Images du corps : BORD À BORD ----------
 * Bloc Image (nouveau et ancien format, dont l'enveloppe div.wp-block-image),
 * Galerie (liste blocks-gallery-grid ou images imbriquées). */
.article-lecture .corps-article > .wp-block-image,.article-lecture .corps-article > .wp-block-gallery{grid-column:plein;max-width:none;width:auto}
.article-lecture .corps-article .wp-block-image figure{margin:0;display:block;width:auto}
.article-lecture .corps-article .wp-block-image.is-resized,.article-lecture .corps-article .wp-block-image figure.is-resized{display:block}
.article-lecture .corps-article .wp-block-image img{display:block;width:100%;height:auto;max-width:none}
/* Image en portrait (rare) : hauteur bornée, centrée, jamais recadrée. */
.article-lecture .corps-article .wp-block-image.portrait img{width:auto;max-height:85vh;margin:0 auto}
/* Légende : revient dans la colonne de lecture. */
.article-lecture .corps-article .wp-block-image figcaption,.article-lecture .corps-article .wp-block-gallery > figcaption{box-sizing:border-box;max-width:calc(42.5rem + 2 * clamp(1.25rem,5vw,5rem));margin:.75rem auto 0;
	padding:0 clamp(1.25rem,5vw,5rem);font-family:var(--wp--preset--font-family--mono);font-size:.625rem;letter-spacing:.05625rem;line-height:1.6;text-align:left;color:var(--wp--preset--color--gris)}

/* Galerie : N colonnes (variable posée au rendu), 2 sous 600 px, gouttière de 3 px. */
.article-lecture .corps-article .blocks-gallery-grid,.article-lecture .corps-article .wp-block-gallery.has-nested-images{display:grid;grid-template-columns:repeat(var(--colonnes,3),minmax(0,1fr));gap:3px;margin:0;padding:0;list-style:none}
.article-lecture .corps-article .blocks-gallery-grid .blocks-gallery-item{width:auto;margin:0;padding:0}
.article-lecture .corps-article .blocks-gallery-grid figure,.article-lecture .corps-article .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){width:auto;height:100%;margin:0}
.article-lecture .corps-article .wp-block-gallery img{display:block;width:100%;height:100%;max-width:none}
.article-lecture .corps-article .wp-block-gallery.is-cropped img{aspect-ratio:3/2;object-fit:cover}

/* Espacements particuliers (après les règles générales : l'ordre tranche). */
.article-lecture .corps-article > .wp-block-image,.article-lecture .corps-article > .wp-block-gallery,.article-lecture .corps-article > .wp-block-quote,.article-lecture .corps-article > .wp-block-table,.article-lecture .corps-article > .wp-block-embed,
.article-lecture .corps-article > .wp-block-image + *,.article-lecture .corps-article > .wp-block-gallery + *,.article-lecture .corps-article > .wp-block-quote + *,.article-lecture .corps-article > .wp-block-table + *,.article-lecture .corps-article > .wp-block-embed + *{margin-top:2.5rem}
.article-lecture .corps-article > h2,.article-lecture .corps-article > .wp-block-image + h2,.article-lecture .corps-article > .wp-block-gallery + h2{margin-top:3.25rem}
.article-lecture .corps-article > h3,.article-lecture .corps-article > h4{margin-top:2.5rem}
.article-lecture .corps-article > h2 + *,.article-lecture .corps-article > h3 + *,.article-lecture .corps-article > h4 + *{margin-top:1.125rem}
.article-lecture .corps-article > :first-child{margin-top:0}

/* ---------- Fin d'article : lien vers le domaine ---------- */
.wp-block-group.fin-article{margin-top:3.5rem;padding-top:1.75rem;border-top:1px solid var(--wp--preset--color--filet)}
.fin-article p.etiquette{margin:0 0 .625rem;max-width:none;font-family:var(--wp--preset--font-family--mono);font-size:.625rem;letter-spacing:.05625rem;line-height:normal;
	text-transform:uppercase;color:var(--wp--preset--color--gris)}
.fin-article .wp-block-post-terms.lien-pilier{margin:0;max-width:none;font-size:1.25rem;font-weight:300;letter-spacing:-.02em;line-height:1.3}
.fin-article .lien-pilier a{color:var(--wp--preset--color--encre);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.fin-article .lien-pilier a:hover{text-decoration-thickness:2px}

/* ---------- Fin d'article : « À lire aussi » (Eric, 20/10/2026) ----------
 * Jusqu'à trois cartes de la même catégorie (inc/articles-lies.php), AVANT le
 * lien vers le pilier. La carte entière est cliquable (lien du titre étiré),
 * la vignette est décorative. Sans image : aplat aux mêmes dimensions. */
.fin-article .wp-block-query.articles-lies{margin:0 0 2.5rem}
.articles-lies .wp-block-post-template.cartes-lies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin:.875rem 0 0;padding:0;list-style:none}
.cartes-lies .wp-block-group.carte-lie{position:relative;margin:0}
.carte-lie .wp-block-post-featured-image.vignette-lie{aspect-ratio:3/2;margin:0;overflow:hidden;background:var(--wp--preset--color--papier-2)}
.carte-lie .vignette-lie img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--wp--custom--courbe)}
.carte-lie p.titre-lie{margin:.625rem 0 0;max-width:none;font-size:1rem;font-weight:400;letter-spacing:-.01em;line-height:1.3;color:var(--wp--preset--color--encre)}
.carte-lie .titre-lie a{color:inherit;text-decoration:none}
.carte-lie .titre-lie a::after{content:"";position:absolute;inset:0}
.carte-lie:hover .titre-lie a,.carte-lie .titre-lie a:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.carte-lie:hover .vignette-lie img{transform:scale(1.03)}

/* ---------- Commentaires (Eric, 20/10/2026) ----------
   Les 15 commentaires approuvés de l'ancien site étaient visibles, donc
   indexés : affichés ici, sans formulaire (aucun nouveau commentaire).
   Les commentaires en attente restent masqués par WordPress. */
.wp-block-comments.commentaires{margin:3.5rem 0 0;padding-top:34px;border-top:1px solid var(--wp--preset--color--filet)}
.commentaires h2.wp-block-comments-title{margin:0 0 22px;font-size:clamp(1.05rem,1.8vw,1.3rem);font-weight:300;letter-spacing:-.025em;line-height:normal}
.commentaires .wp-block-comment-template{margin:0;padding:0;list-style:none}
.commentaires .wp-block-comment-template ol{margin:0;padding-left:28px;list-style:none;border-left:1px solid var(--wp--preset--color--filet)}
.commentaires .commentaire{padding:16px 0}
.commentaires .commentaire-tete{gap:4px 16px;align-items:baseline}
.commentaires .wp-block-comment-author-name{font-size:.9375rem;font-weight:500}
.commentaires .wp-block-comment-date{font-family:var(--wp--preset--font-family--mono);font-size:.65625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--wp--preset--color--gris)}
.commentaires .wp-block-comment-content p{max-width:none;margin:8px 0 0;font-size:.9375rem;line-height:1.8;color:var(--wp--preset--color--encre-douce)}

/* ---------- 600 px et moins : une colonne, marges 20 px ---------- */
@media (max-width:600px){
	/* Cartes empilées, vignette de 7,5rem à gauche du titre. */
	.articles-lies .wp-block-post-template.cartes-lies{grid-template-columns:1fr;gap:1rem}
	.cartes-lies .wp-block-group.carte-lie{display:grid;grid-template-columns:7.5rem 1fr;gap:.875rem;align-items:center}
	.carte-lie p.titre-lie{margin:0}
	.wp-block-group.tete-archive{padding-top:2rem}
	.tete-archive h1.wp-block-post-title{font-size:2rem;letter-spacing:-.06875rem}
	.article-lecture .corps-article > h2{font-size:1.375rem}
	.article-lecture .corps-article > p + p{margin-top:1.375rem}
	.article-lecture .corps-article .blocks-gallery-grid,.article-lecture .corps-article .wp-block-gallery.has-nested-images{grid-template-columns:repeat(2,minmax(0,1fr))}
	.article-lecture .corps-article [style*="--colonnes:1"] .blocks-gallery-grid,.article-lecture .corps-article .wp-block-gallery.has-nested-images[style*="--colonnes:1"]{grid-template-columns:1fr}
}