/* ==========================================================================
jobuilds.dev — tokens de design
--------------------------------------------------------------------------
Fichier unique, écrit à la main, sans build ni dépendance.
Ordre de chargement recommandé : tokens.css -> layout.css -> components.css
Les polices ne sont PAS importées ici (@import bloque le rendu).
À placer dans , avant cette feuille :
(sur une seule ligne, sans espaces)
Points de rupture (à recopier tels quels, les variables CSS ne sont pas
utilisables dans les media queries) :
sm : 30rem / 480px — passage 1 colonne -> confort
md : 48rem / 768px — grille projets 2 colonnes
lg : 60rem / 960px — grille 12 colonnes, nav horizontale
xl : 75rem / 1200px — largeur de conteneur atteinte
========================================================================== */
:root {
color-scheme: light;
/* --- Couleurs : surfaces ------------------------------------------------ */
--bg: #FBFAF8; /* papier chaud, fond de page */
--bg-subtle: #F3F1ED; /* bandes de section alternées */
--surface: #FFFFFF; /* cartes, panneau de formulaire */
--surface-2: #F3F1ED; /* blocs internes, en-têtes de tableau */
--surface-inset: #EAE7E1; /* creux : barres de maquette, champ désactivé */
/* --- Couleurs : texte --------------------------------------------------- */
--text: #15171B; /* 17.20:1 sur --bg — AAA */
--text-2: #494D55; /* 8.13:1 sur --bg — AAA */
--text-3: #64686F; /* 5.37:1 sur --bg — AA */
--text-on-solid: #FBFAF8; /* sur --solid : 17.20:1 — AAA */
/* --- Couleurs : traits --------------------------------------------------- */
--border: #E3E0DA; /* séparateurs décoratifs (hors WCAG 1.4.11) */
--border-strong: #C8C4BC; /* cadre de carte, filets de tableau */
--border-field: #8B877F; /* contour de champ — 3.43:1 sur --bg, AA non-texte */
/* --- Couleurs : action neutre (boutons primaires) ------------------------ */
--solid: #15171B;
--solid-hover: #2B2F36;
--solid-text: #FBFAF8; /* 17.20:1 — AAA */
/* --- Couleurs : accent « en production » --------------------------------- */
--accent: #136F3D; /* 5.98:1 sur --bg, 6.23:1 sur --surface — AA */
--accent-hover: #0F5A31;
--accent-soft: #E4F1E8; /* pastille de statut ; --accent dessus : 5.36:1 */
--accent-border: #A9D3BB;
--accent-on-solid: #FFFFFF; /* sur --accent plein : 6.23:1 — AA */
/* --- Couleurs : erreur --------------------------------------------------- */
--danger: #B3261E; /* 6.27:1 sur --bg, 6.54:1 sur --surface — AA */
--danger-soft: #FBE9E7; /* --danger dessus : 5.58:1 — AA */
--danger-border: #E7A9A3;
/* --- Couleurs : maquettes d'interface anonymisées ------------------------ */
--mock-bar: #D8D4CC; /* barre « texte » pleine */
--mock-bar-soft: #E6E3DC; /* barre « texte » secondaire */
--mock-fill: #C9C4BA; /* bloc plein (créneau affecté) */
--mock-fill-2: #EAE7E1; /* bloc léger (disponible) */
--mock-line: #BFB9AE; /* filets de grille de maquette */
/* --- Focus --------------------------------------------------------------- */
--focus: #136F3D; /* 5.98:1 sur --bg — largement > 3:1 requis */
/* --- Typographie : familles ---------------------------------------------- */
--font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
"Liberation Sans", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono",
"Courier New", monospace;
/* --- Typographie : échelle (base 16px, ratio ~1.25) ---------------------- */
--fs-2xs: 0.6875rem; /* 11px — étiquettes mono, exposants de section */
--fs-xs: 0.75rem; /* 12px — méta, tags de stack */
--fs-sm: 0.875rem; /* 14px — légendes, aide de champ, pied de page */
--fs-base: 1rem; /* 16px — corps */
--fs-md: 1.0625rem; /* 17px — corps de paragraphe long */
--fs-lg: 1.1875rem; /* 19px — chapô, intro de section */
--fs-xl: 1.375rem; /* 22px — h3, titre de carte projet */
--fs-2xl: 1.75rem; /* 28px — h2 mobile */
--fs-3xl: 2.25rem; /* 36px — h1 mobile */
--fs-4xl: 3rem; /* 48px — h1 desktop */
--fs-h1: clamp(2.25rem, 1.55rem + 3.1vw, 3rem);
--fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 1.75rem);
--fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem);
/* --- Typographie : graisses ---------------------------------------------- */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
/* --- Typographie : interlignage ------------------------------------------ */
--lh-display: 1.08; /* h1 */
--lh-heading: 1.2; /* h2, h3 */
--lh-snug: 1.35; /* chapô, titres de carte */
--lh-body: 1.55; /* corps */
--lh-prose: 1.65; /* blocs de texte longs, colonne étroite */
--lh-label: 1.3; /* étiquettes mono, tags */
/* --- Typographie : interlettrage ----------------------------------------- */
--ls-display: -0.022em;
--ls-heading: -0.014em;
--ls-snug: -0.008em;
--ls-body: 0;
--ls-label: 0.08em; /* mono en capitales */
--ls-mono: 0.01em; /* mono en casse normale */
/* --- Espacement (base 4px) ----------------------------------------------- */
--sp-1: 0.25rem; /* 4px */
--sp-2: 0.5rem; /* 8px */
--sp-3: 0.75rem; /* 12px */
--sp-4: 1rem; /* 16px */
--sp-5: 1.25rem; /* 20px */
--sp-6: 1.5rem; /* 24px */
--sp-8: 2rem; /* 32px */
--sp-10: 2.5rem; /* 40px */
--sp-12: 3rem; /* 48px */
--sp-16: 4rem; /* 64px */
--sp-20: 5rem; /* 80px */
--sp-24: 6rem; /* 96px */
--sp-32: 8rem; /* 128px */
--section-y: var(--sp-16); /* rythme vertical mobile */
--section-y-lg: var(--sp-24); /* rythme vertical desktop */
/* --- Rayons --------------------------------------------------------------- */
--r-xs: 2px; /* barres de maquette */
--r-sm: 4px; /* tags, pastilles */
--r-md: 6px; /* boutons, champs, cartes */
--r-lg: 10px; /* cadre de capture d'écran */
--r-full: 999px; /* points de statut uniquement */
/* --- Épaisseurs de trait -------------------------------------------------- */
--bw: 1px;
--bw-2: 2px; /* anneau de focus, champ en erreur */
--bw-marker: 3px; /* filet vertical de citation / callout */
/* --- Ombres (rares : le relief passe par le trait, pas par l'ombre) ------- */
--shadow-0: none;
--shadow-1: 0 1px 2px rgb(21 23 27 / 0.06); /* carte survolée */
--shadow-2: 0 4px 12px -2px rgb(21 23 27 / 0.10),
0 1px 3px rgb(21 23 27 / 0.06); /* menu, popover */
/* --- Mouvement ------------------------------------------------------------ */
--dur-1: 90ms; /* pression (:active) */
--dur-2: 150ms; /* survol, focus, changement de couleur */
--dur-3: 220ms; /* ouverture d'un panneau, message de formulaire */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* --- Mise en page --------------------------------------------------------- */
--container: 69rem; /* 1104px — grille principale */
--container-wide: 75rem; /* 1200px — bandeaux pleine largeur */
--measure: 38rem; /* 608px — colonne de lecture (~72 signes) */
--gutter: var(--sp-5); /* marge latérale mobile */
--gutter-lg: var(--sp-8); /* marge latérale desktop */
--grid-gap: var(--sp-6);
--header-h: 3.5rem; /* 56px */
/* --- Empilement ----------------------------------------------------------- */
--z-base: 0;
--z-header: 100;
--z-skip: 200;
}
/* ==========================================================================
Thème sombre — 1) suit le système, sauf si le visiteur a forcé le clair
========================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--bg: #0F1114;
--bg-subtle: #15181C;
--surface: #15181C;
--surface-2: #1C2026;
--surface-inset: #242930;
--text: #ECEAE5; /* 15.73:1 sur --bg — AAA */
--text-2: #B2B0AA; /* 8.72:1 sur --bg — AAA */
--text-3: #8B8983; /* 5.41:1 sur --bg — AA */
--text-on-solid: #0F1114; /* 15.73:1 — AAA */
--border: #282D34;
--border-strong: #3A4048;
--border-field: #676E78; /* 3.67:1 sur --bg, 3.46:1 sur --surface */
--solid: #ECEAE5;
--solid-hover: #FFFFFF;
--solid-text: #0F1114; /* 15.73:1 — AAA */
--accent: #5DD48B; /* 10.13:1 sur --bg, 9.54:1 sur --surface — AAA */
--accent-hover: #7EE0A4;
--accent-soft: #14261C; /* --accent dessus : 8.50:1 — AAA */
--accent-border: #2C5540;
--accent-on-solid: #0F1114; /* sur --accent plein : 10.13:1 — AAA */
--danger: #FF9A90; /* 9.25:1 sur --bg — AAA */
--danger-soft: #2A1614; /* --danger dessus : 8.40:1 — AAA */
--danger-border: #6B342E;
--mock-bar: #333941;
--mock-bar-soft: #272C33;
--mock-fill: #3A414A;
--mock-fill-2: #1F242A;
--mock-line: #2E343B;
--focus: #5DD48B; /* 10.13:1 sur --bg */
--shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
--shadow-2: 0 4px 14px -2px rgb(0 0 0 / 0.6),
0 1px 3px rgb(0 0 0 / 0.4);
}
}
/* ==========================================================================
Thème sombre — 2) forcé par le sélecteur manuel (data-theme sur )
Bloc volontairement dupliqué : c'est le seul moyen, en CSS natif, de
couvrir à la fois « suit le système » et « choix explicite ».
========================================================================== */
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #0F1114;
--bg-subtle: #15181C;
--surface: #15181C;
--surface-2: #1C2026;
--surface-inset: #242930;
--text: #ECEAE5;
--text-2: #B2B0AA;
--text-3: #8B8983;
--text-on-solid: #0F1114;
--border: #282D34;
--border-strong: #3A4048;
--border-field: #676E78;
--solid: #ECEAE5;
--solid-hover: #FFFFFF;
--solid-text: #0F1114;
--accent: #5DD48B;
--accent-hover: #7EE0A4;
--accent-soft: #14261C;
--accent-border: #2C5540;
--accent-on-solid: #0F1114;
--danger: #FF9A90;
--danger-soft: #2A1614;
--danger-border: #6B342E;
--mock-bar: #333941;
--mock-bar-soft: #272C33;
--mock-fill: #3A414A;
--mock-fill-2: #1F242A;
--mock-line: #2E343B;
--focus: #5DD48B;
--shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
--shadow-2: 0 4px 14px -2px rgb(0 0 0 / 0.6),
0 1px 3px rgb(0 0 0 / 0.4);
}
/* ==========================================================================
Reset court
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* l'en-tête est collant : garde la cible d'ancre et le focus dégagés
(WCAG 2.4.11 — Focus Not Obscured) */
scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol { margin: 0; }
ul[role="list"],
ol[role="list"] { list-style: none; padding: 0; }
img, svg, video, canvas, picture {
display: block;
max-width: 100%;
height: auto;
}
input, button, textarea, select {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button { background: none; border: 0; }
table {
border-collapse: collapse;
width: 100%;
}
/* ==========================================================================
Styles de base
========================================================================== */
body {
margin: 0;
background-color: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--fs-base);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
font-feature-settings: "kern" 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
}
h1, h2, h3, h4 {
font-family: var(--font-sans);
font-weight: var(--fw-semibold);
color: var(--text);
text-wrap: balance; /* évite les titres orphelins ; ignoré si non supporté */
}
h1 {
font-size: var(--fs-h1);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
}
h2 {
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
}
h3 {
font-size: var(--fs-h3);
line-height: var(--lh-snug);
letter-spacing: var(--ls-snug);
}
h4 {
font-size: var(--fs-base);
line-height: var(--lh-snug);
letter-spacing: var(--ls-body);
font-weight: var(--fw-medium);
}
p { text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }
strong, b { font-weight: var(--fw-semibold); }
small { font-size: var(--fs-sm); }
code, kbd, samp, pre {
font-family: var(--font-mono);
font-size: 0.9375em;
letter-spacing: var(--ls-mono);
}
/* Liens : soulignés par défaut, sans couleur d'appât.
Le soulignement est le signal ; l'accent sert au survol. */
a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
text-decoration-color: var(--border-field);
transition: color var(--dur-2) var(--ease-out),
text-decoration-color var(--dur-2) var(--ease-out);
}
a:hover {
color: var(--accent);
text-decoration-color: currentColor;
}
a:active { color: var(--accent-hover); }
/* Focus : visible partout, jamais supprimé. */
:focus-visible {
outline: var(--bw-2) solid var(--focus);
outline-offset: 2px;
border-radius: var(--r-sm);
}
/* Retire l'anneau au clic souris sur les navigateurs qui gèrent :focus-visible,
sans jamais le retirer au clavier. */
:focus:not(:focus-visible) { outline: none; }
::selection {
background-color: var(--accent-soft);
color: var(--text);
}
hr {
border: 0;
border-top: var(--bw) solid var(--border);
margin: var(--sp-10) 0;
}
/* Lien d'évitement — visible uniquement au clavier */
.skip-link {
position: absolute;
top: var(--sp-2);
left: var(--sp-2);
z-index: var(--z-skip);
padding: var(--sp-2) var(--sp-4);
background-color: var(--surface);
border: var(--bw) solid var(--border-strong);
border-radius: var(--r-md);
text-decoration: none;
font-weight: var(--fw-medium);
transform: translateY(-200%);
}
.skip-link:focus-visible { transform: translateY(0); }
/* Contenu réservé aux technologies d'assistance */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Mouvement réduit — on garde les états, on supprime la durée
========================================================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-1: 1ms;
--dur-2: 1ms;
--dur-3: 1ms;
}
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}