.logo {
  display: block;      /* évite les espaces indésirables autour de l'image */
  height: 50px;        /* taille du logo */
  width: auto;         /* garde les proportions */
  margin: 0;           /* retire tout écart autour */
  object-fit: contain; /* garde une belle proportion même si le conteneur change */
  align-self: flex-start; /* l’aligne bien en haut à gauche si ton header est en flex */
}










/* --- Overlay --- */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0; visibility: hidden;
  transition: .25s ease;
  z-index: 1000;
}

/* --- Tiroir --- */
.drawer {
  position: fixed; top:0; right:0; height:100vh; width:min(420px, 92vw);
  background:#fff; box-shadow: -12px 0 24px rgba(0,0,0,.1);
  transform: translateX(100%); transition: transform .28s ease;
  display:flex; flex-direction:column; z-index:1001;
  border-left: 1px solid #eee;
   height: 100dvh;
  
}

.drawer-footer {
  padding-bottom: env(safe-area-inset-bottom, 0); /* prend en compte l'encoche / barre iPhone */
}



.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1rem; border-bottom:1px solid #eee; }
.drawer-header h3 { margin:0; font-size:1.1rem; }
.drawer-close { font-size:1.4rem; background:transparent; border:none; cursor:pointer; line-height:1; padding:.25rem .5rem; }

