/* RESET CSS */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, s
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img{
    display: block;
    width: 100%;
    height: 100%;
}

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
  }

ol, ul {
	list-style: none;
}


/* Variable */
:root {
    --white: #FFFFFF;
	--grey200: #BFBFBF;
	--black: #000000;
    --off-white: #DDD4CC;
    --light-brown: #B29275;
	--brick: #CB7424;
    --dark-brown: #331D09;
    --num-items: 9;
} 
  
  /* Custom fonts */
  @font-face {
    font-family: 'Bon Vivant Serif Bold';
    src: url(./fonts/BonVivantSerifBold.otf) format('opentype');
  }
  @font-face {
    font-family: 'Bon Vivant Serif';
    src: url(./fonts/BonVivantSerif.otf) format('opentype');
  }
  @font-face {
    font-family: 'Bon Vivant Script';
    src: url(./fonts/Bon\ Vivant\ Script.otf) format('opentype');
  }
  @font-face {
    font-family: 'Open Sans Regular';
    src: url(./fonts/OpenSans-Regular.ttf) format('truetype');;
  }
  @font-face {
    font-family: 'Open Sans Light';
    src: url(./fonts/OpenSans-Light.ttf) format('truetype');;
  }

  /* General rules */
body{
    font-size: 16px;
    color: var(--black);
    font-weight: 400;
}

section{
    width: 100%;
    padding-left: clamp(1.2rem, 6.25vw + -0.8rem, 8.2rem);
    padding-right: clamp(1.2rem, 6.25vw + -0.8rem, 8.2rem);
}

.container{
    width: 100%;
    /* margin-top: 7.2vmax;
    margin-bottom: 7.2vmax; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1{
    font-family: 'Bon Vivant Serif Bold', serif;
    font-size: clamp(3.98rem, 4.518vw + 2.534rem, 9.04rem);
    line-height: clamp(3.98rem, 4.518vw + 2.534rem, 9.04rem);
    font-weight: 600;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 4vmax;
    letter-spacing: -2%; 
}

h2{
    font-family: 'Bon Vivant Serif Bold', serif;
    font-size: clamp(3.32rem, 2.75vw + 2.44rem, 6.4rem);
    line-height: clamp(3.32rem, 4.179vw + 1.983rem, 8rem);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8vh;
    display: inline-block;
    letter-spacing: -1%;
}

h3{
    font-family: 'Bon Vivant Serif', serif;
    font-size: clamp(2.76rem, 1.571vw + 2.257rem, 4.52rem);
    line-height: clamp(3.2rem, 2.143vw + 2.514rem, 5.6rem);
    text-transform: uppercase;
    margin-bottom: 3vh;
}

h4{
    font-family: 'Bon Vivant Serif', serif;
    font-size: clamp(2.4rem, 0.714vw + 2.171rem, 3.2rem);
    line-height: clamp(2.8rem, 1.071vw + 2.457rem, 4rem);
}

a{
    font-family: 'Bon Vivant Script', sans-serif;
    font-size: clamp(2.4rem, 0.714vw + 2.171rem, 3.2rem);
    line-height: clamp(2.8rem, 1.071vw + 2.457rem, 4rem);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.flavor_nos-mochis{
    font-family: 'Open Sans Regular', sans-serif;
    font-size: clamp(1.13rem, 1.239vw + 0.387rem, 2.26rem);
    line-height: clamp(1.6rem, 1.754vw + 0.547rem, 3.2rem);
    text-align: center;
}

p{
    font-family: 'Open Sans Regular', sans-serif;
    font-size: clamp(1.2rem, 0.336vw + 1.093rem, 1.6rem);
    line-height: clamp(2rem, 1.071vw + 1.657rem, 3.2rem);
    margin-top: 1vmax;
}

/* Data hidden */

[data-hidden] {
    opacity: 0;

}

               
 /* Header */

 header {
    width: 100%;
    padding-left: clamp(1.2rem, 6.25vw + -0.8rem, 8.2rem);
    padding-right: clamp(1.2rem, 6.25vw + -0.8rem, 8.2rem);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    height: 13.6vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
 .header-container img {
    object-fit: scale-down;
    object-position: center center;

 }

 /* Section Hero */

 #hero {
    height: 120dvh;
    width: 100%;
    overflow: hidden;
    background: url("./img/hero_langing.jpg") no-repeat center center;
    background-size: cover;
    margin-top: -9vmax;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 8% 57% 40%;
    grid-template-rows: 53% 22% 25%;
 }

 .linear {
    background: linear-gradient(to bottom, rgba(51, 29, 9, 0.8),rgba(51, 29, 9, 0.6),rgba(51, 29, 9, 0.4), rgba(51, 29, 9, 0.1),rgba(51, 29, 9, 0.4), rgba(51, 29, 9, 0.6), rgba(51, 29, 9, 0.8)) no-repeat center center ;
    background-size: cover;
    position: relative;
    z-index: 1;
    grid-area: 1 / 1 / -1 / -1;
    opacity: 1;
    transition: all 0.3s ease-in-out;
 }

 #hero:hover .linear {
    opacity: 0;
 }
    
