@import url(https://fonts.googleapis.com/css?family=Dancing+Script);

#toolset {
	display: none;
}

.cond-button{
	margin-top: 3rem;
    margin-bottom: 3rem;
}
 
body {
	background-color: #ff7900;
	color: #a6c71a;
    max-height: 100vh !important;
  
}

a:active {
	opacity: 0.7;
}

.page a.active, 
body.homepage [rel="home_page"] {
    border-bottom: 1px solid rgba(138, 27, 184, 1);
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 4.5rem;
    list-style-type: decimal-leading-zero;
}

ol > li {
    padding-left: 0.75rem;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(0, 0, 0, 0.20);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: 1.4rem;
    vertical-align: bottom;
}

.gallery_image_caption {
    margin-top: 0.5em;
    margin-bottom: 1rem;
    font-size: 1.1rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: Diatype, Icons;
	font-style: normal;
	line-height: 1.3;
    text-align: center;
}

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 0.5rem;
	color: rgba(0, 0, 0, 1);
	font-family: Messapia, Icons;
	line-height: 1;
	font-style: normal;
	font-weight: 1000;
    
}

[data-predefined-style="true"] bodycopy a {
	color: rgba(255, 255, 255, 0.32);
    text-decoration: blink;
}

[data-predefined-style="true"] bodycopy a:hover {

}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: "Diatype Variable", Icons;
	font-style: normal;
	font-weight: 500;
	padding: 0;
	margin: 0;
	font-size: 2.7rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] h1 a {
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"]  h2 {
	font-family: Karla, Icons;
	padding: 0;
	margin: 0;
	color: rgba(4, 10, 220, 1);
	font-size: 2.1rem;
	line-height: 1.3;
	letter-spacing: normal;
	font-style: normal;
	font-weight: 2000;
}

[data-predefined-style="true"] h2 a {
	color: rgba(0, 0, 0, 0.75);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.5rem;
	line-height: 1.3;
	font-family: "Diatype Mono Variable", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0.04em;
	font-variation-settings: 'slnt' 0, 'MONO' 1;
}

[data-predefined-style="true"] small a {
	color: rgba(0, 0, 0, 0.5);
}

[data-predefined-style="true"] small a:hover {
    
}


/**
 * Breakpoints
 */

[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: auto/*!content_center*/;
	margin-right: auto/*!content_center*/;
	text-align: center /*!text_center*/;

}

[data-css-preset] body {
	background-color: rgba(137, 24, 193, 0.27) /*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 44%/*!content_center*/;
}

[data-css-preset] .content_padding {
	padding-top: 6.7rem /*!main_margin*/;
	padding-bottom: 9rem /*!main_margin*/;
	padding-left: 6.7rem /*!main_margin*/;
	padding-right: 6.7rem /*!main_margin*/;
}

[data-css-preset] .backdrop {
	width: 100% /*!background_cover*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: rgba(0, 0, 0, 0)/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 67%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 1.6rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -3.2rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.325rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -0.65rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 0px solid rgba(231, 31, 31, 0.82);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.3rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.7);
	font-family: Diatype, Icons;
	font-style: normal;
	line-height: 1.3;
    letter-spacing: 0.04em;
    text-align: center;
}

.thumbnails .tags {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.5);
	font-family: "Diatype Mono", Icons;
	font-style: normal;
	line-height: 1.5;
    text-align: center;
    padding: 0;
    font-style: normal;
}

.thumbnails .tags a {
	border-bottom: 0 solid rgba(230, 23, 23, 1);
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: -1rem;
}

/**
 * Site Menu Button
 */

[data-css-preset] #site_menu_button {
	color: rgba(0, 0, 0, 0.75);
	line-height: 1;
	font-size: 28px /*!site_menu_button*/;
	padding: 6px;
	line-height: 1;
	background: rgba(33, 32, 46, 0);
	position: fixed;
	top: 1.3rem /*!site_menu_button*/;
	right: 1.1rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
	font-size: 28px;
}

#site_menu_button.custom_icon {
	width: 40px;
	height: auto;
}

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: Diatype, Icons;
	background: rgba(20, 20, 20, 0.95);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: center;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/**
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 24px;
    font-style: normal;
	font-weight: 400;
    line-height: 1.;
    position: fixed;
	padding: 6px;
	right: 1rem /*!shop_button*/;
	top: 0 /*!shop_button*/;
}

#shop_button.text {
	font-family: Diatype, Icons;
	font-size: 1.3rem;
    padding: 0;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.75);
	font-style: normal;
    line-height: 1.3;
    letter-spacing: 0.04rem;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 36px;
}

/**
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: Diatype, Icons;
	font-style: normal;
	font-weight: 400;
	margin-bottom: 1rem;
	font-size: 1.2rem;
	line-height: 1.1;
	color: rgba(0, 0, 0, 1);
}

.shop_product .dropdown {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-size: 1.2rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background:  white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 2.5rem .8rem 1rem;
	font-style: normal;
	font-weight: 400;
    color:  #000;
}
/** BOUTON BOUTON BOUTON BOUTON */
.shop_product .button {
	font-family: Karla, Icons;
	font-size: 1.5rem;
    background: transparent;
    color: rgba(255, 255, 255, 1);
    flex: 0 0 50%;
    text-align: center;
    display: grid;
	line-height: initial;
    padding: .8rem initial;
	font-style: normal;
	font-weight: 3000;
    border: 0;
}

/**
 * Image Zoom
 */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(255, 255, 255, 1) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
	font-family: Diatype, Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.1rem;
	font-style: normal;
	font-weight: 400;
    line-height: 1.3;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    color: white;
}

/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 0px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 2px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 0px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 2px;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
   stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
  
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}

/**
 * Audio Player
 */

.audio-player {
    max-width: 26rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: transparent;
    font-size: 1.2rem;
    line-height: 1.3;
	font-family: Diatype, Icons;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}

.condition{
	        overflow: scroll !important;
    height: 100vh;
    padding-bottom: 20px;
    padding-top: 40px;
}

  .lottery{
	display: flex;
    align-items: center;
    justify-content: center;
    height: 45vh;
    margin: 0;
    margin-left:20%;
    margin-right:20%;
    
}


.grid {
    display: grid;
            grid-template-columns: repeat(10, 1fr);
    		grid-template-rows: repeat(10, 1fr);
            gap: 1px;
            min-height: 450px;
    		min-width: 450px;
    		/*animation: resize 9000ms ease infinite both alternate;*/
    		

        }

.number {
	 --color2: 14;
	 --color2: 96;
	 --delay: 14ms;
	 background-color: #330f84;
    /*animation: wave 5s both infinite,colorChange 7000ms ease var(--delay) infinite both;*/
    /*background-color: #ffcece !important;
     /*animation: fadeIn 1s both;*/
     
    
}

 .fadeIn {
            animation: wave 5s both infinite ,colorChange 7000ms ease var(--delay) infinite both;
        }
        

@keyframes fadeIn {
            0% { transform: scale(1); opacity: 1;}
            50% { transform: scale(1.7);opacity: 0; }
    		100% { transform: scale(1); opacity: 0;}
        }

 @keyframes repeatAnimation {
            0%, 99.99% { opacity: 1; }
            100% { opacity: 1; }
        }


/* Keyframes for the wave animation */
/* Keyframes for the wave animation */
@keyframes wave {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        
    }
    25%, 50% {
        transform: scale(1);
        opacity: 0.8;
                
    }
}
.number {
    /*animation-delay: calc(var(--col) * 0.1s);*/
}

.number:nth-child(1) { --row: 0; --col: 0; }
.number:nth-child(2) { --row: 0; --col: 1; }
.number:nth-child(3) { --row: 0; --col: 2; }
.number:nth-child(4) { --row: 0; --col: 3; }
.number:nth-child(5) { --row: 0; --col: 4; }
.number:nth-child(6) { --row: 0; --col: 5; }
.number:nth-child(7) { --row: 0; --col: 6; }
.number:nth-child(8) { --row: 0; --col: 7; }
.number:nth-child(9) { --row: 0; --col: 8; }
.number:nth-child(10) { --row: 0; --col: 9; }
.number:nth-child(11) { --row: 1; --col: 0; }
.number:nth-child(12) { --row: 1; --col: 1; }
.number:nth-child(13) { --row: 1; --col: 2; }
.number:nth-child(14) { --row: 1; --col: 3; }
.number:nth-child(15) { --row: 1; --col: 4; }
.number:nth-child(16) { --row: 1; --col: 5; }
.number:nth-child(17) { --row: 1; --col: 6; }
.number:nth-child(18) { --row: 1; --col: 7; }
.number:nth-child(19) { --row: 1; --col: 8; }
.number:nth-child(20) { --row: 1; --col: 9; }
.number:nth-child(21) { --row: 2; --col: 0; }
.number:nth-child(22) { --row: 2; --col: 1; }
.number:nth-child(23) { --row: 2; --col: 2; }
.number:nth-child(24) { --row: 2; --col: 3; }
.number:nth-child(25) { --row: 2; --col: 4; }
.number:nth-child(26) { --row: 2; --col: 5; }
.number:nth-child(27) { --row: 2; --col: 6; }
.number:nth-child(28) { --row: 2; --col: 7; }
.number:nth-child(29) { --row: 2; --col: 8; }
.number:nth-child(30) { --row: 2; --col: 9; }
.number:nth-child(31) { --row: 3; --col: 0; }
.number:nth-child(32) { --row: 3; --col: 1; }
.number:nth-child(33) { --row: 3; --col: 2; }
.number:nth-child(34) { --row: 3; --col: 3; }
.number:nth-child(35) { --row: 3; --col: 4; }
.number:nth-child(36) { --row: 3; --col: 5; }
.number:nth-child(37) { --row: 3; --col: 6; }
.number:nth-child(38) { --row: 3; --col: 7; }
.number:nth-child(39) { --row: 3; --col: 8; }
.number:nth-child(40) { --row: 3; --col: 9; }
.number:nth-child(41) { --row: 4; --col: 0; }
.number:nth-child(42) { --row: 4; --col: 1; }
.number:nth-child(43) { --row: 4; --col: 2; }
.number:nth-child(44) { --row: 4; --col: 3; }
.number:nth-child(45) { --row: 4; --col: 4; }
.number:nth-child(46) { --row: 4; --col: 5; }
.number:nth-child(47) { --row: 4; --col: 6; }
.number:nth-child(48) { --row: 4; --col: 7; }
.number:nth-child(49) { --row: 4; --col: 8; }
.number:nth-child(50) { --row: 4; --col: 9; }
.number:nth-child(51) { --row: 5; --col: 0; }
.number:nth-child(52) { --row: 5; --col: 1; }
.number:nth-child(53) { --row: 5; --col: 2; }
.number:nth-child(54) { --row: 5; --col: 3; }
.number:nth-child(55) { --row: 5; --col: 4; }
.number:nth-child(56) { --row: 5; --col: 5; }
.number:nth-child(57) { --row: 5; --col: 6; }
.number:nth-child(58) { --row: 5; --col: 7; }
.number:nth-child(59) { --row: 5; --col: 8; }
.number:nth-child(60) { --row: 5; --col: 9; }
.number:nth-child(61) { --row: 6; --col: 0; }
.number:nth-child(62) { --row: 6; --col: 1; }
.number:nth-child(63) { --row: 6; --col: 2; }
.number:nth-child(64) { --row: 6; --col: 3; }
.number:nth-child(65) { --row: 6; --col: 4; }
.number:nth-child(66) { --row: 6; --col: 5; }
.number:nth-child(67) { --row: 6; --col: 6; }
.number:nth-child(68) { --row: 6; --col: 7; }
.number:nth-child(69) { --row: 6; --col: 8; }
.number:nth-child(70) { --row: 6; --col: 9; }
.number:nth-child(71) { --row: 7; --col: 0; }
.number:nth-child(72) { --row: 7; --col: 1; }
.number:nth-child(73) { --row: 7; --col: 2; }
.number:nth-child(74) { --row: 7; --col: 3; }
.number:nth-child(75) { --row: 7; --col: 4; }
.number:nth-child(76) { --row: 7; --col: 5; }
.number:nth-child(77) { --row: 7; --col: 6; }
.number:nth-child(78) { --row: 7; --col: 7; }
.number:nth-child(79) { --row: 7; --col: 8; }
.number:nth-child(80) { --row: 7; --col: 9; }
.number:nth-child(81) { --row: 8; --col: 0; }
.number:nth-child(82) { --row: 8; --col: 1; }
.number:nth-child(83) { --row: 8; --col: 2; }
.number:nth-child(84) { --row: 8; --col: 3; }
.number:nth-child(85) { --row: 8; --col: 4; }
.number:nth-child(86) { --row: 8; --col: 5; }
.number:nth-child(87) { --row: 8; --col: 6; }
.number:nth-child(88) { --row: 8; --col: 7; }
.number:nth-child(89) { --row: 8; --col: 8; }
.number:nth-child(90) { --row: 8; --col: 9; }
.number:nth-child(91) { --row: 9; --col: 0; }
.number:nth-child(92) { --row: 9; --col: 1; }
.number:nth-child(93) { --row: 9; --col: 2; }
.number:nth-child(94) { --row: 9; --col: 3; }
.number:nth-child(95) { --row: 9; --col: 4; }
.number:nth-child(96) { --row: 9; --col: 5; }
.number:nth-child(97) { --row: 9; --col: 6; }
.number:nth-child(98) { --row: 9; --col: 7; }
.number:nth-child(99) { --row: 9; --col: 8; }
.number:nth-child(100) { --row: 9; --col: 9; }


