/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  --color-primary:     #1B2A4A;
  --color-accent:      #2ECC71;
  --color-gold:        #E8A020;
  --color-brick:       #C0392B;
  --color-bg:          #FAFAF7;
  --color-card:        #FFFFFF;
  --color-text:        #1B2A4A;
  --color-text-light:  #5F6E80;
  --color-border:      #E8EDF2;
  --color-unavailable: #C8D0DA;
  --header-height:     67px;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.app-header {
  background: var(--color-primary);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255,255,255,0.06) 8px,
    rgba(255,255,255,0.06) 10px
  );
  padding: .85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-logo {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--color-accent);
  letter-spacing: -.01em;
  text-decoration: none;
  line-height: 1;
}

.header-right {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.header-icon-btn {
  color: rgba(255,255,255,.8);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.header-icon-btn:hover { color: #fff; }

.header-cart-btn {
  color: rgba(255,255,255,.8);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding: .15rem .25rem;
}
.header-cart-btn:hover { color: #fff; }
.header-cart-btn.active { color: #fff; border-bottom: 2px solid var(--color-accent); }
.header-icon-btn.active { color: #fff; border-bottom: 2px solid var(--color-accent); }

.header-cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#cart-total-display {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

/* ── Bottom navigation ──────────────────────────────────────────────────── */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: stretch;
  z-index: 200;
}

.bottom-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--color-text-light);
  font-size: 11px;
  font-weight: 500;
  position: relative;
  padding-bottom: 4px;
  transition: color .15s;
}

.bottom-tab svg { width: 22px; height: 22px; }

.bottom-tab.active { color: var(--color-accent); }

.bottom-tab.active::after {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

.tab-badge {
  position: absolute;
  top: 7px;
  right: calc(50% - 20px);
  background: var(--color-brick);
  color: #fff;
  border-radius: 10px;
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}

/* ── Main ───────────────────────────────────────────────────────────────── */
main {
  max-width: 680px;
  margin: 0 auto;
  padding: 1.25rem 1rem calc(76px + env(safe-area-inset-bottom, 0px));
}
main.page-cart { padding: 0 0 calc(76px + env(safe-area-inset-bottom, 0px)); }

/* ── Awale page design system ──────────────────────────────────────────── */
.page-container {
  width: 100%;
  max-width: 100%;
  padding: 0 1rem 5rem;
  box-sizing: border-box;
}

.page-container,
.page-container * {
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .page-container {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 1.5rem 5rem;
  }
}

@media (min-width: 1024px) {
  .page-container {
    max-width: 900px;
    padding: 0 2rem 5rem;
  }
}

.page-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1B2D4F;
  margin: 0 0 1rem;
}

.page-back-link {
  display: inline-block;
  color: #2E8B57;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.page-back-link:hover,
.page-back-link:active {
  text-decoration: underline;
}

/* ── Recherches récentes scrollbar ─────────────────────────────────────── */
#recent-searches-list::-webkit-scrollbar { width: 4px; }
#recent-searches-list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

/* ── Typography ─────────────────────────────────────────────────────────── */
h1 {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 1.25rem 0 .6rem;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-card);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border);
}

/* ── Search bar ─────────────────────────────────────────────────────────── */
.search-bar { display: flex; gap: .5rem; }

.search-wrap { flex: 1; position: relative; display: flex; }

/* Plancher anti-zoom iOS : Safari iOS zoome au focus sur tout champ de saisie
   dont la police est < 16px. Le !important est VOLONTAIRE — il neutralise les
   font-size inline/classes ponctuels passés sous 16px. NE PAS RETIRER : c'est un
   garde-fou de sécurité, pas une négligence. */
input, textarea, select { font-size: 16px !important; }

.search-wrap input {
  flex: 1;
  padding: .65rem 3rem .65rem 1rem;
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  font-size: 1rem;
  background: var(--color-card);
  color: var(--color-text);
}
.search-wrap input:focus { outline: none; border-color: var(--color-accent); }
.search-wrap input::placeholder { color: var(--color-text-light); }

.q-clear {
  position: absolute; right: .6rem; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;   /* centre le « × » dans la boîte */
  background: none; border: none;
  color: var(--color-text-light);
  cursor: pointer; font-size: 1.2rem; line-height: 1; padding: .1rem .25rem;
}
.q-clear:hover { color: var(--color-text); }

/* Enveloppe tight d'un champ effaçable : contexte de positionnement pour la croix
   (.q-clear, absolute). L'input remplit l'enveloppe ; les boutons voisins (flèche,
   actions) restent HORS de l'enveloppe → croix alignée au bord droit de l'input.
   flex:1 grandit en ligne ; no-op en colonne auto-height (largeur via stretch). */
.clearable-field { position: relative; display: flex; flex: 1; }
/* min-width:0 : neutralise le min-width:auto par défaut d'un input flex (= sa taille
   intrinsèque ~20ch), sinon le champ ne rétrécit pas et déborde la rangée. */
.clearable-field > input { flex: 1; min-width: 0; }

/* Cadre de champ thématisé — partagé par le champ de recherche d'adresse (#addr-input)
   et l'en-tête du déroulant « Mes adresses » (.addr-dd-toggle) : un seul cadre. */
.field-frame {
  background: var(--color-card); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 8px; padding: .5rem .9rem;
}
.field-frame:focus { outline: none; border-color: var(--color-primary); }

/* Icône "adresse / lieu" en SVG goutte (partial _addr_icon.html). Suit le font-size
   du parent — remplace l'emoji 📍, rendu uniforme sur tous les OS. */
.addr-icon { display: inline-block; height: 1em; width: auto; vertical-align: middle; }

/* Sélecteur d'adresses (points de repère carte, page Magasins) — menu déroulant à cases.
   Coché = case ambre (cohérent avec le marqueur d'adresse) ; ligne grisée à la limite. */
.addr-dd { position: relative; }
/* Cadre via .field-frame (partagé avec #addr-input) ; ici, seules les specifics du toggle. */
.addr-dd-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.addr-dd-caret { color: var(--color-text-light); transition: transform .15s; }
.addr-dd--open .addr-dd-caret { transform: rotate(180deg); }
.addr-dd-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1100;
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14); overflow: hidden;
}
.addr-dd-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .9rem; cursor: pointer; font-size: .9rem;
  border-bottom: 1px solid var(--color-border);
}
.addr-dd-item:last-child { border-bottom: none; }
.addr-dd-item--disabled { opacity: .4; cursor: default; }
.addr-dd-item input { accent-color: #E8A020; }

.search-bar button[type=submit], .btn-search {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: .65rem 1.1rem;
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.search-bar button[type=submit]:hover { opacity: .9; }

/* Bouton-icône flottant sur une carte (FAB). Chrome partagé — le positionnement
   (position/top/right/z-index) reste à la charge de chaque usage. */
.map-fab {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: #fff; color: var(--color-primary);
  border: 1px solid #bbb; border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); cursor: pointer;
}
.map-fab svg { width: 20px; height: 20px; }

/* Carte en plein écran applicatif : le wrapper couvre le viewport au-dessus du
   header (z-index 100) et de la tabbar (200). Partagé Magasins + formulaire
   d'adresse (toggleMapFullscreen, utils.js). */
.map-wrap--fs {
  position: fixed !important; inset: 0 !important; margin: 0 !important; z-index: 4000 !important;
}
/* #map/#addr-map énumérés : la règle mobile `#map { height:220px !important }` a
   une spécificité d'id qu'une classe seule ne battrait pas. */
.map-wrap--fs #map, .map-wrap--fs #addr-map { height: 100% !important; border-radius: 0 !important; }

/* Autocomplétion d'adresse — liste déroulante de suggestions. Partagé
   (setupAddressAutocomplete, utils.js) : formulaire d'adresse + Magasins. */
.suggestions {
  margin-top: .4rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  max-height: 250px;
  overflow-y: auto;
  background: #fff;
}
.suggestions:empty { display: none; }
.suggestion {
  padding: .75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  font-size: .95rem;
}
.suggestion:last-child { border-bottom: none; }
.suggestion:hover, .suggestion:active { background: #f5f5f5; }
.suggestion-empty, .suggestion-error {
  padding: .75rem 1rem;
  color: #888;
  font-style: italic;
  font-size: .9rem;
}

/* Bouton-icône carré, chrome navy plein (icône blanche centrée). Générique,
   partagé — pour une icône seule (flèche, viseur…) calé sur la hauteur d'un
   champ voisin. ≠ .map-fab (blanc, flottant sur carte). */
.btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  flex-shrink: 0;
  background: var(--color-primary); color: #fff;
  border: none; border-radius: 8px;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.btn-icon svg { width: 20px; height: 20px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
button, .btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: .55rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  text-decoration: none;
  font-weight: 600;
}
button:hover, .btn:hover { opacity: .9; }
.btn-sm { padding: .3rem .7rem; font-size: .8rem; border-radius: 6px; }
.btn-add    { background: var(--color-primary); }
.btn-added  { background: var(--color-accent); color: var(--color-primary) !important; }
.btn-danger { background: var(--color-brick); }

/* ── Product cards (search results) ────────────────────────────────────── */
.product-grid { display: flex; flex-direction: column; gap: 12px; }

.product-card {
  background: var(--color-card);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  gap: .85rem;
  padding: .9rem;
  align-items: flex-start;
}

.product-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--color-bg);
}

.product-img-placeholder {
  width: 80px;
  height: 80px;
  background: var(--color-border);
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-light);
  letter-spacing: .05em;
}

.product-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }

/* Ligne nom + contrôle quantité */
.product-info-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.product-info-top .product-name-link { flex: 1; min-width: 0; }

.product-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  margin-bottom: .2rem;
}

.product-brand {
  font-size: .75rem;
  color: var(--color-text-light);
  margin-bottom: .2rem;
}

/* Price chips (new card design) */
.product-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: .45rem;
}

.price-chip {
  display: inline-flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 4px 8px;
  min-width: 68px;
}

.price-chip--best {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.price-chip--unavail {
  opacity: .45;
}

.price-chip-drive {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-light);
  line-height: 1.2;
}

.price-chip--best .price-chip-drive { color: var(--color-primary); }
.price-chip--best .price-chip-drive::before { content: '✓\00a0'; font-weight: 900; }

.price-chip-val {
  font-size: .95rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
}

.price-chip--best .price-chip-val { color: var(--color-primary); }

.price-chip-unit {
  font-size: .65rem;
  color: var(--color-text-light);
  line-height: 1.2;
}

.price-chip--best .price-chip-unit { color: rgba(27,42,74,.8); }

.product-availability {
  font-size: 12px;
  color: var(--color-text-light);
  margin-top: .4rem;
  white-space: nowrap;
}

/* ── Product image link ─────────────────────────────────────────────────── */
.product-img-link {
  display: block;
  flex-shrink: 0;
  text-decoration: none;
}

