/* ============================================================================ lbodev.com — feuille de style (v0.2.0) Aligné sur le LBO Design System v3.2.0 (CDN assets.lbogroup.lu). - Les TOKENS (couleurs, polices, espacements, rayons, ombres) viennent de `tokens.css` chargé depuis le CDN. On ne redéfinit ici QUE l'accent (rose du pôle Marketing) et les composants propres à lbodev.com. - Accent de référence : rose Marketing #EC4899 (--pole-marketing-digital du DS). ============================================================================ */ /* ─── Thème Marketing : on surcharge l'accent ombrelle (orange) par le rose ── Chargé APRÈS tokens.css → gagne sur le défaut. Complète aussi le thème natif déclenché par (gradient, glow et deep que la règle de pôle du DS ne fixe pas). */ :root { --accent: #EC4899; /* rose Marketing */ --accent-hover: #DB2777; /* pink-600 */ --accent-deep: #BE185D; /* pink-700 */ --accent-soft: #FCE7F3; /* pink-100 */ --accent-glow: #F9A8D4; /* pink-300 */ --gradient-accent: linear-gradient(135deg, #EC4899 0%, #F9A8D4 100%); --gradient-accent-soft: linear-gradient(135deg, #FCE7F3 0%, #FDF2F8 100%); --shadow-accent: 0 4px 14px rgba(236, 72, 153, .30); --shadow-accent-hover: 0 8px 20px rgba(236, 72, 153, .40); /* Largeur de contenu propre au site (le DS expose --container-base = 1200) */ --maxw: var(--container-base, 1200px); } /* ─── Reset léger + fondations typographiques (sur tokens DS) ─────────────── */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base, 1rem); line-height: var(--leading-normal, 1.55); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; } a { color: var(--accent-deep); text-decoration: none; transition: color var(--duration-fast, .15s) var(--ease-standard, ease); } a:hover { color: var(--accent-hover); } /* Anneau de focus clavier visible (a11y). :focus-visible n'apparaît pas au clic souris. */ :where(a, button, summary, .btn, .lang-switch):focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: var(--radius-sm, 8px); } [data-theme="dark"] :where(a, button, summary, .btn, .lang-switch):focus-visible { outline-color: var(--accent-glow); } /* Liens en plein texte distinguables autrement que par la couleur (a11y : link-in-text-block). */ p:not(.breadcrumb) a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-bold, 700); line-height: var(--leading-tight, 1.1); letter-spacing: var(--tracking-tight, -.02em); margin: 0; color: var(--ink); } p { margin: 0; } ::selection { background: var(--accent); color: #fff; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-6, 24px); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .muted { color: var(--ink-soft); } .serif { font-family: var(--font-display); } /* le DS n'a pas de serif : on garde Inter Tight */ .accent { color: var(--accent-deep); } /* ─── Boutons (calqués sur components.css du DS) ──────────────────────────── */ .btn { -webkit-appearance: none; appearance: none; border: 0; margin: 0; /* reset chrome natif