/* ==========================================================================
   JOURNAL INFOLUMIÈRE — mise en page de /journal et /journal/<slug>
   --------------------------------------------------------------------------
   Posée APRÈS v42-pages.css : elle ne redéfinit ni couleur, ni police, ni
   bouton. Elle lit les jetons de l'accueil (--il-*, composants-v42.css /
   v42-pages.css) et les variables de la variante claire (.clair : --warm-*,
   --gold-*), et ne porte que la mise en page propre au Journal : cartes
   d'articles, colonne de lecture, encarts, CTA.
   Lumière sobre : un seul reflet par carte, aucun sur une carte à photo.
   ========================================================================== */

/* ---------- accès clavier ---------- */
.j-sauter { position: absolute; left: 16px; top: -80px; z-index: 200; padding: 12px 18px; border-radius: 999px; background: var(--il-ivory); color: var(--il-titre-jour); font-weight: 500; transition: top .2s; }
.j-sauter:focus { top: 12px; }
main#contenu:focus { outline: none; }
[data-page="journal"] main a:focus-visible, [data-page="journal"] main .chip:focus-visible { outline: 2px solid var(--il-champagne); outline-offset: 3px; border-radius: 6px; }
[data-page="journal"] main .clair a:focus-visible { outline-color: var(--il-gold-jour); }

/* ---------- bandeau de préproduction (jamais en production) ---------- */
.j-demo { position: fixed; z-index: 150; left: 16px; bottom: 16px; max-width: min(360px, calc(100vw - 32px)); margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 12px; line-height: 1.45; color: var(--il-bg-deep); background: var(--il-champagne); box-shadow: 0 12px 30px -14px rgba(4, 25, 53, .55); }

/* ---------- en-tête de page ---------- */
.j-tete { padding-bottom: clamp(56px, 7vw, 96px); }
.j-tete .page-title { max-width: 18ch; }
.j-tete--article .page-title { max-width: 22ch; } /* taille V4.2 de .page-title (v42-pages.css) */
.j-tete .eyebrow a { color: inherit; text-decoration: none; }
.j-tete .eyebrow a:hover { color: var(--il-champagne); }
.j-ariane span[aria-current] { color: var(--il-text-secondary); }
.j-chapo { max-width: 62ch; }
.j-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; font-size: 14px; color: var(--il-text-secondary); }
.j-meta a { color: var(--il-champagne); }

.j-rubriques ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 0; padding: 0; list-style: none; }
.j-rubriques .chip { min-height: 44px; text-decoration: none; }

.j-couverture { margin: clamp(36px, 5vw, 56px) 0 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--il-or-filet); }
.j-couverture img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 767px) { .j-couverture img { aspect-ratio: 4 / 3; } }

/* ---------- liste d'articles ---------- */
.j-liste .wrap { display: grid; gap: clamp(40px, 6vw, 72px); }
.j-une .eyebrow { margin: 0 0 18px; }
.j-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 2.6vw, 32px); margin: 0; padding: 0; list-style: none; }
.j-grille > li { display: flex; }

.j-carte { position: relative; display: flex; flex-direction: column; width: 100%; border-radius: 16px; overflow: hidden; background: linear-gradient(170deg, #FFFFFF 0%, #FFFCF6 60%, var(--il-papier) 100%); box-shadow: 0 22px 44px -30px rgba(11, 36, 71, .42), inset 0 0 0 1px rgba(166, 124, 78, .22); transition: box-shadow .3s, transform .3s; }
@media (hover: hover) { .j-carte:hover { transform: translateY(-3px); box-shadow: 0 30px 54px -28px rgba(11, 36, 71, .5), inset 0 0 0 1px rgba(166, 124, 78, .5); } }
@media (prefers-reduced-motion: reduce) { .j-carte, .j-carte:hover { transition: none; transform: none; } }
.j-carte-visuel { aspect-ratio: 16 / 10; overflow: hidden; background: var(--il-brume-clair); }
.j-carte-visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.j-carte-visuel--vide { display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, var(--il-bg-raised), var(--il-bg-deep) 74%); }
.j-carte-visuel--vide img { width: 56px; height: 56px; opacity: .85; object-fit: contain; }
.j-carte-corps { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 22px 24px 26px; }
.j-carte-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: 13px; color: var(--warm-mut); }
.j-rubrique { font: 600 11px/1.4 var(--v42-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-300, var(--il-gold-jour)); }
.j-carte-titre { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; }
.clair .j-carte-titre a { color: var(--il-titre-jour); text-decoration: none; }
/* toute la carte est cliquable, par le seul lien du titre (un lien, pas trois) */
.j-carte-titre a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.j-carte-titre a:focus-visible { outline: none; }
.j-carte:has(.j-carte-titre a:focus-visible) { outline: 2px solid var(--il-gold-jour); outline-offset: 3px; }
.j-carte-extrait { margin: 0; font-size: 15px; line-height: 1.6; }
.j-carte-lire { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 500; color: var(--gold-300, var(--il-gold-jour)); }
.j-carte-lire::after { content: " →"; }