@keyframes colorChange {
	 99% {
		 color: #33fffc;
	}
	 100% {
		 background-color: #00c7ed;
	}
	 50% {
		 background-color: #fff;
	}
	 20% {
		 background-color: #aefff5;
	}
	 8% {
		 background-color: #00cbff;
	}
}

@keyframes resize {
    0% {
        grid-template-columns: 2fr 4fr 1fr 2fr 3fr 5fr 1fr 2fr 3fr 2fr;
        grid-template-rows: 4fr 2fr 2fr 3fr 4fr 1fr 5fr 3fr 2fr 2fr;
    }

    10% {
        grid-template-columns: 2fr 4fr 1fr 2fr 3fr 5fr 1fr 2fr 3fr 2fr;
        grid-template-rows: 4fr 2fr 2fr 3fr 4fr 1fr 5fr 3fr 2fr 2fr;
    }

    20% {
        grid-template-columns: 3fr 2fr 3fr 1fr 4fr 4fr 2fr 3fr 2fr 2fr;
        grid-template-rows: 2fr 4fr 3fr 2fr 1fr 5fr 2fr 3fr 3fr 5fr;
    }

    1% {
        grid-template-columns: 1fr 5fr 2fr 2fr 3fr 3fr 2fr 2fr 3fr 3fr;
        grid-template-rows: 2fr 2fr 3fr 1fr 4fr 4fr 2fr 2fr 3fr 3fr;
    }

    1% {
        grid-template-columns: 3fr 3fr 3fr 2fr 1fr 5fr 2fr 2fr 2fr 3fr;
        grid-template-rows: 2fr 3fr 2fr 4fr 2fr 2fr 1fr 5fr 3fr 3fr;
    }

    1% {
        grid-template-columns: 2fr 2fr 3fr 2fr 2fr 4fr 1fr 3fr 3fr 4fr;
        grid-template-rows: 3fr 4fr 2fr 3fr 2fr 2fr 2fr 1fr 4fr 5fr;
    }

    10% {
        grid-template-columns: 3fr 2fr 3fr 2fr 3fr 3fr 2fr 1fr 3fr 4fr;
        grid-template-rows: 2fr 3fr 2fr 4fr 2fr 2fr 3fr 3fr 1fr 5fr;
    }

    70% {
        grid-template-columns: 2fr 3fr 2fr 2fr 4fr 3fr 2fr 2fr 3fr 3fr;
        grid-template-rows: 3fr 2fr 2fr 4fr 2fr 3fr 2fr 2fr 3fr 3fr;
    }

    80% {
        grid-template-columns: 3fr 2fr 3fr 2fr 4fr 3fr 1fr 3fr 3fr 2fr;
        grid-template-rows: 2fr 4fr 2fr 3fr 2fr 3fr 3fr 2fr 2fr 3fr;
    }

    90% {
        grid-template-columns: 2fr 3fr 3fr 2fr 3fr 2fr 2fr 4fr 2fr 2fr;
        grid-template-rows: 3fr 2fr 4fr 2fr 3fr 2fr 2fr 3fr 3fr 2fr;
    }

    1% {
        grid-template-columns: 2fr 4fr 1fr 2fr 3fr 5fr 1fr 2fr 3fr 2fr;
        grid-template-rows: 4fr 2fr 2fr 3fr 4fr 1fr 5fr 3fr 2fr 2fr;
    }
}







@keyframes scaleAnimation {
    0% { transform: scale(1); }
    1% { transform: scale(100); }
    100% { transform: scale(300); }
}

/*@keyframes scaleAnimationLast {
    0% { transform: scale(1); }
    100% { transform: scale(2.5); }
    
}*/

@keyframes scaleAnimation {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(1);
      }
    }
/*résultat tirage*/
.scaleLast{
    animation: scaleAnimation 1s ease-in-out infinite alternate;
	background-color: rgba(253, 37, 236, 1)  !important;
    box-shadow: 0 0 40px 30px  rgba(255, 0, 0, 1);
    z-index: 9800;
}
.animation-scale {
  animation-name: scaleAnimation;
  animation-duration: 10s; /* Durée de l'animation */
  animation-fill-mode: backwards; /* L'élément conserve le style final de l'animation */
  animation-delay: -2s;
  box-shadow: 0 0 30px 30px var(--box-shadow-color, rgba(255, 137, 246, 1));
}

@keyframes scaleAnimation {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px 5px var(--box-shadow-color, rgba(201, 13, 13, 1));
  }
  50% {
    transform: scale(1.5);
    box-shadow: 0 0 20px 10px var(--box-shadow-color, rgba(137, 154, 255, 1));
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 30px 15px var(--box-shadow-color, rgba(139, 255, 137, 1));
  }
}


.grid:hover {
    animation-play-state: running; /* Mettre en pause l'animation sur hover */
}



/*** TYPO CHIFFRES CASES ORDI*/
        .number, .number_texte {
           
            border: 0.001px ridge transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 6em;
            font-weight: bold;
            cursor: pointer;
          
            background-color: transparent;
        }

.number:hover {
            transform: scale(2);
    		z-index: 100000;
    		cursor: pointer;
    		
    
        }

@-webkit-keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}



/* Style for mobile devices */
            @media (max-width: 951px) {
               
body{
	overflow: hidden;
}
                .shop_product .button{
	font-size: initial !important;
}
                .lottery{
				height: 60vh;
                    margin-left:20%;
    margin-right:20%;
}
                .grid {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
    		grid-template-rows: repeat(10, 1fr);
            gap: 0px;
            min-height: 300px;
    		min-width: 300px;
            max-height: 300px;
                }
/* TYPO CHIFFRES CASES MOBILE */
                .number {
                    
                    font-size: 4em;
                }
/* DEFILEMENT mobile SIZE */
                .scroll-left h2 {
    font-size: 250em !important;
        
               
                    }
                shop-product {
	font-size: 0.8rem;
	max-width: 22rem;
	font-family: 'Arial Black', Arial, sans-serif, Arial #3107cb;;
	font-style: normal;
	font-weight: 900;
	letter-spacing: normal;
	
}
                .animation-text > p {
    color: #cc5e3f;
    display: none;
    font-family: 'Dancing Script';
    font-size: 1.5em;
    font-weight: 600;
    width: 50ch;
    overflow: hidden;
    white-space: nowrap;
    
}

               .cg{
	text-align: center;
    padding-right: 0px;
    
}
.cr{
	text-align: center !important;
}
                .custom-footer-grid{
	text-align: center !important;
                    padding-right: 0;
                  
}
            }

.custom-footer{
  	position: fixed;
      overflow: hidden;
        white-space: nowrap;


 
  
    
}
 .cg{
	text-align: center !important;
    padding-right: 15px;
    
}
.cr{
	text-align: center !important;
}

.animation-text{
position: fixed;
  background: transparent;
  top: 1px;

 
}

.animation-text > p {
    color: #e5ec12;
    display: block;
    font-family: Planet, Icons;
    font-size:1em;
    font-weight: 500;
    width: 100ch;
    overflow: hidden;
    white-space: nowrap;
    animation: type 10s steps(90) ;
    animation-fill-mode: forwards; /* Retains styles of the last keyframe */
	font-style: normal;
}

@keyframes type {
    0% {
        width: 0;
    }
    100% {
        width: 50ch;
        display: none;
    }
    
}

.scroll-left {
 
    z-index: -99;
position: absolute;
}
.scroll-left h2 {

width: 100%;
    white-space: nowrap;
    font-size: 300em;
    word-wrap : normal !important;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%); 
transform:translateX(100%);
/* Apply animation to this element */ 
-moz-animation: scroll-left 0s linear infinite;
-webkit-animation: scroll-left 9s linear infinite;
animation: scroll-left 0s initial infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0% { 
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%); 
}
100% { 
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%); 
}
}
[data-id="35717071"]{
	z-index: 9800;
}

[data-id="35717088"]{
	position: fixed !important;
    bottom: 0;
    z-index: 9800;
}
[data-id="35717071"]{
	position: relative !important;
    z-index: 9800;
}

[data-id="35717075"]{
	position: relative !important;
    top: 16px;
    z-index: 9800;
}
/* Animation */
.number {
    width: 20px;
    height: 20px;
    line-height: 2px;
    text-align: center;
    font-size: 8px;
    font-weight: bold;
    color: #ecd90e;
    border-radius: 50%;
    position: absolute;
    transform-origin: center;
    background-color: #008696;
    animation: moveSpiral 5s  infinite , gridItemColorChange 60s infinite;
    transition: background-color 1s ease;
   
}

@keyframes moveSpiral {
    0% {
        transform: rotate(var(--angle)) translate(var(--distance)) rotate(calc(-1 * var(--angle)));
    }
    100% {
        transform: rotate(calc(var(--angle) + 360deg)) translate(var(--distance)) rotate(calc(-1 * (var(--angle) + 360deg)));
    }
}

:root {
    --base-distance: 17px; /* Distance de base entre les cases */
    --angle-step: 44deg; /* Angle entre les branches */
}
/* Première branche */
.number:nth-child(1) { --distance: calc(var(--base-distance) * 3); --angle: calc(0 * var(--angle-step)); animation-delay: 0s; }
.number:nth-child(2) { --distance: calc(var(--base-distance) * 4); --angle: calc(0 * var(--angle-step)); animation-delay: 0.1s; }
.number:nth-child(3) { --distance: calc(var(--base-distance) * 5); --angle: calc(0 * var(--angle-step)); animation-delay: 0.2s; }
.number:nth-child(4) { --distance: calc(var(--base-distance) * 6); --angle: calc(0 * var(--angle-step)); animation-delay: 0.3s; }
.number:nth-child(5) { --distance: calc(var(--base-distance) * 7); --angle: calc(0 * var(--angle-step)); animation-delay: 0.4s; }
.number:nth-child(6) { --distance: calc(var(--base-distance) * 8); --angle: calc(0 * var(--angle-step)); animation-delay: 0.5s; }
.number:nth-child(7) { --distance: calc(var(--base-distance) * 9); --angle: calc(0 * var(--angle-step)); animation-delay: 0.6s; }
.number:nth-child(8) { --distance: calc(var(--base-distance) * 10); --angle: calc(0 * var(--angle-step)); animation-delay: 0.7s; }
.number:nth-child(9) { --distance: calc(var(--base-distance) * 11); --angle: calc(0 * var(--angle-step)); animation-delay: 0.8s; }
.number:nth-child(10) { --distance: calc(var(--base-distance) * 12); --angle: calc(0 * var(--angle-step)); animation-delay: 0.9s; }

/* Deuxième branche */
.number:nth-child(11) { --distance: calc(var(--base-distance) * 3); --angle: calc(1 * var(--angle-step)); animation-delay: 1s; }
.number:nth-child(12) { --distance: calc(var(--base-distance) * 4); --angle: calc(1 * var(--angle-step)); animation-delay: 1.1s; }
.number:nth-child(13) { --distance: calc(var(--base-distance) * 5); --angle: calc(1 * var(--angle-step)); animation-delay: 1.2s; }
.number:nth-child(14) { --distance: calc(var(--base-distance) * 6); --angle: calc(1 * var(--angle-step)); animation-delay: 1.3s; }
.number:nth-child(15) { --distance: calc(var(--base-distance) * 7); --angle: calc(1 * var(--angle-step)); animation-delay: 1.4s; }
.number:nth-child(16) { --distance: calc(var(--base-distance) * 8); --angle: calc(1 * var(--angle-step)); animation-delay: 1.5s; }
.number:nth-child(17) { --distance: calc(var(--base-distance) * 9); --angle: calc(1 * var(--angle-step)); animation-delay: 1.6s; }
.number:nth-child(18) { --distance: calc(var(--base-distance) * 10); --angle: calc(1 * var(--angle-step)); animation-delay: 1.7s; }
.number:nth-child(19) { --distance: calc(var(--base-distance) * 11); --angle: calc(1 * var(--angle-step)); animation-delay: 1.8s; }
.number:nth-child(20) { --distance: calc(var(--base-distance) * 12); --angle: calc(1 * var(--angle-step)); animation-delay: 1.9s; }
/* Troisième branche */
.number:nth-child(21) { --distance: calc(var(--base-distance) * 3); --angle: calc(2 * var(--angle-step)); animation-delay: 2s; }
.number:nth-child(22) { --distance: calc(var(--base-distance) * 4); --angle: calc(2 * var(--angle-step)); animation-delay: 2.1s; }
.number:nth-child(23) { --distance: calc(var(--base-distance) * 5); --angle: calc(2 * var(--angle-step)); animation-delay: 2.2s; }
.number:nth-child(24) { --distance: calc(var(--base-distance) * 6); --angle: calc(2 * var(--angle-step)); animation-delay: 2.3s; }
.number:nth-child(25) { --distance: calc(var(--base-distance) * 7); --angle: calc(2 * var(--angle-step)); animation-delay: 2.4s; }
.number:nth-child(26) { --distance: calc(var(--base-distance) * 8); --angle: calc(2 * var(--angle-step)); animation-delay: 2.5s; }
.number:nth-child(27) { --distance: calc(var(--base-distance) * 9); --angle: calc(2 * var(--angle-step)); animation-delay: 2.6s; }
.number:nth-child(28) { --distance: calc(var(--base-distance) * 10); --angle: calc(2 * var(--angle-step)); animation-delay: 2.7s; }
.number:nth-child(29) { --distance: calc(var(--base-distance) * 11); --angle: calc(2 * var(--angle-step)); animation-delay: 2.8s; }
.number:nth-child(30) { --distance: calc(var(--base-distance) * 12); --angle: calc(2 * var(--angle-step)); animation-delay: 2.9s; }

