/* ==========================================================================
   Situations — "which formula fits your case?" lookup tables on
   pages/products.html, shown before the product cards. Tables reuse
   .faq__table / .faq__table-wrap as-is (css/components/faq.css) so the
   table look stays in one place; this file only adds the layout around
   them (group headings, note).
   Blocks: .situations__note, .situations__group, .situations__table-wrap,
           .situations__actions, .situations__toggle, .situations__group-toggle,
           .situations__formula-link
   ========================================================================== */

/* Header/note in this section read left-to-right like a document intro,
   unlike the centered headers used elsewhere (.section--centered still
   centers the section as a whole on the page). */
.situations {
  align-items: stretch;
}

.situations__header {
  max-width: 720px;
  align-items: flex-start;
  text-align: left;
}

.situations__note {
  max-width: 720px;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--color-text-secondary);
  text-align: left;
}

.situations__groups {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.situations__group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.situations__group-title {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

/* Same visual component as .faq__table-wrap, minus the left indent that
   exists there to align under the accordion's icon column. */
.situations__table-wrap {
  margin: 0;
}

/* Each group is a separate <table>, so with the default auto layout every
   one sizes its "Formule suggérée" column independently off its own
   content — the column starts at a different x-position table to table.
   A fixed width pins that start point identically across all 4 tables
   (kept tight to the longest label, e.g. "L'Opérationnel", rather than
   the widest table's content, so it doesn't read as empty space). */
.situations__table-wrap .faq__table {
  table-layout: fixed;
}

.situations__table-wrap .faq__table th:last-child,
.situations__table-wrap .faq__table td:last-child {
  width: 170px;
}

/* Collapsed by default — only the first group's table shows, so a visitor
   reaches the product cards after one table instead of scrolling past all
   4, until .situations__actions' global toggle reveals the other 3
   (js/situations.js). */
.situations__groups:not(.is-expanded) .situations__group:nth-child(n + 2) {
  display: none;
}

/* Within each group, the base rows show; the rest sit in a second <tbody>
   collapsed by default until that group's own toggle reveals them
   (js/situations.js) — independent per table. */
.situations__table-more {
  display: none;
}

.situations__group.is-expanded .situations__table-more {
  display: table-row-group;
}

/* Plain red underlined text — not a pill button like .situations__toggle
   below, so it reads as a lightweight "expand this table" link rather than
   competing with the section's two main CTAs. */
.situations__group-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-red);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition-fast);
}

.situations__group-toggle:hover {
  text-decoration-color: currentColor;
}

/* Row for the section's two CTAs — expanding the tables and jumping
   straight to #modal-formules — so they read as a pair instead of the
   modal link feeling like an afterthought below. */
.situations__actions {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.situations__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border-strong);
  background: var(--color-white);
  color: var(--color-red);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.situations__toggle:hover {
  background: var(--color-surface-50);
}

.situations__toggle-icon {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--transition-base);
}

.situations__toggle.is-open .situations__toggle-icon {
  transform: rotate(180deg);
}

/* On a narrow phone the fixed 170px "Formule suggérée" column is wide
   relative to its short labels, so left-aligned text sits in the middle
   of the column with dead space on both sides. Right-aligning it there
   pins it against the table's own right edge instead. */
@media (max-width: 640px) {
  .situations__table-wrap .faq__table th:last-child,
  .situations__table-wrap .faq__table td:last-child {
    text-align: right;
  }
}

/* Solid variant for the "Voir les formules en détail" CTA — same pill
   shape as .situations__toggle, but filled so it reads as the more
   committal action next to the plain outline "voir plus" toggle. */
.situations__formulas-btn {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

.situations__formulas-btn:hover {
  background: var(--color-red-dark);
  border-color: var(--color-red-dark);
}

/* "Formule suggérée" cells — each one opens #modal-formules on the right
   side/tier (js/formulas-modal.js) instead of just naming the formula. */
.situations__formula-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-red);
  cursor: pointer;
  text-decoration: underline !important;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition-fast);
}

.situations__formula-link:hover {
  text-decoration-color: currentColor;
}