.drawer-content { padding:1rem; overflow:auto; flex:1; }
.cart-line { display:grid; grid-template-columns: 64px 1fr auto; gap:.75rem; align-items:center; padding:.5rem 0; border-bottom:1px solid #f3f3f3; }
.cart-line img { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid #eee; }
.cart-line .title { font-weight:600; margin-bottom:.15rem; }
.cart-line .meta { color:#666; font-size:.9rem; }
.cart-line .price { font-weight:700; }

.drawer-footer { border-top:1px solid #eee; padding:1rem; }
.drawer-total { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.drawer-checkout { display:block; text-align:center; width:100%; }
.drawer-checkout {  background: #0072ff !important;
  color: #fff !important;
  text-decoration: none !important; }

/* --- États ouverts --- */
.drawer.is-open { transform: translateX(0); }
.drawer-overlay.is-open { opacity:1; visibility:visible; }

/* Petite anim à l’apparition des tailles */
.size-options { animation: fadeIn .18s ease; }
@keyframes fadeIn { from {opacity:0; transform: translateY(-2px);} to {opacity:1; transform:none;} }







/* Badge rouge compteur */
.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: none; /* caché tant qu’il n’y a pas d’articles */
  align-items: center;
  justify-content: center;
}


.cart-icon {
  width: 28px;        /* taille de ton icône */
  height: auto;       /* garde les proportions */
  display: block;
}










/* Style carte produit classique */
.product-card-classic {
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.1);
  overflow:hidden;
  max-width:360px;
  margin:auto;
  text-align:center;
  display:flex;
  flex-direction:column;
}
.product-card-classic img {
  width:100%;
  height:auto;
  display:block;
  background:#f5f5f5;
}
.pc-content {
  padding:16px;
}
.pc-content h2 {
  margin:0;
  font-size:1.2rem;
  font-weight:800;
  color:#111;
}
.pc-content .subtitle {
  margin:6px 0;
  font-size:0.95rem;
  color:#666;
}
.pc-content .price {
  margin:8px 0 16px;
  font-weight:900;
  font-size:1.2rem;
  color:#222; 
}



/* Page produit */
.product-page{
  display:grid; gap:32px; margin-top:24px;
}
@media (min-width: 768px){
  .product-page{grid-template-columns: 1fr 1fr; align-items:start;}
}
.gallery img{
  width:100%; border-radius:20px; box-shadow:var(--shadow);
}
.details h1{margin:0 0 6px}
.details .subtitle{color:var(--muted);margin:0 0 8px}
.details .price {
  font-size: 1.6rem;
  color: #222;
  font-weight: 900;
  margin: 0 0 16px;
}
.buy-form{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.buy-form select{padding:10px;border-radius:8px;border:1px solid #ccc;font-size:1rem}
.desc{line-height:1.5;margin-bottom:20px}
.shipping h3{margin:0 0 8px}
.shipping ul{margin:0;padding-left:18px;line-height:1.5}







/* Carousel produit */
.carousel {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  overflow: hidden;
}
.carousel-track {
  display: flex;
  border-radius: 12px;
}
.carousel-track > img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 40px;
  block-size: 40px;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 5;
}
.carousel-btn.prev { left: 8px; }
.carousel-btn.next { right: 8px; }
.carousel-btn:hover { background: rgba(0,0,0,.75); }
.carousel-btn:disabled { opacity: .35; cursor: not-allowed; }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.carousel-dots button {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 999px;
  border: none;
  background: #cfd4da;
  cursor: pointer;
}
.carousel-dots button[aria-selected="true"] { background: #0b2344; }
@media (hover: none) {
  .carousel-btn { inline-size: 36px; block-size: 36px; font-size: 20px; }
}
.media-clip {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}
.tt-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}













.size-options {
  display: flex;
  gap: .5rem;
  margin: .75rem 0;
}

.size-btn {
  padding: .6rem 1rem;
  border: 1px solid #ccc;
  border-radius: .5rem;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}



.size-btn.active {
  background: #000;
  color: #fff;
  border-color: #000;
}




.btn.primary {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1.2rem 1rem;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 0 0 0.75rem 0.75rem; /* arrondi doux en bas */
  background-color: #000 !important;  /* noir plein */
  color: #fff;            /* texte blanc */
  cursor: pointer;
  transition: all 0.2s ease;
}


.btn.primary:active {
  background-color: #000;
  transform: translateY(0);
}

.btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}









.btn.primaryproduit {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem;              /* ↑ plus de hauteur */
  font-size: 15px;            /* ↑ texte plus grand */
  border: 1.1px solid #000;       /* ↑ contour plus épais */
  border-radius: 0.75rem;       /* ↑ arrondi plus doux */
  background-color: transparent;
  text-transform: uppercase;       /* Met tout en majuscules */
  letter-spacing: 0.08em;          /* Espacement entre les lettres */
  font-weight: 370;                /* Texte plus dense */
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif; /* police propre et moderne */
  color: #000;                  /* 🖤 texte noir */
}

.btn.primaryproduit:active {
  transform: translateY(0);     /* effet clic */
}

.btn.primaryproduit:disabled {
  opacity: .5;
  cursor: not-allowed;
}








.size-error {
  color: #e63946;
  font-size: 0.9rem;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}


.stripe-btn {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  text-align: center;
  padding: 1rem 1.2rem;
  border: none;
  border-radius: 0.75rem;
    background-color: #0072ff;
  color: #fff;
  font-size: 1.05rem;
  text-decoration: none;
  letter-spacing: .3px;
  box-shadow: 0 6px 16px rgba(0, 114, 255, 0.35);
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.08em;          /* Espacement entre les lettres */
  font-weight: 200;                /* Texte plus dense */
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif; /* police propre et moderne */

    margin-top: 7px;       /* un peu plus proche du bouton du dessus */
  margin-bottom: 15px;   /* espace avant l’accordéon */
}


.stripe-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 114, 255, 0.3);
}

.stripe-btn .stripe-logo {
  height: 20px;
  filter: brightness(0) invert(1);
}

.stripe-btn .cards {
  display: flex;
  gap: 4px;
  margin-left: .3rem;
}

.stripe-btn .cards img {
  height: 18px;
  filter: brightness(0) invert(1);
  opacity: .9;
}









/* Accordéon */
.info-accordion {
  margin-top: 16px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.info-accordion details + details {
  border-top: 1px solid #eee;
}

.info-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-weight: 700;
  user-select: none;
}

.info-accordion summary::-webkit-details-marker { display: none; }

.info-accordion summary svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  transform: rotate(0deg);
  transition: transform .2s ease;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.info-accordion details[open] summary svg {
  transform: rotate(180deg);
}

.info-accordion .panel {
  padding: 0 16px 14px 16px;
  color: #333;
  line-height: 1.5;
}

.info-accordion .panel ul { margin: 6px 0 0; padding-left: 18px; }
.info-accordion .panel p { margin: 6px 0 0; }

/* ✅ Image du guide des tailles */
.size-guide-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,.05);
}