/* ============================================================
   Extra MatGeco — Articles Gallery — Frontend CSS
   v0.13.11 — Scopé sous .em-ag
   ============================================================ */

.em-ag {
  --em-ag-cols: 3;
  --em-ag-cols-tablet: 2;
  --em-ag-cols-mobile: 1;
  --em-ag-gap: 24px;
  --em-ag-container-max: 1320px;
  --em-ag-container-pad-v: 40px;
  --em-ag-container-pad-h: 32px;
  --em-ag-card-radius: 16px;
  --em-ag-card-aspect: 3/4;
  --em-ag-card-pad: 24px;
  --em-ag-card-content-gap: 8px;
  --em-ag-overlay-color: rgba(0,0,0,0.55);
  --em-ag-label-bg: #11802f;
  --em-ag-label-color: #ffffff;
  --em-ag-label-size: 11px;
  --em-ag-label-weight: 800;
  --em-ag-label-pad-v: 6px;
  --em-ag-label-pad-h: 12px;
  --em-ag-label-radius: 6px;
  --em-ag-label-letter-spacing: 1px;
  --em-ag-title-color: #ffffff;
  --em-ag-title-size: 22px;
  --em-ag-title-weight: 700;
  --em-ag-title-lh: 1.25;
  --em-ag-desc-color: rgba(255,255,255,0.85);
  --em-ag-desc-size: 14px;
  --em-ag-desc-lh: 1.5;
  --em-ag-desc-max-lines: 3;
  --em-ag-arrow-bg: rgba(255,255,255,0.95);
  --em-ag-arrow-color: #1d2327;
  --em-ag-arrow-size: 36px;

  font-family: inherit;
}

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

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

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

/* Hover effects */
.em-ag-hover-none  .em-ag-card:hover { /* nothing */ }
.em-ag-hover-lift  .em-ag-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.22); }
.em-ag-hover-zoom  .em-ag-card:hover .em-ag-card-bg { transform: scale(1.08); }
.em-ag-hover-tilt  .em-ag-card:hover { transform: perspective(800px) rotateX(2deg) rotateY(-1deg) translateZ(8px); }

/* Card background image */
.em-ag-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 600ms ease;
  will-change: transform;
}

/* Overlay */
.em-ag-card-overlay {
  position: absolute;
  inset: 0;
  background: var(--em-ag-overlay-color);
  pointer-events: none;
}
.em-ag-overlay-gradient.em-ag-overlay-bottom .em-ag-card-overlay {
  background: linear-gradient(to top, var(--em-ag-overlay-color) 0%, rgba(0,0,0,0) 70%);
}
.em-ag-overlay-gradient.em-ag-overlay-top .em-ag-card-overlay {
  background: linear-gradient(to bottom, var(--em-ag-overlay-color) 0%, rgba(0,0,0,0) 70%);
}
.em-ag-overlay-gradient.em-ag-overlay-full .em-ag-card-overlay {
  background: var(--em-ag-overlay-color);
}

/* Content (label inline + title + desc) en bas */
.em-ag-card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--em-ag-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--em-ag-card-content-gap);
  z-index: 2;
}

/* Label inline (above-title) — v0.13.12: spécificité accrue */
.em-ag .em-ag-card .em-ag-label-inline,
.em-ag .em-ag-label-inline {
  align-self: flex-start;
  background: var(--em-ag-label-bg) !important;
  color: var(--em-ag-label-color) !important;
  font-size: var(--em-ag-label-size) !important;
  font-weight: var(--em-ag-label-weight) !important;
  padding: var(--em-ag-label-pad-v) var(--em-ag-label-pad-h) !important;
  border-radius: var(--em-ag-label-radius) !important;
  letter-spacing: var(--em-ag-label-letter-spacing);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 4px;
}

/* Label coin */
.em-ag-label-corner {
  position: absolute;
  background: var(--em-ag-label-bg);
  color: var(--em-ag-label-color);
  font-size: var(--em-ag-label-size);
  font-weight: var(--em-ag-label-weight);
  padding: var(--em-ag-label-pad-v) var(--em-ag-label-pad-h);
  border-radius: var(--em-ag-label-radius);
  letter-spacing: var(--em-ag-label-letter-spacing);
  text-transform: uppercase;
  line-height: 1;
  z-index: 2;
}
.em-ag-label-top-left    .em-ag-label-corner { top: 16px; left: 16px; }
.em-ag-label-top-right   .em-ag-label-corner { top: 16px; right: 16px; }
.em-ag-label-bottom-left .em-ag-label-corner { bottom: calc(var(--em-ag-card-pad) + 4em); left: var(--em-ag-card-pad); }

