/* ═══════════════════════════════════════════════════
   JÀNG — produit.css
   Styles propres à la fiche produit.
   Se charge APRÈS styles.css, qui fournit les variables,
   les boutons, le panier, le header et le footer.
   ═══════════════════════════════════════════════════ */

/* ─── Fil d'ariane ─────────────────────────────── */
/* Déplacé dans jang.css : le fil apparaît sur le catalogue, les listes
   scolaires et les packs, alors que cette feuille n'est chargée que sur
   la fiche produit et le détail d'un pack. */

/* ─── Galerie ──────────────────────────────────── */

.galerie { display: flex; flex-direction: column-reverse; gap: 12px; min-width: 0; }
@media (min-width: 640px) { .galerie { flex-direction: row; } }

/* La bande de vignettes défile dans son propre cadre. min-width: 0 est
   indispensable sur un enfant de conteneur flex : sans lui, la bande refuse
   de rétrécir sous la largeur de son contenu et fait déborder la page
   entière dès qu'un produit a plus de quelques images. */
.galerie-vignettes {
  display: flex;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--gris-line) transparent;
}
.galerie-vignettes .vignette { scroll-snap-align: start; }

@media (min-width: 640px) {
  .galerie-vignettes {
    flex-direction: column;
    overflow-x: visible;
    /* La colonne ne dépasse jamais la hauteur de l'image principale :
       au-delà, elle défile verticalement plutôt que d'allonger la page. */
    overflow-y: auto;
    max-height: min(560px, 100%);
    padding: 0 4px 0 0;
    flex-shrink: 0;
    scroll-snap-type: y proximity;
  }
}

/* Barre de défilement discrète, dans la charte */
.galerie-vignettes::-webkit-scrollbar { width: 6px; height: 6px; }
.galerie-vignettes::-webkit-scrollbar-track { background: transparent; }
.galerie-vignettes::-webkit-scrollbar-thumb {
  background: var(--gris-line);
  border-radius: 999px;
}
.galerie-vignettes::-webkit-scrollbar-thumb:hover { background: var(--texte-soft); }

.vignette {
  width: 74px; height: 74px;
  flex-shrink: 0;
  border-radius: var(--rayon-s);
  border: 2px solid var(--gris-line);
  overflow: hidden;
  background: var(--gris);
  cursor: pointer;
  padding: 0;
  transition: border-color .18s ease;
}
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette:hover { border-color: var(--encre); }
.vignette.est-active { border-color: var(--encre); box-shadow: 0 0 0 2px var(--encre-light); }

.galerie-principale {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--gris);
  border: 2px solid var(--gris-line);
}
.galerie-principale img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .22s ease;
}
.galerie-principale.est-en-transition img { opacity: .35; }
.galerie-principale .produit-tag { top: 14px; left: 14px; }

/* ─── Bloc achat ───────────────────────────────── */
/* Les étoiles, la prose et la répartition des notes ont été déplacées dans
   jang.css : elles servent aussi au formulaire d'avis et aux pages
   statiques, qui ne chargent pas cette feuille. */

.ref {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-soft);
}

/* Prix */

.bloc-prix {
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--encre-light);
  border-radius: var(--rayon);
}
.prix-gros {
  font-family: 'Lilita One', sans-serif;
  font-size: clamp(2.2rem, 5vw, 2.9rem);
  line-height: 1;
  color: var(--encre);
}
.etiquette-eco {
  display: inline-block;
  background: var(--stock);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.prix-mention { font-size: 15px; color: var(--texte-soft); margin-top: 6px; }

/* Variantes */

.variante { margin-top: 24px; }
.variante-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-soft);
  margin-bottom: 10px;
}
.variante-choix { display: flex; flex-wrap: wrap; gap: 9px; }
.variante-valeur { font-size: 15px; font-weight: 600; margin-top: 9px; }

.choix {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--rayon-s);
  border: 2px solid var(--gris-line);
  background: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--texte);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.choix:hover { border-color: var(--encre); }
.choix.est-actif { border-color: var(--encre); background: var(--encre-light); color: var(--encre); }

.pastille-couleur {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c, #ccc);
  border: 2px solid var(--gris-line);
  cursor: pointer;
  padding: 0;
  transition: box-shadow .18s ease, transform .14s ease;
}
.pastille-couleur:hover { transform: scale(1.06); }
.pastille-couleur.est-actif { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--encre); }

/* Conditionnements */

.conditionnements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
@media (max-width: 420px) { .conditionnements { grid-template-columns: 1fr; } }

