.sticker-container{
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    padding-block: var(--padding-block-sticker-container);
 
    position: relative;
}

.sticker-container.padding-minus{
  padding-block: var(--padding-block-sticker-container-minus);
  transition: 0.2s;
  cursor: default;
}

.sticker-container a{
  z-index: 15;
}

.sticker-container.padding-minus:hover{
  translate: 0 -2px;
}

    .sticker-orange{
        max-width: 80%;
        width: fit-content;
        height: auto;

        display: flex; 
        flex-direction: column;
        z-index: 2;
        
        border-radius: calc(var(--radius)/2);
        padding: 15px;
        background-color: var(--color2);
        border: solid var(--border-sticker) var(--color2bis);
        box-shadow: 0 0 0 var(--border-sticker) var(--color4);

        object-fit: fill;
        color: var(--color4);
        font-size: calc(var(--font-size)/2);
        font-family: var(--principalFont111);
        text-align: center;
        text-wrap: balance;

        overflow: hidden;
        transition: 0.2s;
        filter: var(--drop-shadow);
    }

    .sticker-orange.cta{
        cursor: pointer;
    }
    .sticker-orange.cta.gros{
        max-width: none;
    }
    .sticker-orange.cta.gros img{
      width: var(--width-sticker-orange-cta-gros-img);
      padding: 5%;
    }

    .sticker-orange.bas-droite, .sticker-orange.cta.bas-droite{ margin-right: calc(var(--margin-inline) + var(--decal-manuel)); place-self: end; margin-top: var(--margin-block-orange-cta); }
    .sticker-orange.bas-gauche, .sticker-orange.cta.bas-gauche{ margin-left: calc(var(--margin-inline) + var(--decal-manuel)); place-self: start; margin-top: var(--margin-block-orange-cta); }
    .sticker-orange.bas-milieu, .sticker-orange.cta.bas-milieu{ place-self: center; margin-top: var(--margin-block-orange-cta); }

    .sticker-orange.haut-droite, .sticker-orange.cta.haut-droite{ margin-right: calc(var(--margin-inline) + var(--decal-manuel)); place-self: end; margin-bottom: var(--margin-block-orange-cta); }
    .sticker-orange.haut-gauche, .sticker-orange.cta.haut-gauche{ margin-left: calc(var(--margin-inline) + var(--decal-manuel)); place-self: start; margin-bottom: var(--margin-block-orange-cta); }
    .sticker-orange.haut-milieu, .sticker-orange.cta.haut-milieu, .bouton-wrapper.haut-milieu{ place-self: center; margin-bottom: var(--margin-block-orange-cta); }

    .sticker-orange.seul, .sticker-orange.cta.seul{ place-self: center; max-width: 100%}
      
    .sticker-orange.cta:hover{
          translate: 0px -2px;
        }


   .sticker-orange-fullimg {
    width: 90%;
    height: var(--height-sticker-fullimg);
    display: block;
    z-index: 0;
    place-self: center;
    border-radius: calc(var(--radius) / 2);
    padding: 0px;
    background-color: white;
    border: solid var(--border-sticker) var(--color2bis);
    box-shadow: 0 0 0 var(--border-sticker) var(--color4);
    overflow: hidden;
    position: relative;
    transition: 0.2s;
    filter: var(--drop-shadow);
    }

      .sticker-orange-fullimg.shop {
        height: var(--height-sticker-fullimg-shop);
        margin-bottom: -30px;
      }

      .sticker-orange-fullimg img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        z-index: 0;
      }

      .sticker-orange.imgapp {
        width: var(--width-sticker-fullimg-app);
        height: auto;
        padding: 0px;
      }

      .sticker-orange.imgapp img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }



    .sticker-bleu{
        min-width: 250px;
        width: fit-content;
        max-width: 80%;
        height: auto;
        
        display: block;
        z-index: 1;
        
        border-radius: calc(var(--radius)/2);
        padding: 15px;
        background-color: var(--color1);
        border: solid var(--border-sticker) var(--color1bis);
        box-shadow: 0 0 0 var(--border-sticker) var(--color4);

        object-fit: fill;
        color: var(--color4);
        font-size: calc(var(--font-size)/2);
        font-family: var(--secondaryFont);

        overflow: hidden;
        transition: 0.2s;
        filter: var(--drop-shadow);
    }

    .sticker-bleu a{color: var(--color1bis); text-decoration: underline;}
    .sticker-bleu a:hover{color: var(--color4);}

    .remarque{
      margin-left: 10px;
      padding-left: 6px;
      margin-top: 20px;
      border-left: solid 2px var(--color1bis);
      /*border-radius: 5px;*/
      color: var(--color1bis);
    }

    .sticker-bleu img{width: 100%;}
    .sticker-bleu.transparent{ background: transparent; border: transparent; box-shadow: 0 0 0 0 transparent; filter: drop-shadow(0); max-width: 30vw;}

    .sticker-bleu.bas-droite{ margin-right: calc(var(--margin-inline) + var(--decal-manuel)); place-self: end; margin-top: var(--margin-block-bleu); }
    .sticker-bleu.bas-gauche{ margin-left: calc(var(--margin-inline) + var(--decal-manuel)); place-self: start; margin-top: var(--margin-block-bleu); }
    .sticker-bleu.bas-milieu{ place-self: center; margin-top: var(--margin-block-bleu); }
    .sticker-bleu.bas{ place-self: center; margin-top: var(--margin-block-bleu); max-width: 75%;}

    .sticker-bleu.haut-droite{ margin-right: calc(var(--margin-inline) + var(--decal-manuel)); place-self: end; margin-bottom: var(--margin-block-bleu); }
    .sticker-bleu.haut-gauche, .sticker-bleu.transparent.haut-gauche{ margin-left: calc(var(--margin-inline) + var(--decal-manuel)); place-self: start; margin-bottom: var(--margin-block-bleu); }
    .sticker-bleu.haut-milieu{ place-self: center; margin-bottom: var(--margin-block-bleu); }

    .sticker-bleu.seul, .sticker-bleu.seul.cta{ place-self: center } .sticker-bleu.seul.cta:hover{cursor: pointer; translate: 0 -2px;}

    .sticker-bleu.fulltxt{place-self: center; min-width: 80%; column-width: 30vw; column-gap: 30px; padding: 30px 20% 30px 30px;}

    
    .sticker-bleu.plus-egal{
      min-width: 0px;
      max-width: none;
      aspect-ratio: 1/1;
      border-radius: 50%;
      font-size: calc(var(--font-size)*1.5);
      padding: 30px;
      margin: var(--margin-sticker-plus-egal);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
    }
 




