/* =========================================================
   Revisly — blog (index et article)
   (se charge par-dessus styles.css, la feuille de la landing)
   ========================================================= */

/* ---------- en-tête d'index ---------- */
.blog-hero{position:relative;z-index:1;padding:148px 0 0;text-align:center}
.blog-hero h1{font-size:2.75rem;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.blog-hero .chapeau{margin:16px auto 0;max-width:56ch;font-size:1.0625rem;color:var(--ink-secondary)}

.rubriques{
  position:relative;z-index:1;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:28px;
}
.rubrique{
  padding:8px 16px;border-radius:999px;font-size:.875rem;white-space:nowrap;
  background:var(--surface-primary);border:1px solid var(--surface-border);
  color:var(--ink-secondary);transition:border-color .15s,color .15s,background .15s;
}
.rubrique:hover{color:var(--ink-primary);border-color:#d5d4d0}
.rubrique.on{background:var(--sky-bold);border-color:var(--sky-bold);color:#fff}

/* ---------- article en avant ---------- */
.avant{position:relative;z-index:1;padding:44px 0 0}
.avant-carte{
  display:grid;grid-template-columns:1.1fr 1fr;gap:0;overflow:hidden;
  background:var(--surface-primary);border:1px solid var(--surface-border);
  border-radius:24px;box-shadow:var(--shadow-md);
  transition:box-shadow .18s,transform .14s;
}
.avant-carte:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.avant-texte{padding:38px}
.avant .marque{
  display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sky-bold);
}
.avant h2{margin-top:12px;font-size:1.875rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.avant .resume{margin-top:14px;font-size:1rem;line-height:1.7;color:var(--ink-secondary)}
.avant .lire{
  margin-top:20px;display:inline-flex;align-items:center;gap:8px;
  font-size:.9375rem;font-weight:600;color:var(--sky-bold);
}
.avant .lire svg{width:16px;height:16px;transition:transform .15s}
.avant-carte:hover .lire svg{transform:translateX(3px)}

.vignette{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#dceafa 0%,#eaf4fd 60%,#f6fbff 100%);
  min-height:280px;
}
.vignette .sigle{font-size:4.5rem;line-height:1}

/* ---------- grille d'articles ---------- */
.billets{
  position:relative;z-index:1;padding:24px 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
}
.billet{
  display:flex;flex-direction:column;overflow:hidden;min-width:0;
  background:var(--surface-primary);border:1px solid var(--surface-border);
  border-radius:20px;box-shadow:var(--shadow-sm);
  transition:box-shadow .18s,transform .14s,border-color .15s;
}
.billet:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:#d5d4d0}
.billet .haut{
  height:120px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#e6f0fb 0%,#f2f8fe 100%);
}
.billet .haut .sigle{font-size:2.25rem;line-height:1}
.billet .corps{padding:20px;display:flex;flex-direction:column;flex:1}
.billet .marque{font-size:.6875rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sky-bold)}
.billet h3{margin-top:9px;font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.billet .resume{
  margin-top:9px;font-size:.875rem;line-height:1.6;color:var(--ink-secondary);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.billet .pied{
  margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:8px;
  font-size:.75rem;color:var(--ink-tertiary);
}
.billet .pied .point{width:3px;height:3px;border-radius:999px;background:var(--ink-tertiary);flex:none}

.aucun-billet{
  grid-column:1/-1;text-align:center;padding:48px 20px;
  background:var(--surface-primary);border:1px dashed var(--surface-border);border-radius:20px;
}
.aucun-billet b{display:block;font-size:1.0625rem}
.aucun-billet p{margin-top:8px;font-size:.9375rem;color:var(--ink-secondary)}

/* ---------- page article ---------- */
.art-hero{position:relative;z-index:1;padding:140px 0 0}
.art-hero .fil{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:20px;
  font-size:.8125rem;color:var(--ink-tertiary);
}
.art-hero .fil:hover{color:var(--ink-primary)}
.art-hero .fil svg{width:14px;height:14px}
.art-hero .marque{
  display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sky-bold);
  background:var(--sky-soft);border-radius:999px;padding:4px 11px;
}
.art-hero h1{
  margin-top:16px;max-width:20ch;
  font-size:2.75rem;font-weight:700;letter-spacing:-.025em;line-height:1.12;
}
.art-hero .signature{
  margin-top:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.875rem;color:var(--ink-secondary);
}
.art-hero .rond{
  width:34px;height:34px;border-radius:999px;background:var(--sky-bold);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:700;flex:none;
}
.art-hero .point{width:3px;height:3px;border-radius:999px;background:var(--ink-tertiary);flex:none}

.art-corps{
  position:relative;z-index:1;
  max-width:70ch;margin:0 auto;padding:38px 0 20px;
  font-size:1.0625rem;line-height:1.8;color:var(--ink-secondary);
}
.art-corps > p:first-child{
  font-size:1.1875rem;line-height:1.75;color:var(--ink-primary);
}
.art-corps h2{
  margin:40px 0 14px;font-size:1.5rem;font-weight:700;
  letter-spacing:-.015em;line-height:1.3;color:var(--ink-primary);
}
.art-corps h3{margin:28px 0 10px;font-size:1.125rem;font-weight:600;color:var(--ink-primary)}
.art-corps p{margin:0 0 18px}
.art-corps ul,.art-corps ol{margin:0 0 20px;padding-left:24px;list-style:revert}
.art-corps li{margin-bottom:10px}
.art-corps b,.art-corps strong{color:var(--ink-primary);font-weight:600}
.art-corps a{color:var(--sky-bold);text-decoration:underline;text-underline-offset:2px}
.art-corps blockquote{
  margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid var(--sky-bold);
  font-size:1.125rem;line-height:1.7;color:var(--ink-primary);font-style:italic;
}
.art-corps .encadre{
  margin:26px 0;background:var(--sky-soft);border:1px solid #cfe6fa;
  border-radius:16px;padding:20px 24px;
}
.art-corps .encadre p{margin-bottom:0;font-size:1rem}
.art-corps .encadre b{display:block;margin-bottom:6px}

/* fin d'article */
.art-fin{
  max-width:70ch;margin:44px auto 0;padding-top:28px;
  border-top:1px solid var(--surface-border);
}
.art-fin .cta-lecture{
  background:var(--surface-primary);border:1px solid var(--surface-border);
  border-radius:20px;padding:26px 28px;text-align:center;box-shadow:var(--shadow-sm);
}
.art-fin .cta-lecture b{display:block;font-size:1.125rem}
.art-fin .cta-lecture p{margin-top:8px;font-size:.9375rem;color:var(--ink-secondary)}
.art-fin .cta-lecture .btn-stack{margin-top:18px}

.suite{position:relative;z-index:1;padding:60px 0 90px}
.suite h2{font-size:1.25rem;font-weight:700;letter-spacing:-.015em;margin-bottom:18px}
.suite-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

@media (prefers-reduced-motion: reduce){
  .billet,.avant-carte,.avant .lire svg,.rubrique{transition:none}
}

@media (max-width:1000px){
  .billets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .avant-carte{grid-template-columns:1fr}
  .vignette{min-height:160px;order:-1}
}
@media (max-width:660px){
  .blog-hero{padding-top:120px}
  .blog-hero h1{font-size:2rem}
  .billets{grid-template-columns:1fr}
  .avant-texte{padding:26px}
  .avant h2{font-size:1.5rem}
  .art-hero{padding-top:118px}
  .art-hero h1{font-size:1.875rem;max-width:none}
  .art-corps{font-size:1rem}
  .suite-grille{grid-template-columns:1fr}
}