/* ============================================================
   eMB CONNECT — SOCLE COMMUN (partagé par tous les modules)
   Aucune couleur de module en dur ici : tout passe par --accent
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   ▸ REMISE À ZÉRO — la marge par défaut de 8px du navigateur
     créait une bande claire tout autour du contenu (la navbar,
     en position:fixed, ne la subissait pas d'où l'effet "cadre").
   ============================================================ */
html,body{ margin:0; padding-left:0; padding-right:0; }
html{ background:#EFE7DA; }


:root{
  /* Couleurs de marque eMB (fixes, identité globale) */
  --emb-rouge:#E8362A; --emb-marine:#15205B; --emb-ciel:#34A8E0;
  --emb-or:#F4A62A; --emb-vert:#2FA84F; --emb-encre:#0E1430;
  --emb-gris:#6A7392; --emb-creme:#FFF6F0; --emb-fond:#F3EEE8; --emb-line:#ECE6DF;

  /* Accent par défaut (sera surchargé par le thème du module) */
  --accent:#E8362A; --accent-d:#C01D12;
  --accent-soft:#FFEDEC; --accent-grad:linear-gradient(120deg,#E8362A,#C01D12 60%,#9A140B);

  --font-display:'Bricolage Grotesque',sans-serif;
  --font-body:'Inter',sans-serif;
  --r-sm:12px; --r-md:18px; --r-lg:22px; --r-xl:28px;
  --shadow-card:0 10px 28px rgba(20,12,40,.08);
}

.emb-food *,.emb-shop *,.emb-drive *,.emb-stay *,.emb-livraison *{ box-sizing:border-box; -webkit-font-smoothing:antialiased; }
.emb-food,.emb-shop,.emb-drive,.emb-stay,.emb-livraison{ font-family:var(--font-body); color:var(--emb-encre); background:var(--emb-fond); }
.emb-food ,.emb-shop ,.emb-drive ,.emb-stay ,.emb-livraison h1,.emb-food ,.emb-shop ,.emb-drive ,.emb-stay ,.emb-livraison h2,.emb-food ,.emb-shop ,.emb-drive ,.emb-stay ,.emb-livraison h3,.emb-food ,.emb-shop ,.emb-drive ,.emb-stay ,.emb-livraison .display{ font-family:var(--font-display); letter-spacing:-.5px; }

/* BOUTONS (utilisent --accent) */
.emb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none;
  cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:15px; padding:13px 26px;
  border-radius:30px; transition:transform .12s,box-shadow .12s; text-decoration:none; }
