/* --- TOGGLE OCTO-STYLE --- */
        .controls-container {
            margin-bottom: 30px;
        }

        .toggle-wrapper {
            position: relative;
            display: flex;
            background: #e0e0e0;
            border-radius: 21px;
            padding: 4px;
            width: 260px;
            height: 42px;
        }

        .toggle-wrapper input[type="radio"] {
            display: none;
        }

        .toggle-bg {
            position: absolute;
            top: 4px;
            left: 4px;
            width: calc(50% - 4px);
            color: var(--color-black);
			background: var(--color-white);	
            border-radius: 17px;
			height:34px;
            transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
            z-index: 1;
        }

        .toggle-label {
            flex: 1;
            z-index: 2;
            text-align: center;
            line-height: 34px;
            cursor: pointer;
            font-size: var(--font-size-sm);	
            transition: color 0.3s;
        }

        #radio-minimal:checked ~ .toggle-bg { transform: translateX(0%); }
        #radio-extended:checked ~ .toggle-bg { transform: translateX(100%); }
        #radio-minimal:checked ~ label[for="radio-minimal"] { color: #000; }
        #radio-extended:checked ~ label[for="radio-extended"] { color: #000; }
        
        
 		.view-section {
            display: none; /* Cacher par défaut */
        }
        
        .view-section.active {
            display: block;
            animation: fadeIn 0.3s ease-out;
        }
        


.ldb-line-header{
	height:var(--spacing-md)!important;
}    
.ldb-line-small{
	height:var(--spacing-sm)!important;
} 

    
/* --- MINIMAL STYLE --- */   
       
        
        
.ldb-large-screen .ldb-line-minimal{
	display: none;
 }


.ldb-phone-screen .ldb-line-minimal{
	display: grid;
	grid-template-columns: 1fr 5fr 1fr 4fr 2fr;
	padding: 2px 0px;
	border-bottom: var(--border-thin);
	align-items: start;
	justify-items:start;
	position: relative;
	font-size: var(--font-size-md-phone);
	height:	calc((var(--spacing-md) * 2) + 5px);
}


.ldb-phone-screen .ldb-line-minimal:hover{
	background-color: var(--color-gray-100);
}


.ldb-line-height{
	height:var(--spacing-md)!important;
	line-height: var(--spacing-md)!important;
}

.ldb-phone-screen .ldb-line-minimal .h{
  box-sizing: border-box;
  height: 48px;
}
.ldb-phone-screen .ldb-line-minimal .r-90{
  position: absolute;
  top: 0px;
  left: 1px;
  width:48px;
  transform: translate(-40%, +40%) rotate(-90deg);
  white-space: nowrap;
}



.ldb-phone-screen .ldb-line-minimal > *:last-child {
     justify-self: end !important; /* Force l'alignement à droite */
}




/* Tablet */
@media (min-width: 768px) {

	
	.ldb-phone-screen .ldb-line-minimal{
	display: none;
 	}

	.ldb-large-screen .ldb-line-minimal:hover{
		background-color: var(--color-gray-100);
	}

	.ldb-large-screen .ldb-line-minimal{
	display: grid;
	grid-template-columns: 2fr 8fr 1fr 1fr 1fr 4fr 4fr 1fr 4fr;
	padding: 2px 0px;
	border-bottom: var(--border-thin);
	align-items: center;
	justify-items:start;
	position: relative;
	font-size: var(--font-size-md);
	height:calc(var(--spacing-md) + 5px);
	}
	
	.ldb-large-screen .ldb-line-minimal > *:last-child {
	     justify-self: end !important; /* Force l'alignement à droite */
	}

}


/* Large screens */
@media (min-width: 1200px) {

}






/* --- EXTENDED STYLE --- */   
       

.ldb-large-screen .ldb-line-extended{
	display: none;
 }


.ldb-phone-screen .ldb-line-extended{
	display: grid;
	grid-template-columns: 0.7fr 2.6fr 4fr 3.5fr;
	padding: 2px 0px;
	border-bottom: var(--border-thin);
	align-items: start;
	justify-items:start;
	position: relative;
	font-size: var(--font-size-md-phone);
	height:	calc((var(--spacing-md) * 3) + 5px);
}





.ldb-3x3{
	display:block;
	box-sizing: border-box;
	height:calc(var(--spacing-md) * 3);
	width:calc(var(--spacing-md) * 3);
}


.ldb-line-extended .h{
  box-sizing: border-box;
  height: 72px;
}
.ldb-line-extended .r-90{
  position: absolute;
  top: 0px;
  left: 1px;
  width:72px;
  transform: translate(-40%, +70%) rotate(-90deg);
  white-space: nowrap;
}



.ldb-phone-screen .ldb-line-extended > *:last-child {
     justify-self: end !important; /* Force l'alignement à droite */
}




/* Tablet */
@media (min-width: 768px) {

	
	.ldb-phone-screen .ldb-line-extended{
	display: none;
 	}
 	
	
	.ldb-large-screen .ldb-line-extended{
	display: grid;
	grid-template-columns: 1fr 2fr 4fr 4fr 2fr;
	padding: 2px 0px;
	border-bottom: var(--border-thin);
	align-items: start;
	justify-items:start;
	position: relative;
	font-size: var(--font-size-md);
	height:	calc((var(--spacing-md) * 3) + 5px);
	}
	
	.ldb-large-screen .ldb-line-extended > *:last-child {
	     justify-self: end !important; /* Force l'alignement à droite */
	}

}


/* Large screens */
@media (min-width: 1200px) {

}




/* button */

.btn-ldb{
	border-radius: 17px;
	height:24px;
	line-height: 24px;
	inset: 0;
	transition: box-shadow .2s linear;
	cursor: pointer;
	padding: 0 .8em;
	border-radius: 12px;
	min-width: 2em;
	text-align: center;
  	align-items: center;
  	display: inline-flex;
  	position: relative;
  	white-space: nowrap;
	box-sizing: border-box;
	color: var(--color-white);
	background: var(--color-black);
}

.btn-ldb .globe{
	line-height: 20px;
	white-space: nowrap;
	height: 24px;
	min-width: 24px;
	overflow: visible;
	padding: 4px;
	width: 30px;
	max-height: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-left: -0.7em;
}

.btn-ldb .globe img{
	height:100%;
}

.btn-ldb .globe-label{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
	text-align: center;
	margin-right:5px;
}




/* pill */

.ldb-pill {
	border-radius: 11px;
	text-decoration: none;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
}




/* dot */

.ldb-dot {
	width: 12px!important;
	height: 12px!important;
	border-radius: 50%;
	display: inline-block;
	border: 1px solid var(--ink);
}

.ldb-dot-available{
	background: var(--color-brand-green);
}


.ldb-dot-sold{
	background: var(--color-brand-red);
}

.ldb-dot-booked{
	background: var(--color-brand-gray);
}

.ldb-dot-in-production{
    background: var(--color-black);
    border-radius: 50%;
    
    /* The Animation */
    animation: grow-pulse 2s infinite ease-in-out;

}

@keyframes grow-pulse {
    0% {
      transform: scale(0.5); /* Start at 50% size */
      opacity: 0.5;          /* Slightly transparent */
    }
    50% {
      transform: scale(1);   /* Grow to 100% size */
      opacity: 1;            /* Fully visible */
    }
    100% {
      transform: scale(0.5); /* Back to 50% size */
      opacity: 0.5;
    }
}