/* Title — v0.13.12: spécificité accrue + !important pour battre les thèmes (Kadence etc.) */
.em-ag .em-ag-card .em-ag-card-title,
.em-ag .em-ag-card-title {
  color: var(--em-ag-title-color) !important;
  font-size: var(--em-ag-title-size) !important;
  font-weight: var(--em-ag-title-weight) !important;
  line-height: var(--em-ag-title-lh) !important;
  margin: 0 !important;
  text-transform: none;
  text-align: inherit;
  letter-spacing: normal;
}

/* Description with line-clamp — v0.13.12: spécificité accrue */
.em-ag .em-ag-card .em-ag-card-desc,
.em-ag .em-ag-card-desc {
  color: var(--em-ag-desc-color) !important;
  font-size: var(--em-ag-desc-size) !important;
  line-height: var(--em-ag-desc-lh) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: var(--em-ag-desc-max-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Arrow flottante (top-right) */
.em-ag-card-arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  width: var(--em-ag-arrow-size);
  height: var(--em-ag-arrow-size);
  background: var(--em-ag-arrow-bg);
  color: var(--em-ag-arrow-color);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  z-index: 3;
  transition: transform 250ms ease, background 250ms ease;
}
.em-ag-card:hover .em-ag-card-arrow {
  background: #ffffff;
  transform: translateX(4px);
}

/* === Responsive grid ====================================================== */
@media (max-width: 1023px) {
  .em-ag-inner { grid-template-columns: repeat(var(--em-ag-cols-tablet), 1fr); }
  .em-ag-inner { gap: var(--em-ag-gap-tablet, var(--em-ag-gap)); }
}
@media (max-width: 767px) {
  .em-ag-inner { grid-template-columns: repeat(var(--em-ag-cols-mobile), 1fr); }
  .em-ag-inner { gap: var(--em-ag-gap-mobile, var(--em-ag-gap)); }
}

/* Title responsive */
@media (max-width: 1023px) {
  .em-ag-card-title { font-size: var(--em-ag-title-size-tablet, var(--em-ag-title-size)); }
}
@media (max-width: 767px) {
  .em-ag-card-title { font-size: var(--em-ag-title-size-mobile, var(--em-ag-title-size)); }
}

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

@media (max-width: 1023px) {
  .em-ag.em-ag-w-tab-100 .em-ag-inner   { max-width: 100% !important; }
  .em-ag.em-ag-w-tab-90  .em-ag-inner   { max-width: 90%  !important; margin-left: auto; margin-right: auto; }
  .em-ag.em-ag-w-tab-80  .em-ag-inner   { max-width: 80%  !important; margin-left: auto; margin-right: auto; }
  .em-ag.em-ag-w-tab-75  .em-ag-inner   { max-width: 75%  !important; margin-left: auto; margin-right: auto; }
  .em-ag.em-ag-w-tab-66  .em-ag-inner   { max-width: 66.6667% !important; margin-left: auto; margin-right: auto; }
  .em-ag.em-ag-w-tab-50  .em-ag-inner   { max-width: 50%  !important; margin-left: auto; margin-right: auto; }
  .em-ag.em-ag-w-tab-full              { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none !important; }
  .em-ag.em-ag-w-tab-full .em-ag-inner { max-width: none !important; }
  .em-ag.em-ag-w-tab-custom .em-ag-inner { max-width: var(--em-ag-custom-w-tab, 100%) !important; margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
  .em-ag.em-ag-w-mob-100 .em-ag-inner   { max-width: 100% !important; }
  .em-ag.em-ag-w-mob-90  .em-ag-inner   { max-width: 90%  !important; margin-left: auto; margin-right: auto; }
  .em-ag.em-ag-w-mob-80  .em-ag-inner   { max-width: 80%  !important; margin-left: auto; margin-right: auto; }
  .em-ag.em-ag-w-mob-75  .em-ag-inner   { max-width: 75%  !important; margin-left: auto; margin-right: auto; }
  .em-ag.em-ag-w-mob-66  .em-ag-inner   { max-width: 66.6667% !important; margin-left: auto; margin-right: auto; }
  .em-ag.em-ag-w-mob-50  .em-ag-inner   { max-width: 50%  !important; margin-left: auto; margin-right: auto; }
  .em-ag.em-ag-w-mob-full              { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none !important; }
  .em-ag.em-ag-w-mob-full .em-ag-inner { max-width: none !important; }
  .em-ag.em-ag-w-mob-custom .em-ag-inner { max-width: var(--em-ag-custom-w-mob, 100%) !important; margin-left: auto; margin-right: auto; }
}

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