/* Product catalogue · offer dossiers
   Derived from the atomic offer, conversion-card and proof-orbit
   references: calm editorial hierarchy, explicit facts and one clear action. */
.products-catalogue{padding-top:42px}
.products-catalogue .category-switch{margin-bottom:34px}

.filter-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px 24px;
  flex-wrap:wrap;
  margin:0 0 26px;
  padding:14px 18px;
  border:1px dashed var(--line-strong);
  border-radius:16px;
  background:color-mix(in srgb,var(--cyan) 5%,transparent);
}
.filter-note p{margin:0;color:var(--silver);font-size:.88rem}
/* The empty state is a grid item like any card, so without this it renders as a
   narrow column in the first track rather than as the row's message. */
.product-grid .category-empty{grid-column:1/-1}

.product-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  min-width:0;
  min-height:520px;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:
    linear-gradient(155deg,color-mix(in srgb,var(--surface) 96%,var(--violet) 4%),var(--surface-2));
  box-shadow:0 22px 64px rgba(6,8,32,.28);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.product-card:before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,var(--violet),color-mix(in srgb,var(--violet) 72%,var(--cyan)),var(--cyan));
  opacity:.82;
}
.product-card:hover,.product-card:focus-within{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--lavender) 56%,var(--line));
  box-shadow:0 30px 86px rgba(6,8,32,.42),0 0 0 1px color-mix(in srgb,var(--violet) 16%,transparent);
}
.product-card:last-child:nth-child(3n+1){grid-column:1/-1;min-height:0}
.product-card:last-child:nth-child(3n+1) .product-card-body h2{max-width:24ch}
.product-card:last-child:nth-child(3n+1) .product-card-body p{max-width:78ch}
.product-card-index{
  color:var(--silver);
  font-size:.65rem;
  font-weight:760;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.product-card-facts .product-price{color:var(--paper);font-size:1rem;font-variant-numeric:tabular-nums}
.product-card-facts .product-price--free{color:var(--cyan)}

@media(max-width:1060px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-card:last-child:nth-child(3n+1){grid-column:auto;min-height:520px}
  .product-card:last-child:nth-child(odd){grid-column:1/-1;min-height:0}
  .product-card:last-child:nth-child(odd) .product-card-body h2{max-width:24ch}
}
@media(max-width:700px){
  .products-catalogue{padding-top:30px}
  .product-grid{grid-template-columns:1fr}
  .product-card,.product-card:last-child:nth-child(odd){grid-column:auto;min-height:0}
  .product-card-header{min-height:104px;padding:22px 20px 19px}
  .product-card-body{padding:24px 20px 26px}
  .product-card-body h2{max-width:18ch;font-size:1.8rem}
  .product-card-facts{padding-inline:20px}
  .product-card-footer{padding:16px 20px 20px}
  .product-detail{padding:22px 20px 24px}
  .product-meta{grid-template-columns:1fr}
  .product-meta>div{padding-right:0}
  .product-meta>div+div{margin-top:16px;padding:16px 0 0;border-left:0;border-top:1px solid var(--line)}
  .product-actions .button{width:100%}
}
/* Single product page — the non-catalogue view at
   /ressources/produits/<category>/<slug>/ */
.product-price--large{margin:16px 0 0;font-family:var(--font-display);font-size:clamp(2rem,4vw,2.7rem);font-weight:700;color:var(--paper)}
.product-price--large.product-price--free{color:var(--cyan)}
/* The period is what separates a subscription from a one-off purchase, so it
   sits next to the amount rather than in a footnote — at body weight, because
   "/ mois" is a qualifier and not part of the figure. */
.product-price-period{margin-left:6px;font-family:var(--font-body);font-size:.42em;font-weight:700;color:var(--silver)}
.product-price-tax{margin:8px 0 0;color:var(--silver);font-size:.78rem}
/* Under the price group the note closes the pricing statement, so it carries the
   gap to whatever follows rather than letting the group and the panel collide. */
.price-group--detail+.product-price-tax{margin:0 0 30px}

/* The body panel: the two facts that qualify the offer, then the way in. It is
   a panel rather than loose text because the description now lives in the hero
   only — what is left is structured, and reads as a specification. */
.product-detail{
  max-width:760px;
  padding:26px 28px 28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(145deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow);
}
.product-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0;
}
.product-meta>div{min-width:0;padding-right:18px}
.product-meta>div+div{padding-left:18px;border-left:1px solid var(--line)}
.product-meta dt{
  margin:0 0 6px;
  color:var(--silver);
  font-size:.62rem;
  font-weight:770;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.product-meta dd{margin:0;color:var(--paper);font-size:.92rem;font-weight:730}
.product-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

@media(prefers-reduced-motion:reduce){
  .product-card,.product-card-cta span{transition:none}
  .product-card:hover,.product-card:focus-within{transform:none}
}
@media print{
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-card{min-height:0;break-inside:avoid;box-shadow:none;background:#fff}
  .product-card-orbit{box-shadow:none}
}

.category-note{
  margin:0 0 24px;
  padding:16px 20px;
  border-radius:16px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--cyan) 10%,transparent);
  color:var(--paper);
  font-size:.95rem;
}