/* ---------------------------
      STICKERS FLEXBOX
 ---------------------------*/

.sticker-flex{
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: var(--flex-direction-sticker-flex);
    justify-content: space-evenly;
    align-items: var(--align-items-sticker-flex);
    padding: 2%;
    position: relative;
    overflow: hidden;
    z-index: 9;
}

.section-cta-sticker-grid{
  max-width: 100%;
  display: flex; 
  align-items: center;
  justify-content: space-evenly;
  margin-top: 0%;
}


.logo{
  margin-left: calc(var(--margin-inline) + var(--decal-manuel)); place-self: start; margin-bottom: var(--margin-block-bleu);
}


/* ---------------------
      STICKERS WALL
 ---------------------*/

    #sticker-wall {
      position: relative;
      width: 100%;
      max-width: 100vw;
      height: calc(var(--vh-static) * 200);
      background: transparent;
      overflow-y: visible;
      overflow-x: clip;
      cursor: pointer;
      z-index: 5;
    }

    .sticker {
      position: absolute;
      pointer-events: none;
      transform-origin: center center;
      will-change: transform, opacity;
 
      filter: var(--drop-shadow)
    }
 
    .sticker img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
        border-radius: calc(var(--radius)/2);
        padding: 0px;
        background-color: var(--color2);
        border: solid var(--border-sticker) var(--color2bis);
        box-shadow: 0 0 0 var(--border-sticker) var(--color4);
    }
 
    /* Animation pop au collage */
    @keyframes pop-in {
      0%   { transform: rotate(var(--r)) scale(0.5); opacity: 0; }
      60%  { transform: rotate(var(--r)) scale(1.02); opacity: 1; }
      100% { transform: rotate(var(--r)) scale(1); opacity: 1; }
    }
 
    .sticker.animate {
      animation: pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }


#custom-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 30px;
  height: 30px;
  background-color: var(--color5);
  border-radius: 50%;
  border: 2px solid var(--color5); /* adapte à ta couleur de texte */
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.2s, transform 0.15s;
}

/* Pulse en idle */
@keyframes cursor-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.7; }
  50%       { transform: translate(-50%, -50%) scale(1.35); opacity: 0.5; }
}

#custom-cursor.idle {
  animation: cursor-pulse 1.6s ease-in-out infinite;
}

/* Compression au clic */
#custom-cursor.clicking {
  animation: none;
  transform: translate(-50%, -50%) scale(0.55);
  opacity: 0.9;
  transition: transform 0.08s ease-out, opacity 0.08s;
}

