/* ============================================================
   base.css — Polices, reset léger et classes typographiques
   Reprend exactement les styles de texte du Figma.
   À charger APRÈS tokens.css.
   ============================================================ */

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

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--font-primary);
  background: var(--surface-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Conteneur ---------- */
.container {
  width: 100%;
  max-width: var(--width-desktop);
  margin-inline: auto;
  padding-inline: var(--space-48);
}

/* ============================================================
   STYLES DE TEXTE (taille px / interligne px)
   ============================================================ */

/* --- Titres : Syne --- */
.display {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 96px;
  line-height: 100px;
  letter-spacing: -0.02em;
}
.h1 { font-family: var(--font-title); font-weight: 700; font-size: 40px; line-height: 1.1; }
.h2 { font-family: var(--font-title); font-weight: 700; font-size: 30px; line-height: 1.15; }
.h3 { font-family: var(--font-title); font-weight: 600; font-size: 22px; line-height: 1.2; }
.h4 { font-family: var(--font-title); font-weight: 500; font-size: 17px; line-height: 1.3; } /* "titre de bloc" */
.overline {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Intro --- */
.lead          { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 29.7px; }
.intro-accent  { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 29.7px; }

/* --- Body : DM Sans --- */
.body          { font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 25.5px; }
.body-accent   { font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 25.5px; }
.body-italic   { font-family: var(--font-body); font-weight: 400; font-style: italic; font-size: 15px; line-height: 25.5px; }
.small         { font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 20.8px; }
.label-ui {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 59.8px;   /* grand interligne : labels verticaux de la sidebar, tags */
  letter-spacing: 0.02em;
}

/* ============================================================
   COMPOSANTS DE BASE
   ============================================================ */

/* --- Boutons --- */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 15px;
  padding: var(--space-16) var(--space-24);
  --btn-chamfer: 9px;
  /* coin biseauté : haut-gauche + bas-droite coupés (cf. maquette Figma) */
  clip-path: polygon(
    var(--btn-chamfer) 0, 100% 0,
    100% calc(100% - var(--btn-chamfer)), calc(100% - var(--btn-chamfer)) 100%,
    0 100%, 0 var(--btn-chamfer)
  );
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary { background: var(--font-primary); color: var(--font-white); }   /* noir plein */
.btn--on-blue { background: var(--font-white); color: var(--font-primary); }    /* blanc sur fond bleu */
.btn--on-blue:hover { background: var(--blue-200); color: var(--font-primary); }   /* survol : lavande */
.btn--on-blue:active { background: var(--blue-200bis); color: var(--font-primary); } /* clic : bleu */
.btn--select  { background: var(--blue-300); color: var(--font-white); }        /* état sélectionné */

/* --- Tag catégorie (pill outline) --- */
.tag {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--stroke-primary);
  border-radius: var(--radius-full);
  display: inline-block;
  white-space: nowrap;
}

/* --- Champ de formulaire (label + underline) --- */
.field { display: flex; flex-direction: column; gap: var(--space-8); }
.field__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--font-primary);
}
.field__label .req { color: var(--font-red); } /* astérisque */
.field__input {
  border: none;
  border-bottom: 1px solid var(--stroke-primary);
  background: transparent;
  padding: var(--space-8) 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--font-primary);
}
.field__input::placeholder { color: var(--font-muted); }
.field__input:focus { outline: none; border-bottom-color: var(--stroke-blue); }