/* ============================================================
   article-v2.css — MPI Blog
   Bibliothèque de composants articles v2.0
   Convention : préfixe mpi- universel
   ============================================================ */

/* ── 1. LAYOUT ──────────────────────────────────────────────── */

/* Hero éditorial — fond surface crème, layout 2 colonnes méta-gauche + contenu-droite */
.mpi-hero {
  background: var(--color-surface);
  padding: 2.5rem 0 0;
}
.mpi-hero--dark { /* alias rétrocompat */ }

/* Breadcrumb */
.mpi-hero .blog-breadcrumb {
  font-size: .8125rem;
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-bottom: 1.5rem;
}
.mpi-hero .blog-breadcrumb a       { color: var(--color-text-light); text-decoration: none; transition: color .15s; }
.mpi-hero .blog-breadcrumb a:hover { color: var(--color-primary); }
.mpi-hero .blog-breadcrumb [aria-hidden]  { color: var(--color-border); font-size: .75rem; }
.mpi-hero .blog-breadcrumb [aria-current] { color: var(--color-text-muted); font-weight: 500; }

/* Grille 2 colonnes : méta | contenu — méta placée à gauche via order */
.mpi-hero__inner {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 0;
  align-items: start;
  padding-bottom: 2.5rem;
}
.mpi-hero__main     { order: 2; border-left: 1px solid var(--color-secondary); padding-left: 1.75rem; }
.mpi-hero__meta-col { order: 1; padding-right: 1.25rem; }
@media (max-width: 680px) {
  .mpi-hero__inner      { grid-template-columns: 1fr; }
  .mpi-hero__main       { order: 1; }
  .mpi-hero__meta-col   { display: none; }
  .mpi-hero__meta       { display: flex !important; }
}

/* Badges */
.mpi-hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.mpi-hero__badge  { display: inline-block; font-size: .75rem; font-weight: 600; padding: 3px .75rem; border-radius: 9999px; white-space: nowrap; }
.mpi-hero__badge--domaine   { background: var(--color-primary); color: var(--color-bg); }
.mpi-hero__badge--categorie { background: transparent; color: var(--color-secondary); border: 1.5px solid var(--color-secondary); }

/* Titre */
.mpi-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.18;
  margin: 0 0 .875rem;
}

/* Sous-titre sans filet */
.mpi-hero__subtitle {
  font-size: .9375rem;
  color: var(--color-text-muted);
  font-style: italic;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}

/* Tags */
.mpi-hero__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; }
.mpi-hero__tag  { font-size: .75rem; font-weight: 500; color: var(--color-text-muted); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 9999px; padding: 2px .625rem; text-decoration: none; transition: border-color .15s, color .15s; }
.mpi-hero__tag:hover { border-color: var(--color-secondary); color: var(--color-secondary); }

/* Meta inline — mobile uniquement */
.mpi-hero__meta {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  font-size: .8125rem;
  color: var(--color-text-light);
  margin-top: 1rem;
}
.mpi-hero__meta-sep { color: var(--color-border); }

/* Colonne méta gauche — desktop */
.mpi-hero__meta-col {
  padding-right: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: .25rem;
}

.mpi-hero__meta-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--color-text-light);
  margin-bottom: .2rem;
}
.mpi-hero__meta-val {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-primary);
  font-family: var(--font-display);
  line-height: 1.3;
}
.mpi-hero__meta-val--accent { color: var(--color-secondary); }

/* Cover — reste dans la zone surface, arrondie avec ombre */
.mpi-cover {
  background: var(--color-surface);
  padding: 0 1.5rem 0;
  max-width: 100%;
}
.mpi-cover__inner {
  max-width: 860px;
  margin: 0 auto;
}
.mpi-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: .875rem;
  box-shadow: var(--shadow-md);
}

/* Fondu surface → bg — pas de rupture nette après la cover */
.mpi-hero-fade {
  height: 72px;
  background: linear-gradient(to bottom, var(--color-surface), var(--color-bg));
}

.mpi-body { padding: 0 0 6rem; background: var(--color-bg); }
.mpi-content {
  max-width: 840px; margin: 0 auto;
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.8; color: var(--color-text);
}
@media (max-width: 800px) { .mpi-content { padding: 0 1.25rem; } }

.mpi-content h2 { font-family: var(--font-display); font-size: clamp(1.5rem,3vw,1.875rem); font-weight: 700; color: var(--color-primary); margin: 3.5rem 0 1.5rem; padding-top: 1rem; border-top: 3px solid var(--color-secondary); line-height: 1.3; }
.mpi-content h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--color-primary); margin: 2.5rem 0 1.25rem; }
.mpi-content h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--color-primary); margin: 2rem 0 1rem; }
.mpi-content > p { margin: 0 0 1.25rem; text-align: justify; }
.mpi-content ul, .mpi-content ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.mpi-content li { margin-bottom: .5rem; }
.mpi-content strong { font-weight: 600; color: var(--color-primary); }
.mpi-content code {
  font-family: var(--font-mono); font-size: .8125rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  padding: 1px 5px; border-radius: .25rem; color: var(--color-text);
}
.mpi-content blockquote {
  border-left: 4px solid var(--color-secondary); padding: .75rem 1.25rem; margin: 2rem 0;
  background: var(--color-surface); border-radius: 0 .5rem .5rem 0;
  font-style: italic; color: var(--color-text-muted);
}

/* ── 2. LEAD ─────────────────────────────────────────────────── */

.mpi-lead {
  font-size: 1.125rem; line-height: 1.8; color: var(--color-text-muted);
  margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-border);
}

/* ── 3. CALLOUT ──────────────────────────────────────────────── */

.mpi-callout { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.5rem; border-radius: 1rem; margin: 2rem 0; }
.mpi-callout--info    { background: rgba(233,116,35,.06); border: 1px solid rgba(233,116,35,.2); border-left: 4px solid var(--color-secondary); }
.mpi-callout--dark    { background: #1a1a18; border: 1px solid #3a3835; border-left: 4px solid var(--color-secondary); }
.mpi-callout--blue    { background: #dbeafe; border: 1px solid #bfdbfe; border-left: 4px solid #2563eb; }
.mpi-callout--warning { background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #d97706; }
.mpi-callout--green   { background: rgb(45 95 63 / 6%); border: 1px solid rgb(45 95 63 / 20%); border-left: 4px solid var(--color-tertiary); }
.mpi-callout--danger  { background: rgba(220,53,69,.05); border: 1px solid rgba(220,53,69,.15); border-left: 4px solid #dc3545; }

.mpi-callout__icon  { font-size: 1.25rem; flex-shrink: 0; margin-top: 2px; }
.mpi-callout__body  { flex: 1; }
.mpi-callout__label {
  font-family: var(--font-display); font-size: .875rem; font-weight: 700;
  display: block; margin-bottom: .4rem; color: var(--color-primary);
}
.mpi-callout--dark .mpi-callout__label    { color: rgba(255,255,255,.9); }
.mpi-callout--blue .mpi-callout__label    { color: #2563eb; }
.mpi-callout--warning .mpi-callout__label { color: #d97706; }
.mpi-callout--green .mpi-callout__label   { color: var(--color-tertiary); }
.mpi-callout--danger .mpi-callout__label  { color: #dc3545; }

.mpi-callout__text { font-size: .9375rem; line-height: 1.65; color: var(--color-text); margin: 0; }
.mpi-callout--dark .mpi-callout__text    { color: rgba(255,255,255,.85); }
.mpi-callout--blue .mpi-callout__text    { color: #1e3a8a; }
.mpi-callout--warning .mpi-callout__text { color: #78350f; }
.mpi-callout--green .mpi-callout__text   { color: var(--color-tertiary); }
.mpi-callout__text strong { color: inherit; }

/* ── 4. ALERT INLINE ─────────────────────────────────────────── */

.mpi-alert {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem 1rem; border-radius: .5rem; margin: 1rem 0;
  font-size: .875rem; line-height: 1.5;
}
.mpi-alert--info    { background: rgba(233,116,35,.06); border: 1px solid rgba(233,116,35,.2); color: var(--color-text); }
.mpi-alert--warning { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.mpi-alert--green   { background: rgb(45 95 63 / 6%); border: 1px solid rgb(45 95 63 / 20%); color: var(--color-tertiary); }
.mpi-alert--danger  { background: rgba(220,53,69,.05); border: 1px solid rgba(220,53,69,.15); color: #dc3545; }
.mpi-alert__icon    { font-size: 1rem; flex-shrink: 0; }

/* ── 5. BADGE ────────────────────────────────────────────────── */

.mpi-badge {
  display: inline-block; font-size: .75rem; font-weight: 600;
  padding: 3px .75rem; border-radius: 9999px; white-space: nowrap;
}
.mpi-badge--green   { background: rgb(45 95 63 / 10%); color: var(--color-tertiary); }
.mpi-badge--orange  { background: rgba(233,116,35,.12); color: var(--color-secondary); }
.mpi-badge--red     { background: rgba(220,53,69,.1); color: #dc3545; }
.mpi-badge--blue    { background: rgba(59,130,246,.1); color: #2563eb; }
.mpi-badge--gray    { background: rgba(100,116,139,.1); color: var(--color-text-muted); }
.mpi-badge--dark    { background: rgba(26,26,24,.08); color: var(--color-primary); }

/* ── 6. KPI GRID (ex stat-row + result-grid) ─────────────────── */

.mpi-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 1rem; margin: 2rem 0;
}
.mpi-kpi-card {
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: 1rem; padding: 1.25rem 1rem; text-align: center;
}
.mpi-kpi-card__number {
  font-family: var(--font-display); font-size: 2.25rem; font-weight: 800;
  color: var(--color-secondary); line-height: 1; margin-bottom: .25rem;
}
.mpi-kpi-card__label { font-size: .8125rem; color: var(--color-text-muted); line-height: 1.4; }

/* ── 7. TABLE ────────────────────────────────────────────────── */

.mpi-table-wrap { overflow-x: auto; margin: 2rem 0; border-radius: .75rem; border: 1px solid var(--color-border); }
.mpi-table      { width: 100%; border-collapse: collapse; font-size: .875rem; }

/* En-tête commun */
.mpi-table th {
  padding: .75rem 1rem; text-align: left; font-family: var(--font-display); font-weight: 700;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.mpi-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.mpi-table tr:last-child td { border-bottom: none; }
.mpi-table tr:nth-child(even) td { background: var(--color-surface); }
.mpi-table td:first-child { font-weight: 600; color: var(--color-text); }

/* --compare : headers pastel beige */
.mpi-table--compare th            { background: #e8e5df; color: var(--color-primary); }
.mpi-table--compare th:first-child{ background: #d8d4cc; }

/* --data : header sombre */
.mpi-table--data th            { background: #2d2c2a; color: #fff; }
.mpi-table--data td            { color: var(--color-text-muted); }
.mpi-table--data td:first-child{ font-weight: 600; color: var(--color-text); }
.mpi-table--data code {
  font-family: var(--font-mono); font-size: .8rem;
  background: rgba(233,116,35,.08); border: 1px solid rgba(233,116,35,.2);
  padding: 1px 5px; border-radius: .25rem; color: var(--color-secondary);
}

/* Modificateurs de cellules */
.mpi-td--yes       { color: #059669; font-weight: 600; }
.mpi-td--no        { color: #ef4444; font-weight: 600; }
.mpi-td--mid       { color: #d97706; font-weight: 600; }
.mpi-td--center    { text-align: center; }
.mpi-td--highlight { background: rgba(233,116,35,.07) !important; font-weight: 600; color: var(--color-secondary); }
.mpi-th--highlight { background: rgba(233,116,35,.18) !important; color: var(--color-secondary) !important; }

/* ── 8. QUOTE ────────────────────────────────────────────────── */

.mpi-quote {
  background: var(--color-surface);
  border-left: 4px solid var(--color-secondary);
  border-radius: 0 1.5rem 1.5rem 0;
  padding: 2.5rem 3rem 2rem; margin: 3rem 0;
  position: relative; overflow: hidden;
}
.mpi-quote::before {
  content: '\201C'; position: absolute; top: -.05em; left: 1rem;
  font-size: 9rem; font-family: var(--font-display);
  color: rgba(233,116,35,.18); line-height: 1; pointer-events: none;
}
.mpi-quote__body {
  font-family: var(--font-display); font-size: clamp(1.125rem,2.5vw,1.375rem);
  font-weight: 600; color: var(--color-primary); line-height: 1.5; position: relative; z-index: 1;
}
.mpi-quote__body p      { margin: .5rem 0; }
.mpi-quote__highlight   { color: var(--color-secondary); }
.mpi-quote__sig         { margin-top: 1.5rem; font-size: .875rem; color: var(--color-text-muted); position: relative; z-index: 1; }
@media (max-width: 600px) { .mpi-quote { padding: 1.75rem 1.5rem; } }

/* ── 9. STACK ────────────────────────────────────────────────── */

.mpi-stack { margin: 1.5rem 0; }
.mpi-stack__item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.mpi-stack__item:last-child { border-bottom: none; }
.mpi-stack__name { flex-shrink: 0; width: 130px; font-weight: 700; color: var(--color-primary); font-size: .875rem; padding-top: 1px; }
.mpi-stack__role { color: var(--color-text-muted); line-height: 1.65; font-size: .9375rem; flex: 1; }
.mpi-stack__cost { flex-shrink: 0; padding: 3px .75rem; background: rgba(5,150,105,.1); border-radius: 9999px; font-size: .75rem; font-weight: 700; color: #065f46; white-space: nowrap; align-self: center; }

/* Variante questions — numéro court en orange */
.mpi-stack--questions .mpi-stack__name { width: 48px; font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; color: var(--color-secondary); padding-top: 0; }

/* ── 10. PHASES ──────────────────────────────────────────────── */

.mpi-phases { display: flex; flex-direction: column; gap: .75rem; margin: 2rem 0; }
.mpi-phase  { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; background: var(--color-card); border: 1.5px solid var(--color-border); border-radius: 1rem; }
.mpi-phase__week  { flex-shrink: 0; padding: .25rem .75rem; background: var(--color-secondary); color: #fff; border-radius: 9999px; font-size: .75rem; font-weight: 700; white-space: nowrap; margin-top: 2px; }
.mpi-phase__title { font-weight: 700; color: var(--color-primary); font-size: .875rem; margin: 0 0 .25rem; }
.mpi-phase__desc  { font-size: .8125rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }

/* ── 11. PRIORITY ────────────────────────────────────────────── */

.mpi-priority        { display: flex; flex-direction: column; gap: .625rem; margin: 1.5rem 0; }
.mpi-priority__item  { display: flex; align-items: center; gap: 1rem; padding: .875rem 1rem; border-radius: .625rem; border-left: 4px solid; }
.mpi-priority__item--critical  { background: rgba(220,53,69,.06); border-color: #dc3545; }
.mpi-priority__item--important { background: rgba(233,116,35,.08); border-color: var(--color-secondary); }
.mpi-priority__item--nice      { background: var(--color-surface); border-color: var(--color-border); }
.mpi-priority__badge { width: 88px; font-family: var(--font-display); font-size: .8125rem; font-weight: 700; flex-shrink: 0; }
.mpi-priority__item--critical .mpi-priority__badge  { color: #dc3545; }
.mpi-priority__item--important .mpi-priority__badge { color: var(--color-secondary); }
.mpi-priority__item--nice .mpi-priority__badge      { color: var(--color-text-muted); }
.mpi-priority__desc { font-size: .875rem; color: var(--color-text-muted); }

/* ── 12. VS BLOCK ────────────────────────────────────────────── */

.mpi-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; margin: 2rem 0; border: 1.5px solid var(--color-border); border-radius: 1rem; overflow: hidden; }
@media (max-width: 560px) { .mpi-vs { grid-template-columns: 1fr; } }
.mpi-vs__side     { padding: 1.5rem; }
.mpi-vs__side:first-child { background: #f0faf4; }
.mpi-vs__side:last-child  { background: #fff4f0; }
.mpi-vs__divider  { display: flex; align-items: center; justify-content: center; background: #fff; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); font-family: var(--font-display); font-weight: 700; font-size: .75rem; color: var(--color-text-light); padding: 0 .5rem; writing-mode: vertical-rl; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 560px) { .mpi-vs__divider { writing-mode: horizontal-tb; padding: .5rem; border: none; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } }
.mpi-vs__label    { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .5rem; }
.mpi-vs__side:first-child .mpi-vs__label { color: #059669; }
.mpi-vs__side:last-child  .mpi-vs__label { color: #d97706; }
.mpi-vs__title    { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--color-primary); margin-bottom: .625rem; }
.mpi-vs__list     { list-style: none; padding: 0; }
.mpi-vs__list li  { font-size: .875rem; color: var(--color-text-muted); padding: .3rem 0; display: flex; gap: .5rem; align-items: flex-start; }
.mpi-vs__side:first-child .mpi-vs__list li::before { content: '✓'; color: #059669; flex-shrink: 0; font-weight: 700; }
.mpi-vs__side:last-child  .mpi-vs__list li::before { content: '→'; color: #d97706; flex-shrink: 0; font-weight: 700; }

/* ── 13. COST ────────────────────────────────────────────────── */

.mpi-cost        { margin: 2rem 0; }
.mpi-cost__item  { display: flex; align-items: center; gap: .875rem; margin-bottom: .875rem; }
.mpi-cost__label { font-size: .8125rem; font-weight: 500; color: var(--color-text); width: 200px; flex-shrink: 0; }
@media (max-width: 520px) { .mpi-cost__label { width: 120px; font-size: .75rem; } }
.mpi-cost__track { flex: 1; background: var(--color-border); border-radius: .25rem; height: .5rem; overflow: hidden; }
.mpi-cost__bar   { height: 100%; border-radius: .25rem; background: var(--color-secondary); }
.mpi-cost__val   { font-family: var(--font-mono); font-size: .8125rem; font-weight: 600; color: var(--color-text); width: 80px; text-align: right; flex-shrink: 0; }

/* ── 14. DOWNLOAD ────────────────────────────────────────────── */

.mpi-download {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(233,116,35,.06); border: 1.5px solid rgba(233,116,35,.25);
  border-radius: 1rem; padding: 1.25rem 1.5rem; margin: 2rem 0;
  text-decoration: none; transition: background .15s, border-color .15s;
}
.mpi-download:hover           { background: rgba(233,116,35,.1); border-color: var(--color-secondary); }
.mpi-download__icon           { font-size: 2rem; flex-shrink: 0; }
.mpi-download__title          { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; color: var(--color-primary); margin: 0 0 .25rem; }
.mpi-download__desc           { font-size: .8125rem; color: var(--color-text-muted); margin: 0; }
.mpi-download__arrow          { color: var(--color-secondary); font-size: 1.25rem; margin-left: auto; flex-shrink: 0; }

/* Variante bannière */
.mpi-download--banner         { flex-wrap: wrap; }
.mpi-download--banner .mpi-download__icon { font-size: 2.25rem; }
.mpi-download__body           { flex: 1; min-width: 180px; }
.mpi-download__btn {
  display: inline-flex; align-items: center; gap: .5rem; background: var(--color-secondary);
  color: #fff; font-family: var(--font-display); font-size: .875rem; font-weight: 600;
  padding: .6rem 1.25rem; border-radius: .5rem; text-decoration: none; white-space: nowrap; transition: background .15s;
}
.mpi-download__btn:hover      { background: #c45e16; }

/* ── 15. ARCH CARDS ──────────────────────────────────────────── */

.mpi-arch-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 1.25rem; margin: 2rem 0; }
.mpi-arch-card  { border-radius: 1rem; padding: 1.5rem; border: 2px solid; }

.mpi-arch-card--simple  { background: rgba(34,197,94,.05); border-color: rgba(34,197,94,.3); }
.mpi-arch-card--inter   { background: rgba(234,179,8,.05); border-color: rgba(234,179,8,.3); }
.mpi-arch-card--scale   { background: rgba(59,130,246,.05); border-color: rgba(59,130,246,.3); }
.mpi-arch-card--pme     { border: 1.5px solid var(--color-border); border-top: 3px solid #059669; }
.mpi-arch-card--instit  { border: 1.5px solid var(--color-border); border-top: 3px solid #2563eb; }
.mpi-arch-card--cloud   { border: 1.5px solid var(--color-border); border-top: 3px solid var(--color-secondary); }
.mpi-arch-card--bigdata { border: 1.5px solid var(--color-border); border-top: 3px solid #9333ea; }

.mpi-arch-card__badge { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px .75rem; border-radius: 9999px; margin-bottom: .875rem; }
.mpi-arch-card--simple  .mpi-arch-card__badge { background: rgba(34,197,94,.12); color: #16a34a; }
.mpi-arch-card--inter   .mpi-arch-card__badge { background: rgba(234,179,8,.12); color: #b45309; }
.mpi-arch-card--scale   .mpi-arch-card__badge { background: rgba(59,130,246,.12); color: #2563eb; }
.mpi-arch-card--pme     .mpi-arch-card__badge { background: rgba(5,150,105,.12); color: #059669; }
.mpi-arch-card--bigdata .mpi-arch-card__badge { background: rgba(147,51,234,.12); color: #9333ea; }

.mpi-arch-card__title  { font-family: var(--font-display); font-size: .9375rem; font-weight: 700; color: var(--color-primary); margin: 0 0 .3rem; }
.mpi-arch-card__budget { font-family: var(--font-mono); font-size: .75rem; color: var(--color-text-light); margin-bottom: .875rem; }
.mpi-arch-card__ctx    { font-size: .8125rem; color: var(--color-text-muted); margin: 0 0 .875rem; line-height: 1.5; }
.mpi-arch-card__uses   { font-size: .75rem; color: var(--color-text-muted); margin: .5rem 0 0; font-style: italic; }
.mpi-arch-card__stack  { font-size: .75rem; color: var(--color-text-muted); margin: .875rem 0 0; padding-top: .75rem; border-top: 1px solid var(--color-border); line-height: 1.6; }
.mpi-arch-card__stack strong { color: var(--color-text); display: block; margin-bottom: .2rem; }
.mpi-arch-card__stack ul, .mpi-arch-card__stack ol { list-style: none; padding: 0; margin: 0; }
.mpi-arch-card__stack li { font-family: var(--font-mono); font-size: .75rem; color: var(--color-text-muted); padding: .25rem 0; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: .375rem; }
.mpi-arch-card__stack li:last-child { border-bottom: none; }
.mpi-arch-card__stack li::before   { content: '→'; color: var(--color-secondary); font-size: .625rem; }

.mpi-arch-flow  { display: flex; flex-direction: column; gap: .375rem; margin: .875rem 0; }
.mpi-arch-step  { background: var(--color-card); border: 1.5px solid var(--color-border); border-radius: .5rem; padding: .5rem .75rem; font-size: .8125rem; font-weight: 600; color: var(--color-primary); text-align: center; line-height: 1.3; }
.mpi-arch-arrow { text-align: center; color: var(--color-text-light); font-size: .875rem; line-height: 1; padding: .125rem 0; }

/* Format cards → voir .mpi-card--format dans section 19 CARD */

/* ── 17. TIMELINE HORIZONTALE ────────────────────────────────── */

.mpi-timeline--h         { overflow-x: auto; margin: 2rem 0; padding-bottom: .5rem; border-radius: 1rem; }
.mpi-timeline--h__track  { display: flex; gap: 0; min-width: 680px; border-radius: 1rem; overflow: hidden; border: 1px solid var(--color-border); }
.mpi-timeline--h__era    { flex: 1; padding: 1.25rem .875rem; text-align: center; border-right: 2px solid rgba(0,0,0,.06); position: relative; }
.mpi-timeline--h__era:last-child { border-right: none; }

.mpi-timeline--h__era__period { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .4rem; color: var(--color-text-muted); }
.mpi-timeline--h__era__name   { font-family: var(--font-display); font-size: .8125rem; font-weight: 700; margin: 0 0 .5rem; color: var(--color-primary); }
.mpi-timeline--h__era__items  { font-size: .75rem; line-height: 1.6; color: var(--color-text-muted); margin: 0; }

/* Palettes ères — beige progressif vers orange */
.mpi-era--1 { background: #e8e5df; }
.mpi-era--2 { background: #ddd9d0; }
.mpi-era--3 { background: #d4cfc5; }
.mpi-era--4 { background: #f5e4d0; }
.mpi-era--4 .mpi-timeline--h__era__period { color: rgba(233,116,35,.6); }
.mpi-era--5 { background: var(--color-secondary); position: relative; }
.mpi-era--5 .mpi-timeline--h__era__period { color: rgba(255,255,255,.65); }
.mpi-era--5 .mpi-timeline--h__era__name   { color: #fff; }
.mpi-era--5 .mpi-timeline--h__era__items  { color: rgba(255,255,255,.8); }
.mpi-era--5::after { content: '↗'; position: absolute; top: .5rem; right: .5rem; font-size: .875rem; color: rgba(255,255,255,.8); }

/* ── 18. TIMELINE VERTICALE ──────────────────────────────────── */

.mpi-timeline--v { position: relative; margin: 2rem 0; padding-left: 1.75rem; }
.mpi-timeline--v::before { content: ''; position: absolute; left: .5rem; top: .5rem; bottom: .5rem; width: 2px; background: linear-gradient(to bottom, var(--color-secondary), var(--color-border)); }
.mpi-timeline--v__item { position: relative; margin-bottom: 1.75rem; }
.mpi-timeline--v__item::before { content: ''; position: absolute; left: -1.25rem; top: .375rem; width: .625rem; height: .625rem; border-radius: 50%; background: var(--color-secondary); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--color-secondary); }
.mpi-timeline--v__era   { font-family: var(--font-display); font-size: .75rem; font-weight: 700; color: var(--color-secondary); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .2rem; }
.mpi-timeline--v__title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--color-primary); margin-bottom: .3rem; }
.mpi-timeline--v__desc  { font-size: .875rem; color: var(--color-text-muted); line-height: 1.6; }

/* ── 19. CARD (composant unifié) ─────────────────────────────── */

.mpi-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1rem; margin: 1.5rem 0; }
@media (max-width: 560px) { .mpi-card-grid--2col, .mpi-card-grid--cols-3 { grid-template-columns: 1fr; } }
.mpi-card-grid--2col { grid-template-columns: 1fr 1fr; }
.mpi-card-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .mpi-card-grid--cols-3 { grid-template-columns: 1fr 1fr; } }

.mpi-card { background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 1rem; padding: 1.25rem; transition: border-color .2s, transform .2s; }
.mpi-card:hover { border-color: var(--color-secondary); transform: translateY(-2px); }

/* --icon : carte avec icône centrée (ex cause-card) */
.mpi-card--icon        { text-align: center; padding: 1.5rem 1.25rem; }
.mpi-card--icon .mpi-card__icon { width: 52px; height: 52px; background: rgba(233,116,35,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem; font-size: 1.375rem; }

/* --numbered : carte numérotée avec liste (ex step-card) */
.mpi-card--numbered    { display: flex; flex-direction: column; gap: .75rem; background: var(--color-card); }
.mpi-card--numbered .mpi-card__header { display: flex; align-items: center; gap: .75rem; }
.mpi-card--numbered .mpi-card__num { width: 36px; height: 36px; background: var(--color-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: .9375rem; font-weight: 800; color: #fff; flex-shrink: 0; }
.mpi-card--numbered .mpi-card__items { list-style: none; padding: 0; margin: 0; }
.mpi-card--numbered .mpi-card__items li { font-size: .875rem; color: var(--color-text-muted); padding: .2rem 0 .2rem 1.25rem; position: relative; }
.mpi-card--numbered .mpi-card__items li::before { content: '✓'; position: absolute; left: 0; color: var(--color-secondary); font-weight: 700; }

/* --question : carte question numérotée (ex q-card) */
.mpi-card--question    { }
.mpi-card--question .mpi-card__num { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; color: var(--color-secondary); line-height: 1; margin: 0 0 .375rem; }

/* Éléments communs aux variantes */
.mpi-card__title   { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; color: var(--color-primary); margin: 0 0 .5rem; }
.mpi-card__desc    { font-size: .8125rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; }
.mpi-card__detail  { font-size: .8125rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; }
.mpi-card__label   { font-family: var(--font-display); font-size: .75rem; font-weight: 700; color: var(--color-secondary); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .5rem; }
.mpi-card__name    { font-family: var(--font-display); font-size: .9375rem; font-weight: 700; color: var(--color-primary); margin-bottom: .375rem; }
.mpi-card__code    { font-family: var(--font-mono); font-size: .75rem; color: var(--color-text-light); margin-bottom: .5rem; line-height: 1.6; }
.mpi-card__tag     { display: inline-block; font-size: .75rem; color: var(--color-secondary); background: rgba(233,116,35,.1); padding: 3px .625rem; border-radius: 9999px; }
.mpi-card__meta    { font-size: .75rem; color: var(--color-text-light); margin: 0 0 .5rem; }
.mpi-card__tags    { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .625rem; }
.mpi-card__tags .mpi-card__tag { font-size: .6875rem; padding: 1px .5rem; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-muted); }

/* --format : grille de formats / technologies avec badge type et hover lift */
.mpi-card--format  { background: var(--color-surface); }
.mpi-card--format:hover { border-color: var(--color-secondary); transform: translateY(-2px); }

/* Badges type format — utilisés avec .mpi-card__badge dans --format */
.mpi-card__badge   { display: inline-block; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px .75rem; border-radius: 9999px; margin-bottom: .625rem; }
.mpi-card__badge--file     { background: rgba(59,130,246,.12); color: #3b82f6; }
.mpi-card__badge--db       { background: rgba(34,197,94,.12); color: #16a34a; }
.mpi-card__badge--service  { background: rgba(168,85,247,.12); color: #9333ea; }
.mpi-card__badge--tile     { background: rgba(233,116,35,.12); color: var(--color-secondary); }
.mpi-card__badge--emerging { background: rgba(245,158,11,.12); color: #d97706; }

/* ── 20. ERRORS ──────────────────────────────────────────────── */

.mpi-errors { list-style: none; padding: 0; margin: 1.5rem 0; display: flex; flex-direction: column; gap: .75rem; }
.mpi-errors__item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: .875rem; border-left: 4px solid #dc3545; font-size: .9375rem; color: var(--color-text-muted); }
.mpi-errors__num  { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; color: #dc3545; flex-shrink: 0; min-width: 1.5rem; line-height: 1.4; }

/* ── 21. DIAGRAM ─────────────────────────────────────────────── */

.mpi-diagram { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 1rem; padding: 2rem 1.25rem 1.25rem; margin: 2.5rem 0; overflow-x: auto; }
.mpi-diagram p { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-light); text-align: center; margin: 0 0 1.25rem; }
.mpi-diagram--decision { background: var(--color-surface); }

/* ── 22. FIGURE ──────────────────────────────────────────────── */

.mpi-figure { margin: 2.5rem 0; background: var(--color-surface); border-radius: 1rem; padding: 1.75rem 1.5rem; border: 1px solid var(--color-border); overflow-x: auto; }
.mpi-figure figcaption { text-align: center; font-size: .8125rem; color: var(--color-text-light); margin-top: 1rem; font-style: italic; }
.mpi-figure figcaption span { display: block; font-size: .75rem; color: var(--color-text-light); margin-top: .25rem; opacity: .7; }

/* ── 23. CODE BLOCK ──────────────────────────────────────────── */

.mpi-code {
  position: relative; margin: 2rem 0; border-radius: 1rem; overflow: hidden;
  border: 1px solid #2d2c2a;
}
.mpi-code__header {
  display: flex; align-items: center; justify-content: space-between;
  background: #1a1a18; padding: .625rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mpi-code__lang {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 600;
  color: var(--color-secondary); text-transform: uppercase; letter-spacing: .08em;
}
.mpi-code__copy {
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  color: rgba(255,255,255,.4); background: none; border: none; cursor: pointer;
  padding: 2px .5rem; border-radius: .25rem; transition: color .15s;
}
.mpi-code__copy:hover { color: rgba(255,255,255,.8); }
.mpi-code pre {
  margin: 0; padding: 1.25rem 1rem; overflow-x: auto;
  background: #2d2c2a;
  font-family: var(--font-mono); font-size: .8125rem;
  line-height: 1.7; color: #e8e5df;
}
.mpi-code pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }

/* Pipeline step flow (remplace pre quand une seule ligne) */
.mpi-pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .375rem; background: #2d2c2a; border-radius: 0 0 .75rem .75rem; padding: 1.25rem 1rem; font-family: var(--font-mono); font-size: .8125rem; line-height: 1.7; color: #e8e5df; }
.mpi-pipeline__step  { color: #e8e5df; white-space: nowrap; }
.mpi-pipeline__arrow { color: rgba(233,116,35,.7); flex-shrink: 0; }

/* Tokens de syntaxe — gérés par highlight.js via /assets/css/components/code-highlight.css
   Les classes manuelles .tok-* ci-dessous ne sont plus utilisées mais sont conservées
   pour compatibilité si d'anciens articles les contiennent en dur. */
.mpi-code .tok-kw  { color: #e97423; }
.mpi-code .tok-str { color: #5fa86f; }
.mpi-code .tok-num { color: #f0c080; }
.mpi-code .tok-cmt { color: #8a8a8a; font-style: italic; }
.mpi-code .tok-fn  { color: #e8d5b7; }
.mpi-code .tok-ok  { color: #5fa86f; }

/* ── 24. CHECKLIST ───────────────────────────────────────────── */

.mpi-checklist { list-style: none; padding: 0; margin: 1.5rem 0; }
.mpi-checklist__item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .625rem 0; border-bottom: 1px solid var(--color-border); font-size: .9375rem;
}
.mpi-checklist__item:last-child { border-bottom: none; }
.mpi-checklist__item::before {
  content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px;
  border: 2px solid var(--color-border); border-radius: .25rem; background: var(--color-card);
}
.mpi-checklist__item--checked::before {
  background: var(--color-secondary); border-color: var(--color-secondary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 10px;
}
.mpi-checklist__label { flex: 1; color: var(--color-text); line-height: 1.5; }
.mpi-checklist__item--checked .mpi-checklist__label { color: var(--color-text-muted); text-decoration: line-through; }
.mpi-checklist__group { font-family: var(--font-display); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin: 1.25rem 0 .25rem; }

/* ── 25. TOC ─────────────────────────────────────────────────── */

.mpi-toc {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-secondary); border-radius: 0 1rem 1rem 0;
  padding: 1.25rem 1.5rem; margin: 2rem 0;
}
.mpi-toc__title {
  font-family: var(--font-display); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--color-secondary);
  margin: 0 0 .75rem;
}
.mpi-toc__list { list-style: none; padding: 0; margin: 0; }
.mpi-toc__item { padding: .2rem 0; }
.mpi-toc__link {
  font-size: .9375rem; color: var(--color-text); text-decoration: none;
  display: flex; align-items: center; gap: .5rem; transition: color .15s;
}
.mpi-toc__link:hover  { color: var(--color-secondary); }
.mpi-toc__link::before { content: '→'; color: var(--color-secondary); font-size: .75rem; flex-shrink: 0; }
.mpi-toc__item--h3 .mpi-toc__link { padding-left: 1.25rem; font-size: .875rem; color: var(--color-text-muted); }
.mpi-toc__item--h3 .mpi-toc__link::before { content: '·'; }

/* ── 26. TAGS ARTICLE ────────────────────────────────────────── */

.mpi-tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 2.5rem 0; padding: 1.5rem 0; border-top: 1px solid var(--color-border); }
.mpi-tags__label { font-size: .875rem; font-weight: 600; color: var(--color-text-muted); margin-right: .5rem; }
.mpi-tag { font-size: .75rem; font-weight: 500; color: var(--color-secondary); background: rgba(233,116,35,.08); border: 1px solid rgba(233,116,35,.2); border-radius: 9999px; padding: 3px .75rem; text-decoration: none; transition: background .15s; }
.mpi-tag:hover { background: rgba(233,116,35,.16); }

/* ── 27. CTA CONTACT ─────────────────────────────────────────── */

.mpi-cta { background: linear-gradient(135deg, #1a1a18, #2F2E2C); border-radius: 1.5rem; padding: 3.5rem 2rem; text-align: center !important; margin: 4rem 0 2rem; }
.mpi-cta__label { font-size: .75rem; font-weight: 700; color: var(--color-secondary) !important; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .75rem; text-align: center !important; border: none !important; }
.mpi-cta__title { font-family: var(--font-display); font-size: clamp(1.375rem,3vw,1.875rem); font-weight: 700; color: #fff !important; margin: 0 0 .75rem; line-height: 1.3; text-align: center !important; border: none !important; }
.mpi-cta__desc,
.mpi-content .mpi-cta__desc { font-size: .9375rem; color: rgba(255,255,255,.7) !important; margin: 0 auto 1.75rem; max-width: 520px; line-height: 1.7; text-align: center !important; border: none !important; }
.mpi-cta .btn-secondary { color: #fff !important; background: var(--color-secondary) !important; text-decoration: none !important; border-bottom: none !important; }
/* ── 28. AUTEUR ──────────────────────────────────────────────── */

.mpi-author { display: flex; gap: 1.25rem; align-items: flex-start; background: var(--color-surface); border-radius: 1rem; padding: 1.5rem; margin: 2rem 0; border: 1px solid var(--color-border); }
@media (max-width: 480px) { .mpi-author { flex-direction: column; } }
.mpi-author__av   { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--color-secondary); }
.mpi-author__av img { width: 100%; height: 100%; object-fit: cover; }
.mpi-author__name { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; color: var(--color-primary); margin: 0 0 .2rem; }
.mpi-author__role { font-size: .8125rem; color: var(--color-secondary); margin: 0 0 .5rem; }
.mpi-author__bio  { font-size: .8125rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }

/* ── 29. ARTICLE SUIVANT ─────────────────────────────────────── */

.mpi-next { display: flex; align-items: center; gap: 1rem; background: var(--color-card); border: 1.5px solid var(--color-border); border-radius: 1rem; padding: 1.25rem 1.5rem; text-decoration: none; transition: border-color .25s, box-shadow .25s; margin-top: 2rem; }
.mpi-next:hover { border-color: var(--color-secondary); box-shadow: 0 4px 20px rgba(47,46,44,.08); }
.mpi-next--upcoming { opacity: .45; cursor: default; pointer-events: none; }
.mpi-next--upcoming .mpi-next__arrow { color: var(--color-text-light); }
.mpi-next__label { font-size: .75rem; color: var(--color-text-light); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }
.mpi-next__title { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; color: var(--color-text); }
.mpi-next__arrow { color: var(--color-secondary); font-size: 1.5rem; margin-left: auto; flex-shrink: 0; }
.mpi-next__img   { width: 120px; height: 68px; object-fit: cover; border-radius: .5rem; flex-shrink: 0; }

/* ── 30. PROGRESS BAR ────────────────────────────────────────── */

.mpi-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--color-secondary); z-index: var(--z-sticky); transition: width .1s linear; }

/* ── 31. GLOSSAIRE ───────────────────────────────────────────── */

.mpi-glossaire {
  margin: 1.5rem 0;
  column-count: 2;
  column-gap: 2rem;
}
.mpi-glossaire--1col { column-count: 1; }

@media (max-width: 640px) {
  .mpi-glossaire { column-count: 1; }
}

.mpi-glossaire dt {
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-top: 1.25rem;
  break-after: avoid;
  page-break-after: avoid;
}
.mpi-glossaire dt:first-child { margin-top: 0; }

.mpi-glossaire dd {
  margin: .25rem 0 0 0;
  font-size: .8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  break-inside: avoid;
  page-break-inside: avoid;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--color-border);
}
.mpi-glossaire dd:last-child { border-bottom: none; }

.mpi-glossaire dd code {
  font-family: var(--font-mono);
  font-size: .75rem;
  background: rgba(233,116,35,.08);
  border: 1px solid rgba(233,116,35,.2);
  padding: 1px 5px;
  border-radius: .25rem;
  color: var(--color-secondary);
}

/* ── 32. PARTAGE ─────────────────────────────────────────────── */

.mpi-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--color-border);
}
.mpi-tags + .mpi-share { margin-top: -2rem; padding-top: 0; }
.mpi-share__label {
  font-size: .8125rem; font-weight: 600; color: var(--color-text-muted);
  margin-right: .25rem; white-space: nowrap;
}
.mpi-share__btn {
  display: inline-flex; align-items: center; gap: .375rem;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  padding: .375rem .875rem; border-radius: 9999px; text-decoration: none;
  white-space: nowrap; cursor: pointer; border: 1.5px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
  transition: background .15s, border-color .15s, color .15s;
}
.mpi-share__btn--linkedin { color: #0a66c2; border-color: rgba(10,102,194,.3); background: rgba(10,102,194,.05); }
.mpi-share__btn--linkedin:hover { background: rgba(10,102,194,.12); border-color: #0a66c2; }
.mpi-share__btn--x:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.mpi-share__btn--copy { color: var(--color-text-muted); }
.mpi-share__btn--copy:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
@media (max-width: 480px) { .mpi-share { gap: .4rem; } .mpi-share__btn { font-size: .75rem; padding: .3rem .75rem; } }

/* Print */
@media print {
  .mpi-glossaire {
    column-count: 2 !important;
    column-gap: 1.5rem !important;
  }
  .mpi-glossaire--1col { column-count: 1 !important; }
  .mpi-glossaire dt {
    font-size: 8pt !important;
    color: #e97423 !important;
    margin-top: 5pt !important;
    break-after: avoid !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .mpi-glossaire dd {
    font-size: 7.5pt !important;
    line-height: 1.45 !important;
    color: #374151 !important;
    margin: 1pt 0 0 !important;
    padding-bottom: 3pt !important;
    break-inside: avoid !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  .mpi-glossaire dd code {
    font-size: 7pt !important;
    padding: 0 2pt !important;
  }
}