/*
    Author Name: Jellypir.at - Psyloute
    Framework : Bootstrap 5.3
    Description: LITTLE LITTLE EPICERIE / MORLAIX
    Version: 1.0.0
*/

/* SOMMAIRE 
=================
A) VARIABLES ET FONTFACE
B) STYLES GLOBALS
C) ANIMATION
=================
Constructeurs :
C.1) FOOTER
C.2) TO TOP BUTTON
C.3) PAGE
C.4) NAVBAR
C.5) POP UP
=================
Pages :
D.1) HEADER INTRO 
D.2) PRESENTATION 
D.3) PARCOURS 
D.4) PRODUIT
D.5) CONTACT
E) MENTIONS LEGALES
F) 404 */



/* ======================================================================================================================= */
/* A) VARIABLES ET FONTFACE */
/* ======================================================================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
/* A.1) VARIABLE */
:root
{
    --bs-primary:#382d5e;
    --bs-secondary:#e7372c;
    --bs-third:#fffefb;
    --bs-dark:#272727;
    --bs-light:#F2F6F7;

    --font-title:'Fraiche-VariableVF.ttf';
    --font-text:'Lato', sans-serif;

}
/* A.2) FONTFACE */
@media (prefers-color-scheme: dark) {
  html {
    background-color: #ffffff;
    color-scheme: light;
  }
}
html, body {
  background: white !important;
  color: black !important;
  filter:none!important;
}
@font-face {
  font-family: 'Sour Gummy';
  src: url('../fonts/SourGummy-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-style: italic;
  font-weight: 100 900; /* même plage de poids si c’est une font variable */
}

@font-face{
    font-family:'Fraiche-VariableVF.ttf';
    src:url('../fonts/Fraiche-VariableVF.ttf') format('truetype');
    font-weight:100 900;
    font-style:normal;
}

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?ktnmm9');
  src:  url('../fonts/icomoon.eot?ktnmm9#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?ktnmm9') format('truetype'),
    url('../fonts/icomoon.woff?ktnmm9') format('woff'),
    url('../fonts/icomoon.svg?ktnmm9#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] { font-family: 'icomoon' !important;speak-as: never;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
.icon-bzh:before { content: "\e900";}
.icon-envelop:before { content: "\e945";}

/* EXEMPLE : 
  p {
  font-family: var(--font-text);
  font-style: italic; //Va utiliser le fichier italic */ 



/* ======================================================================================================================= */
/* B) STYLES GLOBALS (& custom bootstrap) */
/* ======================================================================================================================= */


/* B.1 PAR DEFAUT */
* { -webkit-transition: all .3s ease-out!important;-moz-transition:  all .3s ease-out!important;-ms-transition: all .3s ease-out!important;-o-transition:  all .3s ease-out!important;transition: all .3s ease-out!important; }
html { font-size:17px; height:100%;overflow-x: hidden!important; }
body { font-family: var(--font-text); color:var(--bs-dark); }
html,body { max-width: 100% !important; }
h1,h2,h3,h4,h5,h6 {margin:0;padding:0;font-size:1rem;font-weight:normal; color:var(--bs-dark); }
.text-primary { color:var(--bs-primary); }
ul {list-style: none;padding: 0;margin: 0;}
h1 {font-size:2.5rem;font-weight:900;}
h2 {font-size:1.8rem;font-weight:600;}
h3 {font-size:1.2rem;color:var(--bs-primary);font-weight:600;}
section {overflow:hidden!important;position:relative!important;z-index:10!important;}
.firt-heading {font-size:3rem;font-weight:900;letter-spacing: 2px;}

/* B.2 LIENS A */
a { color: var(--bs-primary); text-decoration: none;}
a:hover {color: var(--bs-secondary);}
a[class^="hvr-"] {margin: 1.5rem 0 0 0; padding: 0.7em 1em; cursor: pointer;background: var(--bs-light);text-decoration: none;font-size:18px;}

/* B.4 WIDTH  */
.w-10{max-width:10%;}.w-20{max-width:20%;}.w-30{max-width:30%;}.w-40{max-width:40%;}.w-50{max-width:50%;}.w-60{max-width:60%;}.w-70{max-width:70%;}.w-80{max-width:80%;}.w-90{max-width:90%;}.w-100{max-width:100%;}.w-105{min-width:105%;}

@media (min-width: 768px) {
.w-10-d{max-width:10%;}.w-20-d{max-width:20%;}.w-30-d{max-width:30%;}.w-40-d{max-width:40%;}.w-50-d{max-width:50%;}.w-60-d{max-width:60%;}.w-70-d{max-width:70%;}.w-80-d{max-width:80%;}.w-90-d{max-width:90%;}.w-100-d{max-width:100%;}.w-105-d{min-width:105%;}
}


/* B.5 BUTTON */
.btn-primary { color: #fff; background-color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-primary:hover{color:#fff;background-color:var(--bs-dark);border-color:var(--bs-dark);}
.btn-check:active+.btn-primary:focus,.btn-check:checked+.btn-primary:focus,.btn-primary.active:focus,.btn-primary:active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:none;}
.btn-check:active+.btn-primary,.btn-check:checked+.btn-primary,.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:var(--bs-dark);border-color:var(--bs-dark);}
.btn-check:focus+.btn-primary,.btn-primary:focus{color:#fff;background-color:var(--bs-primary);border-color:var(--bs-primary);box-shadow:none;}

/* B.6 BACKGROUND  */
.bg-light { background-color : var(--bs-third)!important;}
.bg-white {background:white;}
.bg-primary {background: var(--bs-primary)!important;}

.font-title{ font-family: var(--font-title);}
.font-text{font-family: var(--font-text);}

/* B.6.1 CLASS */
.color-light {color:var(--bs-light);}
.color-dark {color:var(--bs-dark);}
.color-primary {color: var(--bs-primary);}
.color-secondary {color: var(--bs-secondary);}
.color-third {color: var(--bs-third);}
.line {width:50%;height:4px;background-color:var(--bs-primary);margin:0 auto;}

/* B.6.2 FILTER */
.grayscale{filter: grayscale(1);}

/* B.6.7 BUTTON RESEAU SOCIAUX */

#facebook{background:0 0;position:relative;padding:5px 15px;display:flex;align-items:center;font-size:17px;font-weight:600;text-decoration:none;cursor:pointer;border:2px solid #0163e0;border-radius:50px;outline:0;overflow:hidden;color:#0163e0;transition:color .3s ease-out .1s;text-align:center;margin-right:4rem;margin-bottom:1rem;}
#facebook svg{fill:#0163E0;height:25px;width:25px}
#facebook a{margin:10px;color:#fff}
#facebook::before{position:absolute;top:0;right:0;bottom:0;margin:auto;content:'';border-radius:50%;display:block;width:20em;height:20em;left:-5em;text-align:center;transition:box-shadow .5s ease-out;z-index:-1}
#facebook:hover{color:#fff;border:2px solid #0163e0}
#facebook:hover svg{fill:currentColor}
#facebook:hover::before{box-shadow:inset 0 0 0 10em #0163e0}


#instagram{background:0 0;position:relative;padding:5px 15px;display:flex;align-items:center;font-size:17px;font-weight:600;text-decoration:none;cursor:pointer;border:2px solid #dd2a7b;border-radius:50px;outline:0;overflow:hidden;color:#dd2a7b;transition:color .3s ease-out .1s;text-align:center;margin-bottom:1rem;}
#instagram svg{fill:#dd2a7b;height:25px;width:25px}
#instagram a{margin:10px;color:#fff}
#instagram::before{position:absolute;top:0;right:0;bottom:0;margin:auto;content:'';border-radius:50%;display:block;width:20em;height:20em;left:-5em;text-align:center;transition:box-shadow .5s ease-out;z-index:-1} #instagram:hover{color:#fff;border:2px solid #dd2a7b}
#instagram:hover svg{fill:currentColor}
#instagram:hover::before{box-shadow:inset 0 0 0 10em #dd2a7b}


#home{background:0 0;position:relative;padding:5px 15px;display:flex;align-items:center;font-size:17px;font-weight:600;text-decoration:none;cursor:pointer;border:2px solid #ffa304;border-radius:50px;outline:0;overflow:hidden;color:#ffa304;transition:color .3s ease-out .1s;text-align:center;margin-bottom:1rem;}
#home svg{fill:#ffa304;height:25px;width:25px}
#home a{margin:10px;color:#fff}
#home::before{position:absolute;top:0;right:0;bottom:0;margin:auto;content:'';border-radius:50%;display:block;width:20em;height:20em;left:-5em;text-align:center;transition:box-shadow .5s ease-out;z-index:-1} #home:hover{color:#fff;border:2px solid #ffa304}
#home:hover svg{fill:currentColor}
#home:hover::before{box-shadow:inset 0 0 0 10em #ffa304;}

/* ======================================================================================================================= */
/* c) ANIMATION */
/* ======================================================================================================================= */

/* C.1 ZOOM */
.zoom { transition: transform .2s; }
.zoom:hover { transform: scale(1.2); }

/* C.2 PULSE */
.pulse2 {animation: pulse2 2s ease-in-out infinite};
@-webkit-keyframes pulse2{0%{-webkit-box-shadow:0 0 0 0 rgba(255,90,60,.6);box-shadow:0 0 0 0 rgba(255,90,60,.6)}70%{-webkit-box-shadow:0 0 0 15px rgba(255,90,60,0);box-shadow:0 0 0 15px rgba(255,90,60,0)}100%{-webkit-box-shadow:0 0 0 0 rgba(255,90,60,0);box-shadow:0 0 0 0 rgba(255,90,60,0)}}
@keyframes pulse2{0%{-webkit-box-shadow:0 0 0 0 rgba(255,90,60,.6);box-shadow:0 0 0 0 rgba(255,90,60,.6)}70%{-webkit-box-shadow:0 0 0 15px rgba(255,90,60,0);box-shadow:0 0 0 15px rgba(255,90,60,0)}100%{-webkit-box-shadow:0 0 0 0 rgba(255,90,60,0);box-shadow:0 0 0 0 rgba(255,90,60,0)}}
    
@keyframes movebounce{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-20px);transform:translateY(-20px);}}

