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

@font-face {
    font-family: 'BodoniXT';
    src: url('/fonts/Kaisei.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Inter-SemiBold';
    src: url('/fonts/Inter-semiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* 🎨 Couleurs */
    --text-color: white;
    --background-color: #000000;
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
    --font-title: 'BodoniXT', serif;
    --font-subtitle:'Inter', serif;
    --font-subtitleBold:'Inter-SemiBold', serif;
}

html{
    font-size: 1.2vw;
}

body{
    background-color:  var(--background-color);

}

.content-cart-login{
    opacity: 1;
}

.letterTitle,.letter-excellence{
    transform: rotateX(90deg) translateX(-30%);
    display: inline-block;
    opacity: 0;
}

.letterSpacing{
    margin:0 1.25rem
}

.ancre{
    opacity: 1;
    transform: translateY(0);
}

.line-bottom-header{
    transform: scaleX(1);
}

.a-propos-histoire{
    min-height: 400vh;
    display: flex;
    justify-content: center;
    position: relative;
    padding: 0 2rem;

}

.a-propos-texte{
    color: white;
    width: 100%;
}

/*.a-propos-paragraphe{
    flex:2;
    display: flex;
    align-items: center;
}

.a-propos-paragraphe > p{
    padding-right: 10rem;
}*/

.content-img-gallery{
    position: sticky;
    width: 100%;

}

.gallery {
    perspective: 1500px;
    width: 100%;
    position: relative;
    height: 100vh;
    overflow: hidden;
}

  .gallery-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40vw;       /* largeur adaptée */
    height: auto;
    transform-style: preserve-3d;
    opacity: 0;
    max-width: 60vw;  /* limite la largeur max */
    max-height: 60vh;
    transform: translate(0)
  }

  .gallery-item img,
  .gallery-item video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 1rem; /* optionnel, pour l’arrondi comme sur ton screenshot */
    position: relative;
    z-index: 0;
  }
.img-gallery{
    max-width: 50%;
    height: auto;
    transform: scale(0);

}

.gallery-item:nth-child(1) {
    left: 10%;
    bottom: 20%;
  }
  
  .gallery-item:nth-child(2) {
    left: 60%;
    top: 10%;
    transform: translate(-50%, -50%) translateZ(-4000px);
  }
  
  .gallery-item:nth-child(3) {
    left: 20%;
    top:-10%;
    z-index: 1;
  }
  
  .gallery-item:nth-child(4) {
    left: 50%;
    top: 50%;
  }
  
  .gallery-item:nth-child(5) {
    left: 20%;
    bottom: 100%;
  }
  
  .gallery-item:nth-child(6) {
    left: 40%;
    top: 20%;
  }
  
  .gallery-item:nth-child(7) {
    left: 10%;
    top: 30%;
  }
  
  .gallery-item:nth-child(8) {
    left: 40%;
    bottom: 20%;
  }

  .gallery-item:nth-child(9) {
    left: 20%;
    bottom: 20%;
  }

  .gallery-item:nth-child(10) {
    left: 40%;
    top: -40%;
  }

  .banner-container{
    position: absolute;
    bottom:3%;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    overflow: hidden;
    padding: 0 0.5rem
  }

  .banner-link{
    color: #0A0A0A;
    background-color: #d9d9d9;
    padding: 0.25rem 1rem;
    border-radius: 2rem;
    text-decoration: none;
    font-size: 1rem;
    font-family: var(--font-title);
    font-weight: 100;
    font-style: italic;
      transform: translateY(100%);
      opacity: 0;
      display: inline-block;
    transition: transform 0.3s ease!important;
  }

  .banner-link:hover {
     transform: scale(1.05)!important
  }

  .banner-title{
    font-style: italic;
    letter-spacing: 0.2rem;
    font-family: var(--font-title);
    font-weight: 100;
    transform: translateY(100%);
    opacity: 0;
  }



.a-propos-titre{
    flex:1;
    display: flex;
   align-items: center;
   color: white;
   justify-content: center;
   height: 100vh;
   position: sticky;
   top: 0
}

.a-propos-titre >h1{
    font-size: 6rem;
    font-family: var(--font-title);
    text-align: center;
    font-weight: 100;
}

