/* 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}

/* The four facts a buyer weighs, sitting under the two that classify the offer.
   It reuses .product-meta so the page keeps one definition-list shape, and
   overrides the three things that shape assumes about its contents.

   The values here are sentences, not two-word labels, so they are set lighter
   and looser — .92rem at weight 730 is right for "PDF" and shouts at a clause.
   The rules between cells are dropped, because a vertical rule between two
   sentences reads as a table and this is a list. And the block carries its own
   top border: two adjacent .product-meta grids with nothing between them read
   as one grid of six cells, which is exactly the reading this block must not
   have — the format and the profile classify the offer, these four decide it. */
.product-value{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line);
  row-gap:18px;
}
.product-value>div+div{padding-left:0;border-left:0}
.product-value dd{font-size:.86rem;font-weight:500;line-height:1.5}
.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}