/* Contenu des articles et sections « texte » : texte, images, boutons, blocs,
   motifs de fond et cartes d'articles. Aussi chargé par l'aperçu de l'éditeur.
   Variables réglables par article : --texte-taille, --titres, --titres-police, --liens. */

.prose { font-size: calc(1.05rem * var(--texte-taille, 1)); line-height: 1.7; overflow-wrap: break-word; color: var(--text); }
.prose::after { content: ""; display: block; clear: both; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.45em; line-height: 1.3; margin: 1.8em 0 0.5em; font-weight: 600; color: var(--titres, var(--accent)); font-family: var(--titres-police, inherit); }
.prose h3 { font-size: 1.15em; line-height: 1.3; margin: 1.5em 0 0.4em; font-weight: 600; color: var(--titres, inherit); font-family: var(--titres-police, inherit); }
.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 1.1em; }
.prose a { color: var(--liens, var(--accent)); }
.prose strong { font-weight: 700; }

.prose img, .prose video { display: block; max-width: 100%; height: auto; margin: 1.6em auto; border-radius: var(--images-arrondi, 0); }
.prose p > img:only-child { margin: 0 auto; }
.prose iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; margin: 1.6em 0; border-radius: var(--radius); }

.prose blockquote { padding: 4px 18px; border-left: 4px solid var(--accent); color: var(--text-dim); }
.prose hr { border: 0; border-top: 2px dashed color-mix(in srgb, var(--text), transparent 75%); margin: 2.2em 0; clear: both; }
.prose code { background: var(--surface); padding: 1px 6px; border-radius: 6px; font-size: 0.9em; }
.prose pre { background: var(--surface); padding: 14px 16px; border-radius: var(--radius); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }

.prose table { width: 100%; margin: 1.6em 0; border-collapse: collapse; clear: both; }
.prose th, .prose td { padding: 0.7em 1em; border: 1px solid color-mix(in srgb, var(--text), transparent 82%); text-align: left; vertical-align: top; }
.prose th { font-weight: 700; font-family: var(--titres-police, inherit); color: var(--titres, var(--text)); }
.prose td { background: color-mix(in srgb, var(--colonne-fond, var(--bg)), transparent 70%); }

