/***********************************
SUMMARY :
    1- Utilities class and states
    2- Layouts
    3- Header
    4- Footer
    5- Titles and texts
    6- Buttons
    7- Links
    8- Form elements
    9- ShopInfos
    10- Cart
    11- Tooltip
    12- Spinner
    13- Dropdown / collapse
    14- Tables
    15- List

***********************************/

/* 1- Utilities class and states */

/* Focus management */
:focus:not(:focus-visible) {
    outline: 0 !important;
}
:-moz-focusring,
:focus-visible{
    outline: 2px solid var(--outline-dark-color) !important;
    outline-offset: -2px !important;
}

/* Hiding element still accessible to screen readers */
.is-srOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 768px) {
    .is-srOnly-Mob  {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    } 
}

/* Hiding element according to device */
@media (min-width: 769px) {
    .is-noDesk{
        display: none !important;
    } 
}
@media (max-width: 768px) {
    .is-noMob{
        display: none !important;
    } 
}


/* Visibility according to JS */
.js-hidden {
	display: none !important;
	visibility: hidden;
}
.js-visible {
	display: inline-block;
	visibility: visible;
}

/* Text utilities */
.is-bold{
    font-weight: 700;
}
.is-regular{
    font-weight: 400;
}
.is-center{
    text-align: center;
}
.is-grey{
    color: var(--grey-4-color);
}

/* Position utilities */
.is-relative{
    position: relative;
}

/* margin utilities */
.is-margTop4{
    margin-top: var(--spacer-sxs);
}
.is-margTop8{
    margin-top: var(--spacer-xs);
}
.is-margTop16{
    margin-top: var(--spacer-md);
}
.is-margTop24{
    margin-top: var(--spacer-lg);
}
.is-margTop32{
    margin-top: var(--spacer-xl);
}

/**********************************/

/* 2- Layouts */

body {
    background-color: var(--grey-1-color);
    font-family: var(--font);
    font-size: var(--text-sm);
    color: var(--grey-5-color);
    font-weight: 400;
    line-height: var(--line-height);
}

.main {
    margin-top: 4rem; /* margin for fixed header*/
    min-height: calc(100dvh - 10.6rem - 4rem); /* device height - footer - header)*/
}
@media (min-width: 769px) {
    .main {
        margin-top: 5.13rem;
        min-height: calc(100dvh - 4.2rem - 5.13rem);
    } 
}


.main__content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2.5rem;
}
@media (min-width: 769px) {
    .main__content {
        padding: var(--spacer-lg) 2rem;
    } 
}

.main__content.scanPage,
.main__content.deliveryPage,
.main__content.validatePage{
    display: flex;
    flex-direction: column;
    gap: var(--spacer-xxl);
}
@media (min-width: 769px) {
    .main__content.scanPage,
    .main__content.deliveryPage,
    .main__content.validatePage{
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--spacer-xl);
    }
}



.main__content.recapPage{
    padding: 0 1rem 2.5rem;
}
@media (min-width: 769px) {
    .main__content.recapPage{
        padding: 1.25rem 2rem 2.5rem;
    }
}

.mainCol{
    flex: 1 1 auto;
}
@media (min-width: 769px) {
    .mainCol{
        flex: 0 1 auto;
        width: calc(100% - (var(--spacer-xl) + 320px));
    } 
}

.mainCol__wrapper{
    background-color: var(--grey-0-color);
    margin-top: var(--spacer-lg);
    padding: 1rem;
}
@media (min-width: 769px) {
    .mainCol__wrapper{
        padding: 2rem;
    }
}

.cartCol{
    flex: 1 0 auto;
    width: calc(100% + 2rem);
    margin-left: -1rem;
}
@media (max-width: 768px) {
    .cartCol{
        background-color: var(--grey-0-color);
        padding: 1rem;
    } 
}
@media (min-width: 769px) {
    .cartCol{
        padding-top: 0.75rem;
        width: 320px;
    } 
}

.cartCol__wrapper{
    background-color: var(--grey-0-color);
    margin-top: var(--spacer-lg);
}
@media (min-width: 769px) {
    .cartCol__wrapper{
        padding: 1rem;
    } 
}

.cartCol__mainBtn{
    width: 100%;
    margin-top: var(--spacer-lg);
}

.common__promo__cart_resume__text--price {
    align-self: flex-start;
    margin: 0;
    font-size: var(--text-xs);
    text-decoration: line-through;
    color: var(--grey-3-color);
    margin-left: auto;
}

.cartValue__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cartValue__price {
    align-self: flex-end;
    margin: 0;
}

.wideCol{
    width: calc(100% + 2rem);
    margin-left: -1rem;
    padding: 1.5rem;
    background-color: var(--grey-0-color);
}
@media (min-width: 769px) {
    .wideCol{
        width: 100%;
        margin-left: 0;
    } 
}

.wideCol__wrapper{
    max-width: 465px;
    margin: 0 auto;
}
@media (min-width: 481px) { 
    .wideCol__wrapper{
        text-align: center;
    } 
}

