/* =========================================================================
   Susanna Marcellini — Il mio Blog — site.css
   Archétype : « magazine éditorial / Swiss Modernism » (presse d'opinion, typo-first).
   Signature : NAMEPLATE de journal (Libre Bodoni géant + double filet) + INDEX
   éditorial à GROS NUMÉROS et FILETS, accent magenta franc, grille rationnelle.
   ANTI-FOOTPRINT : aucune classe custom — uniquement classes/ids Bootstrap existants,
   éléments et pseudo-éléments.
   ========================================================================= */

:root {
  --sm-ink: #18181b;          /* noir éditorial (dominante) */
  --sm-ink-rgb: 24, 24, 27;
  --sm-soft: #3f3f46;
  --sm-mag: #d81e5b;          /* magenta-rose (accent) */
  --sm-mag-rgb: 216, 30, 91;
  --sm-mag-deep: #b01049;
  --sm-bg: #fafafa;          /* blanc cassé (fond) */
  --sm-paper: #ffffff;
  --sm-muted: #6b6b73;
  --sm-line: #e1e1e4;        /* filets fins */
  --sm-line-strong: #18181b;

  --bs-primary: #18181b;
  --bs-primary-rgb: 24, 24, 27;

  --bs-body-bg: var(--sm-bg);
  --bs-body-color: #26262b;
  --bs-body-font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  --bs-body-font-size: 1.04rem;
  --bs-body-line-height: 1.6;

  --bs-heading-color: var(--sm-ink);
  --bs-link-color: var(--sm-ink);
  --bs-link-hover-color: var(--sm-mag-deep);
  --bs-border-color: var(--sm-line);
}

body {
  background-color: var(--sm-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Libre Bodoni', Georgia, serif;
  font-weight: 600; line-height: 1.12;
  letter-spacing: -0.005em; color: var(--sm-ink);
}
p { text-wrap: pretty; }
::selection { background: var(--sm-mag); color: #fff; }
a { transition: color 0.16s ease, background 0.16s ease; }

/* labels & bylines en grotesque, capitales espacées (Swiss) */
#mast-navlink, #lead-byline, #index-byline, #lead-more, #index-more, #pager-next,
#mast-tagline, #footer-copyright {
  font-family: 'Archivo', sans-serif;
}

/* =========================================================================
   MASTHEAD — nameplate de journal
   ========================================================================= */
#masthead { background: var(--sm-paper); border-bottom: 3px double var(--sm-ink); }
#mast-top { border-bottom: 1px solid var(--sm-line); }
#mast-nav { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; }
#mast-navlink { color: var(--sm-ink); text-decoration: none; position: relative; }
#mast-navlink:hover { color: var(--sm-mag-deep); }
#mast-plate { padding: 2.4rem 0 1.8rem; }
#mast-title {
  font-family: 'Libre Bodoni', Georgia, serif; font-weight: 700;
  color: var(--sm-ink); line-height: 1; letter-spacing: -0.01em;
  font-size: clamp(2.4rem, 7vw, 5.4rem);
}
#mast-title:hover { color: var(--sm-ink); }
#mast-tagline {
  margin-top: 0.7rem; color: var(--sm-mag-deep);
  font-style: italic; font-family: 'Libre Bodoni', serif;
  font-size: 1.15rem; letter-spacing: 0.02em;
}

/* =========================================================================
   ARTICOLO DI APERTURA (lead)
   ========================================================================= */
#lead-wrap { padding: 3rem 0; border-bottom: 1px solid var(--sm-line); }
#lead { max-width: 56rem; }
#lead-title {
  font-size: clamp(2rem, 5.2vw, 3.8rem); font-weight: 700; line-height: 1.06;
  margin-bottom: 1.2rem;
}
#lead-title a:hover { color: var(--sm-mag-deep); }
#lead-byline {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--sm-muted); font-weight: 600; margin-bottom: 1.2rem;
}
#lead-more, #index-more, #pager-next {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--sm-ink); text-decoration: none;
  border-bottom: 2px solid var(--sm-mag); padding-bottom: 2px;
}
#lead-more:hover, #index-more:hover, #pager-next:hover { color: var(--sm-mag-deep); background: rgba(216, 30, 91, 0.08); }

