@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');


:root {
  --redlina-red: #E82615;  /* #FF3B1E */
  --redlina-black: #171717;
  --redlina-background-1: #F2EFEB;
  --redlina-background-2: #E6E3E0;
  --redlina-background-3: #D9D6D2;
  --redlina-background-4: #F7F5F2;
  --redlina-grayline-1: #D9D9D9;
  --redlina-grayline-2: #C9C9C9;
  --redlina-graytext-1: #948F8B;
  --redlina-graytext-2: #7A7672;
  --redlina-background-1-accent: #E6E3E0;
  --radius: 14px;
}

body {
  margin: 0px;
  padding: 0px;
  background-color: #F2EFEB;
  font-family: Lato, Inter, Arial, sans-serif;
  
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1 0 auto;
}

/* ── Comportement du scroll ──────────────────────────────── */

html {
  scroll-behavior: smooth;
  height: 100%;
}

[id] {
  scroll-margin-top: 100px;
}


/* ── Progress Bar Articles ──────────────────────────────── */

#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--redlina-red);
  z-index: 9999;
  transition: width 0.1s linear;
}