/* ══════════════════════════════════════════════════════════════════════════
   L'ARTICLE — refonte

   Pourquoi cette feuille existe et pourquoi tout y est préfixé.

   Chaque article stocké en base embarque SA PROPRE copie de articles.css
   dans un <style> posé dans le corps de la page. Un style de corps l'emporte
   sur une feuille liée dans l'en-tête à spécificité égale : modifier
   articles.css n'aurait donc rien changé à l'écran. Chaque règle est ici
   préfixée par `.sylen-article`, ce qui ajoute une classe et fait gagner la
   surcharge quel que soit l'ordre de chargement. Les vingt articles publiés
   n'ont pas à être régénérés.

   Trois partis pris.

   1. LA PAGE OCCUPE L'ÉCRAN SANS ALLONGER LES LIGNES. Le texte reste à
      soixante-dix-huit caractères — au-delà, l'œil perd le début de la ligne
      suivante. Ce sont les tableaux, les grilles de chiffres et les figures
      qui prennent la largeur restante, en débordant sur la colonne d'appui.

   2. AUCUN DÉGRADÉ. Le voile du héros et les deux bandes d'appel en
      portaient, mesurés à 6,7 points de luminance d'écart — bien au-delà des
      cinq points tolérés par la charte. Le texte du héros se pose désormais
      sur une plaque opaque, comme la carte vedette des ressources.

   3. LE SOMMAIRE EST UN INSTRUMENT. Collé, en relief, avec la progression
      de lecture et la section courante marquée en creux.
   ══════════════════════════════════════════════════════════════════════════ */

.sylen-article {
  --a-face:   var(--face);
  --a-well:   var(--sol-creuse);
  --a-out:    var(--neu-3);
  --a-out-s:  var(--neu-2);
  --a-out-xs: var(--neu-1);
  --a-in:     var(--neu-in-3);
  --a-in-s:   var(--neu-in-2);
  --a-ink:    #16171A;
  --a-ink-2:  #4A453D;
  --a-ink-3:  #8B8478;
  --a-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --a-texte:  86ch;
  background: var(--bg);
}

/* ══ LE HÉROS ════════════════════════════════════════════════════════════ */

.sylen-article .art-hero {
  position: relative; overflow: hidden;
  min-height: min(70vh, 640px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--nav-h) + 40px);
}
.sylen-article .art-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Le voile dégradé devient un assombrissement uniforme : il rend l'image
   lisible sous la plaque sans se voir comme un dégradé. */
.sylen-article .art-hero-overlay {
  position: absolute; inset: 0; background: rgba(14, 18, 26, 0.42);
}

.sylen-article .art-hero-content {
  position: relative; z-index: 2; color: var(--a-ink);
  max-width: 860px; padding: 0; margin-bottom: -1px;
  background: var(--a-face);
  border-radius: 28px 28px 0 0;
  padding: 32px 40px 34px;
  box-shadow: 0 -14px 44px rgba(20, 14, 6, 0.28);
}
.sylen-article .art-hero-content .art-breadcrumb {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12px; margin: 0 0 18px; padding: 0; list-style: none;
  color: var(--a-ink-3);
}
.sylen-article .art-hero-content .art-breadcrumb a { color: var(--a-ink-2); text-decoration: none; font-weight: 600; }
.sylen-article .art-hero-content .art-breadcrumb a:hover { color: var(--a-ink); }
.sylen-article .art-hero-content .art-breadcrumb span { color: var(--a-ink-3); }

.sylen-article .art-hero-content .art-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--a-ink-2); background: var(--a-well); box-shadow: var(--a-in-s);
  padding: 7px 15px 7px 11px; border-radius: 999px; margin-bottom: 16px;
  backdrop-filter: none;
}
.sylen-article .art-hero-content .art-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
}
.sylen-article .art-hero-content h1 {
  font-size: clamp(28px, 3.4vw, 46px); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.034em; color: var(--a-ink);
  margin: 0 0 14px; text-wrap: balance;
}
.sylen-article .art-hero-content .art-subtitle {
  font-size: clamp(14.5px, 1.4vw, 17px); line-height: 1.6;
  color: var(--a-ink-2); max-width: 62ch; margin: 0 0 18px;
}
.sylen-article .art-hero-content .art-meta {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-size: 12.5px; color: var(--a-ink-3); font-variant-numeric: tabular-nums;
}
.sylen-article .art-hero-content .art-meta svg { opacity: 0.55; }

