/**
* Template sobre — style global extrait du projet et adapté pour pages HTML simples.
* À inclure dans vos fichiers HTML :
*
* Polices : Work Sans (texte) et Maple (titres). Placez les fichiers de polices
* dans un dossier fonts/ à côté de ce fichier CSS (ou adaptez les chemins ci‑dessous).
* Fichiers attendus : WorkSans-VariableFont_wght.ttf, WorkSans-Italic-VariableFont_wght.ttf,
* Maple-Regular.otf, Maple-Medium.otf, Maple-Bold.otf (et italiques si besoin).
*/
/* ——— Polices : Work Sans (texte) & Maple (titres) ——— */
@font-face {
font-family: 'Maple Regular';
src: url('fonts/Maple-Regular.otf') format('opentype');
font-display: swap;
}
@font-face {
font-family: 'Maple Regular';
src: url('fonts/Maple-RegularItalic.otf') format('opentype');
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Maple Medium';
src: url('fonts/Maple-Medium.otf') format('opentype');
font-display: swap;
}
@font-face {
font-family: 'Maple Medium';
src: url('fonts/Maple-MediumItalic.otf') format('opentype');
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Maple Bold';
src: url('fonts/Maple-Bold.otf') format('opentype');
font-display: swap;
}
@font-face {
font-family: 'Maple Bold';
src: url('fonts/Maple-BoldItalic.otf') format('opentype');
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Work Sans';
src: url('fonts/WorkSans-VariableFont_wght.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Work Sans';
src: url('fonts/WorkSans-Italic-VariableFont_wght.ttf') format('truetype');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* ——— Reset minimal ——— */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* ——— Variables (design tokens) ——— */
:root {
/* Typo : Work Sans (texte), Maple Bold (titres) */
--font-text: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-title: 'Maple Bold', 'Maple Medium', 'Maple Regular', sans-serif;
/* Couleurs principales */
--primary: #2f4a9c;
--primary-light: #4a6bb3;
--primary-dark: #123772;
--secondary: #03bdac;
--secondary-light: #33cbb8;
--secondary-dark: #00bdad;
/* Texte & fonds */
--text: #213547;
--text-secondary: #5f606f;
--text-muted: #8f8f9f;
--bg: #fff;
--bg-card: #ffffff;
--border: rgba(47, 74, 156, 0.2);
--border-light: rgba(0, 0, 0, 0.08);
/* Surfaces */
--radius: 8px;
--radius-lg: 16px;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
/* Liens */
--link: #2f4a9c;
--link-hover: #123772;
}
/* Mode sombre (classe .dark sur ) */
:root.dark {
--text: #e9ecef;
--text-secondary: #b0b8c4;
--text-muted: #8f8f9f;
--bg: #1a1a1a;
--bg-card: #2c2c2c;
--border: rgba(255, 255, 255, 0.12);
--border-light: rgba(255, 255, 255, 0.08);
--shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
--link: #6ba3e8;
--link-hover: #8fbcff;
}
/* ——— Base ——— */
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
font-family: var(--font-text);
font-weight: 400;
line-height: 1.5;
color: var(--text);
background-color: var(--bg);
min-height: 100vh;
}
/* ——— Typographie ——— */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-title);
font-weight: 600;
line-height: 1.25;
margin-top: 0;
margin-bottom: 0.5em;
color: var(--text);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4, h5, h6 { font-size: 1.125rem; }
p {
margin-top: 0;
margin-bottom: 1rem;
}
/* ——— Liens ——— */
a {
color: var(--link);
text-decoration: none;
font-weight: 500;
}
a:hover {
color: var(--link-hover);
text-decoration: underline;
}
/* ——— Boutons (natif) ——— */
button {
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
padding: 0.5rem 1rem;
border-radius: var(--radius);
border: 1px solid var(--border);
background-color: var(--bg-card);
color: var(--text);
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
button:hover {
border-color: var(--primary);
background-color: rgba(47, 74, 156, 0.06);
color: var(--primary);
}
button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--primary);
}
button.primary {
background-color: var(--primary);
border-color: var(--primary);
color: #fff;
}
button.primary:hover {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
color: #fff;
}
/* ——— Champs formulaire (natif) ——— */
input, textarea, select {
font-family: inherit;
font-size: 1rem;
line-height: 1.5;
color: var(--text);
background-color: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius);
padding: 0.5rem 0.75rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(47, 74, 156, 0.2);
}
input::placeholder, textarea::placeholder {
color: var(--text-muted);
}
/* ——— Cartes / blocs ——— */
.card, .section {
background-color: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
padding: 1.5rem;
}
/* ——— Conteneur page ——— */
.container {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* ——— Scrollbars (WebKit) ——— */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.04);
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.12);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.2);
}
/* ——— Utilitaires légers ——— */
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.mt-0 { margin-top: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
/* ============================================================
Variante charte pour pages plancher technique (consultation + suivi)
À charger après common.css :
Polices dans le dossier fonts/ (Work Sans, Maple).
============================================================ */
.c,
.container {
max-width: 920px;
}
body {
font-family: var(--font-text);
color: var(--text);
background-color: var(--bg);
}
::selection {
background: var(--primary);
color: #fff;
}
/* Header */
header {
border-bottom-color: var(--border-light);
}
header h1,
header h1 strong {
font-family: var(--font-title);
color: var(--primary);
}
header .sub,
.subtitle {
color: var(--text-secondary);
}
.db,
.doc-badge {
color: var(--text-muted);
border-color: var(--border);
}
/* Nav */
nav {
border-bottom-color: var(--border-light);
}
nav a {
color: var(--text-muted);
}
nav a:hover {
color: var(--text-secondary);
}
nav a.active {
color: var(--text);
border-bottom-color: var(--primary);
}
/* Sections */
section {
border-bottom-color: var(--border-light);
}
.sn,
.section-num {
color: var(--text-muted);
}
.st,
.section-title {
font-family: var(--font-title);
color: var(--primary);
}
.si,
.section-intro {
color: var(--text-secondary);
}
p.bt {
color: var(--text-secondary);
}
p.bt strong {
color: var(--text);
}
/* Tables */
thead th {
color: var(--text-muted);
border-bottom-color: var(--text);
}
tbody td {
border-bottom-color: var(--border-light);
}
tbody tr:hover td {
background: rgba(47, 74, 156, 0.04);
}
.dt th {
color: var(--text-muted);
border-bottom-color: var(--text);
}
.dt td {
border-bottom-color: var(--border-light);
}
.dt tbody tr:hover td {
background: rgba(47, 74, 156, 0.04);
}
.dt td input:focus,
.dt td textarea:focus {
background: rgba(47, 74, 156, 0.06);
}
.dt .lh td,
.dt .tr td {
border-color: var(--border);
color: var(--text);
}
/* Specs bloc hover */
.sp::before {
background: var(--primary);
}
.sl {
color: var(--text-muted);
}
.sv {
color: var(--text);
}
/* Coupe / figures */
.cw {
border-color: var(--border-light);
}
.cw:hover {
border-color: var(--border);
}
.cp {
color: var(--text-muted);
}
/* Carousel */
.cn {
color: var(--text);
background: rgba(255, 255, 255, 0.9);
}
.cn:hover {
background: var(--primary);
color: #fff;
}
.dot.a {
background: var(--primary);
}
/* Blocs citation / encadré */
.rb,
.ref-block {
border-left-color: var(--primary);
background: rgba(47, 74, 156, 0.04);
}
.rb:hover,
.ref-block:hover {
background: rgba(47, 74, 156, 0.08);
}
.rb a:hover {
border-bottom-color: var(--primary);
}
.rt {
color: var(--text-muted);
}
.dn {
border-left-color: var(--primary);
color: var(--text-secondary);
background: rgba(47, 74, 156, 0.04);
}
.dn:hover {
background: rgba(47, 74, 156, 0.08);
}
.dn strong {
color: var(--text);
}
/* Boutons */
.btn {
border-color: var(--text);
color: var(--text);
background: var(--bg-card);
}
.btn::after {
background: var(--primary);
}
.btn:hover {
color: #fff;
}
.bp,
.btn-primary {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.bp::after,
.btn-primary::after {
background: var(--primary-dark);
}
/* Tabs */
.tb {
border-color: var(--text);
color: var(--text);
background: var(--bg-card);
}
.tb.a {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.tb:hover:not(.a) {
background: var(--bg);
}
/* Normes / liens doc */
.nr {
border-bottom-color: var(--border-light);
}
.nr:hover {
background: rgba(47, 74, 156, 0.04);
}
.nrd,
.nrd a {
color: var(--text-secondary);
}
.nrd a {
border-bottom-color: var(--border);
}
.nrd a:hover {
color: var(--primary);
border-bottom-color: var(--primary);
}
.ngt {
color: var(--text-muted);
border-bottom-color: var(--border-light);
}
/* Footer */
footer {
border-top-color: var(--border-light);
}
footer .left,
footer .right {
color: var(--text-secondary);
}
/* ——— Suivi (page suivi) ——— */
.confidential {
color: #e30613;
border-color: #e30613;
}
nav a:hover {
color: var(--primary);
}
nav a.active {
border-bottom-color: var(--primary);
}
.btn {
border-color: var(--primary);
}
.btn::after {
background: var(--primary);
}
.btn:hover::after {
transform: translateY(0);
}
.btn-primary {
background: var(--primary);
border-color: var(--primary);
}
.btn-primary::after {
background: var(--primary-dark);
}
.status-item {
border-color: var(--border);
}
.status-item::before {
background: var(--primary);
}
.status-item:hover {
border-color: var(--primary);
background: transparent;
}
.status-item:hover::before {
opacity: 1;
}
.status-value {
color: var(--text);
}
.status-label {
color: var(--text-muted);
}
.data-table th {
color: var(--text-muted);
border-bottom-color: var(--text);
}
.data-table td {
border-bottom-color: var(--border-light);
}
.data-table tbody tr:hover td {
background: rgba(47, 74, 156, 0.04);
}
.add-btn {
border-color: var(--text);
color: var(--text);
background: var(--bg-card);
}
.add-btn:hover {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.ent-form {
border-color: var(--border);
background: var(--bg);
}
.ent-field label {
color: var(--text-muted);
}
.file-drop {
border-color: var(--border);
color: var(--text-muted);
}
.file-drop:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(47, 74, 156, 0.04);
}
.veille-card {
border-color: var(--border);
}
.veille-card:hover {
border-color: var(--primary);
background: rgba(47, 74, 156, 0.04);
}
.veille-name a:hover {
border-bottom-color: var(--primary);
}
.veille-tag,
.task-who,
.note-meta,
.link-url,
.link-cat {
color: var(--text-muted);
}
.note-text,
.veille-body {
color: var(--text-secondary);
}
.task-cb {
border-color: var(--border);
}
.task-cb:hover {
border-color: var(--primary);
}
.task-cb.done {
background: var(--primary);
border-color: var(--primary);
}
.task-item:hover {
background: rgba(47, 74, 156, 0.04);
}
.note-item:hover {
background: rgba(47, 74, 156, 0.04);
}
.ref-block a:hover {
color: var(--primary);
border-bottom-color: var(--primary);
}
.link-item:hover {
background: rgba(47, 74, 156, 0.04);
}
.link-name a:hover {
border-bottom-color: var(--primary);
}
.ent-field input:focus,
.ent-field select:focus,
.ent-field textarea:focus,
.note-area:focus-within,
.task-input input:focus,
.link-input input:focus {
border-color: var(--primary);
}
.badge.ecartee {
background: rgba(47, 74, 156, 0.12);
color: var(--primary-dark);
}
::-webkit-scrollbar-thumb {
background: var(--border);
}