@charset "UTF-8"; :root { --color-white: #fff; } :root { --color-black: #000; } :root { --color-brown: #A3754C; } :root { --color-blue: #2C4963; } :root { --color-golden: #F3D57B; } :root { --color-yellow: #FEEF7E; } @font-face { font-family: "Pacifico-Regular"; src: url("../fonts//Pacifico/Pacifico/Pacifico-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } .u-hidden { display: none !important; } @media screen and (max-width: 319px) { .u-hidden--very-small { display: none !important; } } @media screen and (min-width: 320px) and (max-width: 767px) { .u-hidden--small { display: none !important; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .u-hidden--medium { display: none !important; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { .u-hidden--large { display: none !important; } } @media screen and (min-width: 1440px) { .u-hidden--huge { display: none !important; } } .u-visually-hidden { position: absolute; margin: -0.1rem; border: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; } .u-visually-hidden.focusable .u-visually-hidden:active, .u-visually-hidden.focusable .u-visually-hidden:focus { position: static; margin: 0; width: auto; height: auto; overflow: visible; white-space: inherit; clip-path: none; clip: auto; } .u-invisible { visibility: hidden; } *, *::before, *::after { box-sizing: border-box; } :root { scroll-behavior: smooth; } html { line-height: 1.15; font-size: 62.5%; scroll-behavior: smooth; } body { margin: 0; padding: 0; line-height: 1.3; color: var(--color-black); font-family: sans-serif; font-size: 1em; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; } p { margin-top: 0; margin-bottom: 0; } blockquote p, td p, th p, li li, li p, li h1, li h2, li h3, li h4, li h5, li h6, li label, li select, li input, li textarea, li button { font-size: 100%; } button { display: inline; margin: 0; outline: none; border: none; cursor: pointer; padding: 0; } a img { border: none; } img { max-width: 100%; height: auto; vertical-align: middle; } hr { border: none; background-color: var(--color-black); height: 0.1rem; } input, select, textarea { font-family: sans-serif; } fieldset { margin: 0; border: none; padding: 0; } select { cursor: pointer; width: auto; } input, select, textarea, label { vertical-align: middle; } .screen-reader { position: absolute; margin: -1px; border-width: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .screen-reader-focusable:focus { position: relative; margin: inherit; border: initial; padding: inherit; width: auto; height: auto; clip: initial; } /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } .c-footer { /*padding: 2rem 15%;*/ z-index: 9999; padding: 20px 15%; background-color: var(--color-blue); } @media screen and (max-width: 768px) { .c-footer { padding: 10px 5%; } } .c-footer__list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 0; } @media screen and (max-width: 768px) { .c-footer__list { justify-content: center; gap: 10px 0; } } .c-footer__li { font-family: "Arial", sans-serif; font-size: 14px; color: var(--color-white); } @media screen and (max-width: 768px) { .c-footer__li { margin: auto; font-size: 12px; } } .c-header { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; margin-top: 1rem; margin-bottom: 0; } @media screen and (max-width: 768px) { .c-header { gap: 1rem; } } .c-header img { max-width: 264px; } /* Cas particulier de la taille de l'image par page */ body.c-home .c-header a img { max-width: 264px; } /* Cas particulier de la taille de l'image par page */ body.c-consumer .c-header a img, body.c-documents .c-header a img, body.c-game .c-header a img { max-width: 200px; } .swal2-popup { background-image: url("../images@2x/1972_Carnet_seul_v2.png"); background-size: cover; background-size: 100% 100%; background-color: transparent; } .swal2-html-container { font-family: "Pacifico-Regular", sans-serif; } button.swal2-confirm.btn-alert, button.swal2-confirm.platform-bg-primary { background-image: url("../images@2x/1972_HP_Bouton.png"); background-size: 100% 100%; background-color: transparent; background-repeat: no-repeat; background-position: 50% 40%; padding: 12px 35px 20px 35px; font-family: "Pacifico-Regular", sans-serif; color: #215697; font-size: 22px; font-weight: 400; cursor: pointer; height: 50px; } .grecaptcha-badge { display: none !important; position: absolute; left: 100%; } .o-container { margin: 0 auto; padding: 0 1.5rem; width: 700px; max-width: 100%; background-color: transparent !important; } .o-container--fluid { margin: auto; padding: 0 1.5rem; max-width: 100%; } form.form label.form-title { font-family: "Pacifico-Regular", sans-serif; color: #215697; font-size: 1.9rem; font-weight: 400; } form.form label.form-sub-title { font-family: "Pacifico-Regular", sans-serif; color: #215697; font-size: 1rem; font-weight: normal; } form div.form-control { margin-bottom: 5px; } #lb-next-button .button-text { position: relative; bottom: 5px; } .form-controls-container { width: 100%; text-align: center; } .form-control { width: 100%; text-align: center; margin-top: 10px; } label.form-control-label { width: 100%; display: block; text-align: center; font-family: "Pacifico-Regular", sans-serif; color: #215697; font-size: 0.9rem; font-weight: 400; margin-bottom: 5px; } .form-control-input { width: 100%; background-color: white !important; border: none !important; height: 25px !important; border-radius: 0 !important; color: #215697 !important; font-family: "Pacifico-Regular", sans-serif !important; } .invalid-feedback, .invalid-feedback div { color: #880808; font-family: "Pacifico-Regular", sans-serif; font-style: italic; font-size: 0.8rem; } .c-home { position: relative; min-height: 100dvh; display: flex; flex-direction: column; } .c-home__pannel img { position: absolute; bottom: 0; z-index: -1; } .c-home__pannel--game { left: 15%; } @media screen and (max-width: 768px) { .c-home__pannel--game { left: 3%; max-width: 50%; bottom: 15rem !important; } } .c-home__pannel--panneau { right: 15%; } @media screen and (max-width: 768px) { .c-home__pannel--panneau { right: 5%; max-width: 50%; bottom: 13rem !important; } } .c-home-bottom { margin-bottom: 2rem; } .c-home-bottom p { color: var(--color-white); font-size: 2.5rem; font-family: "DancingScript", cursive; } #lb-next-button { background-image: url("../images@2x/1972_HP_Bouton.png"); background-size: contain; background-repeat: no-repeat; background-position: 50% 40%; padding: 35px 35px 35px 35px; } .button-text { font-family: "Pacifico-Regular", sans-serif; color: #215697; font-size: 22px; font-weight: 400; cursor: pointer; } .o-container.page.home { margin-top: 2%; padding: 2% 5%; } @media screen and (min-width: 1440px) and (max-width: 1839px) { .o-container.page.home { padding: 0% 10%; } } @media screen and (min-width: 1200px) and (max-width: 1439px) { .o-container.page.home { padding: 0% 10%; } } @media screen and (min-width: 1024px) and (max-width: 1199px) { .o-container.page.home { padding: 2% 10%; } } @media screen and (min-width: 601px) and (max-width: 1023px) { .o-container.page.home { padding: 0% 10%; } } @media screen and (max-width: 600px) { .o-container.page.home { padding: 20% 0%; } } .o-container.page.home #lb-next-button { position: relative; top: -70px; } @media screen and (max-width: 600px) { .o-container.page.home #lb-next-button { top: -60px; } } .o-container.page.home #lb-next-button .button-text { bottom: 2px !important; } .c-home.c-background { background-image: url("../images@2x/1972_HP_fond.jpg"); background-size: auto; background-position: 50% 0%; background-repeat: no-repeat; min-height: 100dvh; } @media screen and (max-width: 768px) { .c-home.c-background { background-size: cover; } } .c-consumer.c-background, .c-documents.c-background, .c-tracking.c-background, .c-contact.c-background { background-color: var(--color-blue) !important; background-image: url("../images@2x/1972_Fond formulaireV2.png"); background-size: cover !important; background-position: 50% 0%; background-repeat: no-repeat; min-height: 100dvh; } @media screen and (max-width: 768px) { .c-consumer.c-background, .c-documents.c-background, .c-tracking.c-background, .c-contact.c-background { /*background-image: url('../images@2x/bg-small.jpg');*/ background-size: cover; } } .c-game.c-background { /*background-image: url('../images@2x/1972_grattage_fonds.png'); */ background-image: url("../images@2x/1972_Fond formulaireV2.png"); background-size: cover !important; background-position: 50% 0%; background-repeat: no-repeat; min-height: 100dvh; } @media screen and (max-width: 768px) { .c-game.c-background { /*background-image: url('../images@2x/bg-small.jpg');*/ /*background-size: cover;*/ } } main.consumer form.form { background-image: url("../images@2x/1972_Carnet_seul_v2.png"); background-size: 100% 100%; background-repeat: no-repeat; min-height: 80vh; padding-top: 80px; padding-left: 85px; padding-right: 85px; } @media screen and (max-width: 600px) { main.consumer form.form { padding-left: 30px; padding-right: 30px; } } main.consumer .form-controls-container { margin-top: 20px; } main.documents form.form { background-image: url("../images@2x/1972_Carnet_seul_v2.png"); background-size: 100% 100%; background-repeat: no-repeat; min-height: 80vh; padding-top: 100px; padding-left: 50px; padding-right: 50px; } @media screen and (max-width: 600px) { main.documents form.form { padding-left: 30px; padding-right: 30px; } } .file-input { font-size: 13px; padding: 2px; } main.documents form.form .form-title { /*width: 75%;*/ display: block; margin: 0 auto; text-align: center !important; font-size: 30px !important; margin-bottom: 15px; } main.documents form.form .form-title { font-size: 25px !important; } main.documents #lb-next-button { margin-top: -10px; margin-bottom: 10px; } .form-control { margin-top: 0px !important; } .form-control em { font-size: 12px !important; color: #215697 !important; } .form-control-checkbox { display: inline-block !important; } .form-control-checkbox .form-control-input { float: left; height: 19px !important; } .form-control.align-left .form-control-label { text-align: left; } .form-control-checkbox .form-control-label, .form-control-checkbox .form-control-label a { text-align: justify; color: #215697; font-family: "Verdana", sans-serif !important; font-size: 12px !important; /*font-weight: bold !important;*/ } .form-control-checkbox .form-control-label { float: left; width: 93%; margin-left: 1%; } @media screen and (max-width: 600px) { .form-control-checkbox .form-control-label { width: 85%; text-align: justify !important; } } .form-control-required-field-message label { color: #215697; font-family: "Verdana", sans-serif !important; font-size: 12px !important; } .form-control-checkbox .form-control-input { appearance: auto; -webkit-appearance: checkbox; width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; accent-color: var(--color-blue, #4fc3f7); /* reprend la couleur bleue déjà utilisée */ vertical-align: middle; } .form-control-checkbox { display: flex; align-items: flex-start; gap: 10px; } #u_body { background-color: transparent !important; } #u_body span { /*font-family: $font-pacifico-regular !important; font-size: 20px !important; font-weight: normal !important;*/ } #u_body table { width: 100% !important; } #u_body .u-col.u-col-100 { min-width: 400px !important; } #u_body strong { font-weight: bold !important; } #u_body .v-button { width: auto !important; background-image: url("../images@2x/1972_HP_Bouton.png") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 40% !important; padding: 35px 35px 35px 35px; background-color: transparent !important; font-family: "Pacifico-Regular", sans-serif !important; color: #215697 !important; } .game-confirmation-popup div:where(.swal2-container) div:where(.swal2-popup) { width: auto !important; } .game-confirmation-popup .swal2-actions { display: none !important; } main.tracking form.form { background-image: url("../images@2x/1972_Carnet_seul_v2.png"); background-size: 100% 100%; background-repeat: no-repeat; min-height: 50vh; padding-top: 100px; padding-left: 100px; padding-right: 100px; } @media screen and (max-width: 600px) { main.tracking form.form { padding-left: 30px; padding-right: 30px; } } main.tracking label.form-title { width: 100%; display: block; margin-bottom: 10px; } @media screen and (max-width: 600px) { main.tracking label.form-title { font-size: 25px; } } main.tracking form.form #lb-next-button { padding: 35px 35px 35px 30px !important; } main.contact form.form { background-image: url("../images@2x/1972_Carnet_seul_v2.png"); background-size: 100% 100%; background-repeat: no-repeat; min-height: 80vh; padding-top: 100px; padding-left: 100px; padding-right: 100px; } @media screen and (max-width: 600px) { main.contact form.form { padding-left: 30px; padding-right: 30px; } } main.contact #lb-next-button { margin-top: -10px; margin-bottom: 10px; } textarea { text-align: left !important; background-color: white !important; border-radius: 0 !important; color: #215697 !important; } /*# sourceMappingURL=app.css.map */