/* ===== Bibliothèque de cas d'usage =====================================
   Chargée uniquement par /cas-usage, /cas-usage/<slug> et /secteurs/<slug>
   (prop `styles` de PageLayout). Reprend les tokens de styles.css.
   ====================================================================== */

/* ---- Mise en page explorateur ---- */
.uc-layout { display: grid; grid-template-columns: 236px 1fr; gap: 32px; align-items: start; }
/* min-width:0 : sans ça, la rangée de chips en nowrap dilate la colonne (min-width:auto par
   défaut sur un élément de grille) et fait déborder toute la page horizontalement. */
.uc-layout > * { min-width: 0; }

/* ---- Filtres ---- */
.uc-filters { position: sticky; top: 96px; display: grid; gap: 14px; }

.uc-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--paper); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink-500); }
.uc-search:focus-within { box-shadow: inset 0 0 0 1px var(--ink-900); color: var(--ink-900); }
.uc-search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 11px 0; font: 14px var(--font-sans); color: var(--ink-900); }
.uc-search-input::placeholder { color: var(--ink-400); }
.uc-search-input::-webkit-search-cancel-button { cursor: pointer; }

.uc-group { border-top: 1px dashed var(--hairline-strong); padding-top: 12px; }
.uc-group:first-of-type { border-top: 0; padding-top: 0; }
.uc-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; font: 500 11.5px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); padding: 4px 0; }
.uc-group-head::-webkit-details-marker { display: none; }
.uc-group-head:hover { color: var(--ink-900); }
.uc-group-head .chev { transition: transform 0.15s ease; flex: none; }
.uc-group[open] .uc-group-head .chev { transform: rotate(180deg); }

.uc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 4px; }
.uc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); font: 13px var(--font-sans); color: var(--ink-700); cursor: pointer; text-align: left; transition: box-shadow 0.12s ease, background 0.12s ease; }
.uc-chip:hover { box-shadow: inset 0 0 0 1px var(--hairline-strong); color: var(--ink-900); }
.uc-chip[aria-pressed='true'] { background: var(--ink-900); color: #fff; box-shadow: none; }
.uc-chip svg { flex: none; }
.uc-chip-count { font: 11px var(--font-mono); color: var(--ink-400); }
.uc-chip[aria-pressed='true'] .uc-chip-count { color: rgba(255, 255, 255, 0.6); }
/* Une facette qui ne mène nulle part avec les filtres courants reste lisible mais s'efface. */
.uc-chip[data-empty] { opacity: 0.38; }

.uc-reset { justify-self: start; }
/* .btn pose display:inline-flex, qui gagne contre le display:none de la feuille UA. */
.uc-reset[hidden] { display: none; }

/* ---- Résultats ---- */
.uc-count { font: 13px var(--font-sans); color: var(--ink-600); margin: 0 0 18px; }
.uc-count strong { color: var(--ink-900); }

.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.uc-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--paper); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hairline); text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.uc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--hairline-strong); }
.uc-card[hidden] { display: none; }

.uc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uc-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--ink-50); display: grid; place-items: center; color: var(--ink-700); flex: none; }
.uc-card:hover .uc-icon { background: var(--lime-200); color: var(--ink-900); }

.uc-effort { font: 500 10.5px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.uc-effort-quick-win { background: var(--lime-100); color: #5c6608; }
.uc-effort-chantier { background: var(--ink-100); color: var(--ink-700); }
.uc-effort-socle { background: var(--ink-900); color: var(--lime-300); }

.uc-card-title { font: 600 16.5px/1.35 var(--font-sans); color: var(--ink-900); margin: 0; }

/* Le symptôme est la voix du client : serif italique, comme les citations du site. */
.uc-symptom { font: italic 15px/1.5 var(--font-serif); color: var(--ink-600); margin: 0; }

.uc-result { display: flex; align-items: flex-start; gap: 7px; margin: 0; font: 500 13.5px/1.45 var(--font-sans); color: var(--forest); }
.uc-result svg { flex: none; margin-top: 3px; }

.uc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--hairline); }
.uc-delay { font: 11.5px var(--font-mono); color: var(--ink-500); }

.uc-empty { padding: 40px 0; text-align: center; font: 15px/1.6 var(--font-sans); color: var(--ink-600); max-width: 460px; margin: 0 auto; }

/* ---- Fiche ---- */
.uc-back { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline-strong); }
.uc-back:hover { color: var(--ink-900); }

.uc-hero-symptom { margin: 24px 0 0; padding: 0 0 0 20px; border-left: 3px solid var(--lime-400); font: italic 24px/1.45 var(--font-serif); color: var(--ink-800); max-width: 760px; }