/* Quatrième branche */
.number:nth-child(31) { --distance: calc(var(--base-distance) * 3); --angle: calc(3 * var(--angle-step)); animation-delay: 3s; }
.number:nth-child(32) { --distance: calc(var(--base-distance) * 4); --angle: calc(3 * var(--angle-step)); animation-delay: 3.1s; }
.number:nth-child(33) { --distance: calc(var(--base-distance) * 5); --angle: calc(3 * var(--angle-step)); animation-delay: 3.2s; }
.number:nth-child(34) { --distance: calc(var(--base-distance) * 6); --angle: calc(3 * var(--angle-step)); animation-delay: 3.3s; }
.number:nth-child(35) { --distance: calc(var(--base-distance) * 7); --angle: calc(3 * var(--angle-step)); animation-delay: 3.4s; }
.number:nth-child(36) { --distance: calc(var(--base-distance) * 8); --angle: calc(3 * var(--angle-step)); animation-delay: 3.5s; }
.number:nth-child(37) { --distance: calc(var(--base-distance) * 9); --angle: calc(3 * var(--angle-step)); animation-delay: 3.6s; }
.number:nth-child(38) { --distance: calc(var(--base-distance) * 10); --angle: calc(3 * var(--angle-step)); animation-delay: 3.7s; }
.number:nth-child(39) { --distance: calc(var(--base-distance) * 11); --angle: calc(3 * var(--angle-step)); animation-delay: 3.8s; }
.number:nth-child(40) { --distance: calc(var(--base-distance) * 12); --angle: calc(3 * var(--angle-step)); animation-delay: 3.9s; }

/* Cinquième branche */
.number:nth-child(41) { --distance: calc(var(--base-distance) * 3); --angle: calc(4 * var(--angle-step)); animation-delay: 4s; }
.number:nth-child(42) { --distance: calc(var(--base-distance) * 4); --angle: calc(4 * var(--angle-step)); animation-delay: 4.1s; }
.number:nth-child(43) { --distance: calc(var(--base-distance) * 5); --angle: calc(4 * var(--angle-step)); animation-delay: 4.2s; }
.number:nth-child(44) { --distance: calc(var(--base-distance) * 6); --angle: calc(4 * var(--angle-step)); animation-delay: 4.3s; }
.number:nth-child(45) { --distance: calc(var(--base-distance) * 7); --angle: calc(4 * var(--angle-step)); animation-delay: 4.4s; }
.number:nth-child(46) { --distance: calc(var(--base-distance) * 8); --angle: calc(4 * var(--angle-step)); animation-delay: 4.5s; }
.number:nth-child(47) { --distance: calc(var(--base-distance) * 9); --angle: calc(4 * var(--angle-step)); animation-delay: 4.6s; }
.number:nth-child(48) { --distance: calc(var(--base-distance) * 10); --angle: calc(4 * var(--angle-step)); animation-delay: 4.7s; }
.number:nth-child(49) { --distance: calc(var(--base-distance) * 11); --angle: calc(4 * var(--angle-step)); animation-delay: 4.8s; }
.number:nth-child(50) { --distance: calc(var(--base-distance) * 12); --angle: calc(4 * var(--angle-step)); animation-delay: 4.9s; }

/* Sixième branche */
.number:nth-child(51) { --distance: calc(var(--base-distance) * 3); --angle: calc(5 * var(--angle-step)); animation-delay: 5s; }
.number:nth-child(52) { --distance: calc(var(--base-distance) * 4); --angle: calc(5 * var(--angle-step)); animation-delay: 5.1s; }
.number:nth-child(53) { --distance: calc(var(--base-distance) * 5); --angle: calc(5 * var(--angle-step)); animation-delay: 5.2s; }
.number:nth-child(54) { --distance: calc(var(--base-distance) * 6); --angle: calc(5 * var(--angle-step)); animation-delay: 5.3s; }
.number:nth-child(55) { --distance: calc(var(--base-distance) * 7); --angle: calc(5 * var(--angle-step)); animation-delay: 5.4s; }
.number:nth-child(56) { --distance: calc(var(--base-distance) * 8); --angle: calc(5 * var(--angle-step)); animation-delay: 5.5s; }
.number:nth-child(57) { --distance: calc(var(--base-distance) * 9); --angle: calc(5 * var(--angle-step)); animation-delay: 5.6s; }
.number:nth-child(58) { --distance: calc(var(--base-distance) * 10); --angle: calc(5 * var(--angle-step)); animation-delay: 5.7s; }
.number:nth-child(59) { --distance: calc(var(--base-distance) * 11); --angle: calc(5 * var(--angle-step)); animation-delay: 5.8s; }
.number:nth-child(60) { --distance: calc(var(--base-distance) * 12); --angle: calc(5 * var(--angle-step)); animation-delay: 5.9s; }

/* Continuez de cette manière pour les autres branches */
/* Septième branche */
.number:nth-child(61) { --distance: calc(var(--base-distance) * 3); --angle: calc(6 * var(--angle-step)); animation-delay: 6s; }
.number:nth-child(62) { --distance: calc(var(--base-distance) * 4); --angle: calc(6 * var(--angle-step)); animation-delay: 6.1s; }
.number:nth-child(63) { --distance: calc(var(--base-distance) * 5); --angle: calc(6 * var(--angle-step)); animation-delay: 6.2s; }
.number:nth-child(64) { --distance: calc(var(--base-distance) * 6); --angle: calc(6 * var(--angle-step)); animation-delay: 6.3s; }
.number:nth-child(65) { --distance: calc(var(--base-distance) * 7); --angle: calc(6 * var(--angle-step)); animation-delay: 6.4s; }
.number:nth-child(66) { --distance: calc(var(--base-distance) * 8); --angle: calc(6 * var(--angle-step)); animation-delay: 6.5s; }
.number:nth-child(67) { --distance: calc(var(--base-distance) * 9); --angle: calc(6 * var(--angle-step)); animation-delay: 6.6s; }
.number:nth-child(68) { --distance: calc(var(--base-distance) * 10); --angle: calc(6 * var(--angle-step)); animation-delay: 6.7s; }
.number:nth-child(69) { --distance: calc(var(--base-distance) * 11); --angle: calc(6 * var(--angle-step)); animation-delay: 6.8s; }
.number:nth-child(70) { --distance: calc(var(--base-distance) * 12); --angle: calc(6 * var(--angle-step)); animation-delay: 6.9s; }

/* Huitième branche */
.number:nth-child(71) { --distance: calc(var(--base-distance) * 3); --angle: calc(7 * var(--angle-step)); animation-delay: 7s; }
.number:nth-child(72) { --distance: calc(var(--base-distance) * 4); --angle: calc(7 * var(--angle-step)); animation-delay: 7.1s; }
.number:nth-child(73) { --distance: calc(var(--base-distance) * 5); --angle: calc(7 * var(--angle-step)); animation-delay: 7.2s; }
.number:nth-child(74) { --distance: calc(var(--base-distance) * 6); --angle: calc(7 * var(--angle-step)); animation-delay: 7.3s; }
.number:nth-child(75) { --distance: calc(var(--base-distance) * 7); --angle: calc(7 * var(--angle-step)); animation-delay: 7.4s; }
.number:nth-child(76) { --distance: calc(var(--base-distance) * 8); --angle: calc(7 * var(--angle-step)); animation-delay: 7.5s; }
.number:nth-child(77) { --distance: calc(var(--base-distance) * 9); --angle: calc(7 * var(--angle-step)); animation-delay: 7.6s; }
.number:nth-child(78) { --distance: calc(var(--base-distance) * 10); --angle: calc(7 * var(--angle-step)); animation-delay: 7.7s; }
.number:nth-child(79) { --distance: calc(var(--base-distance) * 11); --angle: calc(7 * var(--angle-step)); animation-delay: 7.8s; }
.number:nth-child(80) { --distance: calc(var(--base-distance) * 12); --angle: calc(7 * var(--angle-step)); animation-delay: 7.9s; }

/* Neuvième branche */
.number:nth-child(81) { --distance: calc(var(--base-distance) * 3); --angle: calc(8 * var(--angle-step)); animation-delay: 8s; }
.number:nth-child(82) { --distance: calc(var(--base-distance) * 4); --angle: calc(8 * var(--angle-step)); animation-delay: 8.1s; }
.number:nth-child(83) { --distance: calc(var(--base-distance) * 5); --angle: calc(8 * var(--angle-step)); animation-delay: 8.2s; }
.number:nth-child(84) { --distance: calc(var(--base-distance) * 6); --angle: calc(8 * var(--angle-step)); animation-delay: 8.3s; }
.number:nth-child(85) { --distance: calc(var(--base-distance) * 7); --angle: calc(8 * var(--angle-step)); animation-delay: 8.4s; }
.number:nth-child(86) { --distance: calc(var(--base-distance) * 8); --angle: calc(8 * var(--angle-step)); animation-delay: 8.5s; }
.number:nth-child(87) { --distance: calc(var(--base-distance) * 9); --angle: calc(8 * var(--angle-step)); animation-delay: 8.6s; }
.number:nth-child(88) { --distance: calc(var(--base-distance) * 10); --angle: calc(8 * var(--angle-step)); animation-delay: 8.7s; }
.number:nth-child(89) { --distance: calc(var(--base-distance) * 11); --angle: calc(8 * var(--angle-step)); animation-delay: 8.8s; }
.number:nth-child(90) { --distance: calc(var(--base-distance) * 12); --angle: calc(8 * var(--angle-step)); animation-delay: 8.9s; }

/* Dixième branche */
.number:nth-child(91) { --distance: calc(var(--base-distance) * 3); --angle: calc(9 * var(--angle-step)); animation-delay: 9s; }
.number:nth-child(92) { --distance: calc(var(--base-distance) * 4); --angle: calc(9 * var(--angle-step)); animation-delay: 9.1s; }
.number:nth-child(93) { --distance: calc(var(--base-distance) * 5); --angle: calc(9 * var(--angle-step)); animation-delay: 9.2s; }
.number:nth-child(94) { --distance: calc(var(--base-distance) * 6); --angle: calc(9 * var(--angle-step)); animation-delay: 9.3s; }
.number:nth-child(95) { --distance: calc(var(--base-distance) * 7); --angle: calc(9 * var(--angle-step)); animation-delay: 9.4s; }
.number:nth-child(96) { --distance: calc(var(--base-distance) * 8); --angle: calc(9 * var(--angle-step)); animation-delay: 9.5s; }
.number:nth-child(97) { --distance: calc(var(--base-distance) * 9); --angle: calc(9 * var(--angle-step)); animation-delay: 9.6s; }
.number:nth-child(98) { --distance: calc(var(--base-distance) * 10); --angle: calc(9 * var(--angle-step)); animation-delay: 9.7s; }
.number:nth-child(99) { --distance: calc(var(--base-distance) * 11); --angle: calc(9 * var(--angle-step)); animation-delay: 9.8s; }
.number:nth-child(100) { --distance: calc(var(--base-distance) * 12); --angle: calc(9 * var(--angle-step)); animation-delay: 9.9s; }

#tirage {
    visibility: visible;
    background-color: rgba(232, 234, 8, 1) !important;
    color: transparent !important;
    border: none;
    padding: 30px 20px; /* Dimensions du bouton */
    border-radius: 50px; /* Rendre le bouton arrondi */
    cursor: pointer;
    box-shadow: 0 0px 10px transparent; /* Ajout d'une ombre */
    transition: all 0.3s ease-in-out;
    animation: colorPulse 5s infinite ease-in-out; /* Animation de changement de couleur */
    z-index: 0;
}

/* Effet au survol */
#tirage:hover {
    background-color: #8713eb;
    transform: translate(-50%, -50%) scale(1.2); /* Légère mise en valeur */
}
/* Position des boutons */
#nouktah-button {
    position: fixed;
    top: 10px; /* Coin supérieur gauche */
    left: 10px;
    z-index: 1000; /* S'assurer qu'il est au-dessus */
}

#contact-button {
    position: fixed;
    top: 10px; /* Coin supérieur droit */
    right: 10px;
    z-index: 1000;
}

#instagram-button {
    position: fixed;
    bottom: 10px; /* Coin inférieur gauche */
    left: 10px;
    z-index: 1000;
}

