/* =========================================================================
   Sommaire du Comptoir — mod_comptoir_info (19/10/2026)
   Chargé par mod_comptoir_info.php. Couleurs du thème sombre : voir dark.css.
   ========================================================================= */

/* couleurs, thème clair (accents repris du template) */
:root {
	--s-bg: #ffffff;
	--s-fg: #000000;
	--s-mute: color-mix(in srgb, var(--s-fg) 52%, var(--s-bg));
	--s-line: color-mix(in srgb, var(--s-fg) 17%, var(--s-bg));
	--p-hover: #000000;
	--p-cur-text: #000000;
	--p-ring-w: 1.5px;
	--p-ring-done: #000000;
	--p-ring-rest: var(--s-line);
	--p-core-done: var(--accentohcon-yallah);
	--p-core-rest: color-mix(in srgb, var(--accentohcon-yallah) 30%, transparent);
	--p-sec-fg: #000000;
	--p-sec-bg: linear-gradient(transparent 52%, var(--accentohcon-yallah) 52%);
	--p-bar-done: var(--accentohcon-yallah);
	--p-bar-rest: color-mix(in srgb, var(--accentohcon-yallah) 30%, transparent);
	--p-bar-edge: #000000;
}

/* =================== Sommaire du Comptoir (couleurs : onglet Couleurs) =================== */
div.sommaire {
	--s-fs: 1.12rem;
	background: var(--s-bg); color: var(--s-fg);
	padding: 6px 0 12px; text-align: right; user-select: none;
}
.sommaire .side_titre {
	all: unset; display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.sommaire .side_titre h4 {
	all: unset; order: 2; margin-left: auto; font: 600 .72rem/1 var(--dapolice-babar);
	letter-spacing: .16em; text-transform: uppercase; color: var(--s-fg);
}
.sommaire .side_titre h4::before { content: none; }
.sommaire .readtime {
	display: flex; align-items: center; gap: 5px; text-align: left;
	font: 400 .72rem/1.25 var(--dapolice-babar); color: var(--s-mute); text-transform: none;
}
.sommaire .readtime svg { width: 13px; height: 13px; flex: none; fill: currentColor; }

/* on sort du rendu tableau : le balisage reste celui du module */
.sommaire table.menu-du-jour, .sommaire .menu-du-jour tbody, .sommaire .menu-du-jour tr { display: block; }
.sommaire table.menu-du-jour {
	width: 100%; margin: 0; font-family: var(--dapolice-caenvoie); text-transform: uppercase;
	line-height: 1.4rem; counter-reset: som;
}
/* le « N • » écrit par le PHP est masqué : la numérotation vient d'un compteur CSS */
.sommaire .menu-du-jour td {
	font-size: 0; padding: 1px 0; counter-increment: som;
	display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
}
.sommaire .menu-du-jour td > a,
.sommaire .menu-du-jour td > span {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: var(--s-fs); line-height: 1.4rem; font-weight: 400; letter-spacing: .02em;
	color: inherit; text-decoration: none;
}
.sommaire .menu-du-jour td > a:focus-visible { outline: 2px solid var(--p-hover); outline-offset: 2px; }
.sommaire .menu-du-jour tr:has(~ tr > td.is-cur) td { color: var(--s-mute); }        /* déjà lus */
.sommaire .menu-du-jour td.is-cur > :is(a, span) { color: var(--s-fg); font-weight: 600; } /* en cours */
.sommaire .menu-du-jour td:not(.is-cur) > a:hover { color: var(--p-hover); }

/* --- pastille --- */
.sommaire .menu-du-jour td > :is(a, span)::after,
.sommaire.is-stuck .menu-du-jour td.is-cur::before {
	content: counter(som); flex: none; box-sizing: border-box; display: inline-grid; place-items: center;
	width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1.5px solid var(--s-line);
	font: 600 .72rem/1 var(--dapolice-babar); letter-spacing: 0;
	color: var(--s-mute); background: transparent; transition: border-color .15s, color .15s;
}
/* déjà lus : pastille pleine discrète */
.sommaire .menu-du-jour tr:has(~ tr > td.is-cur) td > a::after { border-color: transparent; background: var(--s-line); }
/* survol */
.sommaire .menu-du-jour tr td:not(.is-cur) > a:hover::after,
.sommaire .menu-du-jour tr:has(~ tr > td.is-cur) td:not(.is-cur) > a:hover::after { color: var(--p-hover); border-color: var(--p-hover); }
/* en cours : bordure qui avance avec la lecture + cœur (rempli en thème clair) */
.sommaire .menu-du-jour td.is-cur > :is(a, span)::after,
.sommaire.is-stuck .menu-du-jour td.is-cur::before {
	color: var(--p-cur-text); border: var(--p-ring-w) solid transparent;
	background:
		conic-gradient(var(--p-core-done) calc(var(--som-p, 1) * 360deg), var(--p-core-rest) 0) padding-box,
		conic-gradient(var(--p-ring-done) calc(var(--som-p, 1) * 360deg), var(--p-ring-rest) 0) border-box;
}

/* --- intertitres de la page en cours (articles multipages, ajoutés par le script) --- */
.sommaire .som-sub {
	flex-basis: 100%; list-style: none; margin: 1px 0 5px; padding: 0 1.95rem 0 0;
	display: grid; gap: 1px; text-transform: none; letter-spacing: 0;
}
.sommaire .som-sub li { margin: 0; padding: 0; line-height: 0; }
.sommaire .som-sub a {
	display: block; font: 400 .76rem/1.25 var(--dapolice-babar); color: var(--s-mute); text-decoration: none;
	padding: 0 .2em; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transition: color .15s;
}
.sommaire .som-sub .lvl-1 a { font-size: .8rem; font-weight: 500; color: var(--s-fg); }
.sommaire .som-sub a:hover { color: var(--p-hover); }
.sommaire .som-sub a.is-here { color: var(--p-sec-fg); background: var(--p-sec-bg); }

/* =================== Collé =================== */
.sommaire.is-stuck { padding: 18px 0 20px; }
.sommaire.is-stuck .side_titre, .sommaire.is-stuck .som-sub { display: none; }
.sommaire.is-stuck .menu-du-jour tbody {
	display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0;
	position: relative; padding-bottom: 2.65rem; margin-right: -4px;
}
/* l'espace entre pastilles fait partie de leur zone de survol : on passe de l'une à l'autre sans « trou » */
.sommaire.is-stuck .menu-du-jour td { display: block; padding: 0; line-height: 1; }
.sommaire.is-stuck .menu-du-jour td.is-cur { padding: 4px; }
.sommaire.is-stuck .menu-du-jour td > a { display: block; font-size: 0; }
.sommaire.is-stuck .menu-du-jour td:not(.is-cur) > a { padding: 4px; }
.sommaire.is-stuck .menu-du-jour td > a::after,
.sommaire.is-stuck .menu-du-jour td.is-cur::before { width: 1.6rem; height: 1.6rem; font-size: .74rem; }
.sommaire.is-stuck .menu-du-jour td.is-cur > :is(a, span)::after { content: none; }
/* ligne 1 : en cours (ou survolé) ; ligne 2 : section en cours (multipage) */
.sommaire.is-stuck .menu-du-jour td.is-cur > :is(a, span),
.sommaire.is-stuck .menu-du-jour td:not(.is-cur) > a::before {
	position: absolute; left: 0; right: 0; bottom: 1.1rem; display: block;
	font: 600 1.05rem/1.45rem var(--dapolice-caenvoie); letter-spacing: .02em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transition: opacity .15s .18s;   /* la page en cours ne revient qu'après une courte pause */
}
.sommaire.is-stuck .menu-du-jour td.is-cur::after {
	content: attr(data-sec); position: absolute; left: 0; right: 0; bottom: 0;
	font: 500 .76rem/1.1rem var(--dapolice-babar); text-transform: none; letter-spacing: 0;
	color: var(--p-sec-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s .18s;
}
.sommaire.is-stuck .menu-du-jour td:not(.is-cur) > a::before {
	content: counter(som, decimal-leading-zero) " · " attr(data-t);
	font-weight: 400; color: var(--p-hover); opacity: 0; pointer-events: none; transition: none;
}
.sommaire.is-stuck .menu-du-jour td:not(.is-cur) > a:is(:hover, :focus-visible, .hov)::before { opacity: 1; }
.sommaire.is-stuck tbody:has(td:not(.is-cur) > a:is(:hover, :focus-visible, .hov)) td.is-cur > :is(a, span),
.sommaire.is-stuck tbody:has(td:not(.is-cur) > a:is(:hover, :focus-visible, .hov)) td.is-cur::after { opacity: 0; transition: opacity .1s; }
/* sommaire par intertitres : pas de ligne 2 */
.sommaire.som-hx.is-stuck .menu-du-jour tbody { padding-bottom: 1.8rem; }
.sommaire.som-hx.is-stuck .menu-du-jour td.is-cur > :is(a, span),
.sommaire.som-hx.is-stuck .menu-du-jour td:not(.is-cur) > a::before { bottom: 0; }

/* =================== 0 ou 1 intertitre : temps de lecture + barre =================== */
.sommaire.som-bar { padding: 8px 0 22px; }
.sommaire.som-bar .readtime { justify-content: flex-end; gap: 6px; font-size: .8rem; color: var(--s-fg); text-align: right; }
.sommaire.som-bar .readtime svg { width: 16px; height: 16px; }
.sommaire .rt-bar {
	height: 5px; margin-top: 8px; border-radius: 3px;
	background:
		linear-gradient(90deg, var(--p-bar-edge) calc(var(--som-p, 0) * 100%), transparent 0) bottom / 100% 1.5px no-repeat,
		linear-gradient(90deg, var(--p-bar-done) calc(var(--som-p, 0) * 100%), var(--p-bar-rest) 0);
}
.sommaire.som-bar.is-stuck { padding: 16px 0 26px; }

/* =================== Sommaire par intertitres : casse d'origine =================== */
.sommaire.som-hx table.menu-du-jour { text-transform: none; }

/* =================== Transition déplié ↔ collé (View Transitions) =================== */
html:active-view-transition-type(som) { view-transition-name: none; }
html:active-view-transition-type(som)::view-transition-group(*) {
	animation-duration: .34s; animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}
html:active-view-transition-type(som)::view-transition-old(*),
html:active-view-transition-type(som)::view-transition-new(*) { height: 100%; object-fit: contain; object-position: right top; }

@media (prefers-reduced-motion: reduce) { .sommaire, .sommaire *, .sommaire *::before, .sommaire *::after { transition: none !important; } }

/* =================== Colonne : sommaire + pavé collés =================== */
#left { overflow: clip; }
#left:has(#tostick.cdh-pack) { display: flex; flex-direction: column; }
#left > .mod-trans:has(> #tostick.cdh-pack) { flex: 1 0 auto; display: flex; flex-direction: column; }
#tostick.cdh-pack { flex: 1 0 auto; overflow: clip; }
/* le navigateur ne doit pas recaler le défilement quand le sommaire change de hauteur */
.cdh-pack { overflow-anchor: none; }

.cdh-pack > .sommaire { position: sticky; top: 10px; z-index: 3; }
.cdh-pack > .cdh-pub-sticky { position: sticky; top: calc(10px + var(--cdh-som-h, 0px)); z-index: 2; }

/* --cdh-pub-h = hauteur réelle du pavé (300 ou 600), --cdh-som-delta = hauteur gagnée en compactant */
.cdh-pack > .sommaire + * { margin-top: var(--cdh-som-delta, 0px); }
.cdh-pack:not(.cdh-short) > .sommaire { margin-bottom: calc(var(--cdh-pub-h, 600px) + 10px); }
.cdh-pack:not(.cdh-short) > .sommaire + * { margin-top: calc(var(--cdh-som-delta, 0px) - var(--cdh-pub-h, 600px) - 10px); }
.cdh-pack.cdh-short > .cdh-pub-sticky { position: static; }

/* ancres posées par le script sur les intertitres */
#content .joomla :is(h2, h3, h4)[id] { scroll-margin-top: 12px; }