@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=DM+Sans:wght@400;500;600;700&display=swap");

/* RESET */
*,*::before,*::after{ box-sizing: border-box; }
html,body,h1,h2,h3,h4,h5,h6,p,blockquote,figure,ul,ol,dl,dd{ margin: 0; }
figure{ margin: 0; }
ul,ol{ padding: 0; list-style: none; }
img,picture,svg,video,iframe{ display: block; max-width: 100%; height: auto; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a{ color: inherit; text-decoration: none; }

[hidden]{ display: none !important; }

html{
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-mobile) + 8px);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
@media (min-width: 769px){
  html{ scroll-padding-top: calc(var(--header-h) + 12px); }
}

body{
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
  max-width: 100vw;
  min-height: 100vh;
  /* TEX-5 papier chaud */
  background-image: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 5%, var(--bg)) 0%, var(--bg) 60%);
  background-attachment: fixed;
}

h1,h2,h3,h4{
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: 1.12;
  color: var(--text);
  letter-spacing: -0.005em;
}
p{
  color: var(--text-2);
  font-size: clamp(0.98rem, 1.4vw, 1.06rem);
  line-height: 1.6;
}

/* MICRO DETAILS */
::selection{ background: var(--accent); color: #fff; }
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent); }

::placeholder{ color: color-mix(in srgb, var(--text) 50%, transparent); }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

img{ font-style: italic; color: var(--text-mute); }

/* container */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 640px){
  .container{ padding-inline: 20px; }
}

/* sections */
section{
  padding-block: 48px;
  position: relative;
}
@media (min-width: 769px){
  section{ padding-block: 88px; }
}

.section--alt{ background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.section--dark{ background: var(--primary); color: #fff; }
.section--dark :where(h1,h2,h3,h4,p,li,span,a,strong,small){ color: #fff; }
.section--dark p{ color: rgba(255,255,255,0.82); }

.eyebrow{
  font-family: var(--ff-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.eyebrow::before{
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
}
.section--dark .eyebrow{ color: var(--accent-on-dark); }
.section--dark .eyebrow::before{ background: var(--accent-on-dark); }

.section-title{
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: 16px;
}
.section-title em{
  font-style: italic;
  color: var(--accent);
}
.section--dark .section-title em{ color: var(--accent-on-dark); }

.section-sub{
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  max-width: 56ch;
  margin-bottom: 36px;
  color: var(--text-2);
}
.section--dark .section-sub{ color: rgba(255,255,255,0.78); }