#conditions-button {
    position: fixed;
    bottom: 10px; /* Coin inférieur droit */
    right: 10px;
    z-index: 1000;
}
#tirage {
    margin-top:auto !important;
 position: fixed; /* Fixe l'élément par rapport à l'écran */
  top: 50%; /* Centre verticalement */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour centrer précisément */
  z-index: 0; /* Place au-dessus des autres éléments */
}
body {
    background: radial-gradient(circle, 
        transparent 0%, /* Couleur centrale */
        transparent 5%, /* Couleur intermédiaire */
        rgba(20, 16, 192, 0.5) 100% /* Couleur extérieure */
    );
}
.wave-text {
   position: fixed; /* Fixe l'élément par rapport à l'écran */
  top: 90%; /* Centre verticalement */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour centrer précisément */
    z-index: 1; /* Plus petit pour la mettre derrière */
    display: flex;
    flex-direction: initial; /* Orientation verticale */
    justify-content: center; /* Centre verticalement */
    align-items: center; /* Centre horizontalement */
    writing-mode: initial; /* Écriture verticale */
    text-orientation: mixed; /* Orientation du texte verticale */
    font-size: 1.5rem;
    font-family: 'Karla', sans-serif;
    color: rgba(236, 38, 38, 0.55); /* Couleur de base */
}
.karaoke-word {
    opacity: 1; /* Transparence initiale */
    animation: karaoke-animation 4s infinite;
    animation-delay: var(--delay); /* Applique un délai spécifique à chaque mot */
}

/* Animation pour illuminer chaque mot */
@keyframes karaoke-animation {
    0%, 10% {
        opacity: 0.5;
        color: rgba(255, 255, 255, 0.58); /* Couleur par défaut */
    }
    100% {
        opacity: 1;
        color: rgba(236, 225, 38, 0.81); /* Couleur active pendant l'illumination */
    }
}
.grid {
    position: fixed; /* Fixe l'élément par rapport à l'écran */
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Ajuste pour centrer précisément */
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 1px;
    min-height: 18px;
    min-width: 16px;
   }


/* Conteneur de l'effet */
.animated-bg {
position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
  animation: pulse 3s infinite;
  z-index: 0;
}
/* Animation pour les cercles */
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
/* Style commun pour tous les boutons */
#conditions-button,
#instagram-button,
#contact-button,
#nouktah-button {
    font-family: 'Karla', sans-serif; /* Changez par la typo souhaitée */
    font-size: 1.3rem; /* Taille de la police */
    font-weight: 700; /* Épaisseur */
    color: rgba(237, 188, 0, 0.55); /* Couleur du texte */
    text-transform: uppercase; /* Texte en majuscules */
    letter-spacing: 0.05em; /* Espacement entre les lettres */
    background: none; /* Si vous voulez enlever les arrière-plans */
    border: none; /* Pas de bordures */
    cursor: pointer; /* Changement du curseur au survol */
    transition: all 0.3s ease; /* Effet de transition pour les hover */
    text-decoration: none
}

/* Effet au survol (hover) */
#conditions-button:hover,
#instagram-button:hover,
#contact-button:hover,
#nouktah-button:hover{
    color: #fff; /* Couleur au survol */
    transform: scale(1); /* Agrandissement léger au survol */
}

/* Exclure spécifiquement les éléments de la spirale */
.number, .number * {
    mix-blend-mode: normal; /* Aucune modification de couleur */
}
.condition {
    background-color: rgba(239, 206, 254, 1); /* Remplacez par la couleur souhaitée */
    color: #333; /* Couleur du texte pour assurer un bon contraste */
    min-height: 100vh; /* S'assurer que le fond couvre toute la page */
    padding: 2rem; /* Ajouter de l'espace autour du contenu */
    box-sizing: border-box;
}
.condition {
    text-align: justify; /* Aligne le texte de manière justifiée */
    line-height: 1.5; /* Espace entre les lignes pour améliorer la lisibilité */
    margin-bottom: 1rem; /* Espacement entre les paragraphes */
    hyphens: auto; /* Active la césure pour éviter de grandes espaces */
}
.close-button {
    background-color: transparent; /* Couleur de fond */
    color: #000; /* Couleur du texte */
    border: none; /* Pas de bordure */
    font-size: 2rem; /* Taille de la police */
    border-radius: 50px; /* Coins arrondis */
    cursor: pointer; /* Curseur de pointeur */
    transition: background-color 0.1s ease;
}

.close-button:hover {
    background-color: #fff; /* Couleur au survol */
}
#tirage {
    position: fixed; /* Fixe l'élément par rapport à l'écran */
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Ajuste pour centrer précisément */
    background-color: rgba(255, 179, 0, 0.9); /* Couleur visible */
    color: white; /* Couleur du texte */
    border: none; /* Pas de bordure */
    border-radius: 50px; /* Bouton arrondi */
    cursor: pointer; /* Curseur au survol */
    box-shadow: 0 4px 10px rgba(245, 10, 10, 0.75); /* Ombre pour mise en évidence */
    z-index: 0; /* Place au-dessus de tout */
    transition: transform 0.3s ease-in-out; /* Animation au survol */
}
/* Style du logo avec effet d'éclair */
#logo {
    position: fixed;
    top: 49%; /* Ajustez la position en haut */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem; /* Taille du logo */
    color: #00ff3c;
    font-weight: 3000;
    font-family: "Arial Black", sans-serif;
    text-shadow: 0 0 20px #00b8ff, 0 0 40px #ffcc00, 0 0 80px #ff7900;
    animation: flashEffect 3s infinite, bounce 2s infinite;
    pointer-events: none; /* Ignore les interactions souris */
}
/* Animation d'éclair */
@keyframes flashEffect {
    0%, 100% {
        text-shadow: 0 0 20px #ffcc00, 0 0 40px #ffcc00, 0 0 80px #ff7900;
        color: #8e00ff;
    }
    50% {
        text-shadow: 0 0 30px #ffffff, 0 0 60px #ffcc00, 0 0 100px #ffffff;
        color: #ffffff;
    }
}
/* Changement de couleur de fond */
body {
    animation: backgroundColorChange 60s infinite;
    transition: background-color 50s ease;
}

@keyframes backgroundColorChange {
    0% {
        background-color: #946335;
    }
    25% {
        background-color: #4b1147;
    }
    50% {
        background-color: #471325;
    }
    75% {
        background-color: #360755;
    }
    100% {
        background-color: #946335;
    }
}

.number:hover {
    transform: scale(3); /* Centre et agrandit */
    z-index: 2147483647; /* Le plus grand z-index possible */
    animation-play-state: paused; /* Stoppe les animations */
}
.wave-text span {
    white-space: pre; /* Permet de conserver les espaces */
}
/* Keyframe pour effet sonore visuel */
@keyframes soundWave {
    0% {
        box-shadow: 0 0 0px rgba(255, 255, 255, 0.5);
        transform: scale(3);
        opacity: 1;
    }

    100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0);
        transform: scale(3);
        opacity: 0;
    }
}

.number:hover::after {
    position: absolute;
    top: -2rem; /* Ajuste la position */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem; /* Taille réduite pour une meilleure lisibilité */
    line-height: 1.2; /* Ajuste l'espacement vertical */
    max-width: 150px; /* Limite la largeur pour éviter que le texte déborde */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    color: rgba(255, 255, 255, 0.8); /* Couleur du texte */
    background: rgba(0, 0, 0, 0.7); /* Fond sombre pour le contraste */
    padding: 0.3rem 0.6rem; /* Ajuste l'espacement interne */
    border-radius: 5px; /* Coins arrondis */
    text-align: center;
    z-index: 10000;
    pointer-events: none; /* Évite les interactions avec ce texte */
}

/* Numéros disponibles */
.number.available {
    background-color: #ff7900; /* Vert pour les tickets disponibles */
}
.number.available:hover {
    background-color: #329a3e; /* Couleur plus claire au survol */
    transform: scale(1.2); /* Agrandissement au survol */
}
/* Style pour les numéros déjà pris */
.number.taken {
    background-color: #ff7900; /* Couleur pour indiquer qu'il est pris */
}
.number.taken:hover {
    background-color: #000; /* Optionnel, effet au survol */
}
/* Ajouter une animation pour les numéros récemment pris */
.number.taken.newly-taken {
    animation: flash 1s ease-in-out;
}
@keyframes flash {
    0%, 100% {
        background-color: #f44336;
    }
    50% {
        background-color: #ffcccb;
    }
}
.number.taken:hover::after {
    content: "🔒" attr(data-number);
    position: fixed;
    top: 0%;
    left: 0%;
    transform: translateX(-50%);
    font-size: 3rem;
    color: #f00;
    background: transparent;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    z-index: 2147483647;
}
/* Numéros disponibles */
.number.available:hover::after {
    content: "SELECT N°" attr(data-number); /* Affiche le numéro disponible */
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    color: #fff;
    background: rgba(70, 172, 89, 1);
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    z-index: 9990000;
}


.cond-button{
	margin-top: 3rem;
    margin-bottom: 3rem;
}
 
body {
	background-color: #ff7900;
	color: #a6c71a;
    max-height: 100vh !important;
  
}

a:active {
	opacity: 0.7;
}

.page a.active, 
body.homepage [rel="home_page"] {
    border-bottom: 1px solid rgba(138, 27, 184, 1);
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 4.5rem;
    list-style-type: decimal-leading-zero;
}

ol > li {
    padding-left: 0.75rem;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(0, 0, 0, 0.20);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: 1.4rem;
    vertical-align: bottom;
}

.gallery_image_caption {
    margin-top: 0.5em;
    margin-bottom: 1rem;
    font-size: 1.1rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: Diatype, Icons;
	font-style: normal;
	line-height: 1.3;
    text-align: center;
}

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 0.5rem;
	color: rgba(0, 0, 0, 1);
	font-family: Messapia, Icons;
	line-height: 1;
	font-style: normal;
	font-weight: 1000;
    
}

[data-predefined-style="true"] bodycopy a {
	color: rgba(255, 255, 255, 0.32);
    text-decoration: blink;
}

[data-predefined-style="true"] bodycopy a:hover {

}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: "Diatype Variable", Icons;
	font-style: normal;
	font-weight: 500;
	padding: 0;
	margin: 0;
	font-size: 2.7rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] h1 a {
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"]  h2 {
	font-family: Karla, Icons;
	padding: 0;
	margin: 0;
	color: rgba(4, 10, 220, 1);
	font-size: 2.1rem;
	line-height: 1.3;
	letter-spacing: normal;
	font-style: normal;
	font-weight: 2000;
}

[data-predefined-style="true"] h2 a {
	color: rgba(0, 0, 0, 0.75);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.5rem;
	line-height: 1.3;
	font-family: "Diatype Mono Variable", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0.04em;
	font-variation-settings: 'slnt' 0, 'MONO' 1;
}

[data-predefined-style="true"] small a {
	color: rgba(0, 0, 0, 0.5);
}

[data-predefined-style="true"] small a:hover {
    
}


/**
 * Breakpoints
 */

[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: auto/*!content_center*/;
	margin-right: auto/*!content_center*/;
	text-align: center /*!text_center*/;

}

[data-css-preset] body {
	background-color: rgba(137, 24, 193, 0.27) /*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 44%/*!content_center*/;
}

[data-css-preset] .content_padding {
	padding-top: 6.7rem /*!main_margin*/;
	padding-bottom: 9rem /*!main_margin*/;
	padding-left: 6.7rem /*!main_margin*/;
	padding-right: 6.7rem /*!main_margin*/;
}

[data-css-preset] .backdrop {
	width: 100% /*!background_cover*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: rgba(0, 0, 0, 0)/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 67%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 1.6rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -3.2rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.325rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -0.65rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 0px solid rgba(231, 31, 31, 0.82);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.3rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.7);
	font-family: Diatype, Icons;
	font-style: normal;
	line-height: 1.3;
    letter-spacing: 0.04em;
    text-align: center;
}

.thumbnails .tags {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.5);
	font-family: "Diatype Mono", Icons;
	font-style: normal;
	line-height: 1.5;
    text-align: center;
    padding: 0;
    font-style: normal;
}

.thumbnails .tags a {
	border-bottom: 0 solid rgba(230, 23, 23, 1);
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: -1rem;
}

/**
 * Site Menu Button
 */

[data-css-preset] #site_menu_button {
	color: rgba(0, 0, 0, 0.75);
	line-height: 1;
	font-size: 28px /*!site_menu_button*/;
	padding: 6px;
	line-height: 1;
	background: rgba(33, 32, 46, 0);
	position: fixed;
	top: 1.3rem /*!site_menu_button*/;
	right: 1.1rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
	font-size: 28px;
}

#site_menu_button.custom_icon {
	width: 40px;
	height: auto;
}

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: Diatype, Icons;
	background: rgba(20, 20, 20, 0.95);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: center;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/**
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 24px;
    font-style: normal;
	font-weight: 400;
    line-height: 1.;
    position: fixed;
	padding: 6px;
	right: 1rem /*!shop_button*/;
	top: 0 /*!shop_button*/;
}

#shop_button.text {
	font-family: Diatype, Icons;
	font-size: 1.3rem;
    padding: 0;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.75);
	font-style: normal;
    line-height: 1.3;
    letter-spacing: 0.04rem;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 36px;
}

/**
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: Diatype, Icons;
	font-style: normal;
	font-weight: 400;
	margin-bottom: 1rem;
	font-size: 1.2rem;
	line-height: 1.1;
	color: rgba(0, 0, 0, 1);
}

.shop_product .dropdown {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-size: 1.2rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background:  white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 2.5rem .8rem 1rem;
	font-style: normal;
	font-weight: 400;
    color:  #000;
}
/** BOUTON BOUTON BOUTON BOUTON */
.shop_product .button {
	font-family: Karla, Icons;
	font-size: 1.5rem;
    background: transparent;
    color: rgba(255, 255, 255, 1);
    flex: 0 0 50%;
    text-align: center;
    display: grid;
	line-height: initial;
    padding: .8rem initial;
	font-style: normal;
	font-weight: 3000;
    border: 0;
}