.cond {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 14px 13px 13px;
  border-radius: var(--rayon-s);
  border: 2px solid var(--gris-line);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.cond:hover { border-color: var(--encre); }
.cond.est-actif { border-color: var(--encre); background: var(--encre-light); }
.cond:disabled { opacity: .45; cursor: not-allowed; }

.cond-eco {
  position: absolute;
  top: -9px; right: 9px;
  background: var(--stock);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.cond-nom { font-size: 14px; font-weight: 700; line-height: 1.25; }
.cond-prix { font-family: 'Lilita One', sans-serif; font-size: 19px; line-height: 1.15; color: var(--encre); }
.cond-unit { font-size: 12.5px; color: var(--texte-soft); line-height: 1.3; }

/* Disponibilité */

.dispo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--stock);
}
.dispo-point { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Quantité + ajout */

.zone-achat { display: flex; gap: 10px; margin-top: 18px; }

.compteur {
  display: flex;
  align-items: center;
  border: 2px solid var(--gris-line);
  border-radius: var(--rayon-s);
  overflow: hidden;
  flex-shrink: 0;
}
.compteur-btn {
  width: 46px; height: 48px;
  background: #fff;
  border: 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--encre);
  cursor: pointer;
  transition: background-color .16s ease;
}
.compteur-btn:hover { background: var(--encre-light); }
.compteur-champ {
  width: 48px; height: 48px;
  border: 0;
  border-left: 2px solid var(--gris-line);
  border-right: 2px solid var(--gris-line);
  text-align: center;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--texte);
  -moz-appearance: textfield;
}
.compteur-champ::-webkit-outer-spin-button,
.compteur-champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.compteur-champ:focus { outline: none; background: var(--encre-light); }

.total-ligne { margin-top: 12px; font-size: 15.5px; color: var(--texte-soft); }
.total-ligne strong { color: var(--texte); font-weight: 700; }

/* Réassurance */

.reassurance { margin-top: 26px; border-top: 2px solid var(--gris-line); padding-top: 20px; }
.reassurance li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 11px 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--texte-soft);
}
.reassurance svg { width: 22px; height: 22px; color: var(--encre); flex-shrink: 0; margin-top: 2px; }
.reassurance strong { color: var(--texte); font-weight: 700; }

/* ─── Onglets ──────────────────────────────────── */

.onglets {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--gris-line);
  overflow-x: auto;
}
.onglet {
  position: relative;
  padding: 15px 20px;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--texte-soft);
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease;
}
.onglet:hover { color: var(--texte); }
.onglet.est-actif { color: var(--encre); }
.onglet.est-actif::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -2px;
  height: 3px;
  background: var(--crayon);
  border-radius: 2px;
}

.panneaux { padding-top: 30px; }

.caracs {
  max-width: 720px;
  border: 2px solid var(--gris-line);
  border-radius: var(--rayon);
  overflow: hidden;
}
.caracs > div {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--gris-line);
  font-size: 15.5px;
}
.caracs > div:first-child { border-top: 0; }
.caracs > div:nth-child(even) { background: #FBFCFD; }
.caracs dt { font-weight: 700; }
.caracs dd { color: var(--texte-soft); }
@media (max-width: 520px) {
  .caracs > div { grid-template-columns: 1fr; gap: 3px; }
}

/* ─── Lot groupé ───────────────────────────────── */

.lot-groupe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  padding: 22px 24px;
  background: #fff;
  border: 2px dashed var(--encre);
  border-radius: var(--rayon);
}
.lot-groupe > div:first-child { flex: 1 1 260px; }
.lot-titre { font-size: 18px; font-weight: 700; line-height: 1.3; }
.lot-det { font-size: 15px; color: var(--texte-soft); margin-top: 5px; }
.lot-prix-zone { display: flex; align-items: baseline; gap: 12px; }
.lot-barre { font-size: 17px; color: var(--texte-soft); text-decoration: line-through; }
.lot-prix { font-family: 'Lilita One', sans-serif; font-size: 30px; line-height: 1; color: var(--encre); }

/* ─── Avis ─────────────────────────────────────── */

.avis-carte {
  background: #fff;
  border: 2px solid var(--gris-line);
  border-radius: var(--rayon);
  padding: 22px 20px;
}
.avis-titre { font-size: 17px; font-weight: 700; line-height: 1.35; margin-top: 12px; }
.avis-corps { font-size: 15.5px; line-height: 1.75; color: var(--texte-soft); margin-top: 10px; }
.avis-pied { font-size: 13.5px; font-weight: 600; color: var(--texte-soft); margin-top: 16px; }

.reponse-marchand {
  margin-top: 20px;
  padding: 20px 22px;
  background: var(--encre-light);
  border-radius: var(--rayon);
}
.reponse-tete {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre);
  margin-bottom: 9px;
}
.reponse-marchand p:last-child { font-size: 15.5px; line-height: 1.75; color: var(--texte-soft); }

/* ─── Barre d'achat mobile ─────────────────────── */

.barre-achat {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 2px solid var(--gris-line);
  box-shadow: 0 -4px 18px rgba(16, 27, 46, .07);
}
.barre-achat-prix { flex-shrink: 0; }
.barre-achat-montant { font-family: 'Lilita One', sans-serif; font-size: 24px; line-height: 1.05; color: var(--encre); }
.barre-achat-mention { font-size: 12.5px; color: var(--texte-soft); }
.barre-achat .btn-crayon { min-height: 48px; padding: 12px 18px; font-size: 16px; }

@media (max-width: 1023px) { body { padding-bottom: 76px; } }