/* ════════════════════════════════════════════════════════════════ AgroLoupe — Design Tokens Source de vérité des couleurs, typo et variables de marque. Importer ce fichier en premier, puis y référencer var(--al-*). ════════════════════════════════════════════════════════════════ */ :root { /* ── Couleurs de marque ── */ --al-lens: #2a6f91; /* primaire — liens, lentille, header */ --al-lens-deep: #0e3c54; /* canard profond — titres, header alt */ --al-accent: #e8b62e; /* moutarde — CTA, état actif, "sources" */ --al-accent-deep: #c8941f; /* moutarde foncée — texte sur clair, hover */ --al-leaf: #5a9a3f; /* vert — succès, végétal */ /* ── Neutres / surfaces ── */ --al-paper: #f7f4ec; /* fond clair principal */ --al-paper-2: #f1ede4; /* fond alterné */ --al-card: #ffffff; --al-ink: #211d16; /* texte principal */ --al-ink-soft: #6b6354; /* texte secondaire */ --al-ink-mute: #98907e; /* texte tertiaire / légendes */ --al-line: #e7e2d6; /* bordures */ /* ── Sémantique ── */ --al-success: #5a9a3f; --al-warning: #e8b62e; --al-danger: #b3402f; /* ── Typographie ── */ --al-font: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; --al-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* ── Rayons & ombres ── */ --al-radius-sm: 8px; --al-radius: 12px; --al-radius-lg: 16px; --al-shadow-sm: 0 1px 3px rgba(33,29,22,.06); --al-shadow-md: 0 6px 22px rgba(14,60,84,.12); } /* Polices Google : à charger dans le (voir brand/README) */ /* ── Header de référence (barre pleine canard) ──────────────────── */ .al-header { display: flex; align-items: center; gap: 24px; padding: 12px 22px; background: var(--al-lens); } .al-header__tile { width: 40px; height: 40px; border-radius: var(--al-radius); background: #fff; display: grid; place-items: center; flex-shrink: 0; } .al-header__tile img { width: 32px; height: 30px; display: block; } .al-header__wm { font-family: var(--al-font); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; color: #fff; line-height: 1; } .al-header__wm em { color: var(--al-accent); font-style: normal; } .al-header__nav { display: flex; gap: 20px; margin-left: 10px; } .al-header__nav a { font-family: var(--al-font); font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.62); text-decoration: none; position: relative; } .al-header__nav a.is-active { color: #fff; } .al-header__nav a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 3px; background: var(--al-accent); border-radius: 3px; } .al-btn-cta { background: var(--al-accent); color: #3a2c08; font-family: var(--al-font); font-weight: 700; font-size: .82rem; padding: 8px 15px; border-radius: var(--al-radius-sm); border: 0; cursor: pointer; } .al-btn-cta:hover { background: var(--al-accent-deep); color: #fff; }