/* ============================================================
BLUEPRINT — CHARTE GRAPHIQUE v1.0
Surcharge CSS › blueprint-brand.css
INSTALLATION :
Ajouter cette ligne EN DERNIÈRE position dans le
du fichier index.html, après tous les autres :
Ce fichier est NON-DESTRUCTIF : il surcharge le style
existant sans toucher au HTML ni aux autres fichiers CSS.
Pour annuler : retirer le ci-dessus.
============================================================ */
/* ── 1. CHARGEMENT DES POLICES ──────────────────────────── */
/*
Voix 1 › Montserrat — titres, corps, display
Graisses : 300 (Light) · 500 (Medium) · 700 (Bold) · 800 (ExtraBold)
Voix 2 › IBM Plex Mono — labels, annotations, numéros de plan
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,500;0,700;0,800;1,300&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
/* ── 2. PALETTE STRICTE ─────────────────────────────────── */
/*
Règle charte : 3 couleurs uniquement, rien d'autre.
┌─────────────────────────────────────────────────────┐
│ Blueprint Blue #22548E → 70 % du visuel │
│ Gris Calque #CECECE → 10 % │
│ Blanc #ffffff → 20 % (respiration) │
└─────────────────────────────────────────────────────┘
Modifications apportées aux variables existantes :
• --blue #1e5a96 → #22548E (unifié, 1 seul bleu)
• --blue-deep #22548E → inchangé (déjà correct)
• --blue-light #a8d5f2 → #CECECE (gris calque)
• --earth #8b7355 → #22548E (terracotta supprimé)
• --dark #0f172a → #22548E (quasi-noir supprimé)
• --mid #475569 → rgba(34,84,142,.75)
• --bg #fafaf8 → #ffffff (blanc pur)
*/
:root {
/* ─ Couleurs charte ─ */
--blue: #22548E;
--blue-deep: #22548E;
--grey: #CECECE;
/* ─ Déclinaisons d'opacité (seules nuances autorisées) ─ */
--blue-85: rgba(34, 84, 142, .85);
--blue-75: rgba(34, 84, 142, .75);
--blue-55: rgba(34, 84, 142, .55);
--blue-25: rgba(34, 84, 142, .25);
--blue-12: rgba(34, 84, 142, .12);
/* ─ Remplacement des couleurs hors-charte ─ */
--blue-light: #CECECE; /* ex-#a8d5f2 → Gris Calque */
--earth: #22548E; /* ex-terracotta #8b7355 */
--dark: #22548E; /* ex-quasi-noir #0f172a */
--mid: rgba(34, 84, 142, .75); /* ex-gris-bleu #475569 */
--bg: #ffffff; /* fond blanc pur */
/* ─ Motif grille blueprint ─
Utilisé UNIQUEMENT sur les zones de couleur bleue.
Deux niveaux : grille standard (hero, footer) + subtile (contact, stats). */
/* Grille standard — hero et footer (peu de texte par-dessus) */
--grid-img:
linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
/* Grille subtile — contact et stats (texte lisible au-dessus) */
--grid-subtle:
linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
--grid-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
}
/* ── 3. TYPOGRAPHIE GLOBALE ─────────────────────────────── */
/*
Remplacement de : system-ui / -apple-system / Segoe UI
Par : Montserrat (voix principale)
*/
body {
font-family: 'Montserrat', sans-serif;
}
/* ── 4. HIÉRARCHIE DES TITRES ───────────────────────────── */
/*
Charte :
H1 Display 54 px / 800 / letter-spacing -.02em ← .hero-title
H2 Section 30 px / 700 / letter-spacing -.02em ← .section-title
Corps 17 px / 300 / line-height 1.7
*/
/* H1 — Titre display hero */
.hero-title {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
letter-spacing: -.02em;
}
/* H2 — Titres de sections */
.section-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -.02em;
}
/* Corps courant — Montserrat Light */
#studio p,
#services p,
#politique p,
.politique-text,
.stat-val {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
line-height: 1.7;
}
/* ── 5. IBM PLEX MONO — VOIX DU CALQUE ─────────────────── */
/*
Réservé aux cotations, légendes, labels techniques,
numéros de plan et éléments de navigation.
Caractéristique : letter-spacing élevé + uppercase.
*/
/* Navigation */
.nav-link {
font-family: 'IBM Plex Mono', monospace;
letter-spacing: .18em;
font-size: .65rem;
}
/* Labels de section (ex : "EST. 2008", "Travaux sélectionnés") */
.label {
font-family: 'IBM Plex Mono', monospace;
font-size: .65rem;
letter-spacing: .32em;
color: var(--blue);
}
/* Badge hero (sur fond sombre — reste blanc) */
.hero-badge {
font-family: 'IBM Plex Mono', monospace;
letter-spacing: .35em;
color: rgba(255, 255, 255, .75);
}
/* Labels des stats (sur fond bleu — Gris Calque) */
.stat-label {
font-family: 'IBM Plex Mono', monospace;
letter-spacing: .15em;
color: var(--grey);
}
/* Filtres projets */
.filter-btn {
font-family: 'IBM Plex Mono', monospace;
letter-spacing: .15em;
border-color: var(--blue-25);
color: var(--blue-55);
}
.filter-btn:hover,
.filter-btn.active {
border-color: var(--blue);
color: var(--blue);
}
/* Labels formulaire contact */
#contact label {
font-family: 'IBM Plex Mono', monospace;
font-size: .7rem;
letter-spacing: .2em;
text-transform: uppercase;
}
/* ── 6. GRILLE BLUEPRINT ────────────────────────────────── */
/*
ADN visuel de la marque — règle charte :
✅ Zones bleues → grille blanche semi-transparente
❌ Zones claires → PAS de grille
*/
/* ─ Section Contact (#22548E) ─
Dégradé : grille visible en haut-droite, fondue vers bas-gauche.
rgba(34,84,142,0) = bleu transparent → même couleur que le fond,
interpolation propre sans bord noir. */
#contact {
background-color: #22548E;
background-image:
linear-gradient(to bottom left, rgba(34,84,142,0) 0%, rgba(34,84,142,1) 40%),
linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px);
background-size: 100% 100%, 26px 26px, 26px 26px, 130px 130px, 130px 130px;
}
/* ─ Footer (#22548E) ─ */
footer {
background-color: var(--blue); /* correction : ex-#0a1628 hors charte */
background-image: var(--grid-img);
background-size: var(--grid-size);
}
/* ─ Hero — grille intégrée à l'overlay, au-dessus de la photo ─
Technique : on ajoute 4 couches de grille en tête de la liste
background-image de l'overlay existant, sans toucher au HTML. */
#hero-overlay {
background-image:
linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .55) 100%);
background-size:
26px 26px,
26px 26px,
130px 130px,
130px 130px,
100% 100%;
}
/* ── 7. COULEURS DES TEXTES SUR FOND CLAIR ─────────────── */
/*
Remplacement de --dark (#0f172a) et --earth (#8b7355)
par le Blueprint Blue sur toutes les sections claires.
*/
/* Titres de sections */
#studio .section-title,
#projets .section-title,
#services .section-title,
#politique .section-title {
color: var(--blue);
}
/* Texte courant secondaire */
#studio .about-text p,
#services .service-text,
#politique .politique-text {
color: var(--blue-75);
}
/* Valeurs des stats (sur la carte bleue — reste blanc/gris) */
.stat-val {
color: rgba(255, 255, 255, .92);
}
/* Titres des services et items accordéon */
.service-title,
.service-label {
color: var(--blue);
}
/* Metadata des cartes projets */
.proj-meta,
.proj-cat {
font-family: 'IBM Plex Mono', monospace;
font-size: .6rem;
letter-spacing: .15em;
color: var(--blue-55);
}
/* Titres des cartes projets */
.proj-title {
color: var(--blue);
}
/* ── 8. CORRECTIONS DE COHÉRENCE ────────────────────────── */
/* Section Projets : fond légèrement teinté → OK (pas de grille) */
#projets {
background: #f5f5f4;
}
/* Retrait du fond beige chaud → blanc pur sur les sections principales */
#studio,
#services {
background: #ffffff;
}
/* Bouton CTA principal */
.btn-primary,
.hero-cta {
font-family: 'IBM Plex Mono', monospace;
font-size: .7rem;
letter-spacing: .2em;
text-transform: uppercase;
}
/* Liens de navigation scrolled (fond blanc) */
#nav.scrolled .nav-link {
color: var(--blue);
}
/* Hamburger menu (mobile) */
#nav.scrolled #hamburger span {
background: var(--blue);
}
/* Lien scroll en bas du hero */
.scroll-hint {
font-family: 'IBM Plex Mono', monospace;
font-size: .6rem;
letter-spacing: .25em;
color: rgba(255, 255, 255, .6);
}