/** MDSM Cartes CMS v1.1 — carte grille ou bannière, image facultative. */
.mdsm-cmscard-item {
  box-sizing: border-box;
  min-width: 0;
  margin-bottom: 24px;
}
.mdsm-cmscard-item--grid { align-self: stretch; }
.mdsm-cmscard-item--banner { display: block; width: 100%; clear: both; margin: 28px 0 32px; }
.mdsm-cmscard {
  --mdsm-accent: #00A8E1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  min-height: 355px;
  height: 100%;
  border-radius: 6px;
  background: #22344d;
  color: #fff;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 10px 23px rgba(12, 20, 27, .13);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mdsm-cmscard-item--banner .mdsm-cmscard { min-height: 230px; height: 255px; }
.mdsm-cmscard:hover, .mdsm-cmscard:focus, .mdsm-cmscard:focus-visible {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(12, 20, 27, .23);
}
.mdsm-cmscard:focus-visible { outline: 3px solid var(--mdsm-accent); outline-offset: 3px; }
.mdsm-cmscard__image, .mdsm-cmscard__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.mdsm-cmscard__image { z-index: -2; object-fit: cover; transition: transform .35s ease; }
.mdsm-cmscard:hover .mdsm-cmscard__image { transform: scale(1.035); }
.mdsm-cmscard__shade { z-index: -1; background: linear-gradient(180deg, rgba(10, 19, 32, .27), rgba(10, 19, 32, .14) 32%, rgba(10, 19, 32, .94) 100%); }
.mdsm-cmscard-item--banner .mdsm-cmscard__shade { background: linear-gradient(90deg, rgba(9, 17, 27, .92) 0%, rgba(9, 17, 27, .61) 54%, rgba(9, 17, 27, .12) 100%); }
.mdsm-cmscard--graphic {
  background: radial-gradient(circle at 83% 12%, rgba(77, 140, 179, .32), transparent 37%),
    repeating-linear-gradient(138deg, rgba(255,255,255,.055) 0 2px, transparent 2px 22px),
    linear-gradient(145deg, #294362, #101d31);
}
.mdsm-cmscard--graphic .mdsm-cmscard__shade { background: linear-gradient(180deg, transparent 18%, rgba(7, 17, 30, .85)); }
.mdsm-cmscard-item--banner .mdsm-cmscard--graphic .mdsm-cmscard__shade { background: linear-gradient(90deg, rgba(7, 17, 30, .60), transparent); }
.mdsm-cmscard__badge {
  align-self: flex-start;
  max-width: calc(100% - 40px);
  margin: 17px;
  padding: 8px 11px;
  background: var(--mdsm-accent);
  color: #fff;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.25;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.mdsm-cmscard__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
  padding: 23px 20px;
}
.mdsm-cmscard__title { color: #fff; font-size: clamp(18px, 1.7vw, 24px); font-weight: 800; line-height: 1.18; overflow-wrap: anywhere; }
.mdsm-cmscard__subtitle { color: rgba(255,255,255,.94); font-size: 13px; line-height: 1.45; }
.mdsm-cmscard__button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 37px;
  margin-top: 6px;
  padding: 9px 12px;
  background: #fff;
  color: #223247;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}
.mdsm-cmscard__button::after { content: ' →'; white-space: pre; font-size: 17px; }
.mdsm-cmscard:hover .mdsm-cmscard__button { background: #f3dac9; }
.mdsm-cmscard-item--banner .mdsm-cmscard__content { max-width: 65%; padding: 26px; }
.mdsm-cmscard-item--banner .mdsm-cmscard__title { font-size: clamp(21px, 2.2vw, 30px); }
@media(max-width: 767px) {
  .mdsm-cmscard { min-height: 320px; }
  .mdsm-cmscard-item--banner .mdsm-cmscard { height: auto; min-height: 245px; }
  .mdsm-cmscard__content, .mdsm-cmscard-item--banner .mdsm-cmscard__content { max-width: 100%; padding: 20px 17px; }
  .mdsm-cmscard-item--banner .mdsm-cmscard__shade { background: linear-gradient(180deg,rgba(10,19,32,.12),rgba(10,19,32,.91)); }
}
@media (prefers-reduced-motion: reduce) { .mdsm-cmscard, .mdsm-cmscard__image { transition: none; } }

/* V1.1.3 : dans le mode grille, laisser au thème la taille des colonnes réelles. */
.mdsm-cmscard-item--grid { margin-bottom: 0; }
.mdsm-cmscard-item--grid .mdsm-cmscard {
  box-sizing: border-box; width: 100%; min-height: 0; max-width: 100%;
  text-decoration: none; float: none; margin: 0;
}
.mdsm-cmscard-item--grid .mdsm-cmscard__badge { margin: 11px; padding: 6px 8px; font-size: 9px; }
.mdsm-cmscard-item--grid .mdsm-cmscard__content { padding: 15px 12px; gap: 6px; }
.mdsm-cmscard-item--grid .mdsm-cmscard__title { font-size: clamp(14px,1.35vw,20px); }
.mdsm-cmscard-item--grid .mdsm-cmscard__subtitle { font-size: 11px; }
.mdsm-cmscard-item--grid .mdsm-cmscard__button { font-size: 11px; padding: 7px 9px; min-height: 28px; }

/* V1.1.5 : finitions limitées à la carte. Ne JAMAIS changer le display
   du parent ou la largeur des produits existants. */
.mdsm-cmscard-item--grid .mdsm-cmscard__title {
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.18;
}
.mdsm-cmscard-item--grid .mdsm-cmscard__content {
  padding: 14px 12px;
  gap: 7px;
}
.mdsm-cmscard-item--grid .mdsm-cmscard__image { object-position: center 58%; }
.mdsm-cmscard-item--grid .mdsm-cmscard__shade {
  background: linear-gradient(180deg,rgba(9,20,32,.08) 3%,rgba(9,20,32,.13) 37%,rgba(9,20,32,.90) 100%);
}
.mdsm-cmscard:hover .mdsm-cmscard__button { background: #e3f7fd; }

/* 1.1.6 : dimensionnement local, sans aucune règle sur les vrais produits. */
.mdsm-cmscard-item--grid .mdsm-cmscard { min-height: 0; }
.mdsm-cmscard-item--grid .mdsm-cmscard__content { flex-shrink: 0; }
.mdsm-cmscard-item--grid .mdsm-cmscard__image { object-fit: cover; }


/* 1.1.7 : règles strictement limitées au module.
   Le thème conserve la largeur, les colonnes et les marges des produits. */
.mdsm-cmscard-item--grid .mdsm-cmscard {
  height: auto;
}
.mdsm-cmscard-item--banner .mdsm-cmscard {
  height: auto;
  min-height: 255px;
}
.mdsm-cmscard__badge,
.mdsm-cmscard__content,
.mdsm-cmscard__title,
.mdsm-cmscard__subtitle,
.mdsm-cmscard__button {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.mdsm-cmscard__badge { flex-shrink: 0; max-width: calc(100% - 34px); }
.mdsm-cmscard-item--grid .mdsm-cmscard__badge { max-width: calc(100% - 22px); }
.mdsm-cmscard__content { flex-shrink: 0; width: 100%; }
.mdsm-cmscard-item--grid .mdsm-cmscard__title {
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.25;
}
.mdsm-cmscard-item--grid .mdsm-cmscard__subtitle { font-size: 13px; line-height: 1.4; }
.mdsm-cmscard-item--grid .mdsm-cmscard__button {
  min-height: 40px;
  font-size: 12px;
  padding: 9px 10px;
}
.mdsm-cmscard__button::after { flex-shrink: 0; }
@media (max-width: 991px) {
  .mdsm-cmscard-item--banner .mdsm-cmscard__content { max-width: 100%; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .mdsm-cmscard:hover, .mdsm-cmscard:focus, .mdsm-cmscard:focus-visible,
  .mdsm-cmscard:hover .mdsm-cmscard__image { transform: none; }
}

/* 1.1.8 — OTPTM020 : sous 480px, le thème réserve width:100% à
   .js-product-miniature. La carte CMS n'a volontairement pas cette classe.
   Reproduire uniquement cette largeur, uniquement sur la carte du module.
   Ne pas modifier les vrais produits, leurs parents ou les autres breakpoints. */
@media (max-width: 480px) {
  #js-product-list .products .mdsm-cmscard-item--grid.product-miniature.product-grid,
  #js-product-list .products .mdsm-cmscard-item--grid .product-miniature.product-grid {
    width: 100%;
  }
}