/* =============================================================
   FICHE PRODUIT
   Chargée uniquement sur /produit/<slug>/ (voir inc/assets.php).
   Aucune valeur en dur : uniquement des tokens.
   ============================================================= */

/* =============================================================
   1. GABARIT — galerie à gauche, colonne d'achat à droite
   ============================================================= */
.pdp__top {
  display: grid;
  gap: clamp(var(--s-6), 4vw, var(--s-9));
  align-items: start;
}

@media (min-width: 62rem) {
  .pdp__top {
    /* La photo mène : elle prend un peu plus que la moitié. */
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  }
  /* La galerie suit la lecture de la colonne d'achat, qui est plus longue. */
  .pgal {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
  }
}

/* =============================================================
   2. GALERIE
   Scène à ratio fixe : changer de photo ne décale jamais la page.
   ============================================================= */
.pgal {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 42rem;
  width: 100%;
}

.pgal__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Les photos sont détourées sur fond blanc : `contain`, jamais de rognage. */
.pgal__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(var(--s-4), 3vw, var(--s-7));
  transition: transform var(--dur-3) var(--ease-out);
}

/* Indice d'agrandissement : affordance à la souris, invisible ailleurs.
   Déclaré AVANT la requête média qui l'affiche — à spécificité égale,
   c'est l'ordre du fichier qui tranche. */
.pgal__hint {
  display: none;
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  transition: opacity var(--dur-2) var(--ease);
}

/*
   Zoom au survol, en CSS seul : app.js ne pilote aucun point d'origine et
   n'est pas modifiable. Un `scale` sur `transform` reste composité — donc
   à 60 fps — et ne coûte aucun recalcul de mise en page.
   Réservé au pointeur fin sur grand écran : sur tactile, `:hover` colle.
*/
@media (hover: hover) and (pointer: fine) and (min-width: 62rem) {
  .pgal__stage:hover .pgal__img,
  .pgal__stage:focus-within .pgal__img { transform: scale(1.45); }
  .pgal__hint { display: inline-flex; }
  /* L'indice s'efface dès qu'il a été compris : le zoom est en cours. */
  .pgal__stage:hover .pgal__hint { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pgal__stage:hover .pgal__img,
  .pgal__stage:focus-within .pgal__img { transform: none; }
}

/* Photo absente : un état conçu, pas un cadre gris muet. */
.pgal__none {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: var(--t-xs);
  text-align: center;
}

/* ---- Miniatures (absentes quand le produit n'a qu'une photo) ------ */
.pgal__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pgal__thumb-item { margin: 0; }

.pgal__thumb {
  display: block;
  /* 4,5 rem, exprimé sur l'échelle d'espacement : aucune valeur en dur. */
  width: calc(var(--s-9) + var(--s-2));
  height: calc(var(--s-9) + var(--s-2));
  padding: var(--s-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.pgal__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pgal__thumb:hover { border-color: var(--primary-line); }
.pgal__thumb[aria-current="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

/* La zone tactile doit rester ≥ 44 px, miniature comprise. */
@media (max-width: 30rem) {
  .pgal__thumb { width: var(--tap); height: var(--tap); }
}

/* =============================================================
   3. COLONNE D'ACHAT
   ============================================================= */
.buybox > * + * { margin-top: var(--s-5); }

.buybox__cat {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  min-height: var(--tap);
}
.buybox__cat .ico { transition: transform var(--dur-2) var(--ease); }
.buybox__cat:hover .ico { transform: translateX(-3px); }

/* Un nom de produit n'est pas un titre de héros : il garde le pas du texte. */
.buybox__title {
  font-size: var(--t-xl);
  /* Le fil d'Ariane de catégorie appartient au titre : il colle au titre. */
  margin-top: var(--s-2);
}

.buybox__lead {
  color: var(--text-muted);
  font-size: var(--t-lg);
  line-height: var(--lh-base);
  max-width: 52ch;
}

.buybox__ident {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  padding-block: var(--s-4);
  border-block: 1px solid var(--border-soft);
}
.buybox__ident .badge { margin: 0; }

.buybox__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin: 0;
}
.buybox__meta-row { display: flex; align-items: baseline; gap: var(--s-2); }
.buybox__meta dt {
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.buybox__meta dd {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
}

.buybox__price .price { font-size: var(--t-xl); }
/* Un « Prix sur demande » n'est pas un prix : il ne doit pas en avoir le
   poids typographique. Cette règle passe APRÈS celle du prix réel : à
   spécificité égale, c'est la dernière qui gagne. */
.buybox__price .price--ask { font-size: var(--t-base); }

/* ---- Formulaire d'ajout ------------------------------------------- */
.buybox__form { display: grid; gap: var(--s-4); }
.buybox__actions { display: grid; gap: var(--s-3); }

@media (min-width: 30rem) {
  /*
     `display: contents` sur le groupe d'actions : ses deux boutons
     deviennent des cases de la même grille que le sélecteur de quantité.
     Résultat : quantité + bouton principal sur la première ligne, bouton
     secondaire sur toute la largeur en dessous — sans balise en plus.
  */
  .buybox__form {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
  }
  .buybox__actions { display: contents; }
  .buybox__actions > :last-child { grid-column: 1 / -1; }
}

.buybox__qty { gap: var(--s-2); }

/* ---- Réassurances -------------------------------------------------- */
.buybox__trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--s-3) var(--s-5);
  list-style: none;
  margin: 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--border-soft);
}
.buybox__trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--text-muted);
}
.buybox__trust-item .ico { color: var(--primary); margin-top: 1px; }
/*
   Le lien de réassurance (WhatsApp ou téléphone) est une VRAIE cible tactile,
   pas un lien de paragraphe : sa hauteur de ligne ne fait que 20 px. On lui
   étend la zone de contact à var(--tap) par du remplissage, annulé par une
   marge négative égale — la zone touchable grandit, la mise en page ne bouge
   pas d'un pixel.
*/
.buybox__trust-item a {
  display: inline-block;
  color: var(--text-muted);
  padding-block: var(--s-3);
  margin-block: calc(var(--s-3) * -1);
}
.buybox__trust-item a:hover { color: var(--primary); }

