/**
 * Fiche produit « page de vente » (body.nk-fiche-vente), chargée seulement sur
 * ces fiches. Complète boutique.css : mêmes jetons (--nk-*), même sobriété.
 */

/* ---------- Haut de page ---------- */
.nk-fiche-vente div.product .product_title { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.06; letter-spacing: -0.035em; }
.nk-fiche-vente div.product p.price { margin-bottom: 1.25rem; }
.nk-fiche-vente .woocommerce-product-details__short-description { margin-bottom: 1.5rem; }
.nk-fiche-vente .woocommerce-product-details__short-description p { margin: 0 0 0.75rem; }
.nk-accroche { font-family: var(--nk-police-titre); font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--nk-encre); }

/* Icônes (masques SVG, couleur = currentColor) */
.nk-ico::before {
  content: ""; flex: none; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--nk-ico) no-repeat center / contain; mask: var(--nk-ico) no-repeat center / contain;
}
.nk-ico--sans-percage { --nk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3Cpath d='M10 8.5h4M10 11.5h4M11 14.5h2'/%3E%3C/svg%3E"); }
.nk-ico--demontable { --nk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h6M15 12h6'/%3E%3Cpath d='M6 9l3 3-3 3M18 9l-3 3 3 3'/%3E%3C/svg%3E"); }
.nk-ico--cle { --nk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5a4 4 0 0 0-5 5L4 16l4 4 5.5-5.5a4 4 0 0 0 5-5l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.nk-ico--livraison { --nk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h12v9H2zM14 10h4l3 3v3h-7'/%3E%3Ccircle cx='6' cy='17.5' r='1.5'/%3E%3Ccircle cx='17' cy='17.5' r='1.5'/%3E%3C/svg%3E"); }
.nk-ico--independant { --nk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v15M17 4v15M7 4h10M4 20h16M5.5 19h3M15.5 19h3'/%3E%3C/svg%3E"); }
.nk-ico--reutilisable { --nk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.3-4.9L4 8M4 4v4h4M4 13a8 8 0 0 0 14.3 4.9L20 16M20 20v-4h-4'/%3E%3C/svg%3E"); }
.nk-ico--telephone { --nk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.nk-ico--garantie { --nk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }

.nk-avantages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; margin: 1.25rem 0 1rem; padding: 0; list-style: none; }
.nk-avantages li { display: flex; gap: 0.6rem; align-items: center; margin: 0; font-size: 0.92rem; font-weight: 600; line-height: 1.3; color: var(--nk-encre); }
.nk-avantages li::before { color: var(--nk-vert); }
.nk-seul { padding-left: 0.75rem; border-left: 3px solid var(--nk-vert); font-size: 0.875rem; color: var(--nk-gris); }

/* Couleurs en pastilles */
.nk-choix--couleurs .nk-choix__option { min-width: 0; display: inline-flex; align-items: center; gap: 0.5rem; }
.nk-pastille { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(17, 17, 17, 0.25); background: #ccc; }
.nk-pastille[data-couleur="noir"] { background: #1b1b1b; }
.nk-pastille[data-couleur="gris"] { background: #8a8f94; }
.nk-pastille[data-couleur="blanc"] { background: #fff; }
.nk-pastille[data-couleur="rose"] { background: #e7a3ba; }
.nk-choix__option[aria-checked="true"] .nk-pastille { border-color: var(--nk-papier); box-shadow: 0 0 0 1px var(--nk-papier); }
.nk-delai-couleur { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--nk-gris); }
.nk-delai-couleur[hidden] { display: none; }

/* Garantie, sous le bouton d'achat : discret, sans encadré */
.nk-garantie-courte { display: flex; gap: 0.75rem; align-items: flex-start; margin: 1.25rem 0 0; color: var(--nk-vert); }
.nk-garantie-courte::before { margin-top: 0.1rem; }
.nk-garantie-courte p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--nk-gris); }
.nk-garantie-courte strong { display: block; color: var(--nk-encre); font-size: 0.95rem; }
.nk-garantie-courte a { color: var(--nk-encre); font-weight: 600; text-underline-offset: 2px; white-space: nowrap; }
.nk-fiche-vente .nk-reassurance { margin-top: 1.25rem; }

/* Bouton d'achat */
.nk-fiche-vente div.product form.cart .single_add_to_cart_button { flex: 1; text-transform: uppercase; letter-spacing: 0.06em; }

/* Galerie : photos entières (3:4), vignettes défilantes */
.nk-fiche-vente .woocommerce-product-gallery__image img { aspect-ratio: 3 / 4; }
.woocommerce.nk-fiche-vente div.product div.images.woocommerce-product-gallery .flex-control-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.nk-garantie-courte + .nk-garantie-courte { margin-top: 0.9rem; }

/* ---------- Sections sous le produit ---------- */
.nk-vente { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.nk-vente__section { padding: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) 0; border-top: 1px solid var(--nk-trait); }
.nk-vente h2 { font-size: var(--nk-titre-2); letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 0.75rem; max-width: 22ch; }
.nk-vente h3 { font-size: var(--nk-titre-3); margin: 0 0 0.5rem; }
.nk-vente p { margin: 0 0 0.75rem; }
.nk-vente .nk-chapo { max-width: 42rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); color: var(--nk-gris); }

/* Pourquoi : quatre cartes */
.nk-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.nk-cartes > li { margin: 0; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--nk-pierre); border-radius: var(--nk-rayon); }
.nk-cartes > li::before { display: block; width: 28px; height: 28px; margin-bottom: 1rem; color: var(--nk-vert); }
.nk-cartes p { margin: 0; font-size: 0.95rem; color: var(--nk-gris); }

/* Comment : trois étapes illustrées */
.nk-montage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 0.5rem + 2vw, 2rem); margin: 0; padding: 0; list-style: none; counter-reset: nk-etape; }
.nk-montage > li { margin: 0; counter-increment: nk-etape; }
.nk-montage h3::before { content: counter(nk-etape); display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-right: 0.6rem; border-radius: 50%; background: var(--nk-encre); color: var(--nk-papier); font-size: 0.9rem; vertical-align: 0.1em; }
.nk-montage p { color: var(--nk-gris); font-size: 0.95rem; }
.nk-photo { margin: 0 0 1rem; }
.nk-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--nk-pierre); border-radius: var(--nk-rayon); }
.nk-photo figcaption { margin-top: 0.4rem; font-size: 0.8rem; color: var(--nk-gris); }

/* Dimensions : tableau + schéma */
.nk-dimensions { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.nk-dimensions .nk-photo img { aspect-ratio: 3 / 4; object-fit: contain; background: var(--nk-papier); border: 1px solid var(--nk-trait); }
.nk-tableau-defile { overflow-x: auto; }
.nk-tableau { width: 100%; border-collapse: collapse; font-size: 1rem; }
.nk-tableau th, .nk-tableau td { padding: 0.9rem 0.75rem; text-align: left; border-bottom: 1px solid var(--nk-trait); white-space: nowrap; }
.nk-tableau thead th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nk-gris); }
.nk-tableau tbody th { font-weight: 700; }
.nk-tableau .nk-rupture { color: var(--nk-gris); font-weight: 400; }
.nk-vente .nk-note { margin-top: 1rem; font-size: 0.9rem; color: var(--nk-gris); }

/* Moustiquaire en complément */
.nk-complement { display: flex; gap: 1.5rem; align-items: center; max-width: 42rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid var(--nk-trait); border-radius: var(--nk-rayon); }
.nk-complement__image { flex: 0 0 120px; }
.nk-complement__image img { display: block; width: 100%; height: auto; }
.nk-complement__nom { font-weight: 700; color: var(--nk-encre); }
.nk-complement__prix { font-size: 1.15rem; font-weight: 700; color: var(--nk-vert); }
.nk-complement__prix--attente { font-size: 0.95rem; color: var(--nk-gris); }
.nk-complement a { font-weight: 600; color: var(--nk-encre); }

/* Livraison, paiement, garantie */
.nk-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.nk-trois--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#garantie { scroll-margin-top: 110px; }
.nk-garantie-liste { margin: 0 0 1rem; padding-left: 1.1rem; }
.nk-garantie-liste li { margin-bottom: 0.4rem; }
.nk-trois > div { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--nk-pierre); border-radius: var(--nk-rayon); }
.nk-trois h3 { display: flex; gap: 0.6rem; align-items: center; }
.nk-trois h3::before { color: var(--nk-vert); }
.nk-trois ul { margin: 0 0 0.75rem; padding-left: 1.1rem; }
.nk-trois li { margin-bottom: 0.4rem; font-size: 0.95rem; }
.nk-securite { padding: 0.75rem; background: var(--nk-papier); border-left: 3px solid var(--nk-vert); font-size: 0.9rem; }