.dbleColWrap{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacer-xs);
}
@media (min-width: 769px) {
    .dbleColWrap{
        flex-direction: row;
    } 
}

.halfCol{
    background-color: var(--grey-0-color);
    padding: 1rem;
    width: 100%;
}
@media (min-width: 769px) {
    .halfCol{
        width: 100%;
        width: calc((100% - 0.5rem) / 2);
    } 
}

/**********************************/

/* 3- Header */

.header{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 900;
    padding: var(--spacer-md) 0 var(--spacer-md) var(--spacer-md);
    background-color: var(--grey-0-color);
    box-shadow: var(--box-shadow-2);
}
@media (min-width: 769px) {
    .header{
        padding: var(--spacer-md) 8.5rem var(--spacer-md) var(--spacer-lg);
    } 
}

.header__nav{
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    min-height:  2rem;
}
@media (min-width: 769px) {
    .header__nav{
        min-height:  3.125rem;
    } 
}

.header__logoLink{
    width: 64px;
    display: inline-block;
}
@media (min-width: 769px) {
    .header__logoLink{
        width: 112px;
    } 
}

.header__logoLink img{
    vertical-align: top;
}

.stepper{
    display: flex;
    width: calc(100% - (1rem + 64px));
    justify-content: flex-end;
}
@media (min-width: 769px) {
    .stepper{
        width: calc(100% - (1rem + 112px));
        justify-content: center;
    } 
}

.stepper__item{
    flex-shrink: 1;
}
.stepper__content{
    display: flex;
    flex-direction: column;
    gap: var(--spacer-xxs);
    justify-content: center;
    text-decoration: none;
    text-align: center;
}

.stepper__content--current .stepper__disc,
.stepper__content--link .stepper__disc,
.stepper__content--current .stepper__lineWrap:before,
.stepper__content--link .stepper__lineWrap:before,
.stepper__content--current .stepper__lineWrap:after,
.stepper__content--link .stepper__lineWrap:after{
    background-color: var(--grey-5-color);
}
.stepper__content--current .stepper__text,
.stepper__content--link .stepper__text{
    color: var(--grey-5-color);
}
.stepper__content--link:hover .stepper__disc{
    background-color: var(--grey-4-color);
}

/* invisibles lines in first and last position */
.stepper__content--first .stepper__lineWrap:before,
.stepper__content--last .stepper__lineWrap:after{
    background-color: transparent; 
}

.stepper__lineWrap{
    position: relative;
    padding: 0 20px;
}
@media (min-width: 769px) {
    .stepper__lineWrap{
        padding: 0 40px;
    } 
}

.stepper__lineWrap:before,
.stepper__lineWrap:after{
    position: absolute;
    content:"";
    width: 20px;
    height: 1px;
    background-color: var(--grey-2-color);
    top: 50%;
}
.stepper__lineWrap:before{
    left: 0;
}
.stepper__lineWrap:after{
    right: 0;
}
@media (min-width: 769px) {
    .stepper__lineWrap:before,
    .stepper__lineWrap:after{
        width: 40px;
    } 
}

.stepper__disc{
    background-color: var(--grey-2-color);
    border-radius: 50%;
    padding: var(--spacer-xs);
    margin: 0 0.5rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--grey-0-color);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    aspect-ratio: 1 / 1;
}
@media (min-width: 769px) {
    .stepper__disc{
        margin: 0 1rem;
    } 
}

.stepper__text{
    font-size: var(--text-xxs);
    color: var(--grey-3-color);
}

.banner{
    text-align: center;
    background-color: var(--secondary-2-color);
}
.banner img{
    max-height: 128px;
}

/**********************************/

/* 4- Footer */

.footer{
    display: flex;
    justify-content: center;
    background-color: var(--grey-0-color);
    padding: 1rem;
}
@media (max-width: 768px) {
    .footer{
        padding: 1.25rem 1rem;
    } 
}

.footer__list{
    display: flex;
    justify-content: center;
}
@media (max-width: 768px) {
    .footer__list{
        flex-direction: column;
        align-items: center;
        text-align: center;
    } 
}

.footer__item{
    flex-shrink: 1;
    padding: 0.5rem 1rem;
    position: relative;
}
@media (min-width: 769px) {
    .footer__item:not(:first-child):before{
        content:"●";
        font-size: 8px;
        line-height: 6px;
        color: var(--grey-3-color);
        position: absolute;
        top: calc(50% - 3px);
        left: -3px;
        width: auto;
        height: auto
    }
}
@media (max-width: 768px) {
    .footer__item{
        padding: 0.75rem 1rem;
    } 
}

.footer__link{
    padding: 0.5rem;
}

/**********************************/

/* 5- Titles and texts */

.title--type1{
    font-weight: bold;
    font-size: var(--text-xl); /*32px*/
}
@media (max-width: 768px) {
    .title--type1{ 
        font-size: var(--text-lg); /*21px*/
    }
}

.title--type2{
    font-weight: bold;
    font-size: var(--text-lg); /*21px*/
}
.title--type2--color{
    font-weight: bold;
    font-size: var(--text-lg); /*21px*/
    color: var(--price-color);
}
.title--type3{
    font-weight: bold;
    font-size: var(--text-md); /*18px*/
}

