@charset "utf-8";
/*++++++++ TYPOGRAPHIES ++++++++*/
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url(formulaire.css);
/*+++++++++*/
:root {
--blue: 7,154,196;
--indigo: 0,2,72;
--purple: #6F42C1;
--pink: #FDE1E3;
--red: 204,0,0;
--orange: 253,126,20;
--yellow: #FFC107;
--green: 198,194,21;
--teal: 42,122,123;
--cyan: #17A2B8;
--white: #FFFFFF;
--gray: #666666;
--gray-light: #CCCCCC;
--gray-dark: #333333;
--primary: #D7000F;
--secondary: #2C3A47;
--success: #C5FF96;
--info: #2A7A7B;
--warning: #FD7E14;
--danger: #CC0000;
--light: #EFEFEF;
--dark: #121212;
--breakpoint-xs: 0;
--breakpoint-sm: 320px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1824px;
--font-family-sans-serif: 'Ubuntu', sans-serif;
--font-family-monospace: 'Source Code Pro', monospace;
}
/*++++++++ BODY ET HTML ++++++++*/
body {
font-weight: 500;
line-height: 1.45em;
font-size: 15px;
font-family: var(--font-family-sans-serif);
color: #333333;
}
/*++++++++ PRELOADER ++++++++*/
#preloader-active {
position: relative;
z-index: 999999;
}
.preloader {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999999;
margin: 0;
background-color: var(--white);
transition: 0.6s;
}
.preloader .preloader-circle {
position: relative;
z-index: 998;
width: 100px;
height: 100px;
border-radius: 50%;
border-width: 1px;
border-style: solid;
border-color: var(--primary) transparent var(--secondary) transparent;
background-color: var(--white);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
animation: zoom 2s infinite ease;
transition: 0.6s;
}
.preloader .preloader-img {
position: absolute;
top: calc(50% - 32px);
right: 0;
left: 0;
z-index: 999;
display: inline-block;
margin: 0 auto;
text-align: center;
transition: 0.6s;
}
.preloader .preloader-img img {
width: 64px;
height: 64px;
object-fit: cover;
}
@keyframes zoom {
0% {
transform: rotate(0deg);
transition: 0.6s
}
100% {
transform: rotate(360deg);
transition: 0.6s
}
}
/*++++++++ ELEMENTS GRAPHIQUES ET COULEURS ++++++++*/
.logo {
display: inline-block;
height: auto;
max-width: 250px;
position: relative;
transition: all 1.5s;
}
.bg-primary {
background-color: var(--primary) !important;
color: var(--white);
}
.bg-secondary {
background-color: var(--secondary) !important;
color: var(--white);
}
.bg-primary a, .bg-secondary a {
color: var(--white);
}
.bg-pink {
background-color: var(--pink) !important;
}
.bg-might {
background-color: var(--light) !important;
}
/*++++++++ STYLES DE TEXTE ++++++++*/
b, strong {
font-weight: bold;
}
h1, .h1 {
font-size: 2.9em;
font-weight: 400;
line-height: 1.2em;
white-space: normal;
color: var(--gray);
}
h2, .h2 {
font-size: 2.2em;
font-weight: 500;
line-height: 1.2em;
color: var(--gray);
}
h3, .h3 {
font-family: var(--font-family-sans-serif);
font-size: 1.8em;
font-weight: 700;
line-height: 1.2em;
color: var(--gray);
}
h4, .h4 {
font-size: 1.5em;
font-weight: 600;
line-height: 1.1em;
text-transform: uppercase;
color: var(--gray);
}
h5, .h5 {
font-size: 1.3em;
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1.1em;
color: var(--gray);
}
h6, .h6 {
font-size: 1.1em;
font-weight: 800;
line-height: 1em;
color: var(--gray);
}
.blockquote {
border-left: solid 0.25rem var(--light);
font-size: 1.1em;
line-height: 1.4em;
margin: 0 0 1rem;
padding-left: 1.5rem;
}
.lead {
font-size: 1.35em;
line-height: 1.5rem;
}
.display-1 {
font-size: 5em;
font-weight: 300;
line-height: 1.2;
}
.display-2 {
font-size: 4.5em;
font-weight: 300;
line-height: 1.2;
}
.display-3 {
font-size: 3.5em;
font-weight: 300;
line-height: 1.2;
}
.display-4 {
font-size: 2.5em;
font-weight: 300;
line-height: 1.2;
}
hr {
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
margin-top: 1rem;
}
small, .small {
font-size: 80%;
font-weight: 400;
}
.liste-stylisee {
list-style: none;
padding-left: 0;
}
.liste-stylisee li {
margin-bottom: 0.75em;
padding-left: 1.5em;
}
.liste-stylisee li:before {
color: inherit;
content: '\f324';
font-family: "Font Awesome 5 Pro";
margin-left: -1.5em;
margin-right: 1.2em;
}
.liste-stylisee li li {
list-style-type: none;
margin-bottom: 0.25em;
margin-top: 0.25em;
}
.liste-stylisee li li:before {
content: '-';
}
.list-unstyled {
list-style: none;
}
.list-inline {
padding-left: 0;
list-style: none;
}
.list-inline-item {
display: inline-block;
}
.list-inline-item:not(:last-child) {
margin-right: 0.5rem;
}
.text-white {
color: var(--white) !important;
}
.text-primary {
color: var(--primary) !important;
}
a.text-primary:hover, a.text-primary:focus {
color: var(--gray) !important;
}
.text-secondary {
color: var(--secondary) !important;
}
a.text-secondary:hover, a.text-secondary:focus {
color: #494f54 !important;
}
.text-success {
color: var(--success) !important;
}
a.text-success:hover, a.text-success:focus {
color: #19692c !important;
}
.text-info {
color: var(--info) !important;
}
a.text-info:hover, a.text-info:focus {
color: #0f6674 !important;
}
.text-warning {
color: var(--warning) !important;
}
a.text-warning:hover, a.text-warning:focus {
color: #ba8b00 !important;
}
.text-danger {
color: var(--danger) !important;
}
a.text-danger:hover, a.text-danger:focus {
color: #a71d2a !important;
}
.text-light {
color: var(--light) !important;
}
a.text-light:hover, a.text-light:focus {
color: var(--dark) !important;
}
.text-dark {
color: var(--dark) !important;
}
a.text-dark:hover, a.text-dark:focus {
color: var(--gray-light) !important;
}
.text-body {
color: var(--gray) !important;
}
.text-muted {
color: var(--gray-light) !important;
}
.text-black-50 {
color: rgba(0, 0, 0, 0.5) !important;
}
.text-white-50 {
color: rgba(255, 255, 255, 0.5) !important;
}
.text-monospace {
font-family: var(--font-family-monospace) !important;
}
.text-serif {
font-family: var(--font-family-serif);
}
.text-justify {
text-align: justify !important;
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
/*++++++++ AUTRES CONTENUS DIVERS ++++++++*/
.img-fluid {
height: auto;
max-width: 100%;
width: 100%;
}
.img-fit-cover-center {
height: 100%;
object-fit: cover;
object-position: center;
width: 100%;
}
.img-fit-cover-left {
height: 100%;
object-fit: cover;
object-position: left;
width: 100%;
}
.img-fit-cover-right {
height: 100%;
object-fit: cover;
object-position: right;
width: 100%;
}
.bg-left {
background: var(--pink);
border-bottom-left-radius: 5rem;
border-top-left-radius: 5rem;
border-top-right-radius: 5rem;
display: block;
height: 65%;
left: 5%;
padding: 1.5rem;
position: absolute;
text-align: center;
top: 0;
width: 48%;
z-index: -1;
color: var(--primary);
}
.bg-right {
background: var(--pink);
border-top-left-radius: 5rem;
border-top-right-radius: 5rem;
border-bottom-right-radius: 5rem;
display: block;
height: 65%;
right: 5%;
padding: 1.5rem;
position: absolute;
text-align: center;
top: 0;
width: 60%;
z-index: -1;
color: var(--primary);
}
.bulle-chal {
left: 8%;
max-width: 10vw;
position: absolute;
top: 30%;
z-index: 1;
}
.bulle-team {
right: 32%;
max-width: 10vw;
position: absolute;
top: 10%;
z-index: 1;
}
.bulle-coop {
left: 28%;
max-width: 10vw;
position: absolute;
bottom: 30%;
z-index: 1;
}
.bulle-cult {
right: 16%;
max-width: 10vw;
position: absolute;
bottom: 15%;
z-index: 1;
}
.date {
display: inline-block;
font-size: 1.4em;
margin-bottom: 2.5rem;
}
.date::before {
background: var(--primary);
content: '';
display: block;
height: 100%;
left: 50%;
position: absolute;
top: -100%;
width: 1px;
-webkit-animation: bounce-in-top 1.4s both;
animation: bounce-in-top 1.4s both;
animation-delay: 2.6s;
}
.date::after {
display: block;
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
position: relative;
margin: 5px auto;
background-color: var(--primary);
-webkit-animation: pulse-ring 2.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
animation: pulse-ring 2.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.date strong {
color: var(--primary);
}
.picto-team {
background: rgb(181,31,31);
background: -moz-linear-gradient(45deg, rgba(181,31,31,1) 0%, rgba(220,10,20,1) 100%);
background: -webkit-linear-gradient(45deg, rgba(181,31,31,1) 0%,rgba(220,10,20,1) 100%);
background: linear-gradient(45deg, rgba(181,31,31,1) 0%,rgba(220,10,20,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b51f1f', endColorstr='#dc0a14',GradientType=1 );
color: var(--white);
font-size: 1.2em;
padding: 1rem;
border-radius: 100%;
display: inline-block;
width: 80px;
height: 80px;
margin-bottom: 1rem;
vertical-align: middle;
}
.cadeaux {
width: 100%;
height: auto;
position: relative;
display: inline-block;
max-width: 180px;
}
.visuel-cadeau {
max-width: 55%;
height: auto;
border-radius: 100%;
box-shadow: 0.5rem 0 0 0.25rem var(--pink);
border: solid 0.3rem rgba(255,255,255,0.4);
margin-bottom: 10px;
}
.liste-cadeaux .list-inline-item {
width: 30%;
}
.list-inline.liste-cadeaux {
display: flex;
justify-content: center;
}
.decompte {
background: linear-gradient(45deg, rgba(181,31,31,1) 0%,rgba(220,10,20,1) 100%);
background: -moz-linear-gradient(45deg, rgba(181,31,31,1) 0%, rgba(220,10,20,1) 100%);
background: rgb(181,31,31);
background: -webkit-linear-gradient(45deg, rgba(181,31,31,1) 0%,rgba(220,10,20,1) 100%);
border-radius: 1.5rem;
color: var(--white);
display: block;
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b51f1f', endColorstr='#dc0a14',GradientType=1 );
font-size: 0.8em;
font-weight: bold;
margin: 0 auto 10px;
position: relative;
text-align: center;
width: 80px;
}
.resultats-win {
padding-left: 0;
list-style-type: none;
line-height: 2rem;
text-align: left;
font-size: 1.3em;
color: var(--dark);
}
.resultats-win li {
display: flex;
margin: 0 auto 1rem;
padding: 0.5rem 1rem 0.5rem 0.5rem;
border-radius: 1.5rem;
background: rgba(255, 255, 255, 0.6);
justify-content: space-between;
}
.num {
display: inline-block;
min-width: 2rem;
margin-right: 0.25rem;
padding: 0 0.5rem;
background: var(--primary);
border-radius: 1rem;
text-align: center;
font-weight: bold;
color: var(--white);
}
.display-3 i.picto-team {
font-size: 0.9em;
}
.position {
background: var(--pink) !important;
}
.position .num {
background: var(--primary) !important;
color: var(--white) !important;
}
.resultats-win .position {
background: var(--primary) !important;
color: var(--white) !important;
}
.resultats-win .position .num {
background: var(--white) !important;
color: var(--primary) !important;
}
.points {
align-self: end;
display: flex;
text-align: right;
}
.list-result {
width: 80%;
margin: auto;
padding: 0;
list-style-type: none;
line-height: 2rem;
text-align: left;
}
.list-result li {
display: flex;
margin: 0 auto 0.75rem;
padding: 0.5rem 1rem 0.5rem 0.5rem;
border: solid 1px var(--light);
border-radius: 1.5rem;
justify-content: space-between;
}
.list-result li:nth-child(even) {
background: var(--light);
}
.list-result .num {
background: var(--gray-light);
color: var(--dark);
}
.list-result .position1, .list-result .position2, .list-result .position3 {
display: none !important;
}
.text-final {
background: rgba(255,255,255,0.4);
border-radius: 1.5rem;
color: var(--dark);
height: 100%;
max-height: 200px;
overflow: auto;
padding: 0.75rem;
position: relative;
text-align: left;
width: 100%;
}
.bg-right.final {
height: 75%;
width: 70%;
position: relative;
margin: 0 auto 1rem;
z-index: 1;
right: 0;
}
.text-final {
scrollbar-color: var(--primary) transparent;
scrollbar-width: thin;
border-radius: 1rem;
}
.text-final::-webkit-scrollbar {
max-height: 60px;
width: 8px;
}
.text-final::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 1rem;
max-height: 60px;
width: 8px;
}
.text-final::webkit-scrollbar-track {
width: 8px;
border-radius: 1rem;
}
.text-final::webkit-scrollbar-thumb {
background: var(--primary);
height: 60px;
border-radius: 1rem;
}
/* Radio Input */
.radio-toolbar input[type="radio"] {
display: none;
}
.radio-toolbar label {
width: 100%;
height: 100%;
text-align: start;
color: var(--secondary);
transition: all 0.5s;
font-size: 2.5vh;
font-weight: 600;
padding: 1.5rem 2.5rem !important;
margin: 0.3rem 0rem;
border: 2px solid transparent;
border-radius: 2.5rem;
background-color: #f5f5f5;
box-shadow: 10px 10px 14px -7px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 10px 10px 14px -7px rgba(0, 0, 0, 0.14);
-moz-box-shadow: 10px 10px 14px -7px rgba(0, 0, 0, 0.15);
cursor: pointer;
line-height: 1.1em;
}
.radio-toolbar label:hover, .radio-toolbar input[type="radio"]:checked + label {
background-color: var(--success);
padding-left: 3.5rem;
}
.correct-answer {
background-color: var(--success) !important;
color: var(--info) !important;
}
/* Answer */
.goodAnswer {
padding: 1rem;
border-top-right-radius: 2.5rem;
border-bottom-right-radius: 2.5rem;
border-bottom-left-radius: 2.5rem;
background-color: var(--success) !important;
}
.badAnswer {
padding: 1rem;
border-top-right-radius: 2.5rem;
border-bottom-right-radius: 2.5rem;
border-bottom-left-radius: 2.5rem;
background-color: var(--pink) !important;
}
.questionWrap {
height: auto;
}
.answerWrap {
height: auto;
margin-top: 2.5rem;
}
/*Select Input */
.select-box {
width: 50%;
position: relative;
}
.select-box input[type="text"] {
width: 100%;
padding: 1rem;
outline: 0;
border-radius: 1.875rem;
border: 3px solid var(--primary);
font-size: 1.2rem;
font-weight: bold;
}
.select-box span {
position: absolute;
top: 0;
right: 0.875rem;
line-height: 3.74rem;
font-weight: bold;
font-family: flaticon_minutquiz_caisse_epargne;
transition: 0.7s ease-out;
transform-origin: 25% 50%;
}
.select-box div {
position: absolute;
z-index: -1;
width: 100%;
padding: 0 1.875rem;
visibility: hidden;
opacity: 0;
background-color: var(--white);
color: var(--gray-dark);
transition: opacity 0.1s linear, z-index 0s linear 0.1s, visibility 0s linear 0.1s;
}
.select-box ul {
max-height: 10rem;
margin-bottom: 0;
padding: 0;
line-height: 2rem;
overflow-y: auto;
list-style: none;
}
.select-box li {
padding: 0.65rem;
font-size: 1.2rem;
cursor: pointer;
}
.select-box li:not(.d-none) ~ li:not(.d-none) {
border-top: 1px solid var(--gray-light);
}
.select-box li:hover {
background-color: var(--gray-light);
}
.select-box input[type="text"]:focus ~ span {
transform: rotate(450deg);
}
.select-box input[type="text"]:focus ~ div {
z-index: 999;
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
/* Change Team */
a > i:hover {
color: var(--primary);
}
.pagination {
display: -ms-flexbox;
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem;
}
.page-link {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
color: var(--primary);
background-color: var(--white);
border-radius: 100%;
width: 35px;
height: 35px;
transition: all 0.6s;
font-size: 1.1em;
line-height: 1.2em;
}
.page-link:hover {
z-index: 2;
color: var(--pink);
text-decoration: none;
background-color: var(--primary);
}
.page-link:focus {
z-index: 3;
outline: 0;
box-shadow: 0 0 0 0.6rem rgba(0, 0, 0, 0.05);
}
.page-item:first-child .page-link {
margin-left: 0;
background: var(--primary);
color: var(--white);
padding-left: 0;
padding-right: 0;
}
.page-item:last-child .page-link {
background: var(--primary);
color: var(--white);
}
.page-item.active .page-link {
z-index: 3;
color: var(--white);
background-color: var(--secondary);
}
.page-item.disabled .page-link {
background: var(--gray-light);
color: var(--white);
color: var(--gray);
pointer-events: none;
cursor: auto;
}
/*++++++++ MODAL ++++++++*/
.modal-open {
overflow: hidden;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
left: 0;
z-index: 1050;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
}
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
.modal.fade .modal-dialog {
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog {
transition: none;
}
}
.modal.show .modal-dialog {
webkit-transform: none;
transform: none;
}
.modal.modal-static .modal-dialog {
webkit-transform: scale(1.02);
transform: scale(1.02);
}
.modal-dialog-scrollable {
display: -ms-flexbox;
display: flex;
max-height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - 1rem);
overflow: hidden;
}
.modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .modal-footer {
ms-flex-negative: 0;
flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
overflow-y: auto;
}
.modal-dialog-centered {
display: -ms-flexbox;
display: flex;
ms-flex-align: center;
align-items: center;
min-height: calc(100% - 1rem);
}
.modal-dialog-centered::before {
display: block;
height: calc(100vh - 1rem);
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
content: "";
}
.modal-dialog-centered.modal-dialog-scrollable {
ms-flex-direction: column;
flex-direction: column;
ms-flex-pack: center;
justify-content: center;
height: 100%;
}
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
max-height: none;
}
.modal-dialog-centered.modal-dialog-scrollable::before {
content: none;
}
.modal-content {
position: relative;
display: -ms-flexbox;
display: flex;
ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: var(--white);
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3rem;
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop.show {
opacity: 0.5;
}
.modal-header {
display: -ms-flexbox;
display: flex;
ms-flex-align: start;
align-items: flex-start;
ms-flex-pack: justify;
justify-content: space-between;
border-bottom: 1px solid var(--light);
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
.modal-header .close {
padding: 0.5rem 1.5rem;
margin: 0 0 0 auto;
}
.modal-title {
margin-bottom: 0;
line-height: 1.5;
}
.modal-body {
position: relative;
ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1rem;
}
.modal-footer {
display: -ms-flexbox;
display: flex;
ms-flex-wrap: wrap;
flex-wrap: wrap;
ms-flex-align: center;
align-items: center;
ms-flex-pack: end;
justify-content: flex-end;
padding: 0.75rem;
border-top: 1px solid var(--light);
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer > * {
margin: 0.25rem;
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
@media (min-width: 320px) {
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}
.modal-dialog-scrollable {
max-height: calc(100% - 3.5rem);
}
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - 3.5rem);
}
.modal-dialog-centered {
min-height: calc(100% - 3.5rem);
}
.modal-dialog-centered::before {
height: calc(100vh - 3.5rem);
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
}
.modal-sm {
max-width: 300px;
}
}
@media (min-width: 992px) {
.modal-lg, .modal-xl {
max-width: 800px;
}
}
@media (min-width: 1200px) {
.modal-xl {
max-width: 1140px;
}
}
.close {
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: var(--white);
text-shadow: 0 1px 0 var(--white);
opacity: 1;
}
.close:hover {
color: #000;
text-decoration: none;
}
.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
opacity: .75;
}
button.close {
padding: 0;
background-color: var(--primary);
border: 0;
}
button:focus {
outline: none;
}
.modal-body {
	scrollbar-color: var(--primary) transparent;
	scrollbar-width: thin;
	border-radius: 1rem;
}
.modal-body::-webkit-scrollbar {
max-height: 60px;
width: 8px;
}
.modal-body::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 1rem;
max-height: 60px;
width: 8px;
}
.modal-body::webkit-scrollbar-track {
width: 8px;
border-radius: 1rem;
}
.modal-body::webkit-scrollbar-thumb {
background: var(--primary);
height: 60px;
border-radius: 1rem;
}
.bonus {
display: flex;
background: linear-gradient(215deg, #cc0000, #6b0202);
background-size: 400% 400%;
-webkit-animation: gradiant-bg 6s ease infinite;
-moz-animation: gradiant-bg 6s ease infinite;
-o-animation: gradiant-bg 6s ease infinite;
animation: gradiant-bg 6s ease infinite;
color: var(--white);
flex-direction: column;
justify-content: center;
border-radius: 50%;
margin: 0 auto 1.5rem;
align-items: center;
text-align: center;
border: solid 0.25rem var(--primary)
}
@media only screen and (min-width:768px) {
.bonus {
width: 15vw;
height: 15vw;
font-size: 1.8vw;
}
.bonus i {
font-size: 4vw;
}
.bonus strong {
font-size: 2.2vw;
}
}
@media only screen and (min-width:1024px) {
.bonus {
width: 12vw;
height: 12vw;
font-size: 1.5vw;
}
.bonus i {
font-size: 3vw;
}
.bonus strong {
font-size: 1.6vw;
}
}
@media only screen and (min-width:1280px) {
.bonus {
width: 7.5vw;
height: 7.5vw;
font-size: 1vw;
line-height: 1.25vw;
}
.bonus i {
font-size: 2.5vw;
}
.bonus strong {
font-size: 1.1vw;
}
}
@media only screen and (max-width:767px) {
.bonus {
width: 25vw;
height: 25vw;
font-size: 3.4vw;
}
.bonus i {
font-size: 6vw;
}
.bonus strong {
font-size: 4.2vw;
}
}
@-webkit-keyframes gradiant-bg {
0% {
background-position: 91% 0%
}
50% {
background-position: 10% 100%
}
100% {
background-position: 91% 0%
}
}
@-moz-keyframes gradiant-bg {
0% {
background-position: 91% 0%
}
50% {
background-position: 10% 100%
}
100% {
background-position: 91% 0%
}
}
@-o-keyframes gradiant-bg {
0% {
background-position: 91% 0%
}
50% {
background-position: 10% 100%
}
100% {
background-position: 91% 0%
}
}
@keyframes gradiant-bg {
0% {
background-position: 91% 0%
}
50% {
background-position: 10% 100%
}
100% {
background-position: 91% 0%
}
}
/*++++++++++++++++++++++ MEDIAS QUERIES ++++++++++++++++++++++*/
@media only screen and (min-width:1200px) {
.radio-toolbar label {
font-size: 1.25vw;
}
.col-final {
position: fixed;
height: 100vh;
}
}
@media only screen and (max-width:1366px) {
body {
font-size: 16px;
}
}
@media only screen and (max-width:1280px) {
body {
font-size: 15px;
}
}
@media only screen and (max-width: 1024px) {
.date {
margin: 2.5rem auto 0;
position: relative;
}
.bulle-chal {
max-width: 15vw;
}
.bulle-team {
max-width: 15vw;
}
.bulle-coop {
max-width: 15vw;
}
.bulle-cult {
max-width: 15vw;
}
}
@media only screen and (max-width:980px) {
body {
font-size: 14px;
}
}
@media only screen and (max-width:800px) {
body {
font-size: 13px;
}
}
@media only screen and (max-width:640px) {
body {
font-size: 12px;
line-height: 1.2em;
}
.bulle-chal {
max-width: 25vw;
}
.bulle-team {
max-width: 25vw;
right: 15%;
}
.bulle-coop {
max-width: 25vw;
}
.bulle-cult {
max-width: 25vw;
}
.bg-left {
width: 70%;
padding: 0.75rem;
border-bottom-left-radius: 3rem;
border-top-left-radius: 3rem;
border-top-right-radius: 3rem;
}
.list-inline.liste-cadeaux {
flex-wrap: wrap;
}
.liste-cadeaux .list-inline-item {
width: 45%;
}
}
/*+++++++++++++++++++++++ TOOLTIPS +++++++++++++++++++*/
.tooltip {
position: absolute;
z-index: 1070;
display: block;
margin: 0;
font-family: var(--font-family-sans-serif);
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: 0.875rem;
word-wrap: break-word;
opacity: 0;
}
.tooltip.show {
opacity: 0.9;
}
.tooltip .arrow {
position: absolute;
display: block;
width: 0.8rem;
height: 0.4rem;
}
.tooltip .arrow::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
}
.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
padding: 0.4rem 0;
}
.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
bottom: 0;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
top: 0;
border-width: 0.4rem 0.4rem 0;
border-top-color: #000;
}
.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
padding: 0 0.4rem;
}
.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
left: 0;
width: 0.4rem;
height: 0.8rem;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
right: 0;
border-width: 0.4rem 0.4rem 0.4rem 0;
border-right-color: #000;
}
.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
padding: 0.4rem 0;
}
.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
top: 0;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
bottom: 0;
border-width: 0 0.4rem 0.4rem;
border-bottom-color: #000;
}
.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
padding: 0 0.4rem;
}
.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
right: 0;
width: 0.4rem;
height: 0.8rem;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
left: 0;
border-width: 0.4rem 0 0.4rem 0.4rem;
border-left-color: #000;
}
.tooltip-inner {
max-width: 200px;
padding: 0.25rem 0.5rem;
color: var(--white);
text-align: center;
background-color: #000;
border-radius: 0.25rem;
}
/*+++++++++++++++++++++++ POPOVER +++++++++++++++++++*/
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: block;
max-width: 276px;
font-family: var(--font-family-sans-serif);
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: 0.875rem;
word-wrap: break-word;
background-color: var(--white);
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
}
.popover .arrow {
position: absolute;
display: block;
width: 1rem;
height: 0.5rem;
margin: 0 0.3rem;
}
.popover .arrow::before, .popover .arrow::after {
position: absolute;
display: block;
content: "";
border-color: transparent;
border-style: solid;
}
.bs-popover-top, .bs-popover-auto[x-placement^="top"] {
margin-bottom: 0.5rem;
}
.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow {
bottom: calc(-0.5rem - 1px);
}
.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before {
bottom: 0;
border-width: 0.5rem 0.5rem 0;
border-top-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after {
bottom: 1px;
border-width: 0.5rem 0.5rem 0;
border-top-color: var(--white);
}
.bs-popover-right, .bs-popover-auto[x-placement^="right"] {
margin-left: 0.5rem;
}
.bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow {
left: calc(-0.5rem - 1px);
width: 0.5rem;
height: 1rem;
margin: 0.3rem 0;
}
.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before {
left: 0;
border-width: 0.5rem 0.5rem 0.5rem 0;
border-right-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
left: 1px;
border-width: 0.5rem 0.5rem 0.5rem 0;
border-right-color: var(--white);
}
.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] {
margin-top: 0.5rem;
}
.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow {
top: calc(-0.5rem - 1px);
}
.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before {
top: 0;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
top: 1px;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: var(--white);
}
.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 1rem;
margin-left: -0.5rem;
content: "";
border-bottom: 1px solid #f7f7f7;
}
.bs-popover-left, .bs-popover-auto[x-placement^="left"] {
margin-right: 0.5rem;
}
.bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow {
right: calc(-0.5rem - 1px);
width: 0.5rem;
height: 1rem;
margin: 0.3rem 0;
}
.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before {
right: 0;
border-width: 0.5rem 0 0.5rem 0.5rem;
border-left-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after {
right: 1px;
border-width: 0.5rem 0 0.5rem 0.5rem;
border-left-color: var(--white);
}
.popover-header {
padding: 0.5rem 0.75rem;
margin-bottom: 0;
font-size: 1rem;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
.popover-header:empty {
display: none;
}
.popover-body {
padding: 0.5rem 0.75rem;
color: var(--gray);
}
/*+++++++++++++++++++++++ IMAGE ZOOM +++++++++++++++++++*/
.image-zoom {
cursor: zoom-in;
}
.image-zoom-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
cursor: zoom-out;
transition: background-color 0.2s linear;
}
.image-zoom-background.show {
background-color: rgba(0, 0, 0, 0.75);
}
.image-zoom-background img {
position: fixed;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
transition: all 0.2s linear;
}
.image-zoom-background.show img {
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}