/* =========================================================================
   INDICE / ARCHIVIO — liste à gros numéros + filets
   ========================================================================= */
#index-wrap { padding-top: 2.5rem; }
#index-head { height: 4px; background: var(--sm-ink); width: 64px; margin-bottom: 2rem; }
#index-item { padding: 1.8rem 0; border-bottom: 1px solid var(--sm-line); }
#index-item:first-child { border-top: 1px solid var(--sm-line); }
#index-num {
  font-family: 'Libre Bodoni', serif; font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1;
  color: var(--sm-line); display: inline-block; min-width: 2.6rem;
  transition: color 0.18s ease;
}
#index-item:hover #index-num { color: var(--sm-mag); }
#index-title {
  font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.12;
  margin-bottom: 0.5rem;
}
#index-title a:hover { color: var(--sm-mag-deep); }
#index-byline {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--sm-muted); font-weight: 600;
}

/* paginazione */
#pager { border-top: 3px double var(--sm-ink); margin-top: 1.5rem; }

/* =========================================================================
   ARTICOLO SINGOLO
   ========================================================================= */
#single { padding: 3.5rem 0 1rem; }
#single-rule { display: block; width: 64px; height: 4px; background: var(--sm-mag); margin-bottom: 1.6rem; }
#single-title {
  font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.05;
  margin-bottom: 2rem; padding-bottom: 1.6rem; border-bottom: 3px double var(--sm-ink);
}
#single-body p { font-size: 1.18rem; line-height: 1.78; color: #2b2b30; margin-bottom: 1.5rem; }
#single-lead { font-size: 1.32rem !important; color: var(--sm-ink) !important; }
#single-lead::first-letter {
  float: left; font-family: 'Libre Bodoni', serif; font-weight: 700;
  font-size: 3.8rem; line-height: 0.8; color: var(--sm-mag); margin: 0.3rem 0.65rem 0 0;
}
#single-meta {
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--sm-line);
  font-family: 'Archivo', sans-serif; font-size: 0.82rem; color: var(--sm-muted);
}
#single-meta-label {
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
  color: var(--sm-mag-deep);
}

/* =========================================================================
   ARCHIVIO TAG
   ========================================================================= */
#archive-title {
  font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; line-height: 1.08;
}
#archive-rule { display: block; width: 64px; height: 4px; background: var(--sm-mag); margin-top: 1.2rem; }

/* =========================================================================
   SEO (bas de page)
   ========================================================================= */
#seo { background: var(--sm-paper); border-top: 1px solid var(--sm-line); border-bottom: 1px solid var(--sm-line); }
#seo h2 { font-family: 'Libre Bodoni', serif; color: var(--sm-ink); }
#seo p { color: var(--sm-muted); }

/* =========================================================================
   FOOTER
   ========================================================================= */
footer#colophon { background: var(--sm-ink); color: #d8d8dc; padding: 3.5rem 0 2.5rem; }
#footer-name {
  font-family: 'Libre Bodoni', serif; font-weight: 700; color: #fff;
  font-size: 1.7rem; letter-spacing: 0.01em;
}
#footer-disclaimer { color: #b4b4ba; font-style: italic; font-family: 'Libre Bodoni', serif; font-size: 1.05rem; line-height: 1.7; }
#footer-copyright { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--sm-mag); font-weight: 600; }

/* =========================================================================
   ACCESSIBILITÉ & RESPONSIVE
   ========================================================================= */
a:focus-visible { outline: 2px solid var(--sm-mag); outline-offset: 3px; }
@media (max-width: 575.98px) {
  #index-num { font-size: 1.6rem; min-width: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}