#hint {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      font-size: calc(var(--font-size)/1.5);
      color: var(--color4);
      transition: opacity 0.4s;
      z-index: 10;

    }
 
    #hint.hidden { opacity: 0; }


@media (max-width: 710px) {
  #sticker-wall {
    height: var(--height-viewport-static); /* réduit la hauteur */
    cursor: pointer; /* curseur natif sur mobile */
    overflow-y: visible;
    overflow-x: clip;
    max-width: 100vw;
    isolation: isolate;
  }

  #custom-cursor {
    display: none; /* retire le cursor custom */
  }
}



          /* -------------------------------
                  STICKERS CARROUSSEL
          -------------------------------*/


/* ---------------------
      STICKERS AVIS
 ---------------------*/

.pastille-sticker-filtre-avis{
  width: auto;
  height: auto;

  border-radius: calc(var(--radius)/1);
  padding: 10px;
  background-color: var(--color2);
  border: solid calc(var(--border-sticker)/2) var(--color2bis);
  box-shadow: 0 0 0 calc(var(--border-sticker)/2) var(--color4);

  color: var(--color4);
  font-size: calc(var(--font-size)/2);
  font-family: var(--secondaryFont);

  cursor: pointer;
  transition: 0.2s;
  text-wrap: nowrap;

}

    .pastille-sticker-filtre-avis.inactive{
      color: var(--color2bis);
      cursor: default;
    }
    
    .pastille-sticker-filtre-avis.active{
      background-color: var(--color4);
      color: var(--color2);
      scale: 101%;
    }

    .pastille-sticker-filtre-avis:not(.inactive):hover{
      background-color: var(--color4);
      color: var(--color2);
      scale: 101%;
    }

.pastille-sticker-GD{
  height: 50px;
  width: 50px;
  border-radius: 50%;

  display: var(--display-pastille-GD);
  justify-content: center;
  align-items: center;

  padding: 10px;
  background-color: var(--color2);
  border: solid calc(var(--border-sticker)/2) var(--color2bis);
  box-shadow: 0 0 0 calc(var(--border-sticker)/2) var(--color4);

  color: var(--color4);
  font-size: calc(var(--font-size)/1.5);
  font-family: var(--principalFont);

  cursor: pointer;
  transition: 0.2s;
  text-wrap: nowrap;
    }

    .pastille-sticker-GD:hover{
      translate: 0 -2px;
    }
    

.sticker-bleu.avis{
  width: var(--width-slide-card-avis);
  height: var(--height-card);
  max-height: calc(var(--vh-static) * 70);
}

  .sticker-bleu.avis.hide {
      display: none;
  }




/* -----------------------
      STICKER RÈGLES
-------------------------*/

.section-container-sommaire-regles{
  top : calc(var(--height-header-menu) + var(--height-header-promo) + var(--gap-top-header-menu));
  display: flex;
  flex-direction: var(--flex-direction-section-container-sommaire-regles);
  gap: var(--gap-top-header-menu);
  margin-block: var(--gap-top-header-menu);
  position: fixed;
  width: 100%;
  height: fit-content;
  z-index: 22;
  align-items: center;
    justify-content: center;
}

.container-sommaire-regles{
    display: flex;
    width: fit-content;
    min-height: 22px; 
    align-items: center;
    justify-content: center;
    padding : 10px var(--gap-filtre) 10px var(--gap-filtre);
    background-color: var(--color1-opacity);
    gap: var(--gap-filtre);

    overflow: hidden;

    border-radius: var(--radius);
    backdrop-filter: blur(8px);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(255,255,255,0.15),
    0 10px 30px rgba(0,0,0,0.08);

    transition: 0.4s ease;
}

    .sommaire-regles{
        color: var(--color4);
        opacity: 60%;
        font-size: calc(var(--font-size)/2);
        text-wrap: nowrap;
        transition: 0.2s;
        padding-inline: 2px;
    }
        .sommaire-regles:hover{
            translate: 0px -3px;
            cursor: pointer;
            opacity: 100%;
        }

        .sommaire-regles.active{
            color: var(--color4);
            font-family: var(--secondaryFontBold);
            text-decoration: none;
            background-image: url("/assets/svg/underline.svg");
            background-repeat: repeat-x;
            background-position: 0 100%;
            background-size: auto 6px;
            padding-bottom: 2px;
            border-radius: 4px;
            opacity: 100%;
        }



.section-sticker-regles{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 70px;

    padding-top: calc(var(--height-header-menu) + var(--height-header-promo) + var(--top-1er-sticker-regles));
    transition: transform .15s ease;
    position: relative;
    z-index: 20;
}


