/* =============================================================================
   Astrolabe — Widget : Collections Listing (jxc-cl-*)
   Styles partagés (loader, spinner, sentinel, empty) → jxc-shared.css
   ============================================================================= */

/* ── Section grille ──────────────────────────────────────────────────────────── */

.jxc-cl-grid-section {
padding: 0 0 60px;
}

.jxc-cl-grid {
display: grid;
gap: 24px;
margin: 0;
padding: 0;
}

.jxc-cl-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.jxc-cl-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.jxc-cl-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.jxc-cl-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.jxc-cl-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ── Carte collection ────────────────────────────────────────────────────────── */

.jxc-cl-card {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.jxc-cl-card:hover {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
transform: translateY(-3px);
}

.jxc-cl-card__link {
display: block;
text-decoration: none;
position: relative;
}

/* ── Visuel ──────────────────────────────────────────────────────────────────── */

.jxc-cl-card__img-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #1a1a2e;
}

.jxc-cl-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.40s ease;
}

.jxc-cl-card__link:hover .jxc-cl-card__img {
transform: scale(1.05);
}

/* ── Overlay dégradé bas → transparent ──────────────────────────────────────── */

.jxc-cl-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.38) 0%, transparent 60%);
transition: background 0.25s ease;
pointer-events: none;
}

/* ── Corps texte ─────────────────────────────────────────────────────────────── */

.jxc-cl-card__body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px 18px 16px;
}

.jxc-cl-card__title {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #fff;
margin: 0 0 4px;
line-height: 1.2;
}

.jxc-cl-card__count {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 13px;
font-weight: 400;
color: rgba(255, 255, 255, 0.80);
margin: 0;
line-height: 1.4;
}

.jxc-cl-card__tagline {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 12px;
font-weight: 400;
font-style: italic;
color: rgba(255, 255, 255, 0.65);
margin: 4px 0 0;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* ── Badge Nouveauté ─────────────────────────────────────────────────────────── */

.jxc-cl-card__nouveaute-badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--jxc-accent, #742E47);
color: #fff;
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 3px;
pointer-events: none;
z-index: 2;
}

/* ── Description collection ──────────────────────────────────────────────────── */

.jxc-cl-card__desc {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 12px;
font-weight: 400;
color: var(--jxc-text-muted, #777);
text-align: center;
margin: 8px 0 0;
padding: 0 8px;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
.jxc-cl-grid-section {
padding: 0 0 40px;
}

.jxc-cl-grid--cols-3,
.jxc-cl-grid--cols-4 {
grid-template-columns: repeat(2, 1fr);
}

.jxc-cl-grid--cols-2 {
grid-template-columns: 1fr;
}

.jxc-cl-card__title {
font-size: 16px;
}
}

/* =============================================================================
   Style "rounds" — photo ronde + label + nom
   ============================================================================= */

/* Overrides du gap pour le style rounds — flexbox pour centrage naturel */
.jxc-cl-grid--rounds {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px 32px;
align-items: start;
grid-template-columns: none;
}

/* Colonnes supplémentaires — sans effet en flex, kept for reference */
.jxc-cl-grid--rounds.jxc-cl-grid--cols-5 { grid-template-columns: none; }
.jxc-cl-grid--rounds.jxc-cl-grid--cols-6 { grid-template-columns: none; }

/* Carte ronde */
.jxc-cl-round-card {
text-align: center;
}

.jxc-cl-round-card__link {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-decoration: none;
color: inherit;
}

.jxc-cl-round-card__photo-wrap {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background-color: rgba(0,0,0,0.06);
transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.jxc-cl-round-card__link:hover .jxc-cl-round-card__photo-wrap {
box-shadow: 0 4px 14px rgba(0,0,0,0.18);
transform: translateY(-2px);
}

.jxc-cl-round-card__photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}

.jxc-cl-round-card__type {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.55;
margin: 0;
line-height: 1.2;
}

.jxc-cl-round-card__name {
font-size: 0.78rem;
font-weight: 700;
margin: 0;
line-height: 1.3;
}

@media (max-width: 767px) {
.jxc-cl-grid--rounds.jxc-cl-grid--cols-5,
.jxc-cl-grid--rounds.jxc-cl-grid--cols-6 {
grid-template-columns: repeat(4, 1fr);
}
}

/* =============================================================================
   Style "flip" — flip card : front logo+nom / back synopsis
   ============================================================================= */

.jxc-cl-grid--flip {
display: grid;
gap: 24px;
}

/* ── Carte flip ──────────────────────────────────────────────────────────────── */

.jxc-cl-flip {
perspective: 900px;
}

.jxc-cl-flip__link {
display: block;
text-decoration: none;
color: inherit;
height: 220px;
}

.jxc-cl-flip__inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
transform-style: preserve-3d;
border-radius: 12px;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.13);
}

.jxc-cl-flip:hover .jxc-cl-flip__inner {
transform: rotateY(180deg);
}

/* ── Face commune ────────────────────────────────────────────────────────────── */

.jxc-cl-flip__front,
.jxc-cl-flip__back {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 16px;
}

/* ── Recto ───────────────────────────────────────────────────────────────────── */

.jxc-cl-flip__front {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.07);
gap: 10px;
}

/* Photo ronde */
.jxc-cl-flip__photo-wrap {
width: 110px;
height: 110px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: rgba(0, 0, 0, 0.06);
border: 3px solid rgba(33, 33, 33, 0.15);
}

.jxc-cl-flip__photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* Label "COLLECTION" */
.jxc-cl-flip__label {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #999;
margin: 0;
line-height: 1;
}

/* Nom de la collection */
.jxc-cl-flip__name {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 1rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #1a1a1a;
margin: 0;
line-height: 1.2;
text-align: center;
}

/* ── Recto — Hors Collection (centré vertical, pas de photo) ─────────────────── */

.jxc-cl-flip__front--hors {
background: #f5f0f2;
justify-content: center;
}

.jxc-cl-flip__front--hors .jxc-cl-flip__label {
font-size: 0.85rem;
letter-spacing: 0.16em;
color: #212121;
font-weight: 800;
}

/* ── Verso ───────────────────────────────────────────────────────────────────── */

.jxc-cl-flip__back {
background: #212121;
transform: rotateY(180deg);
justify-content: flex-start;
align-items: flex-start;
padding: 24px 20px;
gap: 12px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}

.jxc-cl-flip__back::before {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
background: rgba(0, 0, 0, 0.62);
z-index: 0;
}

.jxc-cl-flip__back-name,
.jxc-cl-flip__back-desc,
.jxc-cl-flip__back-term-desc {
position: relative;
z-index: 1;
}

.jxc-cl-flip__back-name {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 1rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #fff;
margin: 0;
line-height: 1.2;
flex-shrink: 0;
}

/* Specificity override — bat .elementor-kit-850 h3 { color: #555 } (0,1,1) */
.jxc-cl-flip__back .jxc-cl-flip__back-name {
color: #fff;
}

.jxc-cl-flip__back-desc {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.85);
margin: 0;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: break-word;
word-break: break-word;
}

.jxc-cl-flip__back-term-desc {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.6);
margin: 6px 0 0;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1 1 0;
min-height: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
.jxc-cl-grid--flip {
grid-template-columns: repeat(2, 1fr) !important;
}

.jxc-cl-flip__link {
height: 200px;
}
}

@media (max-width: 479px) {
.jxc-cl-grid--flip {
grid-template-columns: 1fr !important;
}
}