/* ============================================================
   Extra MatGeco — Card Grid — Frontend CSS v0.9.0
   ============================================================ */
.em-cg {
  --em-cg-cols: 5;
  --em-cg-gap: 24px;
  --em-cg-container-max: 1320px;
  --em-cg-container-pad-v: 40px;
  --em-cg-container-pad-h: 32px;
  --em-cg-card-radius: 16px;
  --em-cg-card-pad: 20px;
  --em-cg-aspect: 1/1;
  --em-cg-overlay: rgba(0,0,0,0.45);
  --em-cg-label-bg: #11802f;
  --em-cg-label-color: #ffffff;
  --em-cg-label-size: 11px;
  --em-cg-label-pad-v: 6px;
  --em-cg-label-pad-h: 12px;
  --em-cg-label-radius: 6px;
  --em-cg-label-weight: 800;
  --em-cg-title-color: #ffffff;
  --em-cg-title-accent: #15c042;
  --em-cg-title-size: 22px;
  --em-cg-title-weight: 700;
  --em-cg-title-lh: 1.2;

  font-family: inherit;
}

.em-cg-inner {
  max-width: var(--em-cg-container-max);
  margin: 0 auto;
  padding: var(--em-cg-container-pad-v) var(--em-cg-container-pad-h);
  display: grid;
  grid-template-columns: repeat(var(--em-cg-cols), 1fr);
  gap: var(--em-cg-gap);
}

/* === CARD === */
.em-cg .em-cg-card {
  position: relative;
  display: block;
  aspect-ratio: var(--em-cg-aspect);
  cursor: pointer;
  border-radius: var(--em-cg-card-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--em-cg-title-color);
  background: #1d2327;
  transition: transform 300ms ease, box-shadow 300ms ease, filter 300ms ease;
}

/* Shadow variants */
.em-cg-shadow-none   .em-cg-card { box-shadow: none; }
.em-cg-shadow-soft   .em-cg-card { box-shadow: 0 6px 18px rgba(0,0,0,0.10); }
.em-cg-shadow-medium .em-cg-card { box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
.em-cg-shadow-strong .em-cg-card { box-shadow: 0 20px 48px rgba(0,0,0,0.26); }

/* Hover effects */
.em-cg-hover-lift       .em-cg-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.22); }
.em-cg-hover-zoom       .em-cg-card:hover .em-cg-card-bg { transform: scale(1.08); }
.em-cg-hover-brightness .em-cg-card:hover .em-cg-card-bg { filter: brightness(1.15); }

.em-cg .em-cg-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: var(--em-cg-bg-pos, center);
  background-repeat: no-repeat;
  transition: transform 400ms cubic-bezier(0.4,0,0.2,1), filter 400ms ease;
  z-index: 0;
}
/* Zoom de recadrage (point focal) — appliqué uniquement si la carte a un zoom personnalisé */
.em-cg .em-cg-card-bg.em-cg-bg-zoom {
  transform: scale(var(--em-cg-bg-scale, 1));
  transform-origin: var(--em-cg-bg-origin, center);
}
.em-cg-hover-zoom .em-cg-card:hover .em-cg-card-bg.em-cg-bg-zoom {
  transform: scale(calc(var(--em-cg-bg-scale, 1) * 1.08));
}
.em-cg .em-cg-card-overlay {
  position: absolute;
  inset: 0;
  background: var(--em-cg-overlay);
  z-index: 1;
}
.em-cg-overlay-gradient .em-cg-card-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, var(--em-cg-overlay) 100%);
}