/* FAQ en accordéon */
.nk-questions { max-width: 46rem; border-top: 1px solid var(--nk-trait); }
.nk-questions details { border-bottom: 1px solid var(--nk-trait); }
.nk-questions summary { position: relative; padding: 1.1rem 2.5rem 1.1rem 0; font-weight: 600; cursor: pointer; list-style: none; }
.nk-questions summary::-webkit-details-marker { display: none; }
.nk-questions summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; line-height: 1; transition: transform var(--nk-rapide); }
.nk-questions details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.nk-questions summary:focus-visible { outline: 2px solid var(--nk-vert); outline-offset: 2px; }
.nk-questions details p { margin: 0 0 1.1rem; color: var(--nk-gris); max-width: 40rem; }

/* ---------- Tablette et mobile ---------- */
@media (max-width: 1024px) {
  .nk-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
  .nk-montage, .nk-trois, .nk-dimensions { grid-template-columns: minmax(0, 1fr); }
  .nk-dimensions .nk-photo { max-width: 22rem; }
  .woocommerce.nk-fiche-vente div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 22%; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--nk-gouttiere); padding-bottom: 0.25rem; justify-content: start;
  }
  .woocommerce.nk-fiche-vente div.product div.images.woocommerce-product-gallery .flex-control-thumbs li { scroll-snap-align: start; }
  .nk-complement { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .nk-cartes { grid-template-columns: minmax(0, 1fr); }
  .nk-tableau th, .nk-tableau td { padding: 0.7rem 0.35rem; font-size: 0.875rem; white-space: normal; }
  .nk-tableau thead th { font-size: 0.65rem; letter-spacing: 0.04em; }
  .nk-fiche-vente div.product form.cart .single_add_to_cart_button { padding-inline: 0.75rem; font-size: 0.875rem; letter-spacing: 0.03em; line-height: 1.2; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .nk-questions summary::after { transition: none; }
}
.nk-questions details ul, .nk-questions details ol { margin: 0 0 1.1rem; padding-left: 1.2rem; color: var(--nk-gris); max-width: 40rem; }
.nk-questions details li { margin-bottom: 0.35rem; }
