/* ============================================================
   DESMÉE — assets/produit-form.css
   Formulaire de personnalisation (32 pages produit) — fichier DÉDIÉ,
   n'entre jamais dans shop.css (couche commerce/panier).
   Importé APRÈS shop.css. Réutilise les tokens de site.css.
   ============================================================ */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.pp-perso{
  border:1px solid var(--line);border-radius:16px;padding:20px 20px 8px;margin:6px 0 22px;
  background:var(--card);
}
.pp-perso legend{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding:0 8px}
.pp-perso-note{text-transform:none;letter-spacing:.02em;color:var(--mut);font-size:11px;font-style:italic}

.pp-perso-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:26px;align-items:start}
/* Piece sans choix de matiere (anneau martele, 24/09/2026) : le panneau photo
   n'a rien a montrer, il n'est pas rendu — la colonne de droite disparait avec
   lui, sinon la grille garderait un vide de 40 % de large. */
.pp-perso-grid--sansphoto{grid-template-columns:1fr}
@media(max-width:640px){.pp-perso-grid{grid-template-columns:1fr}}

.pp-field{margin-bottom:16px}
.pp-field-label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}

/* Chips — mêmes fondations que .opt[data-variant-option] (shop.css) pour cohérence visuelle */
.pp-chips{display:flex;flex-wrap:wrap;gap:8px}
.pp-chip{
  font:inherit;font-size:13px;color:var(--ink2);background:var(--bg);
  border:1px solid var(--line);border-radius:100px;padding:8px 14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  transition:color .2s,border-color .2s,background .2s,box-shadow .2s,transform .15s;
}
.pp-chip:hover{border-color:var(--gold);transform:translateY(-1px)}
.pp-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pp-chip.is-on{color:#fff;background:var(--ink);border-color:var(--ink)}

/* Chips "swatch" (couleur / inclusion) — pastille dans SA teinte, halo dans SA teinte,
   JAMAIS de hiérarchie visuelle entre options (règle d'honnêteté — pas de "premium qui brille"). */
.pp-chip--swatch::before{
  content:"";width:12px;height:12px;border-radius:50%;background:var(--sw);
  box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:none;
}
.pp-chip--swatch.is-on{
  color:var(--ink);background:var(--card);border-color:var(--sw);
  box-shadow:0 0 0 1px var(--sw),0 6px 16px -9px var(--sw);
}

/* Champ libre "Autre, précisez" — visuellement discret par défaut (repli, jamais requis) */
.pp-free{display:block;font-size:12px;color:var(--mut);margin-top:10px}
.pp-free span{display:block;margin-bottom:5px}
.pp-free--collapsed{opacity:.82}
.pp-free input{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);
  color:var(--ink);font-family:var(--sans);font-size:13.5px;
  /* Champ "réfractif" — liseré spectral qui glisse au focus. Les 3 couleurs sont
     RÉELLES (Bleu/Turquoise/Rose du catalogue products.js), pas une palette de marque inventée. */
  background-image:linear-gradient(90deg,#3a5bd0,#1f9b96,#d24b7a);
  background-size:200% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-position .55s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;
}
.pp-free input:focus{
  outline:none;border-color:var(--gold);background-position:100% 100%;
  box-shadow:0 0 0 1px rgba(168,132,58,.35),0 0 22px -10px var(--gold);
}

/* Select taille (Bague/Manchette) */
.pp-field select{
  width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:var(--card);
  color:var(--ink);font-family:var(--sans);font-size:14px;transition:border-color .25s;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px;background-repeat:no-repeat;
}
.pp-field select:focus{outline:none;border-color:var(--gold)}
.pp-field > input[type="text"][data-prop]{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--card);
  color:var(--ink);font-family:var(--sans);font-size:14px;transition:border-color .25s;
}
.pp-field > input[type="text"][data-prop]:focus{outline:none;border-color:var(--gold)}

