/* =========================================================
   Raymond PC : boutique (boutique.html, produit.html, commande.html)
   S'appuie sur styles.css; ce fichier n'ajoute que les pieces
   propres a la boutique.
   ========================================================= */

:root{
  --c-new:        #34c77b;
  --c-like-new:   #3b9bff;
  --c-light-wear: #f0a53a;
  --c-refurb:     #a88bff;
  --c-promo:      #ff5a5f;
}

.shop-hero{ padding: calc(var(--section-space) - 24px) 0 var(--space-6); }
.shop-hero h1{
  margin:16px 0 12px;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem);
  line-height:1.08; font-weight:800;
}
.shop-hero .lead{ max-width:720px; }
.shop-section{ padding: 0 0 var(--section-space); }

/* ---------- Pastilles de categorie ---------- */
.cat-chips{
  display:flex; gap:8px; flex-wrap:wrap; margin: 0 0 var(--space-5);
}
.cat-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--line-strong); background: var(--surface);
  color:var(--muted); font:inherit; font-size:.9rem; font-weight:600;
  cursor:pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.cat-chip:hover{ color:var(--text); border-color: var(--brand-border); }
.cat-chip.is-active{ color:var(--text); background: var(--brand-soft); border-color: var(--brand); }
.cat-chip .n{ font-size:.78rem; color:var(--muted); font-weight:700; }
.cat-chip.is-active .n{ color:var(--brand); }

/* ---------- Mise en page catalogue ---------- */
.shop-layout{
  display:grid; grid-template-columns: 260px minmax(0,1fr); gap: var(--space-5); align-items:start;
}
.shop-filters{ position:sticky; top:92px; padding:0; }
.shop-filters > summary{
  display:none; cursor:pointer; list-style:none;
  padding:14px 18px; font-weight:700;
  justify-content:space-between; align-items:center;
}
.shop-filters > summary::-webkit-details-marker{ display:none; }
.shop-filters > summary::after{ content:"+"; color:var(--brand); font-size:1.3rem; line-height:1; }
.shop-filters[open] > summary::after{ content:"–"; }
.filters-body{ padding: 18px; display:grid; gap:20px; }
.filter-group h3{
  margin:0 0 10px; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700;
}
.check{
  display:flex; align-items:center; gap:10px;
  padding:6px 0; cursor:pointer; font-size:.94rem; font-weight:500;
}
.check input{
  appearance:none; -webkit-appearance:none; margin:0; padding:0;
  width:18px; height:18px; flex:0 0 auto; border-radius:5px;
  border:1px solid var(--line-strong); background: var(--bg-2);
  display:grid; place-items:center; cursor:pointer;
}
.check input:checked{
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1920'%3E%3Cpath fill='%23fff' d='M1743.858 267.012 710.747 1300.124 176.005 765.382 0 941.387l710.747 710.871 1209.24-1209.116z'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-color: var(--brand);
}
.check input:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.check .lbl{ flex:1; min-width:0; }
.check .n{ color:var(--muted); font-size:.8rem; font-weight:700; }
.check .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.check input:disabled + .lbl{ opacity:.45; }

.price-range{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; }
.price-range input{ padding:9px 10px; font-size:.92rem; }
.price-range span{ color:var(--muted); }
.filter-reset{ width:100%; }

.shop-toolbar{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  margin-bottom: var(--space-4);
}
.shop-toolbar .count{ color:var(--muted); font-weight:600; }
.shop-toolbar-right{ display:flex; gap:10px; flex-wrap:wrap; flex:1; justify-content:flex-end; }
.shop-toolbar input[type="search"]{ max-width:260px; padding:10px 12px; font-size:.94rem; }
.shop-toolbar select{ width:auto; padding:10px 12px; font-size:.94rem; }

