/* ============================================================
   V27 UNIFORM CSS — Stop Inflations (09/05/2026)
   Force le look v27 sur toutes les pages sans casser le HTML existant.
   Couleurs signatures, typo, cards, hero, boutons standardisés.

   Inspiré de mon-espace.html v27 (modèle bloqué).
   Skip auto sur index.html (bloquée), mon-espace.html (native).

   Version : 20260513-5
   ============================================================ */

:root{
  --b1:#0F172A;--b2:#06B6D4;
  --hero-grad:linear-gradient(135deg,#0F172A 0%,#06B6D4 100%);
  --lisa-grad:linear-gradient(135deg,#7c2d12 0%,#fb923c 60%,#fdba74 100%);
  --cb-grad:linear-gradient(135deg,#1a2e05 0%,#65a30d 60%,#a3e635 100%);
  --ci-grad:linear-gradient(135deg,#064e3b 0%,#10b981 60%,#34d399 100%);
  --or:#FCD34D;--or2:#F59E0B;
  --or-grad:linear-gradient(135deg,#F59E0B,#FCD34D);
  --bg-app:#F0F2F5;
  --surf:#FFFFFF;
  --line:#E5E9EF;
  --line2:#EEF1F6;
  --ink:#0F172A;
  --ink2:#1e293b;
  --muted:#65676B;
  --muted2:#94a3b8;
  --shadow-v27:0 1px 0 rgba(15,23,42,.04),0 6px 14px -10px rgba(15,23,42,.08);
  --shadow-v27-h:0 1px 0 rgba(15,23,42,.06),0 22px 40px -18px rgba(6,182,212,.28),0 10px 20px -10px rgba(15,23,42,.16);
  --r-v27-sm:10px;--r-v27-md:12px;--r-v27-lg:14px;--r-v27-xl:18px;--r-v27-2xl:22px;--r-v27-pill:999px;
  --f-v27:'Manrope','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ════════════════════════════════════════════
   BODY GLOBAL : fond gris clair v27 (façon FB)
   ════════════════════════════════════════════ */
body.si-sidebar-active,
body.si-shell-active{
  background:var(--bg-app) !important;
  font-family:var(--f-v27) !important;
  color:var(--ink) !important;
  font-size:18px !important; /* 18/05 v3 — on demande lisibilité Apple+ partout */
  line-height:1.55 !important;
  letter-spacing:-.005em !important;
  -webkit-font-smoothing:antialiased;
}

/* ════════════════════════════════════════════
   PAGE HERO (auto via .si-page-hero injecté)
   ════════════════════════════════════════════ */
.si-page-hero{
  position:relative;
  border-radius:var(--r-v27-xl);
  overflow:hidden;
  background:var(--hero-grad);
  color:#fff;
  isolation:isolate;
  padding:24px 28px;
  margin:14px clamp(12px,1.4vw,20px) 0;
  max-width:1380px;
  margin-left:auto;
  margin-right:auto;
}
.si-page-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 30%,rgba(252,211,77,.18) 0%,transparent 55%),radial-gradient(ellipse at 20% 80%,rgba(6,182,212,.18) 0%,transparent 55%);
  pointer-events:none;
}
.si-page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,#FCD34D 0%,#06B6D4 50%,#0F172A 100%);
}
.si-page-hero > *{position:relative;z-index:2}
.si-page-hero .si-eb{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin:0 0 8px;
}
.si-page-hero .si-eb .lv{
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-v27-pill);
  background:rgba(252,211,77,.18);color:var(--or);border:1px solid rgba(252,211,77,.4);
  font-weight:700;font-size:9.5px;
}
.si-page-hero .si-eb .lv::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--or);
  animation:siPulse 1.6s infinite;
}
@keyframes siPulse{0%,100%{opacity:1}50%{opacity:.4}}
.si-page-hero h1{
  font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1.1;
  margin:0 0 10px;letter-spacing:-.03em;color:#fff;
}
.si-page-hero h1 b{
  font-weight:800;
  background:linear-gradient(135deg,#FCD34D,#F59E0B 60%,#FBBF24);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.si-page-hero p{
  color:rgba(255,255,255,.86);font-size:13.5px;max-width:540px;margin:0 0 14px;line-height:1.5;
}
.si-page-hero .si-ctas{display:flex;flex-wrap:wrap;gap:8px}
.si-page-hero .si-chip{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;
  border-radius:var(--r-v27-pill);font-weight:700;font-size:12.5px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);
  color:#fff;backdrop-filter:blur(8px);transition:transform .2s,background .2s;
  text-decoration:none;cursor:pointer;
}
.si-page-hero .si-chip:hover{transform:translateY(-1px);background:rgba(255,255,255,.16)}
.si-page-hero .si-chip.primary{
  background:var(--or-grad);color:#0F172A;border-color:transparent;
  box-shadow:0 12px 22px -12px rgba(252,211,77,.55);
}

/* Bouton retour mon-espace dans hero */
.si-back-btn{
  position:absolute;top:14px;right:14px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-v27-pill);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:11.5px;font-weight:700;text-decoration:none;
  backdrop-filter:blur(8px);transition:background .2s,transform .2s;
}
.si-back-btn:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}
.si-back-btn::before{content:"←";font-size:13px}

/* ════════════════════════════════════════════
   CARDS uniformes v27
   ════════════════════════════════════════════ */
.si-page-content .card,
.si-page-content article.card,
.si-page-content section.card{
  background:var(--surf) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-v27-lg) !important;
  box-shadow:var(--shadow-v27) !important;
}

/* ════════════════════════════════════════════
   TITRES uniformes v27 (sauf si déjà stylés)
   ════════════════════════════════════════════ */
body.si-shell-active main h1:not(.hero h1):not(.si-page-hero h1):not([class*="hero"]),
body.si-sidebar-active main h1:not(.hero h1):not(.si-page-hero h1):not([class*="hero"]){
  font-family:var(--f-v27);
  font-weight:700;
  font-size:clamp(20px,2vw,26px);
  letter-spacing:-.025em;
  color:var(--ink);
  line-height:1.15;
}

/* ════════════════════════════════════════════
   BOUTONS primary or v27
   ════════════════════════════════════════════ */
.si-page-content button.primary,
.si-page-content a.primary,
.si-page-content .btn-primary{
  background:var(--or-grad) !important;
  color:#0F172A !important;
  border:0 !important;
  font-weight:800 !important;
  border-radius:var(--r-v27-md) !important;
  padding:10px 18px !important;
  box-shadow:0 12px 22px -12px rgba(252,211,77,.55) !important;
  transition:transform .2s,box-shadow .2s !important;
  cursor:pointer;
}
.si-page-content button.primary:hover,
.si-page-content a.primary:hover,
.si-page-content .btn-primary:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 16px 28px -12px rgba(252,211,77,.7) !important;
}

/* ════════════════════════════════════════════
   LISA banner v27 (auto si présent .si-lisa-banner)
   ════════════════════════════════════════════ */
.si-lisa-banner{
  background:var(--lisa-grad);
  color:#fff;
  border-radius:var(--r-v27-lg);
  padding:14px 18px;
  margin:14px clamp(12px,1.4vw,20px) 0;
  max-width:1380px;
  margin-left:auto;
  margin-right:auto;
  display:flex;align-items:center;gap:14px;
  box-shadow:var(--shadow-v27);
}
.si-lisa-banner .si-lisa-av{
  width:54px;height:54px;border-radius:50%;flex:none;
  background:#fff url('/images/lisa-hero-supermarche.png') center/cover no-repeat;
  border:3px solid #fff;box-shadow:0 0 0 2px rgba(252,211,77,.3);
}
.si-lisa-banner .si-lisa-tx{flex:1;min-width:0}
.si-lisa-banner .si-lisa-tx b{display:block;font-weight:800;font-size:15px;letter-spacing:-.02em;margin-bottom:2px}
.si-lisa-banner .si-lisa-tx span{display:block;font-size:12.5px;color:rgba(255,255,255,.92)}

/* ════════════════════════════════════════════
   SECTION HEADER v27
   ════════════════════════════════════════════ */
.si-sh{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 0 8px;margin:0 0 14px;border-bottom:1px solid var(--line2);
}
.si-sh .si-sh-l{min-width:0;flex:1}
.si-sh .si-sh-l .si-ey{
  display:inline-flex;align-items:center;gap:6px;
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#0c4a6e;margin:0 0 3px;
}
.si-sh .si-sh-l .si-ey .si-num{
  padding:1px 6px;border-radius:5px;background:#0F172A;color:var(--or);font-size:9.5px;
}
.si-sh .si-sh-l h2,
.si-sh .si-sh-l h3{
  font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--ink);line-height:1.2;
  margin:0;
}
.si-sh .si-sh-l p{font-size:11.5px;color:var(--muted);margin:2px 0 0;font-weight:500}

/* ════════════════════════════════════════════
   PAGE CONTENT WRAPPER v27 (max-width + padding)
   ════════════════════════════════════════════ */
.si-page-content{
  max-width:1380px;
  margin:14px auto 0;
  padding:0 clamp(12px,1.4vw,20px);
  display:flex;flex-direction:column;gap:14px;
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width:780px){
  .si-page-hero{padding:18px 18px;margin:8px}
  .si-page-hero h1{font-size:22px}
}