/* Artsolite — Archives · page « Ce qu'il s'est passé »
 * Tout est rangé sous .as-archives. Les couleurs reprennent celles du modèle
 * « Artsolite — Site » quand elles existent (variables --as-*), avec des
 * valeurs de secours pour fonctionner seules. */

.as-archives {
	--arch-fond: var(--as-fond, #121211);
	--arch-surface: var(--as-surface, #1c1c1a);
	--arch-ligne: #4a4944;
	--arch-ligne-douce: #33332f;
	--arch-texte: var(--as-texte, #f3f1ec);
	--arch-texte-2: var(--as-texte-2, #d6d3cb);
	--arch-texte-3: #a9a79f;
	--arch-encre: #141413;
	--arch-rayon: 8px;
	--arch-intensite: .75;
	color: var(--arch-texte);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.as-archives *, .as-archives *::before, .as-archives *::after { box-sizing: border-box; }
.as-archives [hidden] { display: none !important; }
.as-archives .as-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.as-archives button { font: inherit; }
.as-archives :focus-visible { outline: 3px solid var(--arch-texte); outline-offset: 2px; }

/* La feuille du site limite les listes et paragraphes à la largeur de
 * lecture et règle titres et liens : on reprend la main dans les archives. */
.as-archives ul.as-arch__grille { max-width: none; }
.as-archives.as-archives p { max-width: none; }

/* ---------- En-tête de page (sans bandeau) ---------- */
/* Espace minimal sous la barre de menu : la section qui contient les
 * archives perd sa grande marge haute, et l'en-tête n'en ajoute pas. */
body.arts-site .as-section:has(> .as-conteneur > .as-archives) { padding-top: var(--as-e-4, 1rem); }
.as-archives .as-arch__entete-page { padding-block: 0 var(--as-e-3, .75rem); text-align: center; }
.as-archives .as-arch__entete-page .as-titre-page { margin: 0 auto; }
/* Chapeau discret : une ligne, petits caractères (repasse à la ligne sur téléphone). */
.as-archives .as-arch__entete-page .as-chapeau { margin: var(--as-e-1, .25rem) auto 0; max-width: none; font-size: var(--as-fs-1, .875rem); line-height: 1.4; color: var(--as-texte-doux, #a6a6a6); text-wrap: wrap; }
.as-archives .as-arch__entete-page .as-chapeau p { margin: 0 auto; max-width: none; font-size: inherit; color: inherit; }
@media (min-width: 48rem) { .as-archives .as-arch__entete-page .as-chapeau p { white-space: nowrap; } }

/* ---------- Filtres ---------- */
.as-archives .as-arch__filtres {
	position: sticky; top: var(--as-haut-barre, 0px); z-index: 5;
	display: flex; flex-direction: column; gap: .9rem;
	padding: 1rem 0; background: var(--arch-fond);
	border-bottom: 1px solid var(--arch-ligne-douce);
}
.as-archives .as-arch__ligne { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.as-archives .as-arch__recherche {
	flex: 1 1 320px; display: flex; align-items: center; gap: .6rem;
	min-height: 48px; padding: 0 1.1rem; border-radius: 999px;
	background: var(--arch-surface); border: 1px solid var(--arch-ligne); color: var(--arch-texte-3);
}
.as-archives .as-arch__recherche:focus-within { border-color: var(--arch-texte); }
.as-archives .as-arch__q {
	flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent;
	color: var(--arch-texte); font: inherit; font-size: 1rem; outline: none;
}
.as-archives .as-arch__q::placeholder { color: #8e8c85; opacity: 1; }
.as-archives .as-arch__q::-webkit-search-cancel-button { filter: invert(1); }

.as-archives .as-arch__groupe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.as-archives .as-arch__annees { gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--arch-surface); border: 1px solid var(--arch-ligne); }
.as-archives .as-arch__etiquette { font-size: .8125rem; color: var(--arch-texte-3); margin-right: .25rem; }

.as-archives .as-arch__puce {
	display: inline-flex; align-items: center; gap: .5rem;
	min-height: 44px; padding: 0 1rem; border-radius: 999px; cursor: pointer;
	background: transparent; color: var(--arch-texte); border: 1px solid var(--arch-ligne);
	font-size: .9375rem; font-weight: 600; line-height: 1.1;
}
.as-archives .as-arch__puce:hover { border-color: var(--arch-texte-2); }
.as-archives .as-arch__puce[aria-pressed="true"] { background: var(--c, var(--arch-texte)); border-color: var(--c, var(--arch-texte)); color: var(--arch-encre); }
.as-archives .as-arch__puce--annee { min-height: 40px; border: 0; padding: 0 .9rem; color: var(--arch-texte-2); }
.as-archives .as-arch__puce--annee[aria-pressed="true"] { background: var(--arch-texte); color: var(--arch-encre); }
.as-archives .as-arch__puce--theme { min-height: 36px; padding: 0 .75rem; font-size: .875rem; font-weight: 500; background: var(--arch-surface); border-color: var(--arch-ligne-douce); color: var(--arch-texte-2); }
.as-archives .as-arch__puce--theme[aria-pressed="true"] { background: var(--arch-texte); border-color: var(--arch-texte); color: var(--arch-encre); font-weight: 700; }
.as-archives .as-arch__pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.as-archives .as-arch__puce[aria-pressed="true"] .as-arch__pastille { background: var(--arch-encre); }
.as-archives .as-arch__nb { font-size: .8125rem; font-weight: 500; opacity: .75; }

.as-archives .as-arch__lien {
	background: none; border: 0; padding: 0 .25rem; min-height: 36px; cursor: pointer;
	color: var(--arch-texte); text-decoration: underline; text-underline-offset: 3px; font-size: .9375rem;
}

/* ---------- En-tête de résultats ---------- */
.as-archives .as-arch__entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .75rem; }
.as-archives .as-arch__compte { margin: 0; color: var(--arch-texte-2); }
.as-archives .as-arch__compte strong { color: var(--arch-texte); }

/* ---------- Grille de tuiles ---------- */
.as-archives .as-arch__grille {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem;
}
.as-archives .as-arch__item { margin: 0; }
.as-archives .as-arch__tuile {
	position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
	border-radius: var(--arch-rayon); background: #3a3936; color: #fff; text-decoration: none;
	isolation: isolate;
}
.as-archives .as-arch__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.as-archives a.as-arch__tuile, .as-archives a.as-arch__tuile:hover, .as-archives a.as-arch__tuile:focus-visible { color: #fff; text-decoration: none; }
.as-archives .as-arch__tuile:hover .as-arch__img, .as-archives .as-arch__tuile:focus-visible .as-arch__img { transform: scale(1.04); }
.as-archives .as-arch__teinte { position: absolute; inset: 0; background: var(--c); pointer-events: none; }
.as-archives .as-arch__degrade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.82) 100%); }

/* Trois façons de poser la couleur de l'espace */
.as-archives[data-surimpression="teinte"] .as-arch__teinte { mix-blend-mode: multiply; opacity: var(--arch-intensite); }
.as-archives[data-surimpression="voile"] .as-arch__teinte { opacity: calc(var(--arch-intensite) * .6); }
.as-archives[data-surimpression="bandeau"] .as-arch__teinte { inset: auto 0 0 0; height: 8px; z-index: 2; }

.as-archives .as-arch__haut, .as-archives .as-arch__bas { position: absolute; left: 0; right: 0; padding: 1rem 1.1rem; display: flex; z-index: 1; }
.as-archives .as-arch__haut { top: 0; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.as-archives .as-arch__bas { bottom: 0; flex-direction: column; gap: .6rem; padding-bottom: 1.15rem; }
.as-archives .as-arch__badge {
	display: inline-block; align-self: flex-start; padding: .3rem .5rem; border-radius: 4px;
	background: var(--c); color: var(--arch-encre);
	font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
}
.as-archives .as-arch__date { display: flex; flex-direction: column; align-items: flex-end; text-align: right; text-shadow: 0 1px 8px rgba(0,0,0,.6); font-size: .875rem; font-weight: 700; line-height: 1.15; }
.as-archives .as-arch__date b { display: block; white-space: nowrap; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.as-archives .as-arch__titre { margin: 0; font-size: 1.1875rem; line-height: 1.25; font-weight: 800; color: #fff; }
.as-archives .as-arch__tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.as-archives .as-arch__tags span { font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.35); }

.as-archives .as-arch__vide { padding: 3rem 2rem; text-align: center; border-radius: var(--arch-rayon); background: var(--arch-surface); }
.as-archives .as-arch__vide p { margin: .25rem 0; color: var(--arch-texte-2); }
.as-archives .as-arch__vide-titre { font-size: 1.25rem; font-weight: 700; color: var(--arch-texte) !important; }
.as-archives .as-arch__suite { display: flex; justify-content: center; }
.as-archives .as-arch__voir-plus:not(.as-bouton) , .as-archives .as-arch__voir-plus {
	min-height: 48px; padding: 0 1.75rem; border-radius: 999px; border: 0; cursor: pointer;
	background: var(--arch-texte); color: var(--arch-encre); font-weight: 700; font-size: 1rem;
}

/* ---------- Fiche (dialog) ---------- */
.as-archives .as-arch__fiche {
	width: min(860px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 3rem);
	margin: auto; padding: 0; border: 0; border-radius: 12px; overflow: auto; overscroll-behavior: contain;
	background: var(--arch-surface); color: var(--arch-texte);
	box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.as-archives .as-arch__fiche::backdrop { background: rgba(8,8,7,.82); }
.as-archives .as-arch__fiche-tete { position: relative; min-height: 220px; height: clamp(220px, 45vh, 400px); background: #3a3936; overflow: hidden; }
.as-archives .as-arch__fiche-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-archives .as-arch__fiche .as-arch__degrade { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 100%); }
.as-archives .as-arch__fiche-nav { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: flex; gap: .5rem; }
.as-archives .as-arch__rond {
	width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.6); color: #fff;
}
.as-archives .as-arch__rond--clair { background: var(--arch-texte); color: var(--arch-encre); }
.as-archives .as-arch__fiche-titres { position: absolute; left: 2rem; right: 2rem; bottom: 1.75rem; z-index: 1; display: flex; flex-direction: column; gap: .75rem; }
.as-archives .as-arch__fiche-titre { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); line-height: 1.15; font-weight: 800; color: #fff; }
.as-archives .as-arch__fiche-texte { padding: 1.75rem 2rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.as-archives .as-arch__fiche-date { margin: 0; font-weight: 700; font-size: 1rem; color: var(--arch-texte); }
.as-archives .as-arch__fiche-contenu { font-size: 1.0625rem; line-height: 1.65; color: var(--arch-texte); }
.as-archives .as-arch__fiche-contenu > :first-child { margin-top: 0; }
.as-archives .as-arch__fiche-contenu p { margin: 0 0 1em; }
.as-archives .as-arch__fiche-contenu h3, .as-archives .as-arch__fiche-contenu h4, .as-archives .as-arch__fiche-contenu h5 { margin: 1.4em 0 .5em; line-height: 1.25; }
.as-archives .as-arch__fiche-contenu a { color: var(--arch-texte); text-decoration: underline; text-underline-offset: 3px; }
.as-archives .as-arch__fiche-contenu img { display: block; max-width: 100%; height: auto; border-radius: 6px; margin: 1em 0; }
.as-archives .as-arch__fiche-contenu figure { margin: 1em 0; }
.as-archives .as-arch__fiche-contenu figcaption { font-size: .875rem; color: var(--arch-texte-3); }
.as-archives .as-arch__fiche-contenu iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 6px; }
.as-archives .as-arch__fiche-contenu blockquote { margin: 1em 0; padding-left: 1rem; border-left: 3px solid var(--arch-ligne); color: var(--arch-texte-2); }
.as-archives .as-arch__fiche-chargement { color: var(--arch-texte-3); }
.as-archives .as-arch__fiche-themes { display: flex; flex-wrap: wrap; gap: .5rem; }
.as-archives .as-arch__fiche-themes button {
	min-height: 36px; padding: 0 .75rem; border-radius: 999px; cursor: pointer;
	background: var(--arch-fond); border: 1px solid var(--arch-ligne); color: var(--arch-texte); font-size: .875rem;
}
.as-archives .as-arch__fiche-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--arch-ligne-douce); font-size: .875rem; color: var(--arch-texte-3); }
.as-archives .as-arch__fiche-lien { color: var(--arch-texte-2); }
html.as-arch-ouverte { overflow: hidden; }

@media (max-width: 600px) {
	.as-archives .as-arch__filtres { position: static; }
	.as-archives .as-arch__grille { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
	.as-archives .as-arch__titre { font-size: 1rem; }
	.as-archives .as-arch__haut { flex-direction: column; gap: .4rem; padding: .75rem; }
	.as-archives .as-arch__bas { padding: .75rem .75rem .9rem; }
	.as-archives .as-arch__date { align-items: flex-start; text-align: left; flex-direction: row; gap: .3rem; align-items: baseline; }
	.as-archives .as-arch__date b { font-size: 1.125rem; display: inline; }
	.as-archives .as-arch__badge { font-size: .6875rem; padding: .25rem .4rem; }
	.as-archives .as-arch__tags { display: none; }
	.as-archives .as-arch__fiche { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
	.as-archives .as-arch__fiche-titres { left: 1.25rem; right: 1.25rem; }
	.as-archives .as-arch__fiche-texte { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.as-archives .as-arch__img { transition: none; }
	.as-archives .as-arch__tuile:hover .as-arch__img, .as-archives .as-arch__tuile:focus-visible .as-arch__img { transform: none; }
}