/* Template "bde" — socle (header, footer, tokens). THEME PAR VARIABLES : chaque asso a sa couleur. Les valeurs ci-dessous sont les defauts de la maquette ; a terme la config boutique les surchargera via le style inline du (hook `theme_vars` de bde/base.html.twig). */ :root { --bde-primary: #831843; --bde-secondary: #0ea5e9; --bde-secondary-ink: #075985; --bde-radius: 16px; --bde-paper: #faf8f6; --bde-ink: #201a1d; --bde-muted: #8a8078; --bde-body: #524a4e; --bde-line: #eae5e2; --bde-line-strong: #e5dfdb; --bde-footer-bg: #1a1417; --bde-footer-ink: #d8d0d3; --bde-font-display: 'Big Shoulders Display', sans-serif; --bde-font-body: 'Hanken Grotesk', system-ui, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.bde { font-family: var(--bde-font-body); color: var(--bde-ink); background: var(--bde-paper); -webkit-font-smoothing: antialiased; } /* :where(...) sur TOUT le selecteur = specificite nulle : la couleur par defaut des liens n'ecrase jamais celle d'un composant (.bde-cta, .bde-btn... sont blancs sur fond primaire). */ :where(body.bde a) { color: var(--bde-primary); text-decoration: none; } :where(body.bde a:hover) { color: var(--bde-secondary); } body.bde ::selection { background: var(--bde-secondary); color: #fff; } body.bde img { max-width: 100%; } .bde-wrap { max-width: 1220px; margin: 0 auto; padding-left: clamp(18px, 5vw, 56px); padding-right: clamp(18px, 5vw, 56px); } @keyframes bde-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* Badge d'etat (campagne ouverte...) — partage home / fiche / auth. */ .bde-status { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; background: color-mix(in srgb, var(--bde-secondary) 12%, transparent); color: var(--bde-secondary-ink); font-weight: 700; font-size: 13.5px; letter-spacing: .3px; text-transform: uppercase; } .bde-status i { width: 9px; height: 9px; border-radius: 999px; background: var(--bde-secondary); animation: bde-pulse 1.8s ease-in-out infinite; } /* Badge admin (operateur en impersonation) — dans le header. */ .bde-admin-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--bde-primary); font-weight: 700; font-size: 13px; } .bde-admin-badge svg { width: 15px; height: 15px; } /* ---- Header ---- */ .bde-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bde-paper) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bde-line); } .bde-header .bde-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; } .bde-logo { display: flex; align-items: center; gap: 11px; margin-right: auto; color: var(--bde-ink); } .bde-logo:hover { color: var(--bde-ink); } .bde-logo-mark { width: 42px; height: 42px; border-radius: 11px; background: var(--bde-primary); color: #fff; display: grid; place-items: center; font-family: var(--bde-font-display); font-weight: 900; font-size: 15px; letter-spacing: .5px; text-transform: uppercase; } .bde-logo-name { display: flex; flex-direction: column; line-height: 1; } .bde-logo-name b { font-family: var(--bde-font-display); font-weight: 800; font-size: 21px; letter-spacing: .3px; text-transform: uppercase; } .bde-logo-name small { font-size: 11px; color: var(--bde-muted); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; } .bde-nav { display: flex; align-items: center; gap: 22px; font-weight: 600; font-size: 15px; flex-wrap: wrap; } .bde-nav a { color: #6b6169; } .bde-nav a.active, .bde-nav a:hover { color: var(--bde-ink); } .bde-cart { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1.5px solid var(--bde-line-strong); border-radius: 999px; color: var(--bde-ink); font-weight: 600; font-size: 14px; transition: border-color .15s; } .bde-cart:hover { border-color: var(--bde-primary); color: var(--bde-ink); } .bde-cart .count { background: var(--bde-primary); color: #fff; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; } .bde-cart svg, .bde-nav svg { width: 18px; height: 18px; } /* ---- Flashes ---- */ .bde-flashes { max-width: 1220px; margin: 14px auto 0; padding: 0 clamp(18px, 5vw, 56px); } .bde-flash { padding: 12px 16px; border-radius: 12px; font-weight: 600; font-size: 14.5px; margin-bottom: 8px; } .bde-flash-success { background: #e7f6ec; color: #14532d; border: 1px solid #bbe6c8; } .bde-flash-error { background: #fdeaea; color: #7f1d1d; border: 1px solid #f5c6c6; } /* ---- Footer ---- */ .bde-footer { background: var(--bde-footer-bg); color: var(--bde-footer-ink); margin-top: clamp(40px, 6vw, 72px); } .bde-footer .bde-wrap { display: flex; gap: 40px; flex-wrap: wrap; padding-top: clamp(40px, 5vw, 64px); padding-bottom: 28px; } .bde-footer a { color: var(--bde-footer-ink); } .bde-footer a:hover { color: #fff; } .bde-f-brand { flex: 1 1 260px; } .bde-f-brand .bde-logo-mark { width: 40px; height: 40px; font-size: 14px; } .bde-f-brand-row { display: flex; align-items: center; gap: 11px; } .bde-f-brand-row b { font-family: var(--bde-font-display); font-weight: 800; font-size: 21px; color: #fff; letter-spacing: .3px; text-transform: uppercase; } .bde-f-brand p { margin: 18px 0 0; font-size: 14.5px; line-height: 1.6; color: #a89ea3; max-width: 26em; } .bde-f-col { flex: 1 1 180px; } .bde-f-col h4 { margin: 0 0 14px; font-family: var(--bde-font-display); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; } .bde-f-col a { display: block; font-size: 14.5px; margin-bottom: 10px; } .bde-f-bottom { border-top: 1px solid rgba(255,255,255,.1); } .bde-f-bottom .bde-wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; font-size: 13px; color: #837a7e; } .bde-f-bottom strong { color: #a89ea3; font-weight: 600; } /* ---- Boutons generiques ---- */ .bde-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--bde-primary); color: #fff; padding: 17px 26px; border-radius: var(--bde-radius); font-weight: 700; font-size: 17px; box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--bde-primary) 55%, transparent); transition: transform .15s, box-shadow .15s; } .bde-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--bde-primary) 60%, transparent); } .bde-cta svg { width: 20px; height: 20px; } .bde-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--bde-primary); color: #fff; padding: 14px 22px; border-radius: var(--bde-radius); font-weight: 700; font-size: 15.5px; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s; } .bde-btn:hover { color: #fff; filter: brightness(1.08); }