/* ============================================================
Charte graphique Stockeurs bretons — v1.0
Mai 2026
------------------------------------------------------------
À importer dans n'importe quel projet pour disposer
immédiatement de la palette, de la typographie et des
composants de base de la marque.
Usage :
Dépendance : Open Sans via Google Fonts
============================================================ */
/* ============================================================
1. VARIABLES
============================================================ */
:root {
/* Couleurs principales ---------------------------------- */
--green: #00AB4E; /* Marque : Pantone 354C */
--green-dark: #008C40; /* Marque foncée (hover du vert marque) */
--teal: #78A19B; /* Liserés des boutons (par défaut) */
--green-soft: #EAF6EF; /* Fond des boutons (au survol) */
--green-medium: #4A8C4C; /* Fond des boutons (à la sélection) */
/* Couleurs neutres ------------------------------------- */
--ink: #0E1B14; /* Texte principal, sections sombres */
--ink-soft: #354A3F; /* Texte secondaire, sous-titres */
--ink-mute: #6B7B73; /* Légendes, métadonnées */
--line: #E4EAE6; /* Bordures, séparateurs */
--bg: #FFFFFF; /* Fond principal */
--beige: #F7F5F0; /* Fond neutre alternatif (footer) */
/* Rayons de coins -------------------------------------- */
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 22px;
--radius-pill: 100px;
/* Échelle d'espacement (multiples de 8 px) ------------- */
--space-xs: 8px;
--space-s: 16px;
--space-m: 24px;
--space-l: 32px;
--space-xl: 48px;
--space-2xl: 64px;
--space-3xl: 96px;
/* Typographie ------------------------------------------ */
--font: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
/* Ombres ----------------------------------------------- */
--shadow: 0 1px 2px rgba(14, 27, 20, .04), 0 8px 24px rgba(14, 27, 20, .06);
--shadow-lg: 0 1px 2px rgba(14, 27, 20, .04), 0 24px 60px rgba(14, 27, 20, .12);
/* Transitions ----------------------------------------- */
--transition: all .2s ease;
}
/* ============================================================
2. RESET LÉGER
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, svg, video { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
/* ============================================================
3. TYPOGRAPHIE DE BASE
============================================================ */
body {
font-family: var(--font);
font-size: 16px;
line-height: 1.6;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--ink);
margin: 0 0 var(--space-s);
}
h1 { font-size: 56px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
h2 { font-size: 36px; }
h3 { font-size: 22px; letter-spacing: -0.01em; }
h4 { font-size: 18px; }
h5 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
p { margin: 0 0 var(--space-s); }
a {
color: var(--green-medium);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(74, 140, 76, 0.4);
transition: var(--transition);
}
a:hover { text-decoration-color: var(--green-medium); }
small { font-size: 13px; color: var(--ink-mute); }
/* ============================================================
4. BOUTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 12px 22px;
border-radius: 10px;
font-family: var(--font);
font-weight: 600;
font-size: 15px;
background: var(--bg);
color: var(--ink);
border: 1.5px solid var(--teal);
text-decoration: none;
transition: var(--transition);
cursor: pointer;
white-space: nowrap;
}
.btn:hover {
background: var(--green-soft);
color: var(--ink);
border-color: var(--teal);
transform: translateY(-1px);
}
.btn.active,
.btn:active,
.btn[aria-current="page"] {
background: var(--green-medium);
color: var(--bg);
border-color: var(--green-medium);
}
.btn:focus-visible {
outline: 3px solid var(--green-soft);
outline-offset: 2px;
}
/* Variante : bouton large pour appels à l'action principaux */
.btn--lg {
padding: 16px 28px;
font-size: 16px;
border-radius: 12px;
}
/* Variante : bouton petit pour actions secondaires */
.btn--sm {
padding: 8px 14px;
font-size: 13px;
border-radius: 8px;
}
/* ============================================================
5. NAVIGATION (liens-boutons)
============================================================ */
.nav-link {
display: inline-block;
padding: 8px 14px;
font-weight: 500;
font-size: 14px;
border-radius: 8px;
background: var(--bg);
color: var(--ink);
border: 1.5px solid var(--teal);
text-decoration: none;
transition: var(--transition);
}
.nav-link:hover {
background: var(--green-soft);
color: var(--ink);
}
.nav-link.active,
.nav-link[aria-current="page"] {
background: var(--green-medium);
color: var(--bg);
border-color: var(--green-medium);
}
/* ============================================================
6. CARDS
============================================================ */
.card {
background: var(--bg);
border: 1.5px solid var(--line);
border-radius: var(--radius);
padding: var(--space-l);
transition: var(--transition);
}
.card:hover {
border-color: var(--teal);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.card--hover-strong:hover {
box-shadow: var(--shadow-lg);
}
/* ============================================================
7. FORMULAIRES
============================================================ */
.field {
margin-bottom: var(--space-s);
}
.field-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--ink-soft);
margin-bottom: 6px;
}
.input,
.textarea,
.select {
width: 100%;
padding: 12px 16px;
border: 1.5px solid var(--line);
border-radius: 10px;
font-family: var(--font);
font-size: 14px;
background: var(--bg);
color: var(--ink);
transition: var(--transition);
}
.input:focus,
.textarea:focus,
.select:focus {
outline: none;
border-color: var(--green-medium);
}
.input::placeholder,
.textarea::placeholder {
color: var(--ink-mute);
}
/* ============================================================
8. UTILITAIRES
============================================================ */
/* Conteneurs */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-m);
}
/* Pills / badges */
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--green-soft);
color: var(--green-medium);
font-size: 12px;
font-weight: 600;
border-radius: var(--radius-pill);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Section eyebrow */
.eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: var(--green-medium);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-s);
}
/* Couleurs textuelles */
.text-ink { color: var(--ink); }
.text-soft { color: var(--ink-soft); }
.text-mute { color: var(--ink-mute); }
.text-green { color: var(--green); }
.text-green-medium { color: var(--green-medium); }
/* Backgrounds */
.bg-white { background: var(--bg); }
.bg-beige { background: var(--beige); }
.bg-soft { background: var(--green-soft); }
.bg-ink { background: var(--ink); color: var(--bg); }
/* ============================================================
FIN
============================================================ */