/* MARKET C — l'étape Marché (assets/marche.js). Direction C validée le 30 sept. 2026 : 3 recherches vertes à leur
   échelle, le reste en agrégat hachuré hors échelle, le total comme moment fort, une phrase, l'opportunité inline. */
.mc { font-family: var(--sans); color: var(--ink); }
.mc-kick { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.mc-kick b { color: var(--ink); font-weight: 700; }
/* le titre validé, noir sur crème : jamais de fond, d'ombre ni de surlignage */
.mc-titre { margin: 10px 0 0; padding: 0; font-size: 36px; line-height: .95; font-weight: 900; letter-spacing: -.035em; text-transform: uppercase; background: none; box-shadow: none; -webkit-tap-highlight-color: transparent; }

/* LES 3 RECHERCHES : toutes vertes, comparées entre elles (la plus forte = 100 %) */
.mc-barres { list-style: none; margin: 16px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.mc-l { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: baseline; padding: 10px 0 11px; border-bottom: 1px solid var(--line-fort); }
.mc-lib { grid-column: 1; grid-row: 1; font: 600 15px/1.25 var(--mono); letter-spacing: -.01em; overflow-wrap: anywhere; }
.mc-vol { grid-column: 2; grid-row: 1; font: 700 17px/1 var(--mono); letter-spacing: -.02em; white-space: nowrap; text-align: right; }
.mc-vol small, .mc-r-v small { margin-left: 4px; font-size: 11px; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.mc-piste { grid-column: 1 / 3; grid-row: 2; display: block; height: 16px; margin-top: 7px; }
.mc-piste i { display: block; height: 100%; width: var(--w); background: var(--marker); box-shadow: inset 0 0 0 1.5px var(--ink); transform-origin: left; }
/* À DISTANCE : une modalité, pas une portée ; affiché seulement quand il distingue quelque chose */
.mc-tag { display: inline-block; margin-left: 6px; padding: 2px 5px 1px; font: 700 9.5px/1.2 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px; border: 1.5px solid var(--ink); background: var(--porcelaine); white-space: nowrap; }

/* LE RESTE : un agrégat, pas une 4e recherche ; bande hachurée pleine largeur, hors échelle */
.mc-reste { margin: 10px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px; border: 1.5px solid var(--ink);
  background: repeating-linear-gradient(-45deg, var(--line-fort) 0 1px, transparent 1px 7px); }
.mc-reste span { background: var(--porcelaine); padding: 4px 7px; }
.mc-r-l { font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.mc-r-v { font: 700 15px/1 var(--mono); letter-spacing: -.02em; white-space: nowrap; }

/* le moment fort */
.mc-payoff { margin-top: 18px; }
.mc-n { margin: 0; font-weight: 900; letter-spacing: -.055em; line-height: .86; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-u { margin: 8px 0 0; font-size: 22px; line-height: 1; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; }
/* le scope accompagne le total sans lui voler l'attention : une puce verte cernée d'encre, puis le texte */
.mc-z { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font: 600 13px/1.3 var(--mono); letter-spacing: .02em; }
.mc-z::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--marker); box-shadow: inset 0 0 0 1.5px var(--ink); }
.mc-insight { margin: 14px 0 0; padding-top: 11px; border-top: 1px solid var(--line-fort); font-size: 15.5px; line-height: 1.33; font-weight: 600; letter-spacing: -.01em; }
.mc-vide { margin: 18px 0 0; padding-top: 12px; border-top: 2px solid var(--ink); font-size: 16px; line-height: 1.35; font-weight: 600; }

/* L'OPPORTUNITÉ : une découverte, pas un filtre ; contrôle secondaire inline, jamais le CTA principal */
.mc-opp { margin-top: 10px; padding: 9px 0 0; border-top: 2px solid var(--ink); }
.mc-opp-k { margin: 0; display: flex; align-items: center; gap: 7px; font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.mc-opp-k i { width: 9px; height: 9px; background: var(--marker); box-shadow: inset 0 0 0 1.5px var(--ink); }
.mc-opp-t { margin: 5px 0 0; font-size: 16.5px; line-height: 1.12; font-weight: 800; letter-spacing: -.015em; text-transform: uppercase; }
/* l'action contextuelle : un rectangle éditorial (bord noir net, fond crème), distinct du CTA principal vert et arrondi */
.mc-lien { margin-top: 9px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 11px 20px; cursor: pointer; background: var(--porcelaine); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 2px; font: 700 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.mc-lien svg { width: 14px; height: 14px; }
.mc-lien:hover { background: var(--ink); color: var(--porcelaine); }
.mc-lien:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mc-retour { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mc-retour .mc-lien { margin-top: 0; }
.mc-retour .mc-opp-k { color: var(--dim); }

/* « Métier incorrect ? Corriger » : sous le CTA, un lien texte, rien de plus */
.mc-corriger { margin: 10px 0 0; font: 500 12px/1.4 var(--mono); color: var(--dim); }
.mc-corriger .lien-corriger { font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; cursor: pointer; }

.mc-anime .mc-piste i { animation: mc-pousse .7s cubic-bezier(.2,.7,.2,1) both; }
.mc-anime .mc-l:nth-child(2) .mc-piste i { animation-delay: .1s; }
.mc-anime .mc-l:nth-child(3) .mc-piste i { animation-delay: .2s; }
.mc-anime .mc-reste, .mc-anime .mc-payoff { animation: mc-monte .5s .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes mc-pousse { from { transform: scaleX(0); } }
@keyframes mc-monte { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .mc-anime .mc-piste i, .mc-anime .mc-reste, .mc-anime .mc-payoff { animation: none; } }
