/* ===========================================================
   POLICES EMBARQUÉES
   Servies par le module, jamais depuis un serveur tiers : une
   boutique européenne n'a ainsi aucun appel externe à déclarer,
   et l'affichage reste identique derrière un pare-feu.

   Le navigateur ne télécharge que les familles réellement
   affichées — un seul thème étant actif à la fois, il n'en
   récupère qu'une.

   font-display: swap — le texte reste lisible pendant le
   chargement plutôt que de rester invisible.

   Licence SIL Open Font 1.1, voir views/fonts/LICENSE-OFL.txt
   =========================================================== */

@font-face { font-family: "EMP Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/archivo-v25-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "EMP Archivo"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/archivo-v25-latin-500.woff2") format("woff2"); }
@font-face { font-family: "EMP Archivo"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/archivo-v25-latin-600.woff2") format("woff2"); }
@font-face { font-family: "EMP Archivo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/archivo-v25-latin-700.woff2") format("woff2"); }
@font-face { font-family: "EMP Archivo"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/archivo-v25-latin-800.woff2") format("woff2"); }






/**
 * Easy MultiPromo Pro — nudge.css
 * Cart nudge styles — front-office
 * FC Tiger
 */

:root {
  --emp-bg:     #18181b;
  --emp-text:   #ffffff;
  --emp-accent: #f97316;
  --emp-radius: 12px;
}

/* ── WRAP ─────────────────────────────────────────────── */

@font-face { font-family: "EMP Caveat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/caveat-v23-latin-500.woff2") format("woff2"); }
@font-face { font-family: "EMP Caveat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/caveat-v23-latin-600.woff2") format("woff2"); }

@font-face { font-family: "EMP Cormorant"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/cormorant-garamond-v21-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "EMP Cormorant"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cormorant-garamond-v21-latin-600.woff2") format("woff2"); }

@font-face { font-family: "EMP Fraunces"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/fraunces-v38-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "EMP Fraunces"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/fraunces-v38-latin-700.woff2") format("woff2"); }

@font-face { font-family: "EMP Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/jetbrains-mono-v24-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "EMP Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/jetbrains-mono-v24-latin-500.woff2") format("woff2"); }
@font-face { font-family: "EMP Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/jetbrains-mono-v24-latin-700.woff2") format("woff2"); }

@font-face { font-family: "EMP Outfit"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/outfit-v15-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "EMP Outfit"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/outfit-v15-latin-800.woff2") format("woff2"); }

/* ===========================================================
   LE BANDEAU
   Une seule mise en page pour tout le module : la vitrine qui
   liste les promotions et le conseil d'Émilie partagent le
   même bloc. Les habillages décoratifs des versions
   précédentes — cadres dorés, thèmes sectoriels, panneaux
   latéraux de 360 px — ont été retirés : ils compressaient le
   texte en colonne et rendaient l'ensemble illisible.

   Toutes les dimensions sont exprimées en em. La taille du
   texte pilote donc le rembourrage, les arrondis et la
   hauteur, et le mobile n'a besoin d'aucune règle séparée.
   =========================================================== */

.emp-bandeau {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 999999;
  display: flex;
  padding: 0 12px;
  pointer-events: none;

  --emp-fond:    #10151f;
  --emp-encre:   #ffffff;
  --emp-accent2: #FFB020;
  --emp-arrondi: 1.4em;

  font-family: var(--emp-police, "EMP Archivo"), system-ui, sans-serif;
  font-size: var(--emp-taille, 16px);
}

/* — Alignement horizontal : le bandeau ne fait pas toute la largeur,
     il peut donc se caler à gauche, au centre ou à droite. — */
.emp-bandeau.emp-a-gauche { justify-content: flex-start; }
.emp-bandeau.emp-a-centre { justify-content: center; }
.emp-bandeau.emp-a-droite { justify-content: flex-end; }

/* — En haut : le bandeau descend — */
.emp-bandeau.emp-haut {
  top: 0;
  transform: translateY(-110%);
  transition: transform .42s cubic-bezier(.22, 1, .32, 1);
}
.emp-bandeau.emp-haut.emp-ouvert { transform: translateY(0); }

/* — En bas : le bandeau monte, par-dessus la barre de panier
     des modules de commande rapide, qui s'efface d'elle-même — */
.emp-bandeau.emp-bas {
  bottom: 0;
  transform: translateY(110%);
  transition: transform .42s cubic-bezier(.22, 1, .32, 1);
}
.emp-bandeau.emp-bas.emp-ouvert { transform: translateY(0); }

.emp-bandeau-inner {
  pointer-events: all;
  position: relative;
  width: 100%;
  max-width: 760px;
  padding: 1.1em 3em 1.1em 1.5em;
  background: var(--emp-fond);
  color: var(--emp-encre);
  line-height: 1.4;
  box-shadow: 0 .6em 1.8em rgba(6, 10, 18, .3);
}
.emp-haut .emp-bandeau-inner { border-radius: 0 0 var(--emp-arrondi) var(--emp-arrondi); }
.emp-bas  .emp-bandeau-inner { border-radius: var(--emp-arrondi) var(--emp-arrondi) 0 0; }

/* Croix : le visiteur doit pouvoir couper le bandeau tout de suite. */
.emp-bandeau-close {
  position: absolute;
  z-index: 2;
  top: .55em;
  right: .7em;
  width: 1.7em;
  height: 1.7em;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: currentColor;
  font-size: .9em;
  line-height: 1;
  cursor: pointer;
  opacity: .65;
}
.emp-bandeau-close:hover { opacity: 1; }

/* — Contenu — */
.emp-ligne {
  display: flex;
  align-items: baseline;
  gap: .8em;
}
.emp-ligne + .emp-ligne { margin-top: .5em; }
.emp-texte { flex: 1; min-width: 0; font-size: .95em; font-weight: 400; }

/* Toute la hiérarchie tient dans ces deux graisses : ce qu'il reste
   à ajouter, puis ce que ça rapporte. Aucun décor n'est nécessaire. */
.emp-b { font-weight: 800; }
.emp-g { font-weight: 700; color: var(--emp-accent2); white-space: nowrap; }

.emp-puce {
  flex-shrink: 0;
  font-weight: 800;
  font-size: 1.1em;
  color: var(--emp-accent2);
}

/* — Signature de la conseillère — */
.emp-titre {
  text-align: center;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: .55em;
}

.emp-signature {
  display: flex;
  align-items: center;
  gap: .55em;
  margin-bottom: .4em;
}
.emp-signature-nom {
  font-size: var(--emp-nom, 11px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}
/* Taille fixe : une photo qui suivrait la taille du texte
   déséquilibrerait le bandeau. */
.emp-signature-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .12);
}
.emp-signature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Petit reflet d'émotion — un sourire qui respire légèrement, pour que
   le bandeau ait l'air de "dire" quelque chose plutôt que de l'afficher.
   Posé dans une petite marge à gauche du nom, en plus gros, plutôt
   qu'empilé au-dessus (ça prenait trop de hauteur). */
.emp-emoji-anim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  flex-shrink: 0;
  font-size: 1.9em;
  line-height: 1;
  animation: emp-emoji-respire 2.4s ease-in-out infinite;
  transform-origin: 70% 70%;
}
@keyframes emp-emoji-respire {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-2px) rotate(-6deg); }
  50%      { transform: translateY(0) rotate(0deg); }
  75%      { transform: translateY(-1px) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .emp-emoji-anim { animation: none; }
}

/* ===========================================================
   LES QUATRE DESIGNS
   La couleur de fond reste réglable par le commerçant ; ces
   règles fixent la forme, le contraste et l'accent.
   =========================================================== */

.emp-d-moderne {
  --emp-fond: #10151f;
  --emp-encre: #ffffff;
  --emp-accent2: #FFB020;
}

.emp-d-epure {
  --emp-fond: rgba(255, 255, 255, .9);
  --emp-encre: #14161a;
  --emp-accent2: #0071e3;
  --emp-arrondi: 1.8em;
}
.emp-d-epure .emp-bandeau-inner {
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, .07);
  box-shadow: 0 .5em 1.4em rgba(0, 0, 0, .1);
  text-align: center;
  padding-left: 3em;
}
.emp-d-epure .emp-ligne { justify-content: center; }
.emp-d-epure .emp-signature { justify-content: center; }
.emp-d-epure .emp-bandeau-close { background: rgba(0, 0, 0, .07); }

.emp-d-signature {
  --emp-fond: #0E1B33;
  --emp-encre: #F2F6FF;
  --emp-accent2: #F5820A;
}
.emp-haut.emp-d-signature .emp-bandeau-inner { border-bottom: 3px solid var(--emp-accent2); }
.emp-bas.emp-d-signature  .emp-bandeau-inner { border-top: 3px solid var(--emp-accent2); }

.emp-d-sobre {
  --emp-fond: #ffffff;
  --emp-encre: #14161a;
  --emp-accent2: #C4432B;
  --emp-arrondi: .9em;
}
.emp-d-sobre .emp-bandeau-inner {
  border: 1px solid #e6eaf0;
  box-shadow: 0 .35em 1em rgba(15, 23, 42, .08);
}
.emp-d-sobre .emp-texte { font-size: .9em; }
.emp-d-sobre .emp-bandeau-close { background: rgba(0, 0, 0, .06); }

/* ===========================================================
   POLICES AU CHOIX
   =========================================================== */
.emp-p-archivo   { --emp-police: "EMP Archivo"; }
.emp-p-caveat    { --emp-police: "EMP Caveat"; }
.emp-p-cormorant { --emp-police: "EMP Cormorant"; }
.emp-p-fraunces  { --emp-police: "EMP Fraunces"; }
.emp-p-mono      { --emp-police: "EMP Mono"; }
.emp-p-outfit    { --emp-police: "EMP Outfit"; }

/* Les manuscrites et les serifs demandent un peu plus de corps
   pour rester lisibles à taille égale. */
.emp-p-caveat    .emp-texte { font-size: 1.3em; }
.emp-p-cormorant .emp-texte { font-size: 1.12em; }
.emp-p-fraunces  .emp-texte { font-size: 1.02em; }

@media (max-width: 640px) {
  .emp-bandeau-inner { padding: .9em 2.8em .9em 1.1em; }
}

@media (prefers-reduced-motion: reduce) {
  .emp-bandeau { transition: none; }
}

/* ===========================================================
   EXTENSION "JE VEUX COMMANDER" — vitrine uniquement
   Réutilise les variables de l'habillage choisi (--emp-fond,
   --emp-encre, --emp-accent2) : aucune couleur propre, elle
   suit automatiquement le design retenu pour le bandeau.
   =========================================================== */

/* — Mode catégories : titre entre deux traits, boutons en dessous — */
.emp-appel-traits {
  display: flex;
  align-items: center;
  gap: .8em;
  min-height: 2.6em;
  cursor: default;
  margin-top: .3em;
}
.emp-trait { flex: 1; height: 1px; background: currentColor; opacity: .25; }
.emp-appel-titre { font-size: 1em; font-weight: 800; white-space: nowrap; }

.emp-categories {
  display: flex;
  flex-wrap: wrap;
  gap: .6em;
  margin-top: .4em;
}
.emp-cat-btn {
  min-height: 2.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.15em;
  font-size: .88em;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  /* --emp-om-text / --emp-om-bg sont posées en inline par le bandeau
     quand le commerçant a choisi des couleurs ; sinon on garde le
     rendu d'origine. */
  color: var(--emp-om-text, var(--emp-encre));
  background: var(--emp-om-bg, color-mix(in srgb, var(--emp-encre) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--emp-encre) 16%, transparent);
  -webkit-tap-highlight-color: transparent;
}
.emp-cat-btn:active { transform: scale(.96); }

/* — Mode bouton unique : quatre traitements — */
.emp-zone-appel-bouton { margin-top: .3em; }

.emp-appel-bouton {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  font-weight: 800;
}
.emp-appel-bouton:active { transform: scale(.98); }

/* 1 · Traits — reprend exactement l'apparence de emp-appel-traits,
   simplement rendu cliquable. */
.emp-appel-bouton.emp-appel-traits {
  display: flex;
  align-items: center;
  gap: .8em;
  min-height: 2.75em;
  color: var(--emp-encre);
}

/* 2 · Plein, pleine largeur — le plus visible */
.emp-appel-bouton.emp-appel-plein {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 3em;
  border-radius: .8em;
  font-size: 1.02em;
  background: var(--emp-accent2);
  color: var(--emp-fond);
}

/* 3 · Pilule centrée — le compromis par défaut */
.emp-zone-appel-bouton:has(.emp-appel-pilule) { display: flex; justify-content: center; }
.emp-appel-bouton.emp-appel-pilule {
  display: inline-flex;
  align-items: center;
  min-height: 2.9em;
  padding: 0 1.6em;
  border-radius: 999px;
  font-size: .95em;
  background: var(--emp-accent2);
  color: var(--emp-fond);
}

/* 4 · Contour — le plus discret */
.emp-zone-appel-bouton:has(.emp-appel-contour) { display: flex; justify-content: center; }
.emp-appel-bouton.emp-appel-contour {
  display: inline-flex;
  align-items: center;
  min-height: 2.75em;
  padding: 0 1.5em;
  border-radius: 999px;
  border: 1.5px solid var(--emp-accent2);
  color: var(--emp-accent2);
  background: transparent;
}

/* ═══════════════════════════════════════════════════════
   PRODUIT OFFERT AU CHOIX DU CLIENT

   Fond noir opaque, pleine page. Aucune croix, aucune sortie
   possible : la seule action est de choisir un produit.

   Comme le bandeau, tout est en em — la taille du texte
   pilote les rembourrages, les arrondis et les hauteurs, donc
   le mobile n'a besoin d'aucune règle séparée. Les cibles
   tactiles ne descendent jamais sous 44 px.
═══════════════════════════════════════════════════════ */

.emp-gift-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25em;
  overflow-y: auto;
  font-family: inherit;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

.emp-gift-fenetre {
  width: 100%;
  max-width: 34em;
  text-align: center;
  color: #fff;
}

.emp-gift-titre {
  font-size: 1.5em;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: .4em;
}

.emp-gift-message {
  font-size: 1em;
  line-height: 1.45;
  opacity: .85;
  margin-bottom: 1.5em;
}

.emp-gift-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr));
  gap: .75em;
}

.emp-gift-carte {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06);
  border-radius: .9em;
  padding: .9em .6em;
  min-height: 44px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  font-size: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55em;
  transition: border-color .15s, background .15s, transform .1s;
}

.emp-gift-carte:hover,
.emp-gift-carte:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, .14);
  outline: none;
}

.emp-gift-carte:active { transform: scale(.97); }

.emp-gift-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: .6em;
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
}

.emp-gift-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.emp-gift-nom {
  font-size: .9em;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.emp-gift-attente {
  min-height: 1.5em;
  margin-top: 1.1em;
  font-size: .9em;
  opacity: .8;
}

/* ═══════════════════════════════════════════════════════
   CONFIRMATION AU CENTRE DE L'ÉCRAN
   Séparée du bandeau : un événement ("vous venez de gagner"),
   pas un état à lister. 7 habillages, du sobre au festif —
   le commerçant choisit celui qui correspond à son commerce.
   ═══════════════════════════════════════════════════════ */

.emp-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.emp-confirm-card {
  --emp-fond: #ffffff;
  --emp-encre: #18181b;
  --emp-accent2: #f97316;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .9em 1.4em;
  border-radius: 14px;
  font-size: 17px;
  max-width: 90vw;
  text-align: center;
  opacity: 0;
  transform: scale(.92);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}

.emp-confirm-card.emp-cc-jouer {
  animation: emp-cc-pop .45s ease-out forwards;
}

@keyframes emp-cc-pop {
  to { opacity: 1; transform: scale(1); }
}

.emp-cc-emoji {
  font-size: 1.5em;
  line-height: 1;
  animation: emp-emoji-respire 2.4s ease-in-out infinite;
  transform-origin: 70% 70%;
}

.emp-cc-message .emp-b { font-weight: 800; }
.emp-cc-message .emp-g { font-weight: 700; }

/* -- Sobre : discret, texte + carte neutre. Bijouterie, service, spa. -- */
.emp-cc-sobre {
  background: var(--emp-fond);
  color: var(--emp-encre);
  border: .5px solid rgba(0, 0, 0, .1);
}
.emp-cc-sobre .emp-cc-message .emp-g { color: var(--emp-accent2); }

/* -- Chaleureux : un peu de vie, bordure accentuée. Commerce de proximité. -- */
.emp-cc-chaleureux {
  background: var(--emp-fond);
  color: var(--emp-encre);
  border: 1.5px solid var(--emp-accent2);
}
.emp-cc-chaleureux .emp-cc-message .emp-g { color: var(--emp-accent2); }
.emp-cc-chaleureux.emp-cc-jouer { animation: emp-cc-bounce .55s cubic-bezier(.34, 1.56, .64, 1) forwards; }

/* -- Festif : confettis. Pizzeria, fast-food, univers décontracté. -- */
.emp-cc-festif {
  background: var(--emp-fond);
  color: var(--emp-encre);
  border: 1.5px solid var(--emp-accent2);
}
.emp-cc-festif .emp-cc-message .emp-g { color: var(--emp-accent2); }
.emp-cc-festif.emp-cc-jouer { animation: emp-cc-bounce .55s cubic-bezier(.34, 1.56, .64, 1) forwards; }

/* -- Élégant : fond sombre, liseré doré. Boutique haut de gamme. -- */
.emp-cc-elegant {
  background: #1a1a18;
  color: #f1e5c0;
  border: .5px solid #c9a227;
}
.emp-cc-elegant .emp-cc-message .emp-g { color: #c9a227; }

/* -- Nature : vert doux. Fleuriste, épicerie bio. -- */
.emp-cc-nature {
  background: #eaf3de;
  color: #173404;
  border: .5px solid #97c459;
}
.emp-cc-nature .emp-cc-message .emp-g { color: #3b6d11; }

/* -- Minimaliste : rien qu'un texte, aucune carte. Univers très formel. -- */
.emp-cc-minimaliste {
  background: transparent;
  color: var(--emp-encre, #18181b);
  box-shadow: none;
  padding: .3em .6em;
}
.emp-cc-minimaliste.emp-cc-jouer { animation: emp-cc-fade .5s ease-out forwards; }
.emp-cc-minimaliste .emp-cc-message .emp-g { color: var(--emp-accent2); }

/* -- Ludique : petit rebond joyeux. Boulangerie, univers enfant. -- */
.emp-cc-ludique {
  background: #faeeda;
  color: #412402;
  border: .5px solid #ef9f27;
}
.emp-cc-ludique .emp-cc-message .emp-g { color: #854f0b; }
.emp-cc-ludique.emp-cc-jouer { animation: emp-cc-bounce .55s cubic-bezier(.34, 1.56, .64, 1) forwards; }

@keyframes emp-cc-bounce {
  0% { opacity: 0; transform: scale(.6); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes emp-cc-fade {
  from { opacity: 0; transform: translateY(6px) scale(1); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.emp-confirm-card.emp-cc-sortir {
  animation: emp-cc-sortir .35s ease-in forwards;
}

@keyframes emp-cc-sortir {
  to { opacity: 0; transform: scale(.94); }
}

/* -- Confettis (styles Chaleureux, Festif, Ludique) -- */
.emp-confetti {
  position: absolute;
  width: 6px;
  height: 10px;
  top: -10px;
  opacity: 0;
}
.emp-confetti.emp-cf-jouer {
  animation: emp-confetti-tombe 1.1s ease-in forwards;
}
@keyframes emp-confetti-tombe {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(160px) rotate(220deg); }
}

@media (prefers-reduced-motion: reduce) {
  .emp-confirm-card,
  .emp-confirm-card.emp-cc-jouer,
  .emp-confirm-card.emp-cc-sortir,
  .emp-cc-emoji,
  .emp-confetti {
    animation: none !important;
  }
  .emp-confirm-card { opacity: 1; transform: none; }
}