/* ---------- Cartes produit ---------- */
.product-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--grid-gap);
}
.product-card{
  display:flex; flex-direction:column; overflow:hidden; padding:0;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.product-card:hover{ transform: translateY(-3px); border-color: var(--brand-border); box-shadow: var(--shadow); }
.product-card:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.product-thumb{
  position:relative; aspect-ratio: 4/3; background: var(--bg-2);
  border-bottom:1px solid var(--line); overflow:hidden;
}
/* contain plutôt que cover : une photo qui n'est pas en 4:3 est affichée en
   entier sur la carte, comme sur la fiche, au lieu d'être coupée. */
.product-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.product-badges{
  position:absolute; top:10px; left:10px; right:10px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:6px; pointer-events:none;
}
.product-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-cat{ font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.product-card .product-name{
  margin:0; font-size:1.02rem; font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
.product-summary{
  margin:0; font-size:.9rem; color:var(--muted); line-height:1.45;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
.product-price{ margin-top:auto; padding-top:10px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.price-now{ font-size:1.25rem; font-weight:800; }
.price-now.is-promo{ color: var(--c-promo); }
.price-old{ color:var(--muted); text-decoration:line-through; font-size:.92rem; font-weight:600; }
.price-tax{ color:var(--muted); font-size:.78rem; font-weight:600; }

.product-card.is-unavailable .product-thumb img{ filter: grayscale(.7) brightness(.6); }
.status-ribbon{
  position:absolute; left:0; right:0; bottom:0; padding:7px 10px;
  background: rgba(10,14,23,.86); text-align:center;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem;
}

/* ---------- Pastilles d'etat et de promo ---------- */
.badge-cond, .badge-promo, .badge-status{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  font-size:.74rem; font-weight:800; letter-spacing:.03em; white-space:nowrap;
  border:1px solid transparent;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.badge-cond::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.cond-new        { color:var(--c-new);        background: rgba(20,60,40,.82);  border-color: rgba(52,199,123,.45); }
.cond-like_new   { color:#7cc0ff;              background: rgba(16,40,72,.82);  border-color: rgba(59,155,255,.45); }
.cond-light_wear { color:var(--c-light-wear); background: rgba(70,46,12,.82);  border-color: rgba(240,165,58,.45); }
.cond-refurbished{ color:var(--c-refurb);     background: rgba(44,32,80,.82);  border-color: rgba(168,139,255,.45); }
.badge-promo{ color:#fff; background: var(--c-promo); box-shadow: 0 6px 16px rgba(255,90,95,.35); }
.badge-status{ color:var(--text); background: var(--surface-3); border-color: var(--line-strong); }

.shop-empty{ padding:48px 24px; text-align:center; }
.shop-empty h3{ margin:0 0 8px; }

/* ---------- Page produit ---------- */
.product-page{ padding: calc(var(--section-space) - 40px) 0 var(--section-space); }
.product-layout{
  display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 40px; align-items:start;
}
.gallery-main{
  display:block; width:100%; padding:0; border:1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); cursor:zoom-in; overflow:hidden; aspect-ratio: 1/1; position:relative;
}
.gallery-main img{ width:100%; height:100%; object-fit:contain; display:block; }
.gallery-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.gallery-thumbs button{
  width:72px; height:72px; padding:0; border-radius:10px; overflow:hidden; cursor:pointer;
  border:2px solid var(--line-strong); background: var(--bg-2);
}
.gallery-thumbs button.is-active{ border-color: var(--brand); }
.gallery-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }

.product-info h1{
  margin:10px 0 14px; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); line-height:1.12; font-weight:800;
}
.product-info .badges-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.product-info .badge-cond, .product-info .badge-promo, .product-info .badge-status{ -webkit-backdrop-filter:none; backdrop-filter:none; }
.price-block{ padding:18px 20px; }
.price-block .price-line{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.price-block .price-now{ font-size:2.2rem; line-height:1.1; }
.price-block .price-old{ font-size:1.1rem; }
.price-block .save{ color:var(--c-promo); font-weight:700; font-size:.92rem; }
.price-meta{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.price-meta li{ display:flex; justify-content:space-between; gap:14px; padding-top:8px; border-top:1px solid var(--line); font-size:.94rem; }
.price-meta li:first-child{ border-top:none; padding-top:0; }
.price-meta .k{ width:auto; }
.price-meta .v{ color:var(--text); font-weight:600; text-align:right; }

.promo-box{
  margin-top:14px; padding:16px 18px; border-radius: var(--radius-sm);
  border:1px solid rgba(255,90,95,.4); background: rgba(255,90,95,.08);
}
.promo-box strong{ color:#ff8a8d; display:block; margin-bottom:4px; }
.promo-box p{ margin:0; color: rgba(238,242,249,.9); }
.promo-box .micro{ margin-top:6px; }

.buy-row{ display:grid; gap:10px; margin-top:18px; }
.buy-row .btn{ padding:15px 20px; font-size:1.02rem; }

.cond-scale{ display:grid; gap:10px; margin-top:12px; }
.cond-step{
  display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:start;
  padding:12px 14px; border-radius: var(--radius-sm); border:1px solid var(--line); background: var(--bg-2);
  opacity:.55;
}
.cond-step.is-current{ opacity:1; border-color: var(--brand-border); background: var(--brand-soft); }
.cond-step .badge-cond{ grid-row: span 2; -webkit-backdrop-filter:none; backdrop-filter:none; }
.cond-step p{ margin:0; font-size:.9rem; color: rgba(238,242,249,.86); }
.cond-note{ margin-top:12px; }

.product-details{ margin-top: var(--space-7); display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 24px; align-items:start; }
.product-desc p{ margin:0 0 14px; color: rgba(238,242,249,.88); }
.product-desc p:last-child{ margin-bottom:0; }
.spec-table{ width:100%; border-collapse:collapse; font-size:.94rem; }
.spec-table th, .spec-table td{ text-align:left; padding:10px 0; border-top:1px solid var(--line); vertical-align:top; }
.spec-table tr:first-child th, .spec-table tr:first-child td{ border-top:none; }
.spec-table th{ color:var(--muted); font-weight:600; width:42%; padding-right:14px; }
.spec-table td{ font-weight:600; }

.how-steps{ margin: 12px 0 0; padding:0; list-style:none; display:grid; gap:12px; counter-reset: s; }
.how-steps li{ position:relative; padding-left:40px; min-height:28px; color: rgba(238,242,249,.88); font-size:.94rem; }
.how-steps li::before{
  counter-increment: s; content: counter(s);
  position:absolute; left:0; top:-2px; width:28px; height:28px; border-radius:9px;
  display:grid; place-items:center; font-weight:800; font-size:.86rem; color:#fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

/* ---------- Commande ---------- */
.order-layout{ display:grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); gap: 28px; align-items:start; }
.order-form .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.order-form .form-row.three{ grid-template-columns: 1.3fr 1fr .8fr; }
.order-form label{ margin-top:0; }
/* align-content:start : sans ça, la colonne la plus courte étire ses rangées
   pour suivre la plus haute (indice de deux lignes sous le courriel) et les
   deux champs ne sont plus alignés. */
.order-form .field{ display:grid; gap:7px; align-content:start; margin-top:16px; font-weight:600; font-size:.95rem; position:relative; }
.order-form .field > span .opt{ color:var(--muted); font-weight:500; font-size:.85rem; }
.order-form .field > span .req{ color:var(--brand); }
.order-form .hint{ font-size:.84rem; color:var(--muted); font-weight:500; }
.order-form .err{ font-size:.84rem; color:#f0b48c; font-weight:600; }
.order-form .ok-msg{ font-size:.84rem; color:#8ce0ab; font-weight:600; }
.order-form input.is-invalid, .order-form select.is-invalid{ border-color:#c7703f; }
.order-form input.is-valid{ border-color: rgba(52,199,123,.55); }
.order-form select:disabled{ opacity:1; color:var(--text); cursor:not-allowed; }
.fieldset-title{
  margin: 26px 0 0; padding-top:18px; border-top:1px solid var(--line);
  font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700;
}
.fieldset-title:first-of-type{ margin-top:18px; }

.addr-suggest{
  position:absolute; top:100%; left:0; right:0; z-index:30; margin-top:4px;
  background: var(--surface-2); border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); overflow:hidden; max-height:320px; overflow-y:auto;
}
.addr-suggest button{
  display:block; width:100%; text-align:left; padding:11px 14px; background:transparent; border:0;
  border-top:1px solid var(--line); color:var(--text); font:inherit; font-size:.93rem; cursor:pointer;
}
.addr-suggest button:first-child{ border-top:none; }
.addr-suggest button:hover, .addr-suggest button.is-focus{ background: var(--surface-3); }
.addr-suggest .sub{ display:block; color:var(--muted); font-size:.82rem; font-weight:500; }
.addr-suggest .foot{ padding:7px 14px; font-size:.74rem; color:var(--muted); border-top:1px solid var(--line); }

.send-btn{ margin-top:22px; padding:16px 20px; font-size:1.05rem; }
.send-btn:disabled{
  background: var(--surface-2); color: #6b7892; box-shadow:none; cursor:not-allowed;
  border-color: var(--line-strong); transform:none;
}
.send-btn:not(:disabled){ animation: send-glow 2.4s ease-in-out infinite; }
@keyframes send-glow{
  0%,100%{ box-shadow: 0 8px 22px rgba(31,122,224,.30); }
  50%    { box-shadow: 0 8px 30px rgba(59,155,255,.60), 0 0 0 4px rgba(59,155,255,.14); }
}
.send-state{ margin-top:10px; font-size:.88rem; color:var(--muted); text-align:center; }
.send-state.is-ready{ color:#8ce0ab; }

.order-summary{ position:sticky; top:92px; }
.order-item{ display:flex; gap:14px; align-items:flex-start; }
.order-item img{ width:92px; height:92px; object-fit:contain; border-radius:12px; border:1px solid var(--line); flex:0 0 auto; background:var(--bg-2); }
.order-item h3{ font-size:1.02rem !important; margin:0 0 6px !important; line-height:1.3; }
.order-lines{ margin:16px 0 0; padding:0; list-style:none; }
.order-lines li{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:.94rem; }
.order-lines li span:last-child{ font-weight:700; text-align:right; }
.order-lines li.total{ font-size:1.02rem; }
.order-done{ text-align:left; }
.order-done h2{ margin:0 0 10px; font-size:1.6rem; }
.order-recap{
  margin-top:16px; padding:14px 16px; border-radius: var(--radius-sm); background: var(--bg-2);
  border:1px solid var(--line); white-space:pre-wrap; font-size:.9rem; line-height:1.5; color: rgba(238,242,249,.88);
}

/* ---------- Lightbox boutique ---------- */
.shop-lightbox .lightbox-content img{ cursor:default; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .shop-layout{ grid-template-columns: 1fr; }
  .shop-filters{ position:static; }
  .shop-filters > summary{ display:flex; }
  .filters-body{ padding-top:0; }
  .product-layout, .product-details, .order-layout{ grid-template-columns: 1fr; }
  .order-summary{ position:static; order:-1; }
}
@media (max-width:760px){
  .product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
  .product-body{ padding:12px 12px 14px; }
  .product-card .product-name{ font-size:.94rem; }
  .product-summary{ display:none; }
  .price-now{ font-size:1.08rem; }
  .product-badges{ top:7px; left:7px; right:7px; flex-direction:column; }
  .badge-cond, .badge-promo, .badge-status{ font-size:.68rem; padding:4px 8px; }
  .shop-toolbar{ flex-direction:column-reverse; align-items:stretch; gap:10px; }
  .shop-toolbar-right{ justify-content:stretch; flex-wrap:nowrap; }
  .shop-toolbar input[type="search"]{ max-width:none; flex:1 1 auto; }
  .shop-toolbar select{ flex:0 0 auto; width:auto; max-width:46%; }
  .order-form .form-row, .order-form .form-row.three{ grid-template-columns: 1fr; gap:0; }
  .cat-chips{ flex-wrap:nowrap; overflow-x:auto; margin-inline:-18px; padding-inline:18px; padding-bottom:6px; scrollbar-width:none; }
  .cat-chips::-webkit-scrollbar{ display:none; }
  .cat-chip{ flex:0 0 auto; }
}
@media (max-width:400px){
  .product-grid{ grid-template-columns: 1fr 1fr; gap:10px; }
}