/* ============================================================================
   10-BASE.CSS — Socle : remise à zéro, échelle typographique, rythme, layout
   ========================================================================= */

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: 9.5rem;      /* compense l'en-tête collant */
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}

img,svg,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
abbr[title]{ text-decoration: underline dotted; cursor:help; }
code,kbd,samp{ font-family: var(--f-mono); font-size:.92em; }

/* --- Titres ------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  text-transform: var(--tt-display);
}
h1{ font-size: var(--fs-display); line-height: var(--lh-display); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); line-height:1.25; }
strong,b{ font-weight: var(--fw-strong); }
em{ font-style: italic; }

p{ text-wrap: pretty; }
p + p{ margin-top: .85em; }

/* --- Liens -------------------------------------------------------------- */
a{ color: inherit; }
.link-arrow{
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-thickness: .09em;
  text-underline-offset: .22em;
  font-weight: 600;
}
.link-arrow:hover{ text-decoration-thickness:.18em; }

/* --- Focus : toujours visible, jamais supprimé -------------------------- */
:focus-visible{
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible){ outline:none; }

/* --- Accessibilité ------------------------------------------------------ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:.5rem; left:.5rem; z-index: var(--z-toast);
  transform: translateY(-160%);
  background: var(--c-primary); color: var(--c-primary-ink);
  padding:.72rem 1.15rem; border-radius: var(--radius-sm);
  font-weight:700; text-decoration:none;
  box-shadow: var(--shadow-2);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus{ transform:none; }

/* --- Conteneur & bandes ------------------------------------------------- */
.wrap{
  width: min(100% - var(--gutter)*2, var(--wrap));
  margin-inline: auto;
}
.wrap + .wrap{ margin-top: clamp(1.6rem, 3vw, 2.8rem); }
.band{
  padding-block: var(--band-y);
  background: var(--c-bg);
  position: relative;
}
.band--alt{ background: var(--c-bg-2); }
.band--alt::before,
.band::after{ /* filets de séparation facultatifs, définis par le thème */ }

/* --- Rythme typographique ---------------------------------------------- */
.eyebrow{
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-2);
  font-weight: 700;
  display:flex; align-items:center; gap:.6rem;
  margin-bottom: .9rem;
}
.eyebrow::after{
  content:""; flex:1 1 auto; height:1px; background: currentColor; opacity:.28;
  max-width: 14rem;
}
.h-lg{ max-width: 24ch; margin-bottom: clamp(.9rem,2vw,1.4rem); }
.lede{
  font-size: var(--fs-lede);
  color: var(--c-ink-2);
  max-width: 62ch;
  line-height: 1.55;
}
.lede--wide{ max-width: 78ch; }
.lede + .cards-lite,
.lede + .metas,
.lede + .programme-wrap{ margin-top: clamp(2rem, 4vw, 3.4rem); }

/* --- Barre de progression de lecture ----------------------------------- */
.scroll-progress{
  position: fixed; inset: 0 0 auto 0; height: 4px; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--c-ink) 12%, transparent);
  pointer-events: none;
}
.scroll-progress span{
  display:block; height:100%; width:0%;
  background: var(--c-primary);
  transition: width 90ms linear;
}

/* --- En-tête collant ---------------------------------------------------- */
.site-header{
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--c-bg);
  border-bottom: var(--border-w) solid var(--c-line);
  backdrop-filter: var(--head-blur, none);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem;
  padding-block: .7rem;
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color:inherit; flex-shrink:0;
}
.brand-mark{
  width: 2.5rem; height: 2.5rem; flex:0 0 auto;
  display:grid; place-items:center;
  background: var(--c-primary); color: var(--c-primary-ink);
  border-radius: var(--radius-sm);
}
.brand-mark svg{ width:1.5rem; height:1.5rem; }
.brand-txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand-txt strong{
  font-family: var(--f-display); font-size:1.12rem; letter-spacing:.02em; font-weight:800;
}
.brand-txt em{
  font-style:normal; font-size:.68rem; letter-spacing:.04em;
  color: var(--c-ink-2); text-transform:uppercase; font-weight:600;
}
.header-tools{ display:flex; align-items:center; gap:.5rem; }

/* --- Pied de page ------------------------------------------------------- */
.site-footer{
  background: var(--c-bg-2);
  border-top: var(--border-w) solid var(--c-line);
  padding-block: clamp(2.4rem,5vw,4rem) 1.4rem;
  color: var(--c-ink-2);
}
.footer-grid{
  display:grid; gap: clamp(1.4rem,3vw,2.6rem);
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}
.f-brand{
  font-family: var(--f-display); font-size:2rem; font-weight:900;
  color: var(--c-primary); line-height:1;
}
.f-brand span{ color: var(--c-accent); }
.f-lead{ margin-top:.7rem; font-size:var(--fs-small); max-width:34ch; }
.f-col h3{
  font-family: var(--f-mono); font-size: var(--fs-micro); text-transform:uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--c-ink); margin-bottom:.8rem;
}
.f-nav ul{ list-style:none; padding:0; display:grid; gap:.45rem; }
.f-nav a{
  color: var(--c-ink-2); text-decoration:none; font-size:var(--fs-small);
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.f-nav a:hover{ color: var(--c-primary); border-bottom-color: currentColor; }
.f-note{ font-size:var(--fs-small); margin-bottom:.9rem; }
.f-bottom{
  margin-top: clamp(1.8rem,4vw,3rem);
  padding-top:1.1rem;
  border-top:1px solid var(--c-line);
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem;
  justify-content:space-between;
  font-size: var(--fs-micro);
}
.f-keys kbd{
  background: var(--c-surface-2); border:1px solid var(--c-line);
  border-radius:4px; padding:.05em .38em; font-size:.95em;
}

/* --- Divers ------------------------------------------------------------- */
[hidden]{ display:none !important; }
::selection{ background: var(--c-sel-bg); color: var(--c-sel-ink); }
:root[data-theme] :target{ scroll-margin-top: 9.5rem; }

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .f-col:first-child{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .brand-txt em{ display:none; }
  html{ scroll-padding-top: 5.5rem; }
}