/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* LA LIGNE DE CONFIANCE de l'accueil. Le point appartient à l'élément qui le
   suit, posé par un pseudo-élément : collé à son texte, il ne se retrouve
   jamais seul en début de ligne quand la ligne passe à la suivante.
   La règle vit ici et non en classe utilitaire : un sélecteur d'enfant direct
   s'écrit avec « > », que l'attribut class d'une balise ne peut pas porter. */
.points-separes > span::before {
  content: "·";
  margin-right: .5rem;
  color: var(--color-hairline-2);
}

.points-separes > span:first-child::before {
  content: "";
  margin-right: 0;
}

/* LE TEXTE ÉDITORIAL VENU DE LA BASE. Il n'est pas écrit dans une vue : ses
   titres, ses listes et ses tableaux arrivent d'un éditeur, sans classe. Les
   règles vivent donc ici, sur un seul conteneur, dans la typographie du reste
   du site.

   LA MÊME CLASSE HABILLE LA ZONE D'ÉDITION du back-office : un éditeur riche
   qui rend les titres à la taille des paragraphes n'est pas un éditeur riche,
   c'est une zone de texte. Ce que l'éditeur montre est ce que la page rendra. */
.texte-editorial {
  max-width: 70ch;
  color: var(--color-ink-2);
  line-height: 1.7;
}

.texte-editorial > * + * { margin-top: 1.15rem; }

.texte-editorial h2 {
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--color-ink);
}

.texte-editorial h3 {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-ink);
}

.texte-editorial h4 {
  margin-top: 1.5rem;
  font-weight: 600;
  color: var(--color-ink);
}

.texte-editorial ul,
.texte-editorial ol { padding-left: 1.4rem; }
.texte-editorial ul { list-style: disc; }
.texte-editorial ol { list-style: decimal; }
.texte-editorial li + li { margin-top: .4rem; }

.texte-editorial a {
  text-decoration: underline;
  text-decoration-color: var(--color-hairline-2);
  text-underline-offset: 4px;
}

.texte-editorial a:hover { text-decoration-color: var(--color-ink); }

.texte-editorial blockquote {
  border-left: 2px solid var(--color-hairline-2);
  padding-left: 1rem;
  font-style: italic;
}

.texte-editorial hr {
  border: 0;
  border-top: 1px solid var(--color-hairline);
  margin-top: 2rem;
}

/* Un tableau large déborde dans son propre cadre, jamais dans la page. */
.texte-editorial table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .875rem;
}

.texte-editorial th,
.texte-editorial td {
  border-top: 1px solid var(--color-hairline);
  padding: .55rem .9rem .55rem 0;
  text-align: left;
  vertical-align: top;
}

.texte-editorial th {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
}

/* LE TITRE DE L'ACCUEIL, EN TROIS VOLETS. Un volet par ligne, sans liaison :
   « Quel LLM », « pour quelle tâche », « à quel prix ? ». Les coupures ne sont
   plus laissées à la largeur, qui séparait « pour quelle » de « tâche ».

   Le corps est borné : en dessous de 40 px le titre n'est plus un titre, au
   dessus de 62 px la troisième ligne déborde de la colonne du héros. */
.titre-accueil {
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .94;
  font-size: clamp(40px, 6.2vw, 62px);
}

.titre-accueil > * { display: block; }

.titre-accueil-ligne-2 { color: var(--color-encre-brulee); }

.titre-accueil-ligne-3 {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--color-vermillion);
}