/* Polices chargées depuis index.php (preconnect + <link>), voir commentaire
   là-bas — plus rapide qu'un @import CSS qui retarderait leur découverte. */

  :root{
    --bg:#E7E4DB; --bg-soft:#F1EFE9; --surface:#FFFFFF; --surface-hi:#F1EFE9;
    --line:#CBC6B9; --ink:#14130F; --mute:#514C45; --mute-soft:#78726A;
    --gold:#8E6425; --gold-hi:#C8993F; --gold-hover:#A87830; --gold-dim:#F5EBD8;
    --steel:#16233F; --steel-dim:#0F1B33; --danger:#B93A30; --good:#136B4C; --header-bg:#101D38; --header-mute:#B9C0CC;
    --icon-tone:#3C598E; /* bleu NOVEX plus doux que --steel, pensé pour les icônes de tuiles */
    --display:'Poppins',sans-serif; --mono:'IBM Plex Mono',monospace; --body:'Inter',sans-serif;
    --serif:'Times New Roman',Times,serif;
    --gold-muted:#96835C;
    --navy-light:#33578F;
    --tile-blue-bg:#E4EDFB; --tile-blue-fg:#2A5DBB;
    --tile-green-bg:#E2F5E9; --tile-green-fg:#1F9254;
    --tile-teal-bg:#DFF4F1; --tile-teal-fg:#128276;
    --tile-indigo-bg:#E7E8FB; --tile-indigo-fg:#4B4FC4;
    --tile-purple-bg:#F0E7FA; --tile-purple-fg:#7A3FC4;
    --tile-amber-bg:#FCF0DA; --tile-amber-fg:#B8791A;
    --tile-coral-bg:#FBE7E4; --tile-coral-fg:#C7503E;
    --tile-cyan-bg:#DEF3F8; --tile-cyan-fg:#1381A0;
    --tile-pink-bg:#FCE7F1; --tile-pink-fg:#C13584;
    --tile-rose-bg:#FBE8ED; --tile-rose-fg:#B3436B;
    --tile-slate-bg:#E7E9EE; --tile-slate-fg:#4A5568;
  }
  *{box-sizing:border-box;}
  /* Blocage du débordement horizontal : uniquement via overflow-x:hidden,
     une propriété de mise en page pure et sans risque. overscroll-behavior
     et touch-action ont été retirées (rounds v31-35) car elles pouvaient
     entrer en conflit avec le moteur de rendu sur certaines configurations
     PC (carte graphique/pilotes tactiles), provoquant un blocage complet
     de la page — jamais observé sur mobile, mais un risque réel sur PC. */
  html{background:#E7E4DB !important;color-scheme:light !important;min-height:100%;overflow-x:hidden;}
  body{margin:0;min-height:100vh;min-height:100dvh;background:#E7E4DB !important;color:var(--ink);font-family:var(--body);overflow-x:hidden;}
  #root{background:#E7E4DB;min-height:100vh;min-height:100dvh;max-width:100vw;overflow-x:hidden;}
  @media (prefers-color-scheme: dark){
    html, body, #root{background:#E7E4DB !important;}
  }
  ::selection{background:#8E642555;}
  a,button{cursor:pointer;}
  button{font-family:inherit;}
  input,select,textarea{font-family:inherit;}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold) !important;}
  .wrap{max-width:1220px;margin:0 auto;padding:0 20px;}
  .hidden{display:none !important;}

  /* Header */
  header.site{position:sticky;top:0;z-index:65;background:var(--header-bg);border-bottom:1px solid #1B2740;}
  .header-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 20px;}
  @media (min-width:821px){
    .header-inner{grid-template-columns:1fr auto 1fr;}
    .search-toggle-btn{display:none;}
  }
  .hamburger-btn{background:none;border:none;padding:6px;color:#fff;justify-self:start;}
  .logo{display:flex;align-items:center;gap:8px;user-select:none;justify-self:center;}
  .logo-plaque{width:44px;height:44px;border-radius:10px;background:#1E1C1A;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
  .logo-plaque img{width:100%;height:100%;object-fit:contain;}
  .logo-word{font-family:var(--display);font-weight:700;font-size:27px;letter-spacing:.5px;color:#fff;}
  .logo-word .x-accent{color:var(--gold-hi);}
  .header-right{display:flex;align-items:center;gap:14px;justify-self:end;min-width:0;}
  .header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
  .header-icon-btn{position:relative;background:none;border:none;padding:8px;color:#fff;}
  .search-box{flex:1;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 14px;min-width:0;}
  .search-box input{flex:1;border:none;background:transparent;font-size:14px;color:var(--ink);min-width:0;}
  .search-box svg{flex-shrink:0;}
  .desktop-search{display:none;}
  @media (min-width:821px){ .desktop-search{display:flex;width:320px;flex:none;} }
  .cart-count{position:absolute;top:0;right:0;background:#E23D3D;color:#fff;font-family:var(--mono);font-weight:700;font-size:10px;border-radius:999px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 3px;box-shadow:0 1px 4px rgba(0,0,0,.25);}

  .mobile-panel{display:none;background:var(--bg);padding:0 20px 16px;border-top:1px solid var(--line);}
  .mobile-panel.open{display:block;}
  .mobile-panel .search-box{display:flex;margin-top:14px;}
  .mobile-panel button.mnav{display:block;width:100%;text-align:left;background:none;border:none;font-size:14px;color:var(--ink);padding:10px 4px;}
  .mobile-panel .cat-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}

  .menu-drawer{position:fixed;inset:0;z-index:60;background:rgba(10,15,30,.55);display:none;}
  .menu-drawer.open{display:block;}
  .menu-drawer-panel{position:absolute;top:0;left:0;bottom:0;height:100%;width:84%;max-width:360px;background:var(--header-bg);box-shadow:4px 0 24px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  body.menu-open{overflow:hidden;}
  .menu-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 18px;border-bottom:1px solid #1B2740;}
  .menu-list{padding:8px 8px calc(24px + env(safe-area-inset-bottom));}
  .menu-item{display:flex;align-items:center;gap:16px;width:100%;background:none;border:none;color:#fff;font-family:var(--body);font-size:16px;font-weight:500;padding:15px 12px;border-radius:10px;text-align:left;}
  .menu-item:active, .menu-item:hover{background:rgba(255,255,255,.06);}
  .menu-emoji{width:28px;text-align:center;flex-shrink:0;display:flex;align-items:center;justify-content:center;}

  /* Bottom mobile tab bar */
  /* Sur Chrome mobile, la barre d'adresse qui se rétracte/réapparaît au
     scroll fait recalculer en continu la hauteur du viewport visuel : un
     élément "position:fixed" ordinaire peut alors sembler tressauter d'un
     ou deux pixels pendant l'animation. On force ce bandeau sur sa propre
     couche de composition GPU (translateZ) au lieu de le laisser repeindre
     avec le reste de la page à chaque changement de hauteur — il reste
     ainsi parfaitement immobile pendant le scroll. */
  .tab-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(20,18,15,.06);transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;will-change:transform;}
  .tab-bar-inner{display:flex;justify-content:space-around;align-items:center;max-width:520px;margin:0 auto;}
  .tab-item{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--mute-soft);flex:1;padding:4px;}
  .tab-item.active{color:var(--ink);}
  .tab-item span{font-size:11.5px;font-weight:500;}
  @media (max-width:820px){
    .tab-bar{display:block;}
    body{padding-bottom:64px;}
  }
  @media (max-width:380px){
    .logo-plaque{width:38px;height:38px;}
    .logo-word{font-size:24px;}
    .header-inner{gap:8px;padding:14px 12px;}
  }

  /* Buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;padding:12px 22px;border-radius:10px;border:none;transition:background .15s;}
  .btn-primary{background:var(--gold-hi);color:var(--ink);box-shadow:0 2px 10px rgba(142,100,37,.28);}
  .btn-primary:hover{background:var(--gold-hover);}
  .btn-primary:disabled{background:var(--mute-soft);color:#fff;cursor:not-allowed;box-shadow:none;}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
  .btn-full{width:100%;}
  /* UX v98 : variante discrète pour les actions sensibles/de sortie
     (ex: "Se déconnecter") — même gabarit que .btn-ghost mais teintée
     danger, pour la distinguer visuellement des boutons informatifs
     (Notifications, Support...) au lieu d'avoir un style identique. */
  .btn-danger-ghost{background:transparent;color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 35%, var(--line));}
  .btn-danger-ghost:hover{background:color-mix(in srgb, var(--danger) 8%, transparent);}
  /* UX v98 : rangée d'actions compacte pour les headers de dashboard —
     boutons plus petits sur mobile pour tenir sur une seule ligne au
     lieu de s'empiler chacun en pleine largeur. */
  .header-actions{display:flex;gap:8px;flex-wrap:wrap;}
  @media (max-width:640px){
    .header-actions .btn{padding:9px 14px;font-size:12.5px;}
  }

  .hero{
    background:linear-gradient(120deg, var(--steel-dim) 0%, var(--steel) 100%);
    border-bottom:1px solid var(--line);
    position:relative;overflow:hidden;
  }
  .hero-inner{padding:26px 20px;max-width:1152px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;}
  .hero-text{display:flex;flex-direction:column;gap:4px;}
  .hero-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;color:var(--gold-hi);display:block;}
  /* UX v98 : le titre (le message le plus important de la page d'accueil)
     était réduit par un style en ligne à peine plus grand que le texte
     courant (clamp 1rem-1.3rem, ~16-21px) — il perdait toute sa
     prééminence. Remonté à une taille de vrai titre de hero. */
  .hero h1{font-family:var(--display);font-size:clamp(1.5rem,4vw,2.1rem);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0;color:#fff;}
  .hero p{color:var(--header-mute);font-size:12.5px;margin-top:2px;line-height:1.5;}
  .hero-ctas{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0;}
  @media (max-width:700px){ .hero-inner{padding:20px 20px;} .hero-ctas .btn-ghost{display:none;} }

  /* Sections */
  section.block{max-width:1152px;margin:0 auto;padding:40px 20px;}
  .block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
  .block-head h2{font-family:var(--display);font-size:22px;font-weight:600;margin:0;display:flex;align-items:center;gap:8px;}
  .block-head a.seeall{color:var(--mute);font-size:13px;text-decoration:none;display:flex;align-items:center;gap:2px;background:none;border:none;}

  .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  .cat-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0;text-align:left;overflow:hidden;box-shadow:0 3px 10px rgba(20,18,15,.05);transition:transform .18s ease,box-shadow .18s ease;}
  .cat-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(20,18,15,.1);}
  .cat-photo{aspect-ratio:4/3;background:var(--surface-hi);display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .cat-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .cat-photo .cat-fallback{font-family:var(--display);font-size:26px;font-weight:600;color:var(--gold);}
  .cat-card span.label{font-weight:600;font-size:13px;display:block;padding:12px 14px;}

  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
  @media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr);gap:7px;} .cat-grid{grid-template-columns:repeat(2,1fr);} }
  /* Un peu moins de marge latérale sur mobile : les photos produits de la
     grille en profitent directement (toujours 2 par ligne, juste plus grandes). */
  @media (max-width:640px){ .wrap{padding:0 12px;} }

  /* Carte produit : seule la photo est "encadrée" (bordure/ombre/coins
     arrondis) ; nom/prix/vendeur restent en texte libre en dessous, sans
     second cadre — contrairement aux cartes Catégories/Boutiques qui, elles,
     englobent tout dans une seule carte blanche. */
  .card{text-align:left;background:none;border:none;padding:0;transition:transform .18s ease;}
  .card:hover{transform:translateY(-3px);}
  .card:hover .card-photo{box-shadow:0 12px 28px rgba(20,18,15,.14);}
  .card-photo{aspect-ratio:1/1;border-radius:16px;overflow:hidden;border:1px solid var(--line);position:relative;background:var(--bg-soft);box-shadow:0 3px 10px rgba(20,18,15,.05);transition:box-shadow .18s ease;}
  .card-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .badge{position:absolute;top:10px;left:10px;background:rgba(16,29,56,.85);padding:4px 10px;border-radius:20px;font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.15);}
  .badge-new{color:#D1A55C;} .badge-bestseller{color:#F0D9A6;} .badge-promo{color:#FF9E9E;}
  .discount-badge{position:absolute;top:10px;right:10px;background:var(--danger);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.25);}
  .out-overlay{position:absolute;inset:0;background:rgba(16,29,56,.68);display:flex;align-items:center;justify-content:center;}
  .out-overlay span{font-family:var(--mono);font-size:11px;color:#fff;letter-spacing:1px;}
  .card-name{font-family:var(--serif);font-weight:700;font-style:normal;font-size:14.5px;margin-top:10px;line-height:1.35;letter-spacing:0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;min-height:2.64em;}
  .card-cat{font-size:11px;color:var(--mute-soft);margin-top:3px;text-transform:uppercase;letter-spacing:.8px;font-weight:600;}
  .card-price-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
  .stock-status{font-size:10px;font-weight:600;margin-top:6px;letter-spacing:.2px;text-transform:uppercase;}
  .status-in{color:var(--good);}
  .status-out{color:var(--danger);}
  .card-price-stack{display:flex;align-items:baseline;gap:8px;margin-top:6px;flex-wrap:wrap;}
  .seller-line{font-size:10.5px;color:var(--mute-soft);margin-top:5px;font-weight:400;}
  .card-price-stack .price{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--navy-light);white-space:nowrap;}
  .card-price-stack .price-old{margin-top:0;white-space:nowrap;}
  .price{font-family:var(--mono);font-size:14px;font-weight:600;}
  .price-old{font-family:var(--serif);font-size:11.5px;color:var(--mute-soft);text-decoration:line-through;}
  .pct{font-family:var(--mono);font-size:11px;color:var(--danger);}

  /* Catalog */
  .catalog-toolbar{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;margin-top:18px;}
  .pill-row{display:flex;flex-wrap:wrap;gap:8px;}
  .merchant-shortcut-pill{display:block;width:100%;margin-top:16px;padding:9px 14px;border-radius:20px;border:1.5px dashed var(--line);background:var(--bg);color:var(--mute);font-size:12px;font-weight:500;text-align:center;cursor:pointer;transition:border-color .15s ease,color .15s ease;}
  .merchant-shortcut-pill span{color:var(--gold);font-weight:600;}
  .merchant-shortcut-pill:hover{border-color:var(--gold);color:var(--ink);}
  .pill{font-size:13px;font-weight:500;padding:8px 14px;border-radius:20px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;}
  .pill:hover{transform:translateY(-1px);}
  .pill.active{background:var(--steel);color:#fff;border-color:var(--steel);font-weight:600;}
  /* Sélecteur de catégorie de la page produits (remplace l'ancienne rangée
     de puces géante) : un seul contrôle compact, la catégorie active est
     toujours visible sans avoir à défiler une longue liste. */
  .cat-select-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .cat-select-label{font-size:12px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.03em;flex-shrink:0;}
  .cat-select-wrap{position:relative;flex:1;min-width:200px;max-width:340px;}
  .cat-select-wrap select{width:100%;appearance:none;-webkit-appearance:none;background:var(--bg);color:var(--ink);border:1.5px solid var(--line);border-radius:10px;padding:11px 34px 11px 14px;font-size:14px;font-weight:600;font-family:var(--body);cursor:pointer;}
  .cat-select-wrap select:focus{outline:none;border-color:var(--gold);}
  .cat-select-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--mute);font-size:12px;}
  .filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--mute);font-weight:500;}
  .filter-row select{background:var(--bg);color:var(--ink);border:1.5px solid var(--line);border-radius:8px;padding:8px 10px;font-weight:500;}
  .filter-row label{display:flex;align-items:center;gap:6px;color:var(--ink);}
  .empty-note{text-align:center;padding:70px 0;color:var(--mute);}

  /* Page Catégories dédiée : grille de cartes carrées, aucun produit */
  .categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;margin-top:24px;}
  @media (max-width:480px){ .categories-grid{grid-template-columns:repeat(2,1fr);gap:12px;} }
  .category-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;text-align:left;padding:0;}
  .category-card:hover{border-color:var(--gold-hi);box-shadow:0 8px 20px rgba(142,100,37,.12);transform:translateY(-2px);}
  .category-card-photo{width:100%;aspect-ratio:1/1;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .category-card-photo img{width:100%;height:100%;object-fit:cover;}
  .category-card-photo span{font-family:var(--display);font-size:34px;font-weight:700;color:var(--gold);}
  .category-card-name{padding:12px 10px;font-family:var(--display);font-weight:700;font-size:13.5px;line-height:1.3;color:var(--ink);text-align:center;}

  /* Product detail */
  .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:8px;}
  @media (max-width:820px){.detail-grid{grid-template-columns:1fr;}}
  /* Sans min-width:0, une grille CSS calcule la largeur de ses colonnes à
     partir du contenu le PLUS large qu'elles contiennent (ex: une rangée de
     miniatures non enroulée) et peut forcer toute la colonne — donc toute la
     fiche produit, description et couleurs comprises — à dépasser l'écran
     sur mobile, même en une seule colonne. C'est la vraie cause du contenu
     "décalé vers la droite / qui sort de l'écran" signalé sur la fiche
     produit. */
  .detail-grid > div{min-width:0;}
  .detail-photo{aspect-ratio:1/1;border-radius:16px;overflow:hidden;border:1px solid var(--line);position:relative;background:var(--surface-hi);}
  .detail-photo img{width:100%;height:100%;object-fit:cover;object-position:center;}
  /* Zones tap gauche/droite invisibles couvrant chacune la moitié de la
     photo, plus une flèche discrète centrée verticalement — clic sur la
     photo elle-même pour changer d'image, en plus des miniatures qui
     restent disponibles mais ne sont plus obligatoires. */
  .photo-nav-zone{position:absolute;top:0;bottom:0;width:38%;background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;opacity:0;transition:opacity .15s ease;}
  .detail-photo:hover .photo-nav-zone, .photo-nav-zone:active{opacity:1;}
  .photo-nav-prev{left:0;justify-content:flex-start;padding-left:8px;}
  .photo-nav-next{right:0;justify-content:flex-end;padding-right:8px;}
  .photo-nav-arrow{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(16,29,56,.55);color:#fff;}
  .photo-nav-arrow svg{width:16px;height:16px;}
  /* Sur tactile, :hover n'existe pas — les flèches restent visibles en
     permanence (légèrement estompées) pour que la fonctionnalité soit
     évidente sans avoir à deviner qu'on peut taper sur la photo. */
  @media (pointer:coarse){ .photo-nav-zone{opacity:.85;} }
  .thumb-row{display:flex;gap:8px;margin-top:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
  .thumb-row .thumb{flex-shrink:0;}
  .thumb{width:56px;height:56px;border-radius:8px;overflow:hidden;border:2px solid var(--line);background:var(--surface-hi);padding:0;}
  .thumb.active{border-color:var(--gold);}
  .thumb img{width:100%;height:100%;object-fit:cover;}
  /* Boutons "Retour" : version imposante -- pilule large bordee en bleu
     marine NOVEX, qui devient doree au survol/toucher. */
  .back-link{display:inline-flex;align-items:center;gap:7px;color:var(--steel);font-weight:700;font-size:13.5px;background:var(--surface);border:1.5px solid var(--steel);border-radius:999px;padding:9px 20px 9px 14px;margin-bottom:18px;transition:color .15s ease,border-color .15s ease,background .15s ease,gap .15s ease,box-shadow .15s ease;}
  .back-link svg{flex-shrink:0;}
  .back-link:hover, .back-link:focus-visible{color:var(--gold);border-color:var(--gold);background:var(--gold-dim);gap:9px;box-shadow:0 3px 10px rgba(142,100,37,.16);}
  .back-link:active{color:var(--gold-hover);border-color:var(--gold-hover);}
  .d-cat-pill{display:inline-block;color:var(--gold);background:var(--gold-dim);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;padding:5px 12px;border-radius:20px;}
  .d-title{font-family:var(--serif);font-size:32px;font-weight:700;letter-spacing:-.3px;line-height:1.18;margin:14px 0 0;text-wrap:balance;color:var(--ink);}
  @media (max-width:640px){ .d-title{font-size:21px;} }
  .d-desc-card{position:relative;margin-top:2px;padding:16px 18px;border-radius:14px;background:var(--gold-dim);}
  .price-block{display:flex;flex-direction:column;gap:5px;margin-top:18px;}
  .price-row-top{display:flex;align-items:center;gap:12px;}
  .price-big{font-family:var(--serif);font-size:29px;font-weight:700;color:var(--navy-light);letter-spacing:-.4px;white-space:nowrap;}
  @media (max-width:640px){ .price-big{font-size:22px;} }
  .price-old-big{font-family:var(--serif);font-size:16px;color:var(--mute-soft);text-decoration:line-through;white-space:nowrap;}
  .pct-chip{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--danger);background:#B93A3018;padding:3px 9px;border-radius:6px;}
  .d-section-label{font-family:var(--display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:var(--ink);margin:26px 0 10px;display:flex;align-items:center;gap:8px;}
  .d-section-label::before{content:"";width:14px;height:2px;background:var(--gold);border-radius:2px;display:inline-block;}
  .d-desc{color:var(--ink);font-family:var(--serif);font-weight:700;font-style:normal;font-size:13px;line-height:1.35;text-align:justify;text-justify:inter-word;margin-top:0;letter-spacing:.1px;overflow-wrap:anywhere;}
  .d-desc br{content:"";display:block;margin-top:6px;}
  .stock-line{margin-top:16px;font-size:13px;}
  .stock-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:5px 13px;border-radius:20px;}
  .info-row{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--mute);padding:11px 0;}
  .info-row + .info-row{border-top:1px solid var(--line);}

  .stars{display:flex;align-items:center;gap:2px;margin-top:8px;}
  .star-rating{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;margin-bottom:10px;}
  .star-rating input{position:absolute;opacity:0;width:0;height:0;}
  .star-rating label{font-size:24px;line-height:1;color:var(--line);cursor:pointer;}
  .star-rating input:checked ~ label,
  .star-rating label:hover,
  .star-rating label:hover ~ label{color:var(--gold);}
  .qty-row{display:flex;align-items:center;gap:12px;margin-top:18px;}
  .qty-box{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;flex-shrink:0;}
  .qty-box button{background:none;border:none;padding:8px;color:var(--ink);}
  .qty-box span{width:30px;text-align:center;font-family:var(--mono);font-size:13px;}

  /* Cart */
  .cart-item{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;}
  .cart-thumb{width:68px;height:68px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--surface-hi);}
  .cart-thumb img{width:100%;height:100%;object-fit:cover;}
  .cart-info{flex:1 1 120px;min-width:0;}
  .cart-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cart-unit{font-family:var(--mono);font-size:12.5px;color:var(--mute);margin-top:3px;white-space:nowrap;}
  .cart-total-col{width:auto;min-width:96px;flex-shrink:0;text-align:right;font-family:var(--mono);font-size:12.5px;font-weight:600;white-space:nowrap;}
  .cart-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);}

  /* Checkout */
  .checkout-grid{display:grid;grid-template-columns:3fr 2fr;gap:40px;}
  @media (max-width:820px){.checkout-grid{grid-template-columns:1fr;}}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:12px;color:var(--mute);margin-bottom:4px;}
  .field input,.field textarea,.field select{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px;}
  .field.error input, .field.error select, .field.error textarea{border-color:var(--danger);}
  .notice{display:flex;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:10px;}
  .notice p{color:var(--mute);font-size:12.5px;line-height:1.6;margin:0;}
  .summary-box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;position:sticky;top:90px;}
  .summary-line{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mute);margin-bottom:6px;}
  .summary-total{display:flex;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-weight:600;}

  /* Admin */
  .admin-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
  .order-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px;}
  .order-cancelled{opacity:.6;filter:grayscale(.4);}
  .order-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;}
  .order-id{color:var(--gold);font-family:var(--mono);font-size:13px;}
  .order-date{color:var(--mute);font-size:12px;margin-left:10px;}
  .status-select{background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;}
  .order-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px;font-size:13px;color:var(--mute);}
  @media (max-width:700px){.order-grid{grid-template-columns:1fr;}}
  .order-item-line{display:flex;justify-content:space-between;}
  .prod-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:8px;}
  .prod-thumb{width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--surface-hi);}
  .prod-thumb img{width:100%;height:100%;object-fit:cover;}
  .prod-info{flex:1;min-width:0;}
  .icon-btn{background:none;border:none;padding:4px;}
  .editor-box{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:680px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;}
  @media (max-width:700px){.editor-box{grid-template-columns:1fr;}}
  /* Même correctif que .detail-grid : empêche un champ au contenu large
     (ex: un long nom de produit tapé sans espace) de forcer tout le
     formulaire d'ajout de produit à dépasser l'écran sur mobile. */
  .editor-box > div{min-width:0;}
  .settings-locked{filter:blur(3px);opacity:.55;pointer-events:none;user-select:none;}
  .settings-lock-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.55);border-radius:14px;}
  .full-span{grid-column:1/-1;}
  .photo-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
  .photo-thumb{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--line);}
  .photo-thumb img{width:100%;height:100%;object-fit:cover;}
  .photo-remove{position:absolute;top:2px;right:2px;background:rgba(16,29,56,.8);border:none;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0;}
  .photo-add-label{width:64px;height:64px;border-radius:8px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--mute);}
  .hint{color:var(--mute-soft);font-size:11px;margin-top:6px;}
  .gate-box{max-width:360px;margin:0 auto;padding:110px 20px;text-align:center;}
  .auth-card{padding:44px 30px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 34px rgba(20,18,15,.08);margin-top:64px;margin-bottom:64px;}
  .auth-brand{display:flex;flex-direction:column;align-items:center;gap:6px;}
  .auth-brand-name{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:.5px;margin-top:10px;color:var(--steel);}
  .auth-brand-sub{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--mute-soft);}

  /* Écran de choix "Acheter / Vendre" (accueil de "Mon compte") */
  .account-choice-grid{display:flex;flex-direction:column;gap:16px;margin-top:32px;}
  .account-choice-card{
    position:relative;overflow:hidden;
    display:flex;align-items:center;gap:18px;text-align:left;width:100%;
    background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:22px;
    box-shadow:0 3px 14px rgba(20,18,15,.06);
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
  }
  /* Fin liseré doré qui glisse discrètement à droite au survol -- petit
     détail "premium" qui n'ajoute aucun risque de régression. */
  .account-choice-card::after{content:"";position:absolute;top:0;right:0;bottom:0;width:5px;background:var(--gold);transform:translateX(5px);transition:transform .18s ease;}
  .account-choice-sell::after{background:var(--steel);}
  .account-choice-card:hover::after{transform:translateX(0);}
  .account-choice-card:hover{transform:translateY(-3px);border-color:var(--gold-hi);box-shadow:0 14px 30px rgba(142,100,37,.16);}
  .account-choice-icon{flex-shrink:0;width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold-dim),#F3E4C8);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(142,100,37,.12);}
  .account-choice-icon svg{width:25px;height:25px;}
  .account-choice-sell .account-choice-icon{background:linear-gradient(135deg,var(--steel),#0B1730);color:#fff;}
  .account-choice-sell:hover{border-color:var(--steel);box-shadow:0 14px 30px rgba(16,29,56,.18);}
  .account-choice-title{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);}
  .account-choice-sub{font-size:12.5px;color:var(--mute);margin-top:4px;line-height:1.45;}
  .account-choice-arrow{margin-left:auto;flex-shrink:0;color:var(--mute-soft);transition:transform .18s ease,color .18s ease;}
  .account-choice-card:hover .account-choice-arrow{transform:translateX(3px);color:var(--gold);}
  .account-choice-sell:hover .account-choice-arrow{color:var(--steel);}
  .modal-overlay{position:fixed;inset:0;z-index:80;background:rgba(10,15,30,.72);display:flex;align-items:center;justify-content:center;padding:20px;}
  .modal-box{background:var(--surface);border-radius:16px;max-width:520px;width:100%;max-height:85vh;overflow-y:auto;padding:18px;position:relative;}
  .modal-close{position:absolute;top:10px;right:10px;background:var(--bg-soft);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;}
  .readonly-field{background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--mute);}
  .share-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
  .share-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;}
  .link-box{display:flex;gap:8px;align-items:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:12px;overflow-x:auto;white-space:nowrap;}
  /* Cartes de statistiques (tableau de bord commerçant) : même langage
     visuel que les tuiles (pastille de couleur + icône), avec en plus une
     fine barre de couleur en haut de carte pour repérer chaque famille de
     chiffre d'un coup d'œil dans une grille dense. */
  .stat-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 18px 17px;position:relative;overflow:hidden;box-shadow:0 2px 12px rgba(20,18,15,.05);transition:transform .18s ease,box-shadow .18s ease;animation:statIn .35s ease backwards;}
  .stat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--stat-accent,var(--gold));}
  .stat-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
  .stat-icon svg{width:22px;height:22px;stroke-width:1.9;}
  .stat-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(20,18,15,.11);}
  .stat-num{font-family:var(--mono);font-weight:700;font-size:24px;letter-spacing:-.2px;}
  .stat-label{font-size:11.5px;color:var(--mute);margin-top:5px;letter-spacing:.2px;line-height:1.35;}
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px;}
  /* Cartes de stat cliquables (ouvrent la liste filtrée correspondante) :
     petite flèche qui apparaît au survol, curseur pointeur hérité du tag
     <button>. */
  .stat-card-clickable{width:100%;font:inherit;}
  .stat-card-arrow{position:absolute;top:16px;right:16px;color:var(--mute-soft);opacity:0;transform:translateX(-4px);transition:opacity .15s ease,transform .15s ease,color .15s ease;}
  .stat-card-clickable:hover .stat-card-arrow{opacity:1;transform:translateX(0);color:var(--stat-accent,var(--gold));}

  /* Bannière d'incitation à ajouter des produits (tableau de bord commerçant) */
  .products-cta-banner{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    background:linear-gradient(120deg,var(--header-bg),#1B2C4F);
    border-radius:18px;padding:22px 22px;box-shadow:0 10px 26px rgba(11,20,42,.22);
    color:#fff;
  }
  .products-cta-icon{flex-shrink:0;width:52px;height:52px;border-radius:15px;background:rgba(230,178,88,.18);color:var(--gold);display:flex;align-items:center;justify-content:center;}
  .products-cta-icon svg{width:26px;height:26px;}
  .products-cta-title{font-family:var(--display);font-weight:700;font-size:16.5px;}
  .products-cta-sub{font-size:12.5px;color:#C9D2E3;margin-top:5px;line-height:1.5;max-width:52ch;}
  @media (max-width:640px){ .products-cta-banner{padding:18px;} .products-cta-banner .btn{width:100%;justify-content:center;} }

  /* Rangée de découverte de l'accueil : puces longues et "brillantes"
     (dégradé + reflet) qui défilent horizontalement, façon chips de
     recommandation. */
  .discovery-chip-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none;}
  .discovery-chip-row::-webkit-scrollbar{display:none;}
  .discovery-chip{
    position:relative;overflow:hidden;flex:0 0 auto;white-space:nowrap;
    display:inline-flex;align-items:center;gap:7px;
    padding:12px 22px;border-radius:999px;border:1px solid var(--line);
    background:linear-gradient(135deg,var(--surface),var(--bg-soft));
    font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;
    box-shadow:0 2px 8px rgba(20,18,15,.06);
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease;
  }
  /* Reflet diagonal qui glisse au survol -- l'effet "brillant" demandé. */
  .discovery-chip::before{
    content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-20deg);transition:left .5s ease;
  }
  .discovery-chip:hover::before{left:130%;}
  .discovery-chip:hover{transform:translateY(-2px);border-color:var(--gold-hi);box-shadow:0 8px 20px rgba(142,100,37,.16);}
  .discovery-chip.active{background:linear-gradient(135deg,var(--gold),var(--gold-hover));color:#fff;border-color:transparent;}
  .discovery-location-panel{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px;padding:14px;background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;animation:novex-msg-in .2s ease both;}
  .stats-grid .stat-card:nth-child(1){animation-delay:.02s;} .stats-grid .stat-card:nth-child(2){animation-delay:.05s;}
  .stats-grid .stat-card:nth-child(3){animation-delay:.08s;} .stats-grid .stat-card:nth-child(4){animation-delay:.11s;}
  .stats-grid .stat-card:nth-child(5){animation-delay:.14s;} .stats-grid .stat-card:nth-child(6){animation-delay:.17s;}
  @keyframes statIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
  @media (max-width:820px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
  /* Messagerie -- version plus soignee : bulles avec ombre douce, degrade
     sur les messages envoyes, avatar en degrade dore, zone de saisie type
     "carte" avec etat focus visible. */
  .msg-thread{display:flex;flex-direction:column;gap:18px;max-height:440px;overflow-y:auto;padding:18px 16px;background:linear-gradient(180deg,var(--bg-soft),#EFEBE0);border-radius:16px;border:1px solid var(--line);scroll-behavior:smooth;}
  .msg-row{display:flex;align-items:flex-end;gap:10px;max-width:92%;animation:novex-msg-in .25s ease both;}
  @keyframes novex-msg-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .msg-row-mine{align-self:flex-end;flex-direction:row-reverse;}
  .msg-row-theirs{align-self:flex-start;}
  .msg-avatar{flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-hover));color:#fff;font-family:var(--display);font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(142,100,37,.28);}
  .msg-bubble{padding:15px 19px;border-radius:19px;font-size:15.5px;line-height:1.65;box-shadow:0 1px 3px rgba(20,18,15,.06);}
  .msg-mine{background:linear-gradient(135deg,var(--steel),#0B1730);color:#fff;border-bottom-right-radius:5px;}
  .msg-theirs{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px;}
  .msg-sender{font-size:10.5px;font-weight:700;opacity:.75;margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px;}
  .msg-body-text{white-space:pre-wrap;}
  .msg-meta{font-size:10px;opacity:.65;margin-top:4px;}
  .msg-composer{margin-top:12px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 2px 8px rgba(20,18,15,.04);transition:border-color .15s ease,box-shadow .15s ease;}
  .msg-composer:focus-within{border-color:var(--gold-hi);box-shadow:0 2px 10px rgba(142,100,37,.12);}
  .msg-composer-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
  .msg-composer-actions .btn-primary{margin-left:auto;border-radius:999px;}
  .msg-composer-textarea{width:100%;min-height:92px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14.5px;font-family:inherit;resize:vertical;max-height:220px;box-sizing:border-box;transition:border-color .15s ease;}
  .msg-composer-textarea:focus{outline:none;border-color:var(--gold-hi);}
  .msg-attach-btn{cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg-soft);color:var(--mute);font-size:12.5px;font-weight:600;flex:none;transition:border-color .15s ease,color .15s ease;}
  .msg-attach-btn:hover{border-color:var(--gold);color:var(--gold);}
  .msg-attach-pending{display:inline-flex;align-items:center;gap:6px;background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:3px 8px 3px 3px;}
  .quick-notes-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
  .quick-note-chip{background:var(--gold-dim);color:var(--gold);border:none;border-radius:14px;padding:5px 11px;font-size:11.5px;font-weight:600;cursor:pointer;}
  .quick-note-chip:hover{background:var(--gold);color:#fff;}
  .id-photo-box{width:100%;max-width:280px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface-hi);}
  .id-photo-box img{width:100%;display:block;}
  .kyc-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block;}

  footer.site{background:var(--header-bg);margin-top:40px;}
  .footer-inner{max-width:760px;margin:0 auto;padding:40px 20px 6px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;}
  .footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;font-size:13px;}
  .footer-links button{background:none;border:none;color:var(--header-mute);font-family:var(--body);font-size:13px;font-weight:700;padding:2px 0;text-decoration:none;}
  .footer-links button:hover{color:#fff;text-decoration:underline;}
  .footer-social-row{display:flex;justify-content:center;gap:14px;}
  .footer-social-row a, .footer-social-row span{transition:transform .15s ease;}
  .footer-social-row a:hover{transform:translateY(-2px);}
  .footer-desc{max-width:640px;margin:0 auto;padding:8px 20px 20px;color:#7C87A0;font-size:11.5px;line-height:1.7;text-align:center;}
  .footer-copy{text-align:center;padding:16px 20px 22px;font-family:var(--mono);font-size:11px;color:#6E7A8E;border-top:1px solid #1B2740;}

  .load-screen{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;}
  .whatsapp-fab{position:fixed;bottom:20px;right:20px;width:42px;height:42px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.22);z-index:50;transition:transform .15s ease;}
  .whatsapp-fab:hover{transform:scale(1.06);}
  @media (max-width:820px){ .whatsapp-fab{bottom:74px;} }
  /* ---- Toasts de confirmation ---- */
  #novex-toast-host{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
  .novex-toast{background:var(--steel);color:#fff;padding:12px 20px;border-radius:10px;font-size:13.5px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.22);opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease;max-width:88vw;text-align:center;}
  .novex-toast.show{opacity:1;transform:translateY(0);}
  .novex-toast-error{background:var(--danger);}
  @media (max-width:820px){ #novex-toast-host{bottom:78px;} }
  #novex-notif-bubble-host{position:fixed;top:70px;right:12px;z-index:9998;display:flex;flex-direction:column;gap:8px;align-items:flex-end;max-width:340px;}
  .novex-notif-bubble{display:flex;align-items:flex-start;gap:10px;background:var(--steel,#101D38);color:#fff;padding:12px 14px;border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.28);cursor:pointer;opacity:0;transform:translateX(24px);transition:opacity .25s ease,transform .25s ease;width:100%;box-sizing:border-box;}
  .novex-notif-bubble.show{opacity:1;transform:translateX(0);}
  .novex-notif-bubble-icon{font-size:18px;flex-shrink:0;line-height:1;margin-top:1px;}
  .novex-notif-bubble-body{flex:1;min-width:0;}
  .novex-notif-bubble-title{font-size:13px;font-weight:700;}
  .novex-notif-bubble-text{font-size:12px;color:#B9C0CC;margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .novex-notif-bubble-close{background:none;border:none;color:#B9C0CC;font-size:14px;line-height:1;padding:2px;flex-shrink:0;cursor:pointer;}
  @media (max-width:820px){ #novex-notif-bubble-host{top:64px;right:8px;left:8px;max-width:none;} }

  /* ---- Tableaux de bord : accueil en tuiles (admin / commerçant / Service Client) ---- */
  .dash-home-header{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
  .dash-home-title{font-family:var(--display);font-size:22px;font-weight:700;color:var(--ink);}
  .dash-home-sub{font-size:13px;color:var(--mute-soft);margin-top:2px;}
  .tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(162px,1fr));gap:16px;}
  .tile{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
    background:var(--surface);border:1px solid var(--line);border-radius:18px;
    padding:32px 12px;min-height:148px;cursor:pointer;text-align:center;
    box-shadow:0 1px 3px rgba(20,19,15,.05);
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
  }
  .tile:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(20,19,15,.10);border-color:var(--gold-hi);}
  .tile:active{transform:translateY(-1px);}
  /* Style Kentico : icône colorée directement sur la tuile claire, pas de
     pastille de fond sombre. --icon-tone est un bleu NOVEX plus doux que
     le marine de l'en-tête, pensé spécifiquement pour rester lisible à
     cette taille sans paraître trop lourd. */
  .tile-icon{color:var(--icon-tone);display:flex;align-items:center;justify-content:center;width:86px;height:86px;border-radius:22px;background:var(--bg-soft);transition:transform .16s ease;}
  .tile:hover .tile-icon{transform:scale(1.08);}
  .tile-icon svg{width:43px;height:43px;stroke-width:1.7;}
  .tile-icon-gold{color:var(--gold-hi);background:var(--gold-dim);}
  /* Palette de couleurs par famille de fonctionnalité — cohérente sur les 4 interfaces (admin/commerçant/service client/client), voir photo de référence. */
  .tile-icon-blue{color:var(--tile-blue-fg);background:var(--tile-blue-bg);}
  .tile-icon-green{color:var(--tile-green-fg);background:var(--tile-green-bg);}
  .tile-icon-teal{color:var(--tile-teal-fg);background:var(--tile-teal-bg);}
  .tile-icon-indigo{color:var(--tile-indigo-fg);background:var(--tile-indigo-bg);}
  .tile-icon-purple{color:var(--tile-purple-fg);background:var(--tile-purple-bg);}
  .tile-icon-amber{color:var(--tile-amber-fg);background:var(--tile-amber-bg);}
  .tile-icon-coral{color:var(--tile-coral-fg);background:var(--tile-coral-bg);}
  .tile-icon-cyan{color:var(--tile-cyan-fg);background:var(--tile-cyan-bg);}
  .tile-icon-pink{color:var(--tile-pink-fg);background:var(--tile-pink-bg);}
  .tile-icon-rose{color:var(--tile-rose-fg);background:var(--tile-rose-bg);}
  .tile-icon-slate{color:var(--tile-slate-fg);background:var(--tile-slate-bg);}
  .tile-label{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.28;}
  .tile-badge{position:relative;}
  .tile-badge::after{content:attr(data-count);position:absolute;top:14px;right:calc(50% - 38px);background:var(--gold-hi);color:#fff;font-size:10.5px;font-weight:700;border-radius:20px;padding:1px 7px;box-shadow:0 0 0 2px var(--surface);}
  .tile-soon{opacity:.5;cursor:default;}
  .tile-soon:hover{transform:none;box-shadow:0 1px 3px rgba(20,19,15,.05);border-color:var(--line);}
  .tile-soon .tile-icon{color:var(--mute-soft);}
  .tile-soon-tag{font-size:10px;color:var(--mute-soft);text-transform:uppercase;letter-spacing:.05em;}
  .dash-back-row{margin-bottom:16px;}
  @media (max-width:640px){ .tile-grid{grid-template-columns:repeat(3,1fr);gap:11px;} .tile{padding:22px 6px;min-height:130px;gap:11px;border-radius:16px;} .tile-icon{width:70px;height:70px;border-radius:18px;} .tile-icon svg{width:37px;height:37px;} .tile-label{font-size:11.5px;} }

  /* =========================================================================
     Pages de présentation (Qui sommes-nous, Mission, Services, FAQ, Contact,
     Livraison, Confidentialité, CGU, Retours, Devenir vendeur) — design
     harmonisé : fond blanc, cartes élégantes, hiérarchie de titres claire.
     ========================================================================= */
  .info-page{background:#FFFFFF;border-radius:18px;padding:0 0 44px;margin:28px auto 60px;max-width:760px;box-shadow:0 2px 18px rgba(20,19,15,.06);border:1px solid var(--line);overflow:hidden;}
  @media (max-width:640px){ .info-page{margin:16px auto 40px;border-radius:14px;} }
  .info-page-head{background:linear-gradient(135deg,var(--gold-dim) 0%,#fff 75%);padding:40px 36px 28px;}
  @media (max-width:640px){ .info-page-head{padding:28px 20px 20px;} }
  .info-page-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--gold-hi),var(--gold));box-shadow:0 6px 18px rgba(142,100,37,.28);display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;margin-bottom:18px;}
  .info-page h1.info-title{font-family:var(--display);font-size:29px;font-weight:700;letter-spacing:-.2px;color:var(--ink);margin:0;}
  .info-page .info-lede{color:var(--mute);font-size:15px;line-height:1.8;margin:14px 0 0;}
  .info-page-body{padding:8px 36px 0;}
  @media (max-width:640px){ .info-page-body{padding:4px 20px 0;} }
  .info-cards{display:flex;flex-direction:column;gap:14px;margin-top:26px;}
  .info-card{background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--gold-hi);border-radius:14px;padding:20px 22px;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
  .info-card:hover{border-color:var(--gold-hi);border-left-color:var(--gold);box-shadow:0 4px 16px rgba(142,100,37,.1);transform:translateX(2px);}
  .info-card:nth-child(3n+2){border-left-color:var(--icon-tone);}
  .info-card:nth-child(3n+3){border-left-color:var(--tile-teal-fg);}
  .info-card-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
  .info-card-icon{width:36px;height:36px;border-radius:10px;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
  .info-card h3{font-family:var(--display);font-size:16.5px;font-weight:600;color:var(--ink);margin:0;line-height:1.3;}
  .info-card p{color:var(--mute);font-size:14.5px;line-height:1.75;margin:0;}
  .info-card ul{margin:8px 0 0;padding-left:20px;color:var(--mute);font-size:14.5px;line-height:1.9;}
  .info-card ul li::marker{color:var(--gold-hi);}
  .info-cta{margin:30px 36px 0;}
  @media (max-width:640px){ .info-cta{margin:24px 20px 0;} }

  /* FAQ : <details>/<summary> natif, sans JS, accessible et pliable */
  .faq-cat-label{font-family:var(--display);font-size:13.5px;font-weight:700;color:var(--gold);background:var(--gold-dim);display:inline-block;padding:6px 14px;border-radius:20px;margin-top:26px;margin-bottom:10px;}
  .faq-item{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease;}
  .faq-item:hover{border-color:var(--gold-hi);box-shadow:0 4px 14px rgba(142,100,37,.08);}
  .faq-item + .faq-item{margin-top:10px;}
  .faq-item summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink);}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+";margin-left:auto;font-size:20px;font-weight:400;color:var(--gold);flex-shrink:0;transition:transform .15s ease;}
  .faq-item[open] summary::after{transform:rotate(45deg);}
  /* Pastille d'icône façon service-card-icon (page Services) plutôt qu'un
     simple numéro : même langage visuel, mais l'émoji de catégorie donne
     un repère utile en un coup d'œil dans une longue liste. */
  .faq-item .faq-q-icon{width:36px;height:36px;border-radius:10px;background:var(--gold-dim);font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .faq-item .faq-a{color:var(--mute);font-size:14.5px;line-height:1.75;padding:0 20px 18px 70px;}

  /* Services */
  .service-card{display:flex;align-items:center;gap:16px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:18px 20px;text-align:left;text-decoration:none;color:var(--ink);width:100%;}
  .service-card:hover{border-color:var(--gold-hi);}
  .service-card-icon{width:46px;height:46px;border-radius:12px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}

  /* Valeurs (mission) */
  .value-chip{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;}

  /* Bandeau de confiance sur la fiche produit */
  .trust-badge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;}
  .trust-badge{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:10px 6px;font-size:11px;font-weight:600;color:var(--mute);line-height:1.3;}
  .trust-badge svg{width:18px;height:18px;color:var(--gold);}
  @media (max-width:400px){ .trust-badge{font-size:10px;} }

  /* ---- Page boutique commerçant (refonte) ---- */
  .shop-header-card{background:#FFFFFF;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 2px 18px rgba(20,19,15,.06);}
  @media (max-width:640px){ .shop-header-card{padding:20px;border-radius:14px;} }
  .shop-header-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
  .shop-logo-plate{width:176px;height:176px;border-radius:28px;overflow:hidden;background:var(--gold-dim);border:2px solid var(--gold-hi);flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(142,100,37,.18);}
  .shop-logo-plate img{width:100%;height:100%;object-fit:cover;}
  .shop-logo-plate span{font-size:52px;}
  @media (max-width:640px){ .shop-logo-plate{width:136px;height:136px;border-radius:24px;} .shop-logo-plate span{font-size:40px;} }
  .shop-logo-plate img{width:100%;height:100%;object-fit:cover;}
  .shop-logo-plate span{font-family:var(--display);font-size:36px;font-weight:700;color:var(--gold);}
  @media (max-width:640px){ .shop-logo-plate span{font-size:30px;} }
  /* Boutique sans logo : plaque bleu marine + initiale blanche, pour
     distinguer d'un simple "pas encore de photo" doré et donner un vrai
     repère visuel cohérent partout où une boutique peut manquer de logo
     (annuaire ET fiche boutique). */
  .shop-logo-plate.no-photo{background:var(--steel);border-color:var(--steel);}
  .shop-logo-plate.no-photo span{color:#fff;}
  .shop-badge-pill{font-size:11px;background:var(--gold-dim);color:var(--gold);padding:3px 9px;border-radius:20px;font-weight:600;}
  .shop-badge-verified{background:var(--tile-green-bg);color:var(--tile-green-fg);}
  .shop-title{font-family:var(--display);font-size:25px;font-weight:700;margin:0;letter-spacing:-.2px;}
  .shop-desc{color:var(--mute);font-size:14.5px;line-height:1.75;margin-top:18px;max-width:640px;}
  .shop-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
  .shop-info-item{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mute);}
  .shop-info-item svg{flex-shrink:0;color:var(--gold);}
  .shop-social-row{display:flex;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
  .shop-social-row a{transition:transform .15s ease;}
  .shop-social-row a:hover{transform:translateY(-2px);}

  /* Messagerie : édition/suppression, emojis, notes vocales */
  .msg-bubble{position:relative;}
  .msg-actions{display:none;gap:8px;justify-content:flex-end;margin-top:4px;}
  .msg-bubble:hover .msg-actions{display:flex;}
  .msg-actions button{background:none;border:none;cursor:pointer;font-size:12px;opacity:.7;padding:2px;}
  .msg-actions button:hover{opacity:1;}
  .msg-attach-btn.recording{background:var(--danger);color:#fff;border-color:var(--danger);animation:novex-pulse 1.2s infinite;}
  @keyframes novex-pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
  .emoji-picker{position:absolute;bottom:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.16);padding:8px;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;z-index:20;width:220px;}
  .emoji-picker button{background:none;border:none;cursor:pointer;font-size:19px;padding:4px;border-radius:6px;line-height:1;}
  .emoji-picker button:hover{background:var(--bg-soft);}

  /* Variantes produit (fiche produit + éditeur commerçant) */
  .variant-selector{margin-top:18px;display:flex;flex-direction:column;gap:16px;}
  .variant-group-label{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:8px;}
  .variant-chip-row{display:flex;flex-wrap:wrap;gap:9px;}
  .variant-chip{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:8px 16px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink);transition:all .15s ease;}
  .variant-chip:hover{border-color:var(--gold-hi);transform:translateY(-1px);box-shadow:0 3px 8px rgba(20,18,15,.08);}
  .variant-chip.selected{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 3px 8px rgba(142,100,37,.25);}
  .variant-chip.selected:hover{transform:none;}
  .variant-chip .chip-remove{margin-left:7px;background:rgba(255,255,255,.25);border:none;color:inherit;cursor:pointer;width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;line-height:1;vertical-align:middle;}
  .variant-editor-section{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px;}
  .variant-editor-head{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
  .variant-preset-picker summary{display:flex;align-items:center;gap:7px;list-style:none;background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:9px 13px;font-size:12px;font-weight:600;color:var(--mute);cursor:pointer;transition:border-color .15s ease,color .15s ease;}
  .variant-preset-picker summary::-webkit-details-marker{display:none;}
  .variant-preset-picker summary:hover{border-color:var(--gold-hi);color:var(--ink);}
  .variant-preset-picker summary::before{content:"▸";font-size:10px;color:var(--gold);transition:transform .15s ease;}
  .variant-preset-picker[open] summary::before{transform:rotate(90deg);}
  .variant-preset-panel{margin-top:10px;max-height:220px;overflow-y:auto;padding-right:2px;}
  /* Empilé verticalement (au lieu de côte-à-côte) : sur un rectangle
     étroit, mettre l'input et le bouton "Ajouter" côte à côte forçait le
     bouton à sortir du cadre ou le texte du champ à être tronqué. En
     colonne, les deux occupent toute la largeur disponible proprement. */
  .variant-custom-row{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
  .variant-custom-row input{width:100%;background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px 14px;font-size:13px;box-sizing:border-box;}
  .variant-custom-row .btn{border-radius:20px;width:100%;}

  /* ---- Annuaire des boutiques (grille 2 colonnes, logo en grand) ---- */
  .dir-sort-row{display:flex;gap:8px;margin-top:14px;align-items:center;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
  .dir-sort-row::-webkit-scrollbar{display:none;}
  .dir-sort-label{font-size:12.5px;color:var(--mute);font-weight:700;flex-shrink:0;}
  .dir-sort-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:34px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:0 15px;font-size:12.5px;font-weight:600;color:var(--mute);cursor:pointer;transition:all .15s ease;white-space:nowrap;}
  .dir-sort-chip:hover{border-color:var(--gold-hi);color:var(--ink);}
  .dir-sort-chip.active{background:var(--steel);border-color:var(--steel);color:#fff;}
  .shop-dir-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px;}
  @media (min-width:640px){ .shop-dir-grid{grid-template-columns:repeat(3,1fr);} }
  @media (min-width:960px){ .shop-dir-grid{grid-template-columns:repeat(4,1fr);} }
  /* Même fondation visuelle que les cartes de la page Catégories : grande
     photo pleine largeur en haut, nom en dessous dans une carte blanche à
     bords arrondis — cohérence voulue entre annuaire, catégories et
     produits. */
  .shop-dir-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;text-align:left;padding:0;}
  .shop-dir-card:hover{border-color:var(--gold-hi);box-shadow:0 8px 20px rgba(142,100,37,.12);transform:translateY(-2px);}
  .shop-dir-card-photo{width:100%;aspect-ratio:1/1;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .shop-dir-card-photo img{width:100%;height:100%;object-fit:cover;}
  .shop-dir-card-photo span{font-family:var(--display);font-size:34px;font-weight:700;color:var(--gold);}
  /* Boutique sans logo : même traitement bleu marine que sur la fiche
     boutique (shop-logo-plate.no-photo), pour une identité visuelle
     cohérente entre l'annuaire et la fiche détaillée. */
  .shop-dir-card-photo.no-photo{background:var(--steel);}
  .shop-dir-card-photo.no-photo span{color:#fff;}
  .shop-dir-card-body{padding:12px 14px 14px;}
  .shop-dir-card-name{font-family:var(--display);font-weight:700;font-size:13.5px;line-height:1.35;color:var(--ink);text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;}
  .shop-dir-card-badges{min-height:20px;display:flex;align-items:center;justify-content:center;margin-top:4px;}
  .dir-badge{font-size:10px;background:var(--gold-dim);color:var(--gold);padding:3px 10px;border-radius:20px;font-weight:700;white-space:nowrap;}
  .dir-badge-official{background:var(--steel);color:#fff;}
  .dir-badge-verified{background:var(--tile-green-bg);color:var(--tile-green-fg);}
  .shop-dir-card-rating{font-size:11.5px;color:var(--gold);display:flex;align-items:center;justify-content:center;gap:4px;margin-top:6px;min-height:16px;text-align:center;}
  .shop-dir-card-rating span{color:var(--mute);}
  .dir-no-rating{color:var(--mute) !important;font-size:11.5px;}
  .shop-dir-card-meta{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--mute);margin-top:10px;padding-top:10px;border-top:1px solid var(--line);text-align:center;}

  /* Anti-zoom automatique iPhone/Safari : sur écran tactile, Safari zoome
     automatiquement au focus sur tout champ de saisie affiché en dessous de
     16px. On force 16px minimum uniquement sur tactile (n'affecte pas la
     mise en page desktop, où ces champs gardaient leur taille d'origine). */
  @media (pointer:coarse){
    input, select, textarea{font-size:16px !important;}
  }

  /* Respecte la préférence système "réduire les animations" (accessibilité :
     confort visuel, vertiges/migraines déclenchés par le mouvement chez
     certains utilisateurs). Neutralise transitions/animations sans changer
     la mise en page — aucun risque de régression visuelle. */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
      scroll-behavior:auto !important;
    }
  }