/* ========================================================================== DESIGN SYSTEM — Dr Mahmoud Amine Krimech, Cardiologue à Kénitra Jetons de conception (design tokens). Source unique de vérité. Toute valeur de couleur, taille ou espacement du site vient d'ici. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. COULEURS DE MARQUE Palette issue de l'identité existante du cabinet. Le rouge est un ACCENT, jamais une dominante : sur un site de cardiologie, une surface rouge étendue est perçue comme alarmante. ---------------------------------------------------------------------- */ /* Rouge cardiologie — logo, accents, éléments cœur */ --c-primary: #9C3B30; --c-primary-dark: #7E2E27; /* hover, états actifs */ --c-primary-soft: #F3E3DF; /* fonds légers, badges */ --c-primary-tint: #FAF1EF; /* fond de section très léger */ --c-accent: #B74437; /* CTA : RDV, téléphone */ /* Bleu médical — dominante institutionnelle et rassurante */ --c-secondary: #353A4F; /* header, footer, sections sombres */ --c-secondary-light: #596D8C; /* icônes secondaires, méta */ --c-secondary-deep: #272B3A; /* titres, texte principal */ --c-secondary-soft: #EEF0F4; /* fonds bleutés légers */ /* Beige rosé — rappel de l'illustration médicale d'origine */ --c-sand: #D1B0A5; --c-sand-soft: #F0E4DF; /* ---------------------------------------------------------------------- 2. SURFACES ---------------------------------------------------------------------- */ --c-bg: #F7F7F3; /* fond général, blanc clinique chaud */ --c-bg-alt: #EFF0EA; /* alternance de section */ --c-surface: #FFFFFF; /* cartes, formulaires */ --c-surface-dark: #2E3346; /* cartes sur fond sombre */ /* ---------------------------------------------------------------------- 3. TEXTE (contrastes vérifiés WCAG AA) ---------------------------------------------------------------------- */ --c-text: #272B3A; /* 14.2:1 sur blanc — AAA */ --c-text-2: #626675; /* 5.6:1 sur blanc — AA */ --c-text-3: #8A8E9B; /* méta uniquement, jamais de texte long */ --c-text-inv: #FFFFFF; --c-text-inv-2: #C4C9D6; /* 8.1:1 sur --c-secondary — AAA */ /* ---------------------------------------------------------------------- 4. BORDURES & SÉPARATEURS ---------------------------------------------------------------------- */ --c-border: #E1E2E0; --c-border-strong: #CBCDD2; --c-border-dark: rgba(255, 255, 255, .12); /* ---------------------------------------------------------------------- 5. COULEURS D'ÉTAT ---------------------------------------------------------------------- */ --c-success: #2E7D62; --c-success-soft: #E4F1EC; --c-warning: #C58A28; --c-warning-soft: #FBF1DF; --c-error: #B3261E; --c-error-soft: #FAE7E6; /* Canaux WhatsApp / téléphone (couleurs de service, non négociables) */ --c-whatsapp: #25D366; --c-whatsapp-dark: #1DA851; /* ---------------------------------------------------------------------- 6. TYPOGRAPHIE Une seule famille variable (400→800) : 49 Ko pour tout le site. ---------------------------------------------------------------------- */ --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Échelle fluide — s'adapte de 360px à 1440px sans media query */ --fs-xs: 0.8125rem; /* 13px — méta, légendes */ --fs-sm: 0.875rem; /* 14px — labels */ --fs-base: 1.0625rem; /* 17px — corps de texte */ --fs-md: clamp(1.0625rem, 0.15vw + 1.03rem, 1.125rem); --fs-lg: clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem); --fs-xl: clamp(1.25rem, 0.6vw + 1.11rem, 1.5rem); --fs-h4: clamp(1.25rem, 0.7vw + 1.08rem, 1.5rem); --fs-h3: clamp(1.375rem, 1.1vw + 1.12rem, 1.875rem); --fs-h2: clamp(1.75rem, 2.2vw + 1.24rem, 2.75rem); --fs-h1: clamp(2rem, 3.4vw + 1.28rem, 3.5rem); /* Plafonné à 52px : au-delà, le H1 passe à 4 lignes et repousse le bouton « Prendre rendez-vous » sous la ligne de flottaison. */ --fs-display: clamp(2.125rem, 2.6vw + 1.35rem, 3.25rem); --lh-tight: 1.12; /* grands titres */ --lh-snug: 1.28; /* titres de section */ --lh-normal: 1.5; /* interfaces */ --lh-relaxed: 1.7; /* corps de texte long — confort de lecture */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --ls-tight: -0.02em; /* titres : resserre pour un rendu premium */ --ls-tighter:-0.03em; --ls-wide: 0.02em; --ls-caps: 0.08em; /* petites capitales / eyebrows */ /* ---------------------------------------------------------------------- 7. ESPACEMENTS — base 4px ---------------------------------------------------------------------- */ --s-1: 0.25rem; /* 4px */ --s-2: 0.5rem; /* 8px */ --s-3: 0.75rem; /* 12px */ --s-4: 1rem; /* 16px */ --s-5: 1.25rem; /* 20px */ --s-6: 1.5rem; /* 24px */ --s-8: 2rem; /* 32px */ --s-10: 2.5rem; /* 40px */ --s-12: 3rem; /* 48px */ --s-16: 4rem; /* 64px */ --s-20: 5rem; /* 80px */ --s-24: 6rem; /* 96px */ /* Rythme vertical des sections — fluide */ --section-y: clamp(3.5rem, 6vw, 6.5rem); --section-y-lg: clamp(4.5rem, 8vw, 8rem); /* ---------------------------------------------------------------------- 8. MISE EN PAGE ---------------------------------------------------------------------- */ --container: 1200px; --container-narrow: 780px; /* articles, texte long : ~75 caractères */ --container-wide: 1360px; --gutter: clamp(1.25rem, 4vw, 2.5rem); /* ---------------------------------------------------------------------- 9. RAYONS ---------------------------------------------------------------------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 30px; --r-full: 999px; /* ---------------------------------------------------------------------- 10. OMBRES — très douces, jamais de noir pur ---------------------------------------------------------------------- */ --sh-xs: 0 1px 2px rgba(39, 43, 58, .05); --sh-sm: 0 2px 8px rgba(39, 43, 58, .06); --sh-md: 0 8px 24px rgba(39, 43, 58, .08); --sh-lg: 0 16px 48px rgba(39, 43, 58, .10); --sh-primary: 0 8px 24px rgba(156, 59, 48, .22); /* ---------------------------------------------------------------------- 11. TRANSITIONS ---------------------------------------------------------------------- */ --t-fast: 140ms cubic-bezier(.4, 0, .2, 1); --t-base: 240ms cubic-bezier(.4, 0, .2, 1); --t-slow: 420ms cubic-bezier(.16, 1, .3, 1); /* ---------------------------------------------------------------------- 12. PROFONDEUR (z-index) ---------------------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; /* Hauteur du header — utilisée pour le scroll-padding des ancres */ --header-h: 76px; /* ====================================================================== 13. COUCHE PREMIUM — profondeur, matière, mouvement Ajoutée par-dessus la base. Aucun jeton existant n'est modifié. ====================================================================== */ /* --- Dégradés ------------------------------------------------------- */ --g-primary: linear-gradient(135deg, #B74437 0%, #9C3B30 55%, #7E2E27 100%); --g-secondary: linear-gradient(155deg, #3D4459 0%, #353A4F 45%, #272B3A 100%); --g-sand: linear-gradient(135deg, #F7EDE9 0%, #F0E0DA 100%); --g-surface: linear-gradient(180deg, #FFFFFF 0%, #FCFBF9 100%); /* Halo de fond du hero — trois foyers colorés très diffus */ --g-mesh: radial-gradient(1000px 620px at 84% -6%, rgba(183, 68, 55, .15) 0%, transparent 58%), radial-gradient(820px 560px at 4% 16%, rgba(209, 176, 165, .26) 0%, transparent 62%), radial-gradient(900px 700px at 46% 106%, rgba(209, 176, 165, .20) 0%, transparent 66%), radial-gradient(620px 460px at 22% 78%, rgba(89, 109, 140, .07) 0%, transparent 64%); /* Filet lumineux en haut des cartes et du header */ --g-hairline: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); --g-hairline-dark: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); /* Bordure dégradée (cartes au survol) */ --g-border: linear-gradient(140deg, rgba(183,68,55,.55), rgba(209,176,165,.25) 45%, rgba(89,109,140,.4)); /* Texte en dégradé, réservé aux mots-clés des grands titres */ --g-text: linear-gradient(115deg, #B74437 0%, #9C3B30 50%, #7E2E27 100%); /* --- Verre (glassmorphism sobre) ------------------------------------ */ --glass-bg: rgba(255, 255, 255, .72); --glass-bg-strong: rgba(255, 255, 255, .86); --glass-bg-dark: rgba(39, 43, 58, .58); --glass-border: rgba(255, 255, 255, .55); --glass-border-dark: rgba(255, 255, 255, .10); --glass-blur: saturate(180%) blur(18px); --glass-blur-sm: saturate(160%) blur(10px); /* --- Élévation : ombres superposées, jamais de noir pur ------------- */ --e-1: 0 1px 2px rgba(39,43,58,.04), 0 2px 6px rgba(39,43,58,.04); --e-2: 0 2px 4px rgba(39,43,58,.04), 0 6px 14px rgba(39,43,58,.05), 0 1px 0 rgba(255,255,255,.7) inset; --e-3: 0 4px 8px rgba(39,43,58,.05), 0 14px 32px rgba(39,43,58,.07), 0 1px 0 rgba(255,255,255,.8) inset; --e-4: 0 8px 16px rgba(39,43,58,.06), 0 26px 56px rgba(39,43,58,.10), 0 1px 0 rgba(255,255,255,.9) inset; --e-glow: 0 10px 30px rgba(156, 59, 48, .26), 0 2px 6px rgba(156, 59, 48, .18); /* --- Courbes d'accélération ----------------------------------------- */ --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-out-quart: cubic-bezier(.25, 1, .5, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* --- Durées ---------------------------------------------------------- */ --d-xs: 120ms; --d-sm: 220ms; --d-md: 420ms; --d-lg: 700ms; --d-xl: 1100ms; /* Décalage entre deux éléments d'une même séquence d'apparition */ --stagger: 70ms; } /* Respect de la préférence système « moins d'animations » */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; } }