/*
 * Typographie. Merriweather pour les titres, Poppins pour tout le reste : le
 * texte courant comme la signalétique en capitales (index de section,
 * étiquettes, coordonnées).
 *
 * Merriweather est une serif large, aux ascendantes hautes : les titres gardent
 * un interligne d'au moins 1,05 et un resserrement léger. En dessous, les
 * lignes se chevauchent et le masque des lignes animées coupe les jambages.
 */

.titre,
h1,
h2,
h3 {
    font-family: var(--police-titre);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h4,
h5,
h6 {
    font-family: var(--police-titre);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.t-geant {
    font-size: var(--t-geant);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.t-3xl {
    font-size: var(--t-3xl);
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.t-2xl {
    font-size: var(--t-2xl);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.t-xl {
    font-size: var(--t-xl);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.t-lg {
    font-size: var(--t-lg);
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.t-md {
    font-size: var(--t-md);
    line-height: 1.45;
    letter-spacing: -0.01em;
}

.t-sm {
    font-size: var(--t-sm);
}

.t-xs {
    font-size: var(--t-xs);
}

/* Chapô : le paragraphe d'entrée, plus grand et plus clair que le corps. */
.chapo {
    font-size: var(--t-md);
    line-height: 1.5;
    color: var(--texte-doux);
    max-width: 38ch;
    text-wrap: pretty;
}

.texte-doux {
    color: var(--texte-doux);
}

/* Signalétique mono : index de section, étiquettes, méta. */
.mono {
    font-family: var(--police-mono);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-feature-settings: "tnum" 1;
}

/*
 * Sur-titre : le petit libellé au-dessus d'un H2, précédé d'un point de
 * connexion qui rappelle le motif du logo.
 */
.surtitre {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    font-family: var(--police-mono);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texte-doux);
}

.surtitre::before {
    content: "";
    inline-size: 0.5em;
    block-size: 0.5em;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0.25em rgb(113 34 246 / 0.18);
    flex: none;
}

/* Mot mis en avant dans un titre : rempli par le dégradé signature. */
.eclat {
    background: var(--flux);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Italique fine : sert de contrepoint dans les gros titres. */
.nuance {
    font-family: var(--police-texte);
    font-weight: 300;
    font-style: italic;
    letter-spacing: -0.02em;
}

/* Corps de texte long (articles, pages de contenu rédigées en base). */
.prose {
    max-width: var(--largeur-texte);
    font-size: var(--t-base);
    line-height: 1.72;
    color: var(--texte-doux);
    text-wrap: pretty;
}

.prose > * + * {
    margin-block-start: var(--pile);
}

.prose h2 {
    margin-block-start: 2.5em;
    font-size: var(--t-lg);
    color: var(--texte);
}

.prose h3 {
    margin-block-start: 2em;
    font-size: var(--t-md);
    color: var(--texte);
}

.prose strong {
    color: var(--texte);
    font-weight: 600;
}

.prose a {
    color: var(--texte);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    transition: text-decoration-color var(--duree-courte) var(--ease-sortie);
}

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

.prose ul,
.prose ol {
    padding-inline-start: 1.25em;
}

.prose li + li {
    margin-block-start: 0.5em;
}

.prose li::marker {
    color: var(--accent);
}

.prose blockquote {
    padding-inline-start: 1.25em;
    border-inline-start: 2px solid var(--accent);
    font-size: var(--t-md);
    color: var(--texte);
}

/* Une illustration dans le texte (capture d'un logiciel…) : toute la largeur de la colonne, légende dessous. */
.prose figure {
    margin-inline: 0;
}

.prose figure img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: 0.75rem;
    box-shadow: 0 1.5rem 3rem -1.75rem rgb(15 8 65 / 0.45);
}

.prose figcaption {
    margin-block-start: 0.6rem;
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texte-tres-doux);
}

/* Passages colorés ou agrandis par la rédaction dans un texte riche
   (éditeur riche, gardés par App\Contenu\NettoyeurContenu). Les zones entières,
   elles, reçoivent leur style en ligne (App\Contenu\StylesTextes). */
.st-c-encre { color: var(--encre); }
.st-c-doux { color: var(--texte-doux); }
.st-c-violet { color: var(--violet); }
.st-c-violet-clair { color: var(--violet-clair); }
.st-c-electrique { color: var(--electrique); }
.st-c-cyan { color: var(--cyan); }
.st-c-blanc { color: #fff; }
[class*="st-c-"] { -webkit-text-fill-color: currentcolor; }
.st-t-s { font-size: 0.85em; }
.st-t-l { font-size: 1.25em; }
.st-t-xl { font-size: 1.6em; }
.st-t-xxl { font-size: 2em; }