/* === Label (étiquette) === */
.em-cg .em-cg-card-label {
  position: absolute;
  z-index: 2;
  display: inline-block;
  background: var(--em-cg-label-bg);
  color: var(--em-cg-label-color);
  font-size: var(--em-cg-label-size);
  font-weight: var(--em-cg-label-weight);
  padding: var(--em-cg-label-pad-v) var(--em-cg-label-pad-h);
  border-radius: var(--em-cg-label-radius);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* 9 positions : 3 verticales (top/middle/bottom) × 3 horizontales (left/center/right) */
.em-cg-label-top-left      .em-cg-card-label { top: var(--em-cg-card-pad); left: var(--em-cg-card-pad); }
.em-cg-label-top-center    .em-cg-card-label { top: var(--em-cg-card-pad); left: 50%; transform: translateX(-50%); }
.em-cg-label-top-right     .em-cg-card-label { top: var(--em-cg-card-pad); right: var(--em-cg-card-pad); }
.em-cg-label-middle-left   .em-cg-card-label { top: 50%; left: var(--em-cg-card-pad); transform: translateY(-50%); }
.em-cg-label-middle-center .em-cg-card-label { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.em-cg-label-middle-right  .em-cg-card-label { top: 50%; right: var(--em-cg-card-pad); transform: translateY(-50%); }
.em-cg-label-bottom-left   .em-cg-card-label { bottom: var(--em-cg-card-pad); left: var(--em-cg-card-pad); }
.em-cg-label-bottom-center .em-cg-card-label { bottom: var(--em-cg-card-pad); left: 50%; transform: translateX(-50%); }
.em-cg-label-bottom-right  .em-cg-card-label { bottom: var(--em-cg-card-pad); right: var(--em-cg-card-pad); }

/* === Title === */
/* Wrapper positioné absolument, contient le titre + label inline éventuel */
.em-cg .em-cg-card-content {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  padding: 0 var(--em-cg-card-pad);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.em-cg-title-pos-top    .em-cg-card-content { top: var(--em-cg-card-pad); }
.em-cg-title-pos-center .em-cg-card-content { top: 50%; transform: translateY(-50%); }
.em-cg-title-pos-bottom .em-cg-card-content { bottom: var(--em-cg-card-pad); }

.em-cg .em-cg-card-title {
  position: static;
  z-index: 2;
  margin: 0;
  font-size: var(--em-cg-title-size);
  font-weight: var(--em-cg-title-weight);
  line-height: var(--em-cg-title-lh);
  color: var(--em-cg-title-color) !important;
}
.em-cg .em-cg-card-title em {
  font-style: normal;
  color: var(--em-cg-title-accent);
}
.em-cg-title-align-left   .em-cg-card-content,
.em-cg-title-align-left   .em-cg-card-title { text-align: left; align-items: flex-start; }
.em-cg-title-align-center .em-cg-card-content,
.em-cg-title-align-center .em-cg-card-title { text-align: center; align-items: center; }
.em-cg-title-align-right  .em-cg-card-content,
.em-cg-title-align-right  .em-cg-card-title { text-align: right; align-items: flex-end; }

/* Label inline (au-dessus / en dessous du titre) */
.em-cg .em-cg-card-label.em-cg-label-inline {
  position: static !important;
  transform: none !important;
  display: inline-block;
  width: auto;
}

/* === Responsive (Tablette ≤1023px, Mobile ≤767px) === */
.em-cg-preview-tablet .em-cg-inner,
.em-cg-preview-mobile .em-cg-inner {
  /* Reset for preview mode */
}
.em-cg-preview-tablet .em-cg-inner { grid-template-columns: repeat(var(--em-cg-cols-tablet), 1fr); }
.em-cg-preview-mobile .em-cg-inner { grid-template-columns: repeat(var(--em-cg-cols-mobile), 1fr); }
.em-cg-preview-tablet .em-cg-inner { gap: var(--em-cg-gap-tablet, var(--em-cg-gap)); padding: var(--em-cg-pad-v-tablet, var(--em-cg-container-pad-v)) var(--em-cg-pad-h-tablet, var(--em-cg-container-pad-h)); }
.em-cg-preview-mobile .em-cg-inner { gap: var(--em-cg-gap-mobile, var(--em-cg-gap)); padding: var(--em-cg-pad-v-mobile, var(--em-cg-container-pad-v)) var(--em-cg-pad-h-mobile, var(--em-cg-container-pad-h)); }
.em-cg-preview-tablet .em-cg-card { border-radius: var(--em-cg-card-radius-tablet, var(--em-cg-card-radius)) !important; }
.em-cg-preview-mobile .em-cg-card { border-radius: var(--em-cg-card-radius-mobile, var(--em-cg-card-radius)) !important; }
.em-cg-preview-tablet .em-cg-card-label { font-size: var(--em-cg-label-size-tablet, var(--em-cg-label-size)) !important; }
.em-cg-preview-mobile .em-cg-card-label { font-size: var(--em-cg-label-size-mobile, var(--em-cg-label-size)) !important; }
.em-cg-preview-tablet .em-cg-card-title { font-size: var(--em-cg-title-size-tablet, var(--em-cg-title-size)) !important; }
.em-cg-preview-mobile .em-cg-card-title { font-size: var(--em-cg-title-size-mobile, var(--em-cg-title-size)) !important; }

.em-cg-preview-tablet.em-cg-tablet-title-align-left   .em-cg-card-title { text-align: left !important; }
.em-cg-preview-tablet.em-cg-tablet-title-align-center .em-cg-card-title { text-align: center !important; }
.em-cg-preview-tablet.em-cg-tablet-title-align-right  .em-cg-card-title { text-align: right !important; }
.em-cg-preview-mobile.em-cg-mobile-title-align-left   .em-cg-card-title { text-align: left !important; }
.em-cg-preview-mobile.em-cg-mobile-title-align-center .em-cg-card-title { text-align: center !important; }
.em-cg-preview-mobile.em-cg-mobile-title-align-right  .em-cg-card-title { text-align: right !important; }

@media (max-width: 1023px) {
  .em-cg .em-cg-inner { grid-template-columns: repeat(var(--em-cg-cols-tablet), 1fr); gap: var(--em-cg-gap-tablet, var(--em-cg-gap)); padding: var(--em-cg-pad-v-tablet, var(--em-cg-container-pad-v)) var(--em-cg-pad-h-tablet, var(--em-cg-container-pad-h)); }
  .em-cg .em-cg-card { border-radius: var(--em-cg-card-radius-tablet, var(--em-cg-card-radius)) !important; }
  .em-cg .em-cg-card-label { font-size: var(--em-cg-label-size-tablet, var(--em-cg-label-size)) !important; }
  .em-cg .em-cg-card-title { font-size: var(--em-cg-title-size-tablet, var(--em-cg-title-size)) !important; }
  .em-cg-tablet-title-align-left   .em-cg-card-title { text-align: left !important; }
  .em-cg-tablet-title-align-center .em-cg-card-title { text-align: center !important; }
  .em-cg-tablet-title-align-right  .em-cg-card-title { text-align: right !important; }
}
@media (max-width: 767px) {
  .em-cg .em-cg-inner { grid-template-columns: repeat(var(--em-cg-cols-mobile), 1fr); gap: var(--em-cg-gap-mobile, var(--em-cg-gap)); padding: var(--em-cg-pad-v-mobile, var(--em-cg-container-pad-v)) var(--em-cg-pad-h-mobile, var(--em-cg-container-pad-h)); }
  .em-cg .em-cg-card { border-radius: var(--em-cg-card-radius-mobile, var(--em-cg-card-radius)) !important; }
  .em-cg .em-cg-card-label { font-size: var(--em-cg-label-size-mobile, var(--em-cg-label-size)) !important; }
  .em-cg .em-cg-card-title { font-size: var(--em-cg-title-size-mobile, var(--em-cg-title-size)) !important; }
  .em-cg-mobile-title-align-left   .em-cg-card-title { text-align: left !important; }
  .em-cg-mobile-title-align-center .em-cg-card-title { text-align: center !important; }
  .em-cg-mobile-title-align-right  .em-cg-card-title { text-align: right !important; }
}

/* === Disable hover on touch === */
@media (hover: none) {
  .em-cg-hover-lift .em-cg-card:hover,
  .em-cg-hover-zoom .em-cg-card:hover .em-cg-card-bg,
  .em-cg-hover-brightness .em-cg-card:hover .em-cg-card-bg { transform: none; filter: none; box-shadow: inherit; }
  /* Une carte recadrée (zoom) garde son cadrage même au toucher, quel que soit l'effet de survol */
  .em-cg .em-cg-card:hover .em-cg-card-bg.em-cg-bg-zoom { transform: scale(var(--em-cg-bg-scale, 1)); }
}

/* === v0.12.0 — Largeur du bloc === */
.em-cg.em-cg-w-100   .em-cg-inner { max-width: 100% !important; }
.em-cg.em-cg-w-90    .em-cg-inner { max-width: 90%  !important; margin-left: auto; margin-right: auto; }
.em-cg.em-cg-w-80    .em-cg-inner { max-width: 80%  !important; margin-left: auto; margin-right: auto; }
.em-cg.em-cg-w-75    .em-cg-inner { max-width: 75%  !important; margin-left: auto; margin-right: auto; }
.em-cg.em-cg-w-66    .em-cg-inner { max-width: 66.6667% !important; margin-left: auto; margin-right: auto; }
.em-cg.em-cg-w-50    .em-cg-inner { max-width: 50%  !important; margin-left: auto; margin-right: auto; }
.em-cg.em-cg-w-full  { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none !important; }
.em-cg.em-cg-w-full  .em-cg-inner { max-width: none !important; }
.em-cg.em-cg-w-custom .em-cg-inner { max-width: var(--em-cg-custom-w, 100%) !important; margin-left: auto; margin-right: auto; }

/* === v0.13.6 — Alignement WP (wide/full) : laisse le wrapper WP gérer la largeur === */
.em-cg.alignwide .em-cg-inner,
.em-cg.alignfull .em-cg-inner { max-width: none !important; }


/* === v0.13.8 — Largeur responsive (tablette + mobile) ===================== */
@media (max-width: 1023px) {
  .em-cg.em-cg-w-tab-100 .em-cg-inner   { max-width: 100% !important; }
  .em-cg.em-cg-w-tab-90  .em-cg-inner   { max-width: 90%  !important; margin-left: auto; margin-right: auto; }
  .em-cg.em-cg-w-tab-80  .em-cg-inner   { max-width: 80%  !important; margin-left: auto; margin-right: auto; }
  .em-cg.em-cg-w-tab-75  .em-cg-inner   { max-width: 75%  !important; margin-left: auto; margin-right: auto; }
  .em-cg.em-cg-w-tab-66  .em-cg-inner   { max-width: 66.6667% !important; margin-left: auto; margin-right: auto; }
  .em-cg.em-cg-w-tab-50  .em-cg-inner   { max-width: 50%  !important; margin-left: auto; margin-right: auto; }
  .em-cg.em-cg-w-tab-full                { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none !important; }
  .em-cg.em-cg-w-tab-full .em-cg-inner   { max-width: none !important; }
  .em-cg.em-cg-w-tab-custom .em-cg-inner { max-width: var(--em-cg-custom-w-tab, 100%) !important; margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
  .em-cg.em-cg-w-mob-100 .em-cg-inner   { max-width: 100% !important; }
  .em-cg.em-cg-w-mob-90  .em-cg-inner   { max-width: 90%  !important; margin-left: auto; margin-right: auto; }
  .em-cg.em-cg-w-mob-80  .em-cg-inner   { max-width: 80%  !important; margin-left: auto; margin-right: auto; }
  .em-cg.em-cg-w-mob-75  .em-cg-inner   { max-width: 75%  !important; margin-left: auto; margin-right: auto; }
  .em-cg.em-cg-w-mob-66  .em-cg-inner   { max-width: 66.6667% !important; margin-left: auto; margin-right: auto; }
  .em-cg.em-cg-w-mob-50  .em-cg-inner   { max-width: 50%  !important; margin-left: auto; margin-right: auto; }
  .em-cg.em-cg-w-mob-full                { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none !important; }
  .em-cg.em-cg-w-mob-full .em-cg-inner   { max-width: none !important; }
  .em-cg.em-cg-w-mob-custom .em-cg-inner { max-width: var(--em-cg-custom-w-mob, 100%) !important; margin-left: auto; margin-right: auto; }
}

/* === Largeur du bloc (unifié) ===================================== */
.em-cg--bmw { max-width: var(--em-cg-bmw, none) !important; margin-inline: auto !important; }
@media (max-width: 1024px) {
  .em-cg--bmw { max-width: var(--em-cg-bmw-t, var(--em-cg-bmw, none)) !important; }
}
@media (max-width: 600px) {
  .em-cg--bmw { max-width: var(--em-cg-bmw-m, var(--em-cg-bmw-t, var(--em-cg-bmw, none))) !important; }
}