:root{
  --card-bg:#fff;
  --card-border:#e7e7e7;
  --card-radius:12px;
  --shadow-1:0 2px 8px rgba(0,0,0,.06);
  --shadow-2:0 12px 28px rgba(0,0,0,.10);
  --muted:#6f6f6f;
  --accent:#8b4513;
}
body{ font-family: var(--font-family); }
.content{ max-width:1200px; padding:2.2rem 2rem; }

.shop-header{ text-align:center; margin-bottom: 1.2rem; }
.shop-header h1.centered-title{ margin-bottom:.2rem; }
.shop-subtitle{ margin-top:.2rem; color:var(--secondary-text-color); letter-spacing:.2px; }

.products-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 1.4rem; }

.product-card {
  grid-column: span 12;
  background: var(--card-bg);
  border: 1px solid #e9e5e2;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-1);
  padding: 1.5rem 1.5rem 1.25rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: #e2ddd9;
}

@media (min-width: 640px) {
  .product-card {
    grid-column: span 6;
  }
}
@media (min-width: 1024px) {
  .product-card {
    grid-column: span 4;
  }
}
.product-card header {
  margin-bottom: 0.6rem;
  text-align: center;
}
.product-card h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-color);
}
.product-meta {
  margin: 0.25rem 0 0;
  color: var(--secondary-text-color);
  font-size: 0.96rem;
  text-align: center;
}
.product-card p,
.product-card li {
  text-align: justify;
  text-justify: inter-word;
  overflow-wrap: anywhere;
  color: var(--text-color);
}
.product-card p {
  margin-bottom: 0.6rem;
}
.product-card ul {
  margin: 0.35rem 0 0 0;
  list-style-position: inside;
  padding-left: 0;
  text-align: justify;
  text-justify: inter-word;
}
.product-card ul li {
  margin-bottom: 0.4rem;
}
.pricing{
  display:flex; gap:.55rem; align-items:baseline; margin-top:.55rem;
  border-left: 3px solid var(--primary-color);
  padding-left: .6rem;
}
.pricing .ht{ font-weight:700; color:var(--text-color); }
.pricing .ttc{ color: var(--secondary-text-color); font-size:.95rem; }

.product-actions{ margin-top:.7rem; display:flex; flex-direction:column; gap:.6rem; align-items:center; width:100%; }
.cta-wrapper{ width:100%; text-align:center; margin-bottom:.3rem; }

.cta-button-boutique {
  display: inline-block;
  padding: 15px 30px;
  background-color: var(--primary-color);
  color: white !important;
  text-decoration: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  line-height: normal;
  transition: background-color 0.3s ease;
  text-align: center;
  overflow: visible;
  text-indent: 0;
  border: none;
  box-shadow: none;
}

.cta-button-boutique:hover {
  background-color: var(--secondary-color);
}

.cta-button-boutique--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.product-footnote{ color: var(--secondary-text-color); font-size:.85rem; margin-top:.45rem; }

.modal-backdrop{ position:fixed; inset:0; display:none; z-index:9999; background:rgba(0,0,0,.55); }
.modal-backdrop[aria-hidden="false"]{ display:block; }
.modal{ position:fixed; inset:0; display:grid; place-items:center; padding:1rem; }
.modal-dialog{
  width:min(980px,96vw); max-height:86vh; overflow:auto;
  background:#fff; border:1px solid var(--card-border);
  border-radius:16px; box-shadow: 0 18px 50px rgba(0,0,0,.22);
  padding: 1.2rem 1.25rem 1rem;
}
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.25rem; }
.modal-title{ margin:0; font-size: var(--font-size-medium); text-align:center; width:100%; color: var(--text-color); }

.modal-close {
  position: static;
  width: 20px; height: 20px; line-height: 20px; text-align: center;
  font-size: 24px; color: var(--primary-color);
  background-color: #fff; border: none; border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  cursor: pointer; transition: all .3s ease; padding: 0;
}
.modal-close:hover { background-color: var(--primary-color); color:#fff; }

.modal-body p, .modal-body li, .modal-body .notice{
  hyphens:none !important; -webkit-hyphens:none !important; -ms-hyphens:none !important;
}
.modal-body p, .modal-body li{ text-align: justify; text-justify: inter-word; overflow-wrap: anywhere; }
.modal-body .muted{ color: var(--secondary-text-color); text-align:center; }
.modal-body .notice{
  background:#fff8e6; border:1px solid #f0d48a; color:#6b5414;
  padding:.85rem 1rem; border-radius: var(--border-radius); margin:1rem 0;
  text-align: justify; text-justify: inter-word;
}
.modal-body h2{ font-size: var(--font-size-medium); color: var(--text-color); margin: 2rem 0 1rem; }
.modal-body .annexe-title{ text-align:center; }
.modal-body pre{ background:#f6f6f6; border:1px solid #eee; padding:.75rem 1rem; border-radius: var(--border-radius); overflow:auto; }

body.modal-open{ height:100vh; overflow:hidden; }
.overlay{ background: rgba(0,0,0,.26); }

.hidden {
  display: none !important;
}

.modal-jurisprudence {
  --border: #e2e2e2;
  --border-strong: #d6d6d6;
  --fg: #1f2937;
  --fg-muted: #6b7280;
  --bg: #ffffff;
  --bg-open: #fafafa;
  --focus: #2563eb;
}

.modal-jurisprudence .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  color: var(--fg);
  background: var(--bg);
}

.modal-jurisprudence h1.title-centered {
  text-align: center;
  margin: 1rem 0;
}

.modal-jurisprudence .container p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.modal-jurisprudence .accordeon-decisions {
  margin: 1rem 0;
  display: grid;
  gap: .5rem;
}

.modal-jurisprudence details.decision {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  transition: background-color .2s ease, border-color .2s ease;
}

.modal-jurisprudence details.decision[open] {
  background: var(--bg-open);
  border-color: var(--border-strong);
}

.modal-jurisprudence details.decision > summary {
  display: flex;
  align-items: center;
  padding: .75rem 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  color: var(--fg);
  outline: none;
  user-select: none;
  text-align: justify;
  line-height: 1.4;
}

.modal-jurisprudence details.decision > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: .5rem;
  color: var(--fg-muted);
  transition: transform .2s ease;
  transform: translateY(1px) rotate(0deg);
  vertical-align: middle;
}

.modal-jurisprudence details.decision[open] > summary::before {
  transform: translateY(1px) rotate(90deg);
}

.modal-jurisprudence details.decision > summary::-webkit-details-marker { display: none; }

.modal-jurisprudence details.decision > summary:hover {
  background: rgba(0,0,0,0.03);
}

.modal-jurisprudence details.decision > summary:active {
  background: rgba(0,0,0,0.06);
}

.modal-jurisprudence details.decision > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.modal-jurisprudence details.decision .decision-body {
  padding: .25rem 1rem 1rem 1.95rem;
}

.modal-jurisprudence details.decision .decision-body p {
  margin: .5rem 0;
}

@media (prefers-reduced-motion: reduce) {
  .modal-jurisprudence details.decision > summary::before,
  .modal-jurisprudence details.decision,
  .modal-jurisprudence details.decision > summary {
    transition: none !important;
  }
}