/* Maison Kôssi (marque fictive) — styles propres à : produit. Chargée après styles.css, qui déclare l’ordre des couches. */
@layer components {
  .tabs [role="tablist"] { display: flex; gap: var(--s-1); border-block-end: 1px solid var(--color-ligne-deco); overflow-x: auto; scrollbar-width: none; }
  .tabs [role="tab"] { flex: none; min-block-size: 3rem; padding-inline: var(--s-4); font-weight: 700; color: var(--color-doux); border-block-end: 3px solid transparent; margin-block-end: -1px; transition: color var(--dur-2), border-color var(--dur-2); }
  .tabs [role="tab"]:hover { color: var(--color-indigo); } .tabs [role="tab"][aria-selected="true"] { color: var(--color-indigo); border-color: var(--color-or); }
  .tabs [role="tabpanel"] { padding-block: var(--s-5); }
  .tabs .panel-static { padding-block: var(--s-4); } .tabs .panel-static h3 { margin-block-end: var(--s-2); }
  /* ---------- Avis ---------- */
  .avis-head { display: grid; gap: var(--s-5); }
  @media (min-width: 48em) { .avis-head { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-8); } }
  .avg { display: grid; gap: 0.25rem; } .avg strong { font-family: var(--font-display); font-weight: 600; font-size: 3rem; line-height: 1; letter-spacing: -0.03em; }
  .histo { display: grid; gap: 0.15rem; max-inline-size: 28rem; }
  .histo button { display: grid; grid-template-columns: 3.5rem 1fr 2rem; align-items: center; gap: var(--s-3); min-block-size: 2.25rem; text-align: start; font-size: var(--fs-small); border-radius: 6px; padding-inline: 0.25rem; }
  .histo button:hover { background: var(--color-sable); } .histo button[aria-pressed="true"] { background: var(--color-or-pale); }
  .histo .bar { block-size: 0.5rem; border-radius: 99px; background: var(--color-sable); overflow: hidden; } .histo .bar i { display: block; block-size: 100%; background: var(--color-indigo); inline-size: var(--w, 0%); }
  .review { padding-block: var(--s-5); border-block-end: 1px solid var(--color-ligne-deco); display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); }
  .avatar { grid-row: span 3; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--color-indigo); color: var(--color-or); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; }
  .review > :not(.avatar) { grid-column: 2; min-inline-size: 0; }
  .review h3 { font-size: 1rem; } .review p { margin: 0; } .review__meta { font-size: var(--fs-small); color: var(--color-doux); }
  .review__reply { margin-block-start: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--color-sable); font-size: 0.9375rem; }
}
@layer pages {
  /* ---------- Fiche produit ---------- */
  .pdp { display: grid; gap: var(--s-6); padding-block-end: var(--s-7); }
  @media (min-width: 64em) { .pdp { grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: start; } .pdp__info { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); } }
  .gallery { display: grid; gap: var(--s-3); } .gallery__main { position: relative; }
  .gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius-lg); background: var(--color-sable); }
  .gallery__track::-webkit-scrollbar { display: none; } .gallery__slide { scroll-snap-align: center; aspect-ratio: 4 / 4.6; position: relative; } .gallery__slide svg, .gallery__slide img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .gallery__slide button { position: absolute; inset: 0; inline-size: 100%; cursor: zoom-in; }
  .gallery__count { position: absolute; inset-block-end: 0.75rem; inset-inline-end: 0.75rem; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--color-papier); font-size: 0.8125rem; font-weight: 700; } @media (min-width: 64em) { .gallery__count { display: none; } }
  .gallery__thumbs { display: none; } @media (min-width: 64em) { .gallery__thumbs { display: flex; gap: var(--s-3); } }
  .gallery__thumbs button { inline-size: 5rem; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 2px solid transparent; background: var(--color-sable); } .gallery__thumbs button[aria-current="true"] { border-color: var(--color-indigo); } .gallery__thumbs svg { inline-size: 100%; block-size: 100%; }
  .pdp__info { display: grid; gap: var(--s-4); align-content: start; }
  .pdp__info h1 { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); }
  .pdp__sub { font-size: var(--fs-small); color: var(--color-doux); }
  .pdp__info .pdp__price { line-height: 1.25; } .pdp__info .pdp__price + .pdp__sub { margin-block-start: calc(-1 * var(--s-3)); } /* le prix et sa mention TVA vont ensemble */
  .pdp__badges { display: flex; gap: var(--s-2); flex-wrap: wrap; }
  .pdp__badges .badge { background: var(--color-sable); }
  .pdp__links { display: flex; gap: var(--s-2); flex-wrap: wrap; }
  .buybar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 56; display: none; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--color-papier); box-shadow: 0 -10px 24px oklch(0.3 0.05 60 / 0.14); transform: translateY(100%); transition: transform var(--dur-3) var(--ease-out); }
  .buybar.is-on { display: flex; transform: none; } @starting-style { .buybar.is-on { transform: translateY(100%); } }
  .buybar__t { flex: 1; min-inline-size: 0; line-height: 1.25; } .buybar__t strong { display: block; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .buybar__t span { font-size: 0.875rem; font-weight: 700; }
  @media (min-width: 48em) { .buybar, .buybar.is-on { display: none; } }
  .has-buybar .site-footer { padding-block-end: 5rem; }
  /* Le bandeau du kit de démonstration occupe le bas de l'écran : la barre d'achat flotte au-dessus. */
  .demo-badge-on .buybar { inset-inline: 0.75rem; inset-block-end: calc(9.25rem + env(safe-area-inset-bottom)); padding-block-end: var(--s-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
  @media (min-width: 35em) { .demo-badge-on .buybar { inset-block-end: 6.5rem; } }
  .gallery-dlg { inline-size: min(60rem, 100vw); background: var(--color-nuit); } .gallery-dlg svg { inline-size: 100%; max-block-size: 85dvh; } .gallery-dlg .nav-btns { position: absolute; inset-inline: 0.5rem; inset-block-start: 50%; display: flex; justify-content: space-between; pointer-events: none; } .gallery-dlg .nav-btns button { pointer-events: auto; }
}