/* Royaume Loop Kit — surcharge les couleurs via :root { --rr-dark: #...; } */
:root {
	--rr-dark: #1c161a;
	--rr-bg: #faf7f4;
	--rr-line: #d9d2cc;
	--rr-muted: #7b726d;
	--rr-gap: 18px;
}

/* ---------- Loop Grid (classe CSS « rr-grid » sur le widget) ---------- */
.rr-grid .elementor-loop-container {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px var(--rr-gap);
}
@media (max-width: 1024px) { .rr-grid .elementor-loop-container { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .rr-grid .elementor-loop-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; } }
.rr-grid .e-loop-item[hidden],
.rr-grid .e-loop-item.rr-hidden { display: none !important; }

/* Carte : image en classe « rr-media » (widget Image), ratio 2/3 */
.rr-media { position: relative; overflow: hidden; }
.rr-media img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; transition: transform .6s ease; }
.e-loop-item:hover .rr-media img { transform: scale(1.03); }

/* Bouton « Aperçu » (injecté par le JS) */
.rr-apercu {
	position: absolute; left: 12px; right: 12px; bottom: 12px;
	padding: 10px 14px; border: 0; background: #fff; color: var(--rr-dark);
	font-family: inherit; font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; text-align: center;
	cursor: pointer; opacity: 0; transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease;
}
.e-loop-item:hover .rr-apercu, .rr-apercu:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .rr-apercu { opacity: 1; transform: none; padding: 8px; } }

/* Textes de la carte : classes « rr-titre » (Titre) et « rr-cat » (Info de l'article / Taxonomie) */
.rr-cat, .rr-cat a { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--rr-muted); text-decoration: none; }

/* ---------- Filtres ---------- */
.rr-filters__bar {
	display: flex; align-items: center; gap: 24px; padding: 18px 0;
	border-top: 1px solid var(--rr-line); border-bottom: 1px solid var(--rr-line);
}
.rr-pills { display: flex; gap: 10px; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.rr-pills::-webkit-scrollbar { display: none; }
.rr-pill {
	flex: 0 0 auto; padding: 9px 18px; border: 1px solid var(--rr-line); border-radius: 999px;
	background: transparent; color: var(--rr-dark); font-size: 13px; line-height: 1; cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.rr-pill:hover { border-color: var(--rr-dark); }
.rr-pill.is-active { background: var(--rr-dark); border-color: var(--rr-dark); color: #fff; }
.rr-pill__n { margin-left: 4px; font-size: 11px; opacity: .55; }
.rr-search { display: flex; align-items: center; gap: 10px; flex: 0 0 240px; border-bottom: 1px solid var(--rr-dark); color: var(--rr-muted); }
.rr-search__input { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 8px 0 !important; width: 100%; font-size: 13px; color: var(--rr-dark); outline: 0; }
.rr-count { margin: 14px 0 18px; font-size: 12px; color: var(--rr-muted); letter-spacing: .02em; }
@media (max-width: 767px) {
	.rr-filters__bar { flex-direction: column; align-items: stretch; gap: 14px; }
	.rr-search { flex-basis: auto; }
}

/* ---------- Afficher plus ---------- */
.rr-more-wrap { text-align: center; margin: 40px 0 10px; }
.rr-more { padding: 16px 34px; border: 0; background: var(--rr-dark); color: #fff; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.rr-more:hover { opacity: .88; }
.rr-more[hidden] { display: none; }
.rr-empty { grid-column: 1 / -1; text-align: center; color: var(--rr-muted); padding: 40px 0; }

/* ---------- Cartes silhouettes (accueil) ---------- */
.rr-silhouettes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rr-gap); }
@media (max-width: 900px) { .rr-silhouettes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rr-silhouette { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; color: #fff; text-decoration: none; background: var(--rr-dark); }
.rr-silhouette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.rr-silhouette:hover img { transform: scale(1.05); }
.rr-silhouette::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,12,16,.62), rgba(20,12,16,0) 55%); }
.rr-silhouette__txt { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rr-silhouette__name { font-size: 26px; line-height: 1.1; }
.rr-silhouette__n { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }

/* ---------- Modal aperçu ---------- */
.rr-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(20,12,16,.55); }
.rr-modal.is-open { display: flex; }
.rr-modal__box { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(960px, 100%); max-height: 92vh; overflow: auto; background: var(--rr-bg); }
@media (max-width: 767px) { .rr-modal__box { grid-template-columns: 1fr; } }
.rr-modal__gal { background: #efe9e4; }
.rr-modal__main { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.rr-modal__thumbs { display: flex; gap: 6px; padding: 6px; overflow-x: auto; }
.rr-modal__thumbs img { width: 56px; height: 84px; object-fit: cover; cursor: pointer; opacity: .6; }
.rr-modal__thumbs img.is-active { opacity: 1; outline: 1px solid var(--rr-dark); }
.rr-modal__info { padding: 40px 34px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.rr-modal__cat { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rr-muted); }
.rr-modal__title { margin: 0; font-size: 34px; line-height: 1.1; color: var(--rr-dark); }
.rr-modal__desc { font-size: 14px; line-height: 1.6; color: var(--rr-muted); }
.rr-modal__cta { display: inline-block; padding: 15px 26px; background: var(--rr-dark); color: #fff !important; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; text-align: center; }
.rr-modal__link { font-size: 12px; color: var(--rr-dark); text-align: center; }
.rr-modal__close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--rr-dark); font-size: 20px; line-height: 1; cursor: pointer; }
body.rr-lock { overflow: hidden; }