/* ── Product name link ──────────────────────────────────────────────────── */
.product-name-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.product-name-link:hover .product-name { color: var(--color-accent); }

/* ── Card qty control (top-right dans product-info-top) ─────────────────── */
.card-qty-ctrl {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ── Blocs drives ────────────────────────────────────────────────────────── */
/* --page : fiche article (flex-start, gap interne) */
.product-drives--page {
  display: flex;
  gap: .3rem;
  margin-top: .25rem;
}
/* --card : cards search (espace distribué, contexte étroit) */
.product-drives--card {
  display: flex;
  gap: .3rem;
  margin-top: .25rem;
}
.drive-block {
  flex: 1;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 70px;
  padding: .35rem .35rem;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  min-width: 0;
  transition: border-color .15s;
  text-align: center;
}
/* Search cards : space-between pour contexte étroit (pré-régression) */
.product-drives--card .drive-block {
  justify-content: space-between;
  gap: 0;
}
.drive-block--best    { background: #27AE60; color: #fff; }
.drive-block--mid     { background: #E67E22; color: #fff; }
.drive-block--worst   { background: #922B21; color: #fff; }
.drive-block--unavail { background: #ECEFF1; color: #90A4AE; cursor: default; }
.drive-block--selected { border-color: #1B2A4A; border-width: 1.5px; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.drive-block-name  { font-size: .6rem; font-weight: 700; letter-spacing: .04em; }
.drive-block-price { font-size: .85rem; font-weight: 700; line-height: 1.2; }
.drive-block-unit  { font-size: .6rem; opacity: .85; line-height: 1.2; }
.drive-block-unavail-label { font-size: .65rem; margin-top: .15rem; }

/* Round green "+" button (first add) */
.btn-qty-add {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  border: none;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.btn-qty-add:hover { opacity: .88; }

/* "− N +" selector on cards */
.qty-ctrl {
  display: flex;
  align-items: center;
  gap: 2px;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
  user-select: none;
  /* font-family héritée de body (system-ui, -apple-system, sans-serif) */
}
.qty-btn:hover { opacity: .85; }

.qty-val {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}

/* Product page full-width qty controls */
.qty-ctrl--product { gap: 6px; }
.qty-ctrl--product .qty-btn { width: 44px; height: 44px; font-size: 1.3rem; }
.qty-ctrl--product .qty-val { min-width: 36px; font-size: 1.2rem; }

.btn-product-add {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: .85rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-product-add:hover { opacity: .9; }

/* Product card footer — kept for legacy pages */
.product-card-footer {
  border-top: 1px solid var(--color-border);
  padding: .6rem .9rem;
}

/* Legacy aliases kept for other pages */
.btn-add    { background: var(--color-primary); color: #fff; }
.btn-added  { background: var(--color-accent); color: var(--color-primary) !important; }
.btn-danger { background: var(--color-brick); }
.btn-sm     { padding: .3rem .7rem; font-size: .8rem; border-radius: 6px; }
.product-actions { flex-shrink: 0; }

.badge-best-drive {
  background: var(--color-accent);
  color: var(--color-primary);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 700;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 600;
}
.badge-chronodrive { background: #E8EDF2; color: var(--color-primary); }
.badge-leclerc     { background: #fce4ec; color: #b71c1c; }
.badge-carrefour   { background: #e0f7fa; color: #006064; }
.badge-ok          { background: #e8f8f0; color: #1a7a45; }
.badge-warn        { background: #fff8e1; color: #b7870f; }
.badge-unavail     { background: var(--color-border); color: var(--color-text-light); }

/* ── Nutriscore ─────────────────────────────────────────────────────────── */
.nutri-a, .nutri-b { color: #1a7a45; font-weight: 700; }
.nutri-c           { color: #7C5800; font-weight: 700; }
.nutri-d, .nutri-e { color: var(--color-brick); font-weight: 700; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { background: var(--color-primary); color: #fff; text-align: left; padding: .55rem .75rem; font-weight: 600; }
td { padding: .5rem .75rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-bg); }
.best-price { background: #e8f8f0 !important; color: #1a7a45; font-weight: 700; }
.no-price   { color: var(--color-unavailable); }
.total-row td { font-weight: 700; background: #f0f4ff !important; border-top: 2px solid var(--color-primary); }

/* ── Misc ───────────────────────────────────────────────────────────────── */
.saving { color: #167040; font-weight: 700; }
.muted  { color: var(--color-text-light); font-size: .85rem; }
.alert  { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.alert-warn { background: #fff8e1; border-left: 4px solid #9A6400; }

.stat-row { display: flex; gap: 2rem; flex-wrap: wrap; }
.stat { text-align: center; }
.stat-num { font-size: 2rem; font-weight: 700; color: var(--color-primary); }
.stat-label { font-size: .8rem; color: var(--color-text-light); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--color-text-light); }
.empty-state .big { font-size: 3rem; margin-bottom: .5rem; }

.pagination { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 1.5rem; }
.pagination a { padding: .4rem .8rem; background: var(--color-card); border-radius: 6px; border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; font-size: .9rem; }
.pagination a:hover { background: var(--color-bg); }
.pagination .current { padding: .4rem .8rem; background: var(--color-primary); color: #fff; border-radius: 6px; font-size: .9rem; }

.drive-inactive { opacity: .3; }
.drive-toggle   { cursor: pointer; margin-right: .3rem; accent-color: var(--color-accent); }

/* ── Notification bell (header) ─────────────────────────────────────────── */
#notif-bell {
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  padding: .2rem .35rem;
  position: relative;
  line-height: 1;
  display: flex;
  align-items: center;
}
#notif-bell:hover { color: #fff; }
#notif-bell svg { width: 20px; height: 20px; }
#notif-badge {
  display: none;
  position: absolute;
  top: -4px; right: -4px;
  background: var(--color-brick);
  color: #fff;
  border-radius: 10px;
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}
#notif-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 2.4rem;
  width: 320px;
  background: var(--color-card);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
  z-index: 1000;
  overflow: hidden;
}

/* ── Homepage hero ──────────────────────────────────────────────────────── */
.home-hero {
  background: var(--color-primary);
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 8px,
    rgba(255,255,255,0.06) 8px, rgba(255,255,255,0.06) 10px
  );
  border-radius: 16px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border: 2px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 12px rgba(27,42,74,.18);
}
.home-hero-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: .2rem;
}
.home-hero-sub {
  font-size: .85rem;
  color: var(--color-gold);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 1rem;
}
.home-search-form { display: flex; gap: .5rem; }
.home-search-form input {
  flex: 1;
  padding: .75rem 1rem;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  background: rgba(255,255,255,.12);
  color: #fff;
}
.home-search-form input::placeholder { color: rgba(255,255,255,.5); }
.home-search-form input:focus { outline: none; background: rgba(255,255,255,.18); }
.home-search-form button {
  background: var(--color-accent);
  color: var(--color-primary);
  border: none;
  border-radius: 10px;
  padding: .75rem 1.1rem;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  white-space: nowrap;
}
.home-search-form button:hover { opacity: .9; }

/* ── Categories grid ────────────────────────────────────────────────────── */
.section-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-primary);
  margin-bottom: .75rem;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 1.5rem;
}

.category-tile {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: .85rem .5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  transition: border-color .15s;
}
.category-tile:hover { border-color: var(--color-accent); }
.category-icon {
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.category-icon svg,
.category-icon i { width: 28px; height: 28px; display: block; }
.category-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  line-height: 1.2;
}

/* ── Last search restore banner ─────────────────────────────────────────── */
.restore-banner {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.restore-banner span { font-size: .85rem; color: var(--color-text-light); }
.restore-banner a { font-size: .85rem; font-weight: 700; color: var(--color-accent); text-decoration: none; }

/* ── Widget blocks (homepage) ───────────────────────────────────────────── */
.widget-block {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  margin-bottom: .85rem;
  overflow: hidden;
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.widget-header:hover { background: var(--color-bg); }

.widget-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-text);
}

.widget-chevron {
  width: 18px;
  height: 18px;
  color: var(--color-text-light);
  transition: transform .2s;
  flex-shrink: 0;
}

.widget-body {
  padding: 0 1rem 1rem;
}

.widget-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .75rem 0 .25rem;
  text-align: center;
}
.widget-placeholder span {
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-text-light);
  background: var(--color-bg);
  border-radius: 20px;
  padding: .2rem .7rem;
}
.widget-placeholder p {
  font-size: .8rem;
  color: var(--color-text-light);
  line-height: 1.4;
}

/* ── Badge profil — point orange 8px ────────────────────────────────────── */
.bottom-tab-icon {
  position: relative;
  display: inline-flex;
}
#profile-nav-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E8A020;
}

/* ── Responsive desktop ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  main {
    max-width: 480px;
    padding-left: 0;
    padding-right: 0;
  }
}