/* ================================================================
   ARROW — USP.CSS
   Styles partagés par les deux pages hors navigation :
   usp.html (« Pourquoi Arrow ») et comparatif.html (« Arrow face
   au marché »). Charge après tokens.css et base.css.
   Le tableau comparatif reprend le style .compare-table de la home
   (home.css n'est pas chargée hors home, pas de conflit).
   ================================================================ */

/* ---------- Les 4 cases (constat de marché) ---------- */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.market-card { text-align: left; }
.market-card__idx {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--primary);
  display: block;
  margin-bottom: 10px;
}
.market-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.market-card p { margin: 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; }

/* ---------- Cartes USP numérotées ---------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.usp-card { text-align: left; }
.usp-card__idx {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--primary);
  display: block;
  margin-bottom: 10px;
}
.usp-card h3 { margin: 0 0 10px; font-size: 1.08rem; }
.usp-card p { margin: 0 0 8px; color: var(--ink-dim); font-size: 14.5px; line-height: 1.62; }
.usp-card p:last-child { margin-bottom: 0; }
.usp-card p strong { color: var(--ink); }

/* ---------- Liste compacte « Et aussi » ---------- */
.usp-more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.usp-more li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.55;
}
.usp-more li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--primary);
}
.usp-more li strong { color: var(--ink); }

/* ---------- Tableau comparatif (repris de home.css) ---------- */
.compare-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.compare-table thead th {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface-1);
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table td:first-child { color: var(--ink); font-weight: 500; }
.compare-table .col-before { color: var(--ink-dim); }
.compare-table .col-after { color: var(--success); }

/* Variante matrice familles du marché : Arrow en dernière colonne */
.compare-table--matrix td, .compare-table--matrix th { text-align: center; }
.compare-table--matrix td:first-child, .compare-table--matrix th:first-child { text-align: left; }
.compare-table--matrix .cell-yes { color: var(--success); font-weight: 700; }
.compare-table--matrix .cell-part { color: var(--warning); }
.compare-table--matrix .cell-no { color: var(--ink-faint); }
.compare-table--matrix .col-arrow { background: rgba(61, 155, 255, 0.07); }
.compare-table--matrix thead .col-arrow { color: var(--primary); }

.compare-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}

/* ================================================================
   Extension matrice NOMMÉE (comparatif.html, juillet 2026) :
   colonnes concurrents nommées, badges de type de cellule,
   bande méta HUD, légende et bloc note méthodologique.
   ================================================================ */

/* ---------- Bande méta HUD ---------- */
.matrix-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  justify-content: center;
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.matrix-hud span { display: inline-flex; align-items: center; gap: 9px; }
.matrix-hud span::before { content: ""; width: 18px; height: 1px; background: var(--primary-line); }
.matrix-hud .is-accent { color: var(--primary); }
.matrix-hud--head { margin: 16px 0 0; }

/* ---------- Légende des types de cellules ---------- */
.matrix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
  margin: 0 0 22px;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.matrix-legend span { display: inline-flex; align-items: center; gap: 7px; }
.matrix-legend span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.matrix-legend .lg-yes::before { background: var(--success); }
.matrix-legend .lg-part::before { background: var(--warning); }
.matrix-legend .lg-nc::before { background: transparent; border: 1px solid var(--ink-faint); }
.matrix-legend .lg-no::before { background: var(--ink-faint); }

/* ---------- Tableau nommé : 1 colonne critère + 7 solutions ---------- */
.compare-table--named { min-width: 1180px; table-layout: fixed; }
.compare-table--named th,
.compare-table--named td {
  text-align: left;
  vertical-align: top;
  padding: 14px;
  font-size: 13px;
  color: var(--ink-dim);
}
.compare-table--named td:first-child,
.compare-table--named thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg);
  box-shadow: inset -1px 0 0 var(--hairline);
  width: 172px;
}
.compare-table--named thead th:first-child { background: var(--surface-1); }
.compare-table--named .mx-name {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}
.compare-table--named thead .col-arrow .mx-name { color: var(--primary); }
.compare-table--named .mx-vendor {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
}
.compare-table--named .mx-crit { display: block; color: var(--ink); font-weight: 600; line-height: 1.4; }
.compare-table--named .mx-crit-sub {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-faint);
  font-weight: 400;
}

/* Colonne Arrow mise en avant */
.compare-table--named .col-arrow {
  border-left: 1px solid var(--primary-line);
  border-right: 1px solid var(--primary-line);
}
.compare-table--named td.col-arrow .cell-txt { color: var(--ink); }

/* Types de cellules : le badge porte la couleur, le détail reste lisible */
.compare-table--named .cell-yes,
.compare-table--named .cell-part,
.compare-table--named .cell-no { font-weight: 400; }
.compare-table--named .cell-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  white-space: nowrap;
  color: var(--ink-faint);
}
.compare-table--named .cell-yes .cell-flag {
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}
.compare-table--named .cell-part .cell-flag {
  color: var(--warning);
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
}
.compare-table--named .cell-txt {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  font-weight: 400;
}
.compare-table--named .cell-flag + .cell-txt { margin-top: 7px; }
.compare-table--named td > .cell-txt:only-child { margin-top: 0; }

@media (max-width: 640px) {
  .compare-table--named td:first-child,
  .compare-table--named thead th:first-child { width: 140px; }
}

/* ---------- Bloc note méthodologique ---------- */
.method-note {
  margin-top: 28px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 30px);
}
.method-note__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.method-note__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
}
.method-note__date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.method-note p {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-muted);
}
.method-note p:last-child { margin-bottom: 0; }
.method-note .method-note__marks { font-size: 11.5px; color: var(--ink-faint); }

/* ================================================================
   Habillage « Cinéma continu » de usp.html (juillet 2026).
   Append-only, scopé sous main.usp-chapter : comparatif.html, qui
   charge aussi ce fichier (.compare-table*, .matrix-*, .method-note,
   .market-grid, .usp-grid, .usp-more), n'est pas affecté.
   ================================================================ */
.usp-chapter .market-card__idx,
.usp-chapter .usp-card__idx {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--primary);
  opacity: 0.55;
  margin-bottom: 12px;
}
.usp-chapter .mod__head { margin-bottom: clamp(30px, 5vh, 48px); }
.usp-chapter .mod__head .mod__title { max-width: 26ch; }
.usp-chapter .usp-more { margin-bottom: clamp(24px, 4vh, 36px); }