/* theme.css — composants HTML à la charte Gladys Company.
   Importer APRÈS tokens.css (qui définit les variables :root générées).
   N'utiliser que des variables — jamais de couleur/taille en dur. */

body {
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-body);
  margin: 0;
}

h1 { font-size: var(--size-h1); line-height: 1.13; letter-spacing: -0.6px; font-weight: 700; }
h2 { font-size: var(--size-h2); line-height: 1.12; letter-spacing: -0.4px; font-weight: 700; }
h3 { font-size: var(--size-h3); line-height: 1.2; font-weight: 700; }
p  { font-size: var(--size-paragraphe); line-height: 1.5; }

/* Bouton */
.btn {
  display: inline-block;
  background: var(--vert);
  color: var(--noir);
  font-weight: 500;
  padding: 19px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  text-decoration: none;
}
.btn:hover { background: var(--jaune); }

/* Carte */
.card {
  background: var(--blanc);
  border-radius: var(--radius-card);
  padding: 2rem;
}

/* Titre surligné (effet marqueur) */
/* Marqueur : bande verte calée sur la hauteur des glyphes (via un
   linear-gradient dimensionné), et non sur la boîte de ligne entière — sinon,
   sur un titre multi-ligne à interligne serré, le fond fusionne entre lignes et
   déborde sur les lignes voisines. box-decoration-break: clone → chaque
   fragment de ligne a sa propre bande aux bords nets. */
.highlight {
  color: var(--noir);
  background: linear-gradient(var(--vert), var(--vert)) no-repeat 0 0.12em / 100% 0.86em;
  padding: 0 .15em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Liste à puces vertes */
.bullet { list-style: none; padding-left: 0; }
.bullet li { margin: .4em 0; }
.bullet li::before { content: "●"; color: var(--vert); margin-right: .6em; }

/* Sélection de texte */
::selection { background: var(--vert); color: var(--noir); }