/**
 * Image Zoom
 */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(255, 255, 255, 1) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
	font-family: Diatype, Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.1rem;
	font-style: normal;
	font-weight: 400;
    line-height: 1.3;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    color: white;
}

/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 0px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 2px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 0px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 2px;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
   stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
  
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}

/**
 * Audio Player
 */

.audio-player {
    max-width: 26rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: transparent;
    font-size: 1.2rem;
    line-height: 1.3;
	font-family: Diatype, Icons;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}

.condition{
	        overflow: scroll !important;
    height: 100vh;
    padding-bottom: 20px;
    padding-top: 40px;
}

  .lottery{
	display: flex;
    align-items: center;
    justify-content: center;
    height: 45vh;
    margin: 0;
    margin-left:20%;
    margin-right:20%;
    
}


.grid {
    display: grid;
            grid-template-columns: repeat(10, 1fr);
    		grid-template-rows: repeat(10, 1fr);
            gap: 1px;
            min-height: 450px;
    		min-width: 450px;
    		/*animation: resize 9000ms ease infinite both alternate;*/
    		

        }

.number {
	 --color2: 14;
	 --color2: 96;
	 --delay: 14ms;
	 background-color: #330f84;
    /*animation: wave 5s both infinite,colorChange 7000ms ease var(--delay) infinite both;*/
    /*background-color: #ffcece !important;
     /*animation: fadeIn 1s both;*/
     
    
}

 .fadeIn {
            animation: wave 5s both infinite ,colorChange 7000ms ease var(--delay) infinite both;
        }
        

@keyframes fadeIn {
            0% { transform: scale(1); opacity: 1;}
            50% { transform: scale(1.7);opacity: 0; }
    		100% { transform: scale(1); opacity: 0;}
        }

 @keyframes repeatAnimation {
            0%, 99.99% { opacity: 1; }
            100% { opacity: 1; }
        }


/* Keyframes for the wave animation */
/* Keyframes for the wave animation */
@keyframes wave {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        
    }
    25%, 50% {
        transform: scale(1);
        opacity: 0.8;
                
    }
}
.number {
    /*animation-delay: calc(var(--col) * 0.1s);*/
}

.number:nth-child(1) { --row: 0; --col: 0; }
.number:nth-child(2) { --row: 0; --col: 1; }
.number:nth-child(3) { --row: 0; --col: 2; }
.number:nth-child(4) { --row: 0; --col: 3; }
.number:nth-child(5) { --row: 0; --col: 4; }
.number:nth-child(6) { --row: 0; --col: 5; }
.number:nth-child(7) { --row: 0; --col: 6; }
.number:nth-child(8) { --row: 0; --col: 7; }
.number:nth-child(9) { --row: 0; --col: 8; }
.number:nth-child(10) { --row: 0; --col: 9; }
.number:nth-child(11) { --row: 1; --col: 0; }
.number:nth-child(12) { --row: 1; --col: 1; }
.number:nth-child(13) { --row: 1; --col: 2; }
.number:nth-child(14) { --row: 1; --col: 3; }
.number:nth-child(15) { --row: 1; --col: 4; }
.number:nth-child(16) { --row: 1; --col: 5; }
.number:nth-child(17) { --row: 1; --col: 6; }
.number:nth-child(18) { --row: 1; --col: 7; }
.number:nth-child(19) { --row: 1; --col: 8; }
.number:nth-child(20) { --row: 1; --col: 9; }
.number:nth-child(21) { --row: 2; --col: 0; }
.number:nth-child(22) { --row: 2; --col: 1; }
.number:nth-child(23) { --row: 2; --col: 2; }
.number:nth-child(24) { --row: 2; --col: 3; }
.number:nth-child(25) { --row: 2; --col: 4; }
.number:nth-child(26) { --row: 2; --col: 5; }
.number:nth-child(27) { --row: 2; --col: 6; }
.number:nth-child(28) { --row: 2; --col: 7; }
.number:nth-child(29) { --row: 2; --col: 8; }
.number:nth-child(30) { --row: 2; --col: 9; }
.number:nth-child(31) { --row: 3; --col: 0; }
.number:nth-child(32) { --row: 3; --col: 1; }
.number:nth-child(33) { --row: 3; --col: 2; }
.number:nth-child(34) { --row: 3; --col: 3; }
.number:nth-child(35) { --row: 3; --col: 4; }
.number:nth-child(36) { --row: 3; --col: 5; }
.number:nth-child(37) { --row: 3; --col: 6; }
.number:nth-child(38) { --row: 3; --col: 7; }
.number:nth-child(39) { --row: 3; --col: 8; }
.number:nth-child(40) { --row: 3; --col: 9; }
.number:nth-child(41) { --row: 4; --col: 0; }
.number:nth-child(42) { --row: 4; --col: 1; }
.number:nth-child(43) { --row: 4; --col: 2; }
.number:nth-child(44) { --row: 4; --col: 3; }
.number:nth-child(45) { --row: 4; --col: 4; }
.number:nth-child(46) { --row: 4; --col: 5; }
.number:nth-child(47) { --row: 4; --col: 6; }
.number:nth-child(48) { --row: 4; --col: 7; }
.number:nth-child(49) { --row: 4; --col: 8; }
.number:nth-child(50) { --row: 4; --col: 9; }
.number:nth-child(51) { --row: 5; --col: 0; }
.number:nth-child(52) { --row: 5; --col: 1; }
.number:nth-child(53) { --row: 5; --col: 2; }
.number:nth-child(54) { --row: 5; --col: 3; }
.number:nth-child(55) { --row: 5; --col: 4; }
.number:nth-child(56) { --row: 5; --col: 5; }
.number:nth-child(57) { --row: 5; --col: 6; }
.number:nth-child(58) { --row: 5; --col: 7; }
.number:nth-child(59) { --row: 5; --col: 8; }
.number:nth-child(60) { --row: 5; --col: 9; }
.number:nth-child(61) { --row: 6; --col: 0; }
.number:nth-child(62) { --row: 6; --col: 1; }
.number:nth-child(63) { --row: 6; --col: 2; }
.number:nth-child(64) { --row: 6; --col: 3; }
.number:nth-child(65) { --row: 6; --col: 4; }
.number:nth-child(66) { --row: 6; --col: 5; }
.number:nth-child(67) { --row: 6; --col: 6; }
.number:nth-child(68) { --row: 6; --col: 7; }
.number:nth-child(69) { --row: 6; --col: 8; }
.number:nth-child(70) { --row: 6; --col: 9; }
.number:nth-child(71) { --row: 7; --col: 0; }
.number:nth-child(72) { --row: 7; --col: 1; }
.number:nth-child(73) { --row: 7; --col: 2; }
.number:nth-child(74) { --row: 7; --col: 3; }
.number:nth-child(75) { --row: 7; --col: 4; }
.number:nth-child(76) { --row: 7; --col: 5; }
.number:nth-child(77) { --row: 7; --col: 6; }
.number:nth-child(78) { --row: 7; --col: 7; }
.number:nth-child(79) { --row: 7; --col: 8; }
.number:nth-child(80) { --row: 7; --col: 9; }
.number:nth-child(81) { --row: 8; --col: 0; }
.number:nth-child(82) { --row: 8; --col: 1; }
.number:nth-child(83) { --row: 8; --col: 2; }
.number:nth-child(84) { --row: 8; --col: 3; }
.number:nth-child(85) { --row: 8; --col: 4; }
.number:nth-child(86) { --row: 8; --col: 5; }
.number:nth-child(87) { --row: 8; --col: 6; }
.number:nth-child(88) { --row: 8; --col: 7; }
.number:nth-child(89) { --row: 8; --col: 8; }
.number:nth-child(90) { --row: 8; --col: 9; }
.number:nth-child(91) { --row: 9; --col: 0; }
.number:nth-child(92) { --row: 9; --col: 1; }
.number:nth-child(93) { --row: 9; --col: 2; }
.number:nth-child(94) { --row: 9; --col: 3; }
.number:nth-child(95) { --row: 9; --col: 4; }
.number:nth-child(96) { --row: 9; --col: 5; }
.number:nth-child(97) { --row: 9; --col: 6; }
.number:nth-child(98) { --row: 9; --col: 7; }
.number:nth-child(99) { --row: 9; --col: 8; }
.number:nth-child(100) { --row: 9; --col: 9; }


@keyframes colorChange {
	 99% {
		 color: #33fffc;
	}
	 100% {
		 background-color: #00c7ed;
	}
	 50% {
		 background-color: #fff;
	}
	 20% {
		 background-color: #aefff5;
	}
	 8% {
		 background-color: #00cbff;
	}
}

@keyframes resize {
    0% {
        grid-template-columns: 2fr 4fr 1fr 2fr 3fr 5fr 1fr 2fr 3fr 2fr;
        grid-template-rows: 4fr 2fr 2fr 3fr 4fr 1fr 5fr 3fr 2fr 2fr;
    }

    10% {
        grid-template-columns: 2fr 4fr 1fr 2fr 3fr 5fr 1fr 2fr 3fr 2fr;
        grid-template-rows: 4fr 2fr 2fr 3fr 4fr 1fr 5fr 3fr 2fr 2fr;
    }

    20% {
        grid-template-columns: 3fr 2fr 3fr 1fr 4fr 4fr 2fr 3fr 2fr 2fr;
        grid-template-rows: 2fr 4fr 3fr 2fr 1fr 5fr 2fr 3fr 3fr 5fr;
    }

    1% {
        grid-template-columns: 1fr 5fr 2fr 2fr 3fr 3fr 2fr 2fr 3fr 3fr;
        grid-template-rows: 2fr 2fr 3fr 1fr 4fr 4fr 2fr 2fr 3fr 3fr;
    }

    1% {
        grid-template-columns: 3fr 3fr 3fr 2fr 1fr 5fr 2fr 2fr 2fr 3fr;
        grid-template-rows: 2fr 3fr 2fr 4fr 2fr 2fr 1fr 5fr 3fr 3fr;
    }

    1% {
        grid-template-columns: 2fr 2fr 3fr 2fr 2fr 4fr 1fr 3fr 3fr 4fr;
        grid-template-rows: 3fr 4fr 2fr 3fr 2fr 2fr 2fr 1fr 4fr 5fr;
    }

    10% {
        grid-template-columns: 3fr 2fr 3fr 2fr 3fr 3fr 2fr 1fr 3fr 4fr;
        grid-template-rows: 2fr 3fr 2fr 4fr 2fr 2fr 3fr 3fr 1fr 5fr;
    }

    70% {
        grid-template-columns: 2fr 3fr 2fr 2fr 4fr 3fr 2fr 2fr 3fr 3fr;
        grid-template-rows: 3fr 2fr 2fr 4fr 2fr 3fr 2fr 2fr 3fr 3fr;
    }

    80% {
        grid-template-columns: 3fr 2fr 3fr 2fr 4fr 3fr 1fr 3fr 3fr 2fr;
        grid-template-rows: 2fr 4fr 2fr 3fr 2fr 3fr 3fr 2fr 2fr 3fr;
    }

    90% {
        grid-template-columns: 2fr 3fr 3fr 2fr 3fr 2fr 2fr 4fr 2fr 2fr;
        grid-template-rows: 3fr 2fr 4fr 2fr 3fr 2fr 2fr 3fr 3fr 2fr;
    }

    1% {
        grid-template-columns: 2fr 4fr 1fr 2fr 3fr 5fr 1fr 2fr 3fr 2fr;
        grid-template-rows: 4fr 2fr 2fr 3fr 4fr 1fr 5fr 3fr 2fr 2fr;
    }
}







@keyframes scaleAnimation {
    0% { transform: scale(1); }
    1% { transform: scale(100); }
    100% { transform: scale(300); }
}

/*@keyframes scaleAnimationLast {
    0% { transform: scale(1); }
    100% { transform: scale(2.5); }
    
}*/

@keyframes scaleAnimation {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(1);
      }
    }
/*résultat tirage*/
.scaleLast{
    animation: scaleAnimation 1s ease-in-out infinite alternate;
	background-color: rgba(253, 37, 236, 1)  !important;
    box-shadow: 0 0 40px 30px  rgba(255, 0, 0, 1);
    z-index: 9800;
}
.animation-scale {
  animation-name: scaleAnimation;
  animation-duration: 10s; /* Durée de l'animation */
  animation-fill-mode: backwards; /* L'élément conserve le style final de l'animation */
  animation-delay: -2s;
  box-shadow: 0 0 30px 30px var(--box-shadow-color, rgba(255, 137, 246, 1));
}

@keyframes scaleAnimation {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px 5px var(--box-shadow-color, rgba(201, 13, 13, 1));
  }
  50% {
    transform: scale(1.5);
    box-shadow: 0 0 20px 10px var(--box-shadow-color, rgba(137, 154, 255, 1));
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 30px 15px var(--box-shadow-color, rgba(139, 255, 137, 1));
  }
}


.grid:hover {
    animation-play-state: running; /* Mettre en pause l'animation sur hover */
}



