/* Brand logo · votre-duerp.fr — Direction "Masthead institutionnel"
Source de vérité : design_handoff_logo (Claude Design)
Réutilisé dans : nav landing, footer, hero, en-têtes templates */
/* Polices : à charger côté HTML avec ce :
*/
/* Masthead complet (label haut + lockup) */
.brand-logo{
display:inline-flex;flex-direction:column;align-items:flex-start;
gap:.45em;line-height:1;color:#0a0a0b;
}
.brand-logo .bl-label{
font-family:"Geist",system-ui,sans-serif;font-size:.46em;font-weight:600;
text-transform:uppercase;letter-spacing:.28em;color:#6c6c70;
padding-left:.05em;white-space:nowrap;
}
.brand-logo .bl-row{display:inline-flex;align-items:baseline;gap:.06em;line-height:.85}
.brand-logo .bl-prefix{
font-family:"Bricolage Grotesque","Arial Black",sans-serif;
font-weight:500;font-size:1.6em;color:#0a0a0b;letter-spacing:-.03em;
margin-right:.04em;
}
.brand-logo .bl-main{
font-family:"Bricolage Grotesque","Arial Black",sans-serif;
font-weight:800;font-size:2.4em;color:#0a0a0b;letter-spacing:-.05em;
}
.brand-logo .bl-main .u{color:#1e63ff;font-style:italic;font-weight:700}
.brand-logo .bl-tld{
font-family:"Bricolage Grotesque",sans-serif;font-size:.62em;font-weight:700;
color:#1e63ff;letter-spacing:-.02em;
transform:translateY(-.5em);display:inline-block;
}
/* Compact (1 ligne, sans label) — pour nav, footer, sidebar
Taille réduite pour que "votre-DUERP.fr" rentre dans une sidebar 220px. */
.brand-logo.compact{flex-direction:row;align-items:baseline;gap:.06em;white-space:nowrap}
.brand-logo.compact .bl-label{display:none}
.brand-logo.compact .bl-prefix{font-size:.9em;font-weight:500;letter-spacing:-.02em}
.brand-logo.compact .bl-main{font-size:1.25em}
.brand-logo.compact .bl-tld{font-size:.75em;transform:translateY(-.45em)}
/* Variantes couleurs — spécificité renforcée pour éviter qu'un style
global "color:#0a0a0b" ne reprenne le dessus (cas du cache navigateur
ou d'un override CSS quelque part dans la cascade). */
.brand-logo.on-dark .bl-label,
.brand-logo.compact.on-dark .bl-label{color:rgba(255,255,255,.55) !important}
.brand-logo.on-dark .bl-prefix,
.brand-logo.compact.on-dark .bl-prefix{color:rgba(255,255,255,.92) !important}
.brand-logo.on-dark .bl-main,
.brand-logo.compact.on-dark .bl-main{color:#fff !important}
.brand-logo.on-dark .bl-main .u,
.brand-logo.compact.on-dark .bl-main .u{color:#7fb1ff !important}
.brand-logo.on-dark .bl-tld,
.brand-logo.compact.on-dark .bl-tld{color:#7fb1ff !important}
.brand-logo.mono .bl-prefix{color:#0a0a0b}
.brand-logo.mono .bl-main .u{color:#0a0a0b;font-style:normal;font-weight:800}
.brand-logo.mono .bl-tld{color:#0a0a0b}
/* Brand mark — "VD" empilé (favicon, tile, app icon) */
.brand-mark{
position:relative;display:grid;place-items:center;
background:#fafaf7;border-radius:0;
width:100%;height:100%;overflow:hidden;
}
.brand-mark .vd{display:flex;flex-direction:column;align-items:center;gap:.04em;line-height:.85}
.brand-mark .vd .v{
font-family:"Instrument Serif","Georgia",serif;font-style:italic;font-weight:400;
color:#0a0a0b;letter-spacing:-.04em;font-size:.32em;
}
.brand-mark .vd .d{
font-family:"Bricolage Grotesque","Arial Black",sans-serif;font-weight:800;
color:#0a0a0b;letter-spacing:-.06em;font-size:.82em;
}
.brand-mark::after{
content:"";position:absolute;left:18%;right:18%;bottom:14%;
height:3px;background:#1e63ff;border-radius:99px;
}
/* Mark-as-tile (fond noir) */
.brand-mark.tile{background:#0a0a0b;border-radius:8px}
.brand-mark.tile .vd .v{color:rgba(255,255,255,.7)}
.brand-mark.tile .vd .d{color:#fff}
.brand-mark.tile::after{background:#1e63ff;left:22%;right:22%;bottom:18%;height:2px}