/*
* style.css — Frédéric Pallu
* fredericpallu.com / fredericpallu.github.io
*
* Polices (à inclure dans le de chaque page) :
* ...
*
*/
/* ═══════════════════════════════════════════
RESET
═══════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ═══════════════════════════════════════════
VARIABLES
═══════════════════════════════════════════ */
:root {
/* Palette principale — vert forêt */
--green-dark: #1a3a2a; /* fond header, accents forts */
--green-mid: #2d6a4f; /* texte lien hover, titres axe */
--green-soft: #40916c; /* liens, accents interactifs */
--green-light: #d8f3dc; /* bordures douces, séparateurs */
--green-pale: #f0faf2; /* fonds encadrés, blocs indicateurs */
/* Texte */
--text-main: #1c2b22; /* corps principal */
--text-mid: #3d5246; /* texte secondaire, descriptions */
--text-muted: #6b8a77; /* labels, métadonnées, notes */
/* Surfaces */
--bg: #f7fcf8; /* fond de page */
--white: #ffffff; /* cartes, header chapeau */
--border: #c5dece; /* bordures générales */
/* Accent chaud — cartouches d'orientation par profil (contraste léger avec le vert) */
--accent-warm: #b07d2b; /* ocre/ambre, accent profils */
--accent-warm-border: #e7d2a8; /* bordure douce ambre */
--accent-warm-pale: #fbf4e9; /* fond crème chaud */
/* Couleurs des 4 axes — à adapter selon les pages */
--axe1: #4a3f8f; /* Stratégie — violet */
--axe1-light: #ede9fb;
--axe2: #2d6a4f; /* Biodiversité — vert */
--axe2-light: #d8f3dc;
--axe3: #7c4b00; /* Formation — brun-ocre */
--axe3-light: #fef0d8;
--axe4: #8a2030; /* Diffusion — bordeaux */
--axe4-light: #fde8eb;
/* Typographie */
--font-serif: 'Source Serif 4', Georgia, serif;
--font-sans: 'DM Sans', system-ui, sans-serif;
/* Mise en page */
--max-width: 900px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-pill: 20px;
}
/* ═══════════════════════════════════════════
BASE
═══════════════════════════════════════════ */
html { font-size: 16px; }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--text-main);
line-height: 1.6;
}
a {
color: var(--green-soft);
text-decoration: none;
border-bottom: 1px solid var(--green-light);
transition: color 0.15s, border-color 0.15s;
}
a:hover {
color: var(--green-mid);
border-color: var(--green-mid);
}
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.25rem; }
/* ═══════════════════════════════════════════
TYPOGRAPHIE
═══════════════════════════════════════════ */
h1, h2, h3 {
font-family: var(--font-serif);
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.02em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; color: var(--text-main); }
h3 { font-size: 1.1rem; color: var(--text-main); }
p { line-height: 1.75; }
p + p { margin-top: 0.75rem; }
/* ═══════════════════════════════════════════
MISE EN PAGE GÉNÉRALE
═══════════════════════════════════════════ */
.inner {
max-width: var(--max-width);
margin: 0 auto;
padding-left: 2rem;
padding-right: 2rem;
}
.content {
max-width: var(--max-width);
margin: 0 auto;
padding: 1.5rem 2rem 4rem;
}
/* ═══════════════════════════════════════════
BARRE DE NAVIGATION SITE
═══════════════════════════════════════════ */
/* Variante dans le header (après .chaine) */
.site-nav {
margin-top: 1rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
/* Variante autonome (barre verte après ) */
.site-nav-bar {
background: var(--green-dark);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-nav-bar .site-nav-inner {
height: 38px;
}
.site-nav-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
gap: 1.75rem;
}
.site-nav-link {
font-family: var(--font-sans);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.025em;
color: rgba(255,255,255,0.78);
text-decoration: none;
border-bottom: none;
transition: color 0.15s;
}
.site-nav-link:hover {
color: #ffffff;
border-bottom: none;
}
/* ═══════════════════════════════════════════
HEADER
═══════════════════════════════════════════ */
header {
background: var(--green-dark);
color: white;
padding: 2.5rem 2rem 2rem;
position: relative;
overflow: hidden;
}
/* Cercles décoratifs en filigrane */
header::before {
content: '';
position: absolute;
top: -40px; right: -40px;
width: 220px; height: 220px;
border-radius: 50%;
border: 40px solid rgba(255,255,255,0.04);
pointer-events: none;
}
header::after {
content: '';
position: absolute;
bottom: -60px; left: 40%;
width: 300px; height: 300px;
border-radius: 50%;
border: 50px solid rgba(255,255,255,0.03);
pointer-events: none;
}
.header-inner {
max-width: var(--max-width);
margin: 0 auto;
position: relative;
}
.lang-badge {
position: absolute;
top: 0;
right: 0;
display: inline-flex;
align-items: center;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.28);
border-radius: 20px;
padding: 0.2rem 0.55rem;
font-size: 1.1rem;
line-height: 1;
text-decoration: none;
color: white;
cursor: pointer;
transition: background 0.18s;
z-index: 10;
}
.lang-badge:hover {
background: rgba(255,255,255,0.24);
color: white;
}
.lang-badge::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 6px);
right: 0;
background: rgba(0,0,0,0.72);
color: #fff;
font-size: 0.68rem;
font-weight: 500;
padding: 0.22rem 0.55rem;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
}
.lang-badge:hover::after {
opacity: 1;
}
header h1 {
color: white;
font-size: 2rem;
margin-bottom: 0.5rem;
}
header .subtitle {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 300;
color: rgba(255,255,255,0.65);
margin-bottom: 0;
}
/* Variante : subtitle suivi d'un élément .chaine */
header .subtitle:not(:last-child) {
margin-bottom: 1.5rem;
}
/* ═══════════════════════════════════════════
CHAÎNE LOGIQUE (dans le header)
═══════════════════════════════════════════ */
.chaine {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.chaine-step {
font-size: 0.75rem;
font-weight: 500;
padding: 3px 12px;
border-radius: var(--radius-pill);
background: rgba(255,255,255,0.12);
color: rgba(255,255,255,0.9);
letter-spacing: 0.02em;
}
.chaine-arrow {
color: rgba(255,255,255,0.3);
font-size: 0.75rem;
}
/* ═══════════════════════════════════════════
CHAPEAU (bande introductive sous le header)
═══════════════════════════════════════════ */
.chapeau-section {
background: var(--white);
border-bottom: 1px solid var(--border);
}
.chapeau-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 1.75rem 2rem;
}
.chapeau-inner p {
font-size: 0.9rem;
color: var(--text-mid);
line-height: 1.75;
max-width: 720px;
}
/* ═══════════════════════════════════════════
BARRE DE FILTRES (sticky)
═══════════════════════════════════════════ */
.filters-section {
background: var(--white);
border-bottom: 2px solid var(--border);
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.filters-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0.875rem 2rem;
display: flex;
gap: 1.5rem;
align-items: center;
flex-wrap: wrap;
}
.filter-group {
display: flex;
align-items: center;
gap: 8px;
}
.filter-group label {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.filter-group select {
font-family: var(--font-sans);
font-size: 0.8rem;
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--text-main);
cursor: pointer;
outline: none;
transition: border-color 0.15s;
}
.filter-group select:focus {
border-color: var(--green-soft);
}
/* Boutons-pilules d'axe */
.axe-filters {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.axe-btn {
font-family: var(--font-sans);
font-size: 0.75rem;
padding: 4px 12px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: var(--bg);
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.axe-btn:hover {
border-color: var(--green-soft);
color: var(--green-mid);
}
.axe-btn.active-all { background: var(--green-dark); color: white; border-color: var(--green-dark); }
.axe-btn.active-a1 { background: var(--axe1); color: white; border-color: var(--axe1); }
.axe-btn.active-a2 { background: var(--axe2); color: white; border-color: var(--axe2); }
.axe-btn.active-a3 { background: var(--axe3); color: white; border-color: var(--axe3); }
.axe-btn.active-a4 { background: var(--axe4); color: white; border-color: var(--axe4); }
/* ═══════════════════════════════════════════
COMPTEURS / STATS
═══════════════════════════════════════════ */
.stats-section {
max-width: var(--max-width);
margin: 0 auto;
padding: 1.5rem 2rem 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.stat-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
}
.stat-card .n {
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 500;
color: var(--green-dark);
line-height: 1;
}
.stat-card .l {
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 4px;
}
/* ═══════════════════════════════════════════
SECTIONS D'AXE
═══════════════════════════════════════════ */
.axe-section {
margin-bottom: 2rem;
}
.axe-header {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--border);
}
.axe-num {
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 4px;
}
.axe-num.a1 { background: var(--axe1-light); color: var(--axe1); }
.axe-num.a2 { background: var(--axe2-light); color: var(--axe2); }
.axe-num.a3 { background: var(--axe3-light); color: var(--axe3); }
.axe-num.a4 { background: var(--axe4-light); color: var(--axe4); }
.axe-title {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 400;
color: var(--text-main);
}
.axe-count {
font-size: 0.75rem;
color: var(--text-muted);
margin-left: auto;
}
/* ═══════════════════════════════════════════
GRILLE ET CARTES
═══════════════════════════════════════════ */
.cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.profils-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.2rem;
margin: 1.5rem 0;
}
.profil-card {
border: 1px solid var(--accent-warm-border);
border-left: 3px solid var(--accent-warm);
border-radius: var(--radius-md);
padding: 1rem 1.1rem;
background: var(--accent-warm-pale);
}
.profil-card strong {
display: block;
margin-bottom: .4rem;
color: var(--text-heading);
}
.profil-card a {
display: block;
margin-top: .3rem;
font-size: .9rem;
}
.profil-group {
margin-top: .65rem;
padding-top: .55rem;
border-top: 1px dashed var(--border);
}
.profil-group-label {
display: block;
font-size: .78rem;
font-weight: 600;
color: var(--text-heading);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: .1rem;
}
.profil-group a {
padding-left: .9rem;
font-size: .85rem;
}
.card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.125rem 1.25rem;
transition: box-shadow 0.2s;
}
.card:hover {
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.card.hidden { display: none; }
.card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin-bottom: 0.5rem;
}
.card-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--text-main);
line-height: 1.4;
}
.meta-list {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.meta-item {
padding-left: 1.1em;
position: relative;
font-size: 0.82rem;
}
.meta-item::before {
content: "•";
position: absolute;
left: 0;
color: var(--text-muted);
}
/* Badges colorés par axe */
.card-badge {
font-size: 0.65rem;
font-weight: 500;
padding: 2px 8px;
border-radius: var(--radius-pill);
flex-shrink: 0;
letter-spacing: 0.03em;
}
.badge-a1 { background: var(--axe1-light); color: var(--axe1); }
.badge-a2 { background: var(--axe2-light); color: var(--axe2); }
.badge-a3 { background: var(--axe3-light); color: var(--axe3); }
.badge-a4 { background: var(--axe4-light); color: var(--axe4); }
.card-meta {
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: 0.4rem;
}
.card-chiffre {
font-size: 0.8rem;
font-weight: 500;
color: var(--text-mid);
}
/* Zone dépliable */
.card-expand {
margin-top: 0.75rem;
border-top: 1px solid var(--green-light);
padding-top: 0.75rem;
}
.card-detail {
font-size: 0.8rem;
color: var(--text-mid);
line-height: 1.7;
display: none; /* géré par JS */
}
.card-detail p + p { margin-top: 0.6rem; }
.card-detail ul {
margin-top: 0.5rem;
padding-left: 1.2rem;
}
/* Bloc indicateurs dans les détails */
.indicateurs {
margin-top: 0.75rem;
padding: 0.6rem 0.75rem;
background: var(--green-pale);
border-radius: var(--radius-sm);
border-left: 3px solid var(--green-soft);
}
.indicateurs strong {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--green-mid);
display: block;
margin-bottom: 0.25rem;
}
/* Bouton "en savoir plus / réduire" */
.toggle-btn {
font-family: var(--font-sans);
font-size: 0.75rem;
color: var(--green-soft);
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
gap: 4px;
transition: color 0.15s;
}
.toggle-btn:hover { color: var(--green-mid); }
.toggle-btn .icon {
font-size: 0.65rem;
transition: transform 0.2s;
}
.toggle-btn.open .icon { transform: rotate(90deg); }
/* ═══════════════════════════════════════════
BLOC PROSE (logique d'ensemble, notes, etc.)
═══════════════════════════════════════════ */
.bloc-prose {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.25rem 1.5rem;
}
.bloc-prose p {
font-size: 0.85rem;
color: var(--text-mid);
line-height: 1.75;
}
/* Variante avec accent gauche */
.bloc-prose.accent {
border-left: 3px solid var(--green-soft);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background: var(--green-pale);
}
/* ═══════════════════════════════════════════
MESSAGE VIDE (filtres sans résultat)
═══════════════════════════════════════════ */
.empty-msg {
text-align: center;
padding: 3rem;
color: var(--text-muted);
font-size: 0.875rem;
display: none;
}
/* ═══════════════════════════════════════════
FOOTER
═══════════════════════════════════════════ */
footer {
text-align: center;
padding: 2rem;
font-size: 0.75rem;
color: var(--text-muted);
border-top: 1px solid var(--border);
}
footer a {
color: var(--green-soft);
border-bottom: none;
}
footer a:hover { color: var(--green-mid); }
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 640px) {
header { padding: 1.5rem 1rem; }
header h1 { font-size: 1.5rem; }
.filters-inner { padding: 0.75rem 1rem; gap: 0.75rem; }
.stats-section { grid-template-columns: repeat(2, 1fr); padding: 1rem 1rem 0; }
.content { padding: 1rem 1rem 3rem; }
.cards-grid { grid-template-columns: 1fr; }
.chapeau-inner { padding: 1.25rem 1rem; }
}