.click-and-collect_hero {
    grid-area: 1 / 3 / 3 / -1;
    width: 47.6vmax;
    height: 47.6vmax;
    justify-self: center;
    align-self: center;
    position: absolute;
    z-index: 2;
    display: grid;
    grid-template-columns: 30% 40% 30%;
    grid-template-rows: 32% 36% 32%;
 }

 
 .click-and-collect_hero > img {
    grid-area: 1 / 1 / 4 / 4;
    object-fit: contain;
    object-position: center center;
    position: absolute;
    opacity: 0.4;
 }
 .wrapper_click-and-collect {
    grid-area: 2 / 2 / 3 / 3 ;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    color: var(--white);
    z-index: 3;
 }

 .wrapper_click-and-collect img {
    width: 3.7vmax;
    height: 3.7vmax;
    object-fit: contain;
    object-position: center center;
    align-self: center;
 }

 .wrapper_click-and-collect a:hover {
    color: var(--grey200);
    text-decoration: underline;
    text-underline-offset: 2rem;
    text-decoration-color: var(--grey200);
    cursor: pointer;
 }

 .client_hero {
    grid-area: 2 / 2 / 3 / 3 ;
    position: relative;
    z-index: 2;
    object-fit: scale-down;
    object-position: center center;
    justify-self: start;
    align-self: end;
    width: fit-content;
    height: fit-content;
 }

h1 {
    grid-area: 3 / 1 / 4 / 4;
    justify-self: start;
    align-self: start;
    position: relative;
    z-index: 2;
}

/* Section Nos concepts */

.container_nos-concepts {
    margin-top:  20vh;
}
.wrapper_nos-concepts {
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(3, clamp(16.8rem, 26.754vw + 0.747rem, 41.2rem));
    grid-template-rows: repeat(2, clamp(16.8rem, 26.754vw + 0.747rem, 41.2rem));
    gap: 2vmax;
    padding-left: 0;
    padding-right: 0;
}
.box_text {
    display: grid;
    grid-template-rows: subgrid;
    text-align: center;
    align-items: start;
    justify-items: center;
}
.box_text p {
    margin-top: clamp(4rem, 31.429vw + -6.057rem, 12.8rem);
    text-align: center;
    align-items: center;

}

.wrapper_nos-concepts img {
    /* width: clamp(16.8rem, 26.754vw + 0.747rem, 41.2rem);
    height: clamp(16.8rem, 26.754vw + 0.747rem, 41.2rem); */
    justify-self: center;
    align-self: start;
    opacity: 1;
    transition: all 0.3s ease-in-out;
}
.vegetal {
    grid-area: 1/1/2/2;
    z-index: 1;
}
.sans-gluten{
    grid-area: 1/2/2/3;
    z-index: 1;
}
.fait-maison{
    grid-area: 1/3/2/4;
    z-index: 1;
}
.vegetal-default {
    grid-area: 1/1/2/2;
    z-index: 0;
}
.sans-gluten-default {
    grid-area: 1/2/2/3;
    z-index: 0;
}
.fait-maison-default {
    grid-area: 1/3/2/4;
}
.one {
    grid-area: 2/1/3/2;
}
.two {
    grid-area: 2/2/3/3;
}
.three {
    grid-area: 2/3/3/4;
}

