/**
    PROMOTION L&H - SIMULATION INTERFACE APP E.LECLERC
 */

* {
    margin: 0;
    --text-color: black;
    --brand-color: #0B70B5; /* bleu E.Leclerc */
    --accent-color: #ff6633; /* orange E.Leclerc */
    --bg2-color: #e7e7e7; /* fond gris */
}

html {
    height: 100%;
}

body {
    max-height: 100%;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 21px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#wrapper {
    overflow-x: hidden;
    overflow-y: scroll;
    padding-top: 6em;
}

.color-green {
    color: #38AE1E; /* Vert pour le mot "Ouvert" */
}

.clickable {
    cursor: pointer;
}

.locked {
    overflow: hidden !important;
}

/* PAGE ELEMENTS */

.alert-icon {
    position: absolute;
    border-radius: 100%;
    background-color: red;
    width: 3em;
}

.arrow {
    width: 22px;
    height: 22px;
    margin: auto;
}

.arrow > img {
    width: 100% !important;
    height: 100% !important;
}

.ligne-info, .ligne-single {
    display: inline-flex;
    justify-content: space-between;
    width: calc(100% - 2em);
    padding: 1em;
}

.ligne-info {
    border-bottom: 1px solid var(--bg2-color);
}

.ligne-info > div {
    width: 100%;
    display: inline-flex;
}

.narrow {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    font-size: 0.9em;
}

.bg2 {
    background-color: var(--bg2-color);
}

.cartouche {
    padding: 0.5em;
    width: calc(100% - 1em);
    margin-top: -0.5em;
}

.cartouche > div {
    border-radius: 0.4em;
    height: 4em;
    display: inline-flex;
    padding-right: 1em;
    background-repeat: no-repeat;
    background-size: contain;
}

.cartouche .cartouche-text {
    color: white;
    width: 100%;
    padding-left: 5em;
    padding-right: 1em;
    font-size: 0.9em;
    font-weight: normal;
    margin: auto 0;
}

/* Zoom sur QR code et effet de flou arrière plan */

#qrcode {
    background-size: contain;
    width: 90vw;
    height: 90vw;
    position: absolute;
    z-index: 99;
    border-radius: 5%;
    box-shadow: 0 0 15px #000;
    left: 5vw;
    top: calc((100% - 90vw) /2);
}

.blurred {
    filter: blur(2px);
    opacity: 0.5;
}

/* Ligne 1. Bonjour ! + alerte */

.ligne-1 > div {
    display: block;
}

.ligne-1 .lien-magasin  {
    text-transform: uppercase;
    font-weight: normal;
    color: var(--brand-color);
    text-decoration-line: underline;
    font-size: 0.8em;
    margin-top: 0.5em;
}

.ligne-1 .horaire {
    font-weight: normal;
    font-size: 0.8em;
    margin-top: 0.2em;
}

.ligne-1 img {
    width: 3.5em;
    height: 3.5em;
}

/* Ligne 2. Ajoutez votre carte E.Leclerc */

.ligne-2 {
    color: var(--brand-color);
    font-size: 0.8em;
    margin-top: 3.5em;
}

.ligne-2 img {
    width: 4em;
    height: calc(4em * 0.65);
}

.ligne-2 div {
    margin-left: 1em;
    margin-top: auto;
    margin-bottom: auto;
}

/* Ligne du visuel promotionnel */

.ligne-promo {
    text-align: center;
    padding: 1.2em 1.2em 0 1.2em;
}

.ligne-promo .visu-promo img {
    max-height: 15em;
    max-width: 80vw;
}

.visu-promo-spacer {
    height: 0.95em;
}

.ligne-single.cta {
    padding-top: 0.25em;
    padding-bottom: 0.5em;
}

.btcta {
    display: inline-flex;
    background: none;
    border: 0;
    margin-left: -0.5em;
}

.btcta span {
    color: var(--brand-color);
    margin: auto 0.5em auto auto;
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: -0.02em;
}

.btcta img {
    width: 1em;
    margin: auto auto auto 0;
}

/* Lignes des cartouches */

.cart1 {
    background-image: url("./../image/visu_encart_1.png");
    background-color: #ff6633;
}

.cart-white, .cart3 {
    background-color: white;
}

.cart2 {
    background-image: url("./../image/visu_encart_2.png");
}

.cart-card {
    background-image: url("./../image/visu_encart_carte.png");
}

.cart3 {
    background-image: url("./../image/visu_encart_3_right.jpg");
    background-position: right;
}

.cart-white .cartouche-text, .cart3 .cartouche-text {
    color: var(--brand-color);
    font-weight: bold;
}

.cart3 .cartouche-text {
    padding-left: 0.5em;
    padding-right: 5em;
    line-height: 1em;
}

/* FOOTER APP NAVBAR */

footer {
    width: 100%;
    height: 80px;
    position: sticky;
    bottom: 0;
    background-color: white;
    background-image: url("./../image/footer.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 10px;
    box-shadow: 0 -5px 15px #888;
}

/* STICKY HEADER */

.header-sticky {
    background-color: white;
    position: fixed;
    max-height: 80px
}

/* POP ANIMATION */

.pop{
    animation: pop 0.75s ease-in-out;
}

@keyframes pop{
    30% { transform: scale(1.15); }
    40%, 60% { transform: rotate(-15deg) scale(1.15); }
    50% { transform: rotate(15deg) scale(1.15); }
    70% { transform: rotate(0deg) scale(1.15); }
    100% { transform: scale(1); }
}

/* FONTS */

@font-face {
    font-family: "Roboto";
    src: url(./../font/Roboto-Regular.ttf) format("truetype");
    font-weight: normal;
}

@font-face {
    font-family: "Roboto";
    src: url(./../font/Roboto-Bold.ttf) format("truetype");
    font-weight: bold;
}