.j-carte--une { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .j-carte--une { grid-template-columns: 1.15fr 1fr; }
  .j-carte--une .j-carte-visuel { position: relative; aspect-ratio: auto; min-height: 380px; }
  .j-carte--une .j-carte-visuel img { position: absolute; inset: 0; }
  .j-carte--une .j-carte-corps { padding: clamp(28px, 3.4vw, 48px); justify-content: center; }
  .j-carte--une .j-carte-titre { font-size: clamp(26px, 2.6vw, 34px); }
  .j-carte--une .j-carte-extrait { font-size: 17px; }
}

.j-vide { padding: 32px; border-radius: 16px; text-align: center; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .3); }
.j-vide--accueil { max-width: 720px; margin: 0 auto; padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px); }
.j-vide--accueil .eyebrow { justify-content: center; margin: 0 0 14px; }
.j-vide-titre { margin: 0 0 12px; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; color: var(--il-titre-jour); }
.j-vide-texte { max-width: 52ch; margin: 0 auto 24px !important; font-size: 17px; line-height: 1.65; }
.j-vide-actions { margin: 0; }
.j-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.j-pagination .btn { min-height: 44px; }
.j-pagination-etat { font-size: 14px; color: var(--warm-mut); }

/* ---------- colonne de lecture ---------- */
.j-lecture { padding-bottom: clamp(64px, 8vw, 110px); }
.j-colonne.wrap { max-width: calc(760px + 2 * var(--gut, 20px)); }
.j-corps { font-size: 18px; line-height: 1.75; }
.j-corps > * { margin: 0 0 22px; }
.j-corps h2 { margin: 56px 0 18px; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3vw, 32px); line-height: 1.25; scroll-margin-top: 96px; }
.j-corps h3 { margin: 36px 0 12px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.3; scroll-margin-top: 96px; }
.j-corps ul, .j-corps ol { padding-left: 1.4em; }
.j-corps li { margin: 0 0 10px; padding-left: 4px; }
.j-corps li::marker { color: var(--il-gold-jour); }
.j-corps a { color: var(--il-titre-jour); text-decoration: underline; text-decoration-color: rgba(166, 124, 78, .6); text-underline-offset: 3px; }
.j-corps a:hover { text-decoration-color: var(--il-gold-jour); }
.j-corps strong { color: var(--il-titre-jour); font-weight: 600; }

.j-figure { margin: 40px 0; }
.j-figure img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 22px 44px -32px rgba(11, 36, 71, .5); }
.j-figure figcaption, .j-citation figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--warm-mut); }
.j-citation { margin: 40px 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--il-gold-jour); }
.j-citation blockquote { margin: 0; }
.j-citation p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--il-titre-jour); }

.j-encart { margin: 32px 0; padding: 20px 24px; border-radius: 14px; background: rgba(255, 255, 255, .75); box-shadow: inset 3px 0 0 var(--il-gold-jour), inset 0 0 0 1px rgba(166, 124, 78, .22); font-size: 16px; line-height: 1.65; }
.j-encart p { margin: 0; }
.j-encart-titre { margin: 0 0 6px !important; font: 600 11px/1.4 var(--v42-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300, var(--il-gold-jour)); }
.j-encart--bien-etre { background: linear-gradient(180deg, var(--il-brume-clair), var(--il-brume)); box-shadow: inset 3px 0 0 var(--il-azur-deep), inset 0 0 0 1px rgba(60, 111, 184, .16); }
.j-encart--bien-etre .j-encart-titre { color: var(--il-brume-encre); }
.j-encart--important { box-shadow: inset 3px 0 0 var(--il-titre-jour), inset 0 0 0 1px rgba(11, 36, 71, .18); }
.j-encart--important .j-encart-titre { color: var(--il-titre-jour); }

