Site personnel courcellematthi.eu
This commit is contained in:
lrdlg
@@ -0,0 +1,181 @@
|
||||
/* ==========================================================================
|
||||
base.css — Reset moderne et styles des éléments HTML natifs
|
||||
--------------------------------------------------------------------------
|
||||
Uniquement des sélecteurs d'éléments, aucune classe. Objectif : un HTML
|
||||
sémantique écrit sans classe doit déjà être présentable et accessible.
|
||||
========================================================================== */
|
||||
|
||||
@layer base {
|
||||
|
||||
/* ======================================================================
|
||||
RESET
|
||||
Reset ciblé plutôt que « * { margin:0; padding:0 } » aveugle : on
|
||||
neutralise ce qui gêne, on garde ce qui est utile (styles de listes,
|
||||
comportements natifs des formulaires).
|
||||
====================================================================== */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; /* La largeur inclut padding et bordure */
|
||||
}
|
||||
|
||||
/* Suppression des marges par défaut : elles varient d'un navigateur à
|
||||
l'autre et provoquent des fusions de marges imprévisibles. Les
|
||||
espacements sont pilotés explicitement par les composants. */
|
||||
body, h1, h2, h3, h4, h5, h6,
|
||||
p, figure, blockquote, dl, dd {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
/* Empêche iOS d'agrandir le texte en paysage sans demande explicite */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
||||
/* Défilement fluide pour les ancres — neutralisé plus bas si
|
||||
l'utilisateur a demandé la réduction des animations */
|
||||
scroll-behavior: smooth;
|
||||
|
||||
/* Décale la cible des ancres pour qu'elle ne passe pas sous
|
||||
l'en-tête collant. Indispensable dès qu'un header est sticky. */
|
||||
scroll-padding-block-start: calc(var(--header-height) + var(--space-md));
|
||||
}
|
||||
|
||||
body {
|
||||
min-block-size: 100svh; /* svh : hauteur stable malgré la barre d'URL mobile */
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-normal);
|
||||
|
||||
/* Lissage : rend Inter plus fidèle sur écrans macOS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Ligatures et crénage activés pour le texte courant */
|
||||
text-rendering: optimizeLegibility;
|
||||
font-kerning: normal;
|
||||
}
|
||||
|
||||
/* ======================================================================
|
||||
MÉDIAS
|
||||
====================================================================== */
|
||||
|
||||
img, picture, svg, video, canvas {
|
||||
display: block; /* Supprime l'espace fantôme sous les images
|
||||
(dû à l'alignement sur la ligne de base) */
|
||||
max-inline-size: 100%; /* Jamais de débordement horizontal */
|
||||
block-size: auto; /* Préserve le rapport d'aspect */
|
||||
}
|
||||
|
||||
/* ======================================================================
|
||||
TYPOGRAPHIE
|
||||
====================================================================== */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: var(--weight-bold);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: -0.02em; /* Compense l'aération naturelle du monospace
|
||||
aux grandes tailles */
|
||||
text-wrap: balance; /* Répartit les mots sur des lignes de longueur
|
||||
comparable — évite le mot orphelin */
|
||||
}
|
||||
|
||||
p, li, dd, figcaption {
|
||||
text-wrap: pretty; /* Évite les orphelins en fin de paragraphe */
|
||||
}
|
||||
|
||||
/* Les listes porteuses de role="list" sont des listes sémantiques dont on
|
||||
ne veut pas la puce native. Le rôle explicite est nécessaire : Safari
|
||||
retire la sémantique de liste quand list-style vaut none. */
|
||||
ul[role="list"],
|
||||
ol[role="list"] {
|
||||
list-style: none;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
/* Texte mis en avant */
|
||||
strong, b { font-weight: var(--weight-semibold); }
|
||||
|
||||
/* Abréviations : curseur d'aide + soulignement pointillé */
|
||||
abbr[title] {
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* ======================================================================
|
||||
LIENS
|
||||
====================================================================== */
|
||||
|
||||
a {
|
||||
color: var(--color-accent-dark);
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0.2em; /* Le soulignement ne coupe pas les jambages */
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
a:hover { color: var(--color-accent); }
|
||||
|
||||
/* ======================================================================
|
||||
ACCESSIBILITÉ
|
||||
====================================================================== */
|
||||
|
||||
/* :focus-visible plutôt que :focus — l'anneau apparaît à la navigation
|
||||
clavier mais pas au clic souris. Ne jamais faire « outline: none »
|
||||
sans remplacement visible : c'est la faute d'accessibilité la plus
|
||||
répandue sur le web. */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-focus);
|
||||
outline-offset: 3px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* Marge lors du saut vers une ancre (complément de scroll-padding) */
|
||||
:target {
|
||||
scroll-margin-block-start: calc(var(--header-height) + var(--space-md));
|
||||
}
|
||||
|
||||
/* ======================================================================
|
||||
FORMULAIRES ET BOUTONS
|
||||
====================================================================== */
|
||||
|
||||
button, input, select, textarea {
|
||||
font: inherit; /* Les navigateurs n'héritent pas la police par défaut */
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ======================================================================
|
||||
PRÉFÉRENCES SYSTÈME
|
||||
Respecter les réglages d'accessibilité de l'utilisateur n'est pas
|
||||
optionnel : les animations peuvent déclencher nausées et migraines
|
||||
chez les personnes sensibles aux troubles vestibulaires.
|
||||
====================================================================== */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mode contraste élevé (Windows, préférence système) */
|
||||
@media (prefers-contrast: more) {
|
||||
:root {
|
||||
--color-ink-faint: #4c5a56;
|
||||
--color-line: #9aa5a2;
|
||||
--color-line-strong: #6b7674;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user