/* Styles de texte : ==surligné==, <grand>, <petit>, <rose> */
.prose mark { background: color-mix(in srgb, var(--highlight), #fff 25%); color: inherit; padding: 0 3px; border-radius: 4px; }
.prose grand { font-size: 1.3em; font-weight: 600; line-height: 1.4; }
.prose petit { font-size: 0.85em; color: var(--text-dim); }
.prose rose { color: var(--accent); font-weight: 600; }

/* <image taille=".." position=".." legende=".."> */
.prose .image { margin: 1.6em auto; }
.prose .image img { width: 100%; margin: 0; }
.prose .image figcaption { margin-top: 6px; font-size: 0.85rem; color: var(--text-dim); text-align: center; font-style: italic; }
.prose .image-petite  { width: 33%; }
.prose .image-moyenne { width: 50%; }
.prose .image-grande  { width: 75%; }
.prose .image-pleine  { width: 100%; }
.prose .image-a-cote { display: flow-root; margin: 1.6em 0; }
.prose .image-a-cote > p:last-child { margin-bottom: 0; }
.prose .image-gauche { float: left;  margin: 0.3em 1.6em 1em 0; }
.prose .image-droite { float: right; margin: 0.3em 0 1em 1.6em; }

/* <bouton lien=".." style=".."> */
.prose .boutons { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.8em 0; clear: both; }
.prose .boutons.centre { justify-content: center; }
.prose .bouton {
    --btn-bg: var(--accent);
    --btn-text: var(--on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 26px;
    border: none;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-text);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--btn-bg), #000 35%);
    transition: transform 0.1s ease, background-color 0.15s ease;
}
.prose .bouton:hover { background: color-mix(in srgb, var(--btn-bg), #fff 15%); }
.prose .bouton:active { transform: translateY(4px); box-shadow: none; }
.prose .bouton-rose  { --btn-bg: var(--accent); --btn-text: var(--on-accent); }
.prose .bouton-jaune { --btn-bg: var(--cta);    --btn-text: var(--on-cta); }
.prose .bouton-contour { background: transparent; color: inherit; border: 2px solid color-mix(in srgb, currentColor, transparent 55%); box-shadow: none; }
.prose .bouton-contour:hover { background: transparent; border-color: currentColor; }

/* Blocs : <encadre>, <centre>, <colonnes>, <galerie> */
.prose .bloc-encadre { --encadre: var(--surface); margin: 1.8em 0; padding: 20px 24px; border-radius: var(--radius); background: var(--encadre); clear: both; }
.prose .bloc-encadre > :last-child { margin-bottom: 0; }
.prose .bloc-encadre-jaune { --encadre: color-mix(in srgb, var(--cta), #fff 40%); }
.prose .bloc-encadre-rose  { --encadre: color-mix(in srgb, var(--accent), #fff 82%); }
.prose .bloc-encadre-bleu  { --encadre: var(--band); color: var(--band-text); }
.prose .bloc-encadre-bleu h2, .prose .bloc-encadre-bleu h3, .prose .bloc-encadre-bleu a { color: var(--band-text); }

.prose .bloc-centre { text-align: center; }
.prose .bloc-centre .boutons { justify-content: center; }

.prose .bloc-colonnes { display: grid; gap: 24px; margin: 1.8em 0; align-items: start; clear: both; }
.prose .bloc-colonne > :first-child { margin-top: 0; }
.prose .bloc-colonne > :last-child { margin-bottom: 0; }
.prose .bloc-colonne img, .prose .bloc-colonne .image { margin: 0 auto; }

.prose .bloc-galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 1.8em 0; clear: both; }
.prose .bloc-galerie p { display: contents; }
.prose .bloc-galerie img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; border-radius: var(--images-arrondi, calc(var(--radius) / 2)); }

@media (min-width: 640px) {
    .prose .bloc-colonnes { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .prose .bloc-galerie { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
    .prose .image-petite  { width: 60%; }
    .prose .image-moyenne, .prose .image-grande { width: 100%; }
    .prose .image-gauche, .prose .image-droite { float: none; margin: 1.6em auto; }
}

/* Motifs de fond : --page-fond, --page-motif, --page-image */
.fond-pois    { background-image: radial-gradient(circle, var(--page-motif) 32%, transparent 33%); background-size: 84px 84px; }
.fond-etoiles {
    --etoile: color-mix(in srgb, var(--page-motif), #fff 45%);
    background-image:
        radial-gradient(circle, var(--etoile) 1.5px, transparent 2.5px),
        radial-gradient(circle, var(--etoile) 1px, transparent 2px),
        radial-gradient(circle, var(--etoile) 2px, transparent 3px);
    background-size: 97px 97px, 61px 61px, 173px 173px;
    background-position: 0 0, 23px 37px, 71px 13px;
}
.fond-rayures { background-image: repeating-linear-gradient(45deg, var(--page-motif) 0 18px, transparent 18px 36px); }
.fond-damier  { background-image: conic-gradient(var(--page-motif) 25%, transparent 0 50%, var(--page-motif) 0 75%, transparent 0); background-size: 64px 64px; }
.fond-uni     { background-image: none; }
.fond-image   { background-image: var(--page-image, none); background-size: cover; background-position: center; background-attachment: fixed; }

/* --- Confort de lecture des articles (classes lecture-xxx, réglables dans l'admin) --- */

.lecture-images img { border-radius: var(--images-arrondi, 12px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); cursor: zoom-in; }
.lecture-images .bloc-galerie img { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.lecture-chapeau > p:first-child { font-size: 1.16em; line-height: 1.6; }

.sommaire { margin: 1.6em 0; padding: 14px 20px; border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.sommaire-titre { display: block; margin-bottom: 4px; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.sommaire ol { margin: 0; padding-left: 1.4em; }
.sommaire li { margin: 2px 0; }
.sommaire a { color: var(--text); text-decoration: none; }
.sommaire a:hover { color: var(--liens, var(--accent)); text-decoration: underline; }
.lecture h2[id] { scroll-margin-top: 16px; }

.lecture-titres { counter-reset: partie; }
.lecture-titres > h2 { display: flex; align-items: center; gap: 0.5em; margin-top: 2.2em; counter-increment: partie; }
.lecture-titres > h2::before { content: counter(partie); flex-shrink: 0; padding: 0.15em 0.6em; border-radius: 999px; background: var(--titres, var(--accent)); color: var(--on-accent); font-size: 0.55em; line-height: 1.5; }
.lecture-titres > h2::after { content: ''; flex: 1; min-width: 20px; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--titres, var(--accent)) 45%, transparent), transparent); }

.lecture-surligne strong { padding: 0 0.1em; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--highlight) 60%, transparent) 62%); }

.lecture-listes > ul { padding: 0; list-style: none; }
.lecture-listes > ul > li { margin: 0.5em 0; padding: 0.55em 0.9em; border-left: 3px solid var(--titres, var(--accent)); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--surface) 55%, transparent); }

.lecture-liens a[href^="http"]:not(.bouton):not(:has(img))::after { content: '↗'; margin-left: 0.15em; font-size: 0.8em; }

.lecture-fin::after { content: '✦ ✦ ✦'; display: block; margin-top: 2.4em; text-align: center; letter-spacing: 0.4em; color: var(--titres, var(--accent)); }

.progression-lecture { position: fixed; top: 0; left: 0; z-index: 50; width: 0; height: 4px; background: var(--titres, var(--accent)); }

/* Visionneuse : image cliquée en grand */
.visionneuse { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.85); cursor: zoom-out; }
.visionneuse img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }

/* Cartes d'articles aux couleurs de leur thème (cadre = fond, intérieur = colonne) */
.cartes-articles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.carte-article {
    --page-fond: var(--band);
    --page-motif: color-mix(in srgb, var(--band), #fff 7%);
    display: block;
    padding: var(--carte-cadre, 6px);
    border-radius: var(--radius);
    background-color: var(--page-fond);
    text-decoration: none;
    transition: transform 0.15s ease;
}
.carte-article:hover { transform: translateY(-3px); }
.carte-article.fond-pois    { background-size: 20px 20px; }
.carte-article.fond-damier  { background-size: 18px 18px; }
.carte-article.fond-rayures { background-image: repeating-linear-gradient(45deg, var(--page-motif) 0 6px, transparent 6px 12px); }
.carte-article.fond-etoiles { background-size: 31px 31px, 19px 19px, 47px 47px; }

.carte-colonne {
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
    border-radius: max(4px, calc(var(--radius) - var(--carte-cadre, 6px) / 2));
    background: var(--colonne-fond, var(--bg));
    color: var(--text);
}
.carte-article.sans-image .carte-colonne { grid-template-columns: minmax(0, 1fr); }
.carte-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 4px; }
.carte-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.carte-texte { display: flex; flex-direction: column; padding: 10px 12px; }
.carte-titre { display: block; margin-top: 2px; font-size: 0.98rem; line-height: 1.3; font-weight: 600; color: var(--titres, var(--text)); font-family: var(--titres-police, inherit); }
/* Pastille de catégorie : « No Space For Salad #3 » */
.categorie { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.15em 0.4em 0.15em 0.75em; border-radius: 999px; background: var(--categorie); color: var(--categorie-texte); font-size: 0.78rem; font-weight: 700; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.categorie:not(:has(b)) { padding-right: 0.75em; }
.categorie b { padding: 0 0.45em; border-radius: 999px; background: color-mix(in srgb, var(--categorie-texte) 22%, transparent); font-weight: 800; }
.carte-infos > span.categorie { padding: 0.1em 0.3em 0.1em 0.65em; background: var(--categorie) !important; color: var(--categorie-texte) !important; font-weight: 700; }
.carte-infos > span.categorie:not(:has(b)) { padding-right: 0.65em; }
.carte-infos > .categorie + span::before { content: none; }
.carte-infos > .categorie { margin: 0 100% 3px 0; } /* seule sur sa ligne, au-dessus de la date */

/* Infos : date · auteur · temps de lecture (position et style réglables) */
.carte-infos { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 0.75rem; color: var(--text-dim); }
.carte-infos > span + span::before { content: '·'; margin-right: 6px; }
.sans-auteur .carte-auteur, .sans-lecture .carte-lecture { display: none; }
.infos-dessous .carte-infos { order: 2; margin-top: 6px; }
.infos-dessous .carte-resume { order: 3; }
.infos-badges .carte-infos, .infos-haut .carte-infos { gap: 4px; }
.infos-badges .carte-infos > span, .infos-haut .carte-infos > span { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text); font-weight: 600; }
.infos-badges .carte-infos > span::before, .infos-haut .carte-infos > span::before { content: none; }
.infos-badges .carte-titre { margin-top: 6px; }
.infos-haut .carte-colonne { position: relative; }
.infos-haut .carte-article:not(.sans-image) .carte-infos { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 1; }
.infos-haut .carte-article:not(.sans-image) .carte-infos > span { background: rgba(10, 12, 28, 0.6); color: #fff; backdrop-filter: blur(4px); }
.infos-haut .carte-article.sans-image .carte-titre { margin-top: 6px; }
/* Titre sur un nombre de lignes fixe : toutes les cartes s'alignent */
.titre-lignes .carte-titre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--carte-titre-lignes); overflow: hidden; min-height: calc(var(--carte-titre-lignes) * 1.3em); }