.movebounce1{-webkit-animation:movebounce 1s infinite alternate;;animation:movebounce 1s infinite alternate;}
.movebounce2{-webkit-animation:movebounce 2s infinite alternate;;animation:movebounce 2s infinite alternate;}
.movebounce3{-webkit-animation:movebounce 3s infinite alternate;;animation:movebounce 3s infinite alternate;}
.movebounce4{-webkit-animation:movebounce 4s infinite alternate;;animation:movebounce 4s infinite alternate;}
.movebounce5{-webkit-animation:movebounce 5s infinite alternate;;animation:movebounce 5s infinite alternate;}
.movebounce6{-webkit-animation:movebounce 6s infinite alternate;;animation:movebounce 6s infinite alternate;}

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


/* ======================================================================================================================= */
/* C.1) FOOTER
/* ======================================================================================================================= */


/* ======================================================================================================================= */
/* C.2) PAGES
/* ======================================================================================================================= */


/* ======================================================================================================================= */
/* C.3) TO TOP BUTTON
/* ======================================================================================================================= */

#toTopBtn{position:fixed;z-index:9999;bottom:40px;right:40px;display:none;border:none;cursor:pointer;}
#toTopBtn:hover {filter: brightness(0.6);}
/* ======================================================================================================================= */
/* C.4) NAVBAR
/* ======================================================================================================================= */