.uc-outcome { margin-top: 12px; padding: 18px 20px; background: var(--paper); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hairline); }
.uc-outcome-metric { display: flex; align-items: flex-start; gap: 9px; font: 600 17px/1.4 var(--font-sans); color: var(--forest); }
.uc-outcome-metric svg { flex: none; margin-top: 3px; }
.uc-outcome-qual { margin: 8px 0 0 25px; font: 14.5px/1.55 var(--font-sans); color: var(--ink-600); }

/* Le champ « ce que ça ne fait pas » — volontairement sobre, pas alarmant. */
.uc-limits { margin-top: 32px; padding: 18px 20px; border-radius: 14px; background: var(--ink-50); box-shadow: inset 0 0 0 1px var(--hairline); }
.uc-limits-label { display: block; font: 500 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 8px; }
.uc-limits p { margin: 0; font: 14.5px/1.6 var(--font-sans); color: var(--ink-700); }

/* ---- Variantes secteur ---- */
.uc-variants { display: grid; gap: 16px; margin-top: 14px; }
.uc-variant { padding: 22px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }
.uc-variant-head { display: flex; align-items: center; gap: 8px; font: 500 12px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-500); }
.uc-variant-symptom { margin: 12px 0 0; font: italic 17px/1.5 var(--font-serif); color: var(--ink-800); }
.uc-variant-example { margin: 12px 0 0; font: 14.5px/1.65 var(--font-sans); color: var(--ink-700); }
.uc-variant-metric { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 0; font: 500 13.5px var(--font-sans); color: var(--forest); }
.uc-variant-metric svg { flex: none; margin-top: 3px; }
.uc-variant-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.uc-variant-tools span { font: 11.5px var(--font-mono); color: var(--ink-600); background: var(--ink-50); padding: 4px 9px; border-radius: 999px; }

/* ---- Colonne latérale de la fiche ---- */
.uc-aside-offer-name { display: flex; align-items: center; gap: 7px; font: 600 15px var(--font-sans); color: var(--ink-900); margin-bottom: 8px; }
.uc-aside-secondary { display: grid; gap: 4px; font: 13px/1.45 var(--font-sans); color: var(--ink-600); }
.uc-aside-proof { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uc-proof { font: 500 11px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--ink-100); color: var(--ink-700); }
.uc-proof-deployed { background: var(--forest); color: #fff; }
.uc-proof-internal { background: var(--lime-200); color: var(--ink-900); }
.uc-proof-lab { background: var(--ink-900); color: var(--lime-300); }
.uc-aside-link { font: 12.5px var(--font-sans); color: var(--ink-600); }
.uc-aside-sectors { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.uc-aside-sectors span { font: 11.5px var(--font-mono); color: var(--ink-600); background: var(--ink-50); padding: 4px 9px; border-radius: 999px; }

/* ---- Page secteur ---- */
.uc-sector-intro { max-width: 720px; }
.uc-sector-intro p { font: 16px/1.7 var(--font-sans); color: var(--ink-700); margin: 0 0 14px; }
.uc-sector-pain { margin: 24px 0 0; padding: 16px 20px; border-left: 3px solid var(--lime-400); font: italic 19px/1.5 var(--font-serif); color: var(--ink-800); max-width: 720px; }
.uc-fn-group { margin-top: 44px; }
.uc-fn-group:first-of-type { margin-top: 0; }
.uc-fn-head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; font: 500 12px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.uc-sectors-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ---- Home : bandeau bibliothèque ---- */
.uc-home-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; }

/* ---- Home : tuiles secteur cliquables ----
   .sector (styles.css) reste la tuile muette ; .sector-link n'est posée que sur les secteurs
   dont la page est effectivement générée, donc aucun de ces liens ne peut être mort. */
.sector-link { text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.sector-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--hairline-strong); }
.sector-link .sector-icon { transition: background 0.18s ease, color 0.18s ease; }
.sector-link:hover .sector-icon { background: var(--lime-200); color: var(--ink-900); }
.sector-arrow { margin-left: auto; flex: none; color: var(--ink-400); }
.sector-link:hover .sector-arrow { color: var(--ink-900); }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .uc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Les filtres passent au-dessus des résultats et défilent horizontalement. */
  .uc-layout { grid-template-columns: 1fr; gap: 20px; }
  .uc-filters { position: static; }
  .uc-group[open] .uc-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; scrollbar-width: thin; }
  .uc-group { min-width: 0; }
  .uc-chip { white-space: nowrap; }
  .uc-hero-symptom { font-size: 20px; }
}

@media (max-width: 640px) {
  .uc-grid { grid-template-columns: 1fr; }
  .uc-outcome-metric { font-size: 16px; }
}