/*** TYPO CHIFFRES CASES ORDI*/
        .number, .number_texte {
           
            border: 0.001px ridge transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 6em;
            font-weight: bold;
            cursor: pointer;
          
            background-color: transparent;
        }

.number:hover {
            transform: scale(2);
    		z-index: 100000;
    		cursor: pointer;
    		
    
        }

@-webkit-keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}



/* Style for mobile devices */
            @media (max-width: 951px) {
               
body{
	overflow: hidden;
}
                .shop_product .button{
	font-size: initial !important;
}
                .lottery{
				height: 60vh;
                    margin-left:20%;
    margin-right:20%;
}
                .grid {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
    		grid-template-rows: repeat(10, 1fr);
            gap: 0px;
            min-height: 300px;
    		min-width: 300px;
            max-height: 300px;
                }
/* TYPO CHIFFRES CASES MOBILE */
                .number {
                    
                    font-size: 4em;
                }
/* DEFILEMENT mobile SIZE */
                .scroll-left h2 {
    font-size: 250em !important;
        
               
                    }
                shop-product {
	font-size: 0.8rem;
	max-width: 22rem;
	font-family: 'Arial Black', Arial, sans-serif, Arial #3107cb;;
	font-style: normal;
	font-weight: 900;
	letter-spacing: normal;
	
}
                .animation-text > p {
    color: #cc5e3f;
    display: none;
    font-family: 'Dancing Script';
    font-size: 1.5em;
    font-weight: 600;
    width: 50ch;
    overflow: hidden;
    white-space: nowrap;
    
}

               .cg{
	text-align: center;
    padding-right: 0px;
    
}
.cr{
	text-align: center !important;
}
                .custom-footer-grid{
	text-align: center !important;
                    padding-right: 0;
                  
}
            }

.custom-footer{
  	position: fixed;
      overflow: hidden;
        white-space: nowrap;


 
  
    
}
 .cg{
	text-align: center !important;
    padding-right: 15px;
    
}
.cr{
	text-align: center !important;
}

.animation-text{
position: fixed;
  background: transparent;
  top: 1px;

 
}

.animation-text > p {
    color: #e5ec12;
    display: block;
    font-family: Planet, Icons;
    font-size:1em;
    font-weight: 500;
    width: 100ch;
    overflow: hidden;
    white-space: nowrap;
    animation: type 10s steps(90) ;
    animation-fill-mode: forwards; /* Retains styles of the last keyframe */
	font-style: normal;
}

@keyframes type {
    0% {
        width: 0;
    }
    100% {
        width: 50ch;
        display: none;
    }
    
}

.scroll-left {
 
    z-index: -99;
position: absolute;
}
.scroll-left h2 {

width: 100%;
    white-space: nowrap;
    font-size: 300em;
    word-wrap : normal !important;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%); 
transform:translateX(100%);
/* Apply animation to this element */ 
-moz-animation: scroll-left 0s linear infinite;
-webkit-animation: scroll-left 9s linear infinite;
animation: scroll-left 0s initial infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0% { 
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%); 
}
100% { 
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%); 
}
}
[data-id="35717071"]{
	z-index: 9800;
}

[data-id="35717088"]{
	position: fixed !important;
    bottom: 0;
    z-index: 9800;
}
[data-id="35717071"]{
	position: relative !important;
    z-index: 9800;
}

[data-id="35717075"]{
	position: relative !important;
    top: 16px;
    z-index: 9800;
}
/* Animation */
.number {
    width: 20px;
    height: 20px;
    line-height: 2px;
    text-align: center;
    font-size: 8px;
    font-weight: bold;
    color: #ecd90e;
    border-radius: 50%;
    position: absolute;
    transform-origin: center;
    background-color: #008696;
    animation: moveSpiral 5s  infinite , gridItemColorChange 60s infinite;
    transition: background-color 1s ease;
   
}

@keyframes moveSpiral {
    0% {
        transform: rotate(var(--angle)) translate(var(--distance)) rotate(calc(-1 * var(--angle)));
    }
    100% {
        transform: rotate(calc(var(--angle) + 360deg)) translate(var(--distance)) rotate(calc(-1 * (var(--angle) + 360deg)));
    }
}

:root {
    --base-distance: 17px; /* Distance de base entre les cases */
    --angle-step: 44deg; /* Angle entre les branches */
}
/* Première branche */
.number:nth-child(1) { --distance: calc(var(--base-distance) * 3); --angle: calc(0 * var(--angle-step)); animation-delay: 0s; }
.number:nth-child(2) { --distance: calc(var(--base-distance) * 4); --angle: calc(0 * var(--angle-step)); animation-delay: 0.1s; }
.number:nth-child(3) { --distance: calc(var(--base-distance) * 5); --angle: calc(0 * var(--angle-step)); animation-delay: 0.2s; }
.number:nth-child(4) { --distance: calc(var(--base-distance) * 6); --angle: calc(0 * var(--angle-step)); animation-delay: 0.3s; }
.number:nth-child(5) { --distance: calc(var(--base-distance) * 7); --angle: calc(0 * var(--angle-step)); animation-delay: 0.4s; }
.number:nth-child(6) { --distance: calc(var(--base-distance) * 8); --angle: calc(0 * var(--angle-step)); animation-delay: 0.5s; }
.number:nth-child(7) { --distance: calc(var(--base-distance) * 9); --angle: calc(0 * var(--angle-step)); animation-delay: 0.6s; }
.number:nth-child(8) { --distance: calc(var(--base-distance) * 10); --angle: calc(0 * var(--angle-step)); animation-delay: 0.7s; }
.number:nth-child(9) { --distance: calc(var(--base-distance) * 11); --angle: calc(0 * var(--angle-step)); animation-delay: 0.8s; }
.number:nth-child(10) { --distance: calc(var(--base-distance) * 12); --angle: calc(0 * var(--angle-step)); animation-delay: 0.9s; }

/* Deuxième branche */
.number:nth-child(11) { --distance: calc(var(--base-distance) * 3); --angle: calc(1 * var(--angle-step)); animation-delay: 1s; }
.number:nth-child(12) { --distance: calc(var(--base-distance) * 4); --angle: calc(1 * var(--angle-step)); animation-delay: 1.1s; }
.number:nth-child(13) { --distance: calc(var(--base-distance) * 5); --angle: calc(1 * var(--angle-step)); animation-delay: 1.2s; }
.number:nth-child(14) { --distance: calc(var(--base-distance) * 6); --angle: calc(1 * var(--angle-step)); animation-delay: 1.3s; }
.number:nth-child(15) { --distance: calc(var(--base-distance) * 7); --angle: calc(1 * var(--angle-step)); animation-delay: 1.4s; }
.number:nth-child(16) { --distance: calc(var(--base-distance) * 8); --angle: calc(1 * var(--angle-step)); animation-delay: 1.5s; }
.number:nth-child(17) { --distance: calc(var(--base-distance) * 9); --angle: calc(1 * var(--angle-step)); animation-delay: 1.6s; }
.number:nth-child(18) { --distance: calc(var(--base-distance) * 10); --angle: calc(1 * var(--angle-step)); animation-delay: 1.7s; }
.number:nth-child(19) { --distance: calc(var(--base-distance) * 11); --angle: calc(1 * var(--angle-step)); animation-delay: 1.8s; }
.number:nth-child(20) { --distance: calc(var(--base-distance) * 12); --angle: calc(1 * var(--angle-step)); animation-delay: 1.9s; }
/* Troisième branche */
.number:nth-child(21) { --distance: calc(var(--base-distance) * 3); --angle: calc(2 * var(--angle-step)); animation-delay: 2s; }
.number:nth-child(22) { --distance: calc(var(--base-distance) * 4); --angle: calc(2 * var(--angle-step)); animation-delay: 2.1s; }
.number:nth-child(23) { --distance: calc(var(--base-distance) * 5); --angle: calc(2 * var(--angle-step)); animation-delay: 2.2s; }
.number:nth-child(24) { --distance: calc(var(--base-distance) * 6); --angle: calc(2 * var(--angle-step)); animation-delay: 2.3s; }
.number:nth-child(25) { --distance: calc(var(--base-distance) * 7); --angle: calc(2 * var(--angle-step)); animation-delay: 2.4s; }
.number:nth-child(26) { --distance: calc(var(--base-distance) * 8); --angle: calc(2 * var(--angle-step)); animation-delay: 2.5s; }
.number:nth-child(27) { --distance: calc(var(--base-distance) * 9); --angle: calc(2 * var(--angle-step)); animation-delay: 2.6s; }
.number:nth-child(28) { --distance: calc(var(--base-distance) * 10); --angle: calc(2 * var(--angle-step)); animation-delay: 2.7s; }
.number:nth-child(29) { --distance: calc(var(--base-distance) * 11); --angle: calc(2 * var(--angle-step)); animation-delay: 2.8s; }
.number:nth-child(30) { --distance: calc(var(--base-distance) * 12); --angle: calc(2 * var(--angle-step)); animation-delay: 2.9s; }

/* Quatrième branche */
.number:nth-child(31) { --distance: calc(var(--base-distance) * 3); --angle: calc(3 * var(--angle-step)); animation-delay: 3s; }
.number:nth-child(32) { --distance: calc(var(--base-distance) * 4); --angle: calc(3 * var(--angle-step)); animation-delay: 3.1s; }
.number:nth-child(33) { --distance: calc(var(--base-distance) * 5); --angle: calc(3 * var(--angle-step)); animation-delay: 3.2s; }
.number:nth-child(34) { --distance: calc(var(--base-distance) * 6); --angle: calc(3 * var(--angle-step)); animation-delay: 3.3s; }
.number:nth-child(35) { --distance: calc(var(--base-distance) * 7); --angle: calc(3 * var(--angle-step)); animation-delay: 3.4s; }
.number:nth-child(36) { --distance: calc(var(--base-distance) * 8); --angle: calc(3 * var(--angle-step)); animation-delay: 3.5s; }
.number:nth-child(37) { --distance: calc(var(--base-distance) * 9); --angle: calc(3 * var(--angle-step)); animation-delay: 3.6s; }
.number:nth-child(38) { --distance: calc(var(--base-distance) * 10); --angle: calc(3 * var(--angle-step)); animation-delay: 3.7s; }
.number:nth-child(39) { --distance: calc(var(--base-distance) * 11); --angle: calc(3 * var(--angle-step)); animation-delay: 3.8s; }
.number:nth-child(40) { --distance: calc(var(--base-distance) * 12); --angle: calc(3 * var(--angle-step)); animation-delay: 3.9s; }

/* Cinquième branche */
.number:nth-child(41) { --distance: calc(var(--base-distance) * 3); --angle: calc(4 * var(--angle-step)); animation-delay: 4s; }
.number:nth-child(42) { --distance: calc(var(--base-distance) * 4); --angle: calc(4 * var(--angle-step)); animation-delay: 4.1s; }
.number:nth-child(43) { --distance: calc(var(--base-distance) * 5); --angle: calc(4 * var(--angle-step)); animation-delay: 4.2s; }
.number:nth-child(44) { --distance: calc(var(--base-distance) * 6); --angle: calc(4 * var(--angle-step)); animation-delay: 4.3s; }
.number:nth-child(45) { --distance: calc(var(--base-distance) * 7); --angle: calc(4 * var(--angle-step)); animation-delay: 4.4s; }
.number:nth-child(46) { --distance: calc(var(--base-distance) * 8); --angle: calc(4 * var(--angle-step)); animation-delay: 4.5s; }
.number:nth-child(47) { --distance: calc(var(--base-distance) * 9); --angle: calc(4 * var(--angle-step)); animation-delay: 4.6s; }
.number:nth-child(48) { --distance: calc(var(--base-distance) * 10); --angle: calc(4 * var(--angle-step)); animation-delay: 4.7s; }
.number:nth-child(49) { --distance: calc(var(--base-distance) * 11); --angle: calc(4 * var(--angle-step)); animation-delay: 4.8s; }
.number:nth-child(50) { --distance: calc(var(--base-distance) * 12); --angle: calc(4 * var(--angle-step)); animation-delay: 4.9s; }

/* Sixième branche */
.number:nth-child(51) { --distance: calc(var(--base-distance) * 3); --angle: calc(5 * var(--angle-step)); animation-delay: 5s; }
.number:nth-child(52) { --distance: calc(var(--base-distance) * 4); --angle: calc(5 * var(--angle-step)); animation-delay: 5.1s; }
.number:nth-child(53) { --distance: calc(var(--base-distance) * 5); --angle: calc(5 * var(--angle-step)); animation-delay: 5.2s; }
.number:nth-child(54) { --distance: calc(var(--base-distance) * 6); --angle: calc(5 * var(--angle-step)); animation-delay: 5.3s; }
.number:nth-child(55) { --distance: calc(var(--base-distance) * 7); --angle: calc(5 * var(--angle-step)); animation-delay: 5.4s; }
.number:nth-child(56) { --distance: calc(var(--base-distance) * 8); --angle: calc(5 * var(--angle-step)); animation-delay: 5.5s; }
.number:nth-child(57) { --distance: calc(var(--base-distance) * 9); --angle: calc(5 * var(--angle-step)); animation-delay: 5.6s; }
.number:nth-child(58) { --distance: calc(var(--base-distance) * 10); --angle: calc(5 * var(--angle-step)); animation-delay: 5.7s; }
.number:nth-child(59) { --distance: calc(var(--base-distance) * 11); --angle: calc(5 * var(--angle-step)); animation-delay: 5.8s; }
.number:nth-child(60) { --distance: calc(var(--base-distance) * 12); --angle: calc(5 * var(--angle-step)); animation-delay: 5.9s; }

