/* ============================================================================
 * Azzkara — Guide des tailles (port fidèle de preview/src/styles.css).
 *
 * Autonome : variables locales --azzsg-* (le thème fournit les mêmes teintes mais
 * on ne dépend de rien). Tout est scopé sous .azzsg / .azzsg-overlay / .azzsg-inline,
 * classes de contenu (sizer, matrix, neckviz, sz-*) reprises À L'IDENTIQUE du proto.
 * ========================================================================== */

.azzsg,
.azzsg-overlay,
.azzsg-inline {
  --azzsg-ink: #0c0c0e;
  --azzsg-ink-2: #141417;
  --azzsg-ink-3: #1c1c20;
  --azzsg-bone: #f1ede4;
  --azzsg-silver: #c9c9cf;
  --azzsg-muted: #8d8d95;
  --azzsg-muted-2: #66666e;
  --azzsg-line: rgba(255, 255, 255, .10);
  --azzsg-line-2: rgba(255, 255, 255, .18);
  --azzsg-red: #b3171d;
  --azzsg-display: 'Cinzel', Georgia, serif;
  --azzsg-ed: 'Cormorant Garamond', Georgia, serif;
  --azzsg-ui: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* —— Typo utilitaire (autonome, identique au proto) —— */
.azzsg .display,
.azzsg-inline .display {
  font-family: var(--azzsg-display); font-weight: 600; letter-spacing: .012em; line-height: 1.08;
}
.azzsg .editorial,
.azzsg-inline .editorial { font-family: var(--azzsg-ed); font-weight: 400; }

.azzsg, .azzsg * { box-sizing: border-box; }
.azzsg button { font-family: inherit; cursor: pointer; color: inherit; }

/* ---------------------------------------------------------------------------
 * Overlay (modale) — caché par défaut via [hidden]
 * ------------------------------------------------------------------------- */
.azzsg-overlay[hidden] { display: none; }
.azzsg-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(4, 4, 6, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: azzsg-fade .18s ease-out;
}
@keyframes azzsg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes azzsg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.azzsg-modal {
  position: relative; width: 100%; max-width: 760px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--azzsg-ink); color: var(--azzsg-bone);
  border: 1px solid var(--azzsg-line-2); border-radius: var(--rounded, 6px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  outline: none; overflow: hidden;
  animation: azzsg-rise .22s ease-out;
}
.azzsg-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--azzsg-line);
  background: var(--azzsg-ink-2); flex: 0 0 auto;
}
.azzsg-modal__eyebrow {
  font-family: var(--azzsg-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--azzsg-silver);
}
.azzsg-modal__close {
  appearance: none; border: 1px solid var(--azzsg-line); background: transparent;
  color: var(--azzsg-bone); width: 36px; height: 36px; border-radius: 50%;
  font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
.azzsg-modal__close:hover { border-color: var(--azzsg-red); color: #fff; background: var(--azzsg-red); }
.azzsg-modal__close:focus-visible { outline: 2px solid var(--azzsg-red); outline-offset: 2px; }

.azzsg-modal__body {
  padding: 22px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------------
 * Inline (widget / future page) — SizesPage complète
 * ------------------------------------------------------------------------- */
.azzsg-inline {
  background: var(--azzsg-ink); color: var(--azzsg-bone);
  padding: 8px 0 24px;
}
.azzsg-inline__hero { padding: 14px 0 30px; }
.azzsg-inline__hero h1 {
  font-size: clamp(26px, 3vw, 38px); color: #fff; margin: 0 0 18px; letter-spacing: .02em;
}
.azzsg-inline__hero .editorial {
  color: var(--azzsg-silver); font-size: 18px; line-height: 1.7; margin: 0; max-width: 720px;
}

/* ---------------------------------------------------------------------------
 * Onglets (sizes-tabs)
 * ------------------------------------------------------------------------- */
.azzsg .sizes-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--azzsg-line); margin-bottom: 36px;
}
.azzsg .sizes-tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--azzsg-muted);
  padding: 14px 22px; font-family: var(--azzsg-display); font-size: 17px;
  transition: .15s; margin-bottom: -1px;
}
.azzsg .sizes-tabs button:hover { color: #fff; }
.azzsg .sizes-tabs button.on { color: #fff; border-bottom-color: var(--azzsg-red); }
.azzsg .sizes-tabs button:focus-visible { outline: 2px solid var(--azzsg-red); outline-offset: 2px; }

.azzsg .sizes-panel { display: flex; flex-direction: column; gap: 46px; }
.azzsg .sizes-panel[hidden] { display: none; }

/* ---------------------------------------------------------------------------
 * Blocs + en-têtes (sz-block / ret-head)
 * ------------------------------------------------------------------------- */
.azzsg .ret-head { margin-bottom: 24px; }
.azzsg .ret-head h2 { font-size: clamp(22px, 3vw, 30px); color: #fff; margin: 0; }
.azzsg .sz-block .ret-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.azzsg .sz-sub { color: var(--azzsg-muted); font-size: 13px; }

.azzsg .sz-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.azzsg .sz-step {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--azzsg-line); background: var(--azzsg-ink-2); padding: 22px;
}
.azzsg .sz-step__n { font-size: 30px; color: var(--azzsg-red); line-height: 1; flex: 0 0 auto; }
.azzsg .sz-step b { display: block; color: #fff; font-size: 15px; margin-bottom: 6px; }
.azzsg .sz-step p { margin: 0; color: var(--azzsg-muted); font-size: 13px; line-height: 1.55; }

/* ---------------------------------------------------------------------------
 * BraceletSizer (sizer)
 * ------------------------------------------------------------------------- */
.azzsg .sizer { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: stretch; }
.azzsg .sizer__control {
  border: 1px solid var(--azzsg-line); background: var(--azzsg-ink-2);
  padding: 30px 32px; display: flex; flex-direction: column; justify-content: center;
}
.azzsg .sizer__val { display: flex; align-items: baseline; gap: 12px; margin-bottom: 26px; }
.azzsg .sizer__val b { font-size: 56px; color: #fff; line-height: 1; }
.azzsg .sizer__val span { color: var(--azzsg-muted); font-size: 14px; }
.azzsg .sizer__range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 3px;
  background: var(--azzsg-line-2); outline: none; border-radius: 0;
}
.azzsg .sizer__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--azzsg-red); cursor: pointer; border: 3px solid #fff;
}
.azzsg .sizer__range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--azzsg-red); cursor: pointer; border: 3px solid #fff;
}
.azzsg .sizer__ticks { display: flex; justify-content: space-between; margin-top: 12px; }
.azzsg .sizer__ticks span { font-size: 11px; color: var(--azzsg-muted-2); transition: .15s; }
.azzsg .sizer__ticks span.on { color: var(--azzsg-red); font-weight: 600; transform: scale(1.25); }
.azzsg .sizer__out { display: flex; flex-direction: column; gap: 14px; }
.azzsg .sizer__rec {
  flex: 1; border: 1px solid var(--azzsg-line); padding: 20px 24px;
  display: flex; flex-direction: column; justify-content: center;
}
.azzsg .sizer__rec--fit { background: var(--azzsg-ink-3); }
.azzsg .sizer__rec--loose { background: rgba(179, 23, 29, .08); border-color: rgba(179, 23, 29, .35); }
.azzsg .sizer__rec.is-off { opacity: .45; }
.azzsg .sizer__rec-l { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--azzsg-muted); }
.azzsg .sizer__rec b { font-size: 34px; color: #fff; line-height: 1.1; margin: 4px 0; }
.azzsg .sizer__rec-d { color: var(--azzsg-muted); font-size: 12.5px; }

/* ---------------------------------------------------------------------------
 * FitMatrix (matrix)
 * ------------------------------------------------------------------------- */
.azzsg .matrix {
  display: grid; grid-template-columns: 110px repeat(var(--cols), 1fr);
  border: 1px solid var(--azzsg-line); border-bottom: 0; overflow: hidden;
}
.azzsg .matrix__corner {
  background: #050507; color: var(--azzsg-muted); font-size: 10px; letter-spacing: .04em;
  padding: 12px 10px; display: flex; align-items: center; border-bottom: 1px solid var(--azzsg-line);
}
.azzsg .matrix__head {
  background: #050507; color: #fff; font-family: var(--azzsg-display); font-size: 15px;
  display: grid; place-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--azzsg-line); border-left: 1px solid var(--azzsg-line);
}
.azzsg .matrix__row {
  color: var(--azzsg-silver); font-size: 13px; display: flex; align-items: center; padding: 0 12px;
  background: var(--azzsg-ink-2); border-bottom: 1px solid var(--azzsg-line); min-height: 44px;
}
.azzsg .matrix__cell {
  border-left: 1px solid var(--azzsg-line); border-bottom: 1px solid var(--azzsg-line);
  display: grid; place-items: center; font-size: 11px; min-height: 44px; color: var(--azzsg-muted-2);
}
.azzsg .matrix__cell.is-fit { background: var(--azzsg-silver); color: #111; font-weight: 600; }
.azzsg .matrix__cell.is-loose { background: var(--azzsg-red); color: #fff; font-weight: 600; }

.azzsg .sz-avg { display: flex; gap: 16px; margin-top: 16px; }
.azzsg .sz-avg > div {
  flex: 1; border: 1px solid var(--azzsg-line); background: var(--azzsg-ink-2);
  padding: 18px 22px; display: flex; align-items: center; justify-content: space-between;
}
.azzsg .sz-avg span { color: var(--azzsg-muted); font-size: 13px; }
.azzsg .sz-avg b { color: #fff; font-size: 22px; }

/* ---------------------------------------------------------------------------
 * Types de bracelets (sz-types)
 * ------------------------------------------------------------------------- */
.azzsg .sz-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.azzsg .sz-type {
  border: 1px solid var(--azzsg-line); background: var(--azzsg-ink);
  padding: 26px 28px; border-top: 2px solid var(--azzsg-red);
}
.azzsg .sz-type h3 { font-size: 19px; color: #fff; margin: 0 0 10px; }
.azzsg .sz-type p { margin: 0; color: var(--azzsg-muted); font-size: 13px; line-height: 1.6; }

/* ---------------------------------------------------------------------------
 * NecklaceViz (neckviz + nv-*)
 * ------------------------------------------------------------------------- */
.azzsg .neckviz {
  display: grid; grid-template-columns: 320px 1fr; gap: 24px;
  border: 1px solid var(--azzsg-line); background: var(--azzsg-ink-2); padding: 30px; align-items: center;
}
.azzsg .neckviz__stage { display: grid; place-items: center; }
.azzsg .neckviz__toggle { display: flex; gap: 0; border: 1px solid var(--azzsg-line-2); margin-bottom: 16px; }
.azzsg .neckviz__toggle button {
  background: none; border: 0; color: var(--azzsg-muted); font-family: var(--azzsg-ui);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 9px 24px; transition: .15s;
}
.azzsg .neckviz__toggle button:hover { color: #fff; }
.azzsg .neckviz__toggle button.on { background: var(--azzsg-red); color: #fff; }
.azzsg .neckviz__svg { width: 100%; max-width: 270px; height: auto; }
.azzsg .nv-fig path { fill: #b4b4ba; stroke: none; }
.azzsg .nv-arc { fill: none; stroke: rgba(150, 150, 158, .55); stroke-width: 3.4; }
.azzsg .nv-arc.on { fill: none; stroke: var(--azzsg-red); stroke-width: 6; }
.azzsg .nv-dot { fill: var(--azzsg-red); stroke: var(--azzsg-ink-2); stroke-width: 3; }
.azzsg .neckviz__panel { display: flex; flex-direction: column; gap: 14px; }
.azzsg .neckviz__val { display: flex; align-items: baseline; gap: 8px; }
.azzsg .neckviz__val b { font-size: 48px; color: #fff; line-height: 1; }
.azzsg .neckviz__val span { color: var(--azzsg-muted); font-size: 14px; }
.azzsg .neckviz__style { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.azzsg .neckviz__name { color: var(--azzsg-red); font-family: var(--azzsg-display); font-size: 20px; }
.azzsg .neckviz__desc { color: var(--azzsg-muted); font-size: 13.5px; }
.azzsg .neckviz__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.azzsg .neckviz__chips button {
  background: var(--azzsg-ink-3); border: 1px solid var(--azzsg-line); color: var(--azzsg-muted);
  font-size: 12px; padding: 6px 11px; font-family: var(--azzsg-ui); transition: .15s;
}
.azzsg .neckviz__chips button:hover { color: #fff; border-color: var(--azzsg-line-2); }
.azzsg .neckviz__chips button.on { background: var(--azzsg-red); border-color: var(--azzsg-red); color: #fff; }
.azzsg .neckviz__note { margin: 4px 0 0; color: var(--azzsg-muted-2); font-size: 11.5px; line-height: 1.5; }

/* ---------------------------------------------------------------------------
 * Référence des longueurs (sz-lenref)
 * ------------------------------------------------------------------------- */
.azzsg .sz-lenref { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.azzsg .sz-lenref > div {
  border: 1px solid var(--azzsg-line); background: var(--azzsg-ink-2);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
}
.azzsg .sz-lenref b { color: #fff; font-family: var(--azzsg-display); font-size: 16px; }
.azzsg .sz-lenref span { color: var(--azzsg-muted); font-size: 12.5px; }

/* ---------------------------------------------------------------------------
 * Verrou de scroll (posé sur <html> à l'ouverture)
 * ------------------------------------------------------------------------- */
html.azzsg-lock, html.azzsg-lock body { overflow: hidden; }

/* ---------------------------------------------------------------------------
 * Responsive (reprend le proto)
 * ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .azzsg .sz-steps { grid-template-columns: 1fr; }
  .azzsg .sizer { grid-template-columns: 1fr; }
  .azzsg .sz-types { grid-template-columns: 1fr; }
  .azzsg .neckviz { grid-template-columns: 1fr; }
  .azzsg .sz-lenref { grid-template-columns: 1fr 1fr; }
  .azzsg .sz-avg { flex-direction: column; }
  .azzsg .matrix { font-size: 10px; grid-template-columns: 72px repeat(var(--cols), 1fr); }
  .azzsg .matrix__cell.is-fit, .azzsg .matrix__cell.is-loose { font-size: 0; }
  .azzsg .matrix__cell.is-fit::after { content: "A"; font-size: 11px; }
  .azzsg .matrix__cell.is-loose::after { content: "L"; font-size: 11px; }
}

/* Modale : plein écran en mobile */
@media (max-width: 600px) {
  .azzsg-overlay { padding: 0; align-items: stretch; }
  .azzsg-modal {
    max-width: none; max-height: none; height: 100%;
    border: 0; border-radius: 0; animation: azzsg-fade .18s ease-out;
  }
  .azzsg-modal__body { padding: 16px; padding-bottom: 40px; }
  .azzsg .sizes-tabs button { padding: 12px 16px; font-size: 16px; }
  .azzsg .sizes-panel { gap: 36px; }
}

/* Arrondi global (piloté par --rounded du thème ; fallback 6px).
   Blocs/cartes rectangulaires du guide des tailles. La poignée du range et le
   bouton de fermeture (ronds 50%) gardent leur forme ; la modale plein écran
   mobile garde son radius:0 (déjà géré plus haut). */
.azzsg .sz-step,
.azzsg .sizer__control,
.azzsg .sizer__rec,
.azzsg .matrix,
.azzsg .sz-avg > div,
.azzsg .sz-type,
.azzsg .neckviz,
.azzsg .neckviz__toggle { border-radius: var(--rounded, 6px); }