/* DEBUT - Style générale des MEA carte mobile */

 /*Claim*/
.mea-mobile-card {height: 502px; border-radius: 12px; color: white; font-family: 'SFR-Regular';  position: relative; background-repeat: no-repeat; background-size: cover;}
.mea-mobile-card:after {position: absolute;width: 50%;background: #D90D25; border-top-left-radius: 12px;border-bottom-left-radius: 12px; height: 100%;top: 0; left: 0; content: '';}
.mea-mobile-card .mmc--container-mobile-card {display: flex; flex-direction: column; padding: 24px; height: 100%; position: relative; z-index: 1; }
.mea-mobile-card .mmc--claim .mmc--claim_title {font: 24px/normal SFR-Bold;}
.mea-mobile-card .mmc--claim_title sup {font: 16px/normal SFR-Bold;}
.mea-mobile-card .mmc--container-mobile-card .mmc--claim {text-align: center; margin: 0 auto; display: grid; gap: 4px;}
.mea-mobile-card .mmc--claim p {font: 12px/18px SFR-Bold;}
.mea-mobile-card .mmc--claim br.mobile {display: none;}
.mea-mobile-card .mmc--container-mobile-card .mmc--visuel {margin: auto;}
.mea-mobile-card .mmc--container-mobile-card .mmc--visuel img {/* max-height: 140px; */ width: 100%;}
.mea-mobile-card .mmc--container-mobile-card .mmc--desc {display: flex; justify-content: space-between; align-items: end; margin-bottom: 16px;}

/* Spécifités - MEA carte forfait */
.mea-mobile-card.forfait--card {height: 100%;}
.mea-mobile-card.forfait--card .mmc--claim .mmc--claim_title {font: 24px/36px SFR-Bold;}
li.mea-forfait {width: 100%; padding: 0;}
li.mea-forfait > div {height: 100%;}

/*SCREENPRIX*/
.mea-mobile-card .mmc--container-mobile-card .mmc--desc .mmc--screenPrice {display: grid; text-align: left; gap: 8px;}
.mea-mobile-card .mmc--container-mobile-card .mmc--desc .mmc--screenPrice .label-promotion {background: #FFCD00;border-radius: 4px;color: #181818;padding: 0 8px;width: fit-content;font: 12px/18px SFR-Bold;}
.mea-mobile-card .mmc--container-mobile-card .mmc--desc .mmc--screenPrice .description { font: 14px/22px SFR-Bold;}
.mea-mobile-card .prices {display: grid; grid-template-areas: "b a" "b c"; margin: 0;}
.mea-mobile-card .prices, .mea-mobile-card .price {width: fit-content;}
.mea-mobile-card .prices sup, .mea-mobile-card .prices span, .mea-mobile-card .price span {font: 16px/24px SFR-Bold;}
.mea-mobile-card .prices span:first-child, .mea-mobile-card .price span:first-child {font: 56px/44px SFR-Bold; grid-area: b;}
.mea-mobile-card .mmc--container-mobile-card .mmc--desc .mmc--screenPrice  .condition p{font: 12px/18px SFR-Bold; }

/* DAS POPUP*/
.mea-mobile-card .daso {position: relative;}
.mea-mobile-card .daso .dasCta{cursor: pointer;display: flex;align-items: center;gap: 3px;font: 12px/18px SFR-Regular;} 
.mea-mobile-card .daso .dasPopup{opacity: 0; border: 0; cursor: auto; width: 190px;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.02); border-radius: 8px; padding: 16px; background-color: #222222; color: white; font: 12px/18px SFR-Regular; position: absolute; left: -140px; bottom: 24px;  transition: opacity 0.3s; text-align: left;} 
.mea-mobile-card .daso .dasPopup:after{top: 100%;left: calc(100% - 20px);border-top: 4px solid #222222;border-right: 4px solid transparent;border-bottom: 4px solid transparent;border-left: 4px solid transparent;content: "";position: absolute;width: 0;height: 0;z-index: 1;}
.mea-mobile-card .daso .dasCta:hover + .dasPopup{opacity: 1;z-index: 9; }
.mea-mobile-card .daso:hover + .dasPopup{opacity: 1;z-index: 9; }

/* Mentions légales */
.mea-mobile-card .mmc--container-mobile-card .ml{font: 10px/16px SFR-Regular; bottom: 0;position: absolute;left: 24px; height: 24px; display: flex; align-items: center;}

@media all and (max-width: 1100px) {
	 .mea-mobile-card {height: 450px;}
	 .mea-mobile-card .mmc--claim br.mobile {display: block;}
	 .mea-mobile-card .mmc--container-mobile-card .mmc--desc .mmc--screenPrice .description { font: 12px/18px SFR-Bold}
	 .mea-mobile-card .mmc--container-mobile-card {padding: 16px;}
	 .mea-mobile-card .mmc--container-mobile-card .ml {height: 16px;}
	 .mea-mobile-card .mmc--container-mobile-card .mmc--visuel {margin: auto;}
}

@media all and (max-width: 768px) {
    .mea-mobile-card .mmc--container-mobile-card .mmc--visuel img {max-height: 164px;}
}


/* FIN - Style générale des MEA carte mobile */