body {

  background: radial-gradient(circle at center, #123e45 0%, #0b262c 100%);

  color: #fff;

  font-family: "Pirata One", serif;

}

a {
    color: #fff;
    text-decoration: none;
    background-color: transparent;
}

/* --- Coffre principal --- */

.pirate-panier {

  max-width: 1000px;

  margin: 60px auto;

  background: rgba(12, 46, 51, 0.9);

  border: 2px solid #d4af37;

  border-radius: 15px;

  box-shadow: 0 0 20px rgba(0,0,0,0.5);

  padding: 30px;

}



.pirate-panier h1 {

  text-align: center;

  color: #f8c42d;

  font-size: 38px;

  margin-bottom: 30px;

  text-shadow: 2px 2px 6px #000;

}



.pirate-table {

  width: 100%;

  border-collapse: collapse;

}



.pirate-table th {

  color: #ffd700;

  text-align: left;

  padding: 12px;

  border-bottom: 2px solid #d4af37;

  font-size: 18px;

}



.pirate-table td {

  padding: 12px;

  border-bottom: 1px solid rgba(212,175,55,0.4);

  vertical-align: middle;

}



.pirate-table img {

  width: 70px;

  height: 70px;

  object-fit: cover;

  border-radius: 8px;

  border: 1px solid #d4af37;

}



.qty-input {

  width: 60px;

  padding: 4px;

  border: 1px solid #d4af37;

  border-radius: 6px;

  text-align: center;

  font-weight: bold;

  background: #0c2e33;

  color: #f8c42d;

}



.remove-btn {

  background: none;

  border: none;

  color: #ff5050;

  font-size: 22px;

  cursor: pointer;

  transition: transform 0.2s;

}

.remove-btn:hover {

  transform: scale(1.2);

}



.pirate-total {

  text-align: right;

  font-size: 22px;

  font-weight: bold;

  color: #ffd700;

  margin-top: 20px;

  text-shadow: 0 0 8px #000;

}



.btn-clear {

  display: inline-block;

  background: #a00;

  color: #fff;

  font-weight: bold;

  border-radius: 8px;

  padding: 10px 20px;

  margin-top: 20px;

  border: none;

  cursor: pointer;

  transition: 0.3s;

}

.btn-clear:hover {

  background: #d00;

}



.empty-message {

  text-align: center;

  color: #ccc;

  font-size: 20px;

  margin: 80px 0;

}



/* --- Bouton global “Je valide ma commande” --- */

.pirate-validate-wrapper {

  text-align: center;

  margin: 80px 0 120px;

  display: none; /* 🪙 caché par défaut */

}



#btn-validate-global {

  position: relative;

  overflow: hidden;

  background: linear-gradient(145deg, #c59b00, #8a6e00);

  color: #fff;

  font-size: 28px;

  font-family: "Pirata One", serif;

  text-shadow: 2px 2px 5px #000;

  border: 3px solid #d4af37;

  border-radius: 12px;

  padding: 18px 50px;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 5px 20px rgba(0,0,0,0.6), inset 0 0 10px rgba(255,255,255,0.25);

}



/* 🌟 Reflet doré animé */

#btn-validate-global::after {

  content: "";

  position: absolute;

  top: 0;

  left: -150%;

  width: 50%;

  height: 100%;

  background: linear-gradient(120deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.3) 100%);

  transform: skewX(-25deg);

  animation: goldshine 4s infinite;

}



@keyframes goldshine {

  0% { left: -150%; }

  50% { left: 150%; }

  100% { left: 150%; }

}



#btn-validate-global:hover {

  background: linear-gradient(145deg, #e5bb00, #a47a00);

  transform: translateY(-4px) scale(1.05);

  box-shadow: 0 8px 25px rgba(248,196,45,0.8);

}



#btn-validate-global:active {

  transform: scale(0.97);

}




/* ============================= */
/* 📱 TABLETTE */
/* ============================= */
@media (max-width: 1000px) {

  .pirate-panier {
    margin: 80px 20px;
    padding: 20px;
  }

  .pirate-panier h1 {
    font-size: 30px;
  }

}

/* ============================= */
/* 📱 MOBILE */
/* ============================= */

@media (max-width:700px){

.pirate-panier{
    margin:80px 10px;
    padding:15px;
}

.pirate-panier h1{
    font-size:32px;
    margin-bottom:20px;
}

.pirate-table{
    display:block;
}

.pirate-table thead{
    display:none;
}

.pirate-table tbody{
    display:block;
}

.pirate-table tr{
    display:block;
    background:#12343a;
    border:2px solid #d4af37;
    border-radius:15px;
    padding:15px;
    margin-bottom:20px;
}

.pirate-table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border:none;
    font-size:17px;
}

.pirate-table td::before{
    content:attr(data-label);
    color:#f8c42d;
    font-weight:bold;
}

.pirate-table td:first-child{
    display:block;
    text-align:center;
}

.pirate-table td:first-child::before{
    display:none;
}

.pirate-table img{

    width:100%;

    height:auto;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:15px;

    display:block;

    margin:0 auto 20px;

    border:2px solid #d4af37;

}

.qty-input{
    width:70px;
    text-align:center;
}

.remove-btn{
    font-size:28px;
}

.pirate-total{
    text-align:center;
    margin-top:30px;
    font-size:28px;
}

.btn-clear{
    width:100%;
    margin-top:20px;
}

#btn-validate-global{
    width:100%;
    font-size:22px;
    padding:16px;
}

}