.carte-resume { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 0.84rem; line-height: 1.45; color: var(--text-dim); }

/* Largeur fixe : autant de cartes que la ligne en contient */
.cartes-articles.largeur-fixe { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--carte-largeur)), var(--carte-largeur))) !important; }
/* Hauteur d'image fixe */
.image-fixe .carte-image { aspect-ratio: auto !important; height: var(--carte-image); }

/* Image en fond de la carte, texte posé sur un dégradé en bas */
.cartes-image .carte-article:not(.sans-image) .carte-colonne,
.cartes-image-theme .carte-article:not(.sans-image) .carte-colonne { display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-height: 220px; }
.cartes-image .carte-article:not(.sans-image) .carte-image,
.cartes-image-theme .carte-article:not(.sans-image) .carte-image { position: absolute; inset: 0; padding: 0; aspect-ratio: auto; }
.cartes-image .carte-image img,
.cartes-image-theme .carte-image img { object-fit: cover; transition: transform 0.4s ease; }
.cartes-image .carte-article:hover .carte-image img,
.cartes-image-theme .carte-article:hover .carte-image img { transform: scale(1.04); }
.cartes-image .carte-article:not(.sans-image) .carte-texte,
.cartes-image-theme .carte-article:not(.sans-image) .carte-texte { position: relative; padding-top: 48px; }

