/* NC Flocage maillots — fiche produit
 * Charte Les Ducs d'Angers par défaut : surcharger les variables pour une autre boutique. */
.ncjc {
  --ncjc-primary: #001141;          /* bleu nuit Ducs (titres, valeurs) */
  --ncjc-accent: #FF0004;           /* rouge Ducs (prix, erreurs, champ requis) */
  --ncjc-border: #818A91;
  --ncjc-muted: #7A7A7A;
  --ncjc-bg: #FFFFFF;
  --ncjc-radius: 7px;
  --ncjc-height: 42px;
  --ncjc-font-title: "Tusker Grotesk", "Bebas Neue", "Oswald", sans-serif;
  --ncjc-font-text: "Studio Pro", sans-serif;
  margin: 1.25rem 0;
  font-family: var(--ncjc-font-text);
  color: var(--ncjc-primary);
}

/* Calque posé sur l'image produit */
.ncjc-overlay { position: absolute; pointer-events: none; z-index: 2; }

/* Aperçu de secours (image produit introuvable dans la page) */
.ncjc__preview[hidden] { display: none !important; }
.ncjc__preview { position: relative; background: #f6f6f6; border-radius: var(--ncjc-radius); overflow: hidden; margin-bottom: 1rem; min-height: 120px; }
.ncjc__canvas { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .2s; }
.ncjc.is-ready .ncjc__canvas { opacity: 1; }
.ncjc__loader { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; border: 3px solid rgba(0, 17, 65, .15); border-top-color: var(--ncjc-primary); border-radius: 50%; animation: ncjc-spin .8s linear infinite; }
.ncjc.is-ready .ncjc__loader { display: none; }

/* En-tête : même style que « TAILLES : » */
.ncjc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.ncjc__title { font-family: var(--ncjc-font-title); font-size: 16px; line-height: 20px; text-transform: uppercase; color: var(--ncjc-primary); }
.ncjc__price { font-family: var(--ncjc-font-title); font-size: 16px; line-height: 20px; text-transform: uppercase; color: var(--ncjc-accent); white-space: nowrap; }

/* Champs */
.ncjc__fields { display: flex; gap: .75rem; }
.ncjc__field { display: flex; flex-direction: column; min-width: 0; }
.ncjc__field--name { flex: 1 1 0%; }
.ncjc__field--number { flex: 0 0 6.5rem; }
.ncjc__label { margin: 0 0 .35rem; font-family: var(--ncjc-font-text); font-size: 13px; line-height: 16px; font-weight: 400; color: var(--ncjc-primary); text-align: left; }
.ncjc__req { color: var(--ncjc-accent); }
.ncjc__control { position: relative; }
.ncjc .ncjc__input {
  display: block; width: 100%; height: var(--ncjc-height); margin: 0; padding: 0 3.25rem 0 .9rem;
  font-family: var(--ncjc-font-title); font-size: 22px; line-height: normal; letter-spacing: .03em;
  color: var(--ncjc-primary); background: var(--ncjc-bg);
  border: 1px solid var(--ncjc-border); border-radius: var(--ncjc-radius); box-shadow: none; outline: 0;
  transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
.ncjc .ncjc__number { padding: 0 .5rem; text-align: center; }
.ncjc .ncjc__input:hover { border-color: var(--ncjc-primary); }
.ncjc .ncjc__input:focus { border-color: var(--ncjc-primary); box-shadow: 0 0 0 1px var(--ncjc-primary); }
.ncjc .ncjc__input::placeholder { font-family: var(--ncjc-font-text); font-size: 14px; line-height: normal; letter-spacing: 0; text-transform: none; color: var(--ncjc-muted); opacity: 1; }
.ncjc__input--upper { text-transform: uppercase; }
/* Champ vide : métriques de la police du placeholder, pour qu'il soit centré verticalement */
.ncjc .ncjc__input:placeholder-shown { font-family: var(--ncjc-font-text); font-size: 14px; letter-spacing: 0; }
.ncjc__count { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ncjc-muted); pointer-events: none; }

.ncjc__hint { margin: .5rem 0 0; font-size: 12px; line-height: 16px; color: var(--ncjc-muted); }
.ncjc__error { margin: .6rem 0 0; padding: .5rem .75rem; font-size: 13px; line-height: 18px; color: var(--ncjc-accent); background: rgba(255, 0, 4, .06); border-left: 3px solid var(--ncjc-accent); border-radius: 0 var(--ncjc-radius) var(--ncjc-radius) 0; }
.ncjc__error[hidden] { display: none !important; }
.ncjc .ncjc__input.is-invalid { border-color: var(--ncjc-accent); box-shadow: 0 0 0 1px var(--ncjc-accent); }

.ncjc.is-loading { opacity: .7; pointer-events: none; }

@media (max-width: 575px) {
  .ncjc__field--number { flex-basis: 5.5rem; }
  .ncjc .ncjc__input { font-size: 20px; }
}
@keyframes ncjc-spin { to { transform: rotate(360deg); } }