.titleWrapper{
    display: flex;
    gap: var(--spacer-md);
    align-items: center;
}
.titleWrapper .link--previous{
    flex: 0 0 auto;
}
a.titleWrapper{
    flex: 0 0 auto;
}

.text--sm{
    font-size: var(--text-sm); /*15px*/
}
.text--xs{
    font-size: var(--text-xs); /*13px*/
}
.text--xxs{
    font-size: var(--text-xxs); /*11px*/
}

.text--price{
    font-weight: bold;
    font-size: var(--text-lg);
    color: var(--price-color);
}

/**********************************/

/* 6- Buttons */

[class*="buttonSolid"]{
    border-radius: var(--border-radius);
    font-size: var(--text-xs);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    cursor: pointer;
}

.buttonSolid--type1{
    background-color: var(--primary-3-color);
    color: var(--grey-5-color);
}
.buttonSolid--type1 svg path {
    fill: var(--grey-5-color);
}
.buttonSolid--type1:hover,
.buttonSolid--type1:focus,
.buttonSolid--type1:focus-visible{
    background-color: var(--primary-2-color);
}

.buttonSolid--type2{
    background-color: var(--grey-5-color);
    color: var(--grey-0-color);
}
.buttonSolid--type2 svg path {
    fill: var(--grey-0-color);
}

.buttonSolid--type2:hover,
.buttonSolid--type2:focus,
.buttonSolid--type2:focus-visible{
    background-color: var(--grey-4-color);
}

.buttonSolid--type3{
    background-color: var(--grey-0-color);
    color: var(--grey-5-color);
		border: 1px solid var(--grey-5-color);
}
.buttonSolid--type3 svg path {
    fill: var(--grey-5-color);
}

.buttonSolid--type3:hover,
.buttonSolid--type3:focus,
.buttonSolid--type3:focus-visible{
    background-color: var(--grey-1-color);
}


.buttonSolid--type1:disabled,
.buttonSolid--type2:disabled{
    background-color: var(--grey-2-color);
    color: var(--grey-4-color);
    cursor: default;
    opacity: .85;
    pointer-events: none;
}

.buttonSolid--iconOnly{
    font-size: 0;
    line-height: 100%;
    padding: 0.625rem;
}


.buttonGhost{
    color: var(--grey-5-color); /* overwrite safari color*/
    background-color: var(--grey-0-color);
    border: 1px solid var(--grey-5-color);
    border-radius: var(--border-radius);
    font-size: var(--text-xs);
    padding: 0.75rem 1.25rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
}
.buttonGhost:hover,
.buttonGhost:focus,
.buttonGhost:focus-visible{
    border-color: var(--grey-4-color);
    background-color: var(--grey-4-color);
    color: var(--grey-0-color);
}

.buttonGhost:disabled{
    border-color: var(--grey-4-color);
    color: var(--grey-4-color);
    cursor: default;
    opacity: .85;
    pointer-events: none;
}

a[class*="buttonSolid"],
a[class*="buttonGhost"]{
    text-decoration: none;
}
a[class*="buttonSolid"]:-webkit-any-link:focus-visible,
a[class*="buttonGhost"]:-webkit-any-link:focus-visible{
    outline-offset: -2px;
}

[class*="buttonFakeLink"]{
    font-size: inherit;
    color: inherit;
    text-decoration: underline;
    padding: 0;
    cursor: pointer;
}
[class*="buttonFakeLink"]:disabled{
    color: var(--grey-3-color);
    text-decoration: none;
    cursor: default;
    opacity: .85;
    pointer-events: none;
}

[class*="buttonFakeLink"]:focus-visible{
    outline-offset: 2px !important;
}

.buttonFakeLink--xs{
    font-size: var(--text-xs);
}
.buttonFakeLink--xxs-soft{
    font-size: var(--text-xxs);
    color: var(--grey-4-color);
}

/**********************************/

/* 7- Links */

[class*="link--"]{
    cursor: pointer;
}
[class*="link--"]:focus-visible{
    outline-offset: 2px !important;
}

.link--type1{ /* ex: footer */
    color: var(--grey-3-color);
    font-size: var(--text-xs);
}
.link--type2{
    color: var(--grey-5-color);
    font-size: var(--text-xs);
}
.link--type3{
    color: inherit;
    font-size: inherit;
}
.link--previous{
    background-image: url("/imgs/v2/icons/back.svg");
    width: 32px;
    aspect-ratio: 1;
    color: var(--grey-3-color);
}

/**********************************/

/* 8- Form elements */

.search{
    position: relative;
}

.search__input{
    background: var(--grey-1-color);
    border: 0;
    border-radius: var(--border-radius);
    color: var(--grey-5-color);
    font-size: var(--text-sm);
    font-style: normal;
    width: 100%;
    height: 2.5rem;
    line-height: 100%;
    padding: 0.625rem 5rem 0.625rem 1.25rem;
}
.search__input:placeholder-shown {
    color: var(--grey-3-color);
    font-style: italic;
}
.search__input:hover{
    box-shadow: 0px 0px 0px 2px var(--grey-2-color);
}
.search__input:focus-visible{
    outline: none !important;
    box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #f5b027, 0px 0px 0px 8px #f5b02733;
}