.vegetal:hover, .sans-gluten:hover, .fait-maison:hover {
    opacity: 0;
    cursor: pointer;
}

/* Footer links */

#footer-links {
    position: sticky;
    bottom: 4.8vh;
    z-index: 2;

}

.container_footer-links {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    z-index: 3;
}

.links-wrapper_footer-links {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 1.6rem;
    align-items: center;
    justify-content: flex-end;
}

.links-wrapper_footer-links > a {
    color: #000000;
    font-family: 'Open sans', sans-serif;
    font-size: clamp(1.6rem, 0.589vw + 1.411rem, 2.26rem);
    line-height: clamp(2rem, 1.071vw + 1.657rem, 3.2rem);
    margin-bottom: 1.5vmax;
}
.btn_footer-links:hover {
    color: var(--grey200);
    text-decoration: underline;
    text-underline-offset: 2rem;
    text-decoration-color: var(--grey200);
    cursor: pointer;
 }


.btn_footer-links {
    align-self: flex-end;
    transition: all 0.3s ease-in-out;
}


/* Section Nos mochis */

#nos-mochis .container {
    margin-top: 10vh;
}

.hover-img_nos-mochis{
    z-index: 0;
    transition: all 0.3s ease-in-out;
}


.box-container_nos-mochis {
    width: fit-content;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(4, clamp(12.5rem, 19.627vw + 0.724rem, 30.4rem));
    grid-template-rows: clamp(12.5rem, 19.627vw + 0.724rem, 30.4rem) clamp(1.6rem, 1.754vw + 0.547rem, 3.2rem)
    clamp(12.5rem, 19.627vw + 0.724rem, 30.4rem) clamp(1.6rem, 1.754vw + 0.547rem, 3.2rem);
    gap:clamp(1.2rem, 0.714vw + 0.971rem, 2rem);
    align-items: center;
    justify-items: center;
}

 

.flavor_nos-mochis {
    display: inline-block;
    text-align: center;
    justify-self: center;
    align-self: end;
}

.matcha, .sesame, .caramel, .kinako, .ananas, .framboise, .hojicha, .harico{
    width: clamp(14.5rem, 19.627vw + 2.724rem, 32.4rem);
    height: clamp(14.5rem, 19.627vw + 2.724rem, 32.4rem);
    justify-self: center;
    align-self: center;
    z-index: 1;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    
}
.matcha-decoupe, .sesame-decoupe,.caramel-decoupe,.kinako-decoupe,
.ananas-decoupe, .framboise-decoupe,.hojicha-decoupe,.harico-decoupe {
    width: clamp(12.5rem, 19.627vw + 0.724rem, 30.4rem);
    height: clamp(12.5rem, 19.627vw + 0.724rem, 30.4rem);


}

.matcha-decoupe, .matcha {
    grid-area: 1/1/2/2;
}
.sesame-decoupe, .sesame {
    grid-area: 1/2/2/3;
}
.caramel-decoupe, .caramel {
    grid-area: 1/3/2/4;
}
.kinako-decoupe, .kinako {
    grid-area: 1/4/2/5;
}
.ananas-decoupe, .ananas{
    grid-area: 3/1/4/2;
}
.framboise-decoupe, .framboise{
    grid-area: 3/2/4/3;
}
.hojicha-decoupe, .hojicha{
    grid-area: 3/3/4/4;
}
.harico-decoupe, .harico{
    grid-area: 3/4/4/5;
}

.matcha:hover, .sesame:hover, .caramel:hover, .kinako:hover, 
.ananas:hover, .framboise:hover, .hojicha:hover, .harico:hover {
    opacity: 0;
}


/* Section Anecdote */

#anecdote {
    padding-top: 30vh;
    padding-bottom: 10vh;
}

