/* L'Hebdo — page des éditions, « Le kiosque » : la dernière édition en une
   posée sur la pile des numéros, son sommaire et l'accès ; puis le mur des
   éditions précédentes en petites unes. Couleurs et polices du thème.

   Tout est préfixé par .ie24m-hb : la feuille du thème (.lj-prose p, a…) est
   chargée après celle-ci. La mise en page suit la largeur réelle du contenu
   (requêtes de conteneur), pas celle de la fenêtre : elle s'adapte à la mise
   en page réglée pour la page. */
.ie24m-hb { --hb-ink: var(--ink, #16140d); --hb-soft: var(--ink-soft, #322d20); --hb-mute: var(--ink-mute, #6d6552);
	--hb-rule: var(--rule, #d4cbb2); --hb-acc: var(--accent, #8a1711); --hb-ease: cubic-bezier(.2, .7, .2, 1);
	container: hebdo / inline-size; }
.ie24m-hb p { margin: 0; }
.ie24m-hb a { color: inherit; text-decoration: none; }
.ie24m-hb ul { list-style: none; margin: 0; padding: 0; }
.ie24m-hb .ie24m-hb-intro { margin: 0 0 2rem; max-width: 44rem; font-family: var(--font-serif, Georgia, serif); font-size: 1.12rem; line-height: 1.6; color: var(--hb-soft); }
.ie24m-hb .ie24m-hb-vide { font-style: italic; color: var(--hb-mute); }
.ie24m-hb .ie24m-hb-ico { width: 1em; height: 1em; display: inline-block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---------- La dernière édition ---------- */
.ie24m-hb .ie24m-hb-der { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.8rem, 4.5vw, 4.4rem); align-items: start;
	padding: 2.2rem 0 3.4rem; border-top: 3px solid var(--hb-ink); }
.ie24m-hb .ie24m-hb-pile { position: relative; max-width: 480px; padding: 8px 28px 34px 8px; }
.ie24m-hb .ie24m-hb-dos { position: absolute; inset: 8px 28px 34px 8px; background: #f3f0e6; border: 1px solid #cdc5af;
	transform: rotate(3deg) translate(12px, 8px); box-shadow: 0 22px 30px -24px rgba(40, 30, 18, .55); }
.ie24m-hb .ie24m-hb-dos-2 { background: #f8f6ef; transform: rotate(-1.8deg) translate(-2px, 12px); }
.ie24m-hb .ie24m-hb-une { position: relative; z-index: 1; display: block; }
.ie24m-hb .ie24m-hb-kick { margin: 0 0 .45rem; font: 700 .7rem/1.2 var(--font-sans, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--hb-acc); }
.ie24m-hb .ie24m-hb-num { margin: 0; font: 900 clamp(3.2rem, 6.4vw, 5rem)/.92 var(--font-display, Georgia, serif); letter-spacing: -.025em; color: var(--hb-ink); }
.ie24m-hb .ie24m-hb-date { margin: .6rem 0 1.5rem; font: 600 .8rem/1.45 var(--font-sans, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--hb-mute); }
.ie24m-hb .ie24m-hb-sep { opacity: .5; }
.ie24m-hb .ie24m-hb-une-l { padding-top: 1rem; border-top: 1px solid var(--hb-ink); font: 700 .66rem/1 var(--font-sans, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--hb-mute); }
.ie24m-hb .ie24m-hb-une-t { margin: .6rem 0 .35rem; font: 700 clamp(1.55rem, 2.6vw, 2.15rem)/1.1 var(--font-display, Georgia, serif); letter-spacing: -.01em; color: var(--hb-ink); }
.ie24m-hb .ie24m-hb-une-t a { background: linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat; transition: background-size .4s var(--hb-ease); }
.ie24m-hb .ie24m-hb-une-t a:hover, .ie24m-hb .ie24m-hb-une-t a:focus-visible { background-size: 100% 1px; }
.ie24m-hb .ie24m-hb-une-d { font: italic 400 1.06rem/1.5 var(--font-serif, Georgia, serif); color: var(--hb-soft); }
.ie24m-hb .ie24m-hb-som { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.8rem; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--hb-rule); }
.ie24m-hb .ie24m-hb-pg-t { margin: 0 0 .3rem; font: 700 .68rem/1.2 var(--font-sans, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--hb-ink); }
.ie24m-hb .ie24m-hb-pg-t span { margin-right: .15rem; color: var(--hb-acc); }
.ie24m-hb .ie24m-hb-pg li { padding: .16rem 0; font: 400 .93rem/1.35 var(--font-serif, Georgia, serif); color: var(--hb-soft); }
.ie24m-hb .ie24m-hb-pg a:hover, .ie24m-hb .ie24m-hb-pg a:focus-visible { color: var(--hb-acc); text-decoration: underline; text-underline-offset: 3px; }

/* Accès : invitation ou téléchargement. */
.ie24m-hb .ie24m-hb-membres { margin-top: 1.5rem; padding: 1.1rem 1.25rem 1.2rem; border: 1px solid var(--hb-ink); background: #fbfaf5; }
.ie24m-hb .ie24m-hb-membres p { margin: 0 0 .85rem; font-family: var(--font-serif, Georgia, serif); font-size: .97rem; line-height: 1.55; color: var(--hb-soft); }
.ie24m-hb .ie24m-hb-membres .ie24m-hb-membres-t { margin-bottom: .35rem; font: 700 1.15rem/1.25 var(--font-display, Georgia, serif); color: var(--hb-ink); }
.ie24m-hb .ie24m-hb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: 1.5rem 0 0; }
.ie24m-hb .ie24m-hb-membres .ie24m-hb-actions { margin: 0; }
.ie24m-hb .ie24m-hb-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .78rem 1.25rem; background: var(--hb-ink); color: #fff;
	font: 700 .76rem/1 var(--font-sans, sans-serif); letter-spacing: .08em; text-transform: uppercase; transition: background .2s; }
.ie24m-hb .ie24m-hb-btn:hover, .ie24m-hb .ie24m-hb-btn:focus-visible { background: var(--hb-acc); color: #fff; }
.ie24m-hb .ie24m-hb-lien { font: 500 .86rem/1.4 var(--font-sans, sans-serif); color: var(--hb-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ie24m-hb .ie24m-hb-poids { font: 500 .78rem/1.3 var(--font-sans, sans-serif); color: var(--hb-mute); }

/* ---------- Les éditions précédentes ---------- */
.ie24m-hb .ie24m-hb-arch { margin-top: 1rem; }
.ie24m-hb .ie24m-hb-t2 { margin: 0 0 1.3rem; padding-top: .7rem; border-top: 3px solid var(--hb-ink); font: 700 1.55rem/1.2 var(--font-display, Georgia, serif); color: var(--hb-ink); }
.ie24m-hb .ie24m-hb-mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 2.4rem 1.7rem; }
.ie24m-hb .ie24m-hb-carte { min-width: 0; }
.ie24m-hb .ie24m-hb-carte-une { display: block; transition: transform .35s var(--hb-ease); }
.ie24m-hb .ie24m-hb-carte-une:hover { transform: translateY(-5px) rotate(-.7deg); }
.ie24m-hb .ie24m-hb-carte-n { margin: 1rem 0 .25rem; font: 800 1.05rem/1.2 var(--font-display, Georgia, serif); color: var(--hb-ink); }
.ie24m-hb .ie24m-hb-carte-d { margin-left: .2rem; font: 600 .7rem/1 var(--font-sans, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--hb-mute); }
.ie24m-hb .ie24m-hb-carte-t { margin: 0 0 .7rem; font: 400 .95rem/1.35 var(--font-serif, Georgia, serif); color: var(--hb-ink); }
.ie24m-hb .ie24m-hb-carte-t a:hover, .ie24m-hb .ie24m-hb-carte-t a:focus-visible { color: var(--hb-acc); }
.ie24m-hb .ie24m-hb-dl { display: inline-flex; align-items: center; gap: .35rem; padding-bottom: .25rem; border-bottom: 1px solid var(--hb-ink);
	font: 700 .7rem/1 var(--font-sans, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--hb-ink); white-space: nowrap; }
.ie24m-hb .ie24m-hb-dl:hover, .ie24m-hb .ie24m-hb-dl:focus-visible { color: var(--hb-acc); border-color: var(--hb-acc); }
.ie24m-hb .ie24m-hb-cle { color: var(--hb-mute); border-bottom-color: var(--hb-rule); }

/* ---------- Une miniature : la page A1 à l'échelle de sa largeur ----------
   Ses classes lui sont propres : elle sert aussi hors de cette page (encadré
   de la colonne du thème, carte du compte). */
.ie24m-hb-u { container-type: inline-size; position: relative; display: block; aspect-ratio: 595 / 842; background: #fdfcf8; color: #111;
	border: 1px solid #cdc5af; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 26px 40px -28px rgba(40, 30, 18, .6); }
.ie24m-hb-u-in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 3.7cqw 3.7cqw 4cqw; overflow: hidden;
	font-family: "Times New Roman", Times, "Liberation Serif", serif; }
.ie24m-hb-u-titre, .ie24m-hb-u-num, .ie24m-hb-u-cotes, .ie24m-hb-u-ess, .ie24m-hb-u-ess-t, .ie24m-hb-u-it,
.ie24m-hb-u-l, .ie24m-hb-u-lead, .ie24m-hb-u-photo, .ie24m-hb-u-d2, .ie24m-hb-u-r1 { display: block; }
.ie24m-hb-u-man { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; padding-bottom: 1cqw; border-bottom: .35cqw solid #111; }
.ie24m-hb-u-or { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 .5cqw; }
.ie24m-hb-logo { display: block; width: 4.3cqw; height: 4cqw; fill: #111; }
.ie24m-hb-u-24 { font: 700 4.6cqw/.78 Helvetica, Arial, sans-serif; letter-spacing: -.04em; }
.ie24m-hb-u-or small, .ie24m-hb-u-num small { display: block; width: 100%; margin-top: .8cqw; font: 400 1.05cqw/1 Helvetica, Arial, sans-serif; letter-spacing: .2cqw; text-transform: uppercase; }
.ie24m-hb-u-titre { font: 700 12.6cqw/.8 "Times New Roman", Times, "Liberation Serif", serif; letter-spacing: -.02em; }
.ie24m-hb-u-num { text-align: right; font: 700 2.4cqw/1 Helvetica, Arial, sans-serif; }
.ie24m-hb-u-num small { margin: 0 0 .7cqw; }
.ie24m-hb-u-bar { display: flex; justify-content: space-between; gap: 1cqw; padding: .6cqw 0; border-bottom: .17cqw solid #111;
	font: 700 1.15cqw/1.2 Helvetica, Arial, sans-serif; text-transform: uppercase; white-space: nowrap; }
.ie24m-hb-u-cotes { padding: .6cqw 0; border-bottom: .17cqw solid #111; font: 700 1.1cqw/1.2 Helvetica, Arial, sans-serif; white-space: nowrap; overflow: hidden; }
.ie24m-hb-u-corps { flex: 1; display: grid; grid-template-columns: 16fr 64fr 16fr; gap: 1.5cqw; min-height: 0; margin-top: 1.6cqw; }
.ie24m-hb-u-ess { padding-right: 1.2cqw; border-right: .17cqw solid #9a9a9a; overflow: hidden; }
.ie24m-hb-u-ess-t { margin: 0 0 1cqw; padding-bottom: .6cqw; border-bottom: .17cqw solid #111; font: 700 2.6cqw/1 "Times New Roman", Times, serif; white-space: nowrap; }
.ie24m-hb-u-it { margin: 0 0 1.5cqw; }
.ie24m-hb-u-it b { display: block; font: 700 1.45cqw/1.15 "Times New Roman", Times, serif; }
.ie24m-hb-u-l { background: repeating-linear-gradient(#c8c1af 0 .48cqw, transparent .48cqw 1.32cqw); }
.ie24m-hb-u-it .ie24m-hb-u-l { height: 4cqw; margin-top: .5cqw; }
.ie24m-hb-u-centre { display: flex; flex-direction: column; gap: 1.4cqw; min-height: 0; overflow: hidden; }
.ie24m-hb-u-lead { font: 700 4.5cqw/1.03 "Times New Roman", Times, serif; letter-spacing: -.01em; }
.ie24m-hb-u-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; height: 20cqw; flex: 0 0 auto; }
.ie24m-hb-u-cols-4 { grid-template-columns: repeat(4, 1fr); flex: 1 1 auto; height: auto; min-height: 6cqw; }
.ie24m-hb-u-photo { height: 26cqw; flex: 0 0 auto; background: #888; overflow: hidden; }
.ie24m-hb-u-photo img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.ie24m-hb-u-d2 { font: 700 3cqw/1.05 "Times New Roman", Times, serif; }
.ie24m-hb-u-droite { display: flex; flex-direction: column; gap: 1.2cqw; min-height: 0; padding-left: 1.2cqw; border-left: .17cqw solid #9a9a9a; }
.ie24m-hb-u-r1 { font: 700 3cqw/1.02 "Times New Roman", Times, serif; }
.ie24m-hb-u-droite .ie24m-hb-u-l { flex: 1; }
/* Petites unes : le titre se lit encore, le détail s'allège. */
.ie24m-hb-u-mini .ie24m-hb-u-lead { font-size: 6cqw; }
.ie24m-hb-u-mini .ie24m-hb-u-it:nth-child(n+6) { display: none; }

/* Navigateurs sans requêtes de conteneur (iOS 15) : une simplifiée. */
@supports not (container-type: inline-size) {
	.ie24m-hb-u-in { padding: 6%; }
	.ie24m-hb-u-titre { font-size: 2.2rem; }
	.ie24m-hb-u-lead { font-size: 1rem; }
	.ie24m-hb-u-or, .ie24m-hb-u-num, .ie24m-hb-u-bar, .ie24m-hb-u-cotes, .ie24m-hb-u-ess, .ie24m-hb-u-droite, .ie24m-hb-u-d2 { display: none !important; }
	.ie24m-hb-u-corps { grid-template-columns: 1fr; }
	.ie24m-hb-u-photo { height: 30%; }
	.ie24m-hb-u-cols { height: 4rem; }
	@media (max-width: 760px) {
		.ie24m-hb .ie24m-hb-der { grid-template-columns: minmax(0, 1fr); }
		.ie24m-hb .ie24m-hb-pile { max-width: 340px; width: 100%; margin: 0 auto; }
		.ie24m-hb .ie24m-hb-som { grid-template-columns: minmax(0, 1fr); }
		.ie24m-hb .ie24m-hb-mur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1rem; }
	}
}

/* Mise en page selon la largeur du contenu. */
@container hebdo (max-width: 760px) {
	.ie24m-hb .ie24m-hb-der { grid-template-columns: minmax(0, 1fr); }
	.ie24m-hb .ie24m-hb-pile { max-width: 340px; width: 100%; margin: 0 auto; }
}
@container hebdo (max-width: 480px) {
	.ie24m-hb .ie24m-hb-som { grid-template-columns: minmax(0, 1fr); }
	.ie24m-hb .ie24m-hb-mur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ie24m-hb .ie24m-hb-carte-une, .ie24m-hb .ie24m-hb-une-t a { transition: none; }
	.ie24m-hb .ie24m-hb-carte-une:hover { transform: none; }
}

/* ---------- Carte « L'Hebdo » du compte ---------- */
.ie24m-hbc { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.ie24m-hbc .ie24m-hbc-une { display: block; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.ie24m-hbc .ie24m-hbc-une:hover { transform: translateY(-3px) rotate(-.6deg); }
.ie24m-hbc .ie24m-h { margin-top: 0; }
.ie24m-hbc .ie24m-hbc-num { margin: .15rem 0 .4rem; font: 600 .74rem/1.3 var(--font-sans, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute, #6d6552); }
.ie24m-hbc .ie24m-hbc-num span:first-child { font-weight: 800; color: var(--ink, #16140d); }
.ie24m-hbc .ie24m-hbc-titre { margin: 0 0 .5rem; font: 700 1.25rem/1.2 var(--font-display, Georgia, serif); color: var(--ink, #16140d); }
/* Plus précis que « .ie24m-compte .ie24m-card p a:not(.ie24m-btn) » (compte.css), qui soulignerait le titre en rouge. */
.ie24m-card.ie24m-hbc p.ie24m-hbc-titre a:not(.ie24m-btn) { color: inherit; text-decoration: none; }
.ie24m-card.ie24m-hbc p.ie24m-hbc-titre a:not(.ie24m-btn):hover, .ie24m-card.ie24m-hbc p.ie24m-hbc-titre a:not(.ie24m-btn):focus-visible { color: var(--accent, #8a1711); }
.ie24m-hbc .ie24m-hb-ico { display: inline-block; width: 1em; height: 1em; margin-right: .1em; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Habillée en bloc dans le compte : le titre et la phrase du bloc remplacent ceux de la carte. */
.ie24m-compte .ie24m-bloc--hebdo .ie24m-hbc .ie24m-h, .ie24m-compte .ie24m-bloc--hebdo .ie24m-hbc .ie24m-lede { display: none; }
@media (max-width: 480px) { .ie24m-hbc { grid-template-columns: 84px minmax(0, 1fr); gap: 1rem; } }
@media (prefers-reduced-motion: reduce) { .ie24m-hbc .ie24m-hbc-une { transition: none; } .ie24m-hbc .ie24m-hbc-une:hover { transform: none; } }