.search__btn{
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 40px;
}

/**********************************/

/* 9- ShopInfos */

.shopInfos__name{
    font-weight: bold;
    margin-bottom: var(--spacer-xs);
}
.shopInfos__adress{
    color: var(--grey-4-color);
}
.shopInfos__btnHours{
    display: inline-block;
    margin-top: var(--spacer-xs);
}
.shopInfos__openingHours{
    padding-top: 0.25rem;
    font-size: var(--text-xs);
    line-height: 1.4;
    max-width: 140px;
    text-transform: capitalize;
}
.shopInfos__openingHours:has(> table) {
    width: 100%;
    max-width: 100%;
}

/**********************************/

/* 10- Cart */

.cartHeader{
    display: flex;
    gap: var(--spacer-xxs);
    font-size: var(--text-xs);
    padding-bottom: 1rem;
}

.cartHeader__info{
    width: 1rem;
}

.cartHeader__info img{
    vertical-align: bottom;
}

.cartList{
    max-height: 290px;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox - masque la scrollbar */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}
.cartList::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera - masque la scrollbar */
}

.cartList__item{
    padding: 1rem 0.5rem;
    border-top: var(--border-default);
}
.cartList:first-child > .cartList__item:first-child{ /* when list is first element */
    padding-top: 0;
    border-top: none;
}

.cartList__bookDetails{
    display: flex;
    align-items: center;
    gap: var(--spacer-xs);
}

.cartBookCover{
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    text-align: center;
}
.cartBookCover img{
    vertical-align: middle;
    max-height: 100%;
}

.cartBookTitle{
    flex: 1 1 auto;
    font-size: var(--text-xs);
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: calc(2 * var(--line-height) * var(--text-xs));
    text-overflow: ellipsis;
    overflow: hidden;
}

.cartBookPrice{
    flex: 0 0 auto;
    font-weight: bold;
    text-align: right;
    min-width: 60px;
}

.cartList__bookAction{
    margin-top: var(--spacer-xxs);
    display: flex;
    gap: var(--spacer-xs);
    justify-content: flex-end;
}

.cartMap .shopInfos__name{
    font-size: var(--text-xs);
    margin: var(--spacer-sm) 0 var(--spacer-xxs);
}

.cartMap .shopInfos__adress{
    font-size: var(--text-xs);
}

.cartMap > :last-child{
    margin-bottom: var(--spacer-md);
}

.cartMap__title{
    border-top: var(--border-default);
    font-weight: 700;
    font-size: var(--text-sm);
    position: relative;
    padding: 1rem 0 0 1.5rem;
    line-height: 1;
}
.cartMap__title:before{
    content:"";
    position: absolute;
    bottom: 1px;
    left: 0;
    z-index: 1;
    width: 1rem;
    aspect-ratio: 1;
    background: transparent var(--bg-img) center / 1rem auto no-repeat;
}
.cartMap__title.cartMap__title--mag{
    --bg-img: url("/imgs/v2/icons/store-sm-dark.svg");
}
.cartMap__title.cartMap__title--relay{
    --bg-img: url("/imgs/v2/icons/pickup-delivery-sm-dark.svg");
}
.cartMap__title.cartMap__title--relay:before{
    width: 1.2rem;
    background-size: 1.2rem;
}

.cartMap__sectionLabel{
    font-size: var(--text-xs);
    font-weight: 700;
    margin-top: var(--spacer-xs);
}

.cartMap__sectionName{
    font-size: var(--text-xs);
}

.cartValue{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacer-md);
    border-top: var(--border-default);
    padding-top: 1rem;
}

::-moz-progress-bar {
    background-color: yellow;
}

progress,
progress[value]::-webkit-progress-bar {
    width: 100%;
    height: 4px;
    border-radius: var(--border-radius);
    background-color: var(--grey-1-color);
    transition: width 300ms ease;
}
::-webkit-progress-value { /* old safari fix */
    width: 0;
    border-radius: var(--border-radius);
    background-color: var(--primary-3-color);
    transition: width 400ms ease;
}
progress[value]::-webkit-progress-value {
    width: 0;
    border-radius: var(--border-radius);
    background-color: var(--primary-3-color);
    transition: width 400ms ease;
}
progress[value]::-moz-progress-bar {
    background-color: var(--primary-3-color);
}


.cartFillRate{
    margin-top: var(--spacer-md);
}

.cartNumberBooks{
    background:var(--grey-0-color);
    border-top: var(--border-default);
    padding-top: 1rem;
    color: var(--warning-color);
    font-size: var(--text-xs);
    font-weight: bold;
    text-align: center;
}

/**********************************/

/* 11- Tooltip */

.tooltip{
    position: relative;
}
.tooltip:hover .tooltip__content{
    display: block;
}

