/* Galerie Fonds d'Écran — couleurs personnalisables via ces variables dans ton thème */
.feg, .feg-single, .feg-lb {
	--feg-accent: #7c3aed;
	--feg-accent-text: #fff;
	--feg-radius: 12px;
	--feg-gap: 12px;
	--feg-chip-bg: rgba(127, 127, 127, .12);
}

.feg { margin: 1.5em 0; }

/* Puces personnages + filtres */
.feg-chars, .feg-filters, .feg-colors { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.feg-chip, .feg-filter {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 14px; border-radius: 999px; border: 1px solid transparent;
	background: var(--feg-chip-bg); color: inherit; font: inherit; font-size: .9em; line-height: 1.4;
	text-decoration: none; cursor: pointer; transition: background .15s, color .15s;
}
.feg-chip span, .feg-filter span { opacity: .6; font-size: .85em; }
.feg-chip:hover, .feg-filter:hover { border-color: var(--feg-accent); }
.feg-chip.is-active, .feg-filter.is-active { background: var(--feg-accent); color: var(--feg-accent-text); }
.feg-chip.is-active span, .feg-filter.is-active span { opacity: .85; }
.feg-chars { margin-bottom: 14px; }

.feg-color {
	width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
	border: 2px solid rgba(127, 127, 127, .35); transition: transform .15s;
}
.feg-color:hover { transform: scale(1.12); }
.feg-color.is-active { outline: 3px solid var(--feg-accent); outline-offset: 2px; }
.feg-c-noir { background: #111; } .feg-c-blanc { background: #f5f5f5; } .feg-c-gris { background: #8a8a8a; }
.feg-c-rouge { background: #e11d48; } .feg-c-orange { background: #f97316; } .feg-c-jaune { background: #facc15; }
.feg-c-vert { background: #22c55e; } .feg-c-cyan { background: #06b6d4; } .feg-c-bleu { background: #2563eb; }
.feg-c-violet { background: #8b5cf6; } .feg-c-rose { background: #ec4899; }

/* Mosaïque : colonnes CSS sans JS, colonnes équilibrées avec JS */
.feg-grid { columns: 4 220px; column-gap: var(--feg-gap); transition: opacity .2s; }
.feg-grid.is-masonry { columns: auto; display: flex; gap: var(--feg-gap); align-items: flex-start; }
.feg-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--feg-gap); }
.feg.is-loading .feg-grid { opacity: .55; }

.feg-item {
	position: relative; margin: 0 0 var(--feg-gap); break-inside: avoid;
	border-radius: var(--feg-radius); overflow: hidden; background: var(--feg-chip-bg);
}
.feg-grid.is-masonry .feg-item { margin: 0; }
.feg-link { display: block; }
.feg-item img {
	display: block; width: 100%; height: auto; margin: 0; border-radius: 0;
	transition: transform .35s ease;
}
.feg-item:hover img { transform: scale(1.04); }

.feg-meta {
	position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: center;
	padding: 28px 10px 8px; color: #fff; font-size: 12px; line-height: 1;
	background: linear-gradient(transparent, rgba(0, 0, 0, .65));
	opacity: 0; transition: opacity .2s; pointer-events: none;
}
.feg-item:hover .feg-meta, .feg-item:focus-within .feg-meta { opacity: 1; }
.feg-dl {
	pointer-events: auto; display: inline-flex; padding: 7px; border-radius: 50%;
	background: rgba(255, 255, 255, .92); color: #111 !important; text-decoration: none;
}
.feg-dl:hover { background: var(--feg-accent); color: var(--feg-accent-text) !important; }
@media (hover: none) { .feg-meta { opacity: 1; background: none; justify-content: flex-end; padding: 6px; } .feg-dim { display: none; } }

.feg-sentinel { height: 1px; }
.feg-more, .feg-btn {
	display: inline-flex; align-items: center; gap: 8px; justify-content: center;
	padding: 10px 22px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--feg-accent); color: var(--feg-accent-text) !important; font: inherit; font-weight: 600; text-decoration: none;
}
.feg-more { display: flex; margin: 16px auto 0; }
.feg-more[hidden] { display: none; }
.feg-btn small { font-weight: 400; opacity: .85; }
.feg-btn-ghost { background: var(--feg-chip-bg); color: inherit !important; }
.feg-empty { opacity: .7; }

/* Visionneuse */
html.feg-lb-open { overflow: hidden; }
.feg-lb {
	position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column;
	background: rgba(8, 8, 12, .94); color: #fff;
}
.feg-lb[hidden] { display: none; }
.feg-lb-stage { flex: 1; min-height: 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: 56px 64px 8px; position: relative; }
.feg-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transition: opacity .2s; }
.feg-lb.is-loading .feg-lb-stage img { opacity: .35; }
.feg-lb-spin { position: absolute; width: 36px; height: 36px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: feg-spin .8s linear infinite; display: none; }
.feg-lb.is-loading .feg-lb-spin { display: block; }
@keyframes feg-spin { to { transform: rotate(360deg); } }
.feg-lb-close, .feg-lb-prev, .feg-lb-next {
	position: absolute; z-index: 2; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .1);
	width: 46px; height: 46px; border-radius: 50%; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.feg-lb-close:hover, .feg-lb-prev:hover, .feg-lb-next:hover { background: rgba(255, 255, 255, .25); }
.feg-lb-close { top: 10px; right: 12px; }
.feg-lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.feg-lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.feg-lb-prev[hidden], .feg-lb-next[hidden] { display: none; }
.feg-lb-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding: 12px 20px 18px; }
.feg-lb-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feg-lb-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.feg-lb-info { font-size: 13px; opacity: .7; }
.feg-lb-actions { display: flex; align-items: center; gap: 14px; }
.feg-lb-page { color: #fff !important; opacity: .8; font-size: 14px; }
.feg-lb-page[hidden] { display: none; }
@media (max-width: 600px) {
	.feg-lb-stage { padding: 56px 8px 8px; }
	.feg-lb-prev, .feg-lb-next { top: auto; bottom: 90px; transform: none; }
	.feg-lb-title { max-width: 90vw; }
}

/* Page d'une image */
.feg-single { margin: 0 0 2em; }
.feg-crumbs { font-size: .9em; margin: 0 0 12px; opacity: .85; }
.feg-single-figure { margin: 0 0 16px; text-align: center; }
.feg-single-figure img { max-height: 80vh; width: auto; max-width: 100%; height: auto; border-radius: var(--feg-radius); }
.feg-single-actions { text-align: center; margin: 0 0 20px; }
.feg-single-actions .feg-btn { font-size: 1.05em; padding: 12px 28px; }
.feg-single-info { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .95em; }
.feg-related-title { margin-top: 1.5em; }
.feg-related-more { text-align: center; margin-top: 12px; }

/* Partage */
.feg-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 0 20px; }
.feg-share__label { font-weight: 700; margin-right: 4px; }
.feg-share__btn {
	display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; border: 0; cursor: pointer;
	font: inherit; font-size: .88em; font-weight: 700; text-decoration: none; color: #fff !important; background: #444;
}
.feg-share__btn:hover { filter: brightness(1.12); }
.feg-share__btn[hidden] { display: none; }
.feg-share--pinterest { background: #e60023; }
.feg-share--facebook { background: #1877f2; }
.feg-share--x { background: #000; }
.feg-share--whatsapp { background: #128c4b; }
.feg-share--reddit { background: #d93a00; }
.feg-share--copy, .feg-share--native { background: var(--feg-chip-bg); color: inherit !important; border: 1px solid rgba(127,127,127,.4); }
.feg-lb-share { width: 100%; justify-content: flex-start; margin: 0; }
.feg-lb-share .feg-share__label { opacity: .75; }
.feg-lb .feg-share--copy, .feg-lb .feg-share--native { color: #fff !important; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }

/* Bouton Pinterest au survol des images */
.feg-pin {
	position: absolute; top: 8px; left: 8px; z-index: 2; padding: 6px 12px; border-radius: 999px;
	background: #e60023; color: #fff !important; font-size: 12px; font-weight: 700; text-decoration: none; line-height: 1;
	opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s;
}
.feg-item:hover .feg-pin, .feg-pin:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .feg-pin { display: none; } }

/* Texte d'introduction de la collection */
.feg-intro { max-width: 70ch; margin: 0 0 18px; }
.feg-intro p:last-child { margin-bottom: 0; }

/* Images qui ne se chargent pas */
.feg-item.feg-broken { display: none; }
.feg-lb-broken { display: none; position: absolute; color: #fff; font-size: 15px; background: rgba(0,0,0,.6); padding: 10px 16px; border-radius: 8px; }
.feg-lb.is-broken .feg-lb-broken { display: block; }
.feg-lb.is-broken .feg-lb-stage img { opacity: 0; }

/* Cartes personnages (page d'un anime) */
.feg-persos { margin: 0 0 22px; }
.feg-persos__title { font-weight: 700; font-size: 1.05em; margin: 0 0 10px; }
.feg-persos__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.feg-persos__list li { margin: 0; padding: 0; }
.feg-perso { display: block; position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 3 / 4; background: #ddd; color: #fff; text-decoration: none; border: 2px solid var(--ink, #1d1626); }
.feg-perso__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.feg-perso:hover .feg-perso__img, .feg-perso:focus-visible .feg-perso__img { transform: scale(1.06); }
.feg-perso::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.78)); pointer-events: none; }
.feg-perso__name, .feg-perso__count { position: absolute; left: 9px; right: 9px; z-index: 1; line-height: 1.2; }
.feg-perso__name { bottom: 24px; font-weight: 700; font-size: .92em; }
.feg-perso__count { bottom: 8px; font-size: .75em; opacity: .85; }
@media (max-width: 600px) { .feg-persos__list { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

/* Publicité intercalée dans la mosaïque */
.feg-item.feg-ad { padding: 8px; border-radius: 10px; background: rgba(0,0,0,.04); border: 1px dashed rgba(0,0,0,.18); overflow: hidden; }
.feg-ad__label { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin: 0 0 6px; }
.feg-ad__slot { min-height: 250px; }
.feg-ad__slot ins { display: block; }

/* Bannière de pub sur toute la largeur (la mosaïque reprend en dessous) */
.feg-grid.is-seg { display: block; columns: auto; }
.feg-seg { display: flex; gap: var(--feg-gap); align-items: flex-start; }
.feg-seg + .feg-banner, .feg-banner + .feg-seg { margin-top: var(--feg-gap); }
.feg-banner { margin: 6px 0 calc(var(--feg-gap) + 6px); padding: 8px 10px 10px; border-radius: 10px; background: rgba(0,0,0,.04); border: 1px dashed rgba(0,0,0,.18); text-align: center; }
.feg-banner .feg-ad__slot { min-height: 100px; }