/* ========================================================= Expert Canalisations — Design Tokens Three directions: Anthracite (default), Chaleureuse, Suisse-Tech Warm artisan voice — central mascot ========================================================= Usage: Default (Anthracite): or Chaleureuse: Suisse-Tech: ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap'); /* ========================================================= 1 — DIRECTION A · ANTHRACITE (default, recommandée) "Artisan moderne, urgence rassurante" - Anthracite calé sur la couleur du van réel - Rouge urgence strictement réservé CTA téléphone ========================================================= */ :root, [data-theme="anthracite"] { /* Brand */ --ec-anthracite: #3F4248; --ec-anthracite-dark: #2A2C30; --ec-anthracite-light: #5A5D63; --ec-red: #8A222A; --ec-red-dark: #6E1B22; /* Neutrals */ --ec-white: #FFFFFF; --ec-gray-50: #F4F4F5; --ec-gray-100: #ECECEE; --ec-gray-200: #E4E4E7; --ec-gray-300: #D4D4D8; --ec-gray-400: #A1A1AA; /* Semantic */ --bg: var(--ec-white); --bg-alt: var(--ec-gray-50); --bg-strong: var(--ec-anthracite); --bg-darkest: var(--ec-anthracite-dark); --fg: var(--ec-anthracite-dark); --fg-soft: var(--ec-anthracite-light); --fg-on-dark: var(--ec-white); --fg-on-dark-soft: #C9CBD0; --border: var(--ec-gray-200); --border-strong: var(--ec-anthracite-light); --accent-urgent: var(--ec-red); --accent-urgent-hover: var(--ec-red-dark); /* Section accents (mascot tones) */ --accent-warm: #D9824B; /* gants du hérisson */ --accent-warm-soft: #F4E4D7; } /* ========================================================= 2 — DIRECTION B · CHALEUREUSE "Artisan familial, terracotta + crème" - Pour cibles régies/PPE qui veulent du moins agressif - Garde le rouge urgence mais le laisse à 1.5% max ========================================================= */ [data-theme="chaleureuse"] { --ec-anthracite: #3A342E; /* brun-anthracite chaud */ --ec-anthracite-dark: #26211D; --ec-anthracite-light: #6B5F55; --ec-red: #C0392B; /* terracotta-rouge profond */ --ec-red-dark: #9F2D22; --ec-white: #FBF7F2; /* crème chaud, jamais blanc pur */ --ec-gray-50: #F2EBE0; /* sable très clair */ --ec-gray-100: #E9DFD0; --ec-gray-200: #DCD0BE; --ec-gray-300: #C7B89F; --ec-gray-400: #998771; --bg: var(--ec-white); --bg-alt: var(--ec-gray-50); --bg-strong: var(--ec-anthracite); --bg-darkest: var(--ec-anthracite-dark); --fg: var(--ec-anthracite-dark); --fg-soft: var(--ec-anthracite-light); --fg-on-dark: var(--ec-white); --fg-on-dark-soft: #C9BBA9; --border: var(--ec-gray-200); --border-strong: var(--ec-anthracite-light); --accent-urgent: var(--ec-red); --accent-urgent-hover: var(--ec-red-dark); --accent-warm: #D9824B; --accent-warm-soft: #F4E4D7; } /* ========================================================= 3 — DIRECTION C · SUISSE-TECH "Précision, blanc/anthracite, accent rouge minimal" - Plus B2B, plus 'industriel précis' - Rouge encore plus rare, traits plus fins ========================================================= */ [data-theme="suisse-tech"] { --ec-anthracite: #1F2937; /* slate-900 ish */ --ec-anthracite-dark: #111827; --ec-anthracite-light: #4B5563; --ec-red: #DC2626; --ec-red-dark: #B91C1C; --ec-white: #FFFFFF; --ec-gray-50: #F9FAFB; --ec-gray-100: #F3F4F6; --ec-gray-200: #E5E7EB; --ec-gray-300: #D1D5DB; --ec-gray-400: #9CA3AF; --bg: var(--ec-white); --bg-alt: var(--ec-gray-50); --bg-strong: var(--ec-anthracite); --bg-darkest: var(--ec-anthracite-dark); --fg: var(--ec-anthracite-dark); --fg-soft: var(--ec-anthracite-light); --fg-on-dark: var(--ec-white); --fg-on-dark-soft: #D1D5DB; --border: var(--ec-gray-200); --border-strong: var(--ec-anthracite-light); --accent-urgent: var(--ec-red); --accent-urgent-hover: var(--ec-red-dark); --accent-warm: #B45309; --accent-warm-soft: #FEF3C7; } /* ========================================================= SHARED TOKENS — TYPE, SPACING, RADII, SHADOWS, MOTION ========================================================= */ :root { /* TYPE — Geist + system fallback */ --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fs-display: 72px; --fs-h1: 56px; --fs-h2: 44px; --fs-h3: 28px; --fs-h4: 22px; --fs-lead: 20px; --fs-body: 18px; --fs-body-sm: 16px; --fs-meta: 14px; --fs-micro: 12px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.55; --lh-loose: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* SPACING — 4px base */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* RADII */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-pill: 999px; /* SHADOWS */ --shadow-card: 0 1px 2px rgba(42, 44, 48, 0.04), 0 1px 3px rgba(42, 44, 48, 0.06); --shadow-hover: 0 4px 12px rgba(42, 44, 48, 0.08), 0 2px 4px rgba(42, 44, 48, 0.06); --shadow-cta: 0 2px 8px rgba(138, 34, 42, 0.25); --ring-focus: 0 0 0 3px rgba(138, 34, 42, 0.25); /* MOTION */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 320ms; /* LAYOUT */ --container: 1200px; --container-sm: 720px; --container-lg: 1320px; --header-h: 72px; } /* ========================================================= BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0 0 var(--s-4); font-family: var(--font-sans); color: var(--ec-anthracite-dark); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); text-wrap: balance; } h1 { font-size: var(--fs-h1); font-weight: 700; } h2 { font-size: var(--fs-h2); font-weight: 700; } h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); } h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); } .display { font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg-soft); text-wrap: pretty; } p { margin: 0 0 var(--s-4); text-wrap: pretty; } small, .meta { font-size: var(--fs-meta); color: var(--fg-soft); } .eyebrow { font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-soft); margin: 0 0 var(--s-3); display: inline-block; } a { color: var(--ec-anthracite-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--ec-anthracite); } code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; } /* ========================================================= COMPONENTS — buttons, badges, cards, forms ========================================================= */ /* --- BUTTONS --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 14px 24px; font: inherit; font-weight: 600; font-size: var(--fs-body-sm); letter-spacing: 0; border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer; text-decoration: none; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); white-space: nowrap; } .btn:focus-visible { outline: none; box-shadow: var(--ring-focus); } .btn:active { transform: translateY(1px); } .btn-urgent { background: var(--accent-urgent); color: #fff; box-shadow: var(--shadow-cta); } .btn-urgent:hover { background: var(--accent-urgent-hover); color: #fff; } .btn-primary { background: var(--bg-darkest); color: var(--fg-on-dark); } .btn-primary:hover { background: #000; color: #fff; } .btn-secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--bg-alt); border-color: var(--ec-anthracite-dark); } .btn-ghost { background: transparent; color: var(--fg); padding: 12px 16px; } .btn-ghost:hover { background: var(--bg-alt); } .btn-lg { padding: 18px 32px; font-size: var(--fs-body); } .btn-sm { padding: 10px 16px; font-size: var(--fs-meta); } /* --- BADGES --- */ .badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 12px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--bg); color: var(--fg); } .badge-urgent { background: var(--accent-urgent); color: #fff; border-color: transparent; } .badge-urgent::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.7); animation: pulse 1.6s var(--ease-out) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); } 70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } .badge-soft { background: var(--bg-alt); color: var(--fg); border-color: var(--border); } .badge-dark { background: var(--ec-anthracite-dark); color: var(--fg-on-dark); border-color: transparent; } /* --- CARDS --- */ .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); } .card-feature { padding: var(--s-7); } /* --- FORMS --- */ .field { display: flex; flex-direction: column; gap: var(--s-2); } .field label { font-size: var(--fs-meta); font-weight: 600; color: var(--fg); } .input, .textarea, .select { width: 100%; padding: 12px 14px; font: inherit; font-size: var(--fs-body-sm); color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-md); transition: border-color var(--dur-base), box-shadow var(--dur-base); } .input::placeholder, .textarea::placeholder { color: var(--ec-gray-400); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--ec-anthracite-dark); box-shadow: 0 0 0 3px rgba(63, 66, 72, 0.12); } .textarea { min-height: 120px; resize: vertical; line-height: var(--lh-body); } /* --- LAYOUT HELPERS --- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); } .container-lg { max-width: var(--container-lg); } .container-sm { max-width: var(--container-sm); } .section { padding-block: var(--s-9); } .section-tight { padding-block: var(--s-7); } .section-alt { background: var(--bg-alt); } .section-dark { background: var(--bg-strong); color: var(--fg-on-dark); } .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--fg-on-dark); } .section-dark .lead, .section-dark .eyebrow { color: var(--fg-on-dark-soft); } /* Utility */ .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); } .gap-7 { gap: var(--s-7); }