/* 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); } /* Surtitre de section — partage home / campagne. */ .bde-eyebrow { margin: 0; font-family: var(--bde-font-display); font-weight: 700; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--bde-secondary); } @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-nav a.bde-nav-logout { color: var(--bde-muted); font-weight: 500; } .bde-nav a.bde-nav-logout: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 ---- */ /* Snackbar (toasts) — partial partage standard/_flashes.html.twig, habille BDE. */ .toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; } .toast { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; background: #fff; border: 1px solid var(--bde-line); box-shadow: 0 16px 40px -16px rgba(32, 26, 29, .3); color: var(--bde-ink); pointer-events: auto; } .toast-ico { display: grid; place-items: center; flex: none; } .toast-ico svg { width: 18px; height: 18px; } .toast-msg { flex: 1; line-height: 1.35; } .toast-x { flex: none; background: none; border: none; cursor: pointer; color: var(--bde-muted); display: grid; place-items: center; padding: 2px; border-radius: 6px; transition: .2s; } .toast-x:hover { color: var(--bde-ink); } .toast-x svg { width: 15px; height: 15px; } .toast-success .toast-ico { color: #16a34a; } .toast-error .toast-ico { color: #dc2626; } @media (max-width: 560px) { .toast-stack { left: 16px; right: 16px; bottom: 16px; max-width: none; } } /* ---- 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); } /* --- Financement participatif : mentions sur le parcours d'achat ---------- */ .cf-product-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 4px; } .cf-product-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--bde-secondary); color: #fff; font-size: 13px; font-weight: 700; } .cf-product-tag svg { width: 16px; height: 16px; } /* Le badge mene a la campagne : la regle :where(a) ne colorerait pas assez fort pour battre le fond secondaire, on force le blanc dans les deux etats. */ .cf-product-tag, .cf-product-tag:hover { color: #fff; text-decoration: none; } .cf-product-tag:hover { filter: brightness(1.08); } .cf-product-tag:focus-visible { outline: 2px solid var(--bde-ink); outline-offset: 2px; } .cf-product-ship { font-size: 13px; color: var(--bde-body); } .cf-line-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: color-mix(in oklab, var(--bde-secondary) 14%, #fff); color: var(--bde-secondary-ink); font-size: 12px; font-weight: 700; } .cf-line-tag svg { width: 13px; height: 13px; } .cf-line-tag--inline { margin-top: 0; margin-left: 6px; padding: 1px 8px; font-size: 11.5px; vertical-align: middle; } /* Popup echantillon gratuit (habillage BDE) */ .fs-modal { position: fixed; inset: 0; margin: auto; height: fit-content; border: none; border-radius: var(--bde-radius); padding: 28px 30px; max-width: 460px; width: calc(100% - 32px); box-shadow: 0 30px 70px -24px rgba(32,26,29,.5); color: var(--bde-ink); text-align: center; } .fs-modal::backdrop { background: rgba(20, 12, 20, .55); } .fs-badge { display: block; background: var(--bde-primary); color: #fff; font-family: var(--bde-font-display, inherit); font-weight: 900; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; } .fs-lead { font-size: 16px; margin: 0 0 14px; line-height: 1.5; } .fs-lead b { font-size: 18px; color: var(--bde-ink); } .fs-sub { font-size: 13.5px; color: var(--bde-muted); } .fs-how { font-size: 14px; color: var(--bde-muted); margin: 0 0 22px; line-height: 1.55; } .fs-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 15px 18px; border: none; border-radius: calc(var(--bde-radius) - 2px); background: var(--bde-primary); color: #fff; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--bde-primary) 55%, transparent); } .fs-cta:hover { color: #fff; filter: brightness(1.08); } a.fs-cta { text-decoration: none; } .fs-alt { margin: 10px 0 0; font-size: 13px; } .fs-alt a { color: inherit; text-decoration: underline; }