/* Vignettes éditoriales CABS — compositions légères en HTML/CSS.
   Première expérimentation : fiscalité + dialogue citoyen. */

/* Harmonisation globale des CTA de une de rubrique avec l’accueil.
   Placée dans la dernière feuille chargée pour neutraliser les anciens boutons pilules. */
.category-page a.read-article-link,
.category-page a.category-featured__cta {
  display:inline-flex !important;
  align-items:center !important;
  gap:2rem !important;
  margin-top:1.4rem !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--text) !important;
  box-shadow:none !important;
  font-family:inherit !important;
  font-size:.85rem !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  text-decoration:underline !important;
  text-underline-offset:.25em !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
}

.category-page a.read-article-link:hover,
.category-page a.read-article-link:focus-visible,
.category-page a.category-featured__cta:hover,
.category-page a.category-featured__cta:focus-visible {
  border:0 !important;
  background:transparent !important;
  color:var(--text) !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
}

.category-page a.read-article-link span,
.category-page a.category-featured__cta span {
  text-decoration:none !important;
}

.journal-feature__story--with-vignette {
  margin-top:1.8rem;
}

.journal-feature__title-row {
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:1.25rem;
  align-items:start;
  margin:.65rem 0 .95rem;
}

.journal-feature__title-row h3 {
  margin:0 !important;
}

.journal-vignette {
  position:relative;
  width:112px;
  height:106px;
  overflow:hidden;
  isolation:isolate;
  background:transparent;
  border:0;
}

/* Motif : l'impôt comme contrainte chiffrée, le dialogue comme issue.
   Aucun texte ni pictogramme importé : uniquement des formes CSS. */
.journal-vignette--tax-dialogue::before,
.journal-vignette--tax-dialogue::after {
  content:"";
  position:absolute;
  pointer-events:none;
}

.journal-vignette--tax-dialogue::before {
  width:74px;
  height:74px;
  top:8px;
  left:4px;
  border-radius:50%;
  background:#dce6e9;
  opacity:.72;
}

.journal-vignette--tax-dialogue::after {
  width:64px;
  height:64px;
  right:-28px;
  bottom:-23px;
  border-radius:50%;
  border:1px solid rgba(40,104,95,.22);
}

.journal-vignette__halo {
  position:absolute;
  width:45px;
  height:45px;
  top:20px;
  left:30px;
  border-radius:50%;
  border:1px solid rgba(47,96,121,.28);
}

.journal-vignette__bar {
  position:absolute;
  bottom:8px;
  width:10px;
  background:var(--brand-blue);
  opacity:.78;
}

.journal-vignette__bar--1 { left:11px; height:16px; }
.journal-vignette__bar--2 { left:26px; height:27px; opacity:.66; }
.journal-vignette__bar--3 { left:41px; height:39px; opacity:.54; }

.journal-vignette__percent {
  position:absolute;
  top:17px;
  left:18px;
  width:48px;
  height:48px;
  transform:rotate(-7deg);
}

.journal-vignette__percent::before,
.journal-vignette__percent::after {
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  border:3px solid var(--brand-blue);
  border-radius:50%;
  box-sizing:border-box;
  background:transparent;
}

.journal-vignette__percent::before { top:3px; left:4px; }
.journal-vignette__percent::after { right:4px; bottom:3px; }

.journal-vignette__percent i {
  position:absolute;
  width:4px;
  height:48px;
  top:0;
  left:22px;
  background:var(--brand-blue);
  transform:rotate(42deg);
  transform-origin:center;
}

.journal-vignette__bubble {
  position:absolute;
  width:48px;
  height:32px;
  right:6px;
  bottom:11px;
  border:2px solid var(--accent);
  border-radius:50%;
  background:transparent;
  box-sizing:border-box;
}

.journal-vignette__bubble::after {
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  right:7px;
  bottom:-6px;
  background:transparent;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:skew(18deg) rotate(24deg);
}

.journal-vignette__bubble::before {
  content:"";
  position:absolute;
  width:19px;
  height:1px;
  top:14px;
  left:13px;
  background:rgba(40,104,95,.55);
  box-shadow:0 -5px 0 rgba(40,104,95,.28), 0 5px 0 rgba(40,104,95,.28);
}

.journal-vignette__bridge {
  position:absolute;
  width:36px;
  height:1px;
  left:44px;
  bottom:44px;
  background:rgba(88,105,99,.4);
  transform:rotate(-21deg);
  transform-origin:left center;
}

@media(max-width:760px) {
  .journal-feature__story--with-vignette {
    margin-top:1.25rem;
  }

  .journal-feature__title-row {
    grid-template-columns:86px minmax(0,1fr);
    gap:.9rem;
    margin:.55rem 0 .8rem;
  }

  .journal-vignette {
    width:86px;
    height:82px;
    transform:scale(.82);
    transform-origin:top left;
  }
}

@media(max-width:520px) {
  .journal-feature__title-row {
    grid-template-columns:72px minmax(0,1fr);
    gap:.75rem;
  }

  .journal-vignette {
    width:72px;
    height:72px;
    transform:scale(.68);
  }
}