/* Continuez de cette manière pour les autres branches */
/* Septième branche */
.number:nth-child(61) { --distance: calc(var(--base-distance) * 3); --angle: calc(6 * var(--angle-step)); animation-delay: 6s; }
.number:nth-child(62) { --distance: calc(var(--base-distance) * 4); --angle: calc(6 * var(--angle-step)); animation-delay: 6.1s; }
.number:nth-child(63) { --distance: calc(var(--base-distance) * 5); --angle: calc(6 * var(--angle-step)); animation-delay: 6.2s; }
.number:nth-child(64) { --distance: calc(var(--base-distance) * 6); --angle: calc(6 * var(--angle-step)); animation-delay: 6.3s; }
.number:nth-child(65) { --distance: calc(var(--base-distance) * 7); --angle: calc(6 * var(--angle-step)); animation-delay: 6.4s; }
.number:nth-child(66) { --distance: calc(var(--base-distance) * 8); --angle: calc(6 * var(--angle-step)); animation-delay: 6.5s; }
.number:nth-child(67) { --distance: calc(var(--base-distance) * 9); --angle: calc(6 * var(--angle-step)); animation-delay: 6.6s; }
.number:nth-child(68) { --distance: calc(var(--base-distance) * 10); --angle: calc(6 * var(--angle-step)); animation-delay: 6.7s; }
.number:nth-child(69) { --distance: calc(var(--base-distance) * 11); --angle: calc(6 * var(--angle-step)); animation-delay: 6.8s; }
.number:nth-child(70) { --distance: calc(var(--base-distance) * 12); --angle: calc(6 * var(--angle-step)); animation-delay: 6.9s; }

/* Huitième branche */
.number:nth-child(71) { --distance: calc(var(--base-distance) * 3); --angle: calc(7 * var(--angle-step)); animation-delay: 7s; }
.number:nth-child(72) { --distance: calc(var(--base-distance) * 4); --angle: calc(7 * var(--angle-step)); animation-delay: 7.1s; }
.number:nth-child(73) { --distance: calc(var(--base-distance) * 5); --angle: calc(7 * var(--angle-step)); animation-delay: 7.2s; }
.number:nth-child(74) { --distance: calc(var(--base-distance) * 6); --angle: calc(7 * var(--angle-step)); animation-delay: 7.3s; }
.number:nth-child(75) { --distance: calc(var(--base-distance) * 7); --angle: calc(7 * var(--angle-step)); animation-delay: 7.4s; }
.number:nth-child(76) { --distance: calc(var(--base-distance) * 8); --angle: calc(7 * var(--angle-step)); animation-delay: 7.5s; }
.number:nth-child(77) { --distance: calc(var(--base-distance) * 9); --angle: calc(7 * var(--angle-step)); animation-delay: 7.6s; }
.number:nth-child(78) { --distance: calc(var(--base-distance) * 10); --angle: calc(7 * var(--angle-step)); animation-delay: 7.7s; }
.number:nth-child(79) { --distance: calc(var(--base-distance) * 11); --angle: calc(7 * var(--angle-step)); animation-delay: 7.8s; }
.number:nth-child(80) { --distance: calc(var(--base-distance) * 12); --angle: calc(7 * var(--angle-step)); animation-delay: 7.9s; }

/* Neuvième branche */
.number:nth-child(81) { --distance: calc(var(--base-distance) * 3); --angle: calc(8 * var(--angle-step)); animation-delay: 8s; }
.number:nth-child(82) { --distance: calc(var(--base-distance) * 4); --angle: calc(8 * var(--angle-step)); animation-delay: 8.1s; }
.number:nth-child(83) { --distance: calc(var(--base-distance) * 5); --angle: calc(8 * var(--angle-step)); animation-delay: 8.2s; }
.number:nth-child(84) { --distance: calc(var(--base-distance) * 6); --angle: calc(8 * var(--angle-step)); animation-delay: 8.3s; }
.number:nth-child(85) { --distance: calc(var(--base-distance) * 7); --angle: calc(8 * var(--angle-step)); animation-delay: 8.4s; }
.number:nth-child(86) { --distance: calc(var(--base-distance) * 8); --angle: calc(8 * var(--angle-step)); animation-delay: 8.5s; }
.number:nth-child(87) { --distance: calc(var(--base-distance) * 9); --angle: calc(8 * var(--angle-step)); animation-delay: 8.6s; }
.number:nth-child(88) { --distance: calc(var(--base-distance) * 10); --angle: calc(8 * var(--angle-step)); animation-delay: 8.7s; }
.number:nth-child(89) { --distance: calc(var(--base-distance) * 11); --angle: calc(8 * var(--angle-step)); animation-delay: 8.8s; }
.number:nth-child(90) { --distance: calc(var(--base-distance) * 12); --angle: calc(8 * var(--angle-step)); animation-delay: 8.9s; }

/* Dixième branche */
.number:nth-child(91) { --distance: calc(var(--base-distance) * 3); --angle: calc(9 * var(--angle-step)); animation-delay: 9s; }
.number:nth-child(92) { --distance: calc(var(--base-distance) * 4); --angle: calc(9 * var(--angle-step)); animation-delay: 9.1s; }
.number:nth-child(93) { --distance: calc(var(--base-distance) * 5); --angle: calc(9 * var(--angle-step)); animation-delay: 9.2s; }
.number:nth-child(94) { --distance: calc(var(--base-distance) * 6); --angle: calc(9 * var(--angle-step)); animation-delay: 9.3s; }
.number:nth-child(95) { --distance: calc(var(--base-distance) * 7); --angle: calc(9 * var(--angle-step)); animation-delay: 9.4s; }
.number:nth-child(96) { --distance: calc(var(--base-distance) * 8); --angle: calc(9 * var(--angle-step)); animation-delay: 9.5s; }
.number:nth-child(97) { --distance: calc(var(--base-distance) * 9); --angle: calc(9 * var(--angle-step)); animation-delay: 9.6s; }
.number:nth-child(98) { --distance: calc(var(--base-distance) * 10); --angle: calc(9 * var(--angle-step)); animation-delay: 9.7s; }
.number:nth-child(99) { --distance: calc(var(--base-distance) * 11); --angle: calc(9 * var(--angle-step)); animation-delay: 9.8s; }
.number:nth-child(100) { --distance: calc(var(--base-distance) * 12); --angle: calc(9 * var(--angle-step)); animation-delay: 9.9s; }

#tirage {
    visibility: visible;
    background-color: rgba(232, 234, 8, 1) !important;
    color: transparent !important;
    border: none;
    padding: 30px 20px; /* Dimensions du bouton */
    border-radius: 50px; /* Rendre le bouton arrondi */
    cursor: pointer;
    box-shadow: 0 0px 10px transparent; /* Ajout d'une ombre */
    transition: all 0.3s ease-in-out;
    animation: colorPulse 5s infinite ease-in-out; /* Animation de changement de couleur */
    z-index: 0;
}

/* Effet au survol */
#tirage:hover {
    background-color: #8713eb;
    transform: translate(-50%, -50%) scale(1.2); /* Légère mise en valeur */
}
/* Position des boutons */
#nouktah-button {
    position: fixed;
    top: 10px; /* Coin supérieur gauche */
    left: 10px;
    z-index: 1000; /* S'assurer qu'il est au-dessus */
}

#contact-button {
    position: fixed;
    top: 10px; /* Coin supérieur droit */
    right: 10px;
    z-index: 1000;
}

#instagram-button {
    position: fixed;
    bottom: 10px; /* Coin inférieur gauche */
    left: 60px;
    z-index: 1000;
}

#conditions-button {
    position: fixed;
    bottom: 10px; /* Coin inférieur droit */
    right: 10px;
    z-index: 1000;
}
#tirage {
    margin-top:auto !important;
 position: fixed; /* Fixe l'élément par rapport à l'écran */
  top: 50%; /* Centre verticalement */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour centrer précisément */
  z-index: 0; /* Place au-dessus des autres éléments */
}
body {
    background: radial-gradient(circle, 
        transparent 0%, /* Couleur centrale */
        transparent 5%, /* Couleur intermédiaire */
        rgba(20, 16, 192, 0.5) 100% /* Couleur extérieure */
    );
}
.wave-text {
   position: fixed; /* Fixe l'élément par rapport à l'écran */
  top: 90%; /* Centre verticalement */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour centrer précisément */
    z-index: 1; /* Plus petit pour la mettre derrière */
    display: flex;
    flex-direction: initial; /* Orientation verticale */
    justify-content: center; /* Centre verticalement */
    align-items: center; /* Centre horizontalement */
    writing-mode: initial; /* Écriture verticale */
    text-orientation: mixed; /* Orientation du texte verticale */
    font-size: 1.5rem;
    font-family: 'Karla', sans-serif;
    color: rgba(236, 38, 38, 0.55); /* Couleur de base */
}
.karaoke-word {
    opacity: 1; /* Transparence initiale */
    animation: karaoke-animation 4s infinite;
    animation-delay: var(--delay); /* Applique un délai spécifique à chaque mot */
}

/* Animation pour illuminer chaque mot */
@keyframes karaoke-animation {
    0%, 10% {
        opacity: 0.5;
        color: rgba(255, 255, 255, 0.58); /* Couleur par défaut */
    }
    100% {
        opacity: 1;
        color: rgba(236, 225, 38, 0.81); /* Couleur active pendant l'illumination */
    }
}
.grid {
    position: fixed; /* Fixe l'élément par rapport à l'écran */
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Ajuste pour centrer précisément */
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 1px;
    min-height: 18px;
    min-width: 16px;
   }


/* Conteneur de l'effet */
.animated-bg {
position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
  animation: pulse 3s infinite;
  z-index: 0;
}
/* Animation pour les cercles */
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
/* Style commun pour tous les boutons */
#conditions-button,
#instagram-button,
#contact-button,
#nouktah-button {
    font-family: 'Karla', sans-serif; /* Changez par la typo souhaitée */
    font-size: 1.3rem; /* Taille de la police */
    font-weight: 700; /* Épaisseur */
    color: rgba(237, 188, 0, 0.55); /* Couleur du texte */
    text-transform: uppercase; /* Texte en majuscules */
    letter-spacing: 0.05em; /* Espacement entre les lettres */
    background: none; /* Si vous voulez enlever les arrière-plans */
    border: none; /* Pas de bordures */
    cursor: pointer; /* Changement du curseur au survol */
    transition: all 0.3s ease; /* Effet de transition pour les hover */
    text-decoration: none
}

/* Effet au survol (hover) */
#conditions-button:hover,
#instagram-button:hover,
#contact-button:hover,
#nouktah-button:hover{
    color: #fff; /* Couleur au survol */
    transform: scale(1); /* Agrandissement léger au survol */
}

/* Exclure spécifiquement les éléments de la spirale */
.number, .number * {
    mix-blend-mode: normal; /* Aucune modification de couleur */
}
.condition {
    background-color: rgba(239, 206, 254, 1); /* Remplacez par la couleur souhaitée */
    color: #333; /* Couleur du texte pour assurer un bon contraste */
    min-height: 100vh; /* S'assurer que le fond couvre toute la page */
    padding: 2rem; /* Ajouter de l'espace autour du contenu */
    box-sizing: border-box;
}
.condition {
    text-align: justify; /* Aligne le texte de manière justifiée */
    line-height: 1.5; /* Espace entre les lignes pour améliorer la lisibilité */
    margin-bottom: 1rem; /* Espacement entre les paragraphes */
    hyphens: auto; /* Active la césure pour éviter de grandes espaces */
}
.close-button {
    background-color: transparent; /* Couleur de fond */
    color: #000; /* Couleur du texte */
    border: none; /* Pas de bordure */
    font-size: 2rem; /* Taille de la police */
    border-radius: 50px; /* Coins arrondis */
    cursor: pointer; /* Curseur de pointeur */
    transition: background-color 0.1s ease;
}

.close-button:hover {
    background-color: #fff; /* Couleur au survol */
}
#tirage {
    position: fixed; /* Fixe l'élément par rapport à l'écran */
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Ajuste pour centrer précisément */
    background-color: rgba(255, 179, 0, 0.9); /* Couleur visible */
    color: white; /* Couleur du texte */
    border: none; /* Pas de bordure */
    border-radius: 50px; /* Bouton arrondi */
    cursor: pointer; /* Curseur au survol */
    box-shadow: 0 4px 10px rgba(245, 10, 10, 0.75); /* Ombre pour mise en évidence */
    z-index: 0; /* Place au-dessus de tout */
    transition: transform 0.3s ease-in-out; /* Animation au survol */
}
/* Style du logo avec effet d'éclair */
#logo {
    position: fixed;
    top: 49%; /* Ajustez la position en haut */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem; /* Taille du logo */
    color: #00ff3c;
    font-weight: 3000;
    font-family: "Arial Black", sans-serif;
    text-shadow: 0 0 20px #00b8ff, 0 0 40px #ffcc00, 0 0 80px #ff7900;
    animation: flashEffect 3s infinite, bounce 2s infinite;
    pointer-events: none; /* Ignore les interactions souris */
}
/* Animation d'éclair */
@keyframes flashEffect {
    0%, 100% {
        text-shadow: 0 0 20px #ffcc00, 0 0 40px #ffcc00, 0 0 80px #ff7900;
        color: #8e00ff;
    }
    50% {
        text-shadow: 0 0 30px #ffffff, 0 0 60px #ffcc00, 0 0 100px #ffffff;
        color: #ffffff;
    }
}
/* Changement de couleur de fond */
body {
    animation: backgroundColorChange 60s infinite;
    transition: background-color 50s ease;
}