/* Pack landing sections on the product detail page */
.pack-landing{margin-top:40px;padding-top:40px;border-top:1px solid var(--line)}
.pack-landing h2{font-family:var(--font-display);font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:700;color:var(--paper);margin:0 0 12px}
.pack-landing .lead{color:var(--silver);font-size:1.05rem;line-height:1.65;margin:0 0 28px;max-width:72ch}
.pack-landing h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--lavender);margin:0 0 16px;letter-spacing:.02em}

.pack-sequence-steps{display:flex;align-items:center;flex-wrap:wrap;gap:10px 6px;margin:0 0 28px}
.pack-step{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.pack-step-glyph{font-size:.85rem;font-weight:700;color:var(--violet)}
.pack-step-name{font-size:.92rem;color:var(--paper);font-weight:600}
.pack-step-join{color:var(--silver);font-size:1.1rem;margin:0 4px}

.pack-landing-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.pack-landing-cta-note{color:var(--silver);font-size:.88rem;margin:0}

.pack-landing-architecture{margin:0 0 28px}
.pack-landing-architecture .check-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pack-landing-architecture .check-list li{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:.95rem;color:var(--paper)}
.pack-landing-architecture .check-list li a{color:var(--cyan);text-decoration:none}
.pack-landing-architecture .check-list li a:hover{text-decoration:underline}

@media(max-width:700px){
  .pack-sequence-steps{flex-direction:column;align-items:flex-start}
  .pack-step-join{transform:rotate(90deg);margin:4px 0}
}

/* The strategic-configuration block that used to live below this line went
   with bundle_packs.html, the standalone page it was ported from. Its
   replacement — the composition atlas — has its own vocabulary and its own
   stylesheet, pages/products-bundles.css. Nothing routed referenced these
   rules any more, and several of them hardcoded dark-only hexes (#090f20,
   #263159, #341a20) and a --muted variable this codebase never defined. */

/* Catalogue explorer — five facets, one GET form.

   Same anatomy as .capability-query on the expertises page (pages/offer.css):
   a grid of labelled selects that collapses to two columns and then to one.
   Kept as its own class rather than reusing that one, because the two pages
   load different stylesheets and sharing would mean loading offer.css here for
   four rules. The measurements are deliberately identical so the two controls
   read as one component of the site rather than two designs. */
.catalogue-query{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr)) auto auto;gap:12px;align-items:end;margin:26px 0 16px;padding:20px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 92%,transparent)}
.catalogue-query label{display:grid;gap:7px;color:var(--silver);font-size:.7rem;font-weight:780;letter-spacing:.07em;text-transform:uppercase}
.catalogue-query select{width:100%;min-height:46px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-2);color:var(--paper);font:inherit;font-size:.83rem;letter-spacing:0;text-transform:none}
.catalogue-query select:focus{outline:2px solid var(--cyan);outline-offset:2px}
.catalogue-query-reset{align-self:center;white-space:nowrap}
.filter-count{margin:0 0 18px;color:var(--silver);font-size:.82rem}
@media(max-width:1120px){.catalogue-query{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.catalogue-query{grid-template-columns:1fr}.catalogue-query .button{width:100%}}

/* One framework, its editions side by side (products/product_family.html). */
.family-editions{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:24px 0 0}
.family-edition{display:flex;flex-direction:column;gap:14px;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.family-edition-head h3{margin:0;font-size:1.2rem}
.family-edition-role{margin:6px 0 0;color:var(--silver);font-size:.86rem;line-height:1.5}
.family-edition-body{margin:0;color:var(--paper);font-size:.9rem;line-height:1.6}