/*.a-propos-media{
    flex: 0 0 55%;
    position: relative;
}*/

#canvas{
    margin: 6rem 0;
}

.content-images{
    display: flex;
    gap:1rem;
    height: 100%;
    width: 100%;
}

.a-propos-image{
    width: 33%;
    object-fit: cover;
    height: auto;
}

.a-propos-image:nth-of-type(1){
    height: 51%;
}

.a-propos-image:nth-of-type(3){
    height: 82%;
}

.section-informations{
    margin: 0 0;
}

.section-informations > p{
    font-size: 2rem;
    font-family: var(--font-primary);
    text-align: center;
    color:white
}

.section-cbd-premium{
    padding:0 3rem;
}

.cbd-premium-title{
    display: flex;
    align-items: center;
    font-size: 7rem;
    gap:2rem;
    color: white;
    margin-bottom: 2rem;
    font-family: var(--font-title);
    font-weight: 100;
    overflow: hidden;
}

 .cbd-premium-keyword{
    transform: translateY(50%);
    opacity: 0;
  }

  .cbd-premium-line{
    scale:0;
    opacity: 0;
  }

.cbd-premium-line{
    width: 100%;
    height: 0.15rem;
    background-color: #d9d9d9;
}

.cbd-premium-content{
    display: flex;
    justify-content: space-between;
}

.cbd-premium-text-container {
   flex: 0 0 45%;
   color:white;
   display: flex;
   flex-direction: column;
   justify-content: end;
   gap:4rem
}

.cbd-premium-image-container{
    flex: 0 0 40%;
    position: relative;
}

.cbd-premium-image{
    width: 100%;
    height: 36rem;
    object-fit: cover;
}

.cbd-premium-paragraph{
    font-size: 0.9rem;
    font-family: var(--font-subtitle);
    padding-right: 4rem;

}

.cbd-premium-since{
    display: flex;
    flex-direction: column;
    gap:0.1rem;
    overflow: hidden;
}

.cbd-premium-since-label{
    font-size: 1.2rem;
    font-family: var(--font-subtitleBold);
    font-style: italic;
    transform: translateY(-100%);
    opacity: 0;
}

.hiddenImage{
    background-color: #000000;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    transform: scaleX(1);
    transform-origin: right;
}

.letter-since-year{
    display: inline-block;
    transform: rotateX(90deg) translateX(-30%);
    opacity: 0;
}

.cbd-premium-since-year{
    font-size: 10rem;
    font-family: var(--font-subtitleBold);
    letter-spacing: 0.5rem;
    display: block;
}

.excellence-section{
    display: flex;
    justify-content: space-between;
    padding: 0 3rem;
    margin-top: 10rem;
    position: relative;
}

.excellence-title{
    position: absolute;
    text-align: right;
    left:25%;
    letter-spacing: 0.3rem;
    color:white;
    top:3%;
    z-index: 2;
    overflow: hidden;
}

.excellence-title > span:nth-of-type(1){
    font-size: 7rem;
    font-family: var(--font-subtitle);
}

.excellence-title > span:nth-of-type(2){
    font-size: 5.7rem;
    font-family: var(--font-title);
    font-style: italic;
    font-weight: 100;

}

.excellence-image-block--left{
    flex: 0 0 33%;
    height: 48rem;
    position: relative;
}

