/* =========================================================
   DÉCORTICAGE MARKETING
   ---------------------------------------------------------
   Une page qui se lit d'un bout à l'autre, contrairement à
   la page des noms qu'on parcourt. Donc : recette « lecture »
   du carnet — 17 px, une colonne de 760 px comme le Dossier
   Reis, titres à pastille citron, gras surligné, et des
   encadrés pour ce qui doit rester même quand on survole.

   S'appuie sur noms.css (chargée avant) pour le bandeau, les
   titres de section, les cartes et le pied de page. Jetons
   de carnet.css uniquement.
   ========================================================= */

body.mkt { font-size: 17px; line-height: 1.65; }
body.mkt main.wrap { max-width: calc(760px + 2 * clamp(16px, 4vw, 36px)); }

.mkt .sec { margin: 0 0 56px; }
.mkt .sec__t { margin-bottom: 12px; }
.mkt .sec__i { margin: 0 0 18px; max-width: 68ch; font-size: 17px; color: var(--ink); }

/* ---------------------------------------------------------
   Les encadrés
   · .enc          une carte simple
   · .enc--rouge   l'alerte : filet rouge
   · .enc--vert    l'essentiel à retenir : fond sapin, comme
                   le bloc « L'idée d'Andrea » du Dossier Reis
   --------------------------------------------------------- */

.enc {
  margin: 20px 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.enc p { margin: 0 0 12px; max-width: 68ch; color: var(--ink); }
.enc p:last-child { margin-bottom: 0; }
.enc em { color: var(--ink-2); }
.enc:not(.enc--vert) p strong {
  font-weight: 600;
  background: linear-gradient(transparent 56%, var(--surligne) 56%);
  padding: 0 2px;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.enc--rouge { border-color: var(--negatif); }

.enc--vert { background: var(--band); border-color: var(--band); color: var(--band-ink); }
.enc--vert p { color: var(--band-ink); }
.enc--vert strong { color: var(--citron); font-weight: 600; }
.enc--vert em { color: var(--band-ink-2); }

.enc .enc__k {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 11px;
  border-radius: 999px;
  background: var(--citron);
  color: var(--on-citron);
  font: 700 13px/1.5 var(--body);
}

/* ---------------------------------------------------------
   Les 14 étapes de l'architecture
   --------------------------------------------------------- */

.mkt .etapes { margin: 8px 0 0; padding: 0; list-style: none; max-width: none; }
.etapes li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.etapes li:last-child { border-bottom: 0; }
.etapes b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--band);
  color: var(--citron);
  font: 700 13px/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.etapes strong {
  display: block;
  margin: 5px 0 2px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}
.etapes p { margin: 0; max-width: 68ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------------------------------------------------------
   Les listes dans les cartes de ressorts (cartes denses :
   gras sans surligné)
   --------------------------------------------------------- */

.mkt .c ul { margin: 0; padding-left: 1.1em; }
.mkt .c li { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.mkt .c li:last-child { margin-bottom: 0; }
.mkt .c li strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------
   Le verdict, en deux colonnes
   --------------------------------------------------------- */

.deux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 12px;
}
.col {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.col--oui { border-color: var(--positif); background: color-mix(in srgb, var(--positif) 6%, var(--surface)); }
.col--non { border-color: var(--negatif); background: color-mix(in srgb, var(--negatif) 5%, var(--surface)); }
.mkt .col__t {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}
.mkt .col ul { margin: 0; padding-left: 1.1em; }
.mkt .col li { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.mkt .col li:last-child { margin-bottom: 0; }
.mkt .col li strong { color: var(--ink); font-weight: 600; }
.col--oui li::marker { color: var(--positif); }
.col--non li::marker { color: var(--negatif); }

/* ---------------------------------------------------------
   Les tableaux de chiffres — même carte que les tableaux du
   reste du carnet ; ils défilent dans leur enveloppe, jamais
   la page
   --------------------------------------------------------- */

.mkt .table-scroll {
  max-width: 100%;
  margin: 16px 0 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.mkt table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.mkt th,
.mkt td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.mkt th {
  position: static;
  background: none;
  color: var(--ink-2);
  font: 600 12px/1.3 var(--body);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mkt td { color: var(--ink); }
.mkt td strong { color: var(--ink); font-weight: 700; }
.mkt td em { color: var(--ink-2); }
.mkt tbody tr:last-child td { border-bottom: 0; }
.mkt tbody tr.tot td { background: var(--surface-2); }
.mkt td.ok   { color: var(--ink-2); white-space: nowrap; }
.mkt td.warn { color: var(--attention); font-weight: 600; white-space: nowrap; }
.mkt td.bad  { color: var(--negatif); font-weight: 700; white-space: nowrap; }
.mkt table td:nth-child(n+2) { white-space: nowrap; }
@media (hover: hover) {
  .mkt tbody tr:hover td { background: var(--surface-2); }
}

@media (max-width: 700px) {
  .etapes li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  .etapes b { width: 28px; height: 28px; font-size: 12px; }
  .etapes strong { margin-top: 2px; }
  .enc, .col { padding: 16px; }
}