.j-sommaire { margin: 0 0 40px; padding: 22px 26px; border-radius: 14px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .26); }
.j-sommaire-titre, .j-petit-titre { margin: 0 0 10px; font: 600 11px/1.4 var(--v42-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300, var(--il-gold-jour)); }
.j-sommaire ol { margin: 0; padding-left: 1.3em; font-size: 15px; line-height: 1.6; }
.j-sommaire li { margin: 4px 0; }
.j-sommaire a { color: var(--il-titre-jour); }

/* ---------- appel à l'action de l'article (carte papier, un seul reflet) ---------- */
.j-cta { position: relative; overflow: hidden; margin: 44px 0 !important; padding: clamp(26px, 3.4vw, 36px); border-radius: 18px; background: radial-gradient(ellipse 60% 70% at 100% 100%, rgba(246, 223, 179, .55), transparent 70%), linear-gradient(170deg, #FFFFFF 0%, #FFFCF6 55%, var(--il-papier) 100%); box-shadow: 0 26px 50px -34px rgba(11, 36, 71, .5), inset 0 0 0 1px rgba(166, 124, 78, .42); }
.j-cta .eyebrow { margin: 0 0 12px; }
.j-cta-titre { margin: 0 0 10px; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; color: var(--il-titre-jour); }
.j-cta-acces { margin: 0 0 22px; font-size: 15px; line-height: 1.55; }
.j-acces { display: inline-block; margin-right: 6px; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--il-titre-jour); background: var(--il-brume); }
.j-acces--myclub { background: var(--il-champagne); }
.j-cta-note { color: var(--warm-mut); }
.j-cta-bouton { display: inline-flex; align-items: center; gap: 10px; }
/* le bouton or de la charte V4.2, tel quel : encre bleu nuit, 50 px (v42-pages.css .btn / .btn-gold) */
.j-corps a.btn-gold, .j-cta a.btn-gold { color: var(--il-bg-deep); text-decoration: none; }

/* ---------- fin d'article ---------- */
.j-sources { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid rgba(166, 124, 78, .3); font-size: 15px; line-height: 1.6; }
.j-sources h2 { font-family: var(--v42-cond); font-size: 11px; }
.j-sources ul { margin: 0; padding-left: 1.2em; }
.j-sources a { color: var(--il-titre-jour); }
.j-bien-etre { margin: 32px 0 0; font-size: 14px; line-height: 1.6; font-style: italic; color: var(--warm-mut); }
.j-auteur { margin: 40px 0 0; padding: 22px 26px; border-radius: 14px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .26); }
.j-auteur p { margin: 0; }
.j-auteur-nom { font-family: var(--serif); font-size: 22px; color: var(--il-titre-jour); }
.j-auteur-role { margin: 2px 0 10px !important; font-size: 15px; color: var(--warm-mut); }
.j-auteur a, .j-langues a, .j-retour a { color: var(--il-titre-jour); }
.j-langues { margin: 28px 0 0; font-size: 15px; }
.j-retour { margin: 28px 0 0; font-size: 15px; }
.j-retour a { display: inline-flex; align-items: center; min-height: 44px; }

.j-alire-titre { margin: 0 0 clamp(28px, 4vw, 44px); font-size: clamp(30px, 4vw, 44px); }

/* ---------- appel final et erreurs ---------- */
.j-appel .sec-head h2 { font-size: clamp(28px, 3.6vw, 44px); max-width: 22ch; }
.j-appel .sec-head .lead { margin-top: 20px; max-width: 58ch; }
.j-appel-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 34px 0 0; }
.j-appel-actions .btn { min-height: 48px; }
.j-erreur { min-height: 70vh; }

/* la vague prolonge le fond nuit de l'en-tête (même balisage que les pages V4.2) */
.j-courbe-fond { fill: var(--il-bg-deep); }

/* titres : pas de césure automatique (« me-diteren ») ; le texte courant la garde */
.j-tete .page-title, .j-corps h2, .j-corps h3, .j-carte-titre, .j-cta-titre { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }