/* Veloria — chrome (annonce, header, footer) + tokens de marque (2026-09-29, phase 2).
   Système de design d'Irazia, mesuré (IRAZIA_SPEC § 4) : Urbanist 400, noir et blanc, RAYON 0,
   brun #4F3B39 (badge, barre cadeau, barre livraison), beige #F7F1EE (palier sélectionné, encarts),
   gris #F2F2F2 (bloc garantie). cf docs/features/MARQUE_VELORIA.md */
:root[data-brand-shell="veloria"] {
    --ve-ink: #000000;
    --ve-ink-2: #1a1a1a;
    --ve-muted: #555555;
    --ve-bg: #ffffff;
    --ve-brown: #4F3B39;
    --ve-beige: #F7F1EE;
    --ve-grey: #F2F2F2;
    --ve-line: #E0E0E0;
    /* Accent ROUGE CHAUD (phase 3) : urgence, badges, prix barré, barre de progression du tiroir.
       Le CTA reste NOIR (Irazia + patterns FR : aucun des 8 leaders n'a de CTA rouge). */
    --ve-accent: #C8102E;
    --ve-accent-hover: #A50D26;
    --ve-accent-soft: #FBE9EC;
    --ve-red: var(--ve-accent);
    --ve-font: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    /* --- Tiroir panier, checkout et suivi : tokens du skin partagé (aurelia-checkout-skin.css).
       `:root[data-brand-shell="veloria"]` pèse (0,1,1) : il gagne sur le `:root` du skin quel que
       soit l'ordre de chargement (§4.4 bis règle 2 du skill `marque-virtuelle`). */
    --aur-primary: #000000;
    --aur-primary-rgb: 0, 0, 0;
    --aur-primary-hover: #262626;
    --aur-primary-light: #555555;
    --aur-primary-deep: #000000;
    --aur-accent-2: #4F3B39;
    --aur-accent-2-rgb: 79, 59, 57;
    --aur-accent-2-light: #F7F1EE;

    --aur-bg-soft: #F7F1EE;
    --aur-bg-accent: #F2F2F2;
    --aur-border: #E0E0E0;
    --aur-border-soft: #EBEBEB;
    --aur-border-strong: #4F3B39;
    --aur-text: #000000;
    --aur-text-muted: #555555;

    --aur-panel-bg: #ffffff;
    --aur-panel-bg-rgb: 255, 255, 255;
    --aur-tint-1: #F7F1EE;
    --aur-tint-2: #FBF8F6;
    --aur-tint-3: #F7F1EE;
    --aur-tint-4: #FDFBFA;
    --aur-tint-5: #F2F2F2;
    --aur-tint-6: #F7F1EE;

    --aur-urgency-bg-1: #F2F2F2;
    --aur-urgency-bg-2: #F7F1EE;
    --aur-urgency-border: #E0E0E0;
    --aur-urgency-text: #000000;
    --aur-urgency-accent: #C8102E;

    --aur-font: var(--ve-font);
    /* Accent envoyé à Stripe (hex littéral : aucun var() ne résout dans l'iframe Stripe). */
    --ck-stripe-accent: #4F3B39;
}

/* --- Annonce (Irazia : fond noir, 14 px, préfixe gras) ---------------------------------- */
.ve-announce { background: var(--ve-ink); color: #fff; font: 400 14px/1.3 var(--ve-font); overflow: hidden; }
.ve-announce__track { display: flex; gap: 48px; white-space: nowrap; padding: 12px 0; animation: ve-marquee 22s linear infinite; width: max-content; }
.ve-announce__track span b { font-weight: 700; }
@keyframes ve-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ve-announce__track { animation: none; justify-content: center; width: auto; } }

/* --- Header sticky (Irazia : 60 / 68 px, logo centré) ------------------------------------ */
.ve-nav { position: sticky; top: 0; z-index: 50; background: var(--ve-bg); border-bottom: 1px solid var(--ve-line); font-family: var(--ve-font); }
.ve-nav__inner { max-width: 1440px; margin: 0 auto; height: 60px; padding: 0 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ve-nav__menu { display: flex; gap: 22px; font-size: 14px; }
.ve-nav__menu a { color: var(--ve-ink); text-decoration: none; }
.ve-nav__menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.ve-nav__burger { display: none; background: none; border: 0; padding: 8px; color: var(--ve-ink); }
.ve-nav__brand { text-decoration: none; color: var(--ve-ink); justify-self: center; }
.ve-wordmark { display: inline-flex; align-items: center; color: var(--ve-ink); text-decoration: none; font: 600 18px/1 var(--ve-font); letter-spacing: .28em; text-transform: uppercase; }
.ve-logo { display: block; height: 20px; width: auto; }
@media (min-width: 750px) { .ve-logo { height: 24px; } }
.ve-nav__cart { justify-self: end; position: relative; color: var(--ve-ink); display: inline-flex; }
.ve-nav__cart-count { position: absolute; top: -6px; right: -9px; background: var(--ve-ink); color: #fff; border-radius: 999px; font: 600 11px/18px var(--ve-font); min-width: 18px; height: 18px; text-align: center; }
@media (max-width: 749px) {
    .ve-nav__menu { display: none; }
    .ve-nav__burger { display: inline-flex; }
}
@media (min-width: 750px) { .ve-nav__inner { height: 68px; padding: 0 24px; } }

/* --- Footer (Irazia : liens, puis wordmark géant, puis © et paiements) -------------------- */
.ve-footer { background: var(--ve-bg); border-top: 1px solid var(--ve-line); font-family: var(--ve-font); color: var(--ve-ink); }
.ve-footer__inner { max-width: 1440px; margin: 0 auto; padding: 32px 16px 20px; display: grid; gap: 16px; }
.ve-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
.ve-footer a { color: var(--ve-ink); }
.ve-footer__giant { margin: 12px 0; color: var(--ve-ink); }
.ve-footer__giant .ve-logo { width: 100%; height: auto; }
.ve-footer__legal { font-size: 12px; color: var(--ve-muted); margin: 0; }
.ve-paylist { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }