init

README.txt

@@ -0,0 +1,4 @@
+git checkout --orphan master
+git add .
+git commit -m "Initial commit"
+git push

package.json

@@ -0,0 +1,40 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "hot": "mix watch --hot",
+        "prod": "npm run production",
+        "production": "mix --production"
+    },
+    "devDependencies": {
+        "axios": "^0.21.1",
+        "bootstrap": "^4.6.0",
+        "cross-env": "^7.0",
+        "cssnano": "^5.0.2",
+        "jquery": "^3.2",
+        "laravel-mix": "^6.0.19",
+        "laravel-mix-polyfill": "^3.0.0",
+        "lodash": "^4.17.19",
+        "popper.js": "^1.12",
+        "postcss": "^8.2.15",
+        "resolve-url-loader": "^4.0.0",
+        "sass": "^1.32.13",
+        "sass-loader": "^11.1.1",
+        "vue": "^2.6.12",
+        "vue-loader": "^15.9.6",
+        "vue-template-compiler": "^2.6.12"
+    },
+    "dependencies": {
+        "@fancyapps/fancybox": "^3.5.7",
+        "@fortawesome/fontawesome-free": "^5.15.3",
+        "chart.js": "^2.9.4",
+        "jquery": "^3.5.1",
+        "popper.js": "^1.16.1",
+        "scratchcard-js": "^1.4.10",
+        "swiper": "^6.6.1",
+        "v-clipboard": "^2.2.3"
+    }
+}

resources/front/assets/images/facebook.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M452,0H60C26.916,0,0,26.916,0,60v392c0,33.084,26.916,60,60,60h392c33.084,0,60-26.916,60-60V60
+			C512,26.916,485.084,0,452,0z M472,452c0,11.028-8.972,20-20,20H338V309h61.79L410,247h-72v-43c0-16.975,13.025-30,30-30h41v-62
+			h-41c-50.923,0-91.978,41.25-91.978,92.174V247H216v62h60.022v163H60c-11.028,0-20-8.972-20-20V60c0-11.028,8.972-20,20-20h392
+			c11.028,0,20,8.972,20,20V452z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

resources/front/assets/images/instagram.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M363.273,0H148.728C66.719,0,0,66.719,0,148.728v214.544C0,445.281,66.719,512,148.728,512h214.544
+			C445.281,512,512,445.281,512,363.273V148.728C512,66.719,445.281,0,363.273,0z M472,363.272C472,423.225,423.225,472,363.273,472
+			H148.728C88.775,472,40,423.225,40,363.273V148.728C40,88.775,88.775,40,148.728,40h214.544C423.225,40,472,88.775,472,148.728
+			V363.272z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M256,118c-76.094,0-138,61.906-138,138s61.906,138,138,138s138-61.906,138-138S332.094,118,256,118z M256,354
+			c-54.037,0-98-43.963-98-98s43.963-98,98-98s98,43.963,98,98S310.037,354,256,354z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<circle cx="396" cy="116" r="20"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

resources/front/assets/images/up-arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 30" x="0px" y="0px"><title>Arrow-Up-Circle</title><path d="M15,12a1,1,0,0,1-.71-.29L12,9.41,9.71,11.71a1,1,0,0,1-1.41-1.41l3-3a1,1,0,0,1,1.41,0l3,3A1,1,0,0,1,15,12Z"/><path d="M12,17a1,1,0,0,1-1-1V8a1,1,0,0,1,2,0v8A1,1,0,0,1,12,17Z"/><path d="M12,22A10,10,0,1,1,22,12,10,10,0,0,1,12,22ZM12,4a8,8,0,1,0,8,8A8,8,0,0,0,12,4Z"/><text x="0" y="39" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by IconSrc</text><text x="0" y="44" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>

resources/front/css/cookies-ldc.css

@@ -0,0 +1,457 @@
+/* DEBUT DU PARAMETRAGE */
+/* - Choix des FONTS */
+/* - Changement des couleurs et des polices */
+
+:root{
+    /* PARTIE A RENSEIGNER */
+    --primary-color: rgb(100, 100, 100);
+    --secondary-color: #0f437e;
+    --background-color: #ffffff;
+    --shadow-color: 0 .5rem 1rem rgb(0 0 0 / 35%);
+    --title-font: "Satisfy", sans-serif;
+    --title-size: 25px;
+    --text-font: "Barlow", sans-serif;
+    --text-size: 14px;
+    --accept-color: #33aa33;
+    --deny-color: #aa3333;
+
+    /* Position et animation des cookies */
+    --ldcweb-cn-position-left: 20px; /* Distance par rapport à la gauche de la fenêtre */
+    --ldcweb-cn-position-right: auto; /* Distance par rapport à la droite de la fenêtre */
+    --ldcweb-cn-animation-left: 0; /* Position gauche de base des cookies */
+    --ldcweb-cn-animation-right: auto; /* Position droite de base des cookies */
+    --ldcweb-cn-position-bottom: 20px; /* Distance par rapport au bas de la fenêtre */
+    --ldcweb-cn-z-index: 200;
+
+    /* PARTIE A RENSEIGNER FACULTATIF */
+    /* FENETRE D'ACCUEIL */
+    --ck-bg-color: var(--background-color);
+
+    /* Title settings */
+    --ck-w1-bgcolor-title: var(--background-color);
+    --ck-w1-font-family-title: var(--title-font);
+    --ck-w1-font-size-title: var(--title-size);
+    --ck-w1-color-title: var(--secondary-color);
+
+    /* Text settings */
+    --ck-w1-font-family-txt: var(--text-font);
+    --ck-w1-font-size-txt: var(--text-size);
+    --ck-w1-color-txt: var(--primary-color);
+    --ck-w1-color-href-hover: var(--secondary-color);
+
+    /* Button settings */
+    --ck-w1-color-btn: var(--secondary-color);
+    --ck-w1-color-btn-hover: var(--secondary-color);
+    --ck-w1-font-family-btn-txt: var(--text-font);
+    --ck-w1-font-size-btn-txt: var(--text-size);
+    --ck-w1-color-btn-txt: #ffffff;
+    --ck-w1-color-btn-txt-hover: #ffffff;
+    --ck-w1-color-btn-border: transparent;
+    --ck-w1-color-btn-border-hover: transparent;
+
+    /* FENETRE DE PERSONNALISATION */
+    --ck-bg-color-modal-wrapper: #ffffff;
+    /* Title settings */
+    --ck-w2-bgcolor-title: var(--background-color);
+    --ck-w2-font-family-title: var(--title-font);
+    --ck-w2-font-size-title: var(--title-size);
+    --ck-w2-color-title: var(--secondary-color);
+
+    /* Text settings */
+    --ck-w2-font-family-txt: var(--text-font);
+    --ck-w2-font-size-txt: var(--text-size);
+    --ck-w2-color-txt: var(--primary-color);
+    --ck-w2-color-href-hover: #000000;
+
+    /* Accept/Deny btn settings */
+    --ck-color-accept: #808080;
+    --ck-color-accept-hover: var(--accept-color);
+    --ck-color-deny: #808080;
+    --ck-color-deny-hover: var(--deny-color);
+    --ck-color-txt: #ffffff;
+    --ck-color-txt-hover: #ffffff;
+
+    /* Cookies list settings */
+    --ck-bgcolor-list: #e4e4e4;
+    --ck-font-family-list: var(--text-font);
+    --ck-font-size-list: var(--text-size);
+    --ck-color-list: #000000;
+    --ck-color-title: var(--secondary-color);
+
+    /* Scroll bar */
+    --ck-scroll-bgcolor: var(--primary-color);
+    --ck-scroll-barcolor: var(--secondary-color);
+}
+/* FIN DU PARAMETRAGE */
+
+
+
+
+
+
+
+
+
+
+/* MOBILE FIRST */
+#template{
+    display: none;
+}
+* {
+    box-sizing: border-box;
+}
+#ldcweb-cn.open-banner .ldcweb-cn-banner{
+    display: flex;
+}
+#ldcweb-cn.open-banner, #ldcweb-cn.open-modal{
+    display: flex;
+}
+#ldcweb-cn p, #ldcweb-cn a{
+    line-height: 1.2;
+    font-family: var(--ck-w1-font-family-txt);
+    font-size: var(--ck-w1-font-size-txt);
+    color: var(--ck-w1-color-txt);
+}
+#ldcweb-cn a{
+    text-decoration: underline;
+    transition: 0s;
+}
+#ldcweb-cn .ldcweb-cn-banner, #ldcweb-cn-modal .modal-wrapper{
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+#ldcweb-cn .ldcweb-cn-banner{
+    padding: 0;
+    margin: 0;
+    padding-top: 20px;
+    background-color: var(--ck-bg-color);
+    flex-direction: column;
+    justify-content: flex-end;
+    position: fixed;
+    left: var(--ldcweb-cn-animation-left);
+    right: var(--ldcweb-cn-animation-right);
+    bottom: calc(var(--ldcweb-cn-position-bottom) + 60px);
+    width: 475px;
+    height: auto;
+    max-height: 80vh;
+    border-radius: 10px;
+    z-index: var(--ldcweb-cn-z-index);
+    line-height: initial;
+    overflow: hidden;
+    box-shadow: var(--shadow-color);
+    user-select: none;
+    opacity: 0;
+    visibility: hidden;
+    transition: .3s;
+}
+#ldcweb-cn .ldcweb-cn-banner-open{
+    left: var(--ldcweb-cn-position-left);
+    right: var(--ldcweb-cn-position-right);
+    opacity: 1;
+    visibility: visible;
+}
+.ldcweb-banner-content, .ldcweb-banner-details{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 0px 20px 0px 20px;
+}
+.ldcweb-banner-details{
+    height: 0;
+    transition: .3s;
+    text-align: justify;
+    overflow: hidden;
+    align-items: flex-start;
+}
+.ldcweb-banner-details-open{
+    margin-bottom: 6px;
+}
+#ldcweb-cn .ldcweb-banner-img{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+    width: 150px;
+    padding-right: 20px;
+}
+#ldcweb-cn .ldcweb-banner-img img{
+    width: 100%;
+}
+#ldcweb-cn .ldcweb-banner-text{
+    flex: 2;
+}
+#ldcweb-cn .ldcweb-banner-title p{
+    font-family: var(--ck-w1-font-family-title);
+    font-size: var(--ck-w1-font-size-title);
+    font-weight: bold;
+    color: var(--ck-w1-color-title);
+    text-align: left;
+}
+#ldcweb-cn .ldcweb-banner-para-p{
+    text-align: justify;
+    margin-bottom: 6px;
+}
+#ldcweb-cn .ldcweb-banner-btnDetails{
+    width: 100%;
+    margin: 0 0 20px 0;
+}
+#ldcweb-cn .ldcweb-banner-btnDetails-p{
+    cursor: pointer;
+    color: var(--secondary-color);
+    width: fit-content;
+    margin: 0 auto;
+    text-align: center;
+}
+#ldcweb-cn .ldcweb-banner-btns{
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex{
+    width: 66.5%;
+    border-top: 1px solid grey;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+.ldcweb-banner-btn-personalize{
+    width: 33.5%;
+    border-top: 1px solid gray;
+}
+#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex div{
+    width: 50%;
+}
+.ldcweb-banner-btn-accept{
+    border-left: 1px solid gray;
+    border-right: 1px solid gray;
+}
+#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex .ldcweb-cn-accept{
+    font-weight: bolder;
+    color: var(--secondary-color);
+}
+#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btns-btn {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+    height: 50px;
+    background-color: var(--background-color);
+    text-decoration: none;
+    font-family: var(--ck-w1-font-family-btn-txt);
+    font-size: var(--ck-w1-font-size-btn-txt);
+    color: var(--primary-color);
+}
+#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btns-btn:hover{
+    color: var(--ck-w1-color-btn-txt-hover);
+    background-color: var(--ck-w1-color-btn-hover);
+}
+.ldcweb-btn{
+    position: fixed;
+    left: var(--ldcweb-cn-position-left);
+    right: var(--ldcweb-cn-position-right);
+    bottom: var(--ldcweb-cn-position-bottom);
+    z-index: var(--ldcweb-cn-z-index);
+    background-color: white;
+    padding: 8px;
+    border-radius: 100%;
+    cursor: pointer;
+    box-shadow: var(--shadow-color);
+    width: 50px;
+    height: 50px;
+}
+.ldcweb-btn-icon path {
+    fill: var(--secondary-color);
+}
+.ldcweb-btn-icon circle {
+    fill: var(--secondary-color);
+}
+.visibility{
+    display: none !important;
+}
+
+/* MODAL */
+#ldcweb-cn-modal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    z-index: 200;
+    opacity: 1;
+}
+#ldcweb-cn-modal .modal-wrapper{
+    position: relative;
+    max-height: 100vh;
+}
+#ldcweb-cn-modal .modal-wrapper > div:not(:first-of-type){
+    width: 100%;
+    align-items: flex-end;
+}
+#ldcweb-cn-modal .modal-title{
+    padding: 0px 20px 0px 20px;
+}
+#ldcweb-cn-modal .modal-title *{
+    text-align: justify;
+    margin: 0;
+}
+#ldcweb-cn-modal .modal-title .description, #ldcweb-cn-modal .modal-btns{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-weight: normal;
+    line-height: initial;
+}
+#ldcweb-cn-modal .modal-title .description, #ldcweb-cn-modal .modal-btns p, #ldcweb-cn-modal .modal-btns a, #ldcweb-cn-modal .modal-title > .subTitle{
+    font-family: var(--ck-w2-font-family-txt);
+    font-size: var(--ck-w2-font-size-txt);
+    color: var(--ck-w2-color-txt);
+}
+/* TITLE */
+#ldcweb-cn-modal .modal-title .title{
+    font-family: var(--ck-w2-font-family-title);
+    font-size: var(--ck-w2-font-size-title);
+    font-weight: bold;
+    color: var(--ck-w2-color-title);
+}
+#ldcweb-cn-modal .modal-title > .subTitle{
+    color: var(--ck-w2-color-title);
+    margin-bottom: 6px;
+}
+#ldcweb-cn-modal .modal-title .title, #ldcweb-cn-modal .modal-title > .subTitle{
+    text-align: center;
+}
+#ldcweb-cn-modal .modal-title a{width: fit-content;}
+
+/* DETAILS */
+#ldcweb-cn-modal .modal-details{
+    width: 100%;
+    height: 153px;
+    overflow-y: auto;
+    margin: 6px 0;
+}
+#ldcweb-cn-modal .modal-details ul{
+    display: flex;
+    flex-direction: column;
+    padding: 0 20px;
+    list-style: none;
+}
+#ldcweb-cn-modal .modal-details li > div{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px 0;
+    padding: 20px;
+    border-radius: 20px;
+    border: 1px solid var(--ck-bgcolor-list);
+}
+#ldcweb-cn-modal .modal-details li span,
+#ldcweb-cn-modal .modal-details li a,
+#ldcweb-cn-modal .modal-details li label{
+    font-family: var(--ck-font-family-list);
+    font-size: var(--ck-font-size-list);
+    color: var(--ck-color-list);
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-name{
+    color: var(--ck-color-title);
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-infos{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-infos span:first-of-type{
+    font-size: calc(var(--ck-font-size-list) * 1.25);
+    font-weight: bold;
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-infos .ldcweb-cn-description{
+    color: var(--ck-w2-color-txt);
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-infos a{width: fit-content;}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons{
+    display: flex;
+    justify-content: space-around;
+    width: 200px;
+    margin-top: 6px;
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type,
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type{
+    transition: all .3s;
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type{
+    background: var(--ck-color-accept);
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type{
+    background: var(--ck-color-deny);
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div{
+    display: table;
+    text-align: center;
+    margin: .5em;
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type input:checked ~ label,
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type input ~label.active{
+    background-color: var(--ck-color-deny-hover);
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type input:checked ~ label,
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type input ~ label.active{
+    background-color: var(--ck-color-accept-hover);
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons input{display: none;}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons label{
+    width: 100px;
+    display: block;
+    color: var(--ck-color-txt);
+    transition: color .3s;
+    padding: 6px 20px;
+    cursor: pointer;
+}
+
+/* MEDIA QUERIES */
+@media (max-width: 535px) {
+    .ldcweb-banner-content, #ldcweb-cn .ldcweb-banner-btns{
+        flex-direction: column;
+    }
+    #ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex, #ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-personalize{
+        width: 100%;
+    }
+    #ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex .ldcweb-banner-btn-deny,
+    #ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex .ldcweb-banner-btn-accept{
+        width: 50%;
+    }
+    .ldcweb-banner-btn-accept{
+        border-left: 1px solid gray;
+        border-right: none;
+    }
+    #ldcweb-cn .ldcweb-cn-banner{
+        left: 0;
+        bottom: 0;
+    }
+    #ldcweb-cn .ldcweb-cn-banner{
+        width: 100%;
+        max-height: 100vh;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    .ldcweb-banner-details-open {
+        height: 0;
+    }
+    #ldcweb-cn .ldcweb-banner-title p{
+        text-align: center;
+    }
+    #ldcweb-cn .ldcweb-banner-img{
+        padding: 0 0 20px 0;
+    }
+}

resources/front/sass/basic.scss

@@ -0,0 +1,2 @@
+@import '../css/cookies-ldc.css';
+@import 'styles';

resources/front/sass/common.scss

@@ -0,0 +1,377 @@
+
+:root {
+  --container: 80%;
+  --header-height: 35vw;
+}
+html, body {font-size: $base-font-size;}
+body {
+  position: relative;
+  background-color: $blanc;
+  font-family: "Raleway-Heavy", sans-serif;
+  color: $noir;
+  overflow-x: hidden;
+
+  &.mobile-nav-active {overflow-y: hidden;}
+}
+.flex{display: flex;}
+.grid{display: grid;}
+p, a, li, span, strong, input, label{
+  // font-family: "Raleway-Heavy", sans-serif;
+  font-size: 3rem;
+  line-height: 3.2rem;
+  color: $noir;
+}
+header, footer{
+  a, p{
+    font-size: 6rem;
+    line-height: 6.6rem;
+  }
+  span, input{
+    font-size: 3rem;
+    line-height: 3.3rem;
+  }
+  .rest-in-game > div div:first-child span{
+    font-size: 4rem;
+    line-height: 4rem;
+  }
+}
+// footer a{
+//   font-size: 3rem;
+//   line-height: 3.3rem;
+// }
+// footer .footer--legals a{
+//   font-size: 2.5rem;
+//   line-height: 2.7rem;
+// }
+.floating{
+  margin: 0;
+  min-height: 100vh;
+  grid-template-rows: var(--header-height) min-content repeat(2, auto);
+  grid-template-columns: 100%;
+  overflow-x: hidden;
+}
+strong{font-weight: bold;}
+.underlined{text-decoration: underline;}
+p{ margin: 5px 0;}
+a{
+  text-decoration: none;
+  transition: color .5s;
+
+  &:hover{color: $tertiary;}
+}
+
+.veneer{
+    font-family: "Veneer", Arial, Helvetica, sans-serif;
+}
+
+.raleway {
+    font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+}
+
+.main-btn a{
+  font-size: 6rem;
+  color: $blanc;
+  text-transform: uppercase;
+  border-radius: 5px;
+  background-color: $secondary;
+  padding: 5px 20px;
+  transition: background-color .5s;
+
+  &:hover{background-color: $primary;}
+}
+
+.tertiary-btn{
+    margin: 1rem;
+    text-align: end;
+    a {
+        font-size: 1rem;
+        background-color: $tertiary;
+        color: $text_color;
+        &:hover{
+            background-color: $text_color;
+            color: $tertiary;
+        }
+    }
+}
+
+.post-title, h1{
+  font-size: 6.5rem;
+}
+.post-chapter, h2{
+  font-size: 5.5rem;
+}
+
+// .post-title {
+//   font-family: 'Open Sans', arial;
+//   font-size: 25px;
+//   font-weight: bold;
+//   color: $rouge;
+//   padding: 20px 0;
+// }
+// .post-subtitle {
+//   font-family: 'Open Sans', arial;
+//   font-size: 25px;
+//   font-weight: bold;
+//   color: $rouge;
+//   padding: 20px 0;
+// }
+// .post-chapter {
+//   font-family: 'Open Sans', arial;
+//   font-size: 25px;
+//   font-weight: bold;
+//   color: $rouge;
+//   padding: 20px 0;
+// }
+section {padding: 30px 0;}
+// .container {
+//   padding-left: 10px;
+//   padding-right: 10px;
+// }
+// .reveal {
+//   opacity: 0;
+// }
+// .reveal-visible{
+//   opacity: 1;
+// }
+
+.sc__inner {
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.sc__wrapper {
+  display: block;
+  width: 100%;
+  margin: 40vw auto 5vw;
+}
+
+.sc__container {
+  position: relative;
+  overflow: hidden;
+  height: 175px;
+  max-width: 280px;
+  margin: 1vw auto;
+}
+
+.sc__container > img {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 100%;
+  height: fit-content;
+}
+
+.sc__container canvas {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 100%;
+  height: -webkit-fill-available;
+}
+
+.sc__infos {
+  text-align: center;
+  height: 40px;
+  line-height: 40px;
+  margin-top: 5px;
+  font-weight: bold;
+  font-size: 18px;
+}
+.alert-danger{
+  li{color: $secondary;}
+}
+.alert-success{
+  margin: 0 10vw;
+  color: $primary;
+
+  p{color: $primary;}
+}
+// *************************
+// **                     **
+// *************************
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          *******
+
+@media only screen and (min-width:768px) {
+  :root{
+    // --container: 600px;
+    --header-height: 13.5vw;
+  }
+  .post-title, h1{
+    font-size: 4rem;
+  }
+  .post-chapter, h2{
+    font-size: 3rem;
+  }
+  p, a, li, span, strong, label{
+    font-size: 1.5rem;
+    line-height: 2.2rem;
+  }
+  header, footer{
+    a, span, p, input{
+      font-size: 2rem;
+      line-height: 2.2rem;
+    }
+    // span, p, input{
+    //   font-size: 2rem;
+    //   line-height: 2.2rem;
+    // }
+    .rest-in-game > div div:first-child span{
+      font-size: 1.9rem;
+      line-height: 1.9rem;
+    }
+  }
+  footer .footer--legals a{
+    font-size: 1.5rem;
+    line-height: 1.7rem;
+  }
+  .sc__wrapper {
+    // height: 300px;
+    // max-width: 300px;
+    margin: 5vw auto;
+    // border: 5px solid white;
+  }
+  .sc__container {
+    height: 349px;
+    max-width: 568px;
+  }
+
+  // .container {
+  //   padding-left: calc(50% - var(--container) / 2);
+  //   padding-right: calc(50% - var(--container) / 2);
+  // }
+  section {padding: 30px 10px;}
+
+}
+
+// ****
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// ****
+@media only screen and (min-width: 1024px) {
+  :root{
+    // --container: 800px;
+    --header-height: 12.5vw;
+  }
+
+  p, a, li, span, strong, label{
+    font-size: 1rem;
+    line-height: 1.2rem;
+  }
+  .main-btn a{font-size: 3rem;}
+  .tertiary-btn a {font-size: 1.5rem;}
+  section {padding: 30px 40px;}
+}
+
+//    ********
+//  *  *****  *
+// *  *     *   *
+// ***        *  *
+//           *  *
+//          *  *
+//         *  *
+//        *  *
+//       *  *
+//      *  *
+//     *  *
+//    *  *
+//   *  *
+//  *  *
+// *  *
+// *  **************
+// *               *
+// *****************
+@media only screen and (min-width: 1440px) {
+  :root{
+    // --container: 800px;
+    --header-height: 8.5vw;
+  }
+
+  p, a, li, span, strong, label{
+    font-size: 1rem;
+    line-height: 1.2rem;
+  }
+  header, footer{
+    a, span, p, input{
+      font-size: 1.5rem;
+      line-height: 1.4rem;
+    }
+    // span, p, input{
+    //   font-size: 1rem;
+    //   line-height: 1.2rem;
+    // }
+    .rest-in-game > div div:first-child span{
+      font-size: 1.5rem;
+      line-height: 1.5rem;
+    }
+  }
+  footer .footer--legals a{
+    font-size: 1rem;
+    line-height: 1.2rem;
+  }
+
+}
+
+//  ************
+//  *          ****
+//  *********      *
+//          *****  *
+//            **   *
+//           **   *
+//  **********   *
+//  *            *
+//  *********     *
+//          *****  *
+//            **   *
+//           **    *
+//  **********    *
+//  *          ***
+//  ************
+@media only screen and (min-width: 1920px) {
+  :root{
+    // --container: 800px;
+    --header-height: 7vw;
+  }
+
+  p, a, li, span, strong{
+    font-size: 1rem;
+    line-height: 1.2rem;
+  }
+  // header, footer{
+  //   a{
+  //     font-size: 1rem;
+  //     line-height: 1.2rem;
+  //   }
+  // }
+}
+
+// @media (prefers-reduced-motion: reduce) {
+//   [class*="reveal-"] {
+//     opacity: 1!important;
+//     transform: translateY(0px);
+//   }
+//   .reveal-visible{
+//     transition-duration: 0s!important;
+//     transition-delay: 0s!important;
+//   }
+// }

resources/front/sass/congratulate.scss

@@ -0,0 +1,256 @@
+.congratulate.floating{
+    grid-template-rows: var(--header-height) auto;
+}
+.congratulate{
+    //background: repeat url(~@/images/bg-paper.jpg);
+    .main-btn a {
+        font-size: 3rem;
+    }
+
+    .main--bloc{display: none;}
+    .desktop--menu{display: none;}
+    .post-title, .sc__wrapper .post-title{
+        font-size: 6.5rem;
+        text-transform: uppercase;
+    }
+    .post-title{
+        color: $blanc;
+        margin-bottom: 20px;
+    }
+    .sc__wrapper .post-title{
+        text-align: center;
+        color: $secondary;
+    }
+
+    p, p.strong{
+        font-size: 4.5rem;
+        line-height: 4.5rem;
+        color: $blanc;
+    }
+    .main--bloc{
+        padding: 0;
+    }
+    .title--bloc{
+        position: relative;
+        background-position: center center;
+        background-size: cover;
+        padding: var(--header-height) 0;
+        text-align: center;
+
+        .title--txt{
+            position: absolute;
+            left: 50%; bottom: 4vw;
+            transform: translateX(-50%);
+            width: 75%;
+            z-index: 1;
+
+            p{font-family: "Raleway-Medium", Arial, Helvetica, sans-serif;}
+        }
+        .bg-opacity {
+            position: absolute;
+            left: 0; right: 0;
+            top: 0; bottom: 0;
+            background-color: hsla(0, 100%, 0%, .5);
+        }
+    }
+    .mobile--menu .title--txt .main-btn{margin: 8vw 0;}
+    .title--bloc.view-lot1{background-image: url(~@/images/view-lot1.png);}
+    .title--bloc.view-lot2{background-image: url(~@/images/view-lot2.png);}
+    .title--bloc.view-br{background-image: url(~@/images/view-br.jpg);}
+    .play--bloc{
+        margin: 4vw 0;
+        text-align: center;
+
+        p.strong{
+            font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+            color: $blanc;
+        }
+        .main-btn{
+            margin: 10vw 0 22vw;
+            text-align: center;
+        }
+    }
+    .mobile--menu .title--txt .main-btn a,
+    .play--bloc .main-btn a{
+        background-color: $secondary;
+        transition: background-color .5s;
+
+        &:hover{background-color: $tertiary;}
+    }
+}
+
+.instructions {
+    .adress {
+        font-weight: bold;
+    }
+}
+
+// *************************
+// **                     **
+// *************************
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          *******
+
+@media only screen and (min-width:768px) {
+    .congratulate.floating{
+        grid-template-rows: var(--header-height) auto;
+    }
+    .congratulate{
+
+        .post-title, .sc__wrapper .post-title{
+            font-size: 4rem;
+        }
+        .title--bloc{
+            padding: 37vw 0;
+        }
+    }
+}
+
+// ****
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// ****
+
+@media only screen and (min-width:1024px) {
+    .congratulate{
+        .main-btn a {
+            font-size: 2rem;
+        }
+        .mobile--menu{display: none;}
+        .desktop--menu{
+            position: relative;
+            display: flex;
+            height: calc(90vh - var(--header-height) * 2);
+            min-height: 40vw;
+            overflow: hidden;
+
+            .post-title::after{
+                content: "";
+                display: block;
+                width: 25%; height: 3px;
+                background-color: $primary;
+                margin: 2vw 0;
+            }
+            .img--bloc{
+                width: 50%; height: 100%;
+                background-position: center center;
+                background-size: cover;
+            }
+            .img--bloc.view-lot1{
+                background-image: url(~@/images/view-lot1.png);
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position-x: center;
+            }
+            .img--bloc.view-lot2{
+                background-image: url(~@/images/view-lot2.png);
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position-x: center;
+            }
+            .img--bloc.view-br{
+                background-image: url(~@/images/large_br.png);
+                background-size: auto;
+                background-repeat: no-repeat
+            }
+            .txt--bloc{
+                position: absolute;
+                left: 48%; top: 4vw;
+                width: 70%; height: 100%;
+                background-color: $tertiary;
+                transform: rotate(-5deg);
+            }
+            .bloc--rotate{
+                padding: 6vw 40% 4vw 4vw;
+                transform: rotate(5deg);
+
+                p.strong{
+                    color: $secondary;
+                    margin: 2vw 0;
+                }
+                .main-btn{
+                    margin: 2vw 0;
+
+                    a{
+                        color: $tertiary;
+                        background-color: $blanc;
+                        transition: all .5s;
+
+                        &:hover{
+                            color: $blanc;
+                            background-color: $secondary;
+                        }
+                    }
+                }
+            }
+        }
+        p, p.strong{
+            font-size: 1.5rem;
+            line-height: 2.2rem;
+        }
+    }
+    .congratulate.gain1{
+        .desktop--menu{
+            .txt--bloc{
+                background-color: $secondary;
+            }
+        }
+    }
+}
+
+//    ********
+//  *  *****  *
+// *  *     *   *
+// ***        *  *
+//           *  *
+//          *  *
+//         *  *
+//        *  *
+//       *  *
+//      *  *
+//     *  *
+//    *  *
+//   *  *
+//  *  *
+// *  *
+// *  **************
+// *               *
+// *****************
+@media only screen and (min-width: 1440px) {
+
+}
+
+//  ************
+//  *          ****
+//  *********      *
+//          *****  *
+//            **   *
+//           **   *
+//  **********   *
+//  *            *
+//  *********     *
+//          *****  *
+//            **   *
+//           **    *
+//  **********    *
+//  *          ***
+//  ************
+@media only screen and (min-width: 1920px) {
+
+}

resources/front/sass/connect.scss

@@ -0,0 +1,732 @@
+// :root {
+//     --bg-color: $blanc;
+// }
+.floating {
+    min-height: unset;
+    grid-template-rows: var(--header-height) auto;
+}
+.fancybox-container form,
+.register form,
+.desktop-menu form,
+.code form,
+.code--edit,
+#lost_edit,
+.result {
+    flex-direction: column;
+}
+.connect,
+.register,
+.fancybox-container,
+.discover,
+.code {
+    //background: repeat url(~@/images/bg-paper.jpg);
+
+    .title-inscription1 {
+        text-align: center;
+        margin-bottom: 40px;
+    }
+    .post-title,
+    .post-chapter {
+        font-size: 6.5rem;
+        color: $secondary;
+        // text-align: center;
+        margin-bottom: 20px;
+        text-transform: uppercase;
+    }
+    input,
+    select {
+        border: none;
+        background-color: $rose;
+        padding: 10px;
+        margin: 10px 0;
+    }
+    input,
+    input::placeholder,
+    select {
+        font-size: 3.5rem;
+        color: $secondary;
+        font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+    }
+    p,
+    span,
+    label {
+        color: $noir;
+    }
+    p {
+        font-family: "Raleway-Medium", Arial, Helvetica, sans-serif;
+        font-size: 3.5rem;
+        line-height: 4rem;
+    }
+    .main--bloc {
+        text-align: center;
+        margin-bottom: 10vw;
+    }
+    // .main--bloc > div > div:first-child::after{
+    //     content: "";
+    //     position: relative;
+    //     bottom: -5vw;
+    //     width: 55rem; height: 3px;
+    //     background-color: $primary;
+    //     margin: 0 auto;
+    // }
+    .mobile-menu,
+    .signup--bloc,
+    .connect--bloc,
+    .edit--blocs {
+        flex-direction: column;
+    }
+    .signup--bloc,
+    .connect--bloc {
+        margin: 0 10vw;
+        padding: 7vw 0;
+        text-align: center;
+
+        p {
+            margin: 4vw 0;
+        }
+    }
+    .edit--blocs h2 {
+        font-size: 100%;
+    }
+    .desktop-menu {
+        display: none;
+    }
+    .mobile-menu {
+        .signup--bloc {
+            border-bottom: 3px solid $secondary;
+            p {
+                margin: 4vw 0 0;
+            }
+        }
+        .btn-connect {
+            a {
+                padding: 15px;
+                border-radius: 10px;
+                font-size: 6rem;
+                line-height: 6.6rem;
+                min-width: 50rem;
+                text-align: center;
+                color: #ffffff;
+                text-transform: uppercase;
+                margin: 0 auto;
+                background-color: $secondary; //radial-gradient(circle farthest-corner at 25% 90%, #54af7d, #024E2A);
+
+                &:hover {
+                    background-color: $tertiary; //radial-gradient(circle closest-corner at 25% 90% ,#54af7d, #024E2A);
+                }
+            }
+        }
+    }
+    .desktop-menu {
+        .btn-connect {
+            margin: 0 auto;
+        }
+        .btn-connect a,
+        input.btn {
+            font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+            font-size: 4rem;
+            color: $blanc;
+            text-transform: uppercase;
+            border-radius: 5px;
+            background-color: $secondary;
+            padding: 0.2em 0.5em;
+            margin-top: 2rem;
+            width: 8em;
+            text-align: center;
+            transition: background-color 0.5s;
+
+            &:hover {
+                background-color: $tertiary;
+            }
+        }
+        .btn-connect a {
+            padding: 0.7em 0.5em;
+        }
+    }
+}
+#connect_edit,
+#lost_edit {
+    width: 80%;
+    //background: repeat url(~@/images/bg-paper.jpg);
+
+    form {
+        flex-direction: column;
+    }
+    .edit--blocs {
+        position: relative;
+    }
+    input {
+        width: 100%;
+    }
+    .btn,
+    a,
+    span {
+        font-family: "Raleway-Medium", Arial, Helvetica, sans-serif;
+    }
+    .btn {
+        width: min-content;
+        padding: 10px 20px;
+        margin: 8vw 0 0;
+        border-radius: 5px;
+        background-color: $tertiary;
+        color: $blanc;
+        text-transform: uppercase;
+        transition: background-color 0.5s;
+
+        &:hover {
+            background-color: $secondary;
+        }
+    }
+    p {
+        margin: 1.5vw 0;
+    }
+    a,
+    span {
+        font-size: 2.2rem;
+        position: absolute;
+        right: 0;
+    }
+    a {
+        bottom: -2vw;
+        color: $secondary;
+        font-weight: bold;
+    }
+    span {
+        bottom: -5vw;
+        color: $noir;
+        font-style: italic;
+    }
+    .fancybox-close-small {
+        background-color: black;
+        padding: 0;
+        width: 22px;
+        height: 22px;
+    }
+}
+#lost_edit {
+    margin: 2vw auto;
+
+    .btn {
+        margin: 2vw auto;
+        padding: 10px 30px;
+    }
+}
+.register {
+    .main--bloc {
+        margin: 0 3vw;
+    }
+    .form-inscription1 {
+        a,
+        span,
+        label {
+            font-size: 2.5rem;
+            line-height: 2.7rem;
+        }
+        .birthField {
+            justify-content: center;
+            align-items: center;
+
+            & select:nth-child(odd) {
+                flex: 1;
+            }
+        }
+        .check-holder {
+            align-items: center;
+
+            input[type="checkbox"] {
+                // width: 2rem;
+                // height: 2rem;
+                margin: 1rem 0.5rem 1rem 0;
+
+                // &:checked{
+                //     background-color: red;
+                //     color: green;
+                //     width: 4rem;
+                //     height: 4rem;
+                // }
+            }
+            // label{
+            //     font-size: 3rem;
+            //     line-height: 3.2rem;
+
+            a {
+                color: $noir;
+                transition: color 0.5s;
+
+                &:hover {
+                    color: $secondary;
+                }
+            }
+            // }
+        }
+        .check-holder:last-child {
+            margin-bottom: 5vw;
+        }
+        .btn-form {
+            margin-top: 5vw;
+        }
+        .btn-form .btn {
+            font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+            font-size: 4rem;
+            color: $blanc;
+            text-transform: uppercase;
+            border: none;
+            border-radius: 5px;
+            background-color: $secondary;
+            padding: 0.5em 0.5em;
+            margin: 2rem 0;
+            min-width: 7em;
+            text-align: center;
+            transition: background-color 0.5s;
+
+            &:hover {
+                background-color: $tertiary;
+            }
+        }
+    }
+}
+.activate {
+    //background: repeat url(~@/images/bg-paper.jpg);
+
+    .result {
+        min-height: 50vh;
+        align-items: center;
+        margin: 4vw auto;
+
+        .post-title {
+            margin-bottom: 2vw;
+            color: $secondary;
+        }
+        .main-btn {
+            margin: 4vw;
+        }
+    }
+}
+.code {
+    .main--bloc {
+        margin: 0 15vw 10vw;
+    }
+    .edit-code {
+        // grid-template-rows: repeat(4, 1fr);
+        grid-template-areas:
+            "title"
+            "pre-txt"
+            "post-txt"
+            "img"
+            "form";
+        text-align: center;
+
+        .post-title {
+            grid-area: title;
+        }
+        p.pre--text {
+            grid-area: pre-txt;
+        }
+        p.post--text {
+            grid-area: post-txt;
+        }
+        .code--img {
+            grid-area: img;
+        }
+        form {
+            grid-area: form;
+        }
+        .code--img {
+            position: relative;
+            width: 30vw;
+            margin: 2vw 0;
+
+            &::after {
+                content: "";
+                position: absolute;
+                height: 50%;
+                width: 50%;
+                right: 0;
+                bottom: 0;
+                transform: translateX(100%);
+                background: no-repeat url(~@/images/arrow-code.png);
+                background-size: contain;
+            }
+            img {
+                width: 100%;
+                max-width: 130px;
+            }
+        }
+        .code--edit {
+            margin: 0 8vw;
+        }
+        form input {
+            margin: 2vw 0;
+        }
+        form span {
+            text-align: right;
+        }
+        form .btn {
+            font-size: 4rem;
+            color: $blanc;
+            text-transform: uppercase;
+            border: none;
+            border-radius: 5px;
+            background-color: $secondary;
+            padding: 0.7em 0.5em;
+            margin: 2vw auto;
+            min-width: 7em;
+            text-align: center;
+            transition: background-color 0.5s;
+
+            &:hover {
+                background-color: $tertiary;
+            }
+        }
+    }
+}
+// .discover {
+//     .main--bloc{
+//         margin: 5vw;
+//         .code--img{
+//             max-width:250px;
+//             margin: 4vw auto;
+//         }
+//         .code--img img{width: 100%;}
+//     }
+// }
+//
+
+@media only screen and (min-width: 480px) {
+}
+
+// *************************
+// **                     **
+// *************************
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          *******
+
+@media only screen and (min-width: 768px) {
+    .connect,
+    .register,
+    .fancybox-container,
+    .discover,
+    .code {
+        .post-title,
+        .post-chapter {
+            font-size: 4rem;
+        }
+        input,
+        input::placeholder,
+        select {
+            font-size: 1.5rem;
+        }
+        p,
+        span,
+        strong {
+            font-size: 1.5rem;
+            line-height: 2.2rem;
+        }
+        .main--bloc {
+            margin-bottom: 2vw;
+        }
+        .mobile-menu {
+            .btn-connect {
+                a {
+                    font-size: 6rem;
+                    line-height: 6.6rem;
+                }
+            }
+        }
+        .desktop-menu {
+            .btn-connect a,
+            input.btn {
+                font-size: 2rem;
+            }
+        }
+    }
+    .connect {
+        .mobile-menu {
+            display: none;
+        }
+        .desktop-menu {
+            display: flex;
+
+            & > div {
+                flex: 1;
+            }
+        }
+        a {
+            color: $secondary;
+            transition: color 0.5s;
+
+            &:hover {
+                color: $tertiary;
+            }
+        }
+        // .main--bloc > div > div:first-child::after{
+        //     content: unset;
+        // }
+        .signup--bloc,
+        .connect--bloc {
+            margin: 2.5vw 0;
+            padding: 0 6vw;
+        }
+        .signup--bloc {
+            text-align: right;
+            border-right: 3px solid $secondary;
+        }
+        .signup--bloc .btn-connect {
+            justify-content: flex-end;
+        }
+        .connect--bloc {
+            text-align: left;
+
+            input {
+                width: 100%;
+            }
+            .edit--blocs {
+                align-items: flex-end;
+            }
+        }
+        p {
+            margin: 2vw 0;
+        }
+    }
+    #lost_edit {
+        width: 50%;
+    }
+    #connect_edit,
+    #lost_edit {
+        a,
+        p,
+        span {
+            font-size: 2.2rem;
+        }
+    }
+    .register {
+        .main--bloc {
+            margin: 2vw 15vw;
+        }
+        .form-inscription1 {
+            .check-holder:last-child {
+                margin-bottom: 2vw;
+            }
+            .btn-form {
+                margin-top: 2vw;
+            }
+            label,
+            a,
+            span {
+                font-size: 1.5rem;
+                line-height: 1.7rem;
+            }
+            .btn-form .btn {
+                font-size: 2rem;
+            }
+        }
+    }
+    .code {
+        .main--bloc {
+            margin: 2vw 25vw 10vw;
+        }
+        .edit-code {
+            position: relative;
+            .code--img {
+                position: absolute;
+                left: calc(-130px - 2vw);
+                top: calc(50% - 130px);
+                transform: translateY(-20%);
+                width: 130px;
+                height: 130px;
+                margin: 0;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    height: 80px;
+                    width: 60px;
+                    right: -50px;
+                    bottom: unset;
+                    top: 95px;
+                    transform: rotateZ(277deg) scaleX(-1);
+                    background: no-repeat url(~@/images/arrow-code.png);
+                    background-size: contain;
+                }
+            }
+            form .btn {
+                font-size: 2rem;
+                padding: 0.2em;
+            }
+        }
+    }
+    // .discover{
+    //     .main--bloc{
+    //         margin: 2vw 25vw;
+    //         .code--img{max-width:500px;}
+    //     }
+    // }
+}
+
+// ****
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// ****
+@media only screen and (min-width: 1024px) {
+    // .connect, .register, .fancybox-container{
+    //     .post-title, .post-chapter{
+    //         font-size: 4rem;
+    //     }
+    //     input, input::placeholder, select{
+    //         font-size: 1.5rem;
+    //     }
+    //     p{
+    //         font-size: 1.5rem;
+    //         line-height: 2.2rem;
+    //     }
+    //     .mobile-menu{
+
+    //         .btn-connect{
+
+    //             a{
+    //                 font-size: 6rem;
+    //                 line-height: 6.6rem;
+    //             }
+    //         }
+    //     }
+    //     .desktop-menu{
+
+    //         .btn-connect a, input.btn{
+    //             font-size: 2rem;
+    //         }
+
+    //     }
+    // }
+    // .connect{
+
+    //     .signup--bloc{text-align: right;}
+    //     .connect--bloc{text-align: left;}
+    //     // .signup--bloc, .connect--bloc{margin: 2.5vw 6vw;}
+    //     p{margin: 2vw 0 ;}
+    // }
+    // #connect_edit{
+
+    //     a, span{
+    //         font-size: 2.2rem;
+    //     }
+    // }
+    // .register{
+
+    //     .form-inscription1{
+
+    //         // .birthField{
+    //         //     justify-content: center;
+    //         //     align-items: center;
+
+    //         //     & select:nth-child(odd){
+    //         //         flex: 1;
+    //         //     }
+    //         // }
+    //         .check-holder{
+
+    //             // input[type=checkbox]{
+    //             //     width: 2rem;
+    //             //     height: 2rem;
+    //             // }
+    //             label{
+    //                 font-size: 3rem;
+    //                 line-height: 3.2rem;
+
+    //                 // a{
+    //                 //     color: $noir;
+    //                 //     transition: color .5s;
+
+    //                 //     &:hover{color: $secondary;}
+    //                 // }
+    //             }
+    //         }
+    //         .btn-form .btn{
+    //             font-size: 4rem;
+    //         }
+    //     }
+    // }
+}
+
+//    ********
+//  *  *****  *
+// *  *     *   *
+// ***        *  *
+//           *  *
+//          *  *
+//         *  *
+//        *  *
+//       *  *
+//      *  *
+//     *  *
+//    *  *
+//   *  *
+//  *  *
+// *  *
+// *  **************
+// *               *
+// *****************
+@media only screen and (min-width: 1440px) {
+    .register {
+        .form-inscription1 {
+            a,
+            span,
+            label {
+                font-size: 1rem;
+                line-height: 1.2rem;
+            }
+        }
+    }
+    .code {
+        .edit-code {
+            .code--img {
+                left: calc(-230px - 2vw);
+                top: calc(50% - 230px);
+                transform: translateY(-10%);
+                width: 230px;
+                height: 230px;
+
+                &::after {
+                    right: -25px;
+                    top: 170px;
+                }
+                img {
+                    max-width: 230px;
+                }
+            }
+        }
+    }
+}
+
+//  ************
+//  *          ****
+//  *********      *
+//          *****  *
+//            **   *
+//           **   *
+//  **********   *
+//  *            *
+//  *********     *
+//          *****  *
+//            **   *
+//           **    *
+//  **********    *
+//  *          ***
+//  ************
+@media only screen and (min-width: 1920px) {
+}

resources/front/sass/faq.scss

@@ -0,0 +1,147 @@
+.faq{
+    //background: repeat url(~@/images/bg-paper.jpg);
+
+    section{padding: 2vw 3vw 10vw}
+    h1{
+        text-transform: uppercase;
+        text-align: center;
+        color: $tertiary;
+        margin: 2vw 0 4vw;
+    }
+    h2{
+        text-transform: uppercase;
+        color: $primary;
+        text-align: center;
+    }
+    h3{
+        font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+        font-size: 3em;
+        color: $primary;
+        text-align: center;
+        margin: 2vw 0 4vw;
+    }
+    .question {
+        color: $primary;
+        font-size: 3em;
+        font-family: "Raleway-Medium", Arial, Helvetica, sans-serif;
+        margin: 3vw auto;
+    }
+    .reponse {
+        color: unset;
+        font-size: 3em;
+        font-family: "Raleway-Medium", Arial, Helvetica, sans-serif;
+        margin: 3vw 3vw;
+    }
+    p{
+        font-family: "Raleway-Medium", Arial, Helvetica, sans-serif;
+        color: $noir;
+        text-align: center;
+
+        &::after{
+            content: "";
+            display: block;
+            width: 20%; height: 3px;
+            background-color: $primary;
+            margin: 3vw auto;
+        }
+    }
+}
+
+// *************************
+// **                     **
+// *************************
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          *******
+
+@media only screen and (min-width:768px) {
+    .faq{
+        h3{
+            font-size: 2em;
+        }
+        .question {
+            font-size: 2em;
+        }
+        .reponse {
+            font-size: 1.7em;
+        }
+    }
+}
+
+// ****
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// ****
+
+@media only screen and (min-width:1024px) {
+    .faq{
+        .reponse {
+            font-size: 1.5em;
+        }
+    }
+}
+
+//    ********
+//  *  *****  *
+// *  *     *   *
+// ***        *  *
+//           *  *
+//          *  *
+//         *  *
+//        *  *
+//       *  *
+//      *  *
+//     *  *
+//    *  *
+//   *  *
+//  *  *
+// *  *
+// *  **************
+// *               *
+// *****************
+@media only screen and (min-width: 1440px) {
+    .faq{
+        h3{
+            font-size: unset;
+        }
+        .question {
+            font-size: 2em;
+        }
+        .reponse {
+            font-size: 1em;
+        }
+    }
+}
+
+//  ************
+//  *          ****
+//  *********      *
+//          *****  *
+//            **   *
+//           **   *
+//  **********   *
+//  *            *
+//  *********     *
+//          *****  *
+//            **   *
+//           **    *
+//  **********    *
+//  *          ***
+//  ************
+@media only screen and (min-width: 1920px) {
+}

resources/front/sass/footer.scss

@@ -0,0 +1,262 @@
+footer{
+    position: relative;
+    // background: repeat url(~@/images/bg-tortoise-green.jpg);
+    // background-size: contain;
+    background-color: $primary;
+    padding-bottom: 40px;
+
+    .footer--frise{
+        position: absolute;
+        left: 0; top: -2.7vw;
+        width: 100%; height: 2.8vw;
+        //background-image: url(~@/images/frise.svg);
+        background-position: bottom center;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+    img{width: 100%}
+    .footer--logo{
+        position: absolute;
+        width: 35%;
+        right: 4vw; top: -6vw;
+        //transform: translateY(-30%);
+        font-family: "Raleway-Medium";
+        a {
+            &:hover {
+                &> span {
+                    color: $secondary;
+                }
+            }
+            &> span {
+                font-size: 1.2em;
+                position: absolute;
+                bottom: 6vw;
+                right: 4vw;
+                color: $text_color;
+            }
+        }
+    }
+    .footer--txt, .footer--share{flex-direction: column;}
+    .footer--txt{
+        //padding: 17vw 15px 0;
+        padding: 0 0 0 6vw;
+    }
+    .footer--share{
+        width: 55%;
+        margin: 20px 0;
+
+        p, a{
+            font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+            // font-size: 4rem;
+            // line-height: 4.4rem;
+            color: $text_color;
+        }
+        a:hover{color: $secondary;}
+
+        .footer--socials{margin: 10px 0;}
+        svg {
+            width: 10vw;
+            margin-right: 10px;
+            fill: $text_color;
+            transition: .5s;
+
+            &:hover{fill: $secondary;}
+        }
+        .fb-share-button{
+            cursor: pointer;
+        }
+    }
+    .footer--news{
+        margin: 20px 0;
+
+        form input:first-child{
+            font-family: "Raleway-Heavy";
+            // font-size: 4rem;
+            color: $blanc;
+        }
+        form input:first-child::placeholder{color: $gris;}
+        form input:first-child{
+            width: 75%;
+            background-color: transparent;
+            border: none;
+            border-bottom: 3px solid $tertiary;
+        }
+        .btn{
+            padding: 8px 25px;
+            background-color: $tertiary;
+            border: none;
+            border-radius: 5px;
+            font-family: "Raleway-Medium";
+            color: $blanc;
+            text-transform: uppercase;
+            margin-left: 10px;
+            transition: .5s;
+
+            &:hover{background-color: $secondary;}
+        }
+    }
+    .footer--legals{
+        justify-content: normal;
+        flex-wrap: wrap;
+        a{
+            font-family: "Raleway-Medium";
+            color: $blanc;
+
+            &:hover {
+                color: $secondary;
+            }
+        }
+        p{
+            margin: 0 .5em;
+            color: $blanc;
+        }
+    }
+}
+.pageup{
+    position: fixed;
+    opacity: 0;
+    bottom: 90px;
+    right: 10px;
+    transition: opacity .5s;
+    z-index: 1;
+
+    img {
+        width: 50px;
+        height: auto;
+    }
+}
+.see{opacity: .7;}
+
+// *************************
+// **                     **
+// *************************
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          *******
+
+@media only screen and (min-width:768px) {
+    footer{
+
+        .footer--logo{
+            width: 15%;
+            right: 3vw;
+            top: -2.8vw;
+            a > span {
+                right: -1vw;
+                top: 9vw;
+                font-size: unset;
+            }
+        }
+        .footer--txt{
+            padding: 0 8vw 0 4vw;
+            width: 83%;
+        }
+        .footer--share{
+            flex-direction: row;
+            align-items: flex-end;
+            width: unset;
+
+            .footer--socials{margin: 0;}
+            svg{
+                width: 2.5vw;
+                margin: 0 5px;
+            }
+        }
+        .footer--news{margin: 10px 0;}
+        .footer--legals{
+            justify-content: flex-start;
+            & p {margin: 0 10px;}
+        }
+    }
+    .pageup{bottom: 0;}
+
+}
+
+// ****
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// ****
+
+@media only screen and (min-width:1024px) {
+    footer{
+
+        .footer--logo{
+            width: 10%;
+            right: 2vw;
+            top: -2vw;
+
+            a > span {
+                right: -1vw;
+                top: 6vw;
+                font-size: 0.8em;
+            }
+        }
+
+        .footer--news form{margin: 20px 0;}
+
+    }
+}
+
+//    ********
+//  *  *****  *
+// *  *     *   *
+// ***        *  *
+//           *  *
+//          *  *
+//         *  *
+//        *  *
+//       *  *
+//      *  *
+//     *  *
+//    *  *
+//   *  *
+//  *  *
+// *  *
+// *  **************
+// *               *
+// *****************
+@media only screen and (min-width: 1440px) {
+    footer{
+        .footer--logo{
+            a > span {
+                right: 0vw;
+                font-size: 0.9em;
+            }
+        }
+    }
+}
+
+//  ************
+//  *          ****
+//  *********      *
+//          *****  *
+//            **   *
+//           **   *
+//  **********   *
+//  *            *
+//  *********     *
+//          *****  *
+//            **   *
+//           **    *
+//  **********    *
+//  *          ***
+//  ************
+@media only screen and (min-width: 1920px) {
+    footer{
+    }
+}

resources/front/sass/gauloisir-2021.scss

@@ -0,0 +1,2 @@
+@import '../css/cookies-ldc.css';
+@import 'styles';

resources/front/sass/gauloisir-2022.scss

@@ -0,0 +1,2 @@
+@import '../css/cookies-ldc.css';
+@import 'styles';

resources/front/sass/header.scss

@@ -0,0 +1,391 @@
+:root {
+    --bg-color: $blanc;
+}
+
+header.teaser .logo{
+    margin: 10px auto;
+    img{height: var(--header-height);}
+}
+header{
+    grid-template-rows: 1fr 1fr;
+    align-items: center;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: var(--header-height);
+    background-color: var(--bg-color);
+    overflow-x: hidden;
+
+    .logo{
+        justify-content: space-between;
+        align-items: center;
+        align-self: flex-start;
+        margin: 10px 20px 0;
+        z-index: 3;
+
+        img{height: calc(var(--header-height) / 2);}
+    }
+    nav{
+        position: absolute;
+        left: -100%;
+        top: var(--header-height);
+        width: 100%;
+        height: calc(100vh - var(--header-height));
+        transition: .5s;
+        background-color: rgba(255, 255, 255, .9);
+        z-index: 2;
+
+        &.active{
+            left: 0;
+            text-align: center;
+        }
+        ul{
+            flex-direction: column;
+            align-items: center;
+            margin: 20px 0;
+            border-top: 1px solid var(--bg-color);
+
+            li{
+                position: relative;
+                width: 100%; height: 100%;
+                border-bottom: 1px solid var(--bg-color);
+                padding: 50px 0;
+                line-height: 50px;
+                text-align: center;
+                transition: all .3s;
+
+                &:hover {
+
+                    > a{color: $btn_color;}
+                    ul{
+                        display: block;
+                    }
+                }
+                &.active.sub-menu::after{content: "Δ"; color: black;}
+
+                ul{
+                    display: none;
+                    position: relative;
+
+                    li{
+                        display: block;
+                        background-color: #888;
+                    }
+                }
+            }
+            .sub-menu::after{
+                content: "∇";
+                font-size: 15px;
+                position: absolute;
+                right: 10px; top: 0;
+                color: white;
+            }
+            a {
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+                color: black;
+                text-decoration: none;
+                text-transform: uppercase;
+                text-align: center;
+            }
+            .color-red{color: $secondary;}
+            .color-red:hover{color: $tertiary;}
+        }
+        .btn-connect{
+            justify-content: center;
+
+            a{
+                position: relative;
+                background-color: $secondary; //radial-gradient(circle farthest-corner at 25% 90% ,#54af7d, #024E2A);
+                padding: 15px 15px 15px 40px;
+                border-radius: 10px;
+                // font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+                color: $blanc;
+                text-transform: uppercase;
+
+                &::before{
+                    content: "";
+                    position: absolute;
+                    width: 26px;
+                    height: 26px;
+                    left: 5px; top: 50%;
+                    transform: translateY(-50%);
+                    background-image: url(~@/images/connect.png);
+                    background-size: contain;
+                }
+
+                &:hover{
+                    background-color: $secondary; //radial-gradient(circle closest-corner at 25% 90% ,#54af7d, #024E2A);
+                }
+            }
+        }
+        .logout-link{
+            font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+            color: black;
+            text-decoration: none;
+            text-transform: uppercase;
+            transition: all .3s;
+
+            &:hover {color: $btn_color;}
+        }
+    }
+    .toggle-menu {
+        align-items: center;
+        width: 5vw;
+        height: 4vw;
+        cursor: pointer;
+
+        &:hover span,
+        &:hover span::before,
+        &:hover span::after {background-color: $btn_color_hover;}
+        &.active {
+            span{height: 0;}
+            span::before{top: 0; transform: rotate(45deg);}
+            span::after{top: 0; transform: rotate(-45deg);}
+        }
+        span{
+            display: block;
+            position: relative;
+            width: 5vw;
+            height: .4vw;
+            background-color: $btn_color;
+            transition: background-color .8s;
+
+            &::before, &::after{
+                content: "";
+                position: absolute;
+                left: 0;
+                width: 100%;
+                height: .4vw;
+                background-color: $btn_color;
+                transition: all .8s;
+            }
+            &::before{top: -1.7vw;}
+            &::after{top: 1.7vw;}
+        }
+    }
+    .rest-in-game{
+        background-color: $primary;
+        align-self: end;
+        align-items: center;
+        padding: 0 10px;
+
+        & > span, & > div > span{
+            font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+            text-transform: uppercase;
+            color: $blanc;
+        }
+        span, img{margin: 0 5px;}
+        & > div > span{margin: 0 5px;}
+        & > div{
+            height: 100%;
+            align-items: center;
+
+            & div:first-child{
+                justify-content: center;
+                align-items: center;
+                width: 10vw;
+                height: 5vw;
+                background-color: $blanc;
+                border-radius: 50%;
+
+                span{
+                    display: contents;
+                    //font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+                    color: $secondary;
+                }
+            }
+            img{
+                height: 100%;
+                position: relative;
+                top: -7px;
+                max-height: 40px;
+            }
+        }
+    }
+}
+
+//
+
+@media only screen and (min-width: 480px) {
+    header{
+        .rest-in-game{
+            padding: 5px 10px;
+            justify-content: space-between;
+        }
+    }
+}
+
+// *************************
+// **                     **
+// *************************
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          *******
+
+@media only screen and (min-width: 768px) {
+    header.teaser{
+        background-color: transparent;
+        box-shadow: none;
+    }
+    header {
+        grid-template-rows: 1fr 1fr;
+        background-color: $blanc;
+        box-shadow: 0px 1px 8px 0px $gris;
+
+        .logo{
+            position: absolute;
+            height: 100%;
+            left: 2vw;
+            bottom: 1vw;
+            align-items: flex-end;
+            margin: 0;
+
+            img{height: calc(var(--header-height)*0.5);}
+        }
+        nav{
+            position: initial;
+            left: 0; top: unset;
+            height: unset; width: unset;
+            background-color: transparent;
+            display: flex;
+            justify-content: flex-end;
+            margin: 10px;
+            margin-right: 1vw;
+
+            ul{
+                flex-direction: row;
+                justify-content: flex-end;
+                margin: 0 10px;
+                border-top: none;
+
+                li{
+                    position: unset;
+                    left: 0;
+                    border-bottom: none;
+                    padding: 0;
+                    line-height: 1.2rem;
+                    width: max-content;
+                    height: unset;
+                    margin: 0 10px;
+                }
+            }
+            .btn-connect {align-items: center;}
+        }
+        .rest-in-game{
+            justify-self: flex-end;
+            height: unset;
+            position: relative;
+            right: -5vw;
+            // padding: 0;
+            padding-right: calc(5vw + 5vw);
+            transform: skew(12deg);
+            overflow: hidden;
+
+            & > :nth-child(n) {transform: skew(-12deg);}
+            & > div div:first-child{
+                width: 4.4vw;
+                height: 3vw;
+            }
+            & > div img{
+                height: 4vw;
+                max-height: 50px;
+            }
+        }
+        .toggle-menu{display: none;}
+    }
+}
+
+// ****
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// ****
+@media only screen and (min-width: 1024px) {
+    // header {
+    //     .logo{
+    //         img{height: calc(var(--header-height)*0.7);}
+    //     }
+    // }
+}
+
+//    ********
+//  *  *****  *
+// *  *     *   *
+// ***        *  *
+//           *  *
+//          *  *
+//         *  *
+//        *  *
+//       *  *
+//      *  *
+//     *  *
+//    *  *
+//   *  *
+//  *  *
+// *  *
+// *  **************
+// *               *
+// *****************
+@media only screen and (min-width: 1440px) {
+    header {
+        .logo{
+            align-items: center;
+            bottom: initial;
+            img{height: calc(var(--header-height)*0.8);}
+        }
+        // nav ul a, nav .btn-connect a
+        //     {font-size: 1.5rem;}
+        .rest-in-game{
+
+            & > div div:first-child{
+                width: 3.5vw;
+                height: 2.3vw;
+            }
+            & > div img{height: 2.5vw;}
+            // span{font-size: 1rem;}
+            // & > div > span{font-size: 1rem;}
+            // & > div div:first-child span{font-size: 1rem;}
+        }
+
+    }
+}
+
+//  ************
+//  *          ****
+//  *********      *
+//          *****  *
+//            **   *
+//           **   *
+//  **********   *
+//  *            *
+//  *********     *
+//          *****  *
+//            **   *
+//           **    *
+//  **********    *
+//  *          ***
+//  ************
+@media only screen and (min-width: 1920px) {
+    // header {
+    //     nav ul a, nav .btn-connect a
+    //         {font-size: 1rem;}
+    // }
+}

resources/front/sass/legals.scss

@@ -0,0 +1,103 @@
+.legals, .charte, .rules{
+    //background: repeat url(~@/images/bg-paper.jpg);
+
+    section{padding: 2vw 3vw 10vw}
+    h1{
+        text-transform: uppercase;
+        text-align: center;
+        color: $tertiary;
+        margin: 2vw 0 4vw;
+    }
+    h2{
+        text-transform: uppercase;
+        color: $primary;
+    }
+    p{
+        font-family: "Raleway-Medium", Arial, Helvetica, sans-serif;
+        color: $noir;
+
+        &::after{
+            content: "";
+            display: block;
+            width: 20%; height: 3px;
+            background-color: $primary;
+            margin: 3vw auto;
+        }
+    }
+}
+
+// *************************
+// **                     **
+// *************************
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          *******
+
+@media only screen and (min-width:768px) {
+
+}
+
+// ****
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// ****
+
+@media only screen and (min-width:1024px) {
+
+}
+
+//    ********
+//  *  *****  *
+// *  *     *   *
+// ***        *  *
+//           *  *
+//          *  *
+//         *  *
+//        *  *
+//       *  *
+//      *  *
+//     *  *
+//    *  *
+//   *  *
+//  *  *
+// *  *
+// *  **************
+// *               *
+// *****************
+@media only screen and (min-width: 1440px) {
+
+}
+
+//  ************
+//  *          ****
+//  *********      *
+//          *****  *
+//            **   *
+//           **   *
+//  **********   *
+//  *            *
+//  *********     *
+//          *****  *
+//            **   *
+//           **    *
+//  **********    *
+//  *          ***
+//  ************
+@media only screen and (min-width: 1920px) {
+
+}

resources/front/sass/lib/cookie-notice.scss

@@ -0,0 +1,80 @@
+#cookie-notice{
+    background-color: rgba(0,0,0,.5) !important;
+    height: 100vh !important;
+    display: flex;
+    align-items: flex-end !important;
+
+    .cn-close-icon{display: none !important;}
+    .cookie-notice-container{
+        display: flex !important;
+        flex-direction: column !important;
+        padding: 0 20px !important;
+        max-height: 50vh !important;
+        overflow: auto !important;
+        background-color: #888888 !important;
+        font-family: 'Open sans', Arial, Helvetica, sans-serif !important;
+        color: $blanc !important;
+
+        strong{
+            display: block !important;
+            padding: 0 0 20px !important;
+            font-family: 'steelfish', Arial, Helvetica, sans-serif !important;
+            font-size: 2.5rem !important;
+            font-weight: bold !important;
+            line-height: 3rem !important;
+            color: $rouge !important;
+            -webkit-text-stroke: 1px !important;
+            -webkit-text-stroke-color: $noir !important;
+        }
+        p{
+            padding: 0 !important;
+            font-size: .8rem !important;
+            line-height: 1rem !important;
+
+            a{text-decoration: underline !important;}
+        }
+        .btn{width: unset !important;}
+    }
+}
+.cookie-notice-hidden{display: none !important;}
+
+
+// *************************
+// **                     **
+// *************************
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          *******
+
+@media only screen and (min-width:768px) {
+    #cookie-notice .cookie-notice-container strong{
+        font-size: 3.5rem !important;
+        font-weight: bold !important;
+        line-height: 4rem !important;
+        padding: 20px !important;
+    }
+}
+
+// ****
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// ****
+
+// @media only screen and (min-width:1024px) {
+
+// }

resources/front/sass/lib/cookies-ldc.scss

@@ -0,0 +1,581 @@
+/* DEBUT DU PARAMETRAGE */
+/* - Choix des FONTS */
+/* - Changement des couleurs et des polices */
+
+:root{
+    /* PARTIE A RENSEIGNER */
+    --primary-color: #{$primary};
+    --secondary-color: #{$secondary};
+    --background-color: #{$blanc};
+    --title-font: "Barlow_Regular", Arial, Helvetica, sans-serif;
+    --title-size: 30px;
+    --text-font: "Barlow_Regular", Arial, Helvetica, sans-serif;
+    --text-size: 1rem;
+    --accept-color: #{$vert};
+    --deny-color: #{$rouge};
+
+    /* PARTIE A RENSEIGNER FACULTATIF */
+    /* FENETRE D'ACCUEIL */
+    --ck-bg-color: var(--background-color);
+    /* Title settings */
+    --ck-w1-bgcolor-title: var(--background-color);
+    --ck-w1-font-family-title: var(--title-font);
+    --ck-w1-font-size-title: var(--title-size);
+    --ck-w1-color-title: var(--primary);
+
+    /* Text settings */
+    --ck-w1-font-family-txt: var(--text-font);
+    --ck-w1-font-size-txt: var(--text-size);
+    --ck-w1-color-txt: var(--primary-color);
+    --ck-w1-color-href-hover: var(--secondary-color);
+
+    /* Button settings */
+    --ck-w1-color-btn: var(--primary-color);
+    --ck-w1-color-btn-hover: var(--secondary-color);
+    --ck-w1-font-family-btn-txt: var(--text-font);
+    --ck-w1-font-size-btn-txt: var(--text-size);
+    --ck-w1-color-btn-txt: #ffffff;
+    --ck-w1-color-btn-txt-hover: #ffffff;
+    --ck-w1-color-btn-border: transparent;
+    --ck-w1-color-btn-border-hover: transparent;
+
+    /* FENETRE DE PERSONNALISATION */
+    --ck-bg-color-modal-wrapper: #ffffff;
+    /* Title settings */
+    --ck-w2-bgcolor-title: var(--primary-color);
+    --ck-w2-font-family-title: var(--title-font);
+    --ck-w2-font-size-title: var(--title-size);
+    --ck-w2-color-title: #ffffff;
+
+    /* Text settings */
+    --ck-w2-font-family-txt: var(--text-font);
+    --ck-w2-font-size-txt: var(--text-size);
+    --ck-w2-color-txt: #ffffff;
+    --ck-w2-color-href-hover: #000000;
+
+    /* Accept/Deny btn settings */
+    --ck-color-accept: #808080;
+    --ck-color-accept-hover: var(--accept-color);
+    --ck-color-deny: #808080;
+    --ck-color-deny-hover: var(--deny-color);
+    --ck-color-txt: #ffffff;
+    --ck-color-txt-hover: #ffffff;
+
+    /* Cookies list settings */
+    --ck-bgcolor-list: #e4e4e4;
+    --ck-font-family-list: var(--text-font);
+    --ck-font-size-list: var(--text-size);
+    --ck-color-list: #000000;
+}
+/* FIN DU PARAMETRAGE */
+
+/* MOBILE FIRST */
+#ldcweb-cn *,#ldcweb-cn *::before, #ldcweb-cn *::after {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+#template{display: none;}
+#ldcweb-cn.open-banner .ldcweb-cn-banner{display: flex;}
+#ldcweb-cn.open-modal #ldcweb-cn-modal{display: flex;}
+#ldcweb-cn.open-banner, #ldcweb-cn.open-modal{display: flex;}
+#ldcweb-cn {
+    display: none;
+    flex-direction: column;
+    justify-content: flex-end;
+    position: fixed;
+    left: 0; right: 0;
+    top: 0; bottom: 0;
+    width: 100%; height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 99999999999;
+    opacity: 1;
+    line-height: initial;
+}
+
+#ldcweb-cn p,
+#ldcweb-cn a{
+    font-family: var(--ck-w1-font-family-txt);
+    font-size: var(--ck-w1-font-size-txt);
+    color: var(--ck-w1-color-txt);
+}
+#ldcweb-cn a{
+    text-decoration: underline;
+    transition: color .5s;
+}
+#ldcweb-cn a:hover{color: var(--ck-w1-color-href-hover);}
+#ldcweb-cn .ldcweb-cn-banner, #ldcweb-cn-modal .modal-wrapper{
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+#ldcweb-cn .ldcweb-cn-banner{
+    display: none;
+    padding: 6vw 10vw;
+    max-height: 50vh;
+
+    box-shadow: 0px 5px 10px -5px #000 inset;
+    background-color: var(--ck-bg-color);
+}
+#ldcweb-cn .ldcweb-cn-banner div:not(:last-child){margin-bottom: 4vw;}
+#ldcweb-cn .banner-img{
+    flex: 1;
+    max-width: 200px;
+}
+#ldcweb-cn .banner-img img{width: 100%;}
+#ldcweb-cn .col{flex: 2;}
+#ldcweb-cn .banner-title p{
+    font-family: var(--ck-w1-font-family-title);
+    font-size: var(--ck-w1-font-size-title);
+    font-weight: bold;
+    color: var(--ck-w1-color-title);
+    text-align: center;
+}
+#ldcweb-cn .banner-txt{text-align: center;}
+#ldcweb-cn .btns {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+#ldcweb-cn .btns .btn {
+    display: block;
+    flex: 1;
+    padding: 1em;
+    text-align: center;
+    min-width: 12em;
+
+    background-color: var(--ck-w1-color-btn);
+    text-decoration: none;
+    font-family: var(--ck-w1-font-family-btn-txt);
+    font-size: var(--ck-w1-font-size-btn-txt);
+    color: var(--ck-w1-color-btn-txt);
+    transition: all .5s;
+}
+#ldcweb-cn .btns .btn:hover {
+    background-color: var(--ck-w1-color-btn-hover);
+    background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
+    color: var(--ck-w1-color-btn-txt-hover);
+}
+
+/* MODAL */
+#ldcweb-cn-modal {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    left: 0; right: 0;
+    top: 0; bottom: 0;
+    width: 100%; height: 100%;
+    z-index: 200;
+
+    background: rgba(0, 0, 0, 0.7);
+    opacity: 1;
+}
+#ldcweb-cn-modal .modal-wrapper{
+    position: relative;
+    background-color: var(--ck-bg-color-modal-wrapper);
+}
+#ldcweb-cn-modal .modal-wrapper > div:not(:first-of-type){width: 100%;}
+#ldcweb-cn-modal .modal-btn-close{
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 5vw; height: 6vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#ldcweb-cn-modal .modal-btn-close a{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: medium;
+    font-weight: bold;
+    color: var(--ck-w2-color-title);
+    background-color: var(--ck-w2-bgcolor-title);
+    text-decoration: none;
+    border-radius: 0 0 0 50%;
+    transition: all .5s;
+}
+#ldcweb-cn-modal .modal-btn-close a:hover{
+    color: #000000;
+    background-color: #808080;
+    background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
+    box-shadow: -1px 1px 10px -4px #000;
+}
+#ldcweb-cn-modal .modal-title, #ldcweb-cn-modal .modal-all
+    {background-color: var(--ck-w2-bgcolor-title);}
+#ldcweb-cn-modal .modal-title .description,
+#ldcweb-cn-modal .modal-title > div,
+#ldcweb-cn-modal .modal-all{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+#ldcweb-cn-modal .modal-title .description,
+#ldcweb-cn-modal .modal-title > div a,
+#ldcweb-cn-modal .modal-all p,
+#ldcweb-cn-modal .modal-all a{
+    font-family: var(--ck-w2-font-family-txt);
+    font-size: var(--ck-w2-font-size-txt);
+    color: var(--ck-w2-color-txt);
+    text-align: center;
+}
+#ldcweb-cn-modal .modal-title > div a:hover,
+#ldcweb-cn-modal .modal-all a:hover
+    {color: var(--ck-w2-color-href-hover);}
+/* TITLE */
+#ldcweb-cn-modal .modal-wrapper .modal-title{padding: 4vw 4vw 0;}
+#ldcweb-cn-modal .modal-title .title{
+    font-family: var(--ck-w2-font-family-title);
+    font-size: var(--ck-w2-font-size-title);
+    font-weight: bold;
+    color: var(--ck-w2-color-title);
+    text-align: center;
+}
+#ldcweb-cn-modal .modal-title .title::after,
+#ldcweb-cn-modal .modal-title > div::after{
+    content: "";
+    display: block;
+    width: 90%; height: 2px;
+    margin: 4vw auto;
+
+    background-color: rgba(255, 255, 255, .5);
+}
+#ldcweb-cn-modal .modal-title a{width: fit-content;}
+/* ALL */
+#ldcweb-cn-modal .modal-wrapper .modal-all{padding: 0 4vw 4vw;}
+#ldcweb-cn-modal .modal-all .all-buttons{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+#ldcweb-cn-modal .modal-all .all-buttons > div{
+    width: calc(100% + 15vw);
+    margin: 2vw 0 0;
+}
+#ldcweb-cn-modal .modal-all a{
+    display: block;
+    padding: 3vw 0;
+
+    color: var(--ck-color-txt);
+    /* font-weight: bold; */
+    text-decoration: none;
+    transition: all .5s;
+}
+#ldcweb-cn-modal .all-buttons > div.accept > a.active {
+    background-color: var(--ck-color-accept-hover);
+    background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
+}
+#ldcweb-cn-modal .all-buttons > div.deny > a.active {
+    background-color: var(--ck-color-deny-hover);
+    background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
+}
+#ldcweb-cn-modal .modal-all > div > div:first-of-type a{background-color: var(--ck-color-accept);}
+#ldcweb-cn-modal .modal-all > div > div:last-of-type a{background-color: var(--ck-color-deny);}
+#ldcweb-cn-modal .modal-all > div > div:first-of-type a:hover{
+    color: var(--ck-color-txt-hover);
+    background-color: var(--ck-color-accept-hover);
+    background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
+}
+#ldcweb-cn-modal .modal-all > div > div:last-of-type a:hover{
+    color: var(--ck-color-txt-hover);
+    background-color: var(--ck-color-deny-hover);
+    background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
+}
+/* DETAILS */
+#ldcweb-cn-modal .modal-wrapper .modal-details{padding:  2vw 0;}
+#ldcweb-cn-modal .modal-details ul{
+    display: flex;
+    flex-direction: column;
+}
+#ldcweb-cn-modal .modal-details li > div{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 2vw 0;
+    padding: 2vw 4vw;
+
+    background-color: var(--ck-bgcolor-list);
+}
+#ldcweb-cn-modal .modal-details li span,
+#ldcweb-cn-modal .modal-details li a,
+#ldcweb-cn-modal .modal-details li label{
+    font-family: var(--ck-font-family-list);
+    font-size: var(--ck-font-size-list);
+    color: var(--ck-color-list);
+}
+#ldcweb-cn-modal .modal-details li a:hover{color:var(--secondary-color);}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-infos{
+    display: flex;
+    flex-direction: column;
+    max-width: 75%;
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-infos span:first-of-type{
+    font-size: calc(var(--ck-font-size-list) * 1.25);
+    font-weight: bold;
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-infos a{width: fit-content;}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons{display: flex;}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type,
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type
+    {transition: all .5s;}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type{
+    margin-right: 2vw;
+    background: var(--ck-color-accept);
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type{background: var(--ck-color-deny);}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div{
+    width: 25vw;
+    margin: 2vw 0;
+    display: table;
+
+    /* font-weight: bold; */
+    text-align: center;
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type:hover,
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type:hover{
+    cursor: pointer;
+    background: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:hover > label{color: var(--ck-color-txt-hover);}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type input:checked ~ label,
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type input ~label.active{
+    background-color: var(--ck-color-accept-hover);
+    background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type input:checked ~ label,
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type input ~ label.active{
+    background-color: var(--ck-color-deny-hover);
+    background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons input{display: none;}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons label{
+    display: block;
+    padding: 1.5vw 0;
+
+    color: var(--ck-color-txt);
+    transition: color .5s;
+}
+#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons label:hover{
+    cursor: pointer;
+    color: var(--ck-color-txt-hover);
+}
+
+/*  ************************* */
+/*  **                     ** */
+/*  ************************* */
+/*           **   ** */
+/*           **   ** */
+/*           **   ** */
+/*           **   ** */
+/*           **   ** */
+/*           **   ** */
+/*           **   ** */
+/*           ******* */
+@media only screen and (min-width:768px) {
+    #ldcweb-cn .ldcweb-cn-banner{
+        padding-top: 4vw;
+        padding-bottom: 4vw;
+    }
+    #ldcweb-cn .btns {flex-direction: row;}
+    #ldcweb-cn .btns > div:first-child{margin-top: 0;}
+    #ldcweb-cn .btns > div:last-child{margin-top: 0;}
+    #ldcweb-cn .btns > div:first-child .btn {margin: 0 2vw 0 0;}
+
+    /* MODAL */
+    #ldcweb-cn-modal .modal-wrapper{width: 90vw;}
+    /* ALL */
+    #ldcweb-cn-modal .modal-all{
+        flex-direction: row;
+        justify-content: space-between;
+    }
+    #ldcweb-cn-modal .modal-all a{padding: 2vw 0;}
+    #ldcweb-cn-modal .modal-all .all-buttons > div{margin: 0;}
+    #ldcweb-cn-modal .modal-all .all-buttons > div:last-of-type{margin: 1vw 0 0;}
+    #ldcweb-cn-modal .modal-all a{width: 30vw;}
+    /* DETAILS */
+    #ldcweb-cn-modal .modal-details li > div{flex-direction: row;}
+    #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons{flex-direction: column;}
+    #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div{
+        width: 20vw;
+        margin: 0;
+    }
+    #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type{margin: 0 0 1vw;}
+}
+
+/*  **** */
+/*  *  * */
+/*  *  * */
+/*  *  * */
+/*  *  * */
+/*  *  * */
+/*  *  * */
+/*  *  * */
+/*  *  * */
+/*  *  * */
+/*  *  * */
+/*  *  * */
+/*  *  * */
+/*  **** */
+@media only screen and (min-width:1024px) {
+    #ldcweb-cn .ldcweb-cn-banner{
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+        padding: 2vw 3vw;
+    }
+    #ldcweb-cn .ldcweb-cn-banner div:not(:last-child){margin: 0 0 .5em 0;}
+    #ldcweb-cn .ldcweb-cn-banner > div:not(:last-child){margin: 0 4vw 0 0;}
+    #ldcweb-cn .ldcweb-cn-banner .banner-img{
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+    #ldcweb-cn .banner-img img{height: fit-content;}
+
+    #ldcweb-cn .banner-txt{text-align: start;}
+    #ldcweb-cn .btns {
+        height: 100%;
+        flex-direction: column;
+        justify-content: center;
+    }
+    #ldcweb-cn .btns > div:first-child .btn{margin: 0;}
+    /* MODAL */
+    #ldcweb-cn-modal .modal-wrapper{width: 80vw;}
+    #ldcweb-cn-modal .modal-btn-close{
+        width: 3vw;
+        height: 3vw;
+    }
+    /* TITLE */
+    #ldcweb-cn-modal .modal-wrapper .modal-title{padding: 2vw 2vw 0;}
+    #ldcweb-cn-modal .modal-title .title::after,
+    #ldcweb-cn-modal .modal-title > div::after{margin: 2vw auto;}
+    /* ALL */
+    #ldcweb-cn-modal .modal-wrapper .modal-all{padding: 0 2vw 2vw;}
+    #ldcweb-cn-modal .modal-all a{padding: 1.5vw 0;}
+    #ldcweb-cn-modal .modal-all .all-buttons{flex-direction: row;}
+    #ldcweb-cn-modal .modal-all .all-buttons > div:first-of-type{margin: 0 1vw 0 0;}
+    #ldcweb-cn-modal .modal-all .all-buttons > div:last-of-type{margin: 0;}
+    #ldcweb-cn-modal .modal-all a{width: 22vw;}
+    /* DETAILS */
+    #ldcweb-cn-modal .modal-wrapper .modal-details{padding: 1vw 0;}
+    #ldcweb-cn-modal .modal-details li > div{
+        margin: 1vw 0;
+        padding: 2vw;
+    }
+    #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons{
+        flex-direction: row;
+        align-items: center;
+    }
+    #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div{
+        width: 10vw;
+        margin: 0;
+    }
+    #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type{margin: 0 1vw 0;}
+
+}
+
+/*     ******** */
+/*   *  *****  * */
+/*  *  *     *   * */
+/*  ***        *  * */
+/*            *  * */
+/*           *  * */
+/*          *  * */
+/*         *  * */
+/*        *  * */
+/*       *  * */
+/*      *  * */
+/*     *  * */
+/*    *  * */
+/*   *  * */
+/*  *  * */
+/*  *  ************** */
+/*  *               * */
+/*  ***************** */
+@media only screen and (min-width: 1440px) {
+    #ldcweb-cn .col{flex: 4;}
+        /* MODAL */
+    #ldcweb-cn-modal .modal-wrapper{width: 60vw;}
+    #ldcweb-cn-modal .modal-btn-close{
+        width: 2vw;
+        height: 2vw;
+    }
+    /* ALL */
+    #ldcweb-cn-modal .modal-all .all-buttons > div:first-of-type{margin: 0 1vw 0 0;}
+    #ldcweb-cn-modal .modal-all a{
+        width: 15vw;
+        padding: 1vw 0;
+    }
+    /* DETAILS */
+    #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div{width: 8vw;}
+    #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons label{padding: 1vw 0;}
+}
+
+/* ************ */
+/* *          **** */
+/* *********      * */
+        /* *****  * */
+        /* **   * */
+        /* **   *  */
+/* **********   * */
+/* *            * */
+/* *********     * */
+        /* *****  * */
+        /* **   * */
+        /* **    * */
+/* **********    * */
+/* *          *** */
+/* ************ */
+@media only screen and (min-width: 1920px) {
+    #ldcweb-cn p{font-size: calc(var(--ck-w1-font-size-txt) * 1.25);}
+    #ldcweb-cn .banner-title p{font-size: calc(var(--ck-w1-font-size-title) * 1.25);}
+    #ldcweb-cn .btns .btn {font-size: calc(var(--ck-w1-font-size-btn-txt) * 1.25);line-height: calc(var(--ck-w1-font-size-btn-txt) * 0.75);}
+
+    /* MODAL */
+    #ldcweb-cn-modal .modal-wrapper{width: 50vw;}
+    #ldcweb-cn-modal .modal-btn-close{
+        width: 2rem;
+        height: 2rem;
+    }
+    #ldcweb-cn-modal .modal-title .description,
+    #ldcweb-cn-modal .modal-title > div a,
+    #ldcweb-cn-modal .modal-all p,
+    #ldcweb-cn-modal .modal-all a
+        {font-size: calc(var(--ck-w2-font-size-txt) * 1.25);}
+    /* TITLE */
+    #ldcweb-cn-modal .modal-wrapper .modal-title{padding: 1vw 1vw 0;}
+    #ldcweb-cn-modal .modal-title .title{font-size: calc(var(--ck-w2-font-size-title) * 1.25);}
+    #ldcweb-cn-modal .modal-title .title::after,
+    #ldcweb-cn-modal .modal-title > div::after{margin: 1vw auto;}
+    /* ALL */
+    #ldcweb-cn-modal .modal-wrapper .modal-all{padding: 0 1vw 1vw;}
+    #ldcweb-cn-modal .modal-all a{
+        width: 13vw;
+        padding: .5vw 0;
+    }
+    /* DETAILS */
+    #ldcweb-cn-modal .modal-wrapper .modal-details{padding: .5vw 0;}
+    #ldcweb-cn-modal .modal-details li > div{
+        margin: .5vw 0;
+        padding: 1vw;
+    }
+    #ldcweb-cn-modal .modal-details li span,
+    #ldcweb-cn-modal .modal-details li a,
+    #ldcweb-cn-modal .modal-details li label
+        {font-size: calc(var(--ck-font-size-list) * 1.25);}
+    #ldcweb-cn-modal .modal-details .ldcweb-cn-infos span:first-of-type{font-size: calc(var(--ck-font-size-list) * 1.5);}
+    #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons{
+        flex-direction: row;
+        align-items: center;
+    }
+    #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div{width: 5vw;}
+    #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type{margin: 0 1vw 0;}
+    #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons label{padding: .5vw 0;}
+}

resources/front/sass/lib/fonts.scss

@@ -0,0 +1,30 @@
+@font-face {
+    font-family: 'Raleway-Heavy';
+    src: url("~@/fonts/Raleway/Raleway-Heavy.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal; }
+
+@font-face {
+    font-family: 'Raleway-SemiBold';
+    src: url("~@/fonts/Raleway/Raleway-SemiBold.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal; }
+
+@font-face {
+    font-family: 'Raleway-Bold';
+    src: url("~@/fonts/Raleway/Raleway-Bold.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal; }
+
+@font-face {
+    font-family: 'Raleway-Medium';
+    src: url("~@/fonts/Raleway/Raleway-Medium.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal; }
+
+@font-face {
+    font-family: 'Raleway-Regular';
+    src: url("~@/fonts/Raleway/Raleway-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal; }
+

resources/front/sass/lib/functions.scss

@@ -0,0 +1,19 @@
+@function trim-unit($value){
+    @return $value / ($value * 0 + 1);
+}
+
+@function calc-rem($value) {
+    @return $value / trim-unit($base-font-size) * 1rem;
+}
+
+// Calcul la luminosité de la couleur de fond pour choisir la couleur de la police
+// $bgColor : Couleur de fond
+// $darken : Couleur sombre
+// ùlighten : Couleur claire
+@function calc-color-ligthness($bgColor, $darken, $lighten) {
+    // @debug lightness($bgColor);
+    // Si la couleur de fond est claire, alors on met une couleur de police sombre
+    @if(lightness($bgColor) > 50) {
+        @return $darken;
+    } @else {@return $lighten;}
+}

resources/front/sass/lib/mixins.scss

@@ -0,0 +1,65 @@
+// Dessine un triangle en haut au milieu du Parent
+@mixin triangle-haut($color: #ffffff, $size: 10px) {
+    &::before{
+        content: '';
+        width: 0;
+        height: 0;
+        border-bottom: $size solid $color;
+        border-left: $size solid transparent;
+        border-right: $size solid transparent;
+        position: absolute;
+        top: $size * -1;
+        left: calc(50% - #{$size});
+        z-index: 999;
+    }
+
+}
+
+// Dessine un triangle en bas au milieu du Parent
+@mixin triangle-bas($color: #ffffff, $size: 10px) {
+    &::after{
+        content: '';
+        width: 0;
+        height: 0;
+        border-top: $size solid $color;
+        border-left: $size solid transparent;
+        border-right: $size solid transparent;
+        position: absolute;
+        bottom: $size * -1;
+        left: calc(50% - #{$size});
+        z-index: 999;
+    }
+
+}
+
+// Dessine un triangle à gauche au milieu du Parent
+@mixin triangle-gauche($color: #ffffff, $size: 10px) {
+    &::before{
+        content: '';
+        width: 0;
+        height: 0;
+        border-right: $size solid $color;
+        border-top: $size solid transparent;
+        border-bottom: $size solid transparent;
+        position: absolute;
+        top: calc(50% - #{$size});
+        left: $size * -1;
+        z-index: 999;
+    }
+}
+
+// Dessine un triangle à droite au milieu du Parent
+@mixin triangle-droite($color: #ffffff, $size: 10px) {
+    &::after{
+        content: '';
+        width: 0;
+        height: 0;
+        border-left: $size solid $color;
+        border-top: $size solid transparent;
+        border-bottom: $size solid transparent;
+        position: absolute;
+        top: calc(50% - #{$size});
+        right: $size * -1;
+        z-index: 999;
+    }
+}

resources/front/sass/lib/variables.scss

@@ -0,0 +1,112 @@
+$blanc: #ffffff;
+$noir: #212121;
+$gris: #bbbbbb;
+$vert: #00803a;
+$vert_fonce: #024e2a;
+$rouge: #e6285d; //#e20816;
+$rose: #fce6e7;
+$beige: #fcf2e8;
+$jaune: #ffed00;
+$orange: #fba629;
+$bleu: #00a0e0; //#0070b3;
+
+$primary: $bleu;
+$secondary: $rouge;
+$tertiary: $orange;
+$quaternary: $beige;
+// $quinquennial: ;
+$btn_color: $rouge;
+$text_color: $blanc;
+$btn_color_hover: $tertiary;
+
+$base-font-size: 1vw;
+
+// *************************
+// **                     **
+// *************************
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          *******
+
+@media only screen and (min-width:768px) {
+
+}
+
+  // ****
+  // *  *
+  // *  *
+  // *  *
+  // *  *
+  // *  *
+  // *  *
+  // *  *
+  // *  *
+  // *  *
+  // *  *
+  // *  *
+  // *  *
+  // ****
+@media only screen and (min-width: 1024px) {
+
+}
+
+//    ********
+  //  *  *****  *
+  // *  *     *   *
+  // ***        *  *
+  //           *  *
+  //          *  *
+  //         *  *
+  //        *  *
+  //       *  *
+  //      *  *
+  //     *  *
+  //    *  *
+  //   *  *
+  //  *  *
+  // *  *
+  // *  **************
+  // *               *
+  // *****************
+@media only screen and (min-width: 1440px) {
+// :root{
+
+// }
+}
+
+  //  ************
+  //  *          ****
+  //  *********      *
+  //          *****  *
+  //            **   *
+  //           **   *
+  //  **********   *
+  //  *            *
+  //  *********     *
+  //          *****  *
+  //            **   *
+  //           **    *
+  //  **********    *
+  //  *          ***
+  //  ************
+@media only screen and (min-width: 1920px) {
+// :root{
+
+// }
+}
+
+  // @media (prefers-reduced-motion: reduce) {
+  //   [class*="reveal-"] {
+  //     opacity: 1!important;
+  //     transform: translateY(0px);
+  //   }
+  //   .reveal-visible{
+  //     transition-duration: 0s!important;
+  //     transition-delay: 0s!important;
+  //   }
+  // }

resources/front/sass/main.scss

@@ -0,0 +1,945 @@
+// :root{
+//     --padding: 20px;
+// }
+
+.main.teaser {
+    grid-template-rows: var(--header-height) calc(100vh - var(--header-height)) repeat(2, auto);
+}
+.main {
+    //background: repeat url(~@/images/bg-paper.jpg);
+}
+
+.floating-bloc,
+.floating--width,
+.floating--txt,
+.floating--title .post-title,
+.gift--col,
+.who-bloc,
+.gift-bloc,
+.swiper--txt {
+    flex-direction: column;
+}
+.floating-bloc.teaser {
+    padding: 5vw 0 45vw;
+}
+.floating-bloc {
+    position: relative;
+    padding: 5vw 0 15vw;
+
+    .floating--title {
+        text-align: center;
+
+        img {
+            display: none;
+            position: absolute;
+            top: -24px;
+            left: 0;
+            transform: translate(0%, 0%) rotate(5deg);
+            width: 48vw;
+        }
+
+        p {
+            font-size: 6rem;
+            line-height: 6.6rem;
+            color: $primary;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        .post-title {
+            .row {
+                align-items: center;
+                justify-content: center;
+            }
+            .cook {
+                position: relative;
+                top: -1.5vw;
+                font-family: "Veneer", Arial, Helvetica, sans-serif;
+                font-size: 11rem;
+                line-height: 10rem;
+                letter-spacing: -0.5rem;
+                color: $primary;
+            }
+            img {
+                position: relative;
+                top: -1vw;
+                height: 12rem;
+                margin: 0 5px;
+            }
+            .veneer {
+                font-family: "Veneer", Arial, Helvetica, sans-serif;
+                font-size: 28rem;
+                line-height: 24rem;
+                letter-spacing: -4rem;
+                color: $tertiary;
+            }
+
+            .raleway {
+                font-family: "Raleway-heavy", Arial, Helvetica, sans-serif;
+                font-size: 28rem;
+                line-height: 24rem;
+                letter-spacing: -4rem;
+                color: $tertiary;
+            }
+        }
+    }
+    .floating--txt {
+        position: relative;
+        width: 110%;
+        left: -7vw;
+        margin-top: 5vw;
+
+        img {
+            width: 100%;
+        }
+        .post-chapter {
+            color: $secondary;
+        }
+        .post-subtitle {
+            text-align: center;
+            font-size: 6rem;
+            line-height: 6rem;
+            color: $primary;
+            text-transform: uppercase;
+            margin: 0 0 1vw 8vw;
+        }
+        .floating--gift {
+            position: relative;
+            flex-direction: column;
+            //background: repeat url(~@/images/bg-tortoise-purple.jpg);
+
+            .floating--sticker {
+                position: absolute;
+                left: 10vw;
+                top: 0;
+                transform: translateY(-70%);
+                width: 17vw;
+            }
+            .gift--img {
+                // background-image: url(~@/images/view-lot1.png);
+                // background-size: cover;
+                // background-position: center;
+                width: 35vh;
+                align-self: center;
+                // height: 15vw;
+                transform: rotate(0deg);
+            }
+            .gift--col {
+                margin: 10px;
+            }
+            .gift--col > div:not(:last-child) {
+                margin-bottom: 10px;
+            }
+            .gift--lot1,
+            .gift--lot2,
+            .gift--br {
+                align-items: center;
+                align-self: center;
+                .post-chapter,
+                & > div:first-child span {
+                    font-size: 5rem;
+                    line-height: 5rem;
+                    text-transform: uppercase;
+                }
+                p {
+                    font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+                    font-size: 3.5rem;
+                    line-height: 3.5rem;
+                    text-transform: uppercase;
+                    color: $bleu;
+                }
+                & > div:first-child {
+                    background-color: $secondary;
+                    width: 11rem;
+                    height: 8rem;
+                    border-radius: 50%;
+                    justify-content: center;
+                    align-items: center;
+                    margin-right: 1rem;
+
+                    span {
+                        color: $blanc;
+                        margin: 0;
+                    }
+                }
+            }
+            .gift--lot1 {
+                //height: 40%;
+            }
+            .gift--lot2 {
+                position: relative;
+                //height: 40%;
+            }
+            .lot2--img {
+                // position: absolute;
+                // height: 100%;
+                // right: 1vw;
+                // top: -7rem;
+                //transform: translate(5%) rotate(5deg);
+                img {
+                    height: 35vh;
+                    width: unset;
+                }
+                align-self: center;
+                transform: rotate(0deg);
+            }
+            .gift--br {
+                //margin-left: 9rem;
+                display: flex;
+                img {
+                    height: 100%;
+                    width: unset;
+                }
+            }
+        }
+    }
+    .main-btn {
+        position: absolute;
+        text-align: center;
+        left: calc(50% - 7vh);
+        bottom: -10vw;
+        //transform: translateX(-50%) rotate(5deg);
+    }
+
+    .text_teaser {
+        position: absolute;
+        text-align: center;
+        width: 120%;
+        left: calc(50% - 7vw);
+        bottom: -85%;
+        transform: translateX(-50%) rotate(5deg);
+
+        p,
+        span {
+            font-size: 4rem;
+            line-height: 4rem;
+            color: $primary;
+            text-transform: uppercase;
+            margin: 5px;
+        }
+        .compteur {
+            justify-content: center;
+            align-items: center;
+
+            & > div {
+                margin: 10px;
+
+                p {
+                    font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+                    font-size: 2.5rem;
+                }
+                .count {
+                    width: 14rem;
+                    height: 14rem;
+                    background-color: $secondary;
+                    border-radius: 50%;
+                }
+                span {
+                    margin: 0;
+                    font-size: 6rem;
+                    line-height: 14rem;
+                    color: $blanc;
+                }
+            }
+        }
+    }
+}
+
+.who-bloc,
+.gift-bloc {
+    .post-subtitle {
+        font-size: 6.5rem;
+        color: $text_color;
+        text-transform: uppercase;
+    }
+}
+.who-bloc {
+    background-color: $primary;
+    padding-bottom: 0;
+    overflow: hidden;
+
+    p {
+        font-size: 3.5rem;
+        line-height: 4.5rem;
+    }
+    .who--title {
+        text-align: center;
+        padding-bottom: 4vw;
+
+        .post-subtitle {
+            &::after {
+                content: "";
+                display: block;
+                width: 20vw;
+                height: 3px;
+                background-color: $tertiary;
+                margin: 15px auto;
+            }
+        }
+        p {
+            font-family: "Raleway-Heavy", Arial, Helvetica, sans-serif;
+            //width: 45%;
+            margin: 0 auto;
+            color: $text_color;
+        }
+        img {
+            height: 42vw;
+        }
+    }
+    .who--details {
+        position: relative;
+        //background: repeat url(~@/images/bg-tortoise-greendeep.jpg);
+        //transform: rotate(-5deg);
+        width: 107%;
+        left: -7vw;
+        top: 5vw;
+        padding-bottom: 8vw;
+
+        .who--rotate {
+            transform: rotate(0deg);
+        }
+        .details--bloc {
+            margin: 8vw 12vw 30px 14vw;
+        }
+        .bloc--img {
+            position: relative;
+            justify-content: center;
+            align-items: center;
+            width: 20vw;
+            height: 20vw;
+            // max-width: 130px; max-height: 130px;
+            background-color: $blanc;
+            border-radius: 50%;
+            padding: 3px;
+
+            img {
+                //width: 80%;
+                height: 13vw;
+            }
+        }
+        .details--bloc:nth-child(2) .bloc--img {
+            position: relative;
+        }
+        .details--bloc:nth-child(2) .bloc--img::before {
+            content: "";
+            position: absolute;
+            right: 0;
+            top: 0;
+            border-radius: 50%;
+            background-image: url(~@/images/arrow.png);
+            //background-size: cover;
+            background-repeat: no-repeat;
+            background-position: 143% center;
+        }
+        .details--bloc:not(:last-child) .bloc--img::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            bottom: -25%;
+            transform: translate(-50%) rotate(90deg);
+            width: 10vw;
+            height: 3px;
+            background-color: $blanc;
+        }
+        .bloc--txt {
+            flex: 1;
+            align-items: center;
+            margin-left: 8vw;
+
+            p {
+                font-family: "Raleway-Medium", Arial, Helvetica, sans-serif;
+                color: $text_color;
+                font-size: 5rem;
+            }
+        }
+    }
+}
+.gift-bloc {
+    align-items: center;
+    padding-bottom: 20vw;
+
+    .gift--title {
+        margin-bottom: 20px;
+    }
+    .post-subtitle {
+        color: $tertiary;
+    }
+    .swiper-container {
+        width: 100%;
+        margin-bottom: 2vw;
+    }
+    .swiper-pagination {
+        top: 50%;
+        text-align: left;
+        margin: 5vw 3vw;
+
+        .swiper-pagination-bullet {
+            width: 2vw;
+            height: 2vw;
+            background-color: $tertiary;
+            opacity: 0.5;
+        }
+        .swiper-pagination-bullet-active {
+            opacity: 1;
+        }
+    }
+    .swiper--img img {
+        max-width: 100%;
+    }
+    .swiper-slide {
+        flex-direction: column;
+        overflow-x: hidden;
+    }
+    .swiper--txt {
+        justify-content: center;
+        position: relative;
+        background-color: $tertiary;
+        padding: 6vw 15vw;
+        transform: rotate(-5deg);
+        left: -10%;
+        top: -7vw;
+        width: 120%;
+        text-align: center;
+
+        &.bg-2 {
+            background-color: $secondary;
+        }
+        &.bg-1 {
+            background-color: $primary;
+        }
+
+        .bloc--rotate {
+            transform: rotate(5deg);
+        }
+        .post-chapter {
+            font-size: 6rem;
+            color: $blanc;
+            text-transform: uppercase;
+            //margin: 0 20vw 5vw;
+            text-align: center;
+
+            // &::after{
+            //     content: "";
+            //     display: block;
+            //     width: 20vw;
+            //     height: 3px;
+            //     background-color: $text_color;
+            //     margin: 15px auto;
+            // }
+        }
+        p {
+            font-family: "Raleway-Medium", Arial, Helvetica, sans-serif;
+            font-size: 3rem;
+            line-height: 3.2rem;
+            text-align: center;
+            color: $blanc;
+        }
+    }
+}
+
+// *************************
+// **                     **
+// *************************
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          *******
+
+@media only screen and (min-width: 768px) {
+    .main {
+        padding-bottom: 5vw;
+    }
+    .floating-bloc.teaser {
+        padding: 5vw 0 35vw;
+    }
+    .gift-bloc {
+        padding: 30px 0;
+    }
+
+    .floating-bloc {
+        transform: rotate(-5deg);
+        .floating--txt {
+            left: 3vw;
+            .post-subtitle {
+                margin: 0 0 0.5vw -6vw;
+            }
+            .floating--gift {
+                flex-direction: initial;
+                .gift--lot1,
+                .gift--lot2 {
+                    align-self: initial;
+                }
+                .gift--img {
+                    transform: rotate(5deg);
+                    //width: unset;
+                    //height:unset;
+                    //align-self: initial;
+                }
+                .lot2--img {
+                    // position: absolute;
+                    // height: 100%;
+                    // right: 1vw;
+                    // top: -7rem;
+                    transform: translate(5%) rotate(5deg);
+                    align-self: initial;
+                    img {
+                        //height: 100%;
+                        width: 100%;
+                    }
+                }
+                .floating--sticker {
+                    transform: translateY(60%);
+                }
+            }
+        }
+        .main-btn {
+            left: calc(50% - 7vw);
+            bottom: -10vw;
+            width: 120%;
+            transform: translateX(-50%) rotate(5deg);
+        }
+    }
+}
+
+// ****
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// ****
+
+@media only screen and (min-width: 1024px) {
+    .floating-bloc.teaser {
+        padding: 4vw 0 25vw;
+    }
+    .floating-bloc {
+        padding: 7vw 0 4vw;
+
+        .floating--width {
+            flex-direction: row;
+            width: 120%;
+        }
+        .floating--title {
+            width: 45%;
+
+            img {
+                display: unset;
+            }
+
+            p {
+                font-size: 3rem;
+                line-height: 2.6rem;
+            }
+            .post-title {
+                .arab {
+                    font-size: 14rem;
+                    line-height: 13rem;
+                    letter-spacing: -2rem;
+                }
+                img {
+                    height: 8rem;
+                }
+                .cook {
+                    font-size: 8rem;
+                    line-height: 8rem;
+                }
+            }
+        }
+        .floating--txt {
+            width: 55%;
+            // position: unset;
+            left: unset;
+            margin-top: 0;
+
+            .post-subtitle {
+                text-align: left;
+                font-size: 2.5rem;
+                line-height: 3.5rem;
+                margin: 0 0 0.5vw 1vw;
+            }
+            .floating--gift {
+                .floating--sticker {
+                    left: 0;
+                    top: 0;
+                    transform: translate(-200%, -100%) rotate(13deg);
+                    width: 10vw;
+                }
+                //.gift--img{width: 35%;}
+                .gift--col {
+                    width: 20vw;
+                }
+                .gift--lot1,
+                .gift--lot2,
+                .gift--br {
+                    p {
+                        font-size: 1.5rem;
+                        line-height: 1.5rem;
+                    }
+
+                    .post-chapter,
+                    & > div:first-child span {
+                        font-size: 2rem;
+                        line-height: 2rem;
+                    }
+                    & > div:first-child {
+                        width: 5rem;
+                        height: 4rem;
+                    }
+                }
+                .gift--lot2 .lot2--img {
+                    top: -2rem;
+                    transform: translateX(94%) rotate(7deg);
+                }
+
+                .gift--img {
+                    img {
+                        width: 80%;
+                    }
+                }
+                //.gift--br{margin-left: 5rem;}
+            }
+        }
+        .main-btn {
+            left: -5vw;
+            bottom: 1vw;
+        }
+        .text_teaser {
+            left: 0;
+            bottom: -80%;
+            transform: translateX(calc(-50% + 3.5vw)) rotate(5deg);
+
+            p,
+            span {
+                font-size: 3rem;
+                line-height: 3rem;
+            }
+            .compteur {
+                & > div {
+                    p {
+                        font-size: 1.5rem;
+                    }
+                    .count {
+                        width: 8rem;
+                        height: 8rem;
+                    }
+                    span {
+                        font-size: 4rem;
+                        line-height: 8rem;
+                    }
+                }
+            }
+        }
+    }
+
+    .who-bloc {
+        flex-direction: row;
+
+        p {
+            font-size: 1.5rem;
+            line-height: 2.2rem;
+        }
+        .who--title {
+            flex: 2;
+            position: relative;
+            //left: -7vw;
+            height: 110%;
+            //background: repeat url(~@/images/bg-tortoise-greendeep.jpg);
+            //transform: rotate(-5deg);
+            padding: 0 4vw;
+            //margin-top: 2vw;
+            //text-align: right;
+            z-index: 1;
+
+            //.who--rotate{transform: rotate(5deg);}
+            .post-subtitle,
+            p {
+                //width: 50%;
+                text-align: left;
+                margin: 0 0 0 auto;
+            }
+            .post-subtitle {
+                font-size: 3.5rem;
+            }
+            .post-subtitle::after {
+                width: 9vw;
+                background-color: $primary;
+                margin: 15px 0 15px auto;
+            }
+            img {
+                height: 21vw;
+            }
+        }
+        .who--details {
+            flex: 3;
+            left: 0;
+            top: 0;
+            background: $primary;
+            transform: rotate(0);
+            padding: 0 0;
+
+            .who--rotate {
+                transform: rotate(0);
+            }
+            .details--bloc {
+                margin: 1vw;
+            }
+            .details--bloc:nth-child(2) .bloc--img::before {
+                width: 100%;
+                height: 100%;
+            }
+            .details--bloc:not(:last-child) .bloc--img::after {
+                width: 4vw;
+            }
+            .bloc--img {
+                width: 8vw;
+                height: 8vw;
+                margin-bottom: 2vw;
+                img {
+                    //width: 80%;
+                    height: 6vw;
+                }
+            }
+            .bloc--txt {
+                margin: 0 2vw 2vw 3vw;
+                p {
+                    font-size: 2rem;
+                }
+            }
+        }
+    }
+
+    .gift-bloc {
+        .swiper-container,
+        .swiper-slide {
+            overflow: visible;
+        }
+        .post-subtitle {
+            font-size: 4rem;
+        }
+        .swiper-container {
+            margin: 2vw 0 8vw 0;
+            // overflow: unset;
+        }
+        .swiper-slide {
+            flex-direction: row;
+            overflow-x: visible;
+            // overflow-y: hidden;
+        }
+        .swiper--img {
+            position: relative;
+            width: 40%;
+            text-align: center;
+            padding: 0 7rem;
+
+            &::before {
+                content: "";
+                position: absolute;
+                width: 10vw;
+                height: 6vw;
+                left: 0;
+                top: -6vw;
+                //background-image: url(~@/images/bg-paper.jpg);
+            }
+        }
+        .swiper--txt {
+            position: relative;
+            //left: 50%; top: 50%;
+            width: 56%;
+            height: 100%;
+            padding: 4rem;
+            //transform-origin: bottom left;
+            transform: translate(20%, 20%) rotate(-5deg);
+
+            //.bloc--rotate{margin: 0 15vw 0 0;}
+            .post-chapter {
+                font-size: 3.5rem;
+                //margin: 0 18vw 0 0;
+
+                &::after {
+                    width: 8vw;
+                    margin: 3vw 0;
+                }
+            }
+            p {
+                font-size: 1.2vw;
+                line-height: 1.6vw;
+                //margin: 0 10vw 0 0;
+                &.big {
+                    font-size: 2vw;
+                    margin-bottom: 1vw;
+                }
+            }
+            .post-chapter,
+            p {
+                //margin-left: 4vw;
+                //text-align: left;
+            }
+        }
+        .swiper-pagination {
+            top: unset;
+            bottom: -4vw;
+            margin: 0 auto;
+            text-align: center;
+
+            .swiper-pagination-bullet {
+                width: 1vw;
+                height: 1vw;
+            }
+        }
+    }
+}
+
+//    ********
+//  *  *****  *
+// *  *     *   *
+// ***        *  *
+//           *  *
+//          *  *
+//         *  *
+//        *  *
+//       *  *
+//      *  *
+//     *  *
+//    *  *
+//   *  *
+//  *  *
+// *  *
+// *  **************
+// *               *
+// *****************
+@media only screen and (min-width: 1440px) {
+    .floating-bloc.teaser {
+        padding: 0 0 25vw;
+    }
+    .floating-bloc {
+        padding: 5vw 0 4vw;
+
+        .text_teaser {
+            bottom: -50%;
+
+            p,
+            span {
+                font-size: 2rem;
+                line-height: 2rem;
+            }
+            .compteur {
+                & > div {
+                    p {
+                        font-size: 1rem;
+                    }
+                    .count {
+                        width: 4rem;
+                        height: 4rem;
+                    }
+                    span {
+                        font-size: 2rem;
+                        line-height: 4rem;
+                    }
+                }
+            }
+        }
+        .floating--txt {
+            .floating--gift {
+                .lot2--img {
+                    img {
+                        //height: 100%;
+                        width: unset;
+                    }
+                }
+                .gift--img {
+                    img {
+                        width: 100%;
+                    }
+                }
+            }
+        }
+        .main-btn {
+            left: -5vw;
+            bottom: -2vw;
+        }
+    }
+}
+
+.floating--gift {
+    flex-direction: initial;
+    .gift--lot1,
+    .gift--lot2 {
+        align-self: initial;
+    }
+    .gift--img {
+        transform: rotate(5deg);
+        //width: unset;
+        //height:unset;
+        //align-self: initial;
+    }
+    .lot2--img {
+        // position: absolute;
+        // height: 100%;
+        // right: 1vw;
+        // top: -7rem;
+        transform: translate(5%) rotate(5deg);
+        align-self: initial;
+        img {
+            //height: 100%;
+            width: 100%;
+        }
+    }
+}
+
+//  ************
+//  *          ****
+//  *********      *
+//          *****  *
+//            **   *
+//           **   *
+//  **********   *
+//  *            *
+//  *********     *
+//          *****  *
+//            **   *
+//           **    *
+//  **********    *
+//  *          ***
+//  ************
+@media only screen and (min-width: 1920px) {
+    .floating-bloc {
+        top: -1vw;
+
+        .text_teaser {
+            bottom: -40%;
+
+            p,
+            span {
+                font-size: 2rem;
+                line-height: 2rem;
+            }
+            .compteur {
+                & > div {
+                    p {
+                        font-size: 1rem;
+                    }
+                    .count {
+                        width: 4rem;
+                        height: 4rem;
+                    }
+                    span {
+                        font-size: 2rem;
+                        line-height: 4rem;
+                    }
+                }
+            }
+        }
+    }
+    //.gift-bloc .swiper--txt .bloc--rotate{margin: 0 15vw 0 0;}
+}

resources/front/sass/produits.scss

@@ -0,0 +1,132 @@
+.produits {
+    .main--bloc.flex {
+        flex-direction: column;
+    }
+    .products--list.flex {
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+
+        .product {
+            padding: 0.5em;
+            font-size: 5em;
+            text-align: center;
+            width: 30vw;
+            font-family: "Raleway-Medium", Arial, Helvetica, sans-serif;
+            img {
+                width: 100%;
+                height: 30vw;
+                object-fit: contain;
+            }
+        }
+    }
+    section {
+        padding: 2vw 3vw 10vw;
+    }
+    h1 {
+        text-transform: uppercase;
+        text-align: center;
+        color: $tertiary;
+        margin: 2vw 0 4vw;
+    }
+    h2 {
+        text-transform: uppercase;
+        color: $primary;
+        text-align: center;
+    }
+    p {
+        font-family: "Raleway-Medium", Arial, Helvetica, sans-serif;
+        color: $noir;
+
+        &::after {
+            content: "";
+            display: block;
+            width: 20%;
+            height: 3px;
+            background-color: $primary;
+            margin: 3vw auto;
+        }
+    }
+}
+
+// *************************
+// **                     **
+// *************************
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          *******
+
+@media only screen and (min-width: 768px) {
+    .produits {
+        .products--list.flex {
+            .product {
+                font-size: 2em;
+                width: 12vw;
+                img {
+                    height: 12vw;
+                }
+            }
+        }
+    }
+}
+
+// ****
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// ****
+
+@media only screen and (min-width: 1024px) {
+}
+
+//    ********
+//  *  *****  *
+// *  *     *   *
+// ***        *  *
+//           *  *
+//          *  *
+//         *  *
+//        *  *
+//       *  *
+//      *  *
+//     *  *
+//    *  *
+//   *  *
+//  *  *
+// *  *
+// *  **************
+// *               *
+// *****************
+@media only screen and (min-width: 1440px) {
+}
+
+//  ************
+//  *          ****
+//  *********      *
+//          *****  *
+//            **   *
+//           **   *
+//  **********   *
+//  *            *
+//  *********     *
+//          *****  *
+//            **   *
+//           **    *
+//  **********    *
+//  *          ***
+//  ************
+@media only screen and (min-width: 1920px) {
+}

resources/front/sass/reghalal.scss

@@ -0,0 +1,2 @@
+@import '../css/cookies-ldc.css';
+@import 'styles';

resources/front/sass/reset.scss

@@ -0,0 +1,368 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0-modified | 20110126
+   License: none (public domain)
+*/
+* {box-sizing: border-box;}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+    vertical-align: baseline;
+}
+
+/* make sure to set some focus styles for accessibility */
+:focus {
+    outline: 0;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+
+body {
+	line-height: 1;
+}
+
+ol, ul {
+	list-style: none;
+}
+
+blockquote, q {
+	quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+input[type=search] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+textarea {
+    overflow: auto;
+    vertical-align: top;
+    resize: vertical;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    max-width: 100%;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/**
+ * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
+ *    `em` units.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-size: 100%; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/**
+ * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improve image quality when scaled in IE 7.
+ */
+
+img {
+    border: 0; /* 1 */
+    -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/**
+ * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+
+figure {
+    margin: 0;
+}
+
+/**
+ * Correct margin displayed oddly in IE 6/7.
+ */
+
+form {
+    margin: 0;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct color not being inherited in IE 6/7/8/9.
+ * 2. Correct text not wrapping in Firefox 3.
+ * 3. Correct alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0;
+    white-space: normal; /* 2 */
+    *margin-left: -7px; /* 3 */
+}
+
+/**
+ * 1. Correct font size not being inherited in all browsers.
+ * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *    and Chrome.
+ * 3. Improve appearance and consistency in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+    margin: 0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+}
+
+/**
+ * Address Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+    *overflow: visible;  /* 4 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to content-box in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ * 3. Remove excess padding in IE 7.
+ *    Known issue: excess padding remains in IE 6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 3+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+html,
+button,
+input,
+select,
+textarea {
+    color: #222;
+}
+
+
+::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+img {
+    vertical-align: middle;
+}
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+textarea {
+    resize: vertical;
+}
+
+.chromeframe {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+}
+

resources/front/sass/spinning-wheel.scss

@@ -0,0 +1,359 @@
+// * {
+//     margin: 0;
+//     padding: 0;
+// }
+
+// body {
+//     background: #eaeaea;
+//     color: #fff;
+//     font-size: 18px;
+//     font-family: "Exo 2", sans-serif;
+// }
+
+// a {
+//     color: #34495e;
+// }
+
+.congratulate {
+    /*WRAPPER*/
+    #wrapper {
+        margin: 40px auto 0;
+        width: 266px;
+        position: relative;
+        * {
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    #txt {
+        color: #eaeaea;
+    }
+
+    /*WHEEL*/
+    #wheel {
+        width: 250px;
+        height: 250px;
+        border-radius: 50%;
+        position: relative;
+        overflow: hidden;
+        border: 8px solid #fff;
+        box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px, rgba(0, 0, 0, 0.05) 0px 3px 0px;
+        transform: rotate(0deg);
+        margin: 0;
+
+        &:before {
+            content: "";
+            position: absolute;
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            width: 242px;
+            height: 242px;
+            border-radius: 50%;
+            z-index: 1000;
+        }
+    }
+
+    #inner-wheel {
+        width: 100%;
+        height: 100%;
+
+        -webkit-transition: all 6s cubic-bezier(0, 0.99, 0.44, 0.99);
+        -moz-transition: all 6 cubic-bezier(0, 0.99, 0.44, 0.99);
+        -o-transition: all 6s cubic-bezier(0, 0.99, 0.44, 0.99);
+        -ms-transition: all 6s cubic-bezier(0, 0.99, 0.44, 0.99);
+        transition: all 6s cubic-bezier(0, 0.99, 0.44, 0.99);
+    }
+
+    #wheel div.sec {
+        position: absolute;
+        // width: 0;
+        // height: 0;
+        // border-style: solid;
+        // border-width: 125px 125px 0;
+        // border-color: #19c transparent;
+        width: 250px;
+        height: 125px;
+        transform-origin: 125px 125px;
+        left: -4px;
+        top: -4px;
+        opacity: 1;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: auto;
+        background-origin: border-box;
+        // background-image: url(/front/assets/images/br-spin.png);
+    }
+
+    #wheel div.sec:nth-child(1) {
+        transform: rotate(90deg);
+        -webkit-transform: rotate(90deg);
+        -moz-transform: rotate(90deg);
+        -o-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+        border-color: #16a085 transparent;
+        // border-image: url("/front/assets/images/br-spin.png") 10 fill / 30px / 30px space;
+        background-image: url("/front/assets/images/br-spin.png");
+    }
+    #wheel div.sec:nth-child(2) {
+        transform: rotate(180deg);
+        -webkit-transform: rotate(180deg);
+        -moz-transform: rotate(180deg);
+        -o-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+        border-color: #2980b9 transparent;
+        // border-image: url("/front/assets/images/wb-happy-spin.png") 10 fill / 30px / 30px space;
+        background-image: url("/front/assets/images/wb-happy-spin.png");
+    }
+    #wheel div.sec:nth-child(3) {
+        transform: rotate(270deg);
+        -webkit-transform: rotate(270deg);
+        -moz-transform: rotate(270deg);
+        -o-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+        border-color: #34495e transparent;
+        // border-image: url("/front/assets/images/br-spin.png") 10 fill / 30px / 30px space;
+        background-image: url("/front/assets/images/br-spin.png");
+    }
+    #wheel div.sec:nth-child(4) {
+        transform: rotate(360deg);
+        -webkit-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        border-color: #f39c12 transparent;
+        // border-image: url("/front/assets/images/wb-famille-spin.png") 10 fill / 30px / 30px space;
+        background-image: url("/front/assets/images/wb-famille-spin.png");
+    }
+    // #wheel div.sec:nth-child(5) {
+    //     transform: rotate(300deg);
+    //     -webkit-transform: rotate(300deg);
+    //     -moz-transform: rotate(300deg);
+    //     -o-transform: rotate(300deg);
+    //     -ms-transform: rotate(300deg);
+    //     border-color: #d35400 transparent;
+    // }
+    // #wheel div.sec:nth-child(6) {
+    //     transform: rotate(360deg);
+    //     -webkit-transform: rotate(360deg);
+    //     -moz-transform: rotate(360deg);
+    //     -o-transform: rotate(360deg);
+    //     -ms-transform: rotate(360deg);
+    //     border-color: #c0392b transparent;
+    // }
+
+    #wheel div.sec .fab {
+        margin-top: -100px;
+        color: rgba(0, 0, 0, 0.2);
+        position: relative;
+        z-index: 10000000;
+        display: block;
+        text-align: center;
+        font-size: 36px;
+        margin-left: -15px;
+
+        text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
+    }
+
+    #spin {
+        width: 68px;
+        height: 68px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: -34px 0 0 -34px;
+        border-radius: 50%;
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 0px;
+        z-index: 1000;
+        background: #fff;
+        cursor: pointer;
+        font-family: "Exo 2", sans-serif;
+
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -o-user-select: none;
+        user-select: none;
+    }
+
+    #spin:after {
+        content: "LANCER";
+        text-align: center;
+        line-height: 68px;
+        color: #000;
+        text-shadow: 0 2px 0 #fff, 0 -1px 0 rgba(0, 0, 0, 0.3);
+        position: relative;
+        z-index: 100000;
+        width: 68px;
+        height: 68px;
+        display: block;
+        font-size: 12px;
+    }
+
+    #spin:before {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 0 20px 28px 20px;
+        border-color: transparent transparent #ffffff transparent;
+        top: -12px;
+        left: 14px;
+    }
+
+    #inner-spin {
+        width: 54px;
+        height: 54px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: -27px 0 0 -27px;
+        border-radius: 50%;
+        background: red;
+        z-index: 999;
+        box-shadow: rgba(255, 255, 255, 1) 0px -2px 0px inset, rgba(255, 255, 255, 1) 0px 2px 0px inset,
+            rgba(0, 0, 0, 0.4) 0px 0px 5px;
+
+        background: rgb(255, 255, 255); /* Old browsers */
+        background: -moz-radial-gradient(
+            center,
+            ellipse cover,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(234, 234, 234, 1) 100%
+        ); /* FF3.6+ */
+        background: -webkit-gradient(
+            radial,
+            center center,
+            0px,
+            center center,
+            100%,
+            color-stop(0%, rgba(255, 255, 255, 1)),
+            color-stop(100%, rgba(234, 234, 234, 1))
+        ); /* Chrome,Safari4+ */
+        background: -webkit-radial-gradient(
+            center,
+            ellipse cover,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(234, 234, 234, 1) 100%
+        ); /* Chrome10+,Safari5.1+ */
+        background: -o-radial-gradient(
+            center,
+            ellipse cover,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(234, 234, 234, 1) 100%
+        ); /* Opera 12+ */
+        background: -ms-radial-gradient(
+            center,
+            ellipse cover,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(234, 234, 234, 1) 100%
+        ); /* IE10+ */
+        background: radial-gradient(
+            ellipse at center,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(234, 234, 234, 1) 100%
+        ); /* W3C */
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+    }
+
+    #spin:active #inner-spin {
+        box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px inset;
+    }
+
+    #spin:active:after {
+        font-size: 15px;
+    }
+
+    #shine {
+        width: 250px;
+        height: 250px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: -moz-radial-gradient(
+            center,
+            ellipse cover,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(255, 255, 255, 0.99) 1%,
+            rgba(255, 255, 255, 0.91) 9%,
+            rgba(255, 255, 255, 0) 100%
+        ); /* FF3.6+ */
+        background: -webkit-gradient(
+            radial,
+            center center,
+            0px,
+            center center,
+            100%,
+            color-stop(0%, rgba(255, 255, 255, 1)),
+            color-stop(1%, rgba(255, 255, 255, 0.99)),
+            color-stop(9%, rgba(255, 255, 255, 0.91)),
+            color-stop(100%, rgba(255, 255, 255, 0))
+        ); /* Chrome,Safari4+ */
+        background: -webkit-radial-gradient(
+            center,
+            ellipse cover,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(255, 255, 255, 0.99) 1%,
+            rgba(255, 255, 255, 0.91) 9%,
+            rgba(255, 255, 255, 0) 100%
+        ); /* Chrome10+,Safari5.1+ */
+        background: -o-radial-gradient(
+            center,
+            ellipse cover,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(255, 255, 255, 0.99) 1%,
+            rgba(255, 255, 255, 0.91) 9%,
+            rgba(255, 255, 255, 0) 100%
+        ); /* Opera 12+ */
+        background: -ms-radial-gradient(
+            center,
+            ellipse cover,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(255, 255, 255, 0.99) 1%,
+            rgba(255, 255, 255, 0.91) 9%,
+            rgba(255, 255, 255, 0) 100%
+        ); /* IE10+ */
+        background: radial-gradient(
+            ellipse at center,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(255, 255, 255, 0.99) 1%,
+            rgba(255, 255, 255, 0.91) 9%,
+            rgba(255, 255, 255, 0) 100%
+        ); /* W3C */
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+
+        opacity: 0.1;
+    }
+
+    /*ANIMATION*/
+    @-webkit-keyframes hh {
+        0%,
+        100% {
+            transform: rotate(0deg);
+            -webkit-transform: rotate(0deg);
+        }
+
+        50% {
+            transform: rotate(7deg);
+            -webkit-transform: rotate(7deg);
+        }
+    }
+
+    @keyframes hh {
+        0%,
+        100% {
+            transform: rotate(0deg);
+            -webkit-transform: rotate(0deg);
+        }
+
+        50% {
+            transform: rotate(7deg);
+            -webkit-transform: rotate(7deg);
+        }
+    }
+
+    .spin {
+        -webkit-animation: hh 0.1s; /* Chrome, Safari, Opera */
+        animation: hh 0.1s;
+    }
+}

resources/front/sass/styles.scss

@@ -0,0 +1,19 @@
+@import "reset";
+@import "swiper/swiper-bundle.min.css";
+@import "@fortawesome/fontawesome-free/css/all.min.css";
+@import "@fancyapps/fancybox/dist/jquery.fancybox.min.css";
+@import "lib/mixins.scss";
+@import "lib/functions.scss";
+@import "lib/variables.scss";
+@import "lib/fonts.scss";
+@import "common";
+@import "header";
+@import "main";
+@import "connect";
+@import "congratulate";
+@import "spinning-wheel.scss";
+@import "legals";
+@import "faq";
+@import "teaser";
+@import "produits";
+@import "footer";

resources/front/sass/teaser.scss

@@ -0,0 +1,193 @@
+.teaser {
+    &.floating {
+        overflow-x: unset;
+    }
+    .floating-bloc {
+        .text_teaser {
+            bottom: -4vh;
+            left: -10vw;
+            position: relative;
+            transform: translate(0%, 0%) rotate(0deg);
+        }
+        .floating--txt .floating--gift .floating--sticker {
+            left: 0;
+            top: 0;
+            transform: translate(-180%, -35%) rotate(13deg);
+            width: 10vw;
+        }
+    }
+}
+
+
+// *************************
+// **                     **
+// *************************
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          **   **
+//          *******
+
+@media only screen and (min-width:768px) {
+    .teaser {
+        .floating-bloc {
+            .floating--txt {
+                width:inherit;
+                .post-subtitle {
+                    font-size: 5em;
+                }
+            }
+            .text_teaser {
+                bottom: -1vh;
+                left: -19vw;
+                position: relative;
+                transform: translate(0%, 0%) rotate(5deg);
+            }
+            .floating--gift {
+                .gift--lot1 .post-chapter,
+                .gift--lot2 .post-chapter
+                {
+                    font-size: 4em;
+                }
+                .gift--br {
+                    position: relative;
+                    left: -12vw;
+                    p {
+                        font-size: 2.5em;
+                    }
+                }
+            }
+        }
+    }
+
+    footer {
+        &.teaser {
+            .footer--logo {
+                right: 13vw;
+            }
+        }
+    }
+}
+
+// ****
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// *  *
+// ****
+
+@media only screen and (min-width:1024px) {
+    .teaser {
+        .floating-bloc {
+            .floating--txt {
+                width:55%;
+                .post-subtitle {
+                    font-size: 3em;
+                }
+            }
+            .text_teaser {
+                bottom: 3vw;
+                left: -19vw;
+                position: relative;
+                transform: translate(0%, 0%) rotate(5deg);
+            }
+            .floating--title .post-title img {
+                height: initial;
+                transform: translate(0%, 0%) rotate(0deg);
+                top:0;
+                object-fit: contain;
+            }
+            .floating--gift {
+                .gift--lot1 .post-chapter,
+                .gift--lot2 .post-chapter
+                {
+                    font-size: 2em;
+                }
+                .gift--br {
+                    position: inherit;
+                    left: 0;
+                    p {
+                        font-size: 1.5em;
+                    }
+                }
+            }
+        }
+    }
+
+    footer {
+        &.teaser {
+            .footer--logo {
+                right: 7vw;
+            }
+        }
+    }
+}
+
+//    ********
+//  *  *****  *
+// *  *     *   *
+// ***        *  *
+//           *  *
+//          *  *
+//         *  *
+//        *  *
+//       *  *
+//      *  *
+//     *  *
+//    *  *
+//   *  *
+//  *  *
+// *  *
+// *  **************
+// *               *
+// *****************
+@media only screen and (min-width: 1440px) {
+    .teaser {
+        .floating-bloc {
+            .text_teaser {
+                bottom: 0vw;
+                left: -19vw;
+                position: relative;
+            }
+        }
+    }
+}
+
+//  ************
+//  *          ****
+//  *********      *
+//          *****  *
+//            **   *
+//           **   *
+//  **********   *
+//  *            *
+//  *********     *
+//          *****  *
+//            **   *
+//           **    *
+//  **********    *
+//  *          ***
+//  ************
+@media only screen and (min-width: 1920px) {
+    .teaser {
+        .floating-bloc {
+            .text_teaser {
+                bottom: 0vw;
+                left: -19vw;
+                position: relative;
+            }
+        }
+    }
+}
+

resources/js/basic.js

@@ -0,0 +1,167 @@
+import Swiper from 'swiper/swiper-bundle';
+import { ScratchCard, SCRATCH_TYPE } from 'scratchcard-js'
+require('./bootstrap');
+require('@fancyapps/fancybox');
+
+$(document).ready(function () {
+
+
+    // BOUTON HAUT DE PAGE
+    $(window).on('scroll', function () {
+        if ($(window).scrollTop()) {
+            $('.pageup').addClass('see')
+        }
+        else {
+            $('.pageup').removeClass('see')
+        }
+    })
+
+    $('.toggle-menu').click(function () {
+        $(this).toggleClass('active');
+        $('nav').toggleClass('active');
+        $('body').toggleClass('mobile-nav-active');
+    })
+    $('ul li a').click(function () {
+        const body = document.querySelector('body');
+        if (body.classList.contains('mobile-nav-active')) {
+            $('.toggle-menu').toggleClass('active');
+            $('nav').toggleClass('active');
+            $('body').toggleClass('mobile-nav-active');
+        }
+    })
+    // $('.close-menu').click(function(){
+    //   $('nav').removeClass('active')
+    //   $('li').siblings().removeClass('active')
+    // })
+
+    var mySwiper = new Swiper('.swiper-container', {
+        // Optional parameters
+        direction: 'horizontal',
+        loop: true,
+        autoplay: {
+            delay: 8000,
+        },
+        pagination: {
+            el: '.gift-bloc .swiper-pagination',
+            type: 'bullets',
+            clickable: true,
+        },
+    })
+
+    //wheel spin
+
+    /*WHEEL SPIN FUNCTION*/
+    $('#spin').click(function () {
+
+        //add 1 every click
+        clicks++;
+
+        /*multiply the degree by number of clicks
+      generate random number between 1 - 85,
+    then add to the new degree*/
+        var newDegree = degree * clicks;
+        var extraDegree = Math.floor(Math.random() * (85 - 1 + 1)) + 1;
+        var totalDegree = newDegree + extraDegree;
+        // totalDegree = 1710; //vert => BR
+        // totalDegree = 1620; //bleu => happy
+        // totalDegree = 1530; //bleu foncé => BR
+        //1440 //jaune => loisir
+        totalDegree = thisWinAngle + extraDegree;
+
+        /*let's make the spin btn to tilt every
+        time the edge of the section hits
+        the indicator*/
+        $('#wheel .sec').each(function () {
+            var t = $(this);
+            // 	var noY = 0;
+
+            $('#inner-wheel').css({
+                'transform': 'rotate(' + totalDegree + 'deg)'
+            });
+
+            setTimeout(function () {
+                $(".congratulate .main--bloc").css('display', 'block');
+                $(".register .main--bloc").css('display', 'block');
+                $(".sc__wrapper").hide();
+            }, 6000);
+        });
+    });
+
+    const scContainer = document.getElementById('js--sc--container')
+    if (scContainer != null) {
+        const scInfos = document.querySelector('.sc__infos');
+        const sc = new ScratchCard('#js--sc--container', {
+            scratchType: SCRATCH_TYPE.LINE,
+            containerWidth: scContainer.offsetWidth,
+            containerHeight: scContainer.offsetHeight,
+            imageForwardSrc: '/front/assets/images/grattage.png',
+            imageBackgroundSrc: '',
+            htmlBackground: '',
+            clearZoneRadius: 50,
+            nPoints: 30,
+            pointSize: 8,
+            callback: function () {
+                // alert('Now the window will reload !')
+                // window.location.reload()
+                $(".congratulate .main--bloc").css('display', 'block');
+                $(".register .main--bloc").css('display', 'block');
+                $(".sc__wrapper").hide();
+            }
+        })
+
+        // Init
+        sc.init().then(() => {
+            // sc.canvas.addEventListener('scratch.move', () => {
+            //   let percent = sc.getPercent().toFixed(0);
+            //   scInfos.innerHTML = percent + '%';
+            //   console.log(percent)
+            // })
+        }).catch((error) => {
+            // image not loaded
+            alert(error.message);
+        });
+    }
+
+
+    function CompteARebours() {
+
+        // DECLARATION
+        var date_actuelle = new Date(); // On déclare la date d'aujourd'hui
+        // Ici c'est du sale !
+        var date = __TEASEREND.split(' ')[0].split('-')
+        var annee = date[0];
+        var mois = date[1];
+        var jour = date[2];
+
+        var date_ouverture = new Date(annee, mois - 1, jour, 0, 0, 0); // On déclare la date, attention mois -1
+        var tps_restant = date_ouverture.getTime() - date_actuelle.getTime(); // Temps restant en millisecondes
+
+        // CONVERSIONS
+        var s_restantes = tps_restant / 1000; // On convertit en secondes
+        var i_restantes = s_restantes / 60;
+        var H_restantes = i_restantes / 60;
+        var d_restants = H_restantes / 24;
+        var hours = H_restantes % 24;
+        var min = Math.floor((hours % 1) * 60);
+        hours = Math.floor(hours);
+        d_restants = Math.floor(d_restants); // Jours restants
+        if (d_restants < 10) {
+            d_restants = '0' + d_restants;
+        }
+        if (hours < 10) {
+            hours = '0' + hours;
+        }
+        if (min < 10) {
+            min = '0' + min;
+        }
+        // AFFICHAGE
+        $(".compteur .jours span").html(d_restants);
+        $(".compteur .heures span").html(hours);
+        $(".compteur .minutes span").html(min);
+
+    }
+    if (typeof __TEASEREND !== 'undefined') {
+        CompteARebours();
+    }
+
+})

resources/js/ldcweb-cn.js

@@ -0,0 +1,371 @@
+/**
+ * LDC Service Web
+ * Version 1.3
+ */
+
+class LdcwebCn {
+    constructor(config) {
+        this.config = config;
+        this.cookieContainer = document.getElementById("ldcweb-cn");
+        this.bannerContainer = document.querySelector(".ldcweb-cn-banner");
+        this.bannerBtn = document.querySelector(".ldcweb-banner-btnDetails-p");
+        this.ldcwebBtn = document.querySelector(".ldcweb-btn");
+        this.ldcwebBannerParaP = document.querySelector(".ldcweb-banner-para-p");
+        this.ldcwebBannerContent = document.querySelector(".ldcweb-banner-content");
+        this.ldcwebBannerDetails = document.querySelector(".ldcweb-banner-details");
+        this.ldcwebBannerBtnDetails = document.querySelector(".ldcweb-banner-btnDetails");
+        this.modalContainer = document.getElementById("ldcweb-cn-modal");
+        this.acceptAllBtnBanner = document.getElementById("ldcweb-cn-accept-banner");
+        this.denyAllBtnBanner = document.getElementById("ldcweb-cn-deny-banner");
+        this.personalizeBtn = document.getElementsByClassName("ldcweb-cn-personalize");
+        this.personalizeBtnBanner = document.querySelector(".ldcweb-cn-personalize")
+        this.changeBtn = document.getElementsByClassName("ldcweb-cn-change");
+        this.cookiesList = document.getElementById("ldcweb-cn-list");
+        this.cookieLink = document.querySelector(".ldcweb-cn-cookie-link");
+        this.modalDetails = document.querySelector('.modal-details');
+        this.template = document.getElementById("template").cloneNode(true);
+        this.modalBtnBoolean = 0;
+        this.bannerBtnTextBoolean = 0;
+        document.getElementById("template").remove();
+
+        let cookies = this.getLDCWebCookie("ldcwebcn-init");
+        if (cookies === undefined) {
+            let newCookie = [];
+
+            for (const [key] of Object.entries(this.config)) {
+                newCookie.push(key + "=wait");
+            }
+
+            this.bannerContainer.classList.add("ldcweb-cn-banner-open");
+
+            this.saveLDCWebCookie(newCookie);
+        } else {
+            let test = cookies.split(",");
+            test.forEach((elm) => {
+                let test = elm.split("=");
+                if (test[1] === "wait") {
+                    this.bannerContainer.classList.add("ldcweb-cn-banner-open");
+                }
+            });
+        }
+        let accept = function (e) {
+            e.preventDefault();
+            for (const [key, value] of Object.entries(this.config)) {
+                this.addCookie(key, value);
+            }
+            for (let acceptLabel of this.cookieContainer.querySelectorAll(
+                ".accept > label"
+            )) {
+                acceptLabel.classList.add("active");
+            }
+            for (let denyLabel of this.cookieContainer.querySelectorAll(
+                ".deny > label"
+            )) {
+                denyLabel.classList.remove("active");
+            }
+            this.updateAllCookiesButtonsActiveStatus();
+            this.bannerContainer.classList.remove("ldcweb-cn-banner-open");
+        }.bind(this);
+        this.acceptAllBtnBanner.addEventListener("click", accept);
+
+        let deny = function (e) {
+            e.preventDefault();
+            for (const [key, value] of Object.entries(this.config)) {
+                this.removeCookie(key, value);
+            }
+            for (let acceptLabel of this.cookieContainer.querySelectorAll(
+                ".accept > label"
+            )) {
+                acceptLabel.classList.remove("active");
+            }
+            for (let denyLabel of this.cookieContainer.querySelectorAll(
+                ".deny > label"
+            )) {
+                denyLabel.classList.add("active");
+            }
+            this.updateAllCookiesButtonsActiveStatus();
+            this.bannerContainer.classList.remove("ldcweb-cn-banner-open");
+        }.bind(this);
+        this.denyAllBtnBanner.addEventListener("click", deny);
+
+        let openLdcwebCookies = function (e) {
+            e.preventDefault();
+            this.bannerContainer.classList.add("ldcweb-cn-banner-open");
+            this.ldcwebBannerContent.classList.add("visibility");
+            this.ldcwebBannerDetails.classList.add("visibility");
+            this.ldcwebBannerBtnDetails.classList.add("visibility");
+            this.modalContainer.classList.remove("visibility");
+            this.personalizeBtnBanner.innerHTML = this.personalizeBtnBanner.getAttribute("data-open-modal");
+            this.modalBtnBoolean = 1;
+            this.modalDetails.scrollTop = 0;
+            this.openModal()
+        }.bind(this)
+        this.cookieLink.addEventListener("click", openLdcwebCookies);
+
+        let hideModal = function (e) {
+            e.preventDefault();
+            this.ldcwebBannerContent.classList.toggle("visibility");
+            this.ldcwebBannerDetails.classList.toggle("visibility");
+            this.ldcwebBannerBtnDetails.classList.toggle("visibility");
+            this.modalContainer.classList.toggle("visibility");
+            this.setCookieList();
+        }.bind(this)
+        this.personalizeBtnBanner.addEventListener("click", hideModal);
+
+        let changeBtnPersonalize = function (e) {
+            e.preventDefault();
+            this.modalDetails.scrollTop = 0;
+            if (this.modalBtnBoolean === 0) {
+                this.personalizeBtnBanner.innerHTML = this.personalizeBtnBanner.getAttribute("data-open-modal");
+                this.modalBtnBoolean = 1;
+            }
+            else {
+                this.personalizeBtnBanner.innerHTML = this.personalizeBtnBanner.getAttribute("data-close-modal");
+                this.modalBtnBoolean = 0;
+            }
+        }.bind(this);
+        this.personalizeBtnBanner.addEventListener("click", changeBtnPersonalize);
+
+        this.setListenerOnChange();
+
+        let cookie = this.getLDCWebCookie("ldcwebcn-init");
+        let test = cookie.split(",");
+        test.forEach((elm) => {
+            let test = elm.split("=");
+            if (test[1] === "true") {
+                this.config[test[0]].script();
+            }
+        });
+
+        this.updateAllCookiesButtonsActiveStatus();
+
+        let changePara = function (e) {
+            e.preventDefault();
+            this.ldcwebBannerDetails.classList.toggle("ldcweb-banner-details-open");
+            this.bannerBtn.classList.toggle("ldcweb-banner-btnDetails-p-open");
+            if (this.bannerBtnTextBoolean === 0) {
+                e.target.innerHTML = e.target.getAttribute("data-open");
+                this.ldcwebBannerParaP.innerHTML = this.ldcwebBannerParaP.getAttribute("data-open");
+                this.ldcwebBannerDetails.style.height = this.ldcwebBannerDetails.children[0].clientHeight + 10 + "px"
+                this.bannerBtnTextBoolean = 1;
+            }
+            else {
+                e.target.innerHTML = e.target.getAttribute("data-close");
+                this.ldcwebBannerParaP.innerHTML = this.ldcwebBannerParaP.getAttribute("data-close");
+                this.ldcwebBannerDetails.style.height = "0px"
+                this.bannerBtnTextBoolean = 0;
+            }
+        }.bind(this);
+        this.bannerBtn.addEventListener("click", changePara);
+
+        let resetVue = function (e) {
+            e.preventDefault();
+            this.bannerContainer.classList.toggle("ldcweb-cn-banner-open")
+            if (this.bannerContainer.classList.contains("ldcweb-cn-banner-open")) {
+                this.ldcwebBannerContent.classList.remove("visibility"),
+                    this.ldcwebBannerDetails.classList.remove("visibility"),
+                    this.ldcwebBannerBtnDetails.classList.remove("visibility"),
+                    this.modalContainer.classList.add("visibility");
+                this.personalizeBtnBanner.innerHTML = this.personalizeBtnBanner.getAttribute("data-close-modal");
+                this.modalBtnBoolean = 0;
+            }
+        }.bind(this);
+        this.ldcwebBtn.addEventListener("click", resetVue);
+    }
+
+    setCookieList() {
+        this.cookiesList.innerHTML = "";
+        let cookiesSite = this.getLDCWebCookie("ldcwebcn-init");
+        let acceptInputEvent = function (acceptLabel, denyLabel, key, value) {
+            return function () {
+                acceptLabel.classList.add("active");
+                denyLabel.classList.remove("active");
+                this.updateAllCookiesButtonsActiveStatus();
+                this.addCookie(key, value);
+            }.bind(this, [acceptLabel, denyLabel, key, value]);
+        };
+        let denyInputEvent = function (acceptLabel, denyLabel, key, value) {
+            return function () {
+                acceptLabel.classList.remove("active");
+                denyLabel.classList.add("active");
+                this.updateAllCookiesButtonsActiveStatus();
+                this.removeCookie(key, value);
+            }.bind(this, [acceptLabel, denyLabel, key, value]);
+        };
+
+        for (const [key, value] of Object.entries(this.config)) {
+            let cookie = document.createElement("li");
+            cookie.append(this.template.children.item(0).cloneNode(true));
+            let name = cookie.querySelector("span.ldcweb-cn-name");
+            let description = cookie.querySelector("span.ldcweb-cn-description");
+            let link = cookie.querySelector("a.ldcweb-cn-link");
+            let acceptInput = cookie.querySelector(".accept > input");
+            let denyInput = cookie.querySelector(".deny > input");
+            let acceptLabel = cookie.querySelector(".accept > label");
+            let denyLabel = cookie.querySelector(".deny > label");
+
+            name.textContent = value.name;
+            description.textContent = value.description;
+            link.textContent = value.labelLink;
+            link.setAttribute("href", value.link);
+            acceptInput.id = key + "1";
+            acceptInput.name = key;
+            acceptInput.dataset.name = key;
+            acceptLabel.htmlFor = key + "1";
+            denyInput.id = key + "2";
+            denyInput.name = key;
+            denyInput.dataset.name = key;
+            denyLabel.htmlFor = key + "2";
+
+            acceptInput.addEventListener(
+                "click",
+                acceptInputEvent.apply(this, [acceptLabel, denyLabel, key, value])
+            );
+            denyInput.addEventListener(
+                "click",
+                denyInputEvent.apply(this, [acceptLabel, denyLabel, key, value])
+            );
+
+            this.cookiesList.append(cookie);
+
+            let cookiesArray = cookiesSite.split(",");
+            for (const cookieEl of cookiesArray) {
+                let name = cookieEl.slice(0, cookieEl.indexOf("="));
+                let status = cookieEl.slice(cookieEl.indexOf("=") + 1);
+                if (name === key) {
+                    acceptLabel.classList.remove("active");
+                    denyLabel.classList.remove("active");
+                    switch (status) {
+                        case "true":
+                            acceptLabel.classList.add("active");
+                            break;
+                        case "false":
+                            denyLabel.classList.add("active");
+                            break;
+                    }
+                }
+            }
+        }
+        this.setListenerOnChange();
+    }
+
+    updateAllCookiesButtonsActiveStatus() {
+        let acceptsButtons = this.cookieContainer.querySelectorAll("div.accept > label");
+        let deniesButtons = this.cookieContainer.querySelectorAll("div.deny > label");
+        let activeAcceptsButtons = this.cookieContainer.querySelectorAll("div.accept >  label.active");
+        let activeDeniesButtons = this.cookieContainer.querySelectorAll("div.deny > label.active");
+
+        if (acceptsButtons.length && acceptsButtons.length === activeAcceptsButtons.length) {
+        }
+        if (deniesButtons.length && deniesButtons.length === activeDeniesButtons.length) {
+        }
+    }
+
+    addCookie(key, value) {
+        if (value.script) {
+            value.script();
+        }
+        this.changeStatus(key, "true");
+    }
+
+    removeCookie(key, value) {
+        for (let cookieName of value.cookies) {
+            this.deleteBrowserCookie(cookieName, "/", "." + location.host);
+        }
+        if (document.getElementById(key)) {
+            document.getElementById(key).remove();
+        }
+        this.changeStatus(key, "false");
+    }
+    setListenerOnChange() {
+        this.changeBtn = document.getElementsByClassName("ldcweb-cn-change");
+        let itemClick = function (item) {
+            return function () {
+                this.changeStatus(
+                    item.getAttribute("data-name"),
+                    item.getAttribute("data-status")
+                );
+            }.bind(this);
+        };
+        for (let item of this.changeBtn) {
+            this.addEvent(item, "click", itemClick.bind(this, [item]));
+        }
+    }
+
+    changeStatus(name, status) {
+        let newCookie = [];
+
+        let cookie = this.getLDCWebCookie("ldcwebcn-init");
+        let test = cookie.split(",");
+        test.forEach((elm) => {
+            let test = elm.split("=");
+            if (test[0] === name) {
+                newCookie.push(name + "=" + status);
+                if (status === "false") {
+                    this.config[test[0]].cookies.forEach((elm) => {
+                        let cookies = this.getLDCWebCookie(elm);
+                        if (cookies !== undefined) {
+                            document.cookie =
+                                elm +
+                                "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=" +
+                                document.domain +
+                                "; path=/";
+                            document.cookie =
+                                elm +
+                                "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=." +
+                                document.domain +
+                                "; path=/";
+                        }
+                    });
+                }
+            } else {
+                newCookie.push(elm);
+            }
+        });
+
+        this.saveLDCWebCookie(newCookie);
+    }
+
+    deleteBrowserCookie(name, path, domain) {
+        if (this.getLDCWebCookie(name)) {
+            document.cookie =
+                name +
+                "=" +
+                (path ? ";path=" + path : "") +
+                (domain ? ";domain=" + domain : "") +
+                ";expires=Thu, 01 Jan 1970 00:00:01 GMT";
+        }
+    }
+
+    getLDCWebCookie(name) {
+        let matches = document.cookie.match(
+            new RegExp(
+                "(?:^|; )" +
+                name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") +
+                "=([^;]*)"
+            )
+        );
+        return matches ? decodeURIComponent(matches[1]) : undefined;
+    }
+
+    addEvent(element, evnt, funct) {
+        if (element.attachEvent) return element.attachEvent("on" + evnt, funct);
+        else return element.addEventListener(evnt, funct, false);
+    }
+
+    saveLDCWebCookie(content) {
+        let date = new Date();
+        let newDate = new Date(date.setMonth(date.getMonth() + 13));
+        document.cookie =
+            "ldcwebcn-init=" +
+            content +
+            "; expires=" +
+            newDate.toUTCString() +
+            "; path=/;";
+    }
+
+    openModal() {
+        this.setCookieList();
+        this.updateAllCookiesButtonsActiveStatus();
+    }
+}

resources/views/errors/404.blade.php

@@ -0,0 +1,16 @@
+@extends('front.basic.layout')
+
+@section('title', 'Erreur 404')
+
+@section('content')
+<div class="404 floating grid">
+    <div class="head-bloc"></div>
+    <section class="main--bloc container">
+        <h1 class="display-4">Page non trouvée</h1>
+        <p class="lead">La page que vous recherchez n'existe pas.</p>
+        <hr class="my-4">
+        <p>Cliquez sur le bouton ci-dessous pour retourner à l'accueil.</p>
+        <a class="btn btn-primary btn-lg" href="{{route('home')}}" role="button">Accueil</a>
+    </section>
+</div>
+@endsection

resources/views/front/basic/charte.blade.php

@@ -0,0 +1,13 @@
+@extends('front.basic.layout')
+
+@section('title', 'Charte')
+
+@section('content')
+    <div class="charte floating grid">
+        <div class="head-bloc"></div>
+        <section class="main--bloc container">
+            {!!$content->value!!}
+        </section>
+        
+    </div>
+@endsection

resources/views/front/basic/confirm-email.blade.php

@@ -0,0 +1,44 @@
+@extends('front.basic.layout')
+
+@section('title', 'Activation de votre compte')
+
+@section('content')
+    <div class="activate floating grid">
+        <div class="head-bloc"></div>
+        <section class="main--bloc container">
+        <div class="result flex">
+            <h1 class="post-title">Activation du compte</h1>
+            @if ($result === true)
+                <p>Compte activé avec succès, vous pouvez désormais vous connecter</p>
+                <div class="main-btn">
+                    <a href="{{route('login')}}">Se connecter</a>
+                </div>
+                @if (session('success'))
+                    <div class="alert alert-success">
+                        {{ session('success') }}
+                    </div>
+                @endif
+            @else
+                @if ($errors->any())
+                    <div class="alert alert-danger">
+                        <ul>
+                            @foreach ($errors->all() as $error)
+                                <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+                <div>
+                    <h1>Oups !</h1>
+                    <p>Votre compte n'a pu être activé. Le lien d'activation que vous avez reçu par mail doit être périmé.</p><br>
+                    <p>Cliquez sur le bouton ci-dessous pour vous inscrire.</p>
+                </div>
+                <div class="btn">
+                    <a href="{{ route('inscription') }}">Je m'inscris</a>
+                </div>
+            @endif
+        </div>
+        </section>
+
+    </div>
+@endsection

resources/views/front/basic/cookie.blade.php

@@ -0,0 +1,125 @@
+<div id="ldcweb-cn">
+    <a class="ldcweb-btn" title="Personnaliser les cookies">
+        <svg class="ldcweb-btn-icon" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.0001 2.93383C14.0001 4.16622 14.6159 5.25477 15.5567 5.90849C15.3526 6.46423 15.2412 7.06473 15.2412 7.69126C15.2412 10.5472 17.5564 12.8624 20.4123 12.8624C21.0807 12.8624 21.7195 12.7356 22.3059 12.5047C22.9456 13.527 24.0817 14.2069 25.3766 14.2069C26.1872 14.2069 26.9357 13.9404 27.539 13.4903C27.5453 13.6594 27.5484 13.8294 27.5484 14C27.5484 21.4826 21.4826 27.5484 14 27.5484C6.51748 27.5484 0.45166 21.4826 0.45166 14C0.45166 6.51748 6.51748 0.45166 14 0.45166C14.3209 0.45166 14.6391 0.462811 14.9543 0.484747C14.3618 1.12929 14.0001 1.98931 14.0001 2.93383ZM21.2176 2.53212C21.2195 2.54914 21.2213 2.56619 21.2229 2.58328C21.2569 2.58864 21.2909 2.59433 21.3247 2.60035C21.2891 2.57745 21.2534 2.5547 21.2176 2.53212ZM25.5171 6.86104C25.523 6.89745 25.5285 6.93399 25.5336 6.97066C25.5512 6.97141 25.5687 6.97228 25.5861 6.97328C25.5633 6.93574 25.5403 6.89833 25.5171 6.86104ZM12.5247 2.09283C12.4748 2.38291 12.4487 2.68118 12.4487 2.98553C12.4487 4.33316 12.9591 5.56158 13.7972 6.48802C13.7266 6.87842 13.6898 7.28054 13.6898 7.69126C13.6898 11.404 16.6996 14.4137 20.4123 14.4137C20.8725 14.4137 21.3219 14.3675 21.7562 14.2794C22.689 15.1941 23.9669 15.7582 25.3766 15.7582C25.5439 15.7582 25.7094 15.7503 25.8726 15.7347C25.0321 21.5385 20.0368 25.9971 14.0001 25.9971C7.37431 25.9971 2.00305 20.6258 2.00305 14.0001C2.00305 7.87378 6.59498 2.82 12.5247 2.09283Z" fill="#FF4E4E"/>
+            <circle cx="7.58784" cy="12.8624" r="1.96503" fill="#FF4E4E"/>
+            <circle cx="8.82887" cy="19.2745" r="1.3445" fill="#FF4E4E"/>
+            <circle cx="13.6897" cy="14.5171" r="1.03423" fill="#FF4E4E"/>
+            <circle cx="11.4144" cy="7.48439" r="0.930805" fill="#FF4E4E"/>
+            <circle cx="17.5164" cy="20.3089" r="1.86161" fill="#FF4E4E"/>
+            <circle cx="21.3432" cy="6.7604" r="0.930805" fill="#FF4E4E"/>
+            <circle cx="22.1706" cy="1.89958" r="1.44792" fill="#FF4E4E"/>
+            <circle cx="26.8245" cy="8.31185" r="0.72396" fill="#FF4E4E"/>
+        </svg>
+    </a>
+    <div id="ldcweb-banner" class="ldcweb-cn-banner">
+        <div class="ldcweb-banner-content">
+            <div class="ldcweb-banner-img">
+                <img src="{{ asset('front/assets/images/home_logo.png') }}" alt="Logo" />
+            </div>
+            <div class="ldcweb-banner-text">
+                <div class="ldcweb-banner-title">
+                    <p aria-level="h1">Le site internet "les Gauloisirs" utilise des cookies !</p>
+                </div>
+                <p class="ldcweb-banner-para-p" data-open="Ce site web stocke les cookies sur votre ordinateur. Le Gaulois utilise ces informations
+                afin d’améliorer et de personnaliser votre expérience de navigation, ainsi que pour l'analyse et les indicateurs concernant nos
+                visiteurs à la fois sur ce site web et sur d'autres supports. Vous pouvez cliquer sur « Accepter » si vous consentez à l’utilisation
+                de ces cookies." data-close="Nous utilisons des cookies pour nous assurer du bon fonctionnement de notre site et à des fins analytiques.
+                En poursuivant votre navigation sur ce site ou en fermant ce bandeau, vous consentez à l’utilisation de ces
+                cookies.">Nous utilisons des cookies pour nous assurer du bon fonctionnement de notre site et à des fins analytiques.
+                En poursuivant votre navigation sur ce site ou en fermant ce bandeau, vous consentez à l’utilisation de ces
+                cookies.</p>
+            </div>
+        </div>
+        <div class="ldcweb-banner-details">
+            <p>Si vous refusez l'utilisation des cookies, vos informations ne seront pas suivies lors de votre visite sur ce site. Un cookie sera utilisé
+                dans votre navigateur afin de se souvenir de ne pas suivre vos préférences. Certaines fonctionnalités ne seront pas accessibles.
+                Vous pouvez changer d’avis et modifier votre consentement à tout moment en revenant sur ce site.
+                Pour en savoir plus sur les cookies que nous utilisons, consultez notre <a href="{{ route('charte') }}">charte de confidentialité</a>.</p>
+        </div>
+        <div class="ldcweb-banner-btnDetails">
+            <p class="ldcweb-banner-btnDetails-p" data-open="Moins de détails..." data-close="Plus de détails...">Plus de détails...</p>
+        </div>
+        <div id="ldcweb-cn-modal" class="visibility">
+            <div class="modal-wrapper">
+                <div class="modal-title">
+                    <p class="title" aria-level="h2">{{__('Panneau de gestion des cookies') }}</p>
+                    <p class="subTitle">{{ __('Le respect de votre vie privée est notre priorité') }}</p>
+                    <p class="description">Les fonctionnalités de ce site s’appuient sur des services proposés par des tiers.
+                        Si vous acceptez, ces tiers déposeront des cookies qui vous permettront de visualiser sur le site du contenu hébergé par ces tiers.
+                        Via ces cookies, ces tiers collecteront et utiliseront vos données de navigation pour des finalités qui leur sont propres, conformément
+                        à leur politique de confidentialité (lien ci-dessous). Cette page vous permet de donner ou de retirer votre consentement, soit globalement
+                        soit service par service.</p>
+                </div>
+                <div class="modal-details">
+                    <ul id="ldcweb-cn-list">
+                    </ul>
+                    <div id="template">
+                        <div>
+                            <div class="ldcweb-cn-infos">
+                                <span class="ldcweb-cn-name">Google Analytics (universal)</span>
+                                <span class="ldcweb-cn-description">Ce service peut déposer 8 cookies.</span>
+                                <a class="ldcweb-cn-link" href="#">En savoir plus</a>
+                            </div>
+                            <div class="ldcweb-cn-buttons">
+                                <div class="deny" id="deny-btn">
+                                    <input type="radio" id="analytics2" name="analytics" data-name="analytics" data-status="false">
+                                    <label for="analytics2">{{ __('Interdire') }}</label>
+                                </div>
+                                <div class="accept" id="accept-btn">
+                                    <input type="radio" id="analytics1" name="analytics" data-name="analytics" data-status="true">
+                                    <label for="analytics1">{{ __('Autoriser') }}</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="ldcweb-banner-btns">
+            <div class="ldcweb-banner-btn-flex">
+                <div class="ldcweb-banner-btn-deny">
+                    <a id="ldcweb-cn-deny-banner" class="ldcweb-banner-btns-btn ldcweb-cn-deny">TOUT REFUSER</a>
+                </div>
+                <div class="ldcweb-banner-btn-accept">
+                    <a id="ldcweb-cn-accept-banner" class="ldcweb-banner-btns-btn ldcweb-cn-accept">TOUT ACCEPTER</a>
+                </div>
+            </div>
+            <div class="ldcweb-banner-btn-personalize">
+                <a class="ldcweb-banner-btns-btn ldcweb-cn-personalize" data-open-modal="RETOUR" data-close-modal="PERSONNALISER">PERSONNALISER</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+ @push('scripts')
+<script>
+    window.LdcwebCn = new LdcwebCn({
+        'analytics': {
+            'name': "MESURES D'AUDIENCE - Google Analytics",
+            'description': 'Les services de mesure d\'audience permettent de générer des statistiques de fréquentation utiles à l\'amélioration du site.',
+            'labelLink': 'En savoir +',
+            'link': 'https://support.google.com/analytics/answer/6004245',
+            'cookies': ['_ga', '_gat_gtag_{{ str_replace("-","_", $settingsGlobal->analytics) }}', '_gid'],
+            'script': function() {
+                (function(d, t) {
+                    var g = d.createElement(t),
+                        s = d.getElementsByTagName(t)[0];
+                    g.src='https://www.googletagmanager.com/gtag/js?id={{$settingsGlobal->analytics}}';
+                    g.id = 'analytics';
+                    s.parentNode.insertBefore(g, s)
+                }(document, 'script'));
+
+                window.dataLayer = window.dataLayer || [];
+
+                function gtag() {
+                    dataLayer.push(arguments);
+                }
+                gtag('js', new Date());
+
+                gtag('config', '{{$settingsGlobal->analytics}}');
+            }
+        }
+    });
+</script>
+@endpush

resources/views/front/basic/end.blade.php

@@ -0,0 +1,13 @@
+@extends('front.basic.layout')
+
+@section('title', 'Fin du jeu')
+
+@section('content')
+    <div class="code floating grid">
+        <div class="head-bloc"></div>
+        <section class="main--bloc container">
+        <h1 class="post-title">Fin du jeu</h1>
+            <p>Le jeu est terminé&nbsp;! <br> Merci à tous pour votre participation&nbsp;!</p>
+        </section>
+    </div>
+@endsection

resources/views/front/basic/enter-code.blade.php

@@ -0,0 +1,43 @@
+@extends('front.basic.layout')
+
+@section('title', 'Saisie du code')
+
+@section('content')
+    <div class="code connect floating grid">
+        <div class="head-bloc"></div>
+        <section class="main--bloc container">
+            <div class="edit-code grid">
+                <h1 class="post-title">Saisissez votre code</h1>
+                <p class="pre--text">Pour participer au jeu, munissez-vous du sticker présent sur les produits Le Gaulois participant à l'opération.</p>
+                <p class="post--text"><span class="underlined">Attention :</span>&nbsp;<strong>en cas de gain du coffret Wonderbox,</strong> gardez précieusement <strong>le sticker utilisé ainsi que votre ticket de caisse.</strong> Ils vous seront demandés comme preuves de gain pour valider votre lot.</p>
+                <div class="code--img">
+                    <img src="{{asset('front/assets/images/br.png')}}" alt="Sticker jeu 100% gagnant">
+                </div>
+                <form id="code--form" class="flex" method="POST" action="{{route('participate')}}">
+                    <div class="code--edit flex">
+                        @csrf
+                        <input type="text" name="code" maxlength="9" size="9" placeholder="Code unique (9 caractères)*" required>
+                        <input type="text" name="code_ean" maxlength="13" size="13" placeholder="Code Barre (13 caractères)*" required>
+                        <div class="rules">
+                            <input type="checkbox" name="accept_rules" id="accept_rules" required>
+                            <label for="accept_rules">J'ai lu et j'accepte le <a href="{{ route('reglement') }}">règlement</a> du jeu*</label>
+                        </div>
+
+                        <span>* Champs obligatoires</span>
+                    </div>
+                    <input class="btn btn-success" type="submit" value="Je valide">
+                </form>
+                @if ($errors->any())
+                    <div class="alert alert-danger">
+                        <ul>
+                            @foreach ($errors->all() as $error)
+                                <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+            </div>
+        </section>
+
+    </div>
+@endsection

resources/views/front/basic/error-arcadia-email.blade.php

@@ -0,0 +1,3 @@
+<p>Bonjour,</p>
+<p>Le courrier arcadia pour le gain de lot de {{ $user->lastname }} {{ $user->firstname }} est tombé en erreur.</p>
+<p>ID CRM de l'utilisateur : {{ $user->crm_id }}, email de l'utilisateur : {{ $user->email }}</p>

resources/views/front/basic/faq.blade.php

@@ -0,0 +1,19 @@
+@extends('front.basic.layout')
+
+@section('title', 'Accueil')
+
+@section('content')
+    <div class="faq floating grid">
+        <div class="head-bloc"></div>
+        <section class="main--bloc container">
+            <h2 class="post-subtitle raleway">Foire aux questions</h2>
+            @foreach ($questions as $q)
+                @if($loop->first)
+                <h3>{{$q->theme->name}}</h3>
+                @endif
+                <div class="question">{{$q->question}}</div>
+                <div class="reponse">{{$q->answer}}</div>
+            @endforeach
+        </section>
+    </div>
+@endsection

resources/views/front/basic/forgot-password.blade.php

@@ -0,0 +1,64 @@
+@extends('front.basic.layout')
+
+@section('title', 'Mot de passe oublié')
+
+@section('content')
+<div class="connect floating grid">
+    <div class="head-bloc"></div>
+    <section class="main--bloc container">
+
+        <div id="lost_edit" class="flex">
+            @if (!isset($tokenValid) || !$tokenValid)
+            <h1 class="post-title">Mot de passe oublié</h1>
+            <form id="lost--form" class="flex" method="POST" action="{{ route('mail-password') }}">
+                @method('PUT')
+                @csrf
+                @if ($errors->any())
+                    <div class="alert alert-danger">
+                        <ul>
+                            @foreach ($errors->all() as $error)
+                                <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+                @if (session('success'))
+                    <div class="alert alert-success">
+                        {{ session('success') }}
+                    </div>
+                @endif
+                <p>Pour que nous puissions vous envoyer un lien de réinitialisation de votre mot de passe, merci de nous indiquer l'adresse e-mail saisie lors de votre inscription.</p>
+                <div class="edit--blocs flex">
+                    <input type="email" name="email" id="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="Votre adresse email" value="" required>
+                </div>
+                <input class="btn" type="submit" value="Je valide">
+            </form>
+            @elseif ($tokenValid)
+            <h1 class="post-title">Changement de votre mot de passe</h1>
+            <form method="POST" action="{{ route('change-password', $token) }}">
+                @method('PUT')
+                @csrf
+                @if ($errors->any())
+                    <div class="alert alert-danger">
+                        <ul>
+                            @foreach ($errors->all() as $error)
+                                <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+                @if (session('success'))
+                    <div class="alert alert-success">
+                        {{ session('success') }}
+                    </div>
+                @endif
+                <input type="password" name="password" placeholder="Votre nouveau mot de passe*" required>
+                <input id="password-confirm" type="password" name="password_confirmation" required autocomplete="new-password" placeholder="Confirmer votre nouveau mot de passe*">
+                <input type="hidden" name="token" value="{{$token}}">
+                <input type="submit" class="btn btn-primary" value="Envoyer">
+            </form>
+            @endif
+        </div>
+    </section>
+</div>
+@endsection

resources/views/front/basic/gain1.blade.php

@@ -0,0 +1,187 @@
+@extends('front.basic.layout')
+
+@section('title')
+    {{$prizesGlobal[0]->gain_view->name}}
+@endsection
+
+@section('content')
+    <div class="congratulate floating grid gain1">
+        <div class="head-bloc"></div>
+        <div class="container sc__wrapper">
+            <h1 class="post-title raleway">Lancez la roue et<br>découvrez votre gain</h1>
+            <!-- spinwheel --->
+            <div id="wrapper">
+
+                <div id="wheel">
+                    <div id="inner-wheel">
+                        <div class="sec"><span class="fab fa-bell-o"></span></div>
+                        <div class="sec"><span class="fab fa-comment-o"></span></div>
+                        <div class="sec"><span class="fab fa-smile-o"></span></div>
+                        <div class="sec"><span class="fab fa-heart-o"></span></div>
+                    </div>
+
+                    <div id="spin">
+                        <div id="inner-spin"></div>
+                    </div>
+
+                    <div id="shine"></div>
+                </div>
+
+                <div id="txt"></div>
+            </div>
+        </div>
+
+        <section class="main--bloc container">
+
+            <div class="mobile--menu">
+                <div class="title--bloc view-lot1">
+                    <div class="title--txt">
+                        <h1 class="post-title">Félicitations&nbsp;!</h1>
+                        <p class="info2">Vous avez gagné un {{$prizesGlobal[0]->label_one}} !<br>
+                            Pour recevoir votre cadeau, vous devez envoyer vos preuves d'achat.
+                            Voir modalités ci dessous.
+                        </p>
+                    </div>
+                    <div class="bg-opacity"></div>
+                </div>
+                <div class="play--bloc">
+                    <div class="main-btn">
+                        <a href="#winproof">>></a>
+                    </div>
+                </div>
+                {{--<div class="play--bloc">
+                    <p class="strong">Vous possédez un autre code&nbsp;?</p>
+                    <div class="main-btn">
+                        <a href="{{route('saisir-code')}}">Je rejoue</a>
+                    </div>
+                </div>--}}
+            </div>
+
+            <div class="desktop--menu">
+                <div class="img--bloc view-lot1"></div>
+                <div class="txt--bloc">
+                    <div class="bloc--rotate">
+                        <h1 class="post-title">Félicitations&nbsp;!</h1>
+                        <p>Vous avez gagné un {{$prizesGlobal[0]->label_one}} !<br>
+                            Pour recevoir votre cadeau, vous devez envoyer vos preuves d'achat.
+                            Voir modalités ci dessous.
+                        </p>
+                        <div class="main-btn">
+                            <a href="#winproof">>></a>
+                        </div>
+                        {{--<p class="strong">Vous possédez un autre code&nbsp;?</p>
+                        <div class="main-btn">
+                            <a href="{{route('saisir-code')}}">Je rejoue</a>
+                        </div>--}}
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        </div>
+    </div>
+    <div class="register floating grid">
+        <div class="head-bloc"></div>
+
+        <section class="main--bloc container" style="display:none;">
+
+            <div class="title-inscription1">
+                <a id="winproof"></a>
+                <h1 class="post-title">Envoyez vos preuves de gain</h1>
+            </div>
+            <div class="form-inscription1">
+
+                <div class="infos">
+                    <h2>En ligne @</h3>
+                    <p>Renseignez l'adresse à laquelle vous souhaitez recevoir votre gain et téléversez vos preuves d'achat.</p>
+                </div>
+                <form method="POST" action="{{ route('send-winning-proof') }}" enctype="multipart/form-data">
+                    @method('PUT')
+                    @csrf
+                    @if ($errors->any())
+                        <div class="alert alert-danger">
+                            <ul>
+                                @foreach ($errors->all() as $error)
+                                    <li>{{ $error }}</li>
+                                @endforeach
+                            </ul>
+                        </div>
+                    @endif
+                    <div class="coordonnees grid">
+                        <h4>Vos coordonnées</h4>
+                        <input type="text" name="lastname" id="lastname" placeholder="Nom*" required value="{{ Auth::user()->lastname ?? '' }}" maxlength="150">
+                        <input type="text" name="firstname" id="firstname" placeholder="Prénom*" required value="{{ Auth::user()->firstname ?? '' }}" maxlength="150">
+                        <input type="text" name="address" id="addr1" placeholder="Adresse*" required value="{{ Auth::user()->address ?? '' }}" maxlength="50">
+                        <input type="text" name="address2" id="addr2" placeholder="Complément d'adresse" value="{{ Auth::user()->address2 ?? '' }}" maxlength="50">
+                        <div class="locate">
+                            <input type="number" name="postal_code" id="post_number" placeholder="Code Postal*" required value="{{ Auth::user()->postal_code ?? '' }}" min="1" max="99999">
+                            <input type="text" name="town" id="town" placeholder="Ville*" required value="{{ Auth::user()->town ?? '' }}" maxlength="50">
+                        </div>
+                        <input type="text" name="country" id="country" placeholder="Pays*" required value="{{ Auth::user()->country ?? '' }}" maxlength="32">
+                        <input type="tel" name="phone" id="phone" placeholder="Numéro de téléphone*" value="{{ Auth::user()->phone ?? '' }}" required>
+                    </div>
+                    <div class="preuves">
+                        <h4>Vos preuves d'achat</h4>
+                        <div class="barres files-accepted">
+                            <p>Code-barres du produit*</p><br><br>
+                            <label for="file-code" class="lbl-code upload">Ajouter un fichier</label>
+                            <input type="file" id="file-code" name="barcode" class="input-file" accept=".jpg,.jpeg,.png,.pdf" required>
+                        </div>
+                        <div class="ticket files-accepted">
+                            <p>Ticket de caisse avec la date*</p><br><br>
+                            <label for="ticket-prod" class="lbl-ticket upload">Ajouter un fichier</label>
+                            <input type="file" id="ticket-prod" name="ticket" class="input-file" accept=".jpg,.jpeg,.png,.pdf" required>
+                        </div>
+                        <div class="sticker files-accepted">
+                            <p>Sticker du produit*</p><br><br>
+                            <label for="sticker-prod" class="lbl-sticker upload">Ajouter un fichier</label>
+                            <input type="file" id="sticker-prod" name="sticker" class="input-file" accept=".jpg,.jpeg,.png,.pdf" required>
+                        </div>
+                    </div>
+                    <div class="btn-form">
+                        <input type="submit" id="send" class="btn" value="Envoyer mes preuves d'achat">
+                    </div>
+                </form>
+
+            </div>
+            <div class="legals">
+                <p>*Champs obligatoires</p>
+            </div>
+            <div class="instructions">
+                <div class="contain-courrier">
+                    <div class="courrier">
+                        <div class="infos">
+                            <h2>Ou Par courrier</h3>
+                            <p>Merci de nous envoyer, sur papier libre (ou en utilisant le formulaire <a href="{{asset('fichiers/pdf/' . $prizesGlobal[0]->pdf_winning_proof)}}" target="_pdf" style="font-size: inherit;line-height:inherit;"> téléchargeable ici</a>), vos coordonnées ainsi que vos preuves d'achat originales. Le tout sous pli suffisamment affranchi sous dix jours à l'adresse suivante :</p>
+                        </div>
+                        <div class="adress">
+                            <p>Service Consommateur LDC<br>Jeu "Gau'loisirs"<br>CS 50925<br>72302 SABL&Eacute; SUR SARTHE CEDEX</p>
+                        </div>
+                        <div class="coordonnees">
+                            <p>Vos coordonnées<br>Nom, prénom, adresse complète,<br>n° de téléphone et E-mail</p>
+                        </div>
+                        <div class="preuves">
+                            <p>Vos preuves d'achat<br>Code-barres original du produit,<br>ticket de caisse original avec la date,
+                                <br>le sticker ou ou la partie de l'emballage contenant le code unique de jeu (code visible)</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+        </section>
+
+    </div>
+@endsection
+
+@push('scripts')
+<script>
+//set default degree (360*5)
+var degree = 1800;
+//number of clicks = 0
+var clicks = 0;
+
+var thisWinAngle = 1400;
+
+</script>
+@endpush

resources/views/front/basic/gain2.blade.php

@@ -0,0 +1,190 @@
+@extends('front.basic.layout')
+
+@section('title')
+    {{$prizesGlobal[1]->gain_view->name}}
+@endsection
+
+@section('content')
+    <div class="congratulate floating grid">
+        <div class="head-bloc"></div>
+
+        <div class="container sc__wrapper">
+            <h1 class="post-title raleway">Lancez la roue et<br>découvrez votre gain</h1>
+            <!-- spinwheel --->
+            <div id="wrapper">
+
+                <div id="wheel">
+                    <div id="inner-wheel">
+                        <div class="sec"><span class="fab fa-bell-o"></span></div>
+                        <div class="sec"><span class="fab fa-comment-o"></span></div>
+                        <div class="sec"><span class="fab fa-smile-o"></span></div>
+                        <div class="sec"><span class="fab fa-heart-o"></span></div>
+                    </div>
+
+                    <div id="spin">
+                        <div id="inner-spin"></div>
+                    </div>
+
+                    <div id="shine"></div>
+                </div>
+
+                <div id="txt"></div>
+            </div>
+        </div>
+
+        <section class="main--bloc container">
+
+            <div class="mobile--menu">
+                <div class="title--bloc view-lot2">
+                    <div class="title--txt">
+                        <h1 class="post-title">Félicitations&nbsp;!</h1>
+                        <p class="info2">Vous avez gagné un {{$prizesGlobal[1]->label_one}} !<br>
+                            Pour recevoir votre cadeau, vous devez envoyer vos preuves d'achat.
+                            Voir modalités ci dessous.
+                        </p>
+                    </div>
+                    <div class="bg-opacity"></div>
+                </div>
+                <div class="play--bloc">
+                    <div class="main-btn">
+                        <a href="#winproof">>></a>
+                    </div>
+                </div>
+                {{--<div class="play--bloc">
+                    <p class="strong">Vous possédez un autre code&nbsp;?</p>
+                    <div class="main-btn">
+                        <a href="{{route('saisir-code')}}">Je rejoue</a>
+                    </div>
+                </div>--}}
+            </div>
+
+            <div class="desktop--menu">
+                <div class="img--bloc view-lot2"></div>
+                <div class="txt--bloc">
+                    <div class="bloc--rotate">
+                        <h1 class="post-title">Félicitations&nbsp;!</h1>
+                        <p>Vous avez gagné un {{$prizesGlobal[1]->label_one}} !<br>
+                            Pour recevoir votre cadeau, vous devez envoyer vos preuves d'achat.
+                            Voir modalités ci dessous.</p>
+                        <div class="main-btn">
+                            <a href="#winproof">>></a>
+                        </div>
+                        {{--<p class="strong">Vous possédez un autre code&nbsp;?</p>
+                        <div class="main-btn">
+                            <a href="{{route('saisir-code')}}">Je rejoue</a>
+                        </div>--}}
+                    </div>
+                </div>
+            </div>
+
+        </section>
+
+    </div>
+</div>
+<div class="register floating grid">
+    <div class="head-bloc"></div>
+
+    <section class="main--bloc container" style="display:none;">
+
+        <div class="title-inscription1">
+            <a id="winproof"></a>
+            <h1 class="post-title">Envoyez vos preuves de gain</h1>
+        </div>
+        <div class="form-inscription1">
+
+            <div class="infos">
+                <h2>En ligne @</h3>
+                <p>Renseignez l'adresse à laquelle vous souhaitez recevoir votre gain et téléversez vos preuves d'achat.</p>
+            </div>
+            <form method="POST" action="{{ route('send-winning-proof') }}" enctype="multipart/form-data">
+                @method('PUT')
+                @csrf
+                @if ($errors->any())
+                    <div class="alert alert-danger">
+                        <ul>
+                            @foreach ($errors->all() as $error)
+                                <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+                <div class="coordonnees grid">
+                    <h4>Vos coordonnées</h4>
+                    <input type="text" name="lastname" id="lastname" placeholder="Nom*" required value="{{ Auth::user()->lastname ?? '' }}" maxlength="150">
+                    <input type="text" name="firstname" id="firstname" placeholder="Prénom*" required value="{{ Auth::user()->firstname ?? '' }}" maxlength="150">
+                    <input type="text" name="address" id="addr1" placeholder="Adresse*" required value="{{ Auth::user()->address ?? '' }}" maxlength="50">
+                    <input type="text" name="address2" id="addr2" placeholder="Complément d'adresse" value="{{ Auth::user()->address2 ?? '' }}" maxlength="50">
+                    <div class="locate">
+                        <input type="number" name="postal_code" id="post_number" placeholder="Code Postal*" required value="{{ Auth::user()->postal_code ?? '' }}" min="1" max="99999">
+                        <input type="text" name="town" id="town" placeholder="Ville*" required value="{{ Auth::user()->town ?? '' }}" maxlength="50">
+                    </div>
+                    <input type="text" name="country" id="country" placeholder="Pays*" required value="{{ Auth::user()->country ?? '' }}" maxlength="32">
+                    <input type="tel" name="phone" id="phone" placeholder="Numéro de téléphone*" value="{{ Auth::user()->phone ?? '' }}" required>
+                </div>
+                <div class="preuves">
+                    <h4>Vos preuves d'achat</h4>
+                    <div class="barres files-accepted">
+                        <p>Code-barres du produit*</p><br><br>
+                        <label for="file-code" class="lbl-code upload">Ajouter un fichier</label>
+                        <input type="file" id="file-code" name="barcode" class="input-file" accept=".jpg,.jpeg,.png,.pdf" required>
+                    </div>
+                    <div class="ticket files-accepted">
+                        <p>Ticket de caisse avec la date*</p><br><br>
+                        <label for="ticket-prod" class="lbl-ticket upload">Ajouter un fichier</label>
+                        <input type="file" id="ticket-prod" name="ticket" class="input-file" accept=".jpg,.jpeg,.png,.pdf" required>
+                    </div>
+                    <div class="sticker files-accepted">
+                        <p>Sticker du produit*</p><br><br>
+                        <label for="sticker-prod" class="lbl-sticker upload">Ajouter un fichier</label>
+                        <input type="file" id="sticker-prod" name="sticker" class="input-file" accept=".jpg,.jpeg,.png,.pdf" required>
+                    </div>
+                </div>
+                <div class="btn-form">
+                    <input type="submit" id="send" class="btn" value="Envoyer mes preuves d'achat">
+                </div>
+            </form>
+
+        </div>
+        <div class="legals">
+            <p>*Champs obligatoires</p>
+        </div>
+
+
+
+        <div class="instructions">
+            <div class="contain-courrier">
+                <div class="courrier">
+                    <div class="infos">
+                        <h2>Ou Par courrier</h3>
+                            <p>Merci de nous envoyer, sur papier libre (ou en utilisant le formulaire <a href="{{asset('fichiers/pdf/' . $prizesGlobal[1]->pdf_winning_proof)}}" target="_pdf" style="font-size: inherit;line-height:inherit;"> téléchargeable ici</a>),vos coordonnées ainsi que vos preuves d'achat originales. Le tout sous pli suffisamment affranchi sous dix jours à l'adresse suivante :</p>
+                    </div>
+                    <div class="adress">
+                        <p>Service Consommateur LDC<br>Jeu "Gau'loisirs"<br>CS 50925<br>72302 SABL&Eacute; SUR SARTHE CEDEX</p>
+                    </div>
+                    <div class="coordonnees">
+                        <p>Vos coordonnées<br>Nom, prénom, adresse complète,<br>n° de téléphone et E-mail</p>
+                    </div>
+                    <div class="preuves">
+                        <p>Vos preuves d'achat<br>Code-barres original du produit,<br>ticket de caisse original avec la date,
+                            <br>le sticker ou ou la partie de l'emballage contenant le code unique de jeu (code visible)</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </section>
+
+</div>
+@endsection
+
+@push('scripts')
+<script>
+//set default degree (360*5)
+var degree = 1800;
+//number of clicks = 0
+var clicks = 0;
+
+var thisWinAngle = 1580;
+
+</script>
+@endpush

resources/views/front/basic/gains.blade.php

@@ -0,0 +1,35 @@
+@extends('front.basic.layout')
+
+@section('title', 'Les gains')
+
+@section('content')
+    <p>Lots (valeur à 0 ou 1 : 0 = faux, 1 = vrai) :</p>
+    <table class="table table-border">
+        <thead class="thead-light">
+            <th scope="col">ID Arcadia</th>
+            <th scope="col">Label singulier</th>
+            <th scope="col">Label pluriel</th>
+            <th scope="col">Quantité</th>
+            <th scope="col">Notification activé</th>
+            <th scope="col">Formulaire suppl.</th>
+            <th scope="col">ID mail Arcadia</th>
+            <th scope="col">Pdf preuve de gain</th>
+            <th scope="col">Lot par défaut</th>
+        </thead>
+        <tbody>
+            @foreach ($prizesGlobal as $p)
+                <tr>
+                    <td>{{$p->arcadia_id}}</td>
+                    <td>{{$p->label_one}}</td>
+                    <td>{{$p->label_many}}</td>
+                    <td>{{$p->quantity}}</td>
+                    <td>{{$p->notifications}}</td>
+                    <td>{{$p->additional_form}}</td>
+                    <td>{{$p->arcadia_mail_id}}</td>
+                    <td><span class="badge badge-info">{{$p->pdf_winning_proof}}</span></td>
+                    <td>{{$p->need_proof}}</td>
+                </tr>
+            @endforeach
+        </tbody>
+    </table>
+@endsection

resources/views/front/basic/home.blade.php

@@ -0,0 +1,201 @@
+@extends('front.basic.layout')
+
+@section('title', 'Accueil')
+
+@section('content')
+    <div class="main floating grid">
+        <div class="head-bloc"></div>
+        <section class="floating-bloc container flex">
+            <div class="floating--width flex">
+                <div class="floating--title">
+                    <img src="{{asset('front/assets/images/photo-canoe.png')}}" alt="">
+                    <h1 class="post-title flex">
+                        <div class="flex row">
+
+                        </div>
+                    </h1>
+                </div>
+                <div class="floating--txt flex">
+                    <h2 class="raleway post-subtitle">Jouez et tentez de gagner</h2>
+                    <div class="floating--gift flex">
+                        <div class="gift--col flex">
+                            <div class="gift--lot1 flex">
+                                <div class="nb-lot1 flex">
+                                    <span>{{ $prizesGlobal[0]->quantity}}</span>
+                                </div>
+                                <h3 class="post-chapter">Wonderbox <br>Loisirs</h3>
+
+                            </div>
+                            <div class="gift--img">
+                                <img src="{{asset('front/assets/images/view-lot1.png')}}" alt="Grand jeu 100% gagnant">
+                                <div class="floating--sticker">
+                                    <img src="{{asset('front/assets/images/pastille.png')}}" alt="Grand jeu 100% gagnant">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="gift--col flex">
+                            <div class="gift--lot2 flex">
+                                <div class="nb-lot2 flex">
+                                    <span>{{ $prizesGlobal[1]->quantity}}</span>
+                                </div>
+                                <h3 class="post-chapter">Wonderbox <br>Happy Day</h3>
+                            </div>
+                            <div class="lot2--img">
+                                <img src="{{asset('front/assets/images/view-lot2.png')}}" alt="Wonderbox Happy Day">
+                            </div>
+                            <div class="gift--br">
+                                <p>Ou des milliers<br/> de bons<br/>de réduction</p>
+                                <img src="{{asset('front/assets/images/br-1-euro.png')}}" alt="Wonderbox Happy Day">
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="main-btn">
+                        <a href="{{route('saisir-code')}}">Jouer !</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <div id="howto"></div>
+        <section class="who-bloc container flex">
+            <div class="who--title">
+                <div class="who--rotate">
+                    <h2 class="post-subtitle raleway">Comment jouer&nbsp;?</h2>
+                    <p>Rien de plus simple&nbsp;! Suivez les 3 étapes décrites à droite et laissez-vous guider.</p>
+                    <img src="{{asset('front/assets/images/how-to-play.png')}}" alt="">
+                </div>
+            </div>
+            <div class="who--details flex">
+                <div class="who--rotate">
+                    <div class="details--bloc flex">
+                        <div class="bloc--img flex">
+                            <img src="{{asset('front/assets/images/logo-kart.png')}}" alt="Acheter un produit porteur de l'offre">
+                        </div>
+                        <div class="bloc--txt">
+                            <p>Achetez un produit Le Gaulois porteur de l'offre.</p>
+                            <div class="main-btn tertiary-btn">
+                                <a href="{{route('produits-porteurs')}}">Voir la liste des produits porteurs</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="details--bloc flex">
+                        <div class="bloc--img flex">
+                            <img src="{{asset('front/assets/images/logo-br.png')}}" alt="Trouver le code au dos du sticker">
+                        </div>
+                        <div class="bloc--txt flex">
+                            <p>Trouvez le code au dos du sticker, soit en le décollant du produit, soit en lisant en transparence.</p>
+                        </div>
+                    </div>
+                    <div class="details--bloc flex">
+                        <div class="bloc--img flex">
+                            <img src="{{asset('front/assets/images/logo-tv.png')}}" alt="Inscrivez-vous sur ce site">
+                        </div>
+                        <div class="bloc--txt flex">
+                            <p>Inscrivez-vous sur ce site, insérez votre code et découvrez ce que vous avez gagné&nbsp;!</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <div id="gifts"></div>
+        <section class="gift-bloc container flex">
+            <div class="gift--title">
+                <h2 class="post-subtitle raleway">Les cadeaux</h2>
+            </div>
+            <div class="swiper-container">
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide flex">
+                        <div class="swiper--img">
+                            <img src="{{asset('front/assets/images/view-lot1.png')}}" alt="Wonderbox Loisirs">
+                        </div>
+                        <div class="swiper--txt flex secondary-bg">
+                            <div class="bloc--rotate">
+                                <h3 class="post-chapter">Wonderbox<br/>loisirs</h3>
+                                <p class="big">1 activité pour 2 à 6 personnes</p>
+                                <p>
+                                    1640 activités en famille : cinéma, visite d’un zoo ou d’un château, spectacle au théâtre, cirque, balade en bateau, randonnée équestre, atelier culinaire…
+                                    Les petits et les grands vont se régaler : sortie à l’aquarium de Paris pour faire connaissance avec ses 10 000 pensionnaires, atelier culinaire pour savourer une bonne dose de bonheur, découverte du bassin de la Villette en bateau électrique, rencontre avec le nouveau monde de Mini World Lyon…
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide flex">
+                        <div class="swiper--img">
+                            <img src="{{asset('front/assets/images/view-lot2.png')}}" alt="Wonbderbox Happy Day">
+                        </div>
+                        <div class="swiper--txt flex">
+                            <div class="bloc--rotate">
+                                <h3 class="post-chapter">Wonderbox<br/>Happy Day</h3>
+                                <p class="big">1 activité pour 1 à 2 personnes</p>
+                                <p>
+Plus de 2500 activités : laser game, bowling, balade en canoë, cinéma, repas, dégustation de macarons…
+Besoin d’une super activité pour déconnecter ? Soyez prêt, vous allez adorer cette journée : parties de bowling endiablées à Châlons-en-Champagne, séance de Taï Chi ou de Wing Chung à Bordeaux ou pizza à déguster face à Notre-Dame de Paris… Voici tout ce dont vous avez besoin pour apprécier un Happy Day !
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="swiper-pagination"></div>
+            </div>
+            <div class="main-btn">
+                <a href="{{route('saisir-code')}}">Jouer !</a>
+            </div>
+        </section>
+
+    </div>
+
+{{--
+    <p>Société : {{$settingsGlobal->company}} et nom du jeu : {{$settingsGlobal->name}}</p>
+    <p>
+        <ul>Toutes les routes :
+            <li><a href="{{route('home')}}">Accueil</a></li>
+            <li><a href="{{route('teaser')}}">Teaser</a></li>
+            <li><a href="{{route('reglement')}}">Règlement</a></li>
+            <li><a href="{{route('charte')}}">Charte</a></li>
+            <li><a href="{{route('legals')}}">Mentions légales</a></li>
+            <li><a href="{{route('end')}}">Page de fin de jeu</a></li>
+            <li><a href="{{route('faq')}}">FAQ</a></li>
+            <li><a href="{{route('comment-jouer')}}">Comment jouer</a></li>
+            <li><a href="{{route('les-gains')}}">Les gains</a></li>
+            <li><a href="{{route('saisir-code')}}">Saisie du code (nécessite d'être connecté)</a></li>
+            <li><a href="{{route('login')}}">Login</a></li>
+            <li><a href="{{route('inscription')}}">Inscription</a></li>
+        </ul>
+    </p>
+    <p>Lots (valeur à 0 ou 1 : 0 = faux, 1 = vrai) :</p>
+    <table class="table table-border">
+        <thead class="thead-light">
+            <th scope="col">ID Arcadia</th>
+            <th scope="col">Label singulier</th>
+            <th scope="col">Label pluriel</th>
+            <th scope="col">Quantité</th>
+            <th scope="col">Notification activé</th>
+            <th scope="col">Formulaire suppl.</th>
+            <th scope="col">ID mail Arcadia</th>
+            <th scope="col">Pdf preuve de gain</th>
+            <th scope="col">Lot par défaut</th>
+        </thead>
+        <tbody>
+            @foreach ($prizesGlobal as $p)
+                <tr>
+                    <td>{{$p->arcadia_id}}</td>
+                    <td>{{$p->label_one}}</td>
+                    <td>{{$p->label_many}}</td>
+                    <td>{{$p->quantity}}</td>
+                    <td>{{$p->notifications}}</td>
+                    <td>{{$p->additional_form}}</td>
+                    <td>{{$p->arcadia_mail_id}}</td>
+                    <td><span class="badge badge-info">{{$p->pdf_winning_proof}}</span></td>
+                    <td>{{$p->need_proof}}</td>
+                </tr>
+            @endforeach
+        </tbody>
+    </table>
+    <!-- Pour afficher un seul lot, remplacer le [0] par [1], [2], etc. -->
+    @if (isset($prizesGlobal[0]))
+        {{$prizesGlobal[0]->label_one}}
+    @endif
+--}}
+@endsection

resources/views/front/basic/how-to-play.blade.php

@@ -0,0 +1,35 @@
+@extends('front.basic.layout')
+
+@section('title', 'Comment jouer')
+
+@section('content')
+    <p>Lots (valeur à 0 ou 1 : 0 = faux, 1 = vrai) :</p>
+    <table class="table table-border">
+        <thead class="thead-light">
+            <th scope="col">ID Arcadia</th>
+            <th scope="col">Label singulier</th>
+            <th scope="col">Label pluriel</th>
+            <th scope="col">Quantité</th>
+            <th scope="col">Notification activé</th>
+            <th scope="col">Formulaire suppl.</th>
+            <th scope="col">ID mail Arcadia</th>
+            <th scope="col">Pdf preuve de gain</th>
+            <th scope="col">Lot par défaut</th>
+        </thead>
+        <tbody>
+            @foreach ($prizesGlobal as $p)
+                <tr>
+                    <td>{{$p->arcadia_id}}</td>
+                    <td>{{$p->label_one}}</td>
+                    <td>{{$p->label_many}}</td>
+                    <td>{{$p->quantity}}</td>
+                    <td>{{$p->notifications}}</td>
+                    <td>{{$p->additional_form}}</td>
+                    <td>{{$p->arcadia_mail_id}}</td>
+                    <td><span class="badge badge-info">{{$p->pdf_winning_proof}}</span></td>
+                    <td>{{$p->need_proof}}</td>
+                </tr>
+            @endforeach
+        </tbody>
+    </table>
+@endsection

resources/views/front/basic/kit.blade.php

@@ -0,0 +1,106 @@
+@extends('front.basic.layout')
+
+@section('title')
+    {{$prize->gain_view->name}}
+@endsection
+
+@section('content')
+<div class="container gains flex col padding">
+    <div class="step">&Eacute;TAPE 3/3</div>
+    <div class="content-gains">
+        <div class="bravo flex">
+            <div class="img-bravo">
+                <img src="{{asset('images/gain_lot_01.png')}}" alt="Kit de cuisine">
+            </div>
+            <div class="flex txt-bravo">
+                <h1>Bravo !</h1>
+                <h2>Vous avez gagné un <strong>kit de cuisine</strong></h2>
+                <p>Pour recevoir votre cadeau, vous devez obligatoirement renseigner le formulaire ci-dessous.</p><br>
+                <p>Renseignez l'adresse à laquelle vous souhaitez recevoir le kit de cuisine.<br>Livraison sous 8 semaines.</p>
+            </div>
+        </div>
+        <div class="instructions flex">
+            <div class="contain-courrier">
+                <div class="courrier">
+                    <div class="infos">
+                        <h3>Par courrier</h3>
+                        <p>Merci de nous envoyer sur papier libre vos coordonnées ainsi que vos preuves d'achat originales. Le tout sous pli suffisamment affranchi sous dix jours à l'adresse suivante :</p>
+                    </div>
+                    <div class="adress flex">
+                        <p>JEU MAGIE DE NO&Euml;L 2020<br>LDC - ZI SAINT LAURENT<br>CS 50925<br>72302 SABL&Eacute; SUR SARTHE CEDEX</p>
+                    </div>
+                    <div class="coordonnees flex">
+                        <p>Vos coordonnées<br>Nom, prénom, adresse complète,<br>n° de téléphone et E-mail</p>
+                    </div>
+                    <div class="preuves flex">
+                        <p>Vos preuves d'achat<br>Code-barres original du produit,<br>ticket de caisse original avec la date,<br>le sticker ou l’arrière de la boite d’œufs avec le code unique de jeu</p>
+                    </div>
+                </div>
+            </div>
+            <div class="inline">
+                <div class="infos">
+                    <h3>En ligne @</h3>
+                    <p>Renseignez l'adresse à laquelle vous souhaitez recevoir votre gain et téléversez vos preuves d'achat.</p>
+                </div>
+                <form method="POST" action="{{ route('send-winning-proof') }}" enctype="multipart/form-data">
+                    @method('PUT')
+                    @csrf
+                    @if ($errors->any())
+                        <div class="alert alert-danger">
+                            <ul>
+                                @foreach ($errors->all() as $error)
+                                    <li>{{ $error }}</li>
+                                @endforeach
+                            </ul>
+                        </div>
+                    @endif
+                    <div class="coordonnees">
+                        <h4>Vos coordonnées</h4>
+                        <input type="text" name="lastname" id="lastname" placeholder="Nom*" required value="{{ Auth::user()->lastname }}" maxlength="150">
+                        <input type="text" name="firstname" id="firstname" placeholder="Prénom*" required value="{{ Auth::user()->firstname }}" maxlength="150">
+                        <input type="text" name="address" id="addr1" placeholder="Adresse*" required value="{{ Auth::user()->address }}" maxlength="50">
+                        <div class="adress flex">
+                            <input type="text" name="address2" id="addr2" placeholder="Complément d'adresse" value="{{ Auth::user()->address2 }}" maxlength="50">
+                            <input type="number" name="postal_code" id="post_number" placeholder="Code Postal*" required value="{{ Auth::user()->postal_code }}" min="1" max="99999">
+                        </div>
+                        <div class="locate flex">
+                            <input type="text" name="town" id="town" placeholder="Ville*" required value="{{ Auth::user()->town }}" maxlength="50">
+                            <input type="text" name="country" id="country" placeholder="Pays*" required value="{{ Auth::user()->country }}" maxlength="32">
+                        </div>
+                        <div class="tel">
+                            <input type="tel" name="phone" id="phone" placeholder="Numéro de téléphone*" value="{{ Auth::user()->phone }}" required>
+                        </div>
+                    </div>
+                    <div class="preuves">
+                        <h4>Vos preuves d'achat</h4>
+                        <div class="barres files-accepted">
+                            <p>Code-barres du produit*</p><br><br>
+                            <label for="file-code" class="lbl-code upload">Ajouter un fichier</label>
+                            <input type="file" id="file-code" name="barcode" class="input-file" accept=".jpg,.jpeg,.png,.pdf" required>
+                            <div class="suppr">+</div>
+                        </div>
+                        <div class="ticket files-accepted">
+                            <p>Ticket de caisse avec la date*</p><br><br>
+                            <label for="ticket-prod" class="lbl-ticket upload">Ajouter un fichier</label>
+                            <input type="file" id="ticket-prod" name="ticket" class="input-file" accept=".jpg,.jpeg,.png,.pdf" required>
+                            <div class="suppr">+</div>
+                        </div>
+                        <div class="sticker files-accepted">
+                            <p>Sticker du produit*</p><br><br>
+                            <label for="sticker-prod" class="lbl-sticker upload">Ajouter un fichier</label>
+                            <input type="file" id="sticker-prod" name="sticker" class="input-file" accept=".jpg,.jpeg,.png,.pdf" required>
+                            <div class="suppr">+</div>
+                        </div>
+                    </div>
+                    <div class="btn">
+                        <input type="submit" id="send" value="Envoyer mes preuves d'achat">
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div class="legals">
+            <p>*Champs obligatoires</p>
+        </div>
+    </div>
+</div>
+@endsection

resources/views/front/basic/layout.blade.php

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <title>@yield('title') - {{$settingsGlobal->name}}</title>
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <link rel="shortcut icon" href="{{ asset('front/assets/images/favicon.ico') }}" type="image/x-icon">
+    <link rel="icon" href="{{ asset('front/assets/images/favicon.png') }}" type="image/png">
+    <link rel="icon" sizes="32x32" href="{{ asset('front/assets/images/favicon-32.png') }}" type="image/png">
+    <link rel="icon" sizes="64x64" href="{{ asset('front/assets/images/favicon-64.png') }}" type="image/png">
+    <link rel="icon" sizes="96x96" href="{{ asset('front/assets/images/favicon-96.png') }}" type="image/png">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    {{--<link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
+    <link rel="stylesheet" href="./node_modules/swiper/swiper-bundle.css" />
+    <link rel="stylesheet" href="./node_modules/swiper/swiper-bundle.min.css" />--}}
+    <!-- Scripts -->
+    <!-- <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> -->
+    <script src="{{ asset('js/ldcweb-cn.min.js') }}"></script>
+
+    <!-- Fonts -->
+    <link rel="dns-prefetch" href="//fonts.gstatic.com">
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="{{ asset('css/gauloisir-2022.css') }}">
+
+</head>
+
+    <body>
+        <div class="main-container">
+            {{-- Header --}}
+            @yield('header', view('front.basic.partials.header'))
+            {{-- Fin du header --}}
+        </div>
+
+        {{-- Contenu --}}
+            @yield('content')
+        {{-- Fin du contenu --}}
+
+        {{-- Footer --}}
+        @yield('footer', view('front.basic.partials.footer'))
+        {{-- Fin du footer --}}
+
+        <script src="{{ asset('js/gauloisir-2022-min.js') }}"></script>
+        @stack('scripts')
+    </body>
+</html>

resources/views/front/basic/legals.blade.php

@@ -0,0 +1,13 @@
+@extends('front.basic.layout')
+
+@section('title', 'Mentions légales')
+
+@section('content')
+    <div class="legals floating grid">
+        <div class="head-bloc"></div>
+        <section class="main--bloc container">
+            {!!$content->value!!}
+        </section>
+        
+    </div>
+@endsection

resources/views/front/basic/livres.blade.php

@@ -0,0 +1,106 @@
+@extends('front.basic.layout')
+
+@section('title')
+    {{$prize->gain_view->name}}
+@endsection
+
+@section('content')
+<div class="container gains flex col padding">
+    <div class="step">&Eacute;TAPE 3/3</div>
+    <div class="content-gains">
+        <div class="bravo flex">
+            <div class="img-bravo">
+                <img src="{{asset('images/gain_lot_02.png')}}" alt="Livre de recettes">
+            </div>
+            <div class="flex txt-bravo">
+                <h1>Bravo !</h1>
+                <h2>Vous avez gagné un <strong>livre de recettes</strong></h2>
+                <p>Pour recevoir votre cadeau, vous devez obligatoirement renseigner le formulaire ci-dessous.</p><br>
+                <p>Renseignez l'adresse à laquelle vous souhaitez recevoir le livre de recettes.<br>Livraison sous 8 semaines.</p>
+            </div>
+        </div>
+        <div class="instructions flex">
+            <div class="contain-courrier">
+                <div class="courrier">
+                    <div class="infos">
+                        <h3>Par courrier</h3>
+                        <p>Merci de nous envoyer sur papier libre vos coordonnées ainsi que vos preuves d'achat originales. Le tout sous pli suffisamment affranchi sous dix jours à l'adresse suivante :</p>
+                    </div>
+                    <div class="adress flex">
+                        <p>JEU MAGIE DE NO&Euml;L 2020<br>LDC - ZI SAINT LAURENT<br>CS 50925<br>72302 SABL&Eacute; SUR SARTHE CEDEX</p>
+                    </div>
+                    <div class="coordonnees flex">
+                        <p>Vos coordonnées<br>Nom, prénom, adresse complète,<br>n° de téléphone et E-mail</p>
+                    </div>
+                    <div class="preuves flex">
+                        <p>Vos preuves d'achat<br>Code-barres original du produit,<br>ticket de caisse original avec la date,<br>le sticker ou l’arrière de la boite d’œufs avec le code unique de jeu</p>
+                    </div>
+                </div>
+            </div>
+            <div class="inline">
+                <div class="infos">
+                    <h3>En ligne @</h3>
+                    <p>Renseignez l'adresse à laquelle vous souhaitez recevoir votre gain et téléversez vos preuves d'achat.</p>
+                </div>
+                <form method="POST" action="{{ route('send-winning-proof') }}" enctype="multipart/form-data">
+                    @method('PUT')
+                    @csrf
+                    @if ($errors->any())
+                        <div class="alert alert-danger">
+                            <ul>
+                                @foreach ($errors->all() as $error)
+                                    <li>{{ $error }}</li>
+                                @endforeach
+                            </ul>
+                        </div>
+                    @endif
+                    <div class="coordonnees">
+                        <h4>Vos coordonnées</h4>
+                        <input type="text" name="lastname" id="lastname" placeholder="Nom*" required value="{{ Auth::user()->lastname }}" maxlength="150">
+                        <input type="text" name="firstname" id="firstname" placeholder="Prénom*" required value="{{ Auth::user()->firstname }}" maxlength="150">
+                        <input type="text" name="address" id="addr1" placeholder="Adresse*" required value="{{ Auth::user()->address }}" maxlength="50">
+                        <div class="adress flex">
+                            <input type="text" name="address2" id="addr2" placeholder="Complément d'adresse" value="{{ Auth::user()->address2 }}" maxlength="50">
+                            <input type="number" name="postal_code" id="post_number" placeholder="Code Postal*" required value="{{ Auth::user()->postal_code }}" min="1" max="99999">
+                        </div>
+                        <div class="locate flex">
+                            <input type="text" name="town" id="town" placeholder="Ville*" required value="{{ Auth::user()->town }}" maxlength="50">
+                            <input type="text" name="country" id="country" placeholder="Pays*" required value="{{ Auth::user()->country }}" maxlength="32">
+                        </div>
+                        <div class="tel">
+                            <input type="tel" name="phone" id="phone" placeholder="Numéro de téléphone*" value="{{ Auth::user()->phone }}" required>
+                        </div>
+                    </div>
+                    <div class="preuves">
+                        <h4>Vos preuves d'achat</h4>
+                        <div class="barres files-accepted">
+                            <p>Code-barres du produit*</p><br><br>
+                            <label for="file-code" class="lbl-code upload">Ajouter un fichier</label>
+                            <input type="file" id="file-code" name="barcode" class="input-file" accept=".jpg,.jpeg,.png,.pdf" required>
+                            <div class="suppr">+</div>
+                        </div>
+                        <div class="ticket files-accepted">
+                            <p>Ticket de caisse avec la date*</p><br><br>
+                            <label for="ticket-prod" class="lbl-ticket upload">Ajouter un fichier</label>
+                            <input type="file" id="ticket-prod" name="ticket" class="input-file" accept=".jpg,.jpeg,.png,.pdf" required>
+                            <div class="suppr">+</div>
+                        </div>
+                        <div class="sticker files-accepted">
+                            <p>Sticker du produit*</p><br><br>
+                            <label for="sticker-prod" class="lbl-sticker upload">Ajouter un fichier</label>
+                            <input type="file" id="sticker-prod" name="sticker" class="input-file" accept=".jpg,.jpeg,.png,.pdf" required>
+                            <div class="suppr">+</div>
+                        </div>
+                    </div>
+                    <div class="btn">
+                        <input type="submit" id="send" value="Envoyer mes preuves d'achat">
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div class="legals">
+            <p>*Champs obligatoires</p>
+        </div>
+    </div>
+</div>
+@endsection

resources/views/front/basic/login.blade.php

@@ -0,0 +1,78 @@
+@extends('front.basic.layout')
+
+@section('title', 'Connexion')
+
+@section('content')
+    <div class="connect floating grid">
+        <div class="head-bloc"></div>
+        <section class="main--bloc container">
+            @if ($errors->any())
+                <div class="alert alert-danger">
+                    <ul>
+                        @foreach ($errors->all() as $error)
+                            <li>{{ $error }}</li>
+                        @endforeach
+                    </ul>
+                </div>
+            @endif
+            @if (session('success'))
+                <div class="alert alert-success">
+                    <p>{!! session('success') !!}</p>
+                </div>
+            @endif
+            <div class="mobile-menu flex">
+                <div class="signup--bloc flex">
+                    <div class="btn-connect flex">
+                        <a href="{{route('inscription')}}"><h1>Je m'inscris</h1></a>
+                    </div>
+                    <p>Pour participer et tenter votre chance, <br>inscrivez-vous&nbsp;!</p>
+                </div>
+                <div class="connect--bloc flex">
+                    <div class="btn-connect flex">
+                        <a id="inline" class="fancybox" data-fancybox href="#connect_edit"><h2>Je me connecte</h2></a>
+                        <div style="display:none">
+                            <div id="connect_edit" class="flex">
+                                <form class="flex" method="POST" action="{{ route('authenticate') }}">
+                                    @csrf
+                                    <div class="edit--blocs flex">
+                                        <input type="email" name="email" id="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="Email*" required>
+                                        <input type="password" name="password" id="" placeholder="Mot de passe*" required>
+                                        <a href="{{route('forgot-password')}}"><h2>Mot de passe oublié ?</h2></a>
+                                        <span>* Champs obligatoires</span>
+                                    </div>
+                                    <input class="btn" type="submit" value="Connexion">
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                    <p>Si vous possédez déjà un compte Club Le Gaulois, vous pouvez utiliser les mêmes identifiants.</p>
+                </div>
+            </div>
+            <div class="desktop-menu flex">
+                <div class="signup--bloc">
+                    <h1 class="post-title raleway">Je m'inscris</h1>
+                    <p>Pour participer et tenter votre chance, <br>inscrivez-vous&nbsp;!</p>
+                    <div class="btn-connect flex">
+                        <a href="{{route('inscription')}}">Inscription</a>
+                    </div>
+                </div>
+                <div class="connect--bloc">
+                    <h2 class="post-chapter raleway">Je me connecte</h2>
+                    <p>Si vous possédez déjà un compte Club Le Gaulois, vous pouvez utiliser les mêmes identifiants.</p>
+                    <form id="connect--form" class="flex" method="POST" action="{{ route('authenticate') }}">
+                        @csrf
+                        <div class="edit--blocs flex">
+                            <input type="email" name="email" id="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="Email*" required>
+                            <input type="password" name="password" id="" placeholder="Mot de passe*" required>
+                            <a href="{{route('forgot-password')}}"><h2>Mot de passe oublié ?</h2></a>
+                            <span>* Champs obligatoires</span>
+                        </div>
+                        <input class="btn" type="submit" value="Connexion">
+                    </form>
+                </div>
+            </div>
+        </section>
+
+    </div>
+@endsection
+

resources/views/front/basic/loose.blade.php

@@ -0,0 +1,6 @@
+@extends('front.basic.layout')
+
+@section('content')
+    <p>C'est perdu</p>
+    <p><a href="{{route('saisir-code')}}" class="btn btn-success">Rejouer !</a></p>
+@endsection

resources/views/front/basic/notif-admin.blade.php

@@ -0,0 +1,2 @@
+<p>Bonjour,</p>
+<p>{{ $msg }}</p>

resources/views/front/basic/notif-win-admin-email.blade.php

@@ -0,0 +1,21 @@
+<div>
+    <section>
+        <div>
+            <p>Bonjour,</p>
+            <p>Le lot suivant a été gagné : <b>{{ $participation->instantWin()->first()->prize->label_one }}</b> le {{ \Carbon\Carbon::parse($participation->created_at)->format('d/m/Y à H:i') }}</p><br>
+            <p><b>Gagnant :</b></p>
+            <p>{{ $participation->user->lastname }} {{ $participation->user->firstname }}</p>
+            <p>{{ $participation->user->address }}</p>
+            @if ($participation->user->address2 !== null)
+                <p>{{ $participation->user->address2 }}</p>
+            @endif
+            <p>{{ $participation->user->postal_code }} {{ $participation->user->town }} - {{ $participation->user->country }}</p>
+            <p>{{ $participation->user->email }}</p><br/>
+            <p><b>Codes utilisé@if ($settings->use_ean_codes)s @endif :</b></p>
+            @if ($settings->use_ean_codes)
+            <p>- Code On Pack : {{ $participation->codeEan->code }}</p>
+            @endif
+            <p>- Code Unique : {{ $participation->code->code_unique }}</p>
+        </div>
+    </section>
+</div>

resources/views/front/basic/partials/footer.blade.php

@@ -0,0 +1,75 @@
+<footer class="main-container">
+    {{--<div class="footer--frise">
+        <img src="{{asset('front/assets/images/frise.svg')}}" alt="frise">
+    </div>--}}
+    <div class="footer--logo">
+	<a href="https://www.legaulois.fr/" target="_blank">
+        	<img src="{{asset('front/assets/images/logo-footer.png')}}" alt="Le Gaulois">
+            <span>www.legaulois.fr</span>
+	</a>
+    </div>
+    <div class="footer--txt flex">
+        <div class="footer--share flex">
+            <p>Partagez le jeu sur</p>
+            <div id="fb-root"></div>
+            <div class="footer--socials flex">
+                <div class="fb-share" data-href="https://www.facebook.com/LeGauloisFrance/" data-layout="button" data-size="small">
+                    <a href="https://www.facebook.com/LeGauloisFrance/" class="fb-xfbml-parse-ignore" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=800,height=500,toolbar=1,resizable=0'); return false;">
+                        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                            <title>Page Facebook Le Gaulois</title>
+                            <g>
+                                <path d="M452,0H60C26.916,0,0,26.916,0,60v392c0,33.084,26.916,60,60,60h392c33.084,0,60-26.916,60-60V60
+                                    C512,26.916,485.084,0,452,0z M472,452c0,11.028-8.972,20-20,20H338V309h61.79L410,247h-72v-43c0-16.975,13.025-30,30-30h41v-62
+                                    h-41c-50.923,0-91.978,41.25-91.978,92.174V247H216v62h60.022v163H60c-11.028,0-20-8.972-20-20V60c0-11.028,8.972-20,20-20h392
+                                    c11.028,0,20,8.972,20,20V452z"/>
+                            </g>
+                        </svg>
+                    </a>
+                </div>
+                <a href="https://www.instagram.com/legaulois_officiel/" target="_blank">
+                    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                        viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                        <title>Page Instagram Le Gaulois</title>
+                        <g>
+                            <path d="M363.273,0H148.728C66.719,0,0,66.719,0,148.728v214.544C0,445.281,66.719,512,148.728,512h214.544
+                                C445.281,512,512,445.281,512,363.273V148.728C512,66.719,445.281,0,363.273,0z M472,363.272C472,423.225,423.225,472,363.273,472
+                                H148.728C88.775,472,40,423.225,40,363.273V148.728C40,88.775,88.775,40,148.728,40h214.544C423.225,40,472,88.775,472,148.728
+                                V363.272z"/>
+                        </g>
+                        <g>
+                            <path d="M256,118c-76.094,0-138,61.906-138,138s61.906,138,138,138s138-61.906,138-138S332.094,118,256,118z M256,354
+                                c-54.037,0-98-43.963-98-98s43.963-98,98-98s98,43.963,98,98S310.037,354,256,354z"/>
+                        </g>
+                        <g>
+                            <circle cx="396" cy="116" r="20"/>
+                        </g>
+                    </svg>
+                </a>
+            </div>
+            <p>Découvrez tous nos produits sur <a href="https://www.legaulois.fr/">Legaulois.fr</a></p>
+        </div>
+        <!-- <div class="footer--news">
+            <form class="flex" method="POST" action="">
+                <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="Inscrivez-vous à notre newsletter">
+                <input class="btn" type="submit" value="Valider">
+            </form>
+            <div class="response"></div>
+        </div> -->
+        <div class="footer--legals flex footer-links">
+            <a href="{{route('reglement')}}">Règlement du jeu</a><p>|</p>
+            <a href="{{route('legals')}}">Mentions légales</a><p>|</p>
+            <a href="{{route('charte')}}">Charte de confidentialité</a><p>|</p>
+            <a href="{{route('faq')}}">FAQ</a><p>|</p>
+            <a href="https://www.legaulois.fr/contactez-nous" target="_contact">Contact</a><p>|</p>
+            <a href="#cookie" class="ldcweb-cn-cookie-link" title="gestion des cookies">Gestion des cookies</a>
+        </div>
+    </div>
+    <div class="pageup"><a href="#"><img src="{{asset('front/assets/images/up-arrow.svg')}}" alt="Haut de page"></a></div>
+</footer>
+{{-- Cookie --}}
+    @yield('cookie', view('front.basic.cookie'))
+{{-- Fin des cookies --}}
+
+<!-- Load Facebook SDK for JavaScript -->
+<div id="fb-root"></div>
+<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v10.0" nonce="Tpes6fjg"></script>

resources/views/front/basic/partials/header.blade.php

@@ -0,0 +1,39 @@
+<header class="grid">
+    <div class="logo flex">
+        <a href="{{ route('home') }}">
+            <img src="{{asset('front/assets/images/home_logo.png')}}" alt="Le gaulois - Les Gauloisirs">
+            <img src="{{asset('front/assets/images/logo-gauloisirs.png')}}">
+        </a>
+        <div class="toggle-menu flex"><span></span></div>
+    </div>
+    <nav>
+        <ul class="flex">
+            <li><a href="{{route('home')}}/#howto">Comment jouer ?</a></li>
+            <li><a href="{{route('home')}}/#gifts">Les cadeaux</a></li>
+            <li><a href="{{route('saisir-code')}}" class="color-red">Jouer !</a></li>
+            <li><a href="{{route('produits-porteurs')}}">Produits porteurs</a></li>
+        </ul>
+        @guest
+        <div class="btn-connect flex">
+            <a href="{{route('login')}}">Je me connecte</a>
+        </div>
+        @else
+        <a class="logout-link" href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Se déconnecter</a><br>
+        <form id="logout-form" action="{{route('logout')}}" method="POST" style="display: none;">
+            @csrf
+        </form>
+        @endguest
+    </nav>
+    <div class="rest-in-game flex">
+        <span>Encore en jeu : </span>
+        <div class="bloc-lot1 flex">
+            <div class="nb-lot1 flex"><span>{{ $prizesGlobal[0]->quantity - $prizesGlobal[0]->instant_wins->where('won', 1)->count() }}</span></div>
+            <span class="txt-lot1">Wonderbox <br/>loisirs</span>
+        </div>
+        <span></span>
+        <div class="bloc-lot2 flex">
+            <div class="nb-lot2 flex"><span>{{ $prizesGlobal[1]->quantity - $prizesGlobal[1]->instant_wins->where('won', 1)->count() }}</span></div>
+            <span class="txt-lot2">Wonderbox <br/>Happy Day</span>
+        </div>
+    </div>
+</header>

resources/views/front/basic/partials/teaser-footer.blade.php

@@ -0,0 +1,63 @@
+<footer class="teaser main-container">
+    {{--<div class="footer--frise">
+        <img src="{{asset('front/assets/images/frise.svg')}}" alt="frise">
+    </div>--}}
+    <div class="footer--logo">
+	<a href="https://www.legaulois.fr/" target="_blank">
+        	<img src="{{asset('front/assets/images/logo-footer.png')}}" alt="Le Gaulois">
+            <span>www.legaulois.fr</span>
+	</a>
+    </div>
+    <div class="footer--txt flex">
+        <div class="footer--share flex">
+            <p>Partagez le jeu sur</p>
+            <div id="fb-root"></div>
+            <div class="footer--socials flex">
+                <div class="fb-share" data-href="https://www.facebook.com/LeGauloisFrance/" data-layout="button" data-size="small">
+                    <a href="https://www.facebook.com/LeGauloisFrance/" class="fb-xfbml-parse-ignore" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=800,height=500,toolbar=1,resizable=0'); return false;">
+                        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                            <title>Page Facebook Le Gaulois</title>
+                            <g>
+                                <path d="M452,0H60C26.916,0,0,26.916,0,60v392c0,33.084,26.916,60,60,60h392c33.084,0,60-26.916,60-60V60
+                                    C512,26.916,485.084,0,452,0z M472,452c0,11.028-8.972,20-20,20H338V309h61.79L410,247h-72v-43c0-16.975,13.025-30,30-30h41v-62
+                                    h-41c-50.923,0-91.978,41.25-91.978,92.174V247H216v62h60.022v163H60c-11.028,0-20-8.972-20-20V60c0-11.028,8.972-20,20-20h392
+                                    c11.028,0,20,8.972,20,20V452z"/>
+                            </g>
+                        </svg>
+                    </a>
+                </div>
+                <a href="https://www.instagram.com/legaulois_officiel/" target="_blank">
+                    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                        viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                        <title>Page Instagram Le Gaulois</title>
+                        <g>
+                            <path d="M363.273,0H148.728C66.719,0,0,66.719,0,148.728v214.544C0,445.281,66.719,512,148.728,512h214.544
+                                C445.281,512,512,445.281,512,363.273V148.728C512,66.719,445.281,0,363.273,0z M472,363.272C472,423.225,423.225,472,363.273,472
+                                H148.728C88.775,472,40,423.225,40,363.273V148.728C40,88.775,88.775,40,148.728,40h214.544C423.225,40,472,88.775,472,148.728
+                                V363.272z"/>
+                        </g>
+                        <g>
+                            <path d="M256,118c-76.094,0-138,61.906-138,138s61.906,138,138,138s138-61.906,138-138S332.094,118,256,118z M256,354
+                                c-54.037,0-98-43.963-98-98s43.963-98,98-98s98,43.963,98,98S310.037,354,256,354z"/>
+                        </g>
+                        <g>
+                            <circle cx="396" cy="116" r="20"/>
+                        </g>
+                    </svg>
+                </a>
+            </div>
+            <p>Découvrez tous nos produits sur <a href="https://www.legaulois.fr/">Legaulois.fr</a></p>
+        </div>
+        <div class="footer--legals flex footer-links">
+            <a href="#cookie" class="ldcweb-cn-cookie-link" title="gestion des cookies">Gestion des cookies</a>
+        </div>
+    </div>
+    <div class="pageup"><a href="#"><img src="{{asset('front/assets/images/up-arrow.svg')}}" alt="Haut de page"></a></div>
+</footer>
+{{-- Cookie --}}
+    @yield('cookie', view('front.basic.cookie'))
+{{-- Fin des cookies --}}
+
+<!-- Load Facebook SDK for JavaScript -->
+<div id="fb-root"></div>
+<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v10.0" nonce="Tpes6fjg"></script>

resources/views/front/basic/partials/teaser-header.blade.php

@@ -0,0 +1,11 @@
+<header class="grid">
+    <div class="logo flex">
+        <a href="{{ route('home') }}">
+            <img src="{{asset('front/assets/images/home_logo.png')}}" alt="Le gaulois - Les Gauloisirs">
+            <img src="{{asset('front/assets/images/logo-gauloisirs.png')}}">
+        </a>
+    </div>
+    <nav>
+
+    </nav>
+</header>

resources/views/front/basic/participation-exhausted.blade.php

@@ -0,0 +1,14 @@
+@extends('front.basic.layout')
+
+@section('title', 'Plus de participations')
+
+@section('content')
+    <div class="code floating grid">
+        <div class="head-bloc"></div>
+        <section class="main--bloc container">
+        <h1 class="post-title">Participation épuisée</h1>
+            <p>Vous ne pouvez plus participer à ce jeu car vous avez déjà participé {{$settings->nb_participation_player}} fois.</p>
+        </section>
+
+    </div>
+@endsection