imbriqué dans un ne doit pas recevoir un second fond par-dessus le
premier — sinon la balise se voit, bordée d'un carré plus sombre au milieu du bloc. */
pre code { background: none; padding: 0; border-radius: 0; }
hr {
margin: 1.5rem 0;
border: none;
border-top: 1px solid var(--filet);
}
/* === Notice RGPD sous les formulaires === */
.privacy-notice {
max-width: var(--measure); margin: 1.25rem 0 0;
font-size: 0.82rem; line-height: 1.6; color: var(--color-text-soft);
}
.band--flat .privacy-notice, .band--dark .privacy-notice { color: #C9CEE0; }
.band--flat .privacy-notice a, .band--dark .privacy-notice a { color: var(--sauge); }
/* === Profils sociaux du pied de page === */
.social-links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 0.75rem 0; }
/* === Publications === */
.publications { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; width: 100%; }
.publication { flex: 1 1 14rem; max-width: 19rem; background: var(--panel, #fff); border: 1px solid var(--filet); border-radius: 12px; padding: 1.1rem 1.25rem; text-align: left; display: flex; flex-direction: column; gap: 0.5rem; }
.publication h3 { margin: 0; font-size: 1rem; }
.publication h3 a {
color: var(--color-primary);
text-decoration: underline;
text-decoration-color: var(--sauge);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.publication h3 a:hover, .publication h3 a:focus-visible { text-decoration-color: var(--sable); }
.publication p { margin: 0; font-size: 0.9rem; color: var(--color-text-soft); }
.publication__meta { font-family: var(--font-num); font-size: 0.72rem; letter-spacing: 0.02em; }
.publication__kind { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); }
/* Frontière discrète entre deux sections claires consécutives, à la manière des filets du CV */
.band:not(.band--dark):not(.band--flat) + .band:not(.band--dark):not(.band--flat) { border-top: 1px solid var(--filet); }
/* === Lien de prolongement en fin de section === */
.section-link { margin: 0.5rem 0 0; }
.section-link a {
font-family: var(--font-heading); font-weight: 700;
font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
text-decoration: none; color: var(--color-primary);
border-bottom: 2px solid var(--sauge); padding-bottom: 3px;
}
.section-link a:hover, .section-link a:focus-visible { border-bottom-color: var(--sable); }
.band--dark .section-link a, .band--flat .section-link a { color: var(--rose); }
/* === Formulaire de contact ===
La section centre ses enfants : sans largeur explicite, le formulaire se réduit
à la largeur de son contenu et les champs à 100 % n'occupent presque rien. */
#contact form { width: min(38rem, 100%); text-align: left; }
/* L'en-tête est collant (91 px mesurés) : sans cette marge de défilement, la cible de
l'ancre atterrit DESSOUS et l'on croit que la page a sauté en haut. */
#formulaire { scroll-margin-top: 7rem; }
/* === Signature, positionnement et domaines === */
.signature {
font-family: var(--font-heading); font-weight: 700;
letter-spacing: 0.02em; color: var(--color-primary);
margin: 0;
/* La signature est une phrase personnelle, pas un titre de section : la règle générale
« h1, h2, h3 { text-transform: uppercase } » (spécificité de type, 0-0-1) ne doit pas
s'y appliquer. Une classe (0-1-0) suffit à l'emporter sur un sélecteur de type, mais
seulement si elle redéfinit la propriété — d'où ce texte-transform explicite. */
text-transform: none;
}
.signature--titre { font-size: clamp(1.35rem, 4vw, 2rem); line-height: 1.25; }
/* « #about h1 » (spécificité 1-0-1, avec l'ID) l'emporterait sur « .signature--titre » seule
(0-1-0) et imposerait sa propre taille : il faut au moins autant de poids pour rétablir celle
voulue ici. « #about h1.signature--titre » (1-1-1) bat 1-0-1 sans dépendre de l'ordre des
règles dans la feuille. */
#about h1.signature--titre { font-size: clamp(1.35rem, 4vw, 2rem); }
/* La signature repose désormais sur la carte blanche portée par .opening__mark, plus
sur les deux fonds nuit-10 / sauge-10 qu'elle chevauchait : elle n'a donc plus besoin
d'un fond opaque à elle pour garantir son contraste, la carte y pourvoit déjà. */
.opening .signature {
font-size: 0.95rem; text-align: center; margin-top: 0.75rem;
color: var(--nuit);
}
.positionnement {
max-width: var(--measure); margin: 0;
font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: 1.55; color: var(--color-text);
}
.domaines {
max-width: var(--measure); margin: 0;
font-family: var(--font-num); font-size: 0.78rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--color-text-soft);
}
/* === Responsive === */
@media (max-width: 720px) {
.nav-toggle { display: block; }
/* En vertical, le dessin tient dans la largeur : plus de largeur plancher.
Tant que le contrôleur n'a pas basculé les coordonnées, le dessin est encore
à l'horizontale et garde son plancher : sans JavaScript, l'arbre reste lisible
en défilant plutôt qu'écrasé. Le plafond, lui, évite l'excès inverse : sans
lui, le viewBox de 288 unités s'étirerait sur toute la largeur disponible et
l'arbre deviendrait géant entre ~500 et 720 px (texte à 36 px à 720 px). */
.tree-frame.is-vertical svg { min-width: 0; max-width: 26rem; margin-inline: auto; }
.site-nav ul { display: none; position: absolute; right: 1rem; top: 4rem; background: var(--color-bg); box-shadow: var(--shadow); flex-direction: column; padding: 1rem; border-radius: var(--radius); z-index: 10; }
.site-nav ul.is-open { display: flex; }
}