.sticker-regles-container{
  left: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 30px;

  width: var(--width-sticker-regles-container);
  border-radius: var(--radius);

  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;

  scroll-snap-align: top;
  scroll-margin-top: calc(var(--height-header-menu) + var(--height-header-promo) + var(--top-1er-sticker-regles));
}

.titre-sticker-regles-container{
  display: grid;
}

.titre-sticker-regles-container img{
  width: calc(var(--font-size)*2);
  z-index: 5;
  margin: -30px 0 -30px -30px;
}

.sticker-bleu.regles{
  overflow: hidden;
  max-width: 90%;
  width: 100%;
  height: 100%;
  flex: 1;
  /*column-width: 30vw;
  column-gap: 30px;*/
}

.sticker-bleu.regles b{ font-family: var(--secondaryFontBold); }
.sticker-bleu.regles p{ margin-top: 0; margin-bottom: 30px; }
  .sticker-bleu.regles p a{color: var(--color4); font-weight: 600; text-decoration: underline; transition: 0.2s;}
    .sticker-bleu.regles p a:hover{ color: var(--color2); cursor: pointer;}

.sticker-bleu.regles img{
  width: auto;
  max-width: var(--max-width-sticker-bleu-regles-img);
  max-height: 600px;
  padding: 10px 0 20px 0;
  margin-left: 50%;
  transform: translateX(-50%);
}

.sticker-orange.regles{
  font-size: calc(var(--font-size)/1.5);
  max-width: 100%;
}

.sticker-bleu.regles::-webkit-scrollbar { width: 4px; }
.sticker-bleu.regles::-webkit-scrollbar-thumb { background: var(--color4); border-radius: 5px;}

.regles-face-to-face{
  margin: 0;
  width: 100%;
  display: grid;
  grid-template-columns: var(--grid-template-columns-regles-face-to-face);
  grid-template-rows: var(--grid-template-row-regles-face-to-face);
}

.face{display: flex; flex-direction: column; min-height: 100%;}


.section-language-toggle{
  width: 100vw;
  display: flex;
  justify-content: var(--justify-content-section-language-toggle);
  padding: 0 10px 10px 0;
  position: fixed;
  z-index: 9999;
  bottom: 0;
}

.language-toggle{
    display:flex;
    align-items:center;
    gap:0px;
    padding:8px;
    background-color: var(--color1-opacity);
    border-radius: var(--radius);
    backdrop-filter: blur(8px);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(255,255,255,0.15),
    0 10px 30px rgba(0,0,0,0.08);
}

.language-toggle button{
    border:none;
    background:var(--color4-opacity);
    padding:8px 14px;
    border-radius:var(--radius);
    cursor:pointer;
    font-family:var(--secondaryFontBold);
    font-size: calc(var(--font-size)/2);
    text-wrap: nowrap;
    transition:0.25s ease;
    scale: 80%;
}

.language-toggle button:hover{
    background-color: var(--color2bis);
    color:var(--color3);
}

.language-toggle button.active{
    background:var(--color2);
    color:var(--color4);
    scale: 100%;
}


.youtube-container {
  position: relative;
  width: 40%;
  max-width: 1000px;
  margin-top: 30px;
  aspect-ratio: 9 / 16;
  transform: translateX(-50%);
  margin-left: 50%;
}

.youtube-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px; /* optionnel */
}




/* ----------------------------------
      STICKERS CAROUSSEL INSIDE
 ---------------------------------*/


.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.35s ease;
}

.carousel-track img {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    object-fit: cover;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
      background: var(--color1-opacity);
      backdrop-filter: blur(8px);

      box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.6),
      inset 0 -1px 0 rgba(255,255,255,0.15),
      0 10px 30px rgba(0,0,0,0.08);
      border: none;

    color: var(--color4);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 2;
    transition: 0.2s;
}

.carousel-btn:hover {
    background: var(--color1);
    translate: 0 -2px;
}

.carousel-btn.prev { left: 12px; }
.carousel-btn.next { right: 12px; }

.carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 2;
}

.carousel-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color1-opacity);
      backdrop-filter: blur(8px);

      box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.6),
      inset 0 -1px 0 rgba(255,255,255,0.15),
      0 10px 30px rgba(0,0,0,0.08);
      border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.carousel-dots span.active {
    background: var(--color1);
      backdrop-filter: blur(8px);

      box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.6),
      inset 0 -1px 0 rgba(255,255,255,0.15),
      0 10px 30px rgba(0,0,0,0.08);
      border: none;
    transform: scale(1.25);
}