.cartes-image .carte-article:not(.sans-image) .carte-texte { background: linear-gradient(to bottom, transparent, rgba(8, 10, 24, 0.6) 35%, rgba(8, 10, 24, 0.88)); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.cartes-image .carte-article:not(.sans-image) .carte-titre { color: #fff; }
.cartes-image .carte-article:not(.sans-image) :is(.carte-infos, .carte-resume) { color: rgba(255, 255, 255, 0.82); }
.cartes-image.infos-badges .carte-article:not(.sans-image) .carte-infos > span { background: rgba(255, 255, 255, 0.18); color: #fff; }

.cartes-image-theme .carte-article:not(.sans-image) .carte-texte { background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 85%, transparent) 40%, var(--bg)); }

/* Infos en haut d'une carte à image en fond : le dégradé passe sur l'image, les infos
   se placent par rapport à la carte entière */
:is(.cartes-image, .cartes-image-theme).infos-haut .carte-article:not(.sans-image) .carte-texte { position: static; background: none; }
:is(.cartes-image, .cartes-image-theme).infos-haut .carte-article:not(.sans-image) .carte-texte > :not(.carte-infos) { position: relative; z-index: 1; }
:is(.cartes-image, .cartes-image-theme).infos-haut .carte-article:not(.sans-image) .carte-image::after { content: ''; position: absolute; inset: 0; }
.cartes-image.infos-haut .carte-article:not(.sans-image) .carte-image::after { background: linear-gradient(to bottom, transparent 40%, rgba(8, 10, 24, 0.6) 65%, rgba(8, 10, 24, 0.88)); }
.cartes-image-theme.infos-haut .carte-article:not(.sans-image) .carte-image::after { background: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--bg) 85%, transparent) 68%, var(--bg)); }

.cartes-image.image-fixe .carte-article:not(.sans-image) .carte-colonne,
.cartes-image-theme.image-fixe .carte-article:not(.sans-image) .carte-colonne { min-height: var(--carte-image); aspect-ratio: auto !important; }
.cartes-image.image-fixe .carte-image, .cartes-image-theme.image-fixe .carte-image { height: auto; }

@media (min-width: 700px) {
    .cartes-image .carte-article:not(.sans-image) .carte-colonne,
    .cartes-image-theme .carte-article:not(.sans-image) .carte-colonne { min-height: 0; aspect-ratio: 4 / 3; }
    .cartes-articles { grid-template-columns: repeat(var(--cartes-par-ligne, 3), minmax(0, 1fr)); gap: 16px; }
    .carte-colonne { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .carte-image { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
    .prose .bouton, .carte-article, .carte-image img { transition: none; }
}