/* ============================================================
Les Bonnes Mains — Design System global
Variables · Reset · Typo · Boutons (6 variantes) · WYSIWYG · Utilitaires
Migration fidèle de src/css/style.css (site statique)
============================================================ */
:root {
/* Palette */
--bleu-cobalt: #0f10f4;
--bleu-celeste: #b0dbfd;
--jaune-safran: #f4b33f;
--orange-sanguine: #ed622b;
--blanc-ivoire: #fefdf6;
--noir-onyx: #1f1f1f;
/* Typographies */
--font-titre: 'Passion One', Impact, sans-serif;
--font-corps: 'Varta', 'Helvetica Neue', Arial, sans-serif;
/* Accent : on conserve la police des titres (rendu réel du site statique d'origine) */
--font-accent: var(--font-titre);
/* Layout */
--max-width: 1440px;
--radius: 12px;
/* Boutons (pill) — système unifié */
--btn-padding-y: 0.7rem;
--btn-padding-x: 1.5rem;
--btn-font-size: 0.9rem;
--btn-font-weight: 700;
--btn-letter-spacing: 1px;
--btn-radius: 999px;
--btn-gap: 0.7rem;
--btn-icon-size: 1.75rem;
--btn-icon-svg: 0.9rem;
--btn-line-height: 1;
--btn-transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
/* Curseurs custom (monogramme) */
--cursor-default: url('data:image/svg+xml;utf8,') 14 14, auto;
--cursor-link: url('data:image/svg+xml;utf8,') 8 8, auto;
}
/* ===== Reveal animations ===== */
[data-reveal] {
--reveal-delay: 0ms;
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay);
will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* ===== Reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-corps);
font-weight: 400;
font-size: 1rem;
line-height: 1.6;
color: var(--noir-onyx);
background-color: var(--blanc-ivoire);
-webkit-font-smoothing: antialiased;
cursor: var(--cursor-default);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-titre);
font-weight: 400;
letter-spacing: 0.5px;
line-height: 1.1;
text-transform: uppercase;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }
/* Texte courant — source de vérité unique (homogène sur tout le site) */
p { font-family: var(--font-corps); font-size: 1rem; line-height: 1.6; font-weight: 400; }
.accent {
font-family: var(--font-accent);
font-weight: 400;
}
a { color: inherit; text-decoration: none; cursor: var(--cursor-link); }
img, svg { display: block; max-width: 100%; }
/* ===== Boutons — système 6 variantes via variables ===== */
/* Règle de hover validée : ivoire -> bleu céleste ; toutes les autres -> noir onyx */
.btn {
--_bg: var(--bleu-cobalt);
--_fg: var(--blanc-ivoire);
--_bg-h: var(--noir-onyx);
--_fg-h: var(--blanc-ivoire);
--_border: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--btn-gap);
font-family: var(--font-corps);
font-weight: var(--btn-font-weight);
text-transform: uppercase;
letter-spacing: var(--btn-letter-spacing);
font-size: var(--btn-font-size);
line-height: var(--btn-line-height);
padding: var(--btn-padding-y) var(--btn-padding-x);
border-radius: var(--btn-radius);
border: 2px solid var(--_border);
background-color: var(--_bg);
color: var(--_fg);
cursor: var(--cursor-link);
text-decoration: none;
transition: var(--btn-transition);
}
.btn:hover {
background-color: var(--_bg-h);
color: var(--_fg-h);
border-color: var(--_bg-h);
}
.btn__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--btn-icon-size);
height: var(--btn-icon-size);
border-radius: 50%;
background-color: var(--_fg);
color: var(--_bg);
flex-shrink: 0;
transition: var(--btn-transition);
}
.btn__arrow svg { width: var(--btn-icon-svg); height: var(--btn-icon-svg); }
.btn:hover .btn__arrow { background-color: var(--_fg-h); color: var(--_bg-h); }
/* Variantes */
.btn--cobalt { --_bg: var(--bleu-cobalt); --_fg: var(--blanc-ivoire); --_bg-h: var(--noir-onyx); --_fg-h: var(--blanc-ivoire); }
.btn--orange { --_bg: var(--orange-sanguine); --_fg: var(--blanc-ivoire); --_bg-h: var(--noir-onyx); --_fg-h: var(--blanc-ivoire); }
.btn--safran { --_bg: var(--jaune-safran); --_fg: var(--noir-onyx); --_bg-h: var(--noir-onyx); --_fg-h: var(--blanc-ivoire); }
.btn--celeste { --_bg: var(--bleu-celeste); --_fg: var(--bleu-cobalt); --_bg-h: var(--noir-onyx); --_fg-h: var(--blanc-ivoire); }
.btn--onyx { --_bg: var(--noir-onyx); --_fg: var(--blanc-ivoire); --_bg-h: var(--noir-onyx); --_fg-h: var(--blanc-ivoire); }
.btn--ivoire { --_bg: var(--blanc-ivoire); --_fg: var(--bleu-cobalt); --_bg-h: var(--bleu-celeste); --_fg-h: var(--bleu-cobalt); --_border: var(--blanc-ivoire); }
/* onyx : la couleur ne change pas au hover (déjà noir) -> feedback par ombre */
.btn--onyx:hover { box-shadow: 0 8px 22px rgba(31, 31, 31, 0.28); }
/* Variante outline (usage interne templates, ex. hero sur fond sombre) */
.btn--ghost { --_bg: transparent; --_fg: var(--noir-onyx); --_bg-h: var(--noir-onyx); --_fg-h: var(--blanc-ivoire); --_border: var(--noir-onyx); }
.btn--ghost-light{ --_bg: transparent; --_fg: var(--blanc-ivoire); --_bg-h: var(--blanc-ivoire); --_fg-h: var(--noir-onyx); --_border: var(--blanc-ivoire); }
/* Tailles */
.btn--sm { --btn-padding-y: 0.5rem; --btn-padding-x: 1rem; --btn-font-size: 0.8rem; --btn-icon-size: 1.4rem; }
.btn--lg { --btn-padding-y: 0.9rem; --btn-padding-x: 2rem; --btn-font-size: 1rem; --btn-icon-size: 2rem; }
/* Conteneur liste de boutons (répéteur ACF) */
.lbm-buttons { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
/* ===== Correction des métriques de police (text-box-trim) =====
Passion One / Varta réservent de l'espace pour les jambages : en capitales
le texte « flotte » en haut (padding-bas trop grand, mauvais alignement
avec les icônes). On rogne le sur-espace au-dessus des capitales et sous la
ligne de base. Progressive enhancement : sans support, rendu actuel inchangé. */
@supports (text-box-trim: trim-both) {
/* Trim ciblé : UNIQUEMENT les éléments interactifs / pilules où le texte doit
être centré ou aligné avec une icône / un caret / dans une pastille.
On NE trimme PAS les titres de bloc ni les paragraphes : leur espacement
reste ainsi rigoureusement identique au site original.
Les libellés des cas « texte + icône » (menus, Contact, FAQ) sont enveloppés
dans un pour que le trim agisse sur le texte. */
:where(
/* Boutons */
.btn, .btn__label,
/* Header / menus */
.nav-cta, .nav-cta__label, .nav-link-label,
.nav-links a, .nav-submenu a, .sub-menu a, .nav-overlay__sub a,
/* CTA à icône */
.service-card__cta, .service-card__cta > span,
.jumbotron__cta, .faq__more, .faq__more > span, .video__cta, .video-h__cta,
/* Filtres / pagination d'archive */
.archives-filter-btn, .archives-realisations__pagination .page-numbers,
/* Tags & labels en pastille */
.realisation-card__category, .popin-realisations__category,
.realisations__promo-label
) {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
}
/* ===== Contenu WYSIWYG — rendu homogène partout ===== */
.wysiwyg { font-family: var(--font-corps); color: inherit; font-size: 1rem; line-height: 1.6; font-weight: 400; }
.wysiwyg > *:first-child { margin-top: 0; }
.wysiwyg > *:last-child { margin-bottom: 0; }
.wysiwyg p { font-size: 1rem; line-height: 1.6; font-weight: 400; margin: 0 0 1rem; }
.wysiwyg a {
color: var(--bleu-cobalt);
text-decoration: none;
box-shadow: inset 0 -2px 0 var(--bleu-celeste);
transition: box-shadow 0.2s ease, color 0.2s ease;
}
.wysiwyg a:hover { color: var(--orange-sanguine); box-shadow: inset 0 -2px 0 var(--orange-sanguine); }
.wysiwyg strong, .wysiwyg b { font-weight: 700; }
.wysiwyg em, .wysiwyg i { font-style: italic; }
/* Listes — reprend le style des listes designées du site (service-card__list) */
.wysiwyg ul, .wysiwyg ol { margin: 0 0 1.1rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.wysiwyg ul li, .wysiwyg ol li { position: relative; padding-left: 1.6rem; font-size: 1rem; line-height: 1.6; }
.wysiwyg ul li::before {
content: '';
position: absolute;
left: 0; top: 0.55em;
width: 0.55rem; height: 0.55rem;
border-radius: 50%;
background-color: var(--bleu-cobalt);
transform: translateY(-50%);
}
.wysiwyg ol { counter-reset: lbm-ol; }
.wysiwyg ol li { counter-increment: lbm-ol; }
.wysiwyg ol li::before {
content: counter(lbm-ol);
position: absolute;
left: 0; top: 0;
font-family: var(--font-titre);
font-size: 0.95rem;
line-height: 1.5;
color: var(--orange-sanguine);
}
.wysiwyg h2, .wysiwyg h3, .wysiwyg h4 { margin: 1.6rem 0 0.8rem; }
.wysiwyg blockquote {
margin: 1.4rem 0;
padding: 0.4rem 0 0.4rem 1.4rem;
border-left: 4px solid var(--bleu-celeste);
font-size: 1.15rem;
}
/* ===== Utilitaires couleurs ===== */
.text-primary { color: var(--bleu-cobalt); }
.text-secondary { color: var(--orange-sanguine); }
.text-accent { color: var(--jaune-safran); }
.text-light-color { color: var(--bleu-celeste); }
.text-dark { color: var(--noir-onyx); }
.text-light-bg { color: var(--blanc-ivoire); }
.text-center { text-align: center; }
.bg-primary { background-color: var(--bleu-cobalt); color: var(--blanc-ivoire); }
.bg-secondary { background-color: var(--orange-sanguine); color: var(--blanc-ivoire); }
.bg-accent { background-color: var(--jaune-safran); color: var(--noir-onyx); }
.bg-light-color { background-color: var(--bleu-celeste); color: var(--bleu-cobalt); }
.bg-dark { background-color: var(--noir-onyx); color: var(--blanc-ivoire); }
.bg-light { background-color: var(--blanc-ivoire); color: var(--noir-onyx); }
/* ===== Shadows ===== */
.shadow-sm { box-shadow: 0 2px 8px rgba(31, 31, 31, 0.06); }
.shadow-md { box-shadow: 0 6px 20px rgba(31, 31, 31, 0.08); }
.shadow-lg { box-shadow: 0 14px 32px rgba(31, 31, 31, 0.14); }
.shadow-xl { box-shadow: 0 20px 48px rgba(31, 31, 31, 0.18); }
/* ===== Conteneur de section ===== */
.lbm-section { max-width: var(--max-width); margin: 0 auto; padding: 5rem 2rem; }
@media (max-width: 640px) {
.lbm-section { padding: 3.5rem 1.25rem; }
}