#buttonhamham {z-index:1044;position:fixed;right:1rem;top:1rem;	background-color:var(--bs-secondary);}
img#scrollok {z-index:1044;position:fixed;width: 7rem;}
nav ul#navDesk li a {color:var(--bs-light);font-size:1.2rem;text-shadow: 4px 2px 6px rgba(0,0,0);}

ul#navDesk li a {
  position: relative;
}

ul#navDesk li a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    border-radius: 100%;
background: #c40000;
background: linear-gradient(90deg, rgba(196, 0, 0, 1) 0%, rgba(253, 145, 29, 1) 100%);
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }

ul#navDesk li a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.offcanvas ul.navbar-nav li a:hover {color:var(--bs-secondary);}

div.lantern:after,div.lantern:before{height:15px;width:35px;background-color:#000;content:" ";margin-left:10px;display:block}

div.lantern {
  z-index: 1044;
  position: fixed;
  right: 1rem;
  top: 1rem;
  height: 60px;
  width: 60px;
  border: 3px solid #ff3700;
  border-radius: 18px;
  background-color: #f70;
  box-shadow: 0 0 206px 24px #fa6c005b;
  transform-origin: center top;
  animation: swing 3.2s ease-in-out infinite;
}

div.lantern:before{margin-top:-15px;border-radius:5px;border:1px solid #333}
div.lantern:after{border:1px solid #333;margin-top:2px;border-radius:5px}
div.lantern span{display:block;width:100%;height:100%;border-radius:30px;background-color:#ff0;-webkit-box-shadow:inset 0 0 50px 24px #fa0000;-moz-box-shadow:inset 0 0 50px 24px #fa0000;box-shadow:inset 0 0 70px 24px #fa0000;}

div.lantern:hover{-webkit-box-shadow: 0 0px 120px 24px #fa9600;-moz-box-shadow: 0 0px 123px 24px #fa6c00;box-shadow: 0 0px 123px 24px #fa6c00;}
div.lantern:hover span{background-color:#ff0;-webkit-box-shadow:inset 0 0 50px 24px #fabb00;;-moz-box-shadow:inset 0 0 50px 24px #fabb00;;box-shadow:inset 0 0 70px 24px #fabb00;}


/* Standard keyframes */
@keyframes swing {
  0%, 100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

/* Optionnel pour anciens navigateurs */
@-webkit-keyframes swing {
  0%, 100% {
    -webkit-transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
  }
}

/* ======================================================================================================================= */
/* C.5) POP UP
/* ======================================================================================================================= */

#Popup_Accueil .modal-header .modal-title {font-weight:700; font-size:1.4rem;}

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

/* ======================================================================================================================= */
/* D.1) HEADER ACCUEIL
/* ======================================================================================================================= */

header {display:flex;align-items:center;background:url(../../image/rue-commerçante-morlaix-et-asie.webp);background-repeat: no-repeat;background-size: cover;background-position: center;background-attachment:inherit;height: 60vh;position:relative;}
.header-divider {position: absolute;bottom: -1rem; z-index: 2;}
.header-divider {position: absolute;bottom: -1rem; z-index: 2;}

header .header-titles{z-index: 3;padding-top:6rem;}
header .kokeshi-seule { width:40vw;}

header .star{position:absolute;width:5px;height:5px;background-color:#fff;border-radius:50%;opacity:0;animation:4s infinite alternate sparkle;z-index:2;}
@keyframes sparkle{50% {opacity:.4;box-shadow:0 0 10px 5px #ffffff5e;opacity:1;transform:scale(1);box-shadow:0 0 10px 5px #fff}100%{opacity:0;transform:scale(1.5);box-shadow:0 0 10px 5px #ffffff5e;}}

header .dragon-anime {position:absolute;top:0;left: 50%;transform: translateX(-50%);z-index: 4;mix-blend-mode: multiply; animation: fadeInOut 3s ease-in-out forwards;}
@keyframes fadeInOut{0%,20% {width: 15rem;opacity:1;filter:blur(0)}100%{width: 2rem;opacity:0;filter:blur(8px)}}


@media(min-width:768px){
    header {height: 105vh;background-attachment:fixed} 
    header .header-divider {position: absolute; z-index: 2;}
    header .header-titles h1 {font-size:2.5rem;font-weight:600;}
    header .header-titles h2 {font-size:1.5rem;}
    header .kokeshi-seule { width:20%;}
}

/* Texte curviligne */
header .warp{display:block;position:relative;width:579px;margin-bottom:7rem;font:61px/1 'Sour Gummy';text-shadow: 4px 2px 6px rgba(0,0,0);}
[class*=warp__]{display:block;position:absolute;color:var(--bs-light);}
header .warp__0{transform-origin:50% 40px;transform:translate(53.186400000000006px,173.5092px) rotate(-1.22725rad);}
header .warp__1,.warp__2{transform-origin:50% 40px;}
header .warp__1{transform:translate(74.1338px,149.8475px) rotate(-1.117423rad);}
header .warp__2{transform:translate(77.3921px,129.4827px) rotate(-1.013613rad);}
header .warp__3,.warp__4{transform-origin:50% 40px;}
header .warp__3{transform:translate(95.0386px,105.06620000000001px) rotate(-.876035rad);}
header .warp__4{transform:translate(118.0487px,88.80590000000001px) rotate(-.774798rad);}
header .warp__5,.warp__6{transform-origin:50% 40px;}
header .warp__5{transform:translate(126.18270000000001px,72.5035px) rotate(-.663111rad);}
header .warp__6{transform:translate(155.7494px,54.042500000000004px) rotate(-.518109rad);}
header .warp__7,.warp__8{transform-origin:50% 40px;}
header .warp__7{transform:translate(184.3496px,39.1857px) rotate(-.374385rad);}
header .warp__8{transform:translate(219.8628px,30.996300000000005px) rotate(-.271033rad);}
header .warp__10,.warp__9{transform-origin:50% 40px;}
header .warp__9{transform:translate(234.2652px,25.841399999999993px) rotate(-.181635rad);}
header .warp__10{transform:translate(264.2161px,22.1098px) rotate(-.066586rad);}
header .warp__11,.warp__12{transform-origin:50% 40px;}
header .warp__11{transform:translate(295.2125px,21.578200000000002px) rotate(.020335rad);}
header .warp__12{transform:translate(310.5079px,23.3692px) rotate(.118479rad);}
header .warp__13,.warp__14{transform-origin:50% 40px;}
header .warp__13{transform:translate(346.329px,29.6918px) rotate(.251846rad);}
header .warp__14{transform:translate(376.9125px,40.510099999999994px) rotate(.390372rad);}
header .warp__15,.warp__16{transform-origin:50% 40px;}
header .warp__15{transform:translate(408.7975px,58.053399999999996px) rotate(.554797rad);}
header .warp__16{transform:translate(444.0834px,73.8082px) rotate(.676662rad);}
header .warp__17,.warp__18{transform-origin:50% 40px;}
header .warp__17{transform:translate(452.4133px,91.3314px) rotate(.796598rad);}
header .warp__18{transform:translate(476.3713px,119.8613px) rotate(.968692rad);}
header .warp__19,.warp__20{transform-origin:50% 40px;}
header .warp__19{transform:translate(495.2389px,148.9991px) rotate(1.122382rad);}
header .warp__20{transform:translate(512.9492px,171.0294px) rotate(1.226348rad);}
header .warp__21{transform-origin:50% 40px;transform:translate(509.6231px,194.8137px) rotate(1.328164rad);}


#position_sakura { position: absolute; right: 15%; bottom: -9%; z-index:6;}

/* Fin Texte curviligne */

/* ======================================================================================================================= */
/* D.2) PRESENTATION ACCUEIL
/* ======================================================================================================================= */

#presentation .svg-normal-mask { mask: url("../../image/nuage.svg"); mask-repeat: no-repeat; mask-size: contain; mask-position: center;}
#presentation .image-presentation {border-radius:25px;}

#presentation .txt-presentation {padding: 4rem;background: #8800B91A;background: linear-gradient(26deg,rgba(136, 0, 185, 0.16) 0%, rgba(136, 0, 185, 0) 100%);border-radius: 64px;}/* RESPONSIVE MOCHE  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

#presentation .container-presentation { z-index:5;}
#presentation img.vague-droite {width: 90%;right: -20%; top: 10%; opacity: 0.18; z-index: 4}
#presentation img.vague-gauche { width: 62%; left: -20%; bottom: 5%; opacity: 0.18; z-index: 4}


#position_lampion { position: absolute; left: 10%; bottom: -10%;}
#position_lampion img.lampion { width:30%}

/* 
#presentation #carouselExampleControls .image-presentation.slider-img {height: 463px;object-fit: cover;width: 695px;} */

@media(min-width:768px){
#presentation img.vague-droite { width: 35%; right: -15%; top: 0; opacity: 0.1; z-index: 4;}
#presentation img.vague-gauche { width: 30%; left: -7%; top: 31%; opacity: 0.1; z-index: 4;}
.nuage-contour {z-index: 0; left: 0%;  width: 100%;  left: 0%;  bottom: 1%;pointer-events: none;}
#position_lampion img.lampion { width:60%}}


@media(max-width:768px){
#presentation .order-2 {margin-top:-2rem;}}
.nuage-contour {z-index: 0; left: 0%;  width: 100%;  left: 0%;  bottom: 0; pointer-events: none;}

/* ======================================================================================================================= */
/* D.3) PARCOURS ACCUEIL
/* ======================================================================================================================= */

#parcours, #parcours .divider-wrapper { overflow-x: hidden;}
#parcours .divider-wrapper.divider-bottom img {position: relative;top:-5px;left: 50%;transform: translateX(-50%);width: 105%;display: block; }
#parcours .divider-wrapper .divider {filter: drop-shadow(5px 5px 10px #0000008f);}

.bg-red { --bs-bg-opacity: 1;background-color: #7f0d00;}
#parcours h3 {font-size:2.5rem;text-shadow: 3px 4px 6px rgb(109, 25, 0);}
#parcours h4 {font-size:2rem;font-family:var(--font-title);color:var(--bs-primary);font-weight: 600;padding-bottom:1rem;}
#parcours p.h5 {text-shadow: 3px 4px 6px rgb(109, 25, 0);z-index:5;}

#parcours.animate .container-ultra {z-index:2;}
#parcours #step-parcours{background-color:rgb(255, 255, 255);background: linear-gradient(127deg,rgba(255, 255, 255, 1) 0%, rgba(255, 219, 196, 1) 100%);padding: 1rem;outline: 3px dashed red;outline-offset: -2rem;-webkit-box-shadow: 2px 1px 10px 2px rgba(0,0,0,0.56);box-shadow: 2px 1px 10px 2px rgba(0,0,0,0.56);}
#parcours #step-parcours div.col-xl-4{padding:2rem;}

#parcours img.scroll-1 {display:none;}
#parcours img.scroll-2 {display:none;}

@media(min-width:1310px) {
#parcours img.scroll-1 {display:block;transform: rotate(0deg);height:150%;width:auto;z-index:4;top: -24%;left: 0;}
#parcours img.scroll-2 {display:block;transform: rotate(0deg);height:150%;width:auto;z-index:4;top: -24%;right:-1%;}
}

@media(min-width:768px) {
#parcours #step-parcours{padding:2rem 6rem;outline-offset: -2rem;}
#parcours #step-parcours div.col-xl-4{background-color:rgba(255, 255, 255, 0);border-radius:0px;padding:1rem;}
#parcours h3 {font-size:4rem;}
#parcours p.h5 {font-size:3rem;}

/* #parcours .container-ultra .container, #parcours img.scroll-1, #parcours img.scroll-2 {opacity: 0;}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
#parcours.animate .container-ultra .container {animation: fadeIn 0.5s forwards;} */

@keyframes moveScroll1{0%{left:40%;opacity:0;transform:translateX(-50%)}100%{left:0;opacity:1;transform:translateX(0)}}
#parcours.animate img.scroll-1 {animation: moveScroll1 1s forwards;}

@keyframes moveScroll2{0%{right:40%;opacity:0;transform:translateX(50%)}100%{right:-1%;opacity:1;transform:translateX(0)}}
#parcours.animate img.scroll-2 {animation: moveScroll2 1s forwards;}
}

@media (max-width: 1200px) and (min-width: 575px) {
  #parcours #step-parcours { background: rgba(255, 255, 255, 0);outline: none;-webkit-box-shadow: 2px 1px 10px 2px rgba(0,0,0,0);box-shadow: 2px 1px 10px 2px rgba(0,0,0,0);}
  #parcours #step-parcours div.col-xl-4 {background-color:rgb(255, 255, 255);background: linear-gradient(127deg,rgba(255, 255, 255, 1) 0%, rgba(255, 219, 196, 1) 100%);border-radius: 25px;margin-bottom:2rem;padding: 2rem;outline: 3px dashed red;outline-offset: -1rem;}
}

#parcours img.vague-droite {width: 90%;right: -20%; top: 10%; opacity: 0.18; }
#parcours img.vague-gauche { width: 62%; left: -20%; bottom: 5%; opacity: 0.18;}

/* ======================================================================================================================= */
/* D.4) PRODDUITS
/* ======================================================================================================================= */

#produits .divider-wrapper { overflow-x: hidden;}
#produits .divider-wrapper.divider-top img {position: relative;top:-5px;left: 50%;transform: translateX(-50%);width: 105%;display: block; }
#produits .divider-wrapper .divider {filter: drop-shadow(5px 5px 10px #000000b5);}

#produits{background:url(../../image/bg-jp.webp) bottom/100% no-repeat,bottom/contain no-repeat;background-attachment:inherit,inherit;overflow-x:hidden}

@media (min-width:768px){
#produits{background-repeat:no-repeat,no-repeat;background-size:60%,contain;background-position:bottom,bottom;background-attachment:inherit,inherit;overflow-x:hidden}}

#produits h3 {font-size:4rem;font-weight:900;}
#produits p.subtitle { font-size: 1rem;}

#produits img.sangoku {filter: brightness(100%) drop-shadow(0px 10px 0px #ba9cde);}
#produits .box-produits{position:relative; cursor:pointer;margin:2rem 0;}
#produits .img-produits{z-index:3;position:relative}
#produits .sangoku{margin-top:-1rem;position:relative;z-index:1}
#produits .sangoku-wrapper{position:relative;z-index:1;margin-top:-60px}
#produits h4.h4-deco{position:absolute;line-height: 2.3rem;top:45%;left:50%;transform:translate(-50%,-50%);z-index:2;text-align:center;font-weight:900;color:var(--bs-primary);font-size: 2rem;color:var(--bs-primary);}

section#produits div.divider-wrapper.divider-bottom { margin-bottom: -15px; width:110%;margin-left:-10px;}

@media (min-width: 768px) {
  #produits img.sangoku {filter: brightness(100%) drop-shadow(0px 10px 0px var(--bs-primary));}
  #produits .box-produits{position:relative; cursor:pointer;margin:0rem 0;}
  #produits h4.h4-deco{top: 34%; left: 53%; line-height: 2.3rem;font-size: 2.4rem;}
  #produits .sangoku-wrapper{position:relative;z-index:1;margin-top:-40px}
  #produits #papeterie {margin:-8rem 0;}
}

@media (min-width: 1200px) {
  #produits #papeterie {margin:-11rem 0;}
}



/* ======================================================================================================================= */
/* D.5) CONTACT
/* ======================================================================================================================= */

#contact {overflow-x: hidden; background: url('../../image/bg-contact.webp') bottom / contain no-repeat, linear-gradient(180deg, #382d5e 0%, #6f4467 58%, #ff8080 100%); background-color: rgba(0, 0, 0, 0);}
#contact .container-ultra {z-index:3;}
#contact h3{font-size:4rem}
#contact .lily{filter:drop-shadow(21px 0px 0px #ffe3ae)}

#contact .contact-box{border-radius:25px;-webkit-box-shadow:4px 4px 12px 1px #00000081;box-shadow:4px 4px 12px 1px #0000008a;background:url(../../image/rouleau.webp) center 8%/104% no-repeat;}

#contact .contact-box h5{font-size:3rem}
#contact .contact-box ul {background: linear-gradient(179deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.58) 50%, rgba(255, 255, 255, 0.3) 78%, rgba(255, 255, 255, 0) 100%);}
#contact .contact-box ul li{margin-bottom:15px;font-size:1rem}
#contact .contact-box ul li.tel{font-size:1.4rem}
#contact .contact-box a.map{font-size:1.9rem}

@media (min-width:1200px){#contact .contact-box{background:url(../../image/rouleau.webp) 86%/contain no-repeat;background-attachment:inherit;padding:2rem;outline:red dashed 3px;outline-offset:-1.5rem}
#contact .contact-box a.map{font-size:1.4rem}}

#contact .petals-container{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:2}
#contact .cherry-petal{position:absolute;top:-30px;width:30px;height:30px;background:url('../../image/cherry-petal.webp') center/contain no-repeat;opacity:.9;animation:linear infinite fall}

@keyframes fall{0%{transform:translate3d(0,0,0) rotate(0);opacity:0}25%{transform:translate3d(20px,25vh,0) rotate(90deg);opacity:.8}50%{transform:translate3d(-20px,50vh,0) rotate(180deg);opacity:1}75%{transform:translate3d(20px,75vh,0) rotate(270deg);opacity:1}100%{transform:translate3d(0,100vh,0) rotate(360deg);opacity:1}}

.shapedividers_com-7503{overflow:hidden;position:relative;height:20vh}
.shapedividers_com-7503::before{content:'';font-family:'shape divider from ShapeDividers.com';position:absolute;z-index:4;pointer-events:none;background-repeat:no-repeat;bottom:-.1vw;left:-.1vw;right:-.1vw;top:-.1vw;background-size:100% 86px;background-position:50% 100%;background-image:url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.87 1.72" preserveAspectRatio="none"><g fill="%23ffffff"><path d="m 0,0 a 2.5,2.5 0 0 0 5,0 1.5,1.5 0 0 0 3,0 2,2 0 0 0 4,0 1.5,1.5 0 0 0 3,0 1,1 0 0 0 2,0 2.5,2.5 0 0 0 5,0 3.5,3.5 0 0 0 7,0 2.5,2.5 0 0 0 5,0 5,5 0 0 0 10,0 2.5,2.5 0 0 0 5,0 4,4 0 0 0 8,0 2.5,2.5 0 0 0 5,0 3,3 0 0 0 6,0 2.5,2.5 0 0 0 5,0 5.5,5.5 0 0 0 11,0 2.5,2.5 0 0 0 5,0 4,4 0 0 0 8,0 3,3 0 0 0 6,0 4,4 0 0 0 8,0 5,5 0 0 0 10,0 3.5,3.5 0 0 0 7,0 z" transform="matrix(-.26458 0 0 -.26458 33.87 1.72)"/><path d="m 0,0 a 3.5,3.5 0 0 0 7,0 5,5 0 0 0 10,0 4,4 0 0 0 8,0 5.5,5.5 0 0 0 11,0 6.5,6.5 0 0 0 13,0 5,5 0 0 0 10,0 6,6 0 0 0 12,0 6.5,6.5 0 0 0 13,0 5.5,5.5 0 0 0 11,0 4.5,4.5 0 0 0 9,0 6,6 0 0 0 12,0 6,6 0 0 0 12,0 z" opacity=".66" transform="matrix(-.26458 0 0 -.26458 33.87 1.72)"/></g></svg>')}

@media (min-width:2100px){.shapedividers_com-7503::before{background-size:100% calc(2vw + 86px)}}
@media (max-width:768px){.shapedividers_com-7503{width:300%}}

@media (max-width: 1200px) and (min-width: 575px) {
  #contact .contact-box{background:none;}}




/* ======================================================================================================================= */
/* D.6) 404
/* ======================================================================================================================= */

#page404 {overflow-x: hidden; background: url('../../image/bg-contact.webp') bottom / contain no-repeat, linear-gradient(180deg, #382d5e 0%, #6f4467 58%, #ff8080 100%); background-color: rgba(0, 0, 0, 0);}
#page404 .container-ultra {z-index:3;}
#page404 h3{font-size:4rem}
#page404 .lily{filter:drop-shadow(21px 0px 0px #ffe3ae)}

#page404 .contact-box{border-radius:25px;-webkit-box-shadow:4px 4px 12px 1px #00000081;box-shadow:4px 4px 12px 1px #0000008a;background:url(../../image/rouleau.webp) center 8%/104% no-repeat;}

#page404 .contact-box h5{font-size:3rem}
#page404 .contact-box ul {background: linear-gradient(179deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.58) 50%, rgba(255, 255, 255, 0.3) 78%, rgba(255, 255, 255, 0) 100%);}
#page404 .contact-box ul li{margin-bottom:15px;font-size:1rem}
#page404 .contact-box ul li.tel{font-size:1.4rem}
#page404 .contact-box a.map{font-size:1.9rem}

@media (min-width:1200px){#page404 .contact-box{background:url(../../image/rouleau.webp) 86%/contain no-repeat;background-attachment:inherit;padding:2rem;outline:red dashed 3px;outline-offset:-1.5rem}
#page404 .contact-box a.map{font-size:1.4rem}}

#page404 .petals-container{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:2}
#page404 .cherry-petal{position:absolute;top:-30px;width:30px;height:30px;background:url('../../image/cherry-petal.webp') center/contain no-repeat;opacity:.9;animation:linear infinite fall}

@keyframes fall{0%{transform:translate3d(0,0,0) rotate(0);opacity:0}25%{transform:translate3d(20px,25vh,0) rotate(90deg);opacity:.8}50%{transform:translate3d(-20px,50vh,0) rotate(180deg);opacity:1}75%{transform:translate3d(20px,75vh,0) rotate(270deg);opacity:1}100%{transform:translate3d(0,100vh,0) rotate(360deg);opacity:1}}

.shapedividers_com-7503{overflow:hidden;position:relative;height:20vh}
.shapedividers_com-7503::before{content:'';font-family:'shape divider from ShapeDividers.com';position:absolute;z-index:4;pointer-events:none;background-repeat:no-repeat;bottom:-.1vw;left:-.1vw;right:-.1vw;top:-.1vw;background-size:100% 86px;background-position:50% 100%;background-image:url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.87 1.72" preserveAspectRatio="none"><g fill="%23ffffff"><path d="m 0,0 a 2.5,2.5 0 0 0 5,0 1.5,1.5 0 0 0 3,0 2,2 0 0 0 4,0 1.5,1.5 0 0 0 3,0 1,1 0 0 0 2,0 2.5,2.5 0 0 0 5,0 3.5,3.5 0 0 0 7,0 2.5,2.5 0 0 0 5,0 5,5 0 0 0 10,0 2.5,2.5 0 0 0 5,0 4,4 0 0 0 8,0 2.5,2.5 0 0 0 5,0 3,3 0 0 0 6,0 2.5,2.5 0 0 0 5,0 5.5,5.5 0 0 0 11,0 2.5,2.5 0 0 0 5,0 4,4 0 0 0 8,0 3,3 0 0 0 6,0 4,4 0 0 0 8,0 5,5 0 0 0 10,0 3.5,3.5 0 0 0 7,0 z" transform="matrix(-.26458 0 0 -.26458 33.87 1.72)"/><path d="m 0,0 a 3.5,3.5 0 0 0 7,0 5,5 0 0 0 10,0 4,4 0 0 0 8,0 5.5,5.5 0 0 0 11,0 6.5,6.5 0 0 0 13,0 5,5 0 0 0 10,0 6,6 0 0 0 12,0 6.5,6.5 0 0 0 13,0 5.5,5.5 0 0 0 11,0 4.5,4.5 0 0 0 9,0 6,6 0 0 0 12,0 6,6 0 0 0 12,0 z" opacity=".66" transform="matrix(-.26458 0 0 -.26458 33.87 1.72)"/></g></svg>')}

@media (min-width:2100px){.shapedividers_com-7503::before{background-size:100% calc(2vw + 86px)}}
@media (max-width:768px){.shapedividers_com-7503{width:300%}}

@media (max-width: 1200px) and (min-width: 575px) {
  #page404 .contact-box{background:none;}}


/* ======================================================================================================================= */
/* D.6) FOOTER
/* ======================================================================================================================= */

footer { overflow-x: hidden;}