.banner{
    padding: 30px 0;
    text-align: center;
}
.banner h1
{
    padding: 0 20px;
	font-family:"Playfair Display";
	font-size: 40px;
}

.img-container{
	margin: auto;
	width: 100%;
	display: flex;
	justify-content: center;
	background-color: rgb(27, 27, 27);
}
.img-container img{
	margin: auto;
	max-height: 70vh;
    max-width: 95vw;
	padding: 20px;
}
.product{
	width: 100%;
	padding: 80px;
}

.btns-container{
	display: flex;
	margin: 50px 0;
	justify-content: space-around;
	align-items: center;
	

}
.btns-container h1{
	margin: 0 50px;
	font-family: "Playfair Display";
}

.btns-container a 
{
	text-decoration: none;
	color: white;
}
.btns-container .btn * {
  position: relative;
  z-index: 1;
}

.btns-container .btn{
	padding: 10px 20px;
	background-color:blueviolet;
	margin: 0 50px;
	position: relative;
}
.sold-btn{
	background-color: #d9534f;
}
.btns-container .btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  background-color: #d4a373;

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.4s ease; /* 👈 ici */
}
.btns-container a:hover .btn::before{
  transform: scaleX(1);
}

.btns-container .sold-btn{
	background-color: #d4a373;
}

table {
    table-layout: fixed;
    width: 90vw;
    max-width: 1200px;
    padding: 50px;
    margin: auto;
    overflow: hidden; /* 👈 */
}

/* th {
    text-align: start;
    width: 20%;
    border-bottom: 1px white solid;
    padding: 20px 20px;
    word-break: break-word; 
} */

/* th {
    padding: 20px 0;
    white-space: normal;
    overflow-wrap: anywhere; 
    word-break: break-all;   
    min-width: 0;            
    max-width: 0;            
} */
.dimensions-th{
	min-width: 120px;
}


/* TABLE MOBILE VERTICAL */
@media(max-width:768px){
    table, thead, tbody, th, td, tr {
        display: block;
        width: 100%;
    }

    .product{
        padding: 15px;
    }

    .btns-container .btn
    {
        margin: 10px;
    }

    table{
        padding: 50px 0;
        width: 90%;
    }

    thead tr {
        display: none; /* on cache l’en-tête classique */
    }

    tr {
        margin-bottom: 20px;
        border-bottom: 1px solid #d4a373; /* séparer les “blocs” */
        padding-bottom: 10px;
    }

    td {
        position: relative;
        padding: 0 0 10px 50%; /* 👈 réduit le padding-left */
        text-align: left;
        border: none;
        margin-bottom: 10px;
        width: 100%;
    }

    td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 0;
        font-weight: bold;
        white-space: normal;     /* 👈 était nowrap, c'est la cause */
        overflow-wrap: break-word;
        width: 40%;              /* 👈 un peu plus large pour les labels longs */
    }
}