.emb-btn:active{ transform:scale(.97); }
.emb-btn-primary{ background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.18); }
.emb-btn-primary:hover{ background:var(--accent-d); }
.emb-btn-dark{ background:var(--emb-encre); color:#fff; }
.emb-btn-outline{ background:#fff; color:var(--emb-marine); border:2px solid var(--emb-marine); }
.emb-btn-ghost{ background:var(--accent-soft); color:var(--accent); }
.emb-btn-block{ width:100%; }

/* BADGES */
.emb-badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:20px; font-size:12px; font-weight:700; }
.emb-badge-live{ background:var(--accent-soft); color:var(--accent); }
.emb-badge-free{ background:#EAF7ED; color:var(--emb-vert); }
.emb-badge-wait{ background:#FFF4E5; color:#D9781A; }
.emb-badge-gold{ background:#FFF6DB; color:#B8860B; }
.emb-badge-promo{ background:var(--emb-or); color:#3a2400; font-weight:800; }
.emb-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; animation:embPulse 1.4s infinite; }
@keyframes embPulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

.emb-card{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; }

/* TOPBAR */
/* [ancien header blanc neutralisé — Style D appliqué plus bas] */
.emb-logo{ font-family:var(--font-display); font-weight:800; font-size:26px; }
.emb-logo .e{ color:var(--emb-rouge); } .emb-logo .mb{ color:var(--emb-marine); }
.emb-logo .c{ color:var(--emb-encre); font-size:15px; }
.emb-nav{ display:flex; gap:6px; }
.emb-nav a{ padding:9px 16px; border-radius:11px; font-size:14px; font-weight:600; color:var(--emb-gris); text-decoration:none; }
.emb-nav a.on,.emb-nav a:hover{ background:var(--accent-soft); color:var(--accent); }
.emb-tb-search{ flex:1; max-width:420px; background:#F4F1ED; border-radius:13px; padding:11px 16px;
  display:flex; align-items:center; gap:10px; margin-left:auto; }
.emb-tb-search input{ border:none; background:none; outline:none; font-size:14px; font-weight:500; width:100%; color:var(--emb-encre); font-family:var(--font-body); }
.emb-cart-btn{ width:46px; height:46px; border-radius:13px; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:19px; position:relative; text-decoration:none; }
.emb-cart-btn .cnt{ position:absolute; top:-5px; right:-5px; background:var(--emb-or); color:#3a2400;
  font-size:11px; font-weight:800; min-width:20px; height:20px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; padding:0 5px; }
.emb-ava{ width:46px; height:46px; border-radius:13px; background:#F4F1ED; display:flex; align-items:center; justify-content:center; font-size:20px; text-decoration:none; }

/* HERO (dégradé = celui du module) */
.emb-hero{ margin:28px 40px 0; border-radius:var(--r-xl); padding:46px 48px;
  background:var(--accent-grad); display:flex; justify-content:space-between; align-items:center;
  position:relative; overflow:hidden; }
.emb-hero h1{ color:#fff; font-weight:800; font-size:46px; line-height:1.02; }
.emb-hero h1 em{ font-style:normal; color:#FFD9B0; }
.emb-hero p{ color:rgba(255,255,255,.85); font-size:16px; font-weight:500; margin-top:10px; }
.emb-hero .dish{ font-size:150px; filter:drop-shadow(0 18px 30px rgba(0,0,0,.3)); }

/* MODULES (couleurs fixes — c'est le sélecteur d'apps, toujours multicolore) */
.emb-mods{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin:24px 40px 0; }
.emb-mod{ border-radius:var(--r-md); padding:20px 22px; color:#fff; display:flex; align-items:center;
  gap:14px; text-decoration:none; transition:transform .12s; }
.emb-mod:hover{ transform:translateY(-2px); }
.emb-mod .nm{ font-family:var(--font-display); font-weight:700; font-size:17px; }
.emb-mod .sb{ font-size:11.5px; opacity:.85; font-weight:500; }
.emb-mod-food{ background:linear-gradient(135deg,#F4533F,#C01D12); }
.emb-mod-shop{ background:linear-gradient(135deg,#3DB85A,#218A3C); }
.emb-mod-drive{ background:linear-gradient(135deg,#42B4E6,#1E8BC4); }
.emb-mod-stay{ background:linear-gradient(135deg,#2E3B86,#15205B); }
.emb-mod-livr{ background:linear-gradient(135deg,#F6B23C,#D9781A); }

/* CARTE (générique, accent dynamique) */
.emb-rcard{ background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card);
  transition:transform .15s,box-shadow .15s; text-decoration:none; color:inherit; display:block; }
.emb-rcard:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(20,12,40,.12); }
.emb-rcard .ph{ height:148px; position:relative; display:flex; align-items:center; justify-content:center;
  font-size:60px; background-size:cover; background-position:center; }
.emb-rcard .ph-grad{ background:var(--accent-grad); }
.emb-rcard .fav{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; font-size:15px; border:none; cursor:pointer; }
.emb-rcard .live{ position:absolute; bottom:12px; left:12px; background:rgba(255,255,255,.95); padding:6px 11px;
  border-radius:30px; font-size:11px; font-weight:700; color:var(--accent); display:flex; align-items:center; gap:6px; }
.emb-rcard .promo{ position:absolute; top:12px; left:12px; }
.emb-rcard .body{ padding:15px 16px 17px; }
.emb-rcard .nm{ font-family:var(--font-display); font-size:18px; font-weight:700; }
.emb-rcard .tg{ color:var(--emb-gris); font-size:12.5px; font-weight:500; margin:3px 0 12px; }
.emb-rcard .foot{ display:flex; justify-content:space-between; align-items:center; }
.emb-rate{ font-size:12.5px; font-weight:700; } .emb-star{ color:var(--emb-or); }
.emb-price{ font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--accent); }

/* layouts */
.emb-wrap-home{ display:grid; grid-template-columns:230px 1fr 320px; gap:28px; padding:32px 40px 48px; }
.emb-wrap-resto{ display:grid; grid-template-columns:200px 1fr 340px; gap:28px; padding:30px 40px 48px; }
.emb-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.emb-side h3{ font-family:var(--font-display); font-size:11px; font-weight:700; margin-bottom:14px; color:var(--emb-gris); text-transform:uppercase; letter-spacing:1px; }
.emb-side .cat{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:13px; font-size:14px; font-weight:600; color:var(--emb-gris); cursor:pointer; margin-bottom:3px; text-decoration:none; }
.emb-side .cat.on,.emb-side .cat:hover{ background:var(--emb-encre); color:#fff; }
.emb-catnav{ align-self:start; position:sticky; top:98px; }
.emb-shead{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.emb-shead h2{ font-size:23px; font-weight:700; }
.emb-shead a{ color:var(--accent); font-size:13px; font-weight:700; text-decoration:none; }

/* ===== TAB BAR premium (pastille + bouton central) — couleur = accent du module ===== */
.emb-tabbar{ display:none; }
@media (max-width:980px){
  .emb-tabbar{ display:flex; align-items:flex-end; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:rgba(255,255,255,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 -6px 24px rgba(20,12,40,.08); border-top:1px solid #EEEDE9;
    padding:8px 8px calc(10px + env(safe-area-inset-bottom,0px)); justify-content:space-around; }
  .emb-tab{ display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none;
    color:#9AA1AE; font-size:10.5px; font-weight:600; flex:1; padding:0; transition:.18s; }
  .emb-tab .ic{ width:46px; height:32px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:20px; line-height:1; transition:.2s; filter:grayscale(1) opacity(.5); }
  .emb-tab.on{ color:var(--accent); font-weight:700; }
  .emb-tab.on .ic{ background:var(--accent-soft, color-mix(in srgb, var(--accent) 14%, transparent));
    filter:none; transform:translateY(-1px); }
  body.emb-has-tabbar{ padding-bottom:76px; }

/* Compensation navbar fixe (emb-topbar, position:fixed).
   Les pages avec un conteneur .hv compensent DÉJÀ via home-vision.css
   (padding-top sur .hv). Pour les pages SANS .hv (register, login, et
   autres pages simples), on ajoute la classe .emb-need-topbar-space sur
   leur conteneur racine, qui applique la même compensation.
   → une seule source de padding par page, jamais de double espace. */
/* Compensation navbar fixe (emb-topbar 70px/62px), UNE SEULE source :
   sur le body des layouts qui affichent la navbar. Le .hv ne compense
   plus (mis à 0) pour éviter tout double espace. Si le layout masque la
   navbar (embOwnHeader), retirer la classe emb-topbar-pad du body. */
body.emb-topbar-pad{ padding-top:70px; }
@media (max-width:980px){
  body.emb-topbar-pad{ padding-top:62px; }
}

  /* bouton central en relief (fab) */
  .emb-tab.fab{ flex:0 0 auto; width:62px; }
  .emb-tab.fab .fb{ width:54px; height:54px; margin:-24px auto 3px; border-radius:18px;
    background:var(--accent-grad, linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #000)));
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1;
    box-shadow:0 10px 22px var(--accent-glow, color-mix(in srgb, var(--accent) 40%, transparent)); transition:.2s; }
  .emb-tab.fab .lb{ color:var(--accent); font-weight:700; }
  .emb-tab.fab:active .fb{ transform:scale(.93); }
}

/* Accents des modules (garantis pour la tabbar, quel que soit le CSS du module) */
.emb-drive{ --accent:#34A8E0; }
.emb-stay{ --accent:#7C5CFC; }
.emb-food{ --accent:#E8362A; }
.emb-shop{ --accent:#1DB954; }
.emb-livraison{ --accent:#F39314; }
.emb-home{ --accent:#141A22; }

/* Accent module WALLET (utilisé par la tabbar .emb-wallet et les pages wallet) */
.emb-wallet{ --accent:#4F7CFF; --accent-d:#3A66E6; --accent-soft:#EEF3FF;
  --accent-glow:rgba(79,124,255,.4);
  --accent-grad:linear-gradient(135deg,#4F7CFF 0%,#6D5CFF 60%,#8B5CF6 100%); }

/* ===== Bascule mobile commune ===== */
@media (max-width:980px){
  .emb-topbar{ padding:0 16px; height:62px; gap:14px; }
  .emb-nav{ display:none; }
  .emb-tb-search{ max-width:none; }
  .emb-hero{ margin:16px 16px 0; padding:30px 22px; flex-direction:column; align-items:flex-start; }
  .emb-hero h1{ font-size:32px; }
  .emb-hero .dish{ position:absolute; right:10px; top:10px; font-size:90px; opacity:.85; }
  .emb-mods{ margin:18px 16px 0; gap:9px; }
  .emb-mod{ flex-direction:column; gap:7px; padding:13px 6px; text-align:center; }
  .emb-mod .sb{ display:none; } .emb-mod .nm{ font-size:12px; }
  .emb-wrap-home,.emb-wrap-resto{ grid-template-columns:1fr; padding:18px 16px 90px; gap:18px; }
  .emb-side,.emb-catnav{ display:none; }
  .emb-grid-2{ grid-template-columns:1fr; }
}
.emb-food a:focus-visible,.emb-shop a:focus-visible,.emb-drive a:focus-visible,.emb-stay a:focus-visible,.emb-livraison a:focus-visible,.emb-food button:focus-visible,.emb-shop button:focus-visible,.emb-drive button:focus-visible,.emb-stay button:focus-visible,.emb-livraison button:focus-visible{ outline:3px solid var(--emb-ciel); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .emb-food *,.emb-shop *,.emb-drive *,.emb-stay *,.emb-livraison *{ animation:none!important; transition:none!important; } }

/* ===== Bannière inter-modules (switch entre univers) ===== */
.emb-modbar{display:flex;gap:10px;align-items:center;padding:12px 40px;background:#fff;border-bottom:1px solid var(--emb-line);overflow-x:auto}
.emb-modbar::-webkit-scrollbar{display:none}
.emb-modbar .lbl{font-size:12px;font-weight:700;color:var(--emb-gris);white-space:nowrap;margin-right:4px}
.emb-modlink{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:30px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:.13s;border:1.5px solid transparent}
.emb-modlink .e{font-size:16px}
.emb-modlink.food{background:#FFEDEC;color:#E8362A}
.emb-modlink.shop{background:#EAF7ED;color:#2FA84F}
.emb-modlink.drive{background:#E6F4FB;color:#1E8BC4}
.emb-modlink.stay{background:#E7E9F2;color:#15205B}
.emb-modlink.campus{background:#FFF1E0;color:#D9781A}
.emb-modlink:hover{transform:translateY(-1px);filter:brightness(.97)}
.emb-modlink.current{border-color:currentColor}
@media(max-width:980px){.emb-modbar{padding:10px 16px}.emb-modbar .lbl{display:none}}


/* ============================================================
   NAVBAR + FOOTER eMB (commun à TOUS les layouts de module)
   Couleur via var(--accent) défini par chaque layout
   ============================================================ */
.emb-topbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fff;border-bottom:1px solid #EEF0F5}
.emb-topbar::before{content:'';position:absolute;inset:0;background:none;pointer-events:none}
.emb-topbar .emb-tb-inner{position:relative;max-width:1180px;margin:0 auto;padding:0 40px;height:70px;display:flex;align-items:center;gap:26px}
.emb-topbar .emb-logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;color:#0F1729;text-decoration:none;letter-spacing:-.5px}
.emb-topbar .emb-logo span{background:linear-gradient(90deg,#34A8E0,#7C5CFC);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.emb-topbar .emb-nav{display:flex;gap:4px;flex:1}
.emb-topbar .emb-nav>a,.emb-topbar .emb-navitem>a{font-size:14px;font-weight:600;color:#42495B;text-decoration:none;padding:8px 14px;border-radius:10px;transition:.15s;display:flex;align-items:center;gap:5px}
.emb-topbar .emb-nav>a:hover,.emb-topbar .emb-navitem>a:hover{background:#F4F6FA;color:#0F1729}
.emb-topbar .emb-nav>a.on{color:#4F7CFF;background:rgba(79,124,255,.1)}
.emb-topbar .emb-search{flex:1;max-width:380px;display:flex;align-items:center;gap:9px;background:#F4F6FA;border:1px solid #EAEEF3;border-radius:30px;padding:9px 16px}
.emb-topbar .emb-search input{flex:1;background:none;border:none;outline:none;color:#0F1729;font-size:14px;font-family:inherit}
.emb-topbar .emb-search input::placeholder{color:#9098A8}
.emb-topbar .emb-search .ic{color:#9098A8;font-size:15px}
@media(max-width:1100px){.emb-topbar .emb-search{display:none}}
.emb-btn-ghost{font-size:14px;font-weight:600;color:#42495B;text-decoration:none;padding:9px 16px;border-radius:11px;border:1.5px solid #E2E7F0}
.emb-btn-ghost:hover{border-color:#4F7CFF;color:#4F7CFF}
.emb-btn-fill{font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,#34A8E0,#7C5CFC);text-decoration:none;padding:10px 18px;border-radius:11px;border:none}
.emb-btn-fill:hover{filter:brightness(1.08)}
.emb-acct-btn{display:flex;align-items:center;gap:10px;background:#F4F6FA;border:1px solid #EAEEF3;padding:6px 14px 6px 6px;border-radius:30px;cursor:pointer;color:#0F1729;font-weight:600;font-size:14px}
.emb-acct-btn:hover{background:rgba(255,255,255,.14)}
.emb-acct-btn .emb-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#34A8E0,#7C5CFC);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;flex-shrink:0}
.emb-acct-btn .emb-ar{color:rgba(255,255,255,.6);font-size:11px}
.emb-burger{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:#fff}
.emb-tb-mobile{display:none}
.emb-topbar .emb-tb-inner{max-width:1180px;margin:0 auto;padding:0 40px;height:66px;display:flex;align-items:center;gap:24px}
.emb-topbar .emb-logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;color:#0B0E13;text-decoration:none;letter-spacing:-.5px}
.emb-topbar .emb-logo span{color:var(--accent,#34A8E0)}
.emb-tb-right{display:flex;align-items:center;gap:10px}
.emb-acct{position:relative}
.emb-acct-menu{display:none;position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border:1px solid #EDEDF0;border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.14);min-width:220px;padding:8px;z-index:200}
.emb-acct::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px}
.emb-acct:hover .emb-acct-menu,.emb-acct:focus-within .emb-acct-menu{display:block}
.emb-acct-menu a{display:flex;align-items:center;gap:9px;font-size:14px;color:#42495B;text-decoration:none;padding:10px 14px;border-radius:9px}
.emb-acct-menu a:hover{background:#F2F4F7;color:#0B0E13}
.emb-acct-menu a.danger{color:#E8362A}
.emb-acct-menu .sep{height:1px;background:#F0F0F2;margin:6px 4px}
.emb-foot{background:#0B0E13;color:#fff;margin-top:60px}
.emb-foot-inner{max-width:1180px;margin:0 auto;padding:54px 40px;display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:32px}
.emb-foot-brand .emb-logo{color:#fff;margin-bottom:14px;display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;text-decoration:none}
.emb-foot-brand .emb-logo span{color:var(--accent,#34A8E0)}
.emb-foot-brand p{color:rgba(255,255,255,.6);font-size:14px;line-height:1.6;max-width:320px}
.emb-foot-col h5{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;margin:0 0 16px}
.emb-foot-col a{display:block;color:rgba(255,255,255,.6);font-size:14px;text-decoration:none;padding:6px 0;transition:.15s}
.emb-foot-col a:hover{color:var(--accent,#34A8E0)}
.emb-foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 40px;text-align:center;font-size:13px;color:rgba(255,255,255,.5)}
.emb-mobnav{display:none}
@media (max-width:980px){
  .emb-topbar .emb-tb-inner{padding:0 18px;gap:14px}
  .emb-topbar .emb-nav,.emb-tb-right{display:none}
  .emb-burger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#0F1729;color:#fff;font-size:18px;padding:0}
  /* Option C — barre d'icônes mobile (recherche, notif, avatar) sur header blanc */
  .emb-tb-mobile{display:flex;align-items:center;gap:8px;margin-left:auto}
  .emb-mi{width:40px;height:40px;border-radius:12px;background:#F4F6FA;border:1px solid #EAEEF3;
    display:flex;align-items:center;justify-content:center;font-size:17px;text-decoration:none;position:relative;flex-shrink:0;color:#42495B}
  .emb-mi:hover{background:#ECEFF4}
  .emb-mi-dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:#E8362A;border:1.5px solid #fff}
  .emb-mi-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#4F7CFF,#6D5CFF);
    color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;text-decoration:none;flex-shrink:0;
    font-family:'Bricolage Grotesque',sans-serif}
  .emb-foot-inner{grid-template-columns:1fr 1fr;gap:28px;padding:40px 20px}

  .emb-mobnav{
    display:flex;flex-direction:column;
    position:fixed;top:66px;left:0;right:0;bottom:0;
    background:#0B0E13;padding:18px;gap:2px;
    overflow-y:auto;z-index:300;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
  }
  .emb-mobnav.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .emb-mobnav a{
    color:rgba(255,255,255,.85);text-decoration:none;
    font-size:15px;font-weight:600;padding:13px 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .emb-mobnav a:hover{color:#fff}
}
@media (max-width:600px){.emb-foot-inner{grid-template-columns:1fr}}

/* ===== SOUS-MENUS DÉROULANTS (navbar) ===== */
.emb-nav{position:relative}
.emb-navitem{position:relative}
.emb-navitem>a{display:flex;align-items:center;gap:5px}
.emb-navitem>a .car{font-size:10px;transition:.2s}
.emb-dropdown{
  display:none;position:absolute;top:100%;left:0;margin-top:10px;
  background:#fff;border:1px solid #EDEDF0;border-radius:14px;
  box-shadow:0 16px 44px rgba(0,0,0,.14);min-width:230px;padding:8px;z-index:200;
}
/* comble le vide entre le bouton et le menu pour que le survol ne se coupe pas */
.emb-navitem::after{content:'';position:absolute;top:100%;left:0;right:0;height:14px}
.emb-navitem:hover .emb-dropdown,.emb-navitem:focus-within .emb-dropdown{display:block}
.emb-navitem:hover>a .car{transform:rotate(180deg)}
.emb-dropdown a{display:flex;align-items:center;gap:8px;font-size:14px;color:#42495B;text-decoration:none;padding:10px 14px;border-radius:9px;white-space:nowrap}
.emb-dropdown a:hover{background:#F2F4F7;color:#0B0E13}
.emb-dropdown .sep{height:1px;background:#F0F0F2;margin:6px 4px}
.emb-dropdown .badge-count{background:#E65100;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:auto}

/* mobile : sous-menus en accordéon dans le menu burger */
.emb-mobnav .emb-mob-sub{display:flex;flex-direction:column;padding-left:14px;border-left:2px solid #F0F0F2;margin:4px 0 8px}
.emb-mobnav .emb-mob-sub a{padding:9px 8px;font-size:14px;font-weight:500}

/* ============================================================
   BANNIÈRE NOTIFICATION INVITÉ (commandes/réservations en session)
   ============================================================ */
.emb-invite-banner{background:linear-gradient(90deg,#15205B,#34A8E0);color:#fff;position:relative;z-index:90}
.emb-invite-inner{max-width:1180px;margin:0 auto;padding:10px 40px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.emb-invite-msg{display:flex;align-items:center;gap:10px;font-size:13px;flex-wrap:wrap}
.emb-invite-bell{font-size:15px}
.emb-invite-sub{opacity:.78;font-size:12px}
.emb-invite-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.emb-invite-pill{color:#fff;background:rgba(255,255,255,.18);padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
.emb-invite-pill:hover{background:rgba(255,255,255,.3)}
.emb-invite-cta{color:#15205B;background:#fff;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
.emb-invite-cta:hover{filter:brightness(.96)}
.emb-invite-close{background:none;border:none;color:#fff;opacity:.65;cursor:pointer;font-size:19px;padding:0 2px;line-height:1}
.emb-invite-close:hover{opacity:1}

@media(max-width:980px){
  .emb-invite-inner{padding:9px 18px}
  .emb-invite-msg{font-size:12.5px}
  .emb-invite-sub{display:none}
}
@media(max-width:600px){
  .emb-invite-inner{flex-direction:column;align-items:flex-start;gap:8px}
  .emb-invite-actions{width:100%;justify-content:flex-start}
}

/* ===================== SIDEBAR MOBILE CLAIRE ===================== */
.emb-side-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,41,.5);z-index:1050;opacity:0;transition:opacity .25s}
.emb-side-overlay.open{display:block;opacity:1}
.emb-side{position:fixed;top:0;right:0;bottom:0;width:87%;max-width:380px;background:#fff;z-index:1060;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:-20px 0 50px rgba(15,23,41,.18)}
.emb-side.open{transform:translateX(0)}
.emb-side-head{padding:18px 18px 18px;background:linear-gradient(135deg,#4F7CFF,#6D5CFF);color:#fff;position:relative;overflow:hidden;flex-shrink:0}
.emb-side-head::after{content:'';position:absolute;top:-40px;right:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.1)}
.emb-side-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;position:relative}
.emb-side-top .lg{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px}
.emb-side-x{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.2);border:none;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer}
.emb-side-prof{display:flex;align-items:center;gap:11px;position:relative;text-decoration:none;color:#fff}
.emb-side-av{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;font-family:'Bricolage Grotesque',sans-serif;flex-shrink:0}
.emb-side-prof .nm{font-weight:700;font-size:14.5px}
.emb-side-prof .em{font-size:11.5px;opacity:.85;margin-top:1px}
.emb-side-body{flex:1;overflow-y:auto;padding:16px}
.emb-side-t{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#9098A8;font-weight:700;margin:14px 0 10px}
.emb-side-t:first-child{margin-top:0}
.emb-side-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:6px}
.emb-scard{display:flex;align-items:center;gap:9px;padding:12px;border:1px solid #EEF0F5;border-radius:14px;text-decoration:none;color:#0F1729;transition:.15s}
.emb-scard:hover{border-color:#4F7CFF;background:#F8FAFF}
.emb-scard .ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.emb-scard .nm{font-size:13px;font-weight:700}
.emb-scard .ds{font-size:10.5px;color:#8792A2}
.emb-srow{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid #F1F3F7;text-decoration:none;color:#0F1729}
.emb-srow:hover{background:#F8FAFF}
.emb-srow .ic{width:32px;height:32px;border-radius:9px;background:#F4F6FA;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.emb-srow .nm{flex:1;font-size:13.5px;font-weight:600}
.emb-srow .ar{color:#C4CBD6;font-size:15px}
.emb-side-foot{padding:14px 16px;border-top:1px solid #EEF0F5;flex-shrink:0}
.emb-side-foot a{display:block;text-align:center;padding:12px;border-radius:12px;font-weight:700;font-size:13.5px;text-decoration:none}
.emb-side-foot a.danger{background:#FDECEA;color:#E8362A}
.emb-side-foot a.login{background:linear-gradient(135deg,#4F7CFF,#6D5CFF);color:#fff}
/* la sidebar ne s'affiche qu'en mobile */
@media(min-width:981px){.emb-side,.emb-side-overlay{display:none!important}}

/* Option A — masquer le footer complet en mobile quand une tabbar est présente */
@media(max-width:980px){
  body.emb-tabbar-on .emb-foot{display:none}
}


/* ================================================================
   NAVBAR DARK — cohérence avec la home, le footer et le menu mobile
   ----------------------------------------------------------------
   Le footer (.emb-foot #0B0E13) et le menu mobile (.emb-mobnav #0B0E13)
   étaient déjà sombres ; seule .emb-topbar avait été passée en blanc,
   ce qui laissait 3 règles orphelines cassées :
     .emb-burger{color:#fff}                    → burger invisible
     .emb-acct-btn:hover{background:rgba(255,255,255,.14)} → hover invisible
     .emb-acct-btn .emb-ar{color:rgba(255,255,255,.6)}     → flèche invisible
   Ce bloc rebascule la barre en sombre : les 3 règles redeviennent
   correctes et toute la chrome du site est enfin homogène.
   Placé en fin de fichier → prime sur les règles claires ci-dessus.
   ================================================================ */

/* ── Barre ── */
.emb-topbar{
  background:rgba(11,14,19,.9);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.07);
}

/* ── Logo ── */
.emb-topbar .emb-logo{ color:#fff; }
.emb-topbar .emb-logo span{
  background:none; -webkit-text-fill-color:currentColor;
  color:var(--accent,#34A8E0);
}

/* ── Liens de navigation ── */
.emb-topbar .emb-nav>a,
.emb-topbar .emb-navitem>a{ color:rgba(255,255,255,.62); }
.emb-topbar .emb-nav>a:hover,
.emb-topbar .emb-navitem>a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.emb-topbar .emb-nav>a.on,
.emb-topbar .emb-navitem>a.on{
  color:var(--accent,#34A8E0);
  background:rgba(255,255,255,.08);
}

/* ── Recherche ── */
.emb-topbar .emb-search{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.emb-topbar .emb-search input{ color:#fff; }
.emb-topbar .emb-search input::placeholder{ color:rgba(255,255,255,.35); }
.emb-topbar .emb-search .ic{ color:rgba(255,255,255,.4); }

/* ── Boutons ──
   base.css:36 applique .emb-btn-ghost{background:var(--accent-soft)} — une teinte
   CLAIRE (#FFEDEC). Sans neutraliser ce background, on obtient du texte blanc sur
   fond rose : bouton illisible. Il faut donc TOUJOURS redéclarer background ici. */
.emb-topbar .emb-btn-ghost{
  background:transparent;
  color:rgba(255,255,255,.78);
  border:1.5px solid rgba(255,255,255,.18);
}
.emb-topbar .emb-btn-ghost:hover{
  background:rgba(255,255,255,.08);
  border-color:var(--accent,#34A8E0);
  color:#fff;
}

/* ── Bouton compte ── */
.emb-topbar .emb-acct-btn{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.emb-topbar .emb-acct-btn:hover{ background:rgba(255,255,255,.14); }

/* ── Menus déroulants (nav + compte) ── */
.emb-topbar .emb-dropdown,
.emb-topbar .emb-acct-menu{
  background:#111721;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 56px rgba(0,0,0,.6);
}
.emb-topbar .emb-dropdown a,
.emb-topbar .emb-acct-menu a{ color:rgba(255,255,255,.72); }
.emb-topbar .emb-dropdown a:hover,
.emb-topbar .emb-acct-menu a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.emb-topbar .emb-dropdown .sep,
.emb-topbar .emb-acct-menu .sep{ background:rgba(255,255,255,.09); }
.emb-topbar .emb-acct-menu a.danger{ color:#F09595; }
.emb-topbar .emb-acct-menu a.danger:hover{ background:rgba(226,75,74,.14); color:#F7C1C1; }

/* ── Sous-menu mobile ── */
.emb-mobnav .emb-mob-sub{ border-left:2px solid rgba(255,255,255,.12); }


/* ================================================================
   TABBAR MOBILE DARK — même logique que la navbar et le footer
   ----------------------------------------------------------------
   Elle était en rgba(255,255,255,.94) : seule pièce claire restante
   de la chrome. Le FAB central utilise var(--accent) : il reste
   lisible sur fond sombre, rien d'autre à retoucher de ce côté.
   ================================================================ */
.emb-tabbar{
  background:rgba(11,14,19,.94);
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -6px 24px rgba(0,0,0,.45);
}
.emb-tab{ color:rgba(255,255,255,.42); }
.emb-tab.on{ color:var(--accent); }

/* La pastille de l'onglet actif utilisait var(--accent-soft), une teinte
   CLAIRE (#FFEDEC par défaut) : tache blanche sur la barre sombre.
   On la remplace par un voile translucide, neutre sur n'importe quel accent. */
.emb-tab.on .ic{ background:rgba(255,255,255,.1); }


/* ================================================================
   NAVBAR MOBILE — même comportement que la home
   ----------------------------------------------------------------
   base.css:247 faisait « .emb-tb-right{display:none} » : sur mobile,
   Connexion, S'inscrire ET l'avatar du compte disparaissaient tous.
   Un client connecté ne voyait donc plus qu'il l'était.

   La home (home-vision.css:853) fait plus fin :
     .hv-menu, .hv-btn-ghost, .hv-wchip, .hv-prowrap { display:none }
   → elle garde le CTA principal (S'inscrire) et l'avatar.
   On reproduit exactement ça ici.
   ================================================================ */
@media (max-width:980px){

  /* On ré-affiche la zone droite (elle était masquée en bloc) */
  .emb-topbar .emb-tb-right{
    display:flex; align-items:center; gap:8px; margin-left:auto;
  }

  /* Connexion : retirée de la barre — elle reste dans le menu burger */
  .emb-topbar .emb-btn-ghost{ display:none; }

  /* S'inscrire : conservé, c'est le CTA principal (comme sur la home) */
  .emb-topbar .emb-btn-fill{
    font-size:13px; padding:9px 14px; border-radius:10px; white-space:nowrap;
  }

  /* Compte connecté : avatar conservé, compacté pour tenir sur la barre */
  .emb-topbar .emb-acct-btn{
    font-size:13px; padding:5px 10px 5px 5px; gap:7px;
    max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .emb-topbar .emb-acct-btn .emb-av{ width:28px; height:28px; font-size:13px; }

  /* Burger : lisible sur la barre sombre (il était en #0F1729, presque
     invisible sur un fond #0B0E13) */
  .emb-topbar .emb-burger{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:12px; padding:0;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    color:#fff; font-size:18px;
  }
  .emb-topbar .emb-burger:active{ background:rgba(255,255,255,.16); }
}


/* ════════════════════════════════════════════════════════════════
   MENU MOBILE PREMIUM (home.blade.php)
   ----------------------------------------------------------------
   Le HTML (emb-mob-head / body / card / prof / row) existait sans
   AUCUN CSS → rendu cassé + logo « eMB Connect » en double.
   Ce bloc le style entièrement.

   Clé anti-double-logo : le panneau couvre TOUT l'écran (top:0),
   il recouvre donc la navbar. Le seul logo visible est celui du
   menu (emb-mob-head), plus celui de la navbar derrière.
   ════════════════════════════════════════════════════════════════ */

/* Overlay sombre derrière le panneau */
.emb-mob-overlay{
  display:none; position:fixed; inset:0; z-index:1400;
  background:rgba(0,0,0,.5); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .25s ease;
}
.emb-mob-overlay.open{ display:block; opacity:1; }

@media (max-width:980px){

  /* Le panneau : plein écran, glisse depuis la droite.
     top:0 → recouvre la navbar (fini le logo en double). */
  .emb-mobnav{
    display:flex; flex-direction:column;
    position:fixed; top:0; right:0; bottom:0;
    left:auto;                      /* annule le left:0 du bloc précédent */
    width:min(86vw,360px);
    background:#0B0E13; z-index:1500;
    padding:0; gap:0; overflow-y:auto;
    transform:translateX(100%);     /* caché à droite */
    opacity:1; pointer-events:none;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:-20px 0 60px rgba(0,0,0,.5);
  }
  .emb-mobnav.open{ transform:translateX(0); pointer-events:auto; }

  /* Annule le style de lien générique du bloc mobile précédent :
     ici les liens sont des .emb-mob-row / .emb-mob-card stylés à part. */
  .emb-mobnav a{ border-bottom:none; padding:0; font-size:inherit; color:inherit; }

  /* ── En-tête du menu ── */
  .emb-mob-head{
    padding:16px 18px 14px; background:#0d1119;
    border-bottom:1px solid rgba(255,255,255,.07);
    position:sticky; top:0; z-index:2;
  }
  .emb-mob-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .emb-mob-top .lg{ font-size:17px; font-weight:800; color:#fff; letter-spacing:-.3px; }
  .emb-mob-x{
    width:34px; height:34px; border-radius:9px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
    color:#fff; font-size:16px; cursor:pointer; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .emb-mob-x:active{ background:rgba(255,255,255,.16); }

  /* Bloc profil / bienvenue */
  .emb-mob-prof{
    display:flex; align-items:center; gap:12px;
    padding:10px; background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08); border-radius:12px;
  }
  .emb-mob-av{
    width:42px; height:42px; border-radius:11px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:800; color:#fff;
    background:linear-gradient(135deg,#34A8E0,#7C5CFC);
  }
  .emb-mob-prof .nm{ font-size:14.5px; font-weight:700; color:#fff; line-height:1.2; }
  .emb-mob-prof .em{ font-size:12px; color:rgba(255,255,255,.5); margin-top:2px; }

  /* ── Corps ── */
  .emb-mob-body{ padding:16px 16px 10px; flex:1; }

  /* Titres de section */
  .emb-mob-t{
    font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
    color:rgba(255,255,255,.4); margin:0 0 10px 2px;
  }

  /* Grille de services (2 colonnes) */
  .emb-mob-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px; }
  .emb-mob-card{
    display:flex !important; align-items:center; gap:10px;
    padding:12px !important; border-radius:13px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    transition:background .15s;
  }
  .emb-mob-card:active{ background:rgba(255,255,255,.09); }
  .emb-mob-card .ic{
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:19px;
  }
  .emb-mob-card .nm{ font-size:13.5px; font-weight:700; color:#fff; line-height:1.15; }
  .emb-mob-card .ds{ font-size:11px; color:rgba(255,255,255,.45); margin-top:1px; }

  /* Lignes (liste verticale) */
  .emb-mob-row{
    display:flex !important; align-items:center; gap:12px;
    padding:12px 12px !important; border-radius:11px;
    background:rgba(255,255,255,.03);
    margin-bottom:6px; transition:background .15s;
  }
  .emb-mob-row:active{ background:rgba(255,255,255,.08); }
  .emb-mob-row .ic{ font-size:18px; width:24px; text-align:center; flex-shrink:0; }
  .emb-mob-row .nm{ flex:1; font-size:14px; font-weight:600; color:rgba(255,255,255,.85); }
  .emb-mob-row .ar{ font-size:14px; color:rgba(255,255,255,.3); flex-shrink:0; }

  /* ── Pied (déconnexion / connexion) ── */
  .emb-mob-foot{
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.08);
    position:sticky; bottom:0; background:#0B0E13;
  }
  .emb-mob-foot a{
    display:block; text-align:center; padding:13px;
    border-radius:11px; font-size:14px; font-weight:700; text-decoration:none;
    background:rgba(255,255,255,.06); color:#fff;
    border:1px solid rgba(255,255,255,.12);
  }
  .emb-mob-foot a.login{ background:linear-gradient(135deg,#34A8E0,#7C5CFC); border:none; }
}


/* ════════════════════════════════════════════════════════════════
   ACCORDÉONS DU MENU MOBILE (emb-acc)
   ----------------------------------------------------------------
   Chaque service se déplie au tap. Fermé par défaut → menu court.
   La grille des 4 cartes reste au-dessus (accès rapide).
   ════════════════════════════════════════════════════════════════ */
.emb-acc{
  margin-bottom:8px; border:1px solid rgba(255,255,255,.08);
  border-radius:13px; overflow:hidden; background:rgba(255,255,255,.03);
}
.emb-acc-head{
  display:flex; align-items:center; gap:11px;
  padding:12px; cursor:pointer; user-select:none;
}
.emb-acc-head:active{ background:rgba(255,255,255,.05); }
.emb-acc-ic{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.emb-acc-txt{ flex:1; }
.emb-acc-txt .nm{ font-size:14px; font-weight:700; color:#fff; line-height:1.15; }
.emb-acc-txt .ds{ font-size:11.5px; color:rgba(255,255,255,.45); margin-top:1px; }
.emb-acc-ar{ font-size:13px; color:rgba(255,255,255,.4); transition:transform .25s ease; }
.emb-acc.open .emb-acc-ar{ transform:rotate(180deg); }

/* Corps repliable : animation sur max-height */
.emb-acc-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.emb-acc.open .emb-acc-body{ max-height:360px; }
.emb-acc-body a{
  display:block !important; padding:11px 12px 11px 50px !important;
  font-size:13.5px; font-weight:500; color:rgba(255,255,255,.72);
  text-decoration:none; border-top:1px solid rgba(255,255,255,.05);
  border-bottom:none !important;
}
.emb-acc-body a:active{ background:rgba(255,255,255,.06); }


/* Conteneur des accordéons dans le drawer .hv-drawer (pages module) */
.hv-dr-acc-wrap{ padding:4px 0 8px; }
.hv-dr-acc-wrap .ttl{
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:rgba(255,255,255,.4); margin:6px 2px 10px;
}


/* ════════════════════════════════════════════════════════════════
   LOGO IMAGE (eMB Connect) — remplace le logo texte dans la navbar
   ----------------------------------------------------------------
   Desktop : logo complet (.emb-logo-full)
   Mobile  : pictogramme seul (.emb-logo-picto) pour gagner de la place
   ════════════════════════════════════════════════════════════════ */
.emb-topbar .emb-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 0;
}
.emb-logo-full {
  height: 24px;
  width: auto;
  display: block;
}
.emb-logo-picto {
  display: none;          /* caché sur desktop */
  height: 26px;
  width: auto;
}

/* Sur petit écran : pictogramme seul (le logo complet serre trop) */
@media (max-width: 560px) {
  .emb-logo-full { display: none; }
  .emb-logo-picto { display: block; }
}

/* ══════════════════════════════════════════════════════════════════
   ★ NAVBAR TOUJOURS EN DARK (choix design) ★
   Fond sombre + texte blanc forcés, indépendamment du thème clair JS.
   ══════════════════════════════════════════════════════════════════ */
.emb-topbar{
  background:#0d1420 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.emb-topbar::before{ background:none !important; }

/* Logo blanc + accent marine */
.emb-topbar .emb-logo{ color:#fff !important; }
.emb-topbar .emb-logo span{
  background:none !important; -webkit-text-fill-color:#7FB0E8 !important; color:#7FB0E8 !important;
}

/* Liens de nav blancs */
.emb-topbar .emb-nav>a,
.emb-topbar .emb-navitem>a{ color:rgba(255,255,255,.7) !important; }
.emb-topbar .emb-nav>a:hover,
.emb-topbar .emb-navitem>a:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
.emb-topbar .emb-nav>a.on,
.emb-topbar .emb-navitem>a.on{ color:#7FB0E8 !important; background:rgba(127,176,232,.14) !important; }

/* "Accueil" et flèches de menu */
.emb-topbar .emb-navitem .emb-caret,
.emb-topbar .emb-nav .caret{ color:rgba(255,255,255,.5) !important; }

/* Recherche sombre */
.emb-topbar .emb-search{
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.1) !important;
}
.emb-topbar .emb-search input{ color:#fff !important; }
.emb-topbar .emb-search input::placeholder{ color:rgba(255,255,255,.4) !important; }
.emb-topbar .emb-search .ic{ color:rgba(255,255,255,.45) !important; }

/* Bouton compte sombre */
.emb-topbar .emb-acct-btn{
  background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.12) !important;
  color:#fff !important;
}
.emb-topbar .emb-acct-btn:hover{ background:rgba(255,255,255,.14) !important; }
.emb-topbar .emb-acct-btn .emb-ar{ color:rgba(255,255,255,.6) !important; }

/* Bouton Connexion (ghost) sombre */
.emb-topbar .emb-btn-ghost{
  background:transparent !important; border:1.5px solid rgba(255,255,255,.2) !important;
  color:#fff !important;
}
.emb-topbar .emb-btn-ghost:hover{ border-color:#7FB0E8 !important; color:#7FB0E8 !important; }

/* Burger mobile blanc */
.emb-topbar .emb-burger{ color:#fff !important; }

/* ================================================================
   ▸ TIROIR MOBILE — identité BLEU MARINE + correctifs
     (portée : uniquement .emb-mobnav et ses enfants)
   ================================================================ */
@media (max-width:980px){
  .emb-mobnav{ background:#0f1e30; }

  /* En-tête du tiroir */
  .emb-mob-head{ background:linear-gradient(135deg,#1e3a5f,#16283f); border-bottom:1px solid rgba(255,255,255,.08); }
  .emb-mob-prof{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); }
  .emb-mob-x{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.18); }

  /* Le pied collant ne doit plus recouvrir la dernière section */
  .emb-mob-body{ padding-bottom:26px; }
  .emb-mob-foot{ background:#0f1e30; border-top:1px solid rgba(255,255,255,.1); }
  .emb-mob-foot a{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.16); }
  .emb-mob-foot a.login{ background:#fff !important; color:#1e3a5f !important; border:none; font-weight:800; }

  /* Textes : garantis lisibles sur le fond marine */
  .emb-mobnav .emb-mob-t{ color:rgba(255,255,255,.55) !important; }
  .emb-mobnav .emb-mob-row .nm,
  .emb-mobnav .emb-acc-txt .nm,
  .emb-mobnav .emb-mob-prof .nm{ color:#fff !important; }
  .emb-mobnav .emb-acc-txt .ds,
  .emb-mobnav .emb-mob-prof .em{ color:rgba(255,255,255,.65) !important; }
  .emb-mobnav .emb-acc-ar,
  .emb-mobnav .emb-mob-row .ar{ color:rgba(255,255,255,.45) !important; }
  .emb-mobnav .emb-acc-body a{ color:rgba(255,255,255,.82) !important; }

  /* Cartes / accordéons */
  .emb-mobnav .emb-mob-row,
  .emb-mobnav .emb-acc{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
  .emb-mobnav .emb-acc-head:active{ background:rgba(255,255,255,.07); }
  .emb-mobnav .emb-acc.open{ border-color:rgba(174,203,236,.35); }
}

/* ================================================================
   ▸ NAVBAR — boutons en identité BLEU MARINE
   ================================================================ */
.emb-btn-fill{ background:#fff !important; color:#1e3a5f !important; font-weight:800; border:none; }
.emb-btn-fill:hover{ background:#f2f5f9 !important; filter:none; }
.emb-btn-ghost{ border-color:rgba(255,255,255,.24) !important; color:#fff !important; }
.emb-acct-btn .emb-av,
.emb-topbar .emb-av{ background:linear-gradient(135deg,#3a72c4,#1e3a5f) !important; }
.emb-topbar .emb-mi.on,
.emb-topbar .emb-mi-active{ background:rgba(174,203,236,.18) !important; color:#fff !important; }

/* ================================================================
   ▸ RENDU « APPLICATION NATIVE » (PWA) — blocage du zoom
     Complément CSS du fichier public/js/emb/emb-nozoom.js
   ================================================================ */

/* Double-tap : supprimé sans JS sur les navigateurs récents.
   Supprime aussi le délai de 300 ms au clic → interface plus vive. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* Ces deux règles ne concernent que les écrans tactiles : sur ordinateur
   elles n'ont rien à faire (et peuvent gêner le défilement à la molette). */
@media (pointer:coarse){
  html{ touch-action:manipulation; }
  body{ overscroll-behavior-y:contain; }
}

/* Aucun surlignage bleu au tap (comportement navigateur, pas natif) */
*{ -webkit-tap-highlight-color:transparent; }

/* Les éléments interactifs restent sélectionnables au doigt sans
   déclencher la sélection de texte façon navigateur. */
button, .emb-btn-fill, .emb-btn-ghost, [role="button"]{
  -webkit-user-select:none; user-select:none;
}

@media (max-width:900px){
  /* iOS zoome automatiquement sur tout champ dont la police fait
     moins de 16px. On force donc 16px sur mobile : c'est la seule
     façon fiable d'éviter le saut de zoom à la saisie. */
  input[type="text"], input[type="tel"], input[type="email"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="date"], input[type="time"], input[type="datetime-local"],
  select, textarea{
    font-size:16px !important;
  }
}

/* ================================================================
   ▸ FILET DE SÉCURITÉ RESPONSIVE (global)
     Empêche tout débordement horizontal, cause n°1 des bandes
     vides sur les côtés en mobile.
   ================================================================ */

/* Jamais de largeur en 100vw : cette unité inclut la barre de
   défilement, donc elle dépasse toujours la largeur réelle. */
html, body{ max-width:100%; }
body{ overflow-x:hidden; }          /* repli anciens navigateurs */
@supports (overflow-x:clip){
  html{ overflow-x:clip; }          /* coupe SANS créer de conteneur de défilement */
  body{ overflow-x:clip; }
}

/* Un média ne doit jamais forcer la page à s'élargir */
img, video, canvas, iframe, embed, object{ max-width:100%; }

/* Sans min-width:0, un enfant de grille ou de flex refuse de
   rétrécir sous la taille de son contenu (mot long, URL, tableau)
   et pousse la page vers la droite. */
.hv *, .sv *, .drv *, .cln *, .emb-express *, .shx *, .pdx *,
.cox *, .cfx *, .gcx *, .pnx *, .rcx *, .hix *, .lgx *,
.emb-vendeur *, .vdb *, .vcm *, .vwx *, .vmx *, .vpf *{ min-width:0; }

/* Les mots très longs (emails, références) coupent au lieu de pousser */
.hv, .sv, .drv, .cln, .emb-express, .shx, .pdx, .cox, .cfx,
.gcx, .pnx, .rcx, .hix, .lgx, .emb-vendeur{ overflow-wrap:break-word; }

/* Les tableaux larges défilent dans leur conteneur, pas dans la page */
.emb-table-wrap, .table-responsive{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ================================================================
   ▸ HAUTEUR DE NAVBAR EXACTE
     .emb-tb-inner valait 66px alors que la compensation du contenu
     vaut 70px (desktop) / 62px (mobile) → décalage de quelques
     pixels sur toutes les pages. On aligne tout sur 70 / 62.
   ================================================================ */
.emb-topbar .emb-tb-inner{ height:70px; }
@media (max-width:980px){
  .emb-topbar{ height:62px; }
  .emb-topbar .emb-tb-inner{ height:62px; }
}

/* ================================================================
   ▸ HAUTEUR DE NAVBAR — source unique de vérité
     (deux valeurs se contredisaient : 70px puis 66px)
   ================================================================ */
:root{ --emb-nav-h:70px; }
.emb-topbar .emb-tb-inner{ height:var(--emb-nav-h); }
@media (max-width:980px){
  :root{ --emb-nav-h:62px; }
  .emb-topbar{ height:var(--emb-nav-h); }
  .emb-topbar .emb-tb-inner{ height:var(--emb-nav-h); }
}

/* ================================================================
   ▸ FILET DE SÉCURITÉ RESPONSIVE
     Évite les débordements horizontaux sur petits écrans
   ================================================================ */
img, svg, video, canvas, iframe{ max-width:100%; }
img, video{ height:auto; }

/* Une URL ou un mot très long ne doit jamais élargir la page */
body{ overflow-wrap:break-word; }

/* Les tableaux larges défilent dans leur bloc plutôt que la page */
table{ max-width:100%; }

@media (max-width:900px){
  /* Un enfant de grille/flex ne peut pas imposer sa largeur intrinsèque */
  [class*="-grid"] > *, [class*="-cols"] > *, [class*="-band"] > *{ min-width:0; }
}

/* ================================================================
   ▸ CORRECTIF SCROLL — halos décoratifs qui capturaient le toucher
   ------------------------------------------------------------------
   De nombreux halos flous (.halo, .glow, .eb-glow, .ex-glow, .fv-glow,
   .sx-glow, .sv-glow…) sont en position:absolute avec des décalages
   négatifs (ex: top:-130px) et parfois très grands (jusqu'à 560px) :
   ils débordent largement de leur carte visible et recouvrent du
   contenu voisin — invisibles à l'œil (flou + transparence), mais
   toujours là pour le doigt, qui touchait alors le halo au lieu de
   faire défiler la page en dessous. D'où un scroll qui "marchait
   par endroits" selon l'endroit exact où l'on posait le doigt.
   Ce sont des décors purs, jamais cliquables : on les rend
   totalement transparents au toucher, une fois pour tout le site.
   ================================================================ */
[class*="halo"], [class*="glow"]{ pointer-events:none !important; }

/* ================================================================
   ▸ CORRECTIF — onglets/puces horizontales qui se chevauchaient
   ------------------------------------------------------------------
   Plusieurs composants (onglets produit, puces de rayons, filtres…)
   suivent le même schéma : conteneur en display:flex + overflow-x:auto,
   enfants en white-space:nowrap. En théorie chaque enfant garde sa
   largeur naturelle. Constaté en réel : sur certains iPhone/Safari,
   les enfants se comprimaient au lieu de défiler, faisant chevaucher
   leurs textes. Cette règle interdit explicitement toute compression,
   pour tous les composants du site qui suivent cette convention de
   nommage (…tabs, …chips, …pills) — présents et futurs.
   ================================================================ */
[class*="tabs"] > a, [class*="tabs"] > button,
[class*="chips"] > a, [class*="chips"] > button,
[class*="pills"] > a, [class*="pills"] > button, [class*="pills"] > span{
  flex-shrink:0 !important;
}