@keyframes backgroundColorChange {
    0% {
        background-color: #946335;
    }
    25% {
        background-color: #4b1147;
    }
    50% {
        background-color: #471325;
    }
    75% {
        background-color: #360755;
    }
    100% {
        background-color: #946335;
    }
}

.number:hover {
    transform: scale(3); /* Centre et agrandit */
    z-index: 2147483647; /* Le plus grand z-index possible */
    animation-play-state: paused; /* Stoppe les animations */
}
.wave-text span {
    white-space: pre; /* Permet de conserver les espaces */
}
/* Keyframe pour effet sonore visuel */
@keyframes soundWave {
    0% {
        box-shadow: 0 0 0px rgba(255, 255, 255, 0.5);
        transform: scale(3);
        opacity: 1;
    }

    100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0);
        transform: scale(3);
        opacity: 0;
    }
}

.number:hover::after {
    position: absolute;
    top: -2rem; /* Ajuste la position */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem; /* Taille réduite pour une meilleure lisibilité */
    line-height: 1.2; /* Ajuste l'espacement vertical */
    max-width: 150px; /* Limite la largeur pour éviter que le texte déborde */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    color: rgba(255, 255, 255, 0.8); /* Couleur du texte */
    background: rgba(0, 0, 0, 0.7); /* Fond sombre pour le contraste */
    padding: 0.3rem 0.6rem; /* Ajuste l'espacement interne */
    border-radius: 5px; /* Coins arrondis */
    text-align: center;
    z-index: 10000;
    pointer-events: none; /* Évite les interactions avec ce texte */
}

/* Numéros disponibles */
.number.available {
    background-color: #ff7900; /* Vert pour les tickets disponibles */
}
.number.available:hover {
    background-color: #329a3e; /* Couleur plus claire au survol */
    transform: scale(1.2); /* Agrandissement au survol */
}
/* Style pour les numéros déjà pris */
.number.taken {
    background-color: rgba(255, 121, 0, 1); /* Couleur pour indiquer qu'il est pris */
}
.number.taken:hover {
    background-color: #000; /* Optionnel, effet au survol */
}
/* Ajouter une animation pour les numéros récemment pris */
.number.taken.newly-taken {
    animation: flash 1s ease-in-out;
}
@keyframes flash {
    0%, 100% {
        background-color: #f44336;
    }
    50% {
        background-color: #ffcccb;
    }
}
.number.taken:hover::after {
    content: "🔒" attr(data-number);
    position: fixed;
    top: 0%;
    left: 0%;
    transform: translateX(-50%);
    font-size: 3rem;
    color: #f00;
    background: transparent;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    z-index: 2147483647;
}
/* Numéros disponibles */
.number.available:hover::after {
    content: "SELECT N°" attr(data-number); /* Affiche le numéro disponible */
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    color: #fff;
    background: rgba(70, 172, 89, 1);
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    z-index: 9990000;
}
/* Style général de la bannière */
.footer-banner {
  background: #17a05c;
  color: #fff;
  border: 0px solid transparent;
  font-family: "Arial", sans-serif;
  padding: 10px;
  text-align: center;
  z-index: 10000;
  border-radius: 0px;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.footer-banner.hidden {
  transform: translatey(-100%);
  opacity: 0;
  pointer-events: none;
    
}

/* Contenu de la bannière */
.banner-content {
  position: relative;
}

/* Titre */
.footer-banner h1 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Description */
.footer-banner p {
  font-size: 14px;
  margin-bottom: 10px;
}

/* Bouton de fermeture */
.close-banner {
  position: absolute;
  top: -20px;
  left: 0px;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  background: none;
  border: none;
  cursor: pointer;
}

/* Bouton de langue */
.language-toggle {
  position: absolute;
  top: -20px;
  right: 0px;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  background: none;
  border: none;
  cursor: pointer;
}

.language-toggle:hover {
  text-decoration: underline;
}

/* Mobile styles */
@media (max-width: 768px) {
  .footer-banner {
    padding: 10px;
  }

  .footer-banner h1 {
    font-size: 10px;
  }

  .footer-banner p {
    font-size: 12px;
  }
}
/* Animation de changement de couleur */
@keyframes colorPulse {
  0% {
    background-color: #f000ff;
  }
  25% {
    background-color: #ffa500;
  }
  50% {
    background-color: #00ff03;
  }
  75% {
    background-color: #02f;
  }
  100% {
    background-color: #00d8ff;
  }
}
/* Perspective étoilée */
/*.perspective {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; 
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(50, 0, 80, 1));
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  overflow: hidden;
  z-index: 0;
}
/* Overlay général */
/*#announcement-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.9), rgba(255, 154, 0, 0.9));
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000000;
    animation: fadeOut 4s ease-in-out forwards;
}

/* Contenu de l'overlay */
/*.announcement-content {
    text-align: center;
    font-family: 'Karla', sans-serif;
    animation: zoomIn 2s ease-in-out;
}

.announcement-content h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.announcement-content h2 {
    font-size: 2rem;
    font-weight: 500;
    color: #fff;
  
    margin-bottom: 1rem;
}

.announcement-content h2 span {
    color: #fff;
   
}

.announcement-content p {
    font-size: 1rem;
    margin-top: 1rem;
    opacity: 0.8;
}

/* Animation pour l'apparition */
/*@keyframes zoomIn {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animation pour la disparition */
/*@keyframes fadeOut {
    0%, 90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}*/
.matrix {
    position: fixed;

    width: 100%;
    height: 100%;
    z-index: 0;
}

canvas {
    display: block;
}

:root {
    --font-size: 30; /* Taille des caractères */
    --font-family: 'monospace'; /* Police utilisée */
    --particle-color: rgba(255, 207, 0, 1); /* Couleur des particules */
    --trail-color: rgba(255, 0, 0, 1); /* Couleur de la traînée */
    --background-color: rgba(92, 211, 22, 0); /* Couleur de fond semi-transparente */
    --particle-count: 17; /* Nombre de particules */
    --trail-length: 17; /* Longueur des traînées */
    --refresh-rate: 9; /* Fréquence d'actualisation en millisecondes */
    --letters: ♥; /* Chaîne de caractères utilisée pour l'animation */
    --speed-factor: 0; /* Multiplicateur de vitesse des particules */
}
/* Masquer l'input checkbox */
input[type="checkbox"] {
  display: none;
}
/* Conteneur principal pour le SVG */
#svg-container {
  position: relative;
  bottom: -440px;
  left: -65px;
  display: inline-block;
  cursor: pointer;
  z-index: 1000000; /* Toujours au-dessus */
  transition: transform 0.3s ease;
  pointer-events: auto; /* Autorise les clics */
}

/* SVG Responsif */
svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  user-select: none;
  pointer-events: auto; /* Autorise les clics */
}

/* Centre de rotation */
#groupe-rotatif {
  transform-origin: 57.5px 155.3px; /* Centre du cercle jaune */
  transition: transform 1s ease-in-out;
  pointer-events: auto; /* Permet les clics à l'intérieur */
}

/* Rotation lors du clic */
input[type="checkbox"]:checked ~ #svg-container svg #groupe-rotatif {
  transform: rotate(90deg);
}

input[type="checkbox"]:not(:checked) ~ #svg-container svg #groupe-rotatif {
  transform: rotate(0deg);
}

/* Parties avec des noms actualisés */
.goussetsac {fill: none; stroke: #fff300; }
.silhouettesac { fill: none; stroke: #fff300; }
.couturegoussetsac { fill: none; stroke: #fff300; stroke-width: 0.75; stroke-dasharray: 2, 2; }
.pieddefondsac { fill: none; stroke: #fff300; }
.rouleausac { fill: none; stroke: #fff300;}
.lienrouleausac { fill: none; stroke: #fff300; }
.boutondecolgoussetsac { fill: none; stroke: #FFED00; }

/* Ajout de zones cliquables */
label[for="toggle-rotation"] {
  display: block;
  position: relative;
  pointer-events: auto;
}

@media (max-width: 768px) {
  #svg-container {
    width: 15vw;
    height: 15vw; /* Assurez une taille visible */
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100000000 !important;
    pointer-events: auto;
  }
}
/* Désactiver le scroll */
.no-scroll {
  overflow: hidden; /* Empêche le scroll vertical et horizontal */
  height: 100%;     /* Assure que la hauteur de la page est fixe */
  margin: 0;        /* Supprime les marges par défaut */
  padding: 0;       /* Supprime les espacements par défaut */
}

.ticket-item {
    position: fixed;
 font-size: 1.3rem; /* Taille de la police */
    font-weight: 700; /* Épaisseur */
    color: rgba(237, 188, 0, 0.55); /* Couleur du texte */
    font-family: 'Karla', sans-serif; /* Changez par la typo souhaitée */
     text-transform: uppercase; /* Texte en majuscules */
    background-color: transparent;
    padding: 5px 0px;
    z-index: 200000;
}

 
/* Exemple de positionnement par défaut */
#tickets-taken {
    bottom: 50px; /* Coin inférieur droit */
    right: 10px;
   
    color: #fff300; /* Couleur du texte */
}

#tickets-total {
    bottom: 20px; /* Coin inférieur droit */
    right: 10px;
   
     color: #fff300; /* Couleur du texte */
}

#tickets-slash {
   bottom: 35px; /* Coin inférieur droit */
    right: 15px;

    color: #fff300; /* Couleur du texte */
}

/* Animation pour les chiffres */
.animate-counter {
    animation: counter-bounce 0.6s ease-in-out;
}

/* Animation définie */
@keyframes counter-bounce {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}




/* Boule spéciale avec message */
.number.special {
    background: #ffc900; /* Or */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #00feff;
    border: 2px solid transparent;
    text-align: center;
}


:root {
    --text1: HAPPY;
    --text2: 2025;
    --text3: FULL OF;
    --text4: LOVE;
    --text5: ❤❤❤❤❤❤❤;
    --font-size: 150; /* Taille de la police pour les mots */
    --line-spacing: 100; /* Espacement entre les lignes */
    --particle-count: 5000; /* Nombre total de particules */
    --base-speed: 0.0002; /* Vitesse de base du mouvement */
    --acceleration-factor: 0.01; /* Facteur d'accélération */
    --text-position-x: 10; /* Position horizontale du texte en pourcentage */
    --text-position-y: 3; /* Position verticale du texte en pourcentage */
    --particle-colors: #0017e7, #ff0066, #ffffff, #00ff00; /* Couleurs des particules */
    --particle-size-00bcff: 5; /* Taille des particules bleu clair (#00bcff) */
    --particle-size-ff0066: 4; /* Taille des particules rose (#ff0066) */
    --particle-size-ffffff: 1; /* Taille des particules blanches (#ffffff) */
    --particle-size-00ff00: 4; /* Taille des particules vert clair (#00ff00) */
    --float-speed: 0.005; /* Vitesse du flottement */
}




#canvas {
    position: fixed; /* Permet de placer le canvas où vous voulez */
    top: 0; /* Alignez le haut du canvas */
    left: 0; /* Alignez le côté gauche */
    width: 100vw; /* Ajuste le canvas à la largeur de l'écran */
    height: 100vh; /* Ajuste le canvas à la hauteur de l'écran */
    pointer-events: none; /* Empêche les interactions utilisateur avec le canvas */
    background: transparent; /* Rend le canvas transparent */
    z-index: 2000; /* Place le canvas derrière tous les autres éléments */
}




/* Positionnement du bouton */
.content1 button {
    position: fixed;
    bottom: 75px; /* Coin inférieur droit */
    right: 7px;
    width: 20px; /* Largeur pour un cercle parfait */
    height: 20px; /* Hauteur pour un cercle parfait */
    font-size: 10px;
    font-family: "Arizona Flare Variable", Icons;
    color: #ffffff;
    background-color: #007bff; /* Couleur de fond */
    border: none;
    border-radius: 50%; /* Cercle parfait */
    cursor: pointer;
    display: flex; /* Utilisation de flexbox */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 10; /* Assure que le bouton est visible */
    text-align: center; /* Optionnel, pour garantir l'alignement */
	font-style: normal;
	font-weight: 700;
	font-variation-settings: 'slnt' 0, 'SRFF' 0.25;
}

/* Effet au survol */
.content1 button:hover {
    background-color: #0056b3; /* Couleur de fond au survol */
    transform: scale(1.1); /* Agrandissement au survol */
}

/* Effet au clic */
.content1 button:active {
    background-color: #003f7f; /* Couleur de fond au clic */
    transform: scale(0.95); /* Réduction au clic */
}








/* Correction des interactions avec le contenu */
body > *:not(canvas) {
 
    z-index: 200000; /* Place les autres éléments au-dessus des canevas */
    pointer-events: auto; /* Assure que ces éléments restent cliquables */
}