/* ================================================================
DESIGN SYSTEM — Serrurerie du Mont-Blanc
/css/style.css — v1.0.0 — 2026-03-18
================================================================
Complète Tailwind CDN : tokens, animations, composants critiques.
Chargé en AVANT Tailwind pour éviter FOUC.
================================================================ */
/* ── 1. Tokens Design System ─────────────────────────────────── */
:root {
/* ── Tokens principaux ── */
--navy: #1a365d;
--navy-dark: #0f2240;
--navy-mid: #2a4a7f;
--navy-light: #e8eef5;
--amber: #ffb900;
--amber-dark: #e6a700;
--amber-light: #fff8e1;
--white: #ffffff;
--text: #1e293b;
--muted: #64748b;
--border: #e2e8f0;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-full: 999px;
--shadow-card: 0 4px 24px rgba(26, 54, 93, 0.09);
--shadow-nav: 0 2px 16px rgba(26, 54, 93, 0.12);
--shadow-cta: 0 8px 32px rgba(255, 185, 0, 0.40);
--font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
/* ── Aliases charte graphique ── */
--primary-blue: #1a365d;
--accent-yellow: #ffb900;
--text-dark: #2d3748;
--light-bg: #f7fafc;
}
/* ── 2. Reset minimal ────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
font-size: 16px;
}
body {
margin: 0;
font-family: var(--font-sans);
color: var(--text);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
/* ── 3. Bouton CTA — animation pulse ─────────────────────────── */
@keyframes pulse-cta {
0%, 100% { box-shadow: 0 8px 32px rgba(255,185,0,.40); }
50% { box-shadow: 0 8px 48px rgba(255,185,0,.70),
0 0 0 10px rgba(255,185,0,.10); }
}
.btn-pulse {
animation: pulse-cta 2.6s ease-in-out infinite;
}
/* Pause au survol — bonne pratique UX */
.btn-pulse:hover,
.btn-pulse:focus-visible {
animation-play-state: paused;
}
/* ── 4. Sticky CTA Mobile ────────────────────────────────────── */
/*
Rendu par le HTML inline ()
Ce bloc CSS est un filet de sécurité si Tailwind CDN tarde à charger.
*/
#sticky-cta-fallback {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
display: flex;
background: var(--amber);
padding: 14px 20px;
padding-bottom: calc(14px + env(safe-area-inset-bottom));
align-items: center;
justify-content: center;
box-shadow: 0 -4px 20px rgba(0, 0, 0, .20);
}
#sticky-cta-fallback a {
display: flex;
align-items: center;
gap: 12px;
color: var(--navy);
font-weight: 900;
font-size: 1.05rem;
text-decoration: none;
}
@media (min-width: 768px) {
#sticky-cta-fallback {
display: none;
}
}
/* ── 5. Hero ─────────────────────────────────────────────────── */
/*
CSS critique servi inline dans