.sylen-article .share-bar { display: flex; gap: 9px; margin-top: 20px; }
.sylen-article .share-btn {
  width: 38px; height: 38px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--a-face); box-shadow: var(--a-out-xs);
  border: 0; color: var(--a-ink-2); cursor: pointer; text-decoration: none;
  backdrop-filter: none;
  transition: box-shadow 0.28s var(--a-ease), color 0.28s var(--a-ease), transform 0.28s var(--a-ease);
}
.sylen-article .share-btn:hover { color: var(--a-ink); transform: translateY(-2px); box-shadow: var(--a-out-s); }
.sylen-article .share-btn:active { transform: translateY(0); box-shadow: var(--a-in-s); }

/* ══ LA MISE EN PAGE ═════════════════════════════════════════════════════

   Sommaire à gauche, texte au centre, colonne d'appui à droite. Le texte
   garde sa largeur de lecture ; les tableaux, grilles et figures débordent
   sur la colonne d'appui et occupent l'écran.
   ═══════════════════════════════════════════════════════════════════════ */

.sylen-article .art-layout {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 60px;
  /* `align-items: start` sur la grille ne suffit pas : c'est `align-self`
     de la colonne qui décide, et une colonne étirée sur toute la hauteur
     n'a nulle part où coller. Sans ces deux lignes, le sommaire descend
     avec la page au lieu de rester en vue. */
  align-items: start;
  padding-top: 54px; padding-bottom: 88px;
}
.sylen-article .art-sidebar {
  order: -1; align-self: start;
  position: -webkit-sticky; position: sticky;
  top: calc(var(--nav-h) + 42px);
}
.sylen-article .art-main { min-width: 0; }

/* Le texte est CENTRÉ dans la colonne, et les blocs larges débordent des
   DEUX côtés.

   La version précédente calait le texte à gauche et laissait les tableaux
   s'étendre vers la droite : le texte semblait centré, les tableaux
   décalés, et rien n'était aligné sur rien. Mi-occupé, mi-pas — le pire
   des deux. Une gouttière élastique de chaque côté règle la question :
   la prose garde sa largeur de lecture au milieu, ce qui gagne à être
   large prend toute la place, symétriquement. */
.sylen-article .art-main > article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(var(--a-texte), 100%) minmax(0, 1fr);
  column-gap: 0;
}
.sylen-article .art-main > article > * { grid-column: 2; min-width: 0; }
/* Ce qui gagne à être large le devient. */
.sylen-article .art-main > article > .comp-table-wrap,
.sylen-article .art-main > article > .pricing-compare,
.sylen-article .art-main > article > .stat-grid,
.sylen-article .art-main > article > .usecase-grid,
.sylen-article .art-main > article > .setup-steps,
.sylen-article .art-main > article > .art-figure,
.sylen-article .art-main > article > .art-cta-mid,
.sylen-article .art-main > article > .sylen-chart,
.sylen-article .art-main > article > .sylen-compare,
.sylen-article .art-main > article > .sylen-flow,
.sylen-article .art-main > article > .decision-tree { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .sylen-article .art-layout { grid-template-columns: 1fr; gap: 0; }
  .sylen-article .art-sidebar { display: none; }
  /* Flux normal, pas une grille à une piste.
     Passer `grid-template-columns` à une seule colonne ne suffisait pas : les
     enfants gardaient `grid-column: 2`, donc la prose tombait dans une piste
     IMPLICITE qui prenait toute la largeur, pendant que les éléments larges,
     placés en `1 / -1`, se retrouvaient seuls dans la piste explicite — réduite
     à zéro faute d'occupant. Mesuré sur un écran de 375 px : colonnes
     « 0px 335px », grilles de chiffres à 117 px, titres chevauchés.
     En mode bloc, toutes les déclarations `grid-column` deviennent inertes. */
  .sylen-article .art-main > article { display: block; }
}

/* ══ LE SOMMAIRE ═════════════════════════════════════════════════════════ */

.sylen-article .art-sidebar-nav {
  background: var(--a-face); box-shadow: var(--a-out);
  border: 0; border-radius: 28px; padding: 8px;
  max-height: calc(100vh - var(--nav-h) - 76px); overflow-y: auto;
  scrollbar-width: thin;
}
.sylen-article .art-sidebar-title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--a-ink-3); margin: 0; padding: 14px 16px 12px;
}
/* La progression de lecture, dans le sommaire même. */
.sylen-article .art-toc-jauge {
  height: 3px; margin: 0 16px 10px; border-radius: 8px;
  background: var(--a-well); box-shadow: var(--a-in-s); overflow: hidden;
}
.sylen-article .art-toc-jauge i {
  display: block; height: 100%; width: 0; border-radius: 8px;
  background: var(--blue); transition: width 0.2s linear;
}
.sylen-article .art-sidebar-link {
  position: relative; display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; line-height: 1.35; font-weight: 500;
  color: var(--a-ink-2); text-decoration: none;
  padding: 10px 14px; border-radius: 14px; border: 0;
  transition: color 0.25s var(--a-ease), background 0.25s var(--a-ease), box-shadow 0.25s var(--a-ease);
}
.sylen-article .art-sidebar-link::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--a-ink-3); opacity: 0.4;
  transition: background 0.25s var(--a-ease), opacity 0.25s var(--a-ease), transform 0.25s var(--a-ease);
}
.sylen-article .art-sidebar-link:hover { color: var(--a-ink); background: var(--a-well); box-shadow: var(--a-in-s); }
.sylen-article .art-sidebar-link.active {
  color: var(--a-ink); font-weight: 700;
  background: var(--a-well); box-shadow: var(--a-in-s);
  border-left: 0;
}
.sylen-article .art-sidebar-link.active::before { background: var(--blue); opacity: 1; transform: scale(1.35); }

/* ══ LA BARRE DE PROGRESSION ═════════════════════════════════════════════ */

.sylen-article .reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--blue); z-index: 10002; transition: width 0.12s linear;
}

/* ══ LE TEXTE ════════════════════════════════════════════════════════════ */

.sylen-article .art-main h2 {
  font-size: clamp(23px, 2.4vw, 32px); font-weight: 800;
  line-height: 1.14; letter-spacing: -0.03em; color: var(--a-ink);
  margin: 68px 0 18px; scroll-margin-top: calc(var(--nav-h) + 44px);
  text-wrap: balance;
}
.sylen-article .art-main h2:first-child { margin-top: 0; }
.sylen-article .art-main h3 {
  font-size: clamp(17px, 1.7vw, 21px); font-weight: 700;
  line-height: 1.28; letter-spacing: -0.018em; color: var(--a-ink);
  margin: 40px 0 12px;
}
.sylen-article .art-main p {
  font-size: 16.5px; line-height: 1.78; color: var(--a-ink-2); margin: 0 0 22px;
}
.sylen-article .art-main ul, .sylen-article .art-main ol { margin: 0 0 22px; padding-left: 22px; }
.sylen-article .art-main li { font-size: 16px; line-height: 1.72; color: var(--a-ink-2); margin-bottom: 10px; }
.sylen-article .art-main li::marker { color: var(--a-ink-3); }
.sylen-article .art-main strong { color: var(--a-ink); font-weight: 700; }
.sylen-article .art-main a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ══ LES BLOCS ═══════════════════════════════════════════════════════════ */

