/* ============================================================
   polish.css — habillage éditorial (composants) — lefeusacre-editions.com
   Réutilise les tokens de style.css (teal / or / Spectral / Source Sans 3)
   ============================================================ */

/* ---------- Wordmark (remplace le logo Observatoire) ---------- */
.brand{display:inline-flex;align-items:center;gap:.6em;text-decoration:none;}
.brand__mark{width:38px;height:38px;flex:none;}
.brand__text{display:flex;flex-direction:column;line-height:1;}
.brand__name{font-family:var(--serif);font-weight:800;font-size:1.18rem;letter-spacing:-.01em;color:var(--teal-deep);}
.brand__name em{font-style:normal;color:var(--gold);}
.brand__tag{font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:.25em;}

/* ---------- Eyebrow (label au-dessus des H2) ---------- */
.eyebrow{display:flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:2.4em 0 -.3em;}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px;}
.eyebrow + h2{margin-top:.35em;}

/* ---------- Lead paragraph (chapô de section) ---------- */
.lead{font-family:var(--serif);font-size:1.16rem;line-height:1.55;color:var(--ink);margin:.4em 0 1.1em;}

/* ---------- Keyfacts band (stats sous le lede) ---------- */
.keyfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;margin:1.4em 0 1.8em;}
.keyfact{background:linear-gradient(180deg,var(--bg-cream),#fff);border:1px solid var(--line);border-radius:var(--radius);padding:.9em .7em;text-align:center;}
.keyfact__num{font-family:var(--serif);font-weight:800;font-size:1.6rem;line-height:1;color:var(--teal);letter-spacing:-.01em;}
.keyfact__num em{font-style:normal;color:var(--gold);}
.keyfact__label{font-family:var(--sans);font-size:.76rem;color:var(--ink-soft);margin-top:.45em;line-height:1.25;}

/* ---------- Callouts ---------- */
.callout{display:flex;gap:.9em;align-items:flex-start;background:var(--bg-alt);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0;padding:1em 1.2em;margin:1.3em 0;}
.callout__icon{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--teal);color:#fff;font-weight:800;font-size:1.05rem;}
.callout__body{margin:0;}
.callout__body strong{color:var(--teal-deep);}
.callout__title{display:block;font-family:var(--sans);font-weight:700;color:var(--teal-deep);margin-bottom:.15em;}
.callout p{margin:.2em 0 0;}
.callout--warn{border-left-color:var(--warn);background:#fff7ed;}
.callout--warn .callout__icon{background:var(--warn);}
.callout--warn .callout__title{color:var(--warn);}
.callout--help{border-left-color:var(--gold);background:var(--bg-cream);}
.callout--help .callout__icon{background:var(--gold);}
.callout--help .callout__title{color:var(--gold-soft);}

/* ---------- Steps (parcours numéroté) ---------- */
.steps{list-style:none;counter-reset:s;padding:0;margin:1.3em 0 1.6em;display:grid;grid-template-columns:1fr 1fr;gap:1em;}
.step{counter-increment:s;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.15em 1.2em 1.1em 1.2em;box-shadow:var(--shadow);}
.step::before{content:counter(s);position:absolute;top:-.55em;left:1.1em;width:2em;height:2em;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;font-family:var(--serif);font-weight:800;font-size:1.05rem;border-radius:50%;box-shadow:0 3px 10px rgba(13,122,111,.35);}
.step h3{margin:.6em 0 .35em;font-size:1.08rem;color:var(--teal-deep);}
.step p{margin:0;font-size:.96rem;color:var(--ink-soft);line-height:1.55;}
.step strong{color:var(--teal-deep);}

/* ---------- Compare cards (vs bienvenue) ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin:1.3em 0 1.4em;}
.compare__card{border:1px solid var(--line);border-radius:var(--radius);padding:1.2em 1.3em;background:#fff;box-shadow:var(--shadow);}
.compare__card--a{border-top:4px solid var(--teal);}
.compare__card--b{border-top:4px solid var(--gold);}
.compare__label{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.compare__card--a .compare__label{color:var(--teal);}
.compare__card--b .compare__label{color:var(--gold-soft);}
.compare__title{font-family:var(--serif);font-weight:800;font-size:1.18rem;color:var(--teal-deep);margin:.15em 0 .5em;}
.compare ul{list-style:none;padding:0;margin:0;display:grid;gap:.5em;}
.compare li{position:relative;padding-left:1.5em;font-size:.96rem;line-height:1.5;color:var(--ink-soft);}
.compare li::before{content:"";position:absolute;left:0;top:.5em;width:.55em;height:.55em;border-radius:50%;background:var(--teal);}
.compare__card--b li::before{background:var(--gold);}

/* ---------- Criteria cards (bien choisir) ---------- */
.criteria{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;margin:1.3em 0 1.4em;}
.criterion{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:1.1em 1.15em;}
.criterion__ico{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:.65em;}
.criterion__ico svg{width:22px;height:22px;}
.criterion h3{margin:0 0 .3em;font-size:1.05rem;color:var(--teal-deep);}
.criterion p{margin:0;font-size:.93rem;color:var(--ink-soft);line-height:1.5;}
.criterion strong{color:var(--teal-deep);}

/* ---------- Section divider ---------- */
.article h2{margin-top:1.6em;}

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .keyfacts{grid-template-columns:1fr 1fr;}
  .steps,.compare,.criteria{grid-template-columns:1fr;}
  .brand__tag{display:none;}
}