.excellence-image{
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.excellence-text-block{
    flex: 0 0 25%;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap:5rem;
    margin-top: 15rem;
}

.excellence-paragraph{
    color:white;
    font-size: 0.9rem;
    font-family: var(--font-subtitle);
}

.excellence-link{
    color:#0A0A0A;
    text-decoration: none;
    background-color: #d9d9d9;
    align-self: flex-start;
    padding: 0.3rem 2rem;
    font-family: var(--font-subtitleBold);
}

.excellence-image-block--right{
    flex: 0 0 20%;
    align-self: center;
    margin-bottom: 1rem;
    height: 25rem;
    position: relative;
}

.philosophy-section{
    padding: 0 3rem;
    margin-top: 10rem;
}

.philosophy-container{
    display: flex;
    justify-content: space-between;
}

.philosophy-header{
    flex: 0 0 20%
}

.philosophy-title{
    font-size: 4rem;
    font-family: var(--font-title);
    color: white;
    font-weight: 100;
}

.content-word-title-first-section{
overflow: hidden;
display: block;
}

.word-title-first-section{
display: block;
    transform: translateY(100%);
}



.philosophy-content{
    flex: 0 0 30%;
    color:white;
    margin-left: 3rem;
}

.philosophy-subtitle{
    font-family: var(--font-subtitleBold);
    font-weight: bold;
}

.philosophy-text{
    margin-top: 2rem;
    font-size: 0.9rem;
    font-family: var(--font-subtitle);
}

.philosophy-divider{
    width: 100%;
    height: 0.2rem;
    background-color: #d9d9d9;
    margin: 6rem 0;
}

.philosophy-image-container{
    flex: 0 0 33%;
    display:none
}

.philosophy-image{
    width: 100%;
}

.bloc-philosophy{
    color:white;
    padding-top: 2.1rem;
}

.bloc-philosophy > h4{
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-family: var(--font-subtitleBold);
    font-weight: bold;
}

.content-philosophy{
    display: flex;
    flex-direction: column;
    gap:0.4rem;
    padding-bottom: 1rem;
}

.philosophy span{
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    font-family: var(--font-subtitle);
}

.line{
    width: 100%;
    height: 0.05rem;
    background-color: white;
    transform: scaleX(1);
    transform-origin: left;
}

.section-products {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10rem;
    margin-bottom: 10rem;
    padding: 0 3rem;
}

.section-products > h2 {
    width: 70%;
    align-self: flex-start;
    margin-bottom: 1rem;
    font-size: 1.7rem;
    font-family: var(--font-subtitleBold);
    color:white;
    font-weight: bold;
}

#canvas-not-fluid{
    display: none;
}

.word-quality{
    transform: translateY(100%);
    display: block;
    opacity: 0;
}

#age-popup{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#000c;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
    padding: 0.5rem;
    min-height: 100%;
    height: 100%;
       box-sizing: border-box; /* évite que le padding dépasse */
    overflow-x: hidden; /* bloque les débordements éventuels */
}

.bloc-popup{
background:white;
padding:2rem;
border-radius:1rem;
text-align:center;
display: flex;
flex-direction: column;
gap:1.2rem;
margin: auto;

      /* ✅ ne dépasse jamais l’écran */
          /* ✅ prend toute la place dispo */
}

.title-popup-age{
    font-family: var(--font-title);
    font-weight: bold;
    font-size: 1.8rem;
}

.text-popup-age{
    font-family: var(--font-subtitle);
    font-size: 1.1rem;

}

.container-btn-age{
    display: flex;
    flex-direction: column;
    gap:1rem;
    margin-top: 0.5rem;
}

#accept-age,#refuse-age{
    background-color: #0A0A0A;
    border: none;
    color: #D9D9D9;
    font-family: var(--font-subtitleBold);
    font-size: 1rem;
    padding: 0.3rem 0;
    cursor: pointer;
}

#accept-age:hover,#refuse-age:hover{
    background-color: #171717;
    transform: scale(1.02);
}


@media (max-width: 991.98px) {
    html{
        font-size: 62.5%;
    }

     .bloc-popup{
background:white;
padding:2.5rem;
    }

    .title-popup-age{
    font-size: 3rem;
    }

    .text-popup-age{

        font-size: 1.5rem;
    }

    #accept-age,#refuse-age{

    font-size: 1.5rem;

}


    .cbd-premium-keyword,.cbd-premium-since-label,.word-quality,.word-title-first-section {
        transform: translateY(0);
        opacity: 1;
    }

    .cbd-premium-line {
        scale: 1;
        opacity: 1;
    }

    .hiddenImage{
        transform: scaleX(0);
    }

    .letter-since-year,.letter-excellence{
        transform: rotate(0deg) translateX(0);
        opacity: 1;
    }

    .a-propos-titre,.gallery  {
        height: 100dvh;
    }

    .a-propos-titre > h1 {
        font-size: 8rem;
    }

    .banner-title,.banner-link {
    font-size: 2rem;
}