/* =============================================================
   4. DÉTAILS — accordéon sur téléphone, onglets sur grand écran
   Un seul balisage, aucune seconde ligne de JavaScript.
   ============================================================= */
.pdet__panel {
  color: var(--text);
  /* Téléphone : accordéon classique. Le filet ne souligne que le visible —
     un bouton replié porte le sien, un panneau ouvert porte le sien. */
  border-bottom: 1px solid var(--border-soft);
}
.pdet__panel > * + * { margin-top: var(--s-4); }
.pdet__tab[aria-expanded="false"] { border-bottom: 1px solid var(--border-soft); }

/*
   Sans JavaScript, les panneaux fermés côté serveur resteraient
   inatteignables : on les rouvre tous. La page redevient un document
   simple, jamais un accordéon mort.
   `!important` est obligatoire : base.css pose `[hidden] { display: none
   !important }`, et rien d'autre ne peut le contrer.
*/
html:not(.js) .pdet__panel[hidden] { display: block !important; }

@media (min-width: 48rem) {
  .pdet__acc {
    display: grid;
    /* 3 onglets à leur largeur + une colonne libre qui absorbe le reste :
       sans elle, les panneaux ne s'étendraient qu'à la largeur des onglets. */
    grid-template-columns: repeat(3, auto) minmax(0, 1fr);
    border-top: 0;
  }

  .pdet__acc > .pdet__tab {
    position: relative;
    grid-row: 1;
    justify-content: flex-start;
    padding: var(--s-4) var(--s-5) var(--s-4) 0;
    border-bottom: 0;
    color: var(--text-muted);
  }
  .pdet__acc > .pdet__tab:nth-child(1) { grid-column: 1; }
  .pdet__acc > .pdet__tab:nth-child(3) { grid-column: 2; }
  .pdet__acc > .pdet__tab:nth-child(5) { grid-column: 3; }

  /* Le chevron ne sert que déplié : un onglet n'a rien à ouvrir. */
  .pdet__acc > .pdet__tab .ico { display: none; }

  .pdet__acc > .pdet__tab[aria-expanded="true"] { color: var(--text-strong); }
  .pdet__acc > .pdet__tab:hover { color: var(--primary); }

  /* Élément signature : le filet teal souligne l'onglet actif. */
  .pdet__acc > .pdet__tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: var(--s-5);
    bottom: -1px;
    height: 3px;
    background: var(--edge-solid);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-2) var(--ease);
  }
  .pdet__acc > .pdet__tab[aria-expanded="true"]::after { transform: scaleX(1); }

  /*
     Chaque panneau a SA ligne de grille : deux panneaux ouverts en même
     temps (ou l'absence de script) les empile proprement au lieu de les
     superposer.
  */
  .pdet__acc > .pdet__panel {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
    border-bottom: 0;
    padding-top: var(--s-6);
    padding-bottom: 0;
  }
  .pdet__acc > :nth-child(2) { grid-row: 2; }
  .pdet__acc > :nth-child(4) { grid-row: 3; }
  .pdet__acc > :nth-child(6) { grid-row: 4; }
}

/* ---- Caractéristiques ---------------------------------------------- */
.specs { margin: 0; }
.specs__row {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--border-soft);
}
.specs__row:first-child { border-top: 1px solid var(--border-soft); }
.specs__key {
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--text-muted);
}
.specs__val {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
}

.pdet__note {
  font-size: var(--t-sm);
  color: var(--text-muted);
}

/* À 30 rem, deux colonnes donnent une valeur sur trois lignes : on empile. */
@media (max-width: 30rem) {
  .specs__row { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* =============================================================
   5. SUGGESTIONS
   ============================================================= */

/*
   layout.css ne définit que `.sechead` et `.sechead--center` : le
   modificateur `--start` retombe donc sur la rangée flex de base, qui ne se
   replie pas, et le lien (`flex: none`, ~227 px) écrase le titre — mesuré à
   121 px de large sur trois lignes à 390 px. La fiche produit est le seul
   endroit du thème qui combine `align: start` ET un lien : on répare ici,
   sans toucher au composant partagé.
*/
.pdp__related .sechead { flex-wrap: wrap; }
.pdp__related .sechead__link { margin-left: auto; }

/* =============================================================
   6. BARRE D'ACHAT COLLANTE (téléphone)
   ============================================================= */

/*
   app.js pose `has-stickybar` sur le <body> dès que la barre existe, quelle
   que soit la largeur. C'est donc ici qu'on lui donne sa hauteur RÉELLE —
   celle dont components.css se sert pour remonter le bouton WhatsApp — et
   qu'on la remet à zéro sur grand écran, où la barre n'existe plus.
*/
body.has-stickybar { --stickybar-h: calc(var(--s-9) + var(--s-2) + env(safe-area-inset-bottom, 0px)); }

.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-header) - 2);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  /* Repli : `--stickybar-h` n'est posé que par `body.has-stickybar`, donc
     seulement une fois app.js exécuté. Sans repli, la barre n'aurait aucune
     hauteur minimale entre le premier rendu et le script. */
  min-height: var(--stickybar-h, calc(var(--s-9) + var(--s-2)));
  padding: var(--s-2) var(--s-4);
  padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--e-3);
  /* Invisible ET hors de l'arbre d'accessibilité tant qu'elle est rangée. */
  visibility: hidden;
  transform: translateY(110%);
  transition: transform var(--dur-2) var(--ease-out), visibility var(--dur-2) var(--ease-out);
}
.stickybar.is-on { visibility: visible; transform: none; }

.stickybar__media {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  background: var(--bg-alt);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.stickybar__media img { width: 100%; height: 100%; object-fit: contain; }

.stickybar__body { flex: 1; min-width: 0; }
.stickybar__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  /* Le nom complet reste dans le DOM : la coupe est purement visuelle. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stickybar__price { display: block; }
.stickybar__price .price { font-size: var(--t-sm); }
.stickybar__form { flex: none; }

@media (min-width: 62rem) {
  .stickybar { display: none; }
  /* Plus de barre : le bouton WhatsApp et le pied de page reprennent leur place. */
  body.has-stickybar { --stickybar-h: 0px; }
  body.has-stickybar .wa-float { bottom: var(--s-4); }
}

/* La barre ne doit jamais masquer la dernière ligne du pied de page. */
@media (max-width: 61.99rem) {
  body.has-stickybar .site-foot__bar { padding-bottom: calc(var(--stickybar-h) + var(--s-2)); }
}