.grid-container {
    height: fit-content;
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(2, clamp(26.2rem, 40.132vw + 2.121rem, 62.8rem));
    grid-auto-rows: repeat(2, clamp(26.2rem, 40.132vw + 2.121rem, 62.8rem));
    gap:clamp(1.2rem, 0.714vw + 0.971rem, 2rem);
    margin-right: auto;
    margin-left: auto;
    justify-items: center;
    align-items: center;

}

.grid-container > img {
    height: clamp(26.2rem, 40.132vw + 2.121rem, 62.8rem);
    width:  clamp(26.2rem, 40.132vw + 2.121rem, 62.8rem);
    justify-self: center;
    align-self: center;
}

.histoire-default, .tradition-default {
    z-index: 0;
}
.histoire-default, .histoire {
    grid-area: 1 / 2 / 2 / 3;
}
.tradition-default, .tradition {
    grid-area: 2 / 1 / 3 / 2;
}
.text-wrapper > p {
    display: inline-block;
}

.histoire, .tradition {
    z-index: 1;
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

.histoire:hover, .tradition:hover {
    opacity: 0;
} 


/* Section Question */

#foires-aux-questions {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#foires-aux-questions .container {
    margin-top: 20vh;
    margin-bottom: 20vh;
    width: 90vw;
    overflow: hidden;
}

.item img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
}

.slide-wrapper {
    width: 2704px;
    margin-inline: auto;
    position: relative;
    height: 402px;
}

@keyframes scrollLeft {
    to {
      left: -296px;
    }
}

.item {
    width: 296px;
    height: 402px;
    left: 100%;
    position: absolute;
    animation: scrollLeft 50s linear infinite;
}

.one {
    animation-delay: calc( 50s / 9 * -8);
}
.two {
    animation-delay: calc( 50s / 9 * -7);
}
.three {
    animation-delay: calc( 50s / 9 * -6);
}
.four {
    animation-delay: calc( 50s / 9 * -5);
}
.five {
    animation-delay: calc( 50s / 9 * -4);
}
.six {
    animation-delay: calc( 50s / 9 * -3);
}
.seven {
    animation-delay: calc( 50s / 9 * -2);
}
.eight {
    animation-delay: calc( 50s / 9 * -1);
}

/* Vidéo */

#video {
    padding-top: 10vh;
}
#video h2 {
    text-align: center;
}
.video-container {
    position: relative; 
    width: 100%;
    padding-bottom: 56.25%; 
    margin-bottom: 9.6vh;
  }
  
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  

/* Footer */

footer{
    margin-top: 10vh;
    width: 100%;
    height: clamp(40rem, 20.134vw + 33.557rem, 64rem);
    background: url("./img/map-footer.jpg") no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 
    clamp(1.2rem, 5.872vw + -0.679rem, 8.2rem) clamp(4rem, 2.685vw + 3.141rem, 7.2rem)
    clamp(8rem, 39.597vw + -4.671rem, 55.2rem) clamp(5.6rem, 3.691vw + 4.419rem, 10rem)
    clamp(13.2rem, 48.154vw + -2.209rem, 70.6rem); 
    grid-template-rows: 
    clamp(17.2rem, 8.221vw + 14.569rem, 27rem) clamp(5.6rem, 3.691vw + 4.419rem, 10rem)
    clamp(9.2rem, 2.013vw + 8.556rem, 11.6rem) clamp(4rem, 2.685vw + 3.141rem, 7.2rem)
    clamp(4rem, 3.523vw + 2.872rem, 8.2rem);

}
footer svg {
    object-fit: content;
    object-position: center center;
    cursor: pointer;
    fill: var(--black);
    z-index: 1;
    transition: all 0.3s ease;
}
.icon-scroll-up {
    height: clamp(4rem, 2.685vw + 3.141rem, 7.2rem);
    width: clamp(4rem, 2.685vw + 3.141rem, 7.2rem);
    grid-area: 4 / 2 / 5 / 3;
}

.icon-localisation {
    height: clamp(5.6rem, 3.691vw + 4.419rem, 10rem);
    width: clamp(5.6rem, 3.691vw + 4.419rem, 10rem);
    grid-area: 2 / 4 / 3 / 5;
}

.icon-localisation:hover > svg, 
.icon-scroll-up:hover > svg{
    fill: var(--brick);
}