.banner-link{
    padding: 0.7rem 3rem;
}

#canvas{
    display: none;
}

#canvas-not-fluid{
    display: block;
    color:#d9d9d9;
    font-size: 3rem;
    text-align: center;
    margin: 15rem 0;
    padding: 0 10rem;
}

.cbd-premium-content {
    flex-direction: column;
}

.cbd-premium-image {
    height: 41rem;
    margin: 2rem 0 4rem 0;
}

.cbd-premium-paragraph {
    font-size: 1.8rem;
    padding-right: 0;
}

.cbd-premium-since-label {
    font-size: 2.2rem;
}

.cbd-premium-since-year {
    font-size: 12rem;
}

.excellence-section {
    flex-direction: column;
}

.excellence-title {
    position: initial;
    text-align: left;

}

.excellence-image-block--left {
    height: 41rem;
    flex:none;
    margin: 3rem 0 4rem 0;
}

.excellence-image-block--right {
    display: none;
}

.cbd-premium-since {
    align-items: end;
}

.excellence-text-block {
    margin-top: 0;
}

.excellence-paragraph,.excellence-link  {
    font-size: 1.8rem;
}

.excellence-link {
    padding: 0.5rem 3rem;
}

.philosophy-container {
    flex-direction: column;
}

.philosophy-title {
    font-size: 7rem;
    max-width: 100%;
}

.philosophy-title-end{
    display: none;
}

.philosophy-header {
    flex:0
}

.philosophy-content {
    margin-left: 0;
    flex:0;
    margin-top: 6rem;
}

.philosophy-subtitle {
    font-size: 2rem;
    margin-bottom: 3rem;
    display: block;
}

.philosophy-text {
    font-size: 1.8rem;
}

.philosophy-image-container {
    flex:none;

}

.philosophy-image {
    height: 36rem;
    object-fit: cover;
}

.bloc-philosophy {
    margin-bottom: 4rem;
    padding-top: 0;
    margin-top: 4rem;
}

.bloc-philosophy > h4 {
    font-size: 2rem;
}

.philosophy span {
    font-size: 1.8rem;
}

.line {
    height: 1.2px;
}

.content-philosophy {
    gap:2rem;
    margin-top: 3rem;
}

.section-products > h2 {
    font-size: 2.2rem;
    margin-bottom: 5rem;
}

.section-products {
    margin-top: 5rem;
}

.gallery-item {

    width: 60vw;       /* largeur adaptée */

  }
}


 @media (max-width: 767.98px) { /* md- */

      .a-propos-titre > h1 {
        font-size: 6rem;
      }

       #canvas-not-fluid {
        font-size: 2.5rem;
       }

    .cbd-premium-title {
        flex-direction: column;
    }

    .banner-title, .banner-link {
        font-size: 1.5rem;
      }
  }

  @media (max-width: 575.98px) {
    .a-propos-titre > h1 {
        font-size: 3.5rem;
      }

      .section-products > h2 {
        font-size: 2rem;
      }

        #accept-age,#refuse-age{

    padding: 0.5rem 0;

}

.cbd-premium-paragraph,  .excellence-paragraph, .excellence-link,  .philosophy-text,.philosophy span   {
    font-size: 1.6rem;
}


      .gallery-item {

        width: 100vw;       /* largeur adaptée */
        max-width: 100vw;
      }

      .banner-title, .banner-link {
        font-size: 1.2rem;
      }

      .banner-title{
        max-width: 50%;
      }
      #canvas-not-fluid {
        font-size: 2rem;
        padding: 0 6rem;
      }

      .cbd-premium-title {
        font-size: 4.5rem;
      }

      .section-cbd-premium,.excellence-section,.philosophy-section   {
        padding: 0 2rem;
      }

      .cbd-premium-since-year {
        font-size: 8rem;
      }

      .excellence-title > span:nth-of-type(1) {
        font-size: 3.8rem;
      }

      .excellence-title > span:nth-of-type(2) {
        font-size: 2.7rem;
      }

      .philosophy-title {
        font-size: 4.2rem;
      }

      .philosophy-subtitle,.bloc-philosophy > h4  {
        font-size: 2rem;
      }
  }