.pp-note textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--card);
  color:var(--ink);font-family:var(--sans);font-size:14px;min-height:64px;resize:vertical;
  background-image:linear-gradient(90deg,#3a5bd0,#1f9b96,#d24b7a);
  background-size:200% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-position .55s cubic-bezier(.2,.7,.2,1),border-color .25s;
}
.pp-note textarea:focus{outline:none;border-color:var(--gold);background-position:100% 100%}

/* ── L'axe « matiere » : familles, variantes, et la photo de ce qu'on choisit ──
   Remplace le mini-cabochon SVG (--stone, .pp-inc-host, @keyframes ppDepose),
   retire le 19/09/2026 : Manon nous a ecrit qu'il promettait des pieces « pas du
   tout realisables telles quelles a l'atelier ». Rien ici ne DESSINE un bijou. */

/* Familles : un cran au-dessus des variantes dans la hierarchie visuelle, parce
   que c'est LE choix structurant (une teinte pure OU une inclusion). */
.pp-fams{margin-bottom:10px}
.pp-fam{font-weight:600}
.pp-field-aide{font-size:12.5px;color:var(--mut);margin:0 0 10px;line-height:1.5}
.pp-fam-aide{font-size:12.5px;color:var(--ink2);margin:0 0 10px;font-style:italic;line-height:1.5}
.pp-vars-host{display:block}
.pp-vars{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.pp-vars[hidden]{display:none}

/* La photo de la matiere choisie. Ratio fixe : sans lui, chaque changement de
   variante ferait sauter toute la colonne de droite. */
.pp-photo{
  margin:0;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,var(--bg2),var(--card));
  box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;
  aspect-ratio:1/1;padding:14px;text-align:center;
}
.pp-photo picture{display:block;width:100%;height:100%}
.pp-photo img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.pp-photo figcaption{font-size:12px;color:var(--ink2);margin-top:9px;line-height:1.45}
.pp-photo-vide{font-size:12.5px;color:var(--mut);font-style:italic;margin:0;max-width:24ch;line-height:1.5}
/* Aplat de teinte : ce n'est PAS une photo, et la legende le dit en toutes
   lettres juste en dessous (.pp-photo-sans). */
.pp-photo-teinte{width:100%;height:100%;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pp-photo-sans{color:var(--mut);font-style:italic}
.pp-photo-desc{font-size:12.5px;color:var(--ink2);line-height:1.6;margin:10px 0 0}
.pp-photo-desc:empty{margin:0}

/* ── Stepper quantité — remplace l'input number brut ── *//* ── Stepper quantité — remplace l'input number brut ── */
.pp-qty--stepper{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;overflow:hidden;background:var(--card)}
.qty-btn{width:36px;height:44px;border:0;background:transparent;color:var(--ink);font-size:17px;line-height:1;cursor:pointer;transition:background .2s,color .2s;font-family:var(--sans)}
.qty-btn:hover{background:var(--bg2);color:var(--gold-text)}
.qty-btn:active{background:var(--gold);color:#1d1407}
.qty-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.qty-stepper input[data-qty]{
  width:44px;text-align:center;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  background:transparent;font-size:15px;font-family:var(--sans);color:var(--ink);padding:11px 0;-moz-appearance:textfield;
}
.qty-stepper input[data-qty]::-webkit-outer-spin-button,.qty-stepper input[data-qty]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── Bouton magnétique (léger, JS gate pointer:fine + reduced-motion, cf. §4) ── */
.btn-add{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .3s,opacity .3s}

/* Confort tactile ≤880px : 16px mini (pas de zoom iOS au focus) + steppers 44px */
@media(max-width:880px){
  .pp-free input,.pp-field select,.pp-note textarea,.qty-stepper input[data-qty]{font-size:16px}
  .pp-field > input[type="text"][data-prop]{font-size:16px}
  .qty-btn{width:44px}
}

@media (prefers-reduced-motion: reduce){
  .pp-chip,.pp-free input,.pp-note textarea,.btn-add{transition:none!important;animation:none!important}
  .pp-chip:hover{transform:none}
}