.tooltip__content{
    display: none;
    background: var(--grey-5-color);
    border-radius: var(--border-radius);
    color: var(--grey-0-color);
    min-height: 100px;
    position: absolute;
    top: 40px;
    left: -30px;
    white-space: normal;
    width: 250px;
    z-index: 100;
    padding: 1rem;
}
.tooltip__content::before {
    content: "";
    position: absolute;
    left: 30px;
    top: -8px;
    height: 16px;
    width: 16px;
    line-height: 0;
    transform: rotate(135deg);
    background-color: var(--grey-5-color);
}

/**********************************/

/* 12- Spinner */

.loader{
    width: 100%;
    text-align: center;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

/**********************************/

/* 13- Dropdown / collapse */

.collapseTriggerArrow{
    --bg-img: url("/imgs/v2/icons/arrow.svg");

    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.collapseTriggerArrow:after{
    content:"";
    width: 16px;
    aspect-ratio: 1;
    background: transparent var(--bg-img) center / 1.5rem auto no-repeat;
    transition: transform 100ms linear;
}

/* Select .collapseTriggerArrow who is before .collapse.show (next sibbling) */
.collapseTriggerArrow:has(+ .show ):after{
    transform: rotate(-180deg);
}

.collapse{
    transition: var(--transition-all);
}
.collapse:not(.show) {
    display: none;
}

.collapsing{
    height: 0;
    overflow: hidden;
    transition: var(--transition-all);
}
.collapsing.collapse-horizontal {
    width: 0;
    height: auto;
}

/**********************************/

/* 14- Tables */

table.PR-Hours{
    table-layout: auto;
    width: 100%;
}
table.PR-Hours th{
    padding-right: 0.5rem;
    text-align: left;
    font-weight: 400;
    vertical-align: baseline;
}
table.PR-Hours td{
    text-align: center;
    padding-left: 0.5rem;
    width: 90px;
    font-weight: 700;
    vertical-align: baseline;
}

/**********************************/

/* 15- List */

[class*="listGeneric"]{
    margin-top: var(--spacer-sm);
    padding-left: 2rem;
    list-style-type: disc;
}
[class*="listGeneric"] > li:not(:first-child){
    padding-top: 2px;
}

.listGeneric--disc{
    list-style-type: disc;
}
.listGeneric--cross{
    list-style-type: "𐄂";
}

/**********************************/

/* 16- Promo */
.common__section__promo{
	margin-top:8px;
}
@media (min-width: 769px) {
	.common__section__promo__landing {
		padding: 0 2rem;
	}
}
.common__promo{
	display: flex;
	gap: 1rem;
	flex-wrap: nowrap;
	justify-content: left;
	background-color: var(--grey-0-color);
	padding:var(--spacer-md);
}
@media (max-width: 768px) {
	.common__promo{
		align-items: center;
	}
}
.common__promo__bloc{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.common__promo__flag__percent{
	background: var(--secondary-2-color);
	border-radius: 100px;
	padding: 5px 10px;
	text-align: center;
	color: var(--grey-0-color);
	font-weight: 700;
	font-size: var(--text-xs);
}
.common__promo__price {
	display: flex;
	gap: 8px;
	align-items: center;
}
.common__promo__text--price{
	font-weight: 700;
	font-size: var(--text-md);
	text-decoration: line-through;
	color: var(--grey-3-color);
}
.common__promo__cartList{
	padding-top:6px;
}
.common__promo__is__alive{
	margin-top: -14px;
}
.common__promo__cart__prices{
	display: flex;
	flex-direction: column;
	align-items: end;
}
.common__promo__cartBookPrice{
	margin-top:-3px;
}
.common__promo__cart__text--price{
	font-weight: 700;
	font-size: var(--text-xs);
	text-decoration: line-through;
	color: var(--grey-3-color);
}
.common__promo__total--bonus{
	display: flex;
	align-items: end;
	justify-content: space-between;
	font-weight: 700;
	border-top: var(--border-default);
	padding: 0.75rem 0.5rem;
	margin-top: 0.5rem;
}

/**********************************/

/* 17- FNAC Header pb-headerColor */

.pb-headerColor {
	background-color: var(--secondary-2-color);
}

.pb-limits {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
}

.pb-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background-repeat: no-repeat;
	background-position: bottom -2.1em right 5%;
	background-size: calc((254 / 1200) * 100%);
	color: white;
	padding:1em 0 1em calc((60 / 1200) * 100%);
	position: relative;
}

.pb-header-inner {
	width: calc((880 / 1140) * 100%);
	margin: 0;
}

.pb-header-flexbox {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.pb-header-logoTitle {
	font-size: 1em;
	display: block;
	overflow: hidden;
	width: 245px;
	height: 250px;
	position: relative;
	margin: 0 auto;
}

.pb-header-logoTitle .pb-header-title-label {
	display: block;
	font-size: 14px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.pb-header-logoTitle:after {
	display: block;
	content: '';
	width: 100%;
	height: 0;
	padding-top: calc((250 / 245) * 100%);
	position: relative;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100%;
    background-color:var(--secondary-2-color);
	background-image: url('/imgs/fnac-reprise-logo.png');
}

.pb-header-blkText {
	padding: 0;

    h2{
        text-transform: uppercase;
        font-weight: lighter;
}

.pb-header-title {
	font-size: 1em;
	display: block;
	overflow: hidden;
	width: 100%;
	max-width: 607px;
	position: relative;
	margin: 0;
}

.pb-header-title .pb-header-title-label {
	display: block;
	font-size: 0.8em;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.pb-header-title:after {
	display: block;
	content: '';
	width: 100%;
	height: 0;
	padding-top: calc((43 / 607) * 100%);
	position: relative;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 607 43'%3E%3Crect fill='%230C7153' width='100%25' height='100%25' /%3E%3Cpath fill='%23fff' d='M14.8 37.1A14.5 14.5 0 0 1 .12 22.5 14.5 14.5 0 0 1 14.8 7.9a14.5 14.5 0 0 1 14.68 14.6A14.5 14.5 0 0 1 14.8 37.1Zm0-7a7.35 7.35 0 0 0 7.56-7.6c0-4.48-3.28-7.6-7.56-7.6a7.35 7.35 0 0 0-7.56 7.6c0 4.48 3.28 7.6 7.56 7.6ZM48.24 8.5h7.12v28h-5.52l-9.88-14.08V36.5H32.8v-28h5.56l9.88 14.08V8.5Zm35.22 28-4.88-9.04h-2.56v9.04h-7.16v-28h11.2c5.68 0 10.08 4.04 10.08 9.68a9.03 9.03 0 0 1-4.76 7.96l5.76 10.36h-7.68Zm-7.44-21.4v6.28h3.96c1.76.04 3-1.24 3-3.12 0-1.84-1.24-3.16-3-3.16h-3.96Zm35.07 21.4-1.2-4.04h-9.32l-1.2 4.04h-7.76l9.24-28h8.72l9.24 28h-7.72Zm-8.68-10.2h5.64l-2.84-9.52-2.8 9.52Zm30.94 10.8c-8.48 0-14.6-6.36-14.6-14.6 0-8.24 6.12-14.6 14.6-14.6 5.12 0 9.68 2.6 12.12 6.64l-6.2 3.56c-1.08-2-3.32-3.2-5.92-3.2-4.52 0-7.48 3.12-7.48 7.6 0 4.48 2.96 7.6 7.48 7.6 2.6 0 4.84-1.2 5.92-3.24l6.2 3.6a14.03 14.03 0 0 1-12.12 6.64Zm29.73-28.6h7.12v28h-7.12V25.74h-7.88V36.5h-7.16v-28h7.16v10.36h7.88V8.5Zm24.28-2.2h-6.32L176.4.5h7.76l3.2 5.8Zm-5.56 23.48h10.84v6.72h-18v-28h17.8v6.68H181.8v3.88h9.64v6.6h-9.64v4.12ZM215.24 8.5v6.92h-6.92V36.5h-7.16V15.42h-6.92V8.5h21ZM225 29.78h10.84v6.72h-18v-28h17.8v6.68H225v3.88h9.64v6.6H225v4.12Zm22.49-.24-3.36 12.56h-5.36l1.4-12.56h7.32Z'/%3E%3Cpath fill='%23F5B027' d='M279.66 13.7c-2.88 4.84-5.96 15.2-6 22.08-.04 3.44-7.72 1.8-9.36-1.6a39.94 39.94 0 0 1-2.76-7.88c-.48-2.16-.68-3.76-.88-4.8-.64-3.4-.4-6.52-1.04-9.84-.96-5.04 6.88-1.64 7.2 2.68.24 2.8.68 6.92 1.28 10.48 1.12-4.52 3.2-13.64 5.56-17.32 2.2-3.44 8.04 2.84 6 6.2Zm13.68 1.4c-1.96.8-5.6 5.68-6.72 8.96-1.28 3.64-.92 7.12 1.68 6.68 9.04-1.56 10.48-17.88 5.04-15.64Zm9.32 13.12c-.96 3.4-4.52 7.36-8.88 8.48-4.44 1.16-11.4-1.56-13.16-5.44-1.56-3.44-1.48-4.84-1.28-8.48.2-4.24 5.68-13.24 10.68-14.04 4.72-.76 8.4.44 11.16 4.84 2.52 4.04 3.16 8.64 1.48 14.64Zm26.41 6.16c1.72 5-6.08 2.76-7.64-1.52-1.12 2.32-2.64 4.84-5.48 5.32-2 .32-7.64-3.2-9.36-7.92-.96-2.72-1.28-28.28 6.72-20.6 1.24 1.16 2.68 3.32 2.04 4.96-1.08 2.68-2.08 5.8-2.2 12.52 0 .6-.44 4.08.52 4 .52-.04 3.12-3.44 5.32-9.44a67.62 67.62 0 0 0 2.84-11.6c.4-2.68 8.16.28 6.96 4.16-.8 2.64-.88 16.76.28 20.12Zm25.57-12.16c1.76 5.76-4.95 15.76-12.35 15.56-3.93-.08-7.05-2.08-9.2-5.2-1-1.48-2.16-3.56-.4-5.08 1.16-1 2.75-.68 3.95.96.76 1.08 2.05 2.2 4.56 2.28 1.93.04 6-4.48 6.25-6.64a25.1 25.1 0 0 0-5.69.44c-1.75.32-3.15.72-4.68.8-2.68.16-5.71-2.96-6.35-4.96-1.13-3.48 11.6-17.68 18.31-12.28 1.13.92 1.92 2.2 2.88 3.28 2.48 2.88-1.75 4.96-3.96 3.24-.44-.32-1.03-.4-1.47-.72-1.32.52-3.6 2.04-5.29 3.56 2.6-.16 5.4-.16 7.65.44 2.2.6 5.23 2.44 5.8 4.32Zm34.19 9.68c.92.92 1.72 3.04-1.24 3-3.24 0-9.44 1.72-12.12 2.88-2.48 1.12-6.44-3.36-6.64-4.72-.4-3.12.6-11.96 1.08-15.12-1.92-1.44-3.24-4.84-.56-5.68a31.26 31.26 0 0 1 11.96-1.2 9.47 9.47 0 0 1 5.68 2.64c.56.6 1.04 1.32 1.04 1.96-.04 1.04-1.04 1.32-1.92 1.24-2.64-.24-6.28.2-9.24.76l-.52 2.56c2.44-.12 5.28-.2 6.6-.12 4.52.28 5.96 4.92 1.68 4.92-1 0-6.24 1.08-8.84 2.08 0 .96 0 1.96.04 2.96 4.24-.76 9.76-1.48 13 1.84Zm-3.84-27.2c0 1.6-.76 2.64-2.28 3.24-1.84.68-5.32 1.2-7.28 1.2-1.2 0-2.8-.08-2.8-1.72 0-1.32 1.64-2.2 2.6-2.68a15.01 15.01 0 0 0 3.88-2.8c.8-.72 1.8-1.8 2.92-1.8 1.96 0 2.96 2.96 2.96 4.56Zm31.4 23.04c-.12 1.56-1 3.6-2.76 4.28-1.32.52-3.64 1.84-6.36 2.88-2.76 1.04-6.04 1.88-9.12 1.28-2.52-.52-6.96-4.92-7.6-7.36-1.52-5.68 3.48-17 8.72-20.4 5.76-3.72 10.36 1.24 12 6.8 1.4 4.84-3.44 4.4-4.44 2.68a23.29 23.29 0 0 0-2.4-3.12c-1.88.6-4.52 3.8-5.32 5.56-1.96 4.28-2.52 7.52-1.84 8.6.52.84 3.56-.16 6.88-1.08 3.68-1 7.64-2.44 9.36-3.04 2.4-.84 3 1.48 2.88 2.92Zm11.09-12.64c-1.96.8-5.6 5.68-6.72 8.96-1.28 3.64-.92 7.12 1.68 6.68 9.04-1.56 10.48-17.88 5.04-15.64Zm9.32 13.12c-.96 3.4-4.52 7.36-8.88 8.48-4.44 1.16-11.4-1.56-13.16-5.44-1.56-3.44-1.48-4.84-1.28-8.48.2-4.24 5.68-13.24 10.68-14.04 4.72-.76 8.4.44 11.16 4.84 2.52 4.04 3.16 8.64 1.48 14.64Zm24.33-15.96c-.4 2-1.28 17.92-.68 20.36 1.08 4.28-3.2 5.6-6.52 3.6-2.44-1.44-5.56-9.8-6.76-12.8-.2 3.56-.08 8 .8 11.36 1.16 4.4-5.8 2.32-7-1.04-1.72-4.92-.84-19.8.72-23.64 1.32-3.24 6.96 1.08 7.88 3.04 1.56 3.4 2.44 7.08 3.76 10.6.2-5 .32-10.68 1.32-15.56.8-3.92 7.24.32 6.48 4.08Zm15.88 2.84c-1.96.8-5.6 5.68-6.72 8.96-1.28 3.64-.92 7.12 1.68 6.68C481 29.18 482.45 12.86 477 15.1Zm9.32 13.12c-.96 3.4-4.52 7.36-8.88 8.48-4.44 1.16-11.4-1.56-13.16-5.44-1.56-3.44-1.48-4.84-1.28-8.48.2-4.24 5.68-13.24 10.68-14.04 4.72-.76 8.4.44 11.16 4.84 2.52 4.04 3.16 8.64 1.48 14.64Zm31.14 6.4c.48 2.8-1.6 3.44-3.37 2.92-1.56-.44-3.44-1.88-3.88-3.64-.92-3.88-1.24-7-1.36-10.52-1.12 1.8-3.04 4.8-3.31 6.76-.29 1.96-1.69 2.72-3.25 2-3.36-1.52-4.51-7.08-5.2-10.28-.75 3.92-1.44 9.96-.75 13.44 1 4.92-5.89 2.64-6.73-2.52-1.6-9.48.88-19.44 3.44-24.28 1.8-3.4 8.29 1.24 8.69 4.48.12 1 .56 4.04.92 6.4 1.31-3.2 3.63-10.16 6.27-12.08 1.49-1.08 7.6 1.32 7.32 4.68-.51 6.52-.12 14.68 1.2 22.64Zm11.4-20.28c-.4 2.04-1.2 8.72-1.13 10.64.16 3-.2 5.96.4 9.64.8 4.72-6.12 2.76-6.72-2.04-1-7.72-1.24-15.4.2-22.12 1.32-6.12 7.96.48 7.24 3.88Zm25.81 7.88c1.76 5.76-4.96 15.76-12.36 15.56-3.92-.08-7.04-2.08-9.2-5.2-1-1.48-2.16-3.56-.4-5.08 1.16-1 2.76-.68 3.96.96.76 1.08 2.04 2.2 4.56 2.28 1.92.04 6-4.48 6.24-6.64a25.1 25.1 0 0 0-5.68.44c-1.76.32-3.16.72-4.68.8-2.68.16-5.72-2.96-6.36-4.96-1.12-3.48 11.6-17.68 18.32-12.28 1.12.92 1.92 2.2 2.88 3.28 2.48 2.88-1.76 4.96-3.96 3.24-.44-.32-1.04-.4-1.48-.72-1.32.52-3.6 2.04-5.28 3.56 2.6-.16 5.4-.16 7.64.44 2.2.6 5.24 2.44 5.8 4.32Zm23.25 9.16c.92 1.04 1.72 3.36-1.24 3.36-3.24-.04-9.44 1.88-12.12 3.2-2.48 1.2-6.44-3.76-6.64-5.28-.4-3.44.6-13.28 1.08-16.76-1.92-1.64-3.24-5.4-.56-6.32a28.36 28.36 0 0 1 11.96-1.36 9.1 9.1 0 0 1 5.68 2.96c.56.64 1.04 1.44 1.04 2.16-.04 1.16-1.04 1.48-1.92 1.4-2.64-.28-6.28.2-9.24.84l-.52 2.84a65.1 65.1 0 0 1 6.6-.12c4.52.32 5.96 5.44 1.68 5.44-1 0-6.24 1.2-8.84 2.32 0 1.08 0 2.16.04 3.28 4.24-.84 9.76-1.64 13 2.04Zm24.68 1.04a63.25 63.25 0 0 0-9.12 2.8c-1.8.64-5.64 2.12-7.48 2.2-2.2.12-7.28-4.4-6.08-7.04 2.6-5.6 6.32-9.8 10-14.64-1.32.24-2.6.52-4.48 1.16-3.84 1.36-8.92-5.08-4.8-6.52 4.28-1.48 9.48-2.68 14.52-2.08 2.48.32 6.56 5.08 4.64 6.76-.64.56-5.4 5.08-7.64 7.8-1.6 1.96-3 3.76-3.96 5.64a51.63 51.63 0 0 1 11.12-2.08c4.32-.32 7.4 5.24 3.28 6Z'/%3E%3C/svg%3E");
    background-color:var(--secondary-2-color);
}

.pb-header-main {
	max-width: 38em;
	margin: 8px 0 0 0;
}

.pb-header-subtitle {
	margin: 0;
	font-size: var(--text-md);
	line-height: 1.4;
}

.pb-header-link {
	margin-top: var(--spacer-md);
}

.ff-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-size: var(--text-sm);
	text-decoration: none;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: var(--transition-all);
}

.ff-button--orange {
	background-color: var(--secondary-2-color, #F5B027);
	color: white;
	border: none;
}

.ff-button--orange:hover,
.ff-button--orange:focus {
	background-color: #E09F1F;
	text-decoration: none;
}

/* Responsive styles */
@media (max-width: 768px) {
	.pb-header {
		background-image: none;
		padding-right: 0;
	}
	
	.pb-header-inner {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.pb-header {
		background-image: none;
		padding-bottom: var(--spacer-md);
	}
	
	.pb-header-flexbox {
		display: block;
	}
	
	.pb-header-logoTitle {
		width: 80px;
		height: auto;
	}
	
	.pb-header-title {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.pb-header-title:after {
		padding-top: calc((63 / 262) * 100%);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 262 63'%3E%3Crect fill='%230C7153' width='100%25' height='100%25' /%3E%3Cpath fill='%23fff' d='M43.66 27.45A10.87 10.87 0 0 1 32.65 16.5c0-6.18 4.89-10.95 11-10.95 6.13 0 11.02 4.77 11.02 10.95s-4.9 10.95-11.01 10.95Zm0-5.25a5.5 5.5 0 0 0 5.67-5.7 5.5 5.5 0 0 0-5.67-5.7 5.5 5.5 0 0 0-5.67 5.7 5.5 5.5 0 0 0 5.67 5.7Z'/%3E%3C/svg%3E");
	}
	
	.pb-header-blkText {
		padding: 0;
		margin-top: var(--spacer-md);
	}
	
	.pb-header-main {
		max-width: unset;
		margin: var(--spacer-md) 0 0 0;
	}
	
	.pb-header-subtitle {
		display: none;
	}
	
	.pb-header-link .ff-button {
		display: flex;
	}
}