.sylen-article .geo-answer {
  background: var(--a-face); box-shadow: var(--a-out); border: 0; border-left: 0;
  border-radius: 22px; padding: 30px 34px; margin: 0 0 32px;
}
.sylen-article .geo-answer-label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--a-ink-2); background: var(--a-well); box-shadow: var(--a-in-s);
  border-radius: 999px; padding: 7px 15px 7px 11px; margin-bottom: 16px;
}
.sylen-article .geo-answer-label::before { width: 7px; height: 7px; background: var(--blue); }
.sylen-article .geo-answer p { font-size: 16.5px; line-height: 1.72; color: var(--a-ink); font-weight: 500; margin: 0; }
.sylen-article .geo-answer strong { color: var(--a-ink); }

.sylen-article .callout {
  background: var(--a-face); box-shadow: var(--a-out-s);
  border: 0; border-left: 0; border-radius: 18px; padding: 22px 26px; margin: 32px 0;
}
.sylen-article .callout-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sylen-article .callout-label { font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.sylen-article .callout p { font-size: 15px; line-height: 1.72; color: var(--a-ink-2); margin: 0; }
.sylen-article .callout-tip { --c: var(--blue); }
.sylen-article .callout-important { --c: #D45FB4; }
.sylen-article .callout-stat { --c: var(--indigo); }
.sylen-article .callout-retenir { --c: #009A61; }
.sylen-article .callout .callout-label, .sylen-article .callout .callout-header svg { color: var(--c); }
.sylen-article .callout .callout-header svg {
  flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 11px;
  background: var(--a-well); box-shadow: var(--a-in-s); box-sizing: border-box;
}

.sylen-article .pull-quote {
  font-size: clamp(19px, 1.9vw, 24px); font-weight: 700; line-height: 1.38;
  letter-spacing: -0.022em; color: var(--a-ink); font-style: normal;
  border: 0; border-left: 0; margin: 44px 0; padding: 28px 32px;
  background: var(--a-well); box-shadow: var(--a-in); border-radius: 22px;
}

.sylen-article .stat-card,
.sylen-article .myth-card,
.sylen-article .usecase-card,
.sylen-article .decision-node,
.sylen-article .criteria-list li,
.sylen-article .setup-step {
  background: var(--a-face); box-shadow: var(--a-out-s); border: 0; border-radius: 22px;
}
.sylen-article .usecase-card { border-top: 0; }
.sylen-article .stat-num { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sylen-article .stat-label { font-size: 12.5px; color: var(--a-ink-3); line-height: 1.45; margin-top: 8px; }
.sylen-article .myth-card:hover, .sylen-article .usecase-card:hover,
.sylen-article .decision-node:hover, .sylen-article .criteria-list li:hover { box-shadow: var(--a-in-s); }

.sylen-article .art-img-full { border-radius: 22px; box-shadow: var(--a-out-s); }
.sylen-article .art-img-caption { font-size: 12.5px; color: var(--a-ink-3); margin-top: 12px; text-align: left; }

.sylen-article .comp-table-wrap { border-radius: 22px; box-shadow: var(--a-out-s); }
.sylen-article .comp-table thead th { background: var(--a-ink); color: #EDEDEF; }
.sylen-article .comp-table tbody td { color: var(--a-ink-2); }
.sylen-article .pricing-compare { box-shadow: var(--a-out-s); border-radius: 22px; }
.sylen-article .pricing-compare th { background: var(--a-well); color: var(--a-ink); }

.sylen-article .internal-link { border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ══ LES APPELS À L'ACTION ═══════════════════════════════════════════════ */

.sylen-article .art-cta-mid,
.sylen-article .art-cta-band { background: #16181F; border-radius: 28px; }
.sylen-article .art-cta-mid { padding: 40px 36px; margin: 52px 0; }
.sylen-article .art-cta-mid h3, .sylen-article .art-cta-band h2 { color: #EDEDEF; letter-spacing: -0.028em; }
.sylen-article .art-cta-mid p, .sylen-article .art-cta-band p { color: rgba(242,242,243,0.62); }
.sylen-article .art-cta-mid .cta-btn,
.sylen-article .art-cta-band .btn-primary {
  background: #FF91E4; color: #16181F; font-weight: 700; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(255,145,228,0.26), 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.28s var(--a-ease), background 0.24s var(--a-ease), box-shadow 0.28s var(--a-ease);
}
.sylen-article .art-cta-mid .cta-btn:hover,
.sylen-article .art-cta-band .btn-primary:hover { background: #FFA6EA; color: #16181F; transform: translateY(-2px); }
.sylen-article .art-cta-mid .cta-btn:active,
.sylen-article .art-cta-band .btn-primary:active {
  transform: translateY(0); background: #F07FD2;
  box-shadow: inset 3px 4px 9px rgba(120,40,95,0.45), inset -2px -2px 6px rgba(255,255,255,0.35);
}
.sylen-article .art-cta-band { padding: 64px 40px; margin: 0 0 8px; }

/* ══ LES ARTICLES RECOMMANDÉS ════════════════════════════════════════════ */

.sylen-article .art-recommended { background: var(--bg); border-top: 1px solid rgba(120,120,128,0.18); }
.sylen-article .art-rec-card {
  background: var(--a-face); box-shadow: var(--a-out-s); border: 0; border-radius: 22px; padding: 10px;
  transition: transform 0.35s var(--a-ease), box-shadow 0.35s var(--a-ease);
}
.sylen-article .art-rec-card:hover { transform: translateY(-4px); box-shadow: var(--a-out); }
.sylen-article .art-rec-card img { border-radius: 18px; height: 172px; }
.sylen-article .art-rec-card-body { padding: 16px 12px 10px; }
.sylen-article .art-rec-badge {
  background: var(--a-well); box-shadow: var(--a-in-s); color: var(--a-ink-2);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 999px; padding: 6px 13px;
}
.sylen-article .art-rec-card h4 { font-size: 15px; letter-spacing: -0.014em; color: var(--a-ink); }
.sylen-article .art-rec-card .art-rec-time { font-size: 12px; color: var(--a-ink-3); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .sylen-article .art-rec-card, .sylen-article .share-btn,
  .sylen-article .art-cta-mid .cta-btn, .sylen-article .art-cta-band .btn-primary { transition: none !important; }
  .sylen-article .art-rec-card:hover, .sylen-article .share-btn:hover { transform: none; }
}


/* ══ LES ACCENTS QUI PORTENT DU TEXTE ════════════════════════════════════
   Pure pour les points et les aplats, variante encre dès qu'un glyphe doit
   se lire. Ratios mesurés sur le sol : 4,68 · 3,22 · 5,55 · 3,85 · 3,39. */
/* `.stat-grid .stat-num.amber` est écrit dans le <style> que chaque article
   embarque : à spécificité égale, c'est lui qui gagnait, parce qu'un style de
   corps est lu après une feuille d'en-tête. D'où `.stat-grid` ici aussi —
   un cran au-dessus, sans recourir à !important. */
.sylen-article .geo-answer-label { color: #0570CC; }
.sylen-article .stat-grid .stat-num.blue   { color: #0570CC; }
.sylen-article .stat-grid .stat-num.pink   { color: #D45FB4; }
.sylen-article .stat-grid .stat-num.indigo { color: #4F52D9; }
.sylen-article .stat-grid .stat-num.amber  { color: #D9500F; }
.sylen-article .stat-grid .stat-num.green  { color: #009A61; }

/* ══ « À LIRE AUSSI » ═════════════════════════════════════════════════════
   Le bloc vivait en styles en dur dans la page : cartes blanches, bordures
   grises, bleu pur à 3,08:1 — trois choses que la charte interdit. Il
   reprend ici le vocabulaire des cartes recommandées, et ne repropose plus
   les articles déjà cités par « Sur le même sujet » juste au-dessus. */
.art-aussi { background: var(--sol); padding: 8px 0 76px; }
.art-aussi > .container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 64px); }
.art-aussi h2 {
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.028em;
  color: var(--encre); margin: 0 0 22px;
}
/* L'espacement vient du bloc recommandé (24 px) : à 18 px, les cartes
   gagnaient 4 px et les deux grilles ne se superposaient plus. */
.art-aussi .art-rec-grid { margin-bottom: 40px; }

.art-aussi-liens { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.art-aussi-liens a {
  font-size: 13px; font-weight: 600; color: var(--encre-2); text-decoration: none;
  padding: 10px 16px; border-radius: 999px; background: var(--face); box-shadow: var(--neu-1);
  transition: color 0.25s var(--a-ease, ease), box-shadow 0.25s var(--a-ease, ease);
}
.art-aussi-liens a:hover { color: var(--encre); box-shadow: var(--neu-2); }
.art-aussi-liens a:active { box-shadow: var(--neu-in-1); }
.art-aussi-liens a:focus-visible { outline: 2px solid #068FFF; outline-offset: 3px; }

@media (max-width: 560px) {
  .art-aussi { padding-bottom: 56px; }
  .art-aussi .art-rec-grid { gap: 14px; margin-bottom: 30px; }
  .art-aussi-liens a { font-size: 12.5px; padding: 9px 14px; }
}


/* ══ LA FAQ NE BOUGE PLUS ════════════════════════════════════════════════
   `.faq-modern` est un enfant de la grille de l'article, en `max-width:800px`
   mais sans largeur propre : sa largeur se calculait donc sur son contenu.
   Fermée, la plus longue question faisait 609 px ; on en ouvrait une, la
   réponse poussait à 800, et TOUTES les cartes s'élargissaient d'un coup.
   Une largeur explicite fige les 800 px dans les deux états. */
.sylen-article .art-main > article > .faq-modern { width: 100%; }

/* ══ LE BOUTON D'APPEL À L'ACTION ════════════════════════════════════════
   Le site n'a pas de bouton en pilule : la barre est à 8, le pied à 11, et
   la charte fixe 11 pour un bouton. Le CTA d'article était le seul arrondi
   à 999 px. Il reprend le gabarit du pied — même rayon, même rembourrage —
   en gardant le rose, qui est la couleur d'action sur une plaque sombre. */
.sylen-article .art-cta-mid .cta-btn,
.sylen-article .art-cta-band .btn-primary {
  border-radius: 11px; padding: 15px 30px; font-size: 15px; font-weight: 700;
}
@media (max-width: 560px) {
  .sylen-article .art-cta-mid .cta-btn,
  .sylen-article .art-cta-band .btn-primary { display: flex; width: 100%; justify-content: center; }
}

/* ══ « À LIRE AUSSI » : LES MÊMES CARTES QUE « SUR LE MÊME SUJET » ═══════
   Le bloc avait ses propres tailles d'image et de titre. Il hérite désormais
   de `.art-recommended`, et ne garde en propre que le titre et les pastilles. */
.art-aussi .art-rec-card img { height: auto; }
.art-aussi .art-rec-card h4 { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }

/* ══ LA PLAQUE ROSE ══════════════════════════════════════════════════════
   `art-cta-mid-pink` vient du <style> embarqué dans l'article : son fond rose
   l'emporte sur la plaque d'encre définie plus haut. Le bouton, lui, restait
   rose — rose sur rose, donc invisible.

   Plutôt que d'imposer une couleur de bouton dans l'absolu, on l'accorde à sa
   plaque : encre sur plaque rose, rose sur plaque d'encre. La règle tient
   quelle que soit celle des deux qui gagne la cascade. */
.sylen-article .art-cta-mid-pink h3 { color: #16181F; }
.sylen-article .art-cta-mid-pink p  { color: rgba(22, 24, 31, 0.74); }
.sylen-article .art-cta-mid-pink .cta-btn {
  background: #16181F; color: #F2F2F3;
  box-shadow: 0 10px 24px rgba(22, 24, 31, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
}
.sylen-article .art-cta-mid-pink .cta-btn:hover {
  background: #23262F; color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(22, 24, 31, 0.34), 0 2px 6px rgba(0, 0, 0, 0.2);
}
.sylen-article .art-cta-mid-pink .cta-btn:active {
  background: #0F1116; transform: translateY(0);
  box-shadow: inset 3px 4px 9px rgba(0, 0, 0, 0.45), inset -2px -2px 6px rgba(255, 255, 255, 0.12);
}