/* ============================================================
   gombo.zone — Design System (v1 restauré)
   Inspiré du thème Beantown Business5 :
   indigo #1e149d · cyan #4edceb · bleu #0089f7 · noir #161922
   Typo : Montserrat (titres) + Outfit (corps)
   Signature : coins coupés asymétriques (50px 0 0 0), boutons pilule
   ============================================================ */

:root{
  /* Palette Business5 */
  /* Palette alignée sur le logo gombo.zone (vert okra) — CTA orange complémentaire */
  --indigo:      #1a7a33;   /* accent texte / liens (vert) */
  --indigo-2:    #2f9e44;
  --indigo-3:    #339a44;
  --indigo-soft: #6fc47e;
  /* Fond de marque PROFOND (héros, boutons, CTA) — reste sombre dans les 2 thèmes,
     contrairement à --indigo qui s'éclaircit en mode sombre pour le texte. */
  --brand:       #1a7035;   /* vert profond du logo (héros, btn-primary) */
  --brand-2:     #2f9e44;   /* vert moyen (dégradé héros) */
  --okra:        #2ba84a;   /* vert okra */
  --okra-d:      #1b7a35;
  --cyan:        #4fc06a;   /* vert frais (kickers, accents) */
  --cyan-2:      #5fce72;
  --cyan-soft:   #cdeecb;
  --blue:        #0f76dc;   /* azur du logo (épingle / .zone) — accent secondaire */
  --blue-d:      #0b5cae;   /* bleu foncé : survol de liens (accessible sur blanc) */
  --blue-soft:   #e7f3ff;   /* fond tinté bleu (badges « vérifié ») */
  --accent:      #f4911e;   /* orange — bouton d'action (CTA), complémentaire du vert */
  --accent-2:    #de7d10;
  --ink:         #161922;
  --ink-2:       #333a47;
  --mut:         #69707f;
  --mut-2:       #9aa0ad;
  --bg:          #fcfcfc;
  --bg-2:        #f7f7f9;
  --bg-3:        #eef0f6;
  --line:        #e7e9f0;
  --white:       #ffffff;
  --surface:     #ffffff;   /* fond cartes / en-tête (variabilisé pour le mode sombre) */
  --on-accent:   #161922;   /* texte sur pastilles claires (cyan/jaune) — reste sombre dans les 2 thèmes */
  color-scheme: light;

  /* Sémantique */
  --ok:    #0aa574;
  --warn:  #ffb703;
  --bad:   #e5484d;

  /* Guinée 🇬🇳 */
  --gn-red:    #ce1126;
  --gn-yellow: #fcd116;
  --gn-green:  #009460;

  /* Formes signature */
  --rad:      5px;
  --rad-md:   10px;
  --cut:      42px;   /* coin coupé signature */
  --cut-sm:   26px;
  --pill:     48px;

  --shadow-1: 0 1px 2px rgba(22,25,34,.06), 0 4px 14px rgba(22,25,34,.06);
  --shadow-2: 0 6px 18px rgba(26,112,53,.10), 0 14px 40px rgba(22,25,34,.10);
  --shadow-cyan: 0 8px 24px rgba(95,200,110,.35);

  --ff-head: "Montserrat", "Outfit", -apple-system, "Segoe UI", sans-serif;
  --ff-body: "Outfit", -apple-system, "Segoe UI", Roboto, sans-serif;

  --w: 1230px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--ff-body); font-size:16px; line-height:1.6;
  color:var(--ink-2); background:var(--bg);
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-head); color:var(--ink); line-height:1.22;
  margin:0 0 .5em; font-weight:800; letter-spacing:-.01em;
}
h1{ font-size:clamp(1.9rem,4vw,3rem); font-weight:900; }
h2{ font-size:clamp(1.5rem,3vw,2.1rem); }
h3{ font-size:1.25rem; }
h4{ font-size:1.05rem; }
p{ margin:0 0 1em; }
a{ color:var(--blue); text-decoration:none; transition:color .18s; }
a:hover{ color:var(--blue-d); }
img,svg{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:1rem; }
::selection{ background:var(--cyan); color:var(--ink); }

.container{ max-width:var(--w); margin:0 auto; padding:0 22px; }
.muted{ color:var(--mut); }
.small{ font-size:.85rem; }
.nowrap{ white-space:nowrap; }
.hide{ display:none !important; }
.tac{ text-align:center; }

/* coins coupés signature */
.cut-tl{ border-radius:var(--cut) 0 0 0; }
.cut-tr{ border-radius:0 var(--cut) 0 0; }
.cut-br{ border-radius:0 0 var(--cut) 0; }
.cut-bl{ border-radius:0 0 0 var(--cut); }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.78em 1.7em; border-radius:var(--pill); border:2px solid transparent;
  font-family:var(--ff-head); font-weight:700; font-size:.92rem; line-height:1.2;
  letter-spacing:.01em; text-decoration:none; white-space:nowrap;
  transition:transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn svg{ width:1.1em; height:1.1em; flex:none; }

.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-2); color:#fff; box-shadow:var(--shadow-2); transform:translateY(-2px); }

.btn-accent{ background:var(--accent); color:#17233c; }
/* hover : l'orange reste orange (la 2e règle dupliquée le faisait virer au vert) */
.btn-accent:hover{ background:var(--accent-2); color:#17233c; box-shadow:0 8px 22px rgba(244,145,30,.32); transform:translateY(-2px); }

.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ background:#0a76d8; color:#fff; box-shadow:var(--shadow-2); transform:translateY(-2px); }

.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--indigo); color:var(--indigo); transform:translateY(-2px); }

.btn-light{ background:var(--surface); color:var(--indigo); }
.btn-light:hover{ box-shadow:var(--shadow-2); color:var(--indigo); transform:translateY(-2px); }

.btn-danger{ background:var(--bad); color:#fff; }
.btn-danger:hover{ background:#c93a3f; color:#fff; }

.btn-sm{ padding:.5em 1.1em; font-size:.82rem; }
.btn-lg{ padding:.95em 2.2em; font-size:1rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

.btn-icon{
  width:42px; height:42px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-3); border:none; color:var(--ink-2); transition:all .18s;
}
.btn-icon:hover{ background:var(--cyan); color:var(--ink); transform:translateY(-2px); }
.btn-icon.active{ background:var(--gn-red); color:#fff; }
.btn-icon svg{ width:19px; height:19px; }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.35em;
  padding:.28em .8em; border-radius:var(--pill);
  font-family:var(--ff-head); font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; line-height:1.4;
}
.badge svg{ width:1.05em; height:1.05em; flex:none; }
/* garde-fou : icône inline dans du texte courant, jamais en taille intrinsèque */
p > svg, h1 > svg, h2 > svg, h3 > svg, h4 > svg, li > svg, label > svg, .breadcrumb svg{
  width:1em; height:1em; vertical-align:-2px;
}
.toast svg, .safety b svg{ width:1.15em; height:1.15em; flex:none; }
.modal h3 svg{ width:1em; height:1em; vertical-align:-2px; }
.badge-une{ background:var(--warn); color:var(--ink); }
.badge-pro{ background:var(--brand); color:#fff; }
.badge-new{ background:var(--cyan); color:var(--ink); }
.badge-urgent{ background:var(--bad); color:#fff; }
.badge-ok{ background:#e3f7ef; color:var(--ok); }
.badge-soft{ background:var(--bg-3); color:var(--mut); }
.badge-verif{ background:#e7f3ff; color:var(--blue); }

/* ---------- Topbar ---------- */
.topbar{
  background:var(--ink); color:#cfd3dd; font-size:.8rem;
  position:relative;
}
.topbar::after{ /* liseré tricolore Guinée */
  content:""; display:block; height:3px;
  background:linear-gradient(90deg, var(--gn-red) 0 33.3%, var(--gn-yellow) 33.3% 66.6%, var(--gn-green) 66.6% 100%);
}
.topbar-in{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.45rem 0; flex-wrap:wrap;
}
.topbar a{ color:#cfd3dd; }
.topbar a:hover{ color:var(--cyan); }
.topbar .tb-left, .topbar .tb-right{ display:flex; align-items:center; gap:1.2rem; }
.topbar svg{ width:13px; height:13px; vertical-align:-2px; margin-right:.3em; }

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:80;
  background:var(--surface); box-shadow:0 1px 0 var(--line);
  transition:box-shadow .2s;
}
.site-head.scrolled{ box-shadow:0 6px 24px rgba(22,25,34,.08); }
.head-in{
  display:flex; align-items:center; gap:1.4rem; padding:.8rem 0;
}
.logo{ display:flex; align-items:center; gap:.6rem; flex:none; }
.logo-name{ font-family:var(--ff-head); font-weight:900; font-size:1.3rem; color:var(--ink); line-height:1.05; }
.logo-tag{ display:block; font-family:var(--ff-body); font-weight:500; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }

/* recherche header */
.head-search{
  flex:1; display:flex; max-width:560px; position:relative;
}
.head-search input{
  flex:1; min-width:0; border:2px solid var(--line); border-right:none;
  border-radius:var(--pill) 0 0 var(--pill);
  padding:.68em 1.2em; outline:none; background:var(--bg-2);
  transition:border-color .18s, background .18s;
}
.head-search input:focus{ border-color:var(--indigo-2); background:var(--surface); }
.head-search button{
  border:none; background:var(--brand); color:#fff;
  padding:0 1.4em; border-radius:0 var(--pill) var(--pill) 0;
  transition:background .18s;
}
.head-search button:hover{ background:var(--blue); }
.head-search button svg{ width:18px; height:18px; }

.head-actions{ display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.head-link{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--ink-2); font-size:.68rem; font-weight:600; padding:.2rem .5rem;
  border-radius:var(--rad); position:relative;
}
.head-link svg{ width:21px; height:21px; }
.head-link:hover{ color:var(--indigo); }
.head-link .pip{
  position:absolute; top:-2px; right:2px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--gn-red); color:#fff;
  font-size:.62rem; font-weight:800; display:flex; align-items:center; justify-content:center;
}

/* nav catégories */
.cat-nav{ background:var(--surface); border-top:1px solid var(--line); }
.cat-nav-in{ display:flex; align-items:center; gap:.2rem; overflow-x:auto; scrollbar-width:none; }
.cat-nav-in::-webkit-scrollbar{ display:none; }
.cat-nav a{
  flex:none; display:flex; align-items:center; gap:.45em;
  padding:.72em .95em; font-family:var(--ff-head); font-size:.8rem; font-weight:700;
  color:var(--ink-2); border-bottom:3px solid transparent; transition:all .15s;
}
.cat-nav a svg{ width:16px; height:16px; color:var(--indigo-soft); }
.cat-nav a:hover{ color:var(--indigo); border-bottom-color:var(--cyan); }
.cat-nav a.active{ color:var(--indigo); border-bottom-color:var(--indigo); }
.cat-nav a.all{ color:var(--indigo); }

/* burger + drawer mobile */
.burger{ display:none; background:none; border:none; padding:.4rem; color:var(--ink); }
.burger svg{ width:26px; height:26px; }
.drawer{
  position:fixed; inset:0; z-index:200; pointer-events:none;
}
.drawer .dim{
  position:absolute; inset:0; background:rgba(22,25,34,.55);
  opacity:0; transition:opacity .25s;
}
.drawer .panel{
  position:absolute; top:0; left:0; bottom:0; width:min(330px,86vw);
  background:var(--surface); transform:translateX(-102%); transition:transform .28s cubic-bezier(.2,.8,.25,1);
  display:flex; flex-direction:column; overflow-y:auto;
}
.drawer.open{ pointer-events:auto; }
.drawer.open .dim{ opacity:1; }
.drawer.open .panel{ transform:none; }
.drawer .panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.2rem; background:var(--brand); color:#fff;
}
.drawer .panel-head .logo-name{ color:#fff; }
.drawer nav a{
  display:flex; align-items:center; gap:.7em; padding:.85em 1.2rem;
  color:var(--ink-2); font-weight:600; font-size:.95rem; border-bottom:1px solid var(--bg-3);
}
.drawer nav a svg{ width:18px; height:18px; color:var(--indigo-soft); }
.drawer nav a:hover{ background:var(--bg-2); color:var(--indigo); }
.drawer .panel-foot{ margin-top:auto; padding:1.2rem; display:grid; gap:.6rem; }

/* ---------- Hero accueil ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(95,200,110,.28), transparent 60%),
    radial-gradient(700px 380px at -10% 110%, rgba(0,137,247,.30), transparent 60%),
    linear-gradient(128deg, var(--brand) 10%, var(--brand-2) 48%, #0d57b0 100%);  /* vert→bleu, comme le logo */
}
.hero::before{ /* motif points */
  content:""; position:absolute; inset:0; opacity:.20; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.4px);
  background-size:26px 26px;
}
.hero-in{ position:relative; padding:4.2rem 0 4.6rem; max-width:840px; }
.hero .kicker{ color:#cdeecb; }                 /* mint clair lisible sur le hero sombre (WCAG) */
.hero h1{ color:#fff; margin-bottom:.4em; }
.hero h1 em{ font-style:normal; color:#8be8a6; }  /* vert clair : surbrillance lisible */
.hero p.lead{ font-size:1.12rem; color:#dfe2ff; max-width:560px; }

.kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--ff-head); font-weight:800; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.22em; color:#1a7a33;   /* vert foncé : 5.4:1 sur fond clair (WCAG) */
  margin-bottom:1rem;
}
.kicker::before{ content:""; width:34px; height:3px; background:var(--cyan); border-radius:2px; }

/* grosse barre de recherche hero */
.hero-search{
  display:grid; grid-template-columns:1.6fr 1fr 1fr auto; gap:0;
  background:var(--surface); border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  padding:.55rem; margin-top:1.8rem; box-shadow:0 24px 60px rgba(10,8,60,.35);
}
.hero-search .hs-field{
  display:flex; align-items:center; gap:.6em; padding:.45em 1em;
  border-right:1px solid var(--line);
}
.hero-search .hs-field:nth-child(3){ border-right:none; }
.hero-search .hs-field svg{ width:18px; height:18px; color:var(--indigo-soft); flex:none; }
.hero-search input, .hero-search select{
  border:none; outline:none; width:100%; background:none; color:var(--ink); font-size:.95rem;
}
.hero-search .btn{ border-radius:var(--cut-sm) 0 var(--cut-sm) 0; }
.hero-stats{
  display:flex; gap:2.4rem; margin-top:2rem; flex-wrap:wrap;
}
.hero-stats b{ font-family:var(--ff-head); font-size:1.5rem; font-weight:900; color:#fff; display:block; line-height:1.1; }
.hero-stats span{ font-size:.8rem; color:#c3c8f5; }
.hero-stats .hs{ position:relative; padding-left:1rem; }
.hero-stats .hs::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:2px; background:var(--cyan); }

/* ---------- Bannière de page interne ---------- */
.page-hero{
  position:relative; color:#fff; overflow:hidden;
  background:
    radial-gradient(700px 300px at 90% -20%, rgba(95,200,110,.25), transparent 60%),
    linear-gradient(120deg, var(--brand), var(--brand-2));
}
.page-hero::before{
  content:""; position:absolute; inset:0; opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.4px);
  background-size:24px 24px;
}
.page-hero-in{ position:relative; padding:2.6rem 0 2.8rem; }
.page-hero h1{ color:#fff; margin:0; font-size:clamp(1.6rem,3vw,2.3rem); }
.breadcrumb{
  display:flex; flex-wrap:wrap; gap:.5em; align-items:center;
  font-size:.82rem; color:#c3c8f5; margin-bottom:.5rem;
}
.breadcrumb a{ color:#dfe2ff; }
.breadcrumb a:hover{ color:var(--cyan); }
.breadcrumb .sep{ opacity:.5; }

/* ---------- Sections ---------- */
.section{ padding:4rem 0; }
.section.alt{ background:var(--bg-2); }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  margin-bottom:2rem;
}
.section-head h2{ margin:0; }
.section-head .more{
  font-family:var(--ff-head); font-weight:700; font-size:.88rem; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.4em;
}
.section-head .more svg{ width:15px; height:15px; transition:transform .18s; }
.section-head .more:hover svg{ transform:translateX(4px); }

/* ---------- Tuiles catégories ---------- */
.cat-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:1rem;
}
.cat-tile{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad);
  padding:1.4rem 1.1rem 1.2rem; text-align:left; position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.cat-tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:var(--indigo-soft); }
.cat-tile .ic{
  width:52px; height:52px; border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  display:flex; align-items:center; justify-content:center; margin-bottom:.9rem;
  background:var(--bg-3); color:var(--indigo); transition:all .25s;
}
.cat-tile:hover .ic{ background:var(--cyan); color:var(--ink); border-radius:0 var(--cut-sm) 0 var(--cut-sm); }
.cat-tile .ic svg{ width:26px; height:26px; }
.cat-tile b{ font-family:var(--ff-head); font-size:.92rem; font-weight:800; color:var(--ink); display:block; }
.cat-tile span{ font-size:.78rem; color:var(--mut); }

/* ---------- Carte annonce ---------- */
.ads-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:1.4rem;
}
.card-ad{
  background:var(--surface); border:1px solid var(--line); position:relative;
  border-radius:var(--rad) var(--rad) var(--cut-sm) var(--rad);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .25s, border-color .2s;
}
.card-ad:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); border-color:transparent; }
.card-ad .ph{
  position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-3);
}
.card-ad .ph > img, .card-ad .ph > svg{ width:100%; height:100%; object-fit:cover; transition:transform .45s; }
.card-ad:hover .ph > img, .card-ad:hover .ph > svg{ transform:scale(1.06); }
.card-ad .ph .badges{ position:absolute; top:.7rem; left:.7rem; display:flex; gap:.4rem; z-index:2; }
.card-ad .fav{
  position:absolute; top:.6rem; right:.6rem; z-index:2;
  width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(255,255,255,.92); color:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
  transition:all .18s; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.card-ad .fav:hover{ background:var(--surface); color:var(--gn-red); transform:scale(1.12); }
.card-ad .fav.on{ background:var(--gn-red); color:#fff; }
.card-ad .fav svg{ width:17px; height:17px; }
.card-ad .cmp{
  position:absolute; top:3.05rem; right:.6rem; z-index:2;
  width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(255,255,255,.92); color:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
  transition:all .18s; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.card-ad .cmp:hover{ background:var(--surface); color:var(--indigo); transform:scale(1.12); }
.card-ad .cmp.on{ background:var(--brand); color:#fff; }
.card-ad .cmp svg{ width:17px; height:17px; }
.ads-list .card-ad .cmp{ top:3.05rem; }
.card-ad .bd{ padding:1rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.card-ad .cat{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--indigo-soft); }
.card-ad h3{
  font-size:.98rem; font-weight:700; margin:0; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-ad h3 a{ color:var(--ink); }
.card-ad h3 a::after{ content:""; position:absolute; inset:0; }
.card-ad h3 a:hover{ color:var(--indigo); }
.card-ad .price{
  font-family:var(--ff-head); font-weight:900; font-size:1.08rem; color:var(--indigo);
  margin-top:.15rem;
}
.card-ad .price small{ font-weight:600; color:var(--mut); font-size:.72rem; }
.card-ad .meta{
  margin-top:auto; padding-top:.6rem; display:flex; align-items:center; gap:.9em;
  font-size:.76rem; color:var(--mut); border-top:1px dashed var(--line);
}
.card-ad .meta svg{ width:13px; height:13px; vertical-align:-2px; margin-right:.25em; color:var(--mut-2); }

/* mode liste */
.ads-list{ display:flex; flex-direction:column; gap:1.1rem; }
.ads-list .card-ad{ flex-direction:row; border-radius:var(--rad) var(--cut-sm) var(--cut-sm) var(--rad); }
.ads-list .card-ad .ph{ width:280px; flex:none; aspect-ratio:4/3; }
.ads-list .card-ad .bd{ padding:1.2rem 1.4rem; }
.ads-list .card-ad h3{ font-size:1.12rem; -webkit-line-clamp:2; }
.ads-list .card-ad .desc{
  font-size:.86rem; color:var(--mut); margin:.3rem 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---------- Carte boutique ---------- */
.shops-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.4rem; }
.shop-card{
  background:var(--surface); border:1px solid var(--line); text-align:center;
  border-radius:var(--cut-sm) var(--rad) var(--cut-sm) var(--rad);
  padding:0 1.3rem 1.5rem; position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .25s;
}
.shop-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); }
.shop-card .cover{
  height:86px; margin:0 -1.3rem 0;
  background:linear-gradient(120deg, var(--brand), var(--blue));
  position:relative;
}
.shop-card .cover::before{
  content:""; position:absolute; inset:0; opacity:.25;
  background-image:radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.3px);
  background-size:18px 18px;
}
.shop-card .avatar{
  width:74px; height:74px; margin:-37px auto .8rem; position:relative;
  border-radius:var(--cut-sm) 0 var(--cut-sm) 0; border:4px solid #fff;
  background:var(--cyan); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-head); font-weight:900; font-size:1.5rem;
  box-shadow:var(--shadow-1);
}
.shop-card h3{ font-size:1.02rem; margin-bottom:.15rem; }
.shop-card h3 a{ color:var(--ink); }
.shop-card h3 a::after{ content:""; position:absolute; inset:0; }
.shop-card .line2{ font-size:.8rem; color:var(--mut); }
.shop-card .nums{
  display:flex; justify-content:center; gap:1.6rem; margin-top:1rem; padding-top:1rem;
  border-top:1px dashed var(--line);
}
.shop-card .nums b{ font-family:var(--ff-head); font-weight:800; color:var(--indigo); display:block; font-size:1.05rem; }
.shop-card .nums span{ font-size:.7rem; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; }

/* ---------- Carte article (blog / style Beantown news) ---------- */
.posts-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.6rem; }
.post-card{
  background:var(--surface); border:1px solid var(--line); overflow:hidden; position:relative;
  border-radius:var(--rad) var(--rad) var(--rad) var(--cut-sm);
  transition:transform .2s, box-shadow .25s;
  display:flex; flex-direction:column;
}
.post-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); }
.post-card .ph{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-3); }
.post-card .ph > img, .post-card .ph > svg{ width:100%; height:100%; object-fit:cover; transition:transform .45s; }
.post-card:hover .ph > img, .post-card:hover .ph > svg{ transform:scale(1.05); }
.post-card .bd{ padding:1.3rem 1.4rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.post-card .pmeta{
  display:flex; flex-wrap:wrap; gap:1em; font-size:.76rem; color:var(--mut); margin-bottom:.6rem;
}
.post-card .pmeta b{ color:var(--indigo-2); font-weight:700; }
.post-card h3{ font-size:1.08rem; line-height:1.4; }
.post-card h3 a{ color:var(--ink); }
.post-card h3 a::after{ content:""; position:absolute; inset:0; }
.post-card h3 a:hover{ color:var(--indigo); }
.post-card .excerpt{ font-size:.88rem; color:var(--mut); margin-bottom:1rem; }
.post-card .read{
  margin-top:auto; font-family:var(--ff-head); font-weight:700; font-size:.82rem;
  color:var(--indigo); display:inline-flex; align-items:center; gap:.4em;
}
.post-card .read svg{ width:14px; height:14px; transition:transform .18s; }
.post-card:hover .read svg{ transform:translateX(4px); }

/* ---------- Filtres (sidebar) ---------- */
.layout-side{
  display:grid; grid-template-columns:286px 1fr; gap:2rem; align-items:start;
}
.filters{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad);
  padding:1.4rem 1.3rem; position:sticky; top:88px;
  max-height:calc(100vh - 110px); overflow:auto;
}
.filters h3{ font-size:.95rem; display:flex; justify-content:space-between; align-items:center; }
.filters .reset{ font-size:.74rem; font-weight:600; color:var(--bad); cursor:pointer; background:none; border:none; }
.fgroup{ padding:1rem 0; border-top:1px solid var(--bg-3); }
.fgroup:first-of-type{ border-top:none; padding-top:.4rem; }
.fgroup > b{
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  font-family:var(--ff-head); font-size:.8rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink);
}
.fgroup > b svg{ width:14px; height:14px; color:var(--mut); transition:transform .2s; }
.fgroup.closed > b svg{ transform:rotate(-90deg); }
.fgroup .fbody{ padding-top:.8rem; display:grid; gap:.45rem; }
.fgroup.closed .fbody{ display:none; }
.check{
  display:flex; align-items:center; gap:.6em; font-size:.88rem; color:var(--ink-2); cursor:pointer;
}
.check input{ accent-color:var(--indigo); width:16px; height:16px; cursor:pointer; }
.check .n{ margin-left:auto; font-size:.72rem; color:var(--mut-2); }
.price-range{ display:flex; gap:.5rem; align-items:center; }
.price-range input{
  width:100%; min-width:0; border:1.5px solid var(--line); border-radius:var(--rad);
  padding:.5em .7em; font-size:.85rem; outline:none;
}
.price-range input:focus{ border-color:var(--indigo-2); }

/* chips filtres actifs */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  display:inline-flex; align-items:center; gap:.45em;
  background:var(--cyan-soft); color:var(--on-accent); border:none;
  font-size:.78rem; font-weight:700; padding:.35em .9em; border-radius:var(--pill);
  cursor:pointer; transition:background .15s;
}
.chip:hover{ background:#9fe5f0; }
.chip svg{ width:12px; height:12px; }

/* ---------- Toolbar liste ---------- */
.toolbar{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad);
  padding:.7rem 1rem; margin-bottom:1.4rem;
}
.toolbar .count{ font-size:.88rem; color:var(--mut); }
.toolbar .count b{ color:var(--ink); font-family:var(--ff-head); }
.toolbar select{
  border:1.5px solid var(--line); border-radius:var(--pill); padding:.45em 1em;
  font-size:.85rem; outline:none; background:var(--surface); cursor:pointer;
}
.view-toggle{ display:flex; border:1.5px solid var(--line); border-radius:var(--pill); overflow:hidden; margin-left:auto; }
.view-toggle button{
  border:none; background:none; padding:.45em .85em; color:var(--mut); display:flex; align-items:center;
}
.view-toggle button.active{ background:var(--brand); color:#fff; }
.view-toggle svg{ width:16px; height:16px; }

/* ---------- Pagination ---------- */
.pagination{ display:flex; justify-content:center; gap:.45rem; margin-top:2.4rem; flex-wrap:wrap; }
.pagination button{
  min-width:42px; height:42px; padding:0 .8em; border-radius:50%;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-family:var(--ff-head); font-weight:700; font-size:.88rem; transition:all .15s;
}
.pagination button:hover{ border-color:var(--indigo); color:var(--indigo); }
.pagination button.cur{ background:var(--brand); border-color:var(--indigo); color:#fff; }
.pagination button[disabled]{ opacity:.4; pointer-events:none; }

/* ---------- Formulaires ---------- */
.field{ display:grid; gap:.4rem; margin-bottom:1.1rem; }
.field > label{ font-family:var(--ff-head); font-size:.82rem; font-weight:700; color:var(--ink); }
.field .hint{ font-size:.76rem; color:var(--mut); }
.field .err{ font-size:.78rem; color:var(--bad); display:none; }
.field.invalid .err{ display:block; }
.field.invalid .input{ border-color:var(--bad); }
.input{
  width:100%; border:2px solid var(--line); border-radius:var(--rad-md);
  padding:.7em 1em; outline:none; background:var(--surface); color:var(--ink);
  transition:border-color .18s, box-shadow .18s;
}
.input:focus{ border-color:var(--indigo-2); box-shadow:0 0 0 4px rgba(40,150,70,.10); }
textarea.input{ resize:vertical; min-height:120px; }
select.input{ cursor:pointer; }
.input-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.switch{ position:relative; display:inline-flex; align-items:center; gap:.7em; cursor:pointer; font-size:.9rem; }
.switch input{ position:absolute; opacity:0; }
.switch .tr{
  width:46px; height:26px; border-radius:13px; background:var(--bg-3); position:relative; transition:background .2s; flex:none;
}
.switch .tr::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.25); transition:transform .2s;
}
.switch input:checked + .tr{ background:var(--ok); }
.switch input:checked + .tr::after{ transform:translateX(20px); }

/* ---------- Wizard (publier) ---------- */
.steps{
  display:flex; gap:0; counter-reset:step; margin-bottom:2.2rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--pill);
  padding:.5rem; overflow-x:auto;
}
.steps .st{
  flex:1; min-width:max-content; display:flex; align-items:center; gap:.6em; padding:.5em 1.1em;
  font-family:var(--ff-head); font-size:.8rem; font-weight:700; color:var(--mut);
  border-radius:var(--pill); counter-increment:step; white-space:nowrap;
}
.steps .st::before{
  content:counter(step); width:26px; height:26px; flex:none; border-radius:50%;
  background:var(--bg-3); color:var(--mut); display:flex; align-items:center; justify-content:center;
  font-size:.74rem; font-weight:800;
}
.steps .st.cur{ background:var(--brand); color:#fff; }
.steps .st.cur::before{ background:var(--cyan); color:var(--ink); }
.steps .st.done{ color:var(--ok); }
.steps .st.done::before{ content:"✓"; background:#e3f7ef; color:var(--ok); }

/* upload photos */
.uploader{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.8rem;
}
.uploader .slot{
  aspect-ratio:1; border:2px dashed var(--line); border-radius:var(--rad-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  color:var(--mut); font-size:.72rem; cursor:pointer; transition:all .18s;
  position:relative; overflow:hidden; background:var(--bg-2); text-align:center; padding:.4rem;
}
.uploader .slot:hover{ border-color:var(--indigo-2); color:var(--indigo); background:var(--surface); }
.uploader .slot svg{ width:22px; height:22px; }
.uploader .slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.uploader .slot .rm{
  position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%;
  background:rgba(22,25,34,.75); color:#fff; border:none; font-size:.8rem; z-index:2;
}
.uploader .slot.main::after{
  content:"Photo principale"; position:absolute; bottom:0; left:0; right:0;
  background:rgba(26,112,53,.85); color:#fff; font-size:.6rem; padding:2px; z-index:2;
}

/* ---------- Page détail annonce ---------- */
.detail-grid{ display:grid; grid-template-columns:1fr 360px; gap:2rem; align-items:start; }
.gallery{ background:var(--surface); border:1px solid var(--line); border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad); overflow:hidden; }
.gallery .main{
  aspect-ratio:16/10; background:var(--bg-3); position:relative; overflow:hidden;
}
.gallery .main img, .gallery .main > svg{ width:100%; height:100%; object-fit:cover; }
.gallery .main .gnav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; border:none;
  background:rgba(255,255,255,.92); color:var(--ink); box-shadow:var(--shadow-1);
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.gallery .main .gnav:hover{ background:var(--cyan); }
.gallery .main .gnav.prev{ left:1rem; } .gallery .main .gnav.next{ right:1rem; }
.gallery .main .gnav svg{ width:18px; height:18px; }
.gallery .thumbs{ display:flex; gap:.6rem; padding:.8rem; overflow-x:auto; }
.gallery .thumbs button{
  width:84px; aspect-ratio:4/3; flex:none; border-radius:var(--rad); overflow:hidden;
  border:2.5px solid transparent; padding:0; background:var(--bg-3); transition:border-color .15s;
}
.gallery .thumbs button.cur{ border-color:var(--indigo); }
.gallery .thumbs img, .gallery .thumbs svg{ width:100%; height:100%; object-fit:cover; }

.detail-box{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad);
  padding:1.6rem 1.7rem; margin-top:1.4rem;
}
.detail-box h2{ font-size:1.2rem; margin-bottom:1rem; }
.spec-table{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.8rem 1.6rem; }
.spec-table .sp{
  display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0;
  border-bottom:1px dashed var(--line); font-size:.88rem;
}
.spec-table .sp span{ color:var(--mut); }
.spec-table .sp b{ color:var(--ink); text-align:right; }

.seller-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad);
  padding:1.5rem 1.5rem 1.6rem; position:sticky; top:88px;
}
.seller-card .price-big{
  font-family:var(--ff-head); font-size:1.7rem; font-weight:900; color:var(--indigo); line-height:1.1;
}
.seller-card .price-big small{ font-size:.85rem; color:var(--mut); font-weight:600; }
.seller-row{
  display:flex; align-items:center; gap:.9rem; padding:1.1rem 0; margin:1.1rem 0;
  border-top:1px solid var(--bg-3); border-bottom:1px solid var(--bg-3);
}
.seller-row .avatar{
  width:52px; height:52px; flex:none; border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  background:var(--brand); color:var(--cyan); display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-head); font-weight:900; font-size:1.2rem;
}
.seller-row b{ display:block; color:var(--ink); font-size:.95rem; }
.seller-row span{ font-size:.76rem; color:var(--mut); display:block; }
.safety{
  background:#fff8e6; border:1px solid #ffe3a3; border-radius:var(--rad-md);
  padding:1rem 1.1rem; font-size:.8rem; color:#7a5b00; margin-top:1.2rem;
}
.safety b{ display:flex; align-items:center; gap:.5em; color:#7a5b00; font-family:var(--ff-head); margin-bottom:.4rem; }
.safety ul{ list-style:disc; padding-left:1.1em; display:grid; gap:.25rem; }

/* ---------- Dashboard ---------- */
.dash{ display:grid; grid-template-columns:250px 1fr; gap:2rem; align-items:start; }
.dash-nav{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad);
  overflow:hidden; position:sticky; top:88px;
}
.dash-nav .who{ padding:1.3rem 1.2rem; background:var(--brand); color:#fff; }
.dash-nav .who b{ font-family:var(--ff-head); display:block; }
.dash-nav .who span{ font-size:.76rem; color:#c3c8f5; }
.dash-nav a{
  display:flex; align-items:center; gap:.7em; padding:.85em 1.2rem;
  color:var(--ink-2); font-size:.9rem; font-weight:600; border-left:3px solid transparent;
}
.dash-nav a svg{ width:17px; height:17px; color:var(--mut); }
.dash-nav a:hover{ background:var(--bg-2); color:var(--indigo); }
.dash-nav a.active{ border-left-color:var(--cyan); background:var(--bg-2); color:var(--indigo); }
.dash-nav a.active svg{ color:var(--indigo); }
.dash-nav a .pip{ margin-left:auto; background:var(--gn-red); color:#fff; font-size:.65rem; font-weight:800; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px; }

.stat-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1.1rem; margin-bottom:1.8rem; }
.stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad);
  padding:1.2rem 1.3rem; position:relative; overflow:hidden;
}
.stat-card::after{
  content:""; position:absolute; right:-22px; top:-22px; width:74px; height:74px; border-radius:50%;
  background:var(--cyan-soft); opacity:.55;
}
.stat-card b{ font-family:var(--ff-head); font-size:1.7rem; font-weight:900; color:var(--indigo); display:block; line-height:1.1; position:relative; z-index:1; }
.stat-card span{ font-size:.78rem; color:var(--mut); position:relative; z-index:1; }
.stat-card .up{ color:var(--ok); font-size:.72rem; font-weight:700; }

.table{
  width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--rad); overflow:hidden; font-size:.88rem;
}
.table th{
  text-align:left; font-family:var(--ff-head); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--mut); padding:.85em 1em; background:var(--bg-2);
  border-bottom:1px solid var(--line);
}
.table td{ padding:.85em 1em; border-bottom:1px solid var(--bg-3); vertical-align:middle; }
.table tr:last-child td{ border-bottom:none; }
.table tr:hover td{ background:var(--bg-2); }

/* ---------- Messagerie ---------- */
.chat{
  display:grid; grid-template-columns:320px 1fr; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad);
  overflow:hidden; min-height:560px; max-height:72vh;
}
.chat .threads{ border-right:1px solid var(--line); overflow-y:auto; }
.chat .threads .th{
  display:flex; gap:.8rem; padding:1rem 1.1rem; cursor:pointer; border-bottom:1px solid var(--bg-3);
  transition:background .15s; border-left:3px solid transparent;
}
.chat .threads .th:hover{ background:var(--bg-2); }
.chat .threads .th.cur{ background:var(--bg-2); border-left-color:var(--cyan); }
.chat .threads .av{
  width:44px; height:44px; flex:none; border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  background:var(--brand); color:var(--cyan); display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-head); font-weight:800;
}
.chat .threads b{ font-size:.88rem; color:var(--ink); display:block; }
.chat .threads .last{ font-size:.76rem; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:185px; }
.chat .threads .when{ margin-left:auto; font-size:.68rem; color:var(--mut-2); flex:none; }
.chat .conv{ display:flex; flex-direction:column; }
.chat .conv-head{
  display:flex; align-items:center; gap:.8rem; padding:.9rem 1.2rem; border-bottom:1px solid var(--line);
  background:var(--bg-2);
}
.chat .msgs{ flex:1; overflow-y:auto; padding:1.4rem; display:flex; flex-direction:column; gap:.7rem; background:var(--bg-2); }
.bubble{
  max-width:70%; padding:.7em 1.1em; border-radius:var(--rad-md);
  font-size:.9rem; line-height:1.5; position:relative;
}
.bubble.in{ align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:2px var(--rad-md) var(--rad-md) var(--rad-md); }
.bubble.out{ align-self:flex-end; background:var(--brand); color:#fff; border-radius:var(--rad-md) 2px var(--rad-md) var(--rad-md); }
.bubble .t{ display:block; font-size:.64rem; opacity:.65; margin-top:.3em; text-align:right; }
.chat .composer{
  display:flex; gap:.7rem; padding:.9rem 1.1rem; border-top:1px solid var(--line); background:var(--surface);
}
.chat .composer input{
  flex:1; border:2px solid var(--line); border-radius:var(--pill); padding:.6em 1.2em; outline:none;
}
.chat .composer input:focus{ border-color:var(--indigo-2); }

/* ---------- Auth ---------- */
.auth-wrap{
  min-height:calc(100vh - 0px); display:grid; grid-template-columns:1fr 1fr;
}
.auth-side{
  background:
    radial-gradient(700px 400px at 80% 10%, rgba(95,200,110,.25), transparent 60%),
    linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; padding:3.5rem; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.auth-side::before{
  content:""; position:absolute; inset:0; opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.4px); background-size:24px 24px;
}
.auth-side > *{ position:relative; }
.auth-side h2{ color:#fff; font-size:2rem; }
.auth-side li{ display:flex; gap:.8em; align-items:flex-start; margin-bottom:1.1rem; color:#dfe2ff; font-size:.95rem; }
.auth-side li svg{ width:20px; height:20px; flex:none; color:var(--cyan); margin-top:2px; }
.auth-form{ padding:3.5rem 2rem; display:flex; align-items:center; justify-content:center; }
.auth-form .inner{ width:100%; max-width:420px; }
.tabs{ display:flex; background:var(--bg-3); border-radius:var(--pill); padding:.35rem; margin-bottom:1.8rem; }
.tabs button{
  flex:1; border:none; background:none; padding:.6em; border-radius:var(--pill);
  font-family:var(--ff-head); font-weight:700; font-size:.88rem; color:var(--mut); transition:all .18s;
}
.tabs button.cur{ background:var(--surface); color:var(--indigo); box-shadow:var(--shadow-1); }

/* ---------- Newsletter / CTA bands ---------- */
.band-cta{
  position:relative; overflow:hidden; color:#fff; text-align:center;
  background:
    radial-gradient(600px 300px at 15% 110%, rgba(95,200,110,.3), transparent 60%),
    linear-gradient(120deg, var(--brand) 20%, var(--brand-2));
  border-radius:var(--cut) 0 var(--cut) 0;
  padding:3.4rem 2rem;
}
.band-cta::before{
  content:""; position:absolute; inset:0; opacity:.15;
  background-image:radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.4px); background-size:22px 22px;
}
.band-cta > *{ position:relative; }
.band-cta h2{ color:#fff; }
.band-cta p{ color:#dfe2ff; max-width:520px; margin:0 auto 1.6rem; }

.newsletter{
  display:flex; max-width:460px; margin:0 auto; background:var(--surface); border-radius:var(--pill); padding:.4rem;
}
.newsletter input{
  flex:1; min-width:0; border:none; outline:none; padding:.55em 1.2em; border-radius:var(--pill);
  font-size:.92rem;
}
.newsletter .btn{ flex:none; }

/* ---------- Footer ---------- */
.site-foot{
  background:var(--ink); color:#aeb3c0; margin-top:4.5rem; position:relative; font-size:.9rem;
}
.site-foot::before{
  content:""; display:block; height:4px;
  background:linear-gradient(90deg, var(--gn-red) 0 33.3%, var(--gn-yellow) 33.3% 66.6%, var(--gn-green) 66.6% 100%);
}
.foot-main{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding:3.4rem 0 2.6rem;
}
.site-foot h4{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.1rem; }
.site-foot a{ color:#aeb3c0; }
.site-foot a:hover{ color:var(--cyan); }
.foot-links li{ margin-bottom:.55rem; }
.foot-about p{ font-size:.86rem; line-height:1.7; }
.foot-contact li{ display:flex; gap:.7em; margin-bottom:.8rem; align-items:flex-start; }
.foot-contact svg{ width:16px; height:16px; flex:none; color:var(--cyan); margin-top:3px; }
.foot-social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.foot-social a{
  width:38px; height:38px; border-radius:50%; background:#23273330; border:1px solid #343a4a;
  display:flex; align-items:center; justify-content:center; color:#cfd3dd; transition:all .18s;
}
.foot-social a:hover{ background:var(--cyan); border-color:var(--cyan); color:var(--ink); transform:translateY(-3px); }
.foot-social svg{ width:16px; height:16px; }
.foot-pay{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.foot-pay span{
  background:#232733; border:1px solid #343a4a; color:#cfd3dd; font-size:.7rem; font-weight:700;
  padding:.35em .8em; border-radius:var(--rad);
}
.foot-bottom{
  border-top:1px solid #2a2f3d; padding:1.2rem 0; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; font-size:.78rem; color:#7c8290;
}
.foot-bottom .gn{ color:#cfd3dd; }
.to-top{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:90;
  width:46px; height:46px; border:none; border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  background:var(--brand); color:#fff; box-shadow:var(--shadow-2);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:all .25s;
}
.to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.to-top:hover{ background:var(--blue); }
.to-top svg{ width:18px; height:18px; }

/* ---------- Toast ---------- */
.toast-zone{ position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:300; display:grid; gap:.6rem; width:min(420px, 92vw); }
.toast{
  background:var(--ink); color:#fff; border-radius:var(--rad-md); padding:.85em 1.2em;
  font-size:.9rem; display:flex; align-items:center; gap:.7em;
  box-shadow:0 12px 36px rgba(0,0,0,.3); animation:toastIn .3s cubic-bezier(.2,.9,.3,1.2);
  border-left:4px solid var(--cyan);
}
.toast.ok{ border-left-color:var(--ok); }
.toast.err{ border-left-color:var(--bad); }
.toast.warn{ border-left-color:var(--warn); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } }

/* ---------- Modal ---------- */
.modal-back{
  position:fixed; inset:0; z-index:250; background:rgba(22,25,34,.6);
  display:flex; align-items:center; justify-content:center; padding:1.2rem;
  opacity:0; pointer-events:none; transition:opacity .22s;
}
.modal-back.open{ opacity:1; pointer-events:auto; }
.modal{
  background:var(--surface); border-radius:var(--rad-md) var(--cut-sm) var(--rad-md) var(--rad-md);
  width:min(480px,100%); max-height:86vh; overflow:auto; padding:1.8rem;
  transform:translateY(16px) scale(.97); transition:transform .25s cubic-bezier(.2,.8,.25,1.1);
}
.modal-back.open .modal{ transform:none; }
.modal h3{ margin-bottom:1rem; }

/* ---------- FAQ accordéon ---------- */
.faq{ display:grid; gap:.8rem; }
.faq details{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad-md);
  padding:0; overflow:hidden; transition:border-color .2s;
}
.faq details[open]{ border-color:var(--indigo-soft); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.1rem 1.3rem;
  font-family:var(--ff-head); font-weight:700; font-size:.95rem; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-size:1.3rem; color:var(--indigo); transition:transform .2s; flex:none;
  width:28px; height:28px; border-radius:50%; background:var(--bg-3);
  display:flex; align-items:center; justify-content:center;
}
.faq details[open] summary::after{ transform:rotate(45deg); background:var(--cyan); color:var(--ink); }
.faq .faq-bd{ padding:0 1.3rem 1.2rem; font-size:.92rem; color:var(--mut); }

/* ---------- Skeleton ---------- */
.skeleton{
  background:linear-gradient(90deg, var(--bg-3) 25%, #e4e6ee 50%, var(--bg-3) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--rad);
}
@keyframes shimmer{ to{ background-position:-200% 0; } }

/* ---------- Empty state ---------- */
.empty{
  text-align:center; padding:4rem 1.5rem; background:var(--surface); border:1.5px dashed var(--line);
  border-radius:var(--rad-md);
}
.empty svg{ width:64px; height:64px; margin:0 auto 1.2rem; color:var(--mut-2); }
.empty h3{ color:var(--ink); }
.empty p{ color:var(--mut); max-width:380px; margin:0 auto 1.4rem; }

/* ---------- Reveal au scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; } .reveal[data-d="4"]{ transition-delay:.32s; }

/* ---------- Étapes "comment ça marche" ---------- */
.how-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.4rem; counter-reset:how; }
.how-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad) var(--rad) var(--cut-sm) var(--rad);
  padding:1.8rem 1.5rem; position:relative; counter-increment:how;
  transition:transform .2s, box-shadow .25s;
}
.how-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); }
.how-card::before{
  content:"0" counter(how); position:absolute; top:1.1rem; right:1.3rem;
  font-family:var(--ff-head); font-weight:900; font-size:2.2rem; color:var(--bg-3);
}
.how-card .ic{
  width:56px; height:56px; border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  background:var(--brand); color:var(--cyan); display:flex; align-items:center; justify-content:center;
  margin-bottom:1.1rem;
}
.how-card .ic svg{ width:26px; height:26px; }
.how-card p{ font-size:.88rem; color:var(--mut); margin:0; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .layout-side{ grid-template-columns:1fr; }
  .filters{ position:static; max-height:none; }
  .detail-grid{ grid-template-columns:1fr; }
  .seller-card{ position:static; }
  .dash{ grid-template-columns:1fr; }
  .dash-nav{ position:static; }
  .foot-main{ grid-template-columns:1fr 1fr; }
  .auth-wrap{ grid-template-columns:1fr; }
  .auth-side{ display:none; }
}
@media (max-width: 860px){
  .head-search{ display:none; }
  .burger{ display:block; }
  .head-link span{ display:none; }
  .hero-search{ grid-template-columns:1fr; border-radius:var(--rad-md); }
  .hero-search .hs-field{ border-right:none; border-bottom:1px solid var(--line); padding:.7em .8em; }
  .hero-search .btn{ border-radius:var(--rad-md); margin-top:.3rem; }
  .ads-list .card-ad{ flex-direction:column; border-radius:var(--rad) var(--rad) var(--cut-sm) var(--rad); }
  .ads-list .card-ad .ph{ width:100%; }
  .chat{ grid-template-columns:1fr; max-height:none; }
  .chat .threads{ display:none; }
  .chat.show-threads .threads{ display:block; }
  .chat.show-threads .conv{ display:none; }
  .section{ padding:2.8rem 0; }
  .input-row{ grid-template-columns:1fr; }
  .table{ display:block; overflow-x:auto; }
}
@media (max-width: 560px){
  .foot-main{ grid-template-columns:1fr; gap:1.8rem; }
  .topbar .tb-left .hide-s{ display:none; }
  .hero-in{ padding:3rem 0; }
  .hero-stats{ gap:1.4rem; }
}

/* ============================================================
   Comparateur d'annonces : barre flottante + page de comparaison
   ============================================================ */
.compare-tray{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -10px 32px rgba(22,25,34,.14);
  transform:translateY(110%); transition:transform .3s cubic-bezier(.2,.8,.25,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.compare-tray.show{ transform:none; }
.ct-in{ display:flex; align-items:center; gap:1.2rem; padding:.8rem 22px; }
.ct-label{ display:flex; align-items:center; gap:.5em; flex:none; color:var(--ink); }
.ct-label svg{ width:20px; height:20px; color:var(--indigo); }
.ct-label b{ font-family:var(--ff-head); }
.ct-label span{ font-size:.78rem; color:var(--mut); }
.ct-thumbs{ display:flex; gap:.6rem; flex:1; overflow-x:auto; }
.ct-thumb{
  position:relative; width:60px; height:46px; flex:none; border-radius:var(--rad);
  overflow:hidden; border:1px solid var(--line); background:var(--bg-3);
}
.ct-thumb svg{ width:100%; height:100%; object-fit:cover; }
.ct-thumb button{
  position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%;
  border:none; background:rgba(22,25,34,.78); color:#fff; display:flex;
  align-items:center; justify-content:center; padding:0;
}
.ct-thumb button svg{ width:11px; height:11px; }
.ct-actions{ display:flex; gap:.6rem; flex:none; }

/* page de comparaison */
.cmp-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad); background:var(--surface); }
.cmp-table{ width:100%; border-collapse:collapse; min-width:560px; }
.cmp-table th, .cmp-table td{
  padding:1rem 1.1rem; border-bottom:1px solid var(--bg-3); text-align:left;
  vertical-align:top; font-size:.9rem;
}
.cmp-table thead th{ background:var(--bg-2); border-bottom:1px solid var(--line); width:280px; }
.cmp-table tbody th{
  font-family:var(--ff-head); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--mut); background:var(--bg-2); white-space:nowrap; position:sticky; left:0;
}
.cmp-table tr:hover td{ background:var(--bg-2); }
.cmp-col{ position:relative; }
.cmp-col .ph{ aspect-ratio:4/3; border-radius:var(--rad); overflow:hidden; background:var(--bg-3); margin-bottom:.7rem; }
.cmp-col .ph svg{ width:100%; height:100%; object-fit:cover; }
.cmp-col h3{ font-size:.98rem; line-height:1.35; margin-bottom:.4rem; }
.cmp-col h3 a{ color:var(--ink); }
.cmp-col .price{ font-family:var(--ff-head); font-weight:900; color:var(--indigo); font-size:1.1rem; }
.cmp-col .rm{
  position:absolute; top:0; right:0; width:26px; height:26px; border-radius:50%;
  border:none; background:var(--bg-3); color:var(--mut); display:flex;
  align-items:center; justify-content:center;
}
.cmp-col .rm:hover{ background:var(--bad); color:#fff; }
.cmp-table td.best{ background:#e8f8f0 !important; }
.cmp-table td.best .price{ color:var(--ok); }
.cmp-best-tag{ display:inline-flex; align-items:center; gap:.3em; font-size:.66rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ok); margin-left:.4em; }

/* indicateur de prix (fiche annonce) */
.price-insight{
  display:inline-flex; align-items:center; gap:.5em; margin-top:.5rem;
  padding:.4em .9em; border-radius:var(--pill); font-size:.8rem; font-weight:700;
  font-family:var(--ff-head);
}
.price-insight svg{ width:1em; height:1em; }
.price-insight.good{ background:#e3f7ef; color:var(--ok); }
.price-insight.fair{ background:var(--bg-3); color:var(--ink-2); }
.price-insight.high{ background:#fff1e6; color:#c2630a; }
.price-insight + .pi-note{ font-size:.74rem; color:var(--mut); margin-top:.4rem; }

@media (max-width: 860px){
  .compare-tray{ bottom:calc(4.2rem + env(safe-area-inset-bottom)); }
  .ct-label span, .ct-actions .btn span{ display:inline; }
  .ct-in{ gap:.7rem; padding:.7rem 16px; }
}

/* ============================================================
   Avis & notes vendeurs : étoiles + section d'avis
   ============================================================ */
.stars{ display:inline-flex; align-items:center; gap:1px; vertical-align:middle; }
.stars svg{ width:16px; height:16px; }
.stars.sm svg{ width:13px; height:13px; }
.stars svg.f{ fill:var(--warn); stroke:var(--warn); }
.stars svg.e{ fill:none; stroke:var(--mut-2); }
.star-num{ font-family:var(--ff-head); font-weight:800; color:var(--ink); margin-left:.4em; font-size:.85em; }
.star-count{ font-size:.78rem; color:var(--mut); margin-left:.45em; }
.shop-rating{ margin-top:.5rem; min-height:1.2em; display:flex; align-items:center; justify-content:center; }

/* badges de confiance (signaux automatiques) */
.tbadges{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tbadge{
  display:inline-flex; align-items:center; gap:.4em;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); color:#fff;
  font-family:var(--ff-head); font-size:.74rem; font-weight:700;
  padding:.32em .8em; border-radius:var(--pill);
}
.tbadge svg{ width:14px; height:14px; color:var(--cyan); }
.tbadges.on-light .tbadge{ background:var(--bg-3); border-color:var(--line); color:var(--ink-2); }
.tbadges.on-light .tbadge svg{ color:var(--indigo); }

/* note en gros (en-tête d'une section d'avis) */
.rating-hero{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.rating-big{ text-align:center; flex:none; }
.rating-big b{ font-family:var(--ff-head); font-weight:900; font-size:2.6rem; color:var(--indigo); line-height:1; display:block; }
.rating-big .stars{ margin-top:.3rem; }
.rating-big span{ display:block; font-size:.78rem; color:var(--mut); margin-top:.3rem; }

/* liste d'avis */
.reviews{ display:grid; gap:1rem; }
.review{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad);
  padding:1.1rem 1.3rem;
}
.review-head{ display:flex; align-items:center; gap:.8rem; margin-bottom:.5rem; }
.review-head .av{
  width:40px; height:40px; flex:none; border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  background:var(--brand); color:var(--cyan); display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-head); font-weight:800; font-size:.95rem;
}
.review-head b{ color:var(--ink); display:block; font-size:.92rem; }
.review-head .when{ font-size:.74rem; color:var(--mut); }
.review-head .stars{ margin-left:auto; }
.review p{ margin:0; color:var(--ink-2); font-size:.92rem; line-height:1.6; }

/* formulaire de notation : étoiles cliquables */
.star-input{ display:inline-flex; gap:.2rem; direction:rtl; }
.star-input input{ position:absolute; opacity:0; width:0; height:0; }
.star-input label{ cursor:pointer; color:var(--mut-2); line-height:1; }
.star-input label svg{ width:30px; height:30px; fill:none; stroke:currentColor; transition:color .12s; }
.star-input input:checked ~ label,
.star-input label:hover, .star-input label:hover ~ label{ color:var(--warn); }
.star-input input:checked ~ label svg,
.star-input label:hover svg, .star-input label:hover ~ label svg{ fill:var(--warn); stroke:var(--warn); }

/* note compacte dans la carte vendeur (fiche annonce) */
.seller-rating{ display:flex; align-items:center; gap:.4em; margin-top:.3rem; font-size:.85rem; }
.seller-rating a{ font-size:.78rem; font-weight:700; margin-left:auto; }

/* indicateur de prix au dépôt (publier) */
.price-coach{ margin-top:.6rem; font-size:.82rem; }
.price-coach .est{ color:var(--mut); }
.price-coach .est b{ color:var(--ink); }
.price-coach .verdict{
  display:inline-flex; align-items:center; gap:.4em; margin-top:.4rem;
  padding:.35em .8em; border-radius:var(--pill); font-weight:700; font-family:var(--ff-head); font-size:.8rem;
}
.price-coach .verdict svg{ width:1em; height:1em; }
.price-coach .verdict.good{ background:#e3f7ef; color:var(--ok); }
.price-coach .verdict.fair{ background:var(--bg-3); color:var(--ink-2); }
.price-coach .verdict.high{ background:#fff1e6; color:#c2630a; }

/* ============================================================
   App-like : barre de navigation basse (mobile) + filtres
   en feuille coulissante + ajustements PWA standalone
   (fonctionnel uniquement — n'altère pas le design v1 desktop)
   ============================================================ */

/* ---------- Barre de navigation basse ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:120; display:none;
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -8px 28px rgba(22,25,34,.10);
  padding:.3rem max(.4rem, env(safe-area-inset-right))
          calc(.3rem + env(safe-area-inset-bottom))
          max(.4rem, env(safe-area-inset-left));
}
.bottom-nav-in{ display:grid; grid-template-columns:repeat(5,1fr); max-width:34rem; margin:0 auto; }
.bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:.4rem .15rem .3rem; position:relative;
  font-family:var(--ff-head); font-size:.6rem; font-weight:700; color:var(--mut);
}
.bottom-nav a svg{ width:1.45rem; height:1.45rem; }
.bottom-nav a.active{ color:var(--indigo); }
.bottom-nav a.active::before{
  content:""; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  width:1.6rem; height:3px; border-radius:2px; background:var(--cyan);
}
.bottom-nav a .pip{
  position:absolute; top:0; right:calc(50% - 1.5rem); min-width:16px; height:16px;
  padding:0 4px; border-radius:8px; background:var(--gn-red); color:#fff;
  font-size:.58rem; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.bottom-nav .bn-pub span.ic{
  width:2.9rem; height:2.9rem; margin-top:-1.55rem;
  border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  background:var(--cyan); color:var(--ink); border:4px solid #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(95,200,110,.5);
}
.bottom-nav .bn-pub span.ic svg{ width:1.3rem; height:1.3rem; }
.bottom-nav .bn-pub{ color:var(--ink); }

/* ---------- Filtres en feuille coulissante ---------- */
.filter-fab{
  position:fixed; right:1rem; bottom:1.2rem; z-index:110; display:none;
  align-items:center; gap:.5em; border:none; cursor:pointer;
  background:var(--brand); color:#fff; border-radius:var(--pill);
  padding:.8em 1.4em; font-family:var(--ff-head); font-size:.85rem; font-weight:800;
  box-shadow:var(--shadow-2);
}
.filter-fab svg{ width:1.05em; height:1.05em; }
.filter-fab .n{
  background:var(--cyan); color:var(--ink); border-radius:var(--pill);
  font-size:.72rem; padding:.1em .55em;
}
.filters-dim{
  position:fixed; inset:0; z-index:130; background:rgba(22,25,34,.55);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.filters .sheet-apply{ display:none; }

@media (max-width: 1080px){
  body.has-filters .filter-fab{ display:inline-flex; }
  body.has-filters .layout-side .filters{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:140; margin:0;
    max-height:82vh; max-height:82dvh;
    border-radius:var(--cut-sm) var(--cut-sm) 0 0; border-bottom:none;
    transform:translateY(105%); transition:transform .32s cubic-bezier(.2,.8,.25,1);
    overflow:auto; overscroll-behavior:contain;
    padding-bottom:calc(1.2rem + env(safe-area-inset-bottom));
  }
  body.has-filters.filters-open .layout-side .filters{ transform:none; }
  body.has-filters.filters-open .filters-dim{ opacity:1; pointer-events:auto; }
  .filters .sheet-apply{
    display:block; position:sticky; bottom:0; margin-top:1rem;
    background:var(--surface); padding-top:.6rem; box-shadow:0 -10px 16px #fff;
  }
}

/* ---------- Mobile : la barre basse prend le relais ---------- */
@media (max-width: 860px){
  .bottom-nav{ display:block; }
  body{ padding-bottom:calc(4.2rem + env(safe-area-inset-bottom)); }
  .to-top{ bottom:calc(4.8rem + env(safe-area-inset-bottom)); }
  .toast-zone{ bottom:calc(4.8rem + env(safe-area-inset-bottom)); }
  .filter-fab{ bottom:calc(4.8rem + env(safe-area-inset-bottom)); }
  .head-actions .head-link{ display:none; } /* relayé par la barre basse */
  .site-foot{ padding-bottom:.5rem; }
}

/* ---------- Petites attentions d'écrans ---------- */
@media (max-height: 480px) and (orientation: landscape){
  .hero-in{ padding:2.2rem 0; }
  .bottom-nav{ display:none; }
  body{ padding-bottom:0; }
}
@media (display-mode: standalone){
  .topbar{ display:none; } /* installé : on gagne l'espace du bandeau */
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; }
}

/* ============================================================
   MODE SOMBRE — opt-in (html[data-theme="dark"])
   Le thème clair (v1) reste la valeur par défaut.
   On redéfinit les variables ; les fonds blancs passent par
   var(--surface) ; quelques surfaces "chrome" et pastilles
   claires sont repinées pour garder un bon contraste.
   ============================================================ */
html[data-theme="dark"]{
  --bg:          #0d0f15;
  --bg-2:        #14161d;
  --bg-3:        #232838;
  --line:        #323a4f;
  --surface:     #1b1f2b;
  --white:       #1b1f2b;
  --ink:         #f4f6fb;
  --ink-2:       #c9cedb;
  --mut:         #98a0b0;
  --mut-2:       #6f7889;
  --indigo:      #4cc566;
  --indigo-2:    #5fce72;
  --indigo-3:    #6ad17c;
  --indigo-soft: #8fdca0;
  --blue:        #4f9ff0;   /* azur clair lisible sur fond sombre */
  --blue-d:      #82bbf7;   /* survol de liens (plus clair en sombre) */
  --cyan:        #5fce72;
  --on-accent:   #12141b;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.4);
  --shadow-2: 0 6px 18px rgba(0,0,0,.45), 0 14px 40px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* surfaces "chrome" toujours sombres (utilisaient var(--ink) comme fond) */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .site-foot,
html[data-theme="dark"] .admin-nav .who{ background:#0a0c11; }
html[data-theme="dark"] .toast{ background:#272c38; color:#fff; }

/* pastilles claires (cyan/jaune) : texte sombre dans les deux thèmes */
html[data-theme="dark"] .badge-une,
html[data-theme="dark"] .badge-new,
html[data-theme="dark"] .btn-accent,
html[data-theme="dark"] .filter-fab .n,
html[data-theme="dark"] .bottom-nav .bn-pub span.ic,
html[data-theme="dark"] .shop-card .avatar,
html[data-theme="dark"] .cat-tile:hover .ic,
html[data-theme="dark"] .steps .st.cur::before,
html[data-theme="dark"] ::selection{ color:var(--on-accent); }
html[data-theme="dark"] ::selection{ background:var(--cyan); }

/* encarts d'astuce / sécurité : variante sombre lisible */
html[data-theme="dark"] .safety{ background:#2a2410; border-color:#4a3d16; color:#f0d68a; }
html[data-theme="dark"] .safety b{ color:#f6e3a6; }
html[data-theme="dark"] .tip-box{ background:#11203a; border-color:#1d3a63; color:var(--ink-2); }
html[data-theme="dark"] .price-insight.high,
html[data-theme="dark"] .price-coach .verdict.high{ background:#3a2410; color:#ffb877; }
html[data-theme="dark"] .price-insight.good,
html[data-theme="dark"] .price-coach .verdict.good{ background:#0e2c20; color:#5fe0a8; }
html[data-theme="dark"] .badge-ok{ background:#0e2c20; color:#5fe0a8; }
html[data-theme="dark"] .badge-verif{ background:#0e2236; color:#79c0ff; }

/* boutons clairs : texte lisible sur surface sombre */
html[data-theme="dark"] .btn-light{ background:var(--bg-3); color:var(--indigo-soft); }
html[data-theme="dark"] .tabs button.cur{ color:var(--indigo-soft); }

/* fondu blanc de la feuille de filtres -> surface */
html[data-theme="dark"] .filters .sheet-apply{ background:var(--surface); box-shadow:0 -10px 16px var(--surface); }

/* champ de recherche d'en-tête */
html[data-theme="dark"] .head-search input{ background:var(--bg-2); }

/* bouton bascule de thème */
.theme-toggle{
  display:inline-flex; align-items:center; gap:.4em; background:none; border:none;
  color:inherit; cursor:pointer; font:inherit; padding:.15rem .3rem; border-radius:var(--rad);
}
.theme-toggle svg{ width:15px; height:15px; vertical-align:-2px; }
.theme-toggle:hover{ color:var(--cyan); }

/* ============================================================
   Tableau de bord vendeur : KPI, sparklines, histogramme
   ============================================================ */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1.1rem; margin-bottom:1.8rem; }
.kpi{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad); padding:1.1rem 1.3rem; position:relative;
}
.kpi .kpi-ic{
  width:38px; height:38px; border-radius:var(--cut-sm) 0 var(--cut-sm) 0; margin-bottom:.7rem;
  background:var(--bg-3); color:var(--indigo); display:flex; align-items:center; justify-content:center;
}
.kpi .kpi-ic svg{ width:19px; height:19px; }
.kpi b{ font-family:var(--ff-head); font-size:1.7rem; font-weight:900; color:var(--ink); display:block; line-height:1.1; }
.kpi span{ font-size:.78rem; color:var(--mut); }
.kpi .trend{ display:inline-flex; align-items:center; gap:.25em; font-size:.74rem; font-weight:700; margin-top:.3rem; }
.kpi .trend svg{ width:13px; height:13px; }
.kpi .trend.up{ color:var(--ok); }
.kpi .trend.down{ color:var(--bad); }
.kpi .trend.flat{ color:var(--mut); }

/* carte graphique */
.chart-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad); padding:1.4rem 1.5rem 1.2rem; margin-bottom:1.8rem;
}
.chart-card .ch-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.chart-card .ch-head h3{ margin:0; font-size:1.05rem; }
.chart-card .ch-head .tot{ font-family:var(--ff-head); font-weight:800; color:var(--indigo); }

.barchart{ display:flex; align-items:flex-end; gap:.4rem; height:170px; }
.bc-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.4rem; height:100%; justify-content:flex-end; min-width:0; }
.bc-bar{
  width:100%; max-width:30px; background:linear-gradient(180deg, var(--indigo-soft), var(--indigo));
  border-radius:5px 5px 0 0; position:relative; transition:filter .15s; cursor:default;
}
.bc-col:hover .bc-bar{ filter:brightness(1.12); }
.bc-tip{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:.68rem; line-height:1.3; white-space:nowrap;
  padding:.3em .6em; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .15s; z-index:3; text-align:center;
}
html[data-theme="dark"] .bc-tip{ background:#272c38; }
.bc-col:hover .bc-tip{ opacity:1; }
.bc-lab{ font-size:.6rem; color:var(--mut); white-space:nowrap; height:1em; }

.sparkline{ width:120px; height:32px; display:block; }

/* top annonces (perf) */
.perf-list{ display:grid; gap:.7rem; }
.perf-row{
  display:flex; align-items:center; gap:1rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--rad); padding:.7rem .9rem;
}
.perf-row .mini-cover{ width:54px; height:42px; border-radius:6px; overflow:hidden; flex:none; }
.perf-row .mini-cover svg{ width:100%; height:100%; }
.perf-row .pr-main{ flex:1; min-width:0; }
.perf-row .pr-main b{ font-size:.9rem; color:var(--ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.perf-row .pr-main span{ font-size:.74rem; color:var(--mut); }
.perf-row .pr-spark{ flex:none; }
.perf-row .pr-nums{ flex:none; text-align:right; font-size:.78rem; color:var(--mut); min-width:74px; }
.perf-row .pr-nums b{ font-family:var(--ff-head); color:var(--indigo); display:block; font-size:1rem; }
@media (max-width:560px){ .perf-row .pr-spark{ display:none; } .bc-lab{ font-size:.5rem; } }

/* cellules perf dans le tableau Mes annonces */
.cell-perf{ display:flex; align-items:center; gap:.6rem; }
.cell-perf .sparkline{ width:84px; height:26px; }
.cell-perf .cp-nums{ font-size:.74rem; color:var(--mut); white-space:nowrap; }
.cell-perf .cp-nums b{ color:var(--ink); font-weight:700; }

/* ============================================================
   Catégorie externalisée (Véhicules → plateforme auto dédiée)
   ============================================================ */
.cat-nav a.ext-cat svg:last-child{ width:12px; height:12px; color:var(--cyan); margin-left:.15em; }
.drawer nav a.ext-cat svg:last-child{ width:14px; height:14px; color:var(--cyan); margin-left:auto; }
.f-cat.ext-cat{ text-decoration:none; }
.f-cat.ext-cat svg:last-child{ width:13px; height:13px; color:var(--cyan); margin-left:auto; }
.foot-links a.ext-cat svg{ width:11px; height:11px; vertical-align:-1px; color:var(--cyan); }
.ext-cat{ position:relative; }

/* tuile « partenaire auto » sur l'accueil */
.cat-tile.ext{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color:transparent; color:#fff;
}
.cat-tile.ext::after{
  content:""; position:absolute; inset:0; opacity:.18; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.7) 1px, transparent 1.4px); background-size:16px 16px;
}
.cat-tile.ext .ic{ background:rgba(255,255,255,.16); color:#fff; }
.cat-tile.ext:hover .ic{ background:var(--cyan); color:var(--ink); }
.cat-tile.ext b{ color:#fff; }
.cat-tile.ext span{ color:#dfe2ff; }
.cat-tile.ext .ext-tag{
  position:absolute; top:.7rem; right:.7rem; display:inline-flex; align-items:center; gap:.3em;
  background:var(--cyan); color:var(--on-accent); font-family:var(--ff-head); font-weight:800;
  font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; padding:.25em .6em; border-radius:var(--pill);
}
.cat-tile.ext .ext-tag svg{ width:11px; height:11px; }

/* bannière de renvoi vers la plateforme auto */
.auto-banner{
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  background:
    radial-gradient(600px 200px at 90% -40%, rgba(95,200,110,.25), transparent 60%),
    linear-gradient(120deg, var(--ink) 30%, #20243a);
  color:#fff; border-radius:var(--cut) 0 var(--cut) 0; padding:1.6rem 2rem; position:relative; overflow:hidden;
}
.auto-banner::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:linear-gradient(90deg, var(--gn-red) 0 33.3%, var(--gn-yellow) 33.3% 66.6%, var(--gn-green) 66.6% 100%);
}
.auto-banner .ab-ic{
  width:60px; height:60px; flex:none; border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  background:var(--cyan); color:var(--ink); display:flex; align-items:center; justify-content:center;
}
.auto-banner .ab-ic svg{ width:30px; height:30px; }
.auto-banner .ab-txt{ flex:1; min-width:220px; }
.auto-banner .ab-txt b{ font-family:var(--ff-head); font-size:1.2rem; font-weight:800; display:block; }
.auto-banner .ab-txt span{ color:#c3c8f5; font-size:.92rem; }
.auto-banner .btn{ flex:none; }
@media (max-width:560px){ .auto-banner{ padding:1.3rem 1.2rem; } .auto-banner .btn{ width:100%; } }

/* ============================================================
   Explorer par région (accueil)
   ============================================================ */
.region-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1rem; }
.region-card{
  display:flex; align-items:center; gap:1rem; position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad);
  padding:1.1rem 1.2rem; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.region-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--indigo-soft); }
.region-card .rc-ic{
  width:50px; height:50px; flex:none; border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  background:var(--bg-3); color:var(--indigo); display:flex; align-items:center; justify-content:center; transition:all .25s;
}
.region-card:hover .rc-ic{ background:var(--cyan); color:var(--ink); border-radius:0 var(--cut-sm) 0 var(--cut-sm); }
.region-card .rc-ic svg{ width:26px; height:26px; }
.region-card .rc-bd{ flex:1; min-width:0; }
.region-card .rc-bd b{ font-family:var(--ff-head); font-size:1rem; color:var(--ink); display:block; }
.region-card .rc-bd span{ font-size:.78rem; color:var(--mut); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.region-card .rc-n{
  flex:none; text-align:right; font-family:var(--ff-head); font-weight:900; font-size:1.25rem; color:var(--indigo); line-height:1;
}
.region-card .rc-n small{ display:block; font-family:var(--ff-body); font-weight:600; font-size:.66rem; color:var(--mut); }
.region-card .rc-go{ flex:none; color:var(--mut-2); transition:transform .18s, color .18s; }
.region-card .rc-go svg{ width:18px; height:18px; }
.region-card:hover .rc-go{ color:var(--indigo); transform:translateX(3px); }
@media (max-width:380px){ .region-card .rc-bd span{ white-space:normal; } }

/* ============================================================
   Monétisation : paiement mobile money, boosts, forfaits Pro
   ============================================================ */
/* paiement mobile money */
.pay-head{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.1rem; }
.pay-ic{ width:44px; height:44px; flex:none; border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  background:var(--brand); color:var(--cyan); display:flex; align-items:center; justify-content:center; }
.pay-ic svg{ width:22px; height:22px; }
.pay-amount{ display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--rad-md); padding:.8rem 1.1rem; margin-bottom:1.2rem; }
.pay-amount span{ color:var(--mut); font-size:.85rem; }
.pay-amount b{ font-family:var(--ff-head); font-size:1.35rem; color:var(--indigo); }
.op-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.op-card{ border:2px solid var(--line); border-radius:var(--rad-md); padding:.7rem; background:var(--surface);
  cursor:pointer; text-align:left; transition:border-color .15s, transform .15s; }
.op-card b{ display:block; font-family:var(--ff-head); font-size:.92rem; color:var(--ink); }
.op-card span{ font-size:.72rem; color:var(--mut); }
.op-card.on{ border-color:var(--indigo); transform:translateY(-1px); }
.op-card.op-orange.on{ border-color:#ff7900; } .op-card.op-mtn.on{ border-color:#ffcc00; }
.op-card::before{ content:""; display:block; width:26px; height:26px; border-radius:7px; margin-bottom:.4rem; }
.op-card.op-orange::before{ background:#ff7900; } .op-card.op-mtn::before{ background:#ffcc00; }
.pay-progress, .pay-done{ text-align:center; padding:1.8rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.pay-progress b{ font-family:var(--ff-head); }
.spinner{ width:42px; height:42px; border-radius:50%; border:4px solid var(--bg-3); border-top-color:var(--indigo);
  animation:spin 0.8s linear infinite; margin-bottom:.6rem; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.pay-check{ width:58px; height:58px; border-radius:50%; background:#e3f7ef; color:var(--ok);
  display:flex; align-items:center; justify-content:center; }
.pay-check svg{ width:30px; height:30px; }
html[data-theme="dark"] .pay-check{ background:#0e2c20; }

/* liste de boosts (modale) */
.boost-list{ display:grid; gap:.6rem; margin-top:.4rem; }
.boost-opt{ display:flex; align-items:center; gap:.8rem; border:2px solid var(--line); border-radius:var(--rad-md);
  padding:.7rem .9rem; cursor:pointer; transition:border-color .15s; }
.boost-opt:hover{ border-color:var(--indigo-soft); }
.boost-opt input{ accent-color:var(--indigo); flex:none; }
.boost-opt input:checked ~ *{ }
.boost-opt:has(input:checked){ border-color:var(--indigo); background:var(--bg-2); }
.boost-opt.pop{ position:relative; }
.bo-ic{ width:38px; height:38px; flex:none; border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  background:var(--bg-3); color:var(--indigo); display:flex; align-items:center; justify-content:center; }
.bo-ic svg{ width:19px; height:19px; }
.bo-bd{ flex:1; min-width:0; } .bo-bd b{ font-family:var(--ff-head); font-size:.9rem; color:var(--ink); display:block; }
.bo-px{ flex:none; text-align:right; font-family:var(--ff-head); font-weight:800; color:var(--indigo); font-size:.95rem; }
.bo-px small{ display:block; font-family:var(--ff-body); font-weight:600; font-size:.66rem; color:var(--mut); }

/* page Tarifs : forfaits */
.plans-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.4rem; align-items:start; }
.plan{ background:var(--surface); border:1.5px solid var(--line); border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad);
  padding:1.8rem 1.6rem; position:relative; transition:transform .2s, box-shadow .2s; }
.plan:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); }
.plan.pop{ border-color:var(--indigo); box-shadow:var(--shadow-2); }
.plan.pop::before{ content:"Le plus choisi"; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:#fff; font-family:var(--ff-head); font-weight:800; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.06em; padding:.35em 1em; border-radius:var(--pill); white-space:nowrap; }
.plan .p-ic{ width:48px; height:48px; border-radius:var(--cut-sm) 0 var(--cut-sm) 0; background:var(--brand); color:var(--cyan);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.plan .p-ic svg{ width:24px; height:24px; }
.plan h3{ font-size:1.3rem; margin-bottom:.2rem; }
.plan .p-cible{ color:var(--mut); font-size:.82rem; min-height:2.4em; }
.plan .p-price{ font-family:var(--ff-head); margin:1rem 0; }
.plan .p-price b{ font-size:2rem; font-weight:900; color:var(--indigo); }
.plan .p-price span{ color:var(--mut); font-size:.85rem; }
.plan ul{ display:grid; gap:.6rem; margin:1.2rem 0 1.4rem; }
.plan li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--ink-2); }
.plan li svg{ width:17px; height:17px; flex:none; color:var(--ok); margin-top:.15em; }
.bill-toggle{ display:inline-flex; background:var(--bg-3); border-radius:var(--pill); padding:.3rem; margin:0 auto 2rem; }
.bill-toggle button{ border:none; background:none; padding:.5em 1.2em; border-radius:var(--pill);
  font-family:var(--ff-head); font-weight:700; font-size:.85rem; color:var(--mut); cursor:pointer; }
.bill-toggle button.on{ background:var(--surface); color:var(--indigo); box-shadow:var(--shadow-1); }
.bill-save{ color:var(--ok); font-size:.7rem; font-weight:800; margin-left:.3em; }
/* grille des boosts (page tarifs) */
.boosts-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem; }
.boost-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad);
  padding:1.3rem 1.4rem; position:relative; }
.boost-card.pop{ border-color:var(--cyan); }
.boost-card .bc-ic{ width:44px; height:44px; border-radius:var(--cut-sm) 0 var(--cut-sm) 0; background:var(--bg-3);
  color:var(--indigo); display:flex; align-items:center; justify-content:center; margin-bottom:.9rem; }
.boost-card .bc-ic svg{ width:22px; height:22px; }
.boost-card h4{ font-size:1rem; margin-bottom:.3rem; }
.boost-card p{ font-size:.84rem; color:var(--mut); margin:0 0 .9rem; }
.boost-card .bc-px{ font-family:var(--ff-head); font-weight:900; font-size:1.3rem; color:var(--indigo); }
.boost-card .bc-px small{ font-family:var(--ff-body); font-weight:600; font-size:.72rem; color:var(--mut); }

/* encart Pro (tableau de bord) */
.pro-banner{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem;
  background:linear-gradient(120deg, var(--brand), var(--brand-2)); color:#fff;
  border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad); padding:1.1rem 1.4rem; }
.pro-banner.ok{ background:linear-gradient(120deg, #0a7a48, var(--ok)); }
.pro-banner .pb-ic{ width:44px; height:44px; flex:none; border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  background:rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center; }
.pro-banner .pb-ic svg{ width:22px; height:22px; }
.pro-banner .pb-tx{ flex:1; min-width:200px; }
.pro-banner .pb-tx b{ font-family:var(--ff-head); font-size:1.05rem; display:block; }
.pro-banner .pb-tx span{ font-size:.85rem; color:rgba(255,255,255,.85); }
.pro-banner .btn-light, .pro-banner .btn-ghost{ flex:none; }
.pro-banner .btn-ghost{ border-color:rgba(255,255,255,.5); color:#fff; }
.pro-banner .btn-ghost:hover{ background:rgba(255,255,255,.15); color:#fff; border-color:#fff; }

/* ============================================================
   v17 : photos réelles, accessibilité, espace boutique, admin
   ============================================================ */
/* photos uploadées (remplacent le visuel généré) */
.cover-img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-card .avatar img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* lien d'évitement (accessibilité clavier) */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--brand); color:#fff; padding:.7em 1.2em; border-radius:0 0 var(--rad) 0;
  font-family:var(--ff-head); font-weight:700; }
.skip-link:focus{ left:0; color:#fff; }

/* uploader : aperçu photo réel */
.uploader .slot img.up-prev{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- Espace boutique (formulaire dans le compte) ---------- */
.shop-logo-row{ display:flex; align-items:center; gap:1.1rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.shop-logo{ width:84px; height:84px; flex:none; border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  border:2px dashed var(--line); background:var(--bg-2); display:flex; align-items:center; justify-content:center;
  color:var(--mut); overflow:hidden; }
.shop-logo img{ width:100%; height:100%; object-fit:cover; }
.shop-logo svg{ width:26px; height:26px; }

/* ---------- Console admin ---------- */
.admin-layout{ display:grid; grid-template-columns:230px 1fr; gap:2rem; align-items:start; }
.admin-nav{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad); overflow:hidden; position:sticky; top:88px; }
.admin-nav .who{ padding:1.2rem; background:var(--ink); color:#fff; }
.admin-nav .who b{ font-family:var(--ff-head); display:block; }
.admin-nav .who span{ font-size:.74rem; color:#aeb3c0; }
.admin-nav a{ display:flex; align-items:center; gap:.6em; padding:.8em 1.2rem; color:var(--ink-2);
  font-size:.9rem; font-weight:600; border-left:3px solid transparent; cursor:pointer; }
.admin-nav a svg{ width:17px; height:17px; color:var(--mut); }
.admin-nav a:hover{ background:var(--bg-2); color:var(--indigo); }
.admin-nav a.active{ border-left-color:var(--cyan); background:var(--bg-2); color:var(--indigo); }
.admin-nav a.active svg{ color:var(--indigo); }
.admin-nav a .pip{ margin-left:auto; background:var(--gn-red); color:#fff; font-size:.65rem; font-weight:800;
  min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.admin-sec{ display:none; } .admin-sec.cur{ display:block; }
.adm-row{ display:flex; align-items:center; gap:.8rem; }
.adm-mini{ width:52px; height:40px; border-radius:6px; overflow:hidden; flex:none; }
.adm-mini img, .adm-mini svg{ width:100%; height:100%; object-fit:cover; }
.report-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--rad);
  padding:1rem 1.2rem; margin-bottom:.8rem; }
.report-card.done{ opacity:.6; }
.report-card .rc-top{ display:flex; align-items:center; gap:.6rem; margin-bottom:.3rem; }
.report-card .rc-top b{ font-family:var(--ff-head); color:var(--ink); }
.report-card .rc-meta{ font-size:.78rem; color:var(--mut); }
@media (max-width:1080px){ .admin-layout{ grid-template-columns:1fr; } .admin-nav{ position:static; } }

/* ============================================================
   BOUTIQUE « au max » — vitrine, confiance, fil d'actu, avis
   ============================================================ */

/* — Bannière vitrine — */
.shop-hero{ position:relative; }
.vitrine{ display:flex; align-items:flex-start; gap:1.6rem; flex-wrap:wrap; margin-top:.6rem; }
.vitrine .bav{
  width:104px; height:104px; flex:0 0 104px;
  border-radius:var(--cut-sm) 0 var(--cut-sm) 0; border:4px solid rgba(255,255,255,.9);
  background:var(--cyan); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-head); font-weight:900; font-size:2.2rem; box-shadow:var(--shadow-1); overflow:hidden;
}
.vitrine .bav img{ width:100%; height:100%; object-fit:cover; }
.vit-main{ flex:1; min-width:260px; }
.shop-hero .vitrine h1{ color:#fff; margin:0; display:inline-flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.hbadges{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0 .2rem; }
.hbadge{ display:inline-flex; align-items:center; gap:.32em; font-size:.74rem; font-weight:700;
  background:rgba(255,255,255,.16); color:#fff; padding:.28em .7em; border-radius:var(--pill); backdrop-filter:blur(4px); }
.hbadge svg{ width:13px; height:13px; }
.hbadge-warn{ background:var(--warn); color:var(--on-accent); }
.vit-tag{ color:#e9ebff; font-style:italic; margin:.5rem 0 .2rem; font-size:1.02rem; }
.shop-hero .sub{ color:#c3c8f5; margin:.4rem 0 0; font-size:.92rem; }
.shop-hero .sub svg{ width:1em; height:1em; vertical-align:-2px; }
.vit-stats{ display:flex; gap:1.8rem; margin-top:1rem; }
.vit-stats b{ display:block; font-family:var(--ff-head); font-size:1.2rem; color:#fff; line-height:1; }
.vit-stats span{ font-size:.74rem; color:#c3c8f5; }
.vit-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.2rem; }
.trust-gauge{ display:flex; align-items:center; gap:.7rem; margin-top:1.1rem; max-width:420px; }
.trust-gauge .tg-bar{ flex:1; height:8px; border-radius:6px; background:rgba(255,255,255,.22); overflow:hidden; }
.trust-gauge .tg-bar i{ display:block; height:100%; border-radius:6px; transition:width .5s; }
.tg-high i{ background:linear-gradient(90deg,#7ee0a8,#0aa574); }
.tg-mid  i{ background:linear-gradient(90deg,var(--cyan),var(--blue)); }
.tg-low  i{ background:linear-gradient(90deg,#ffd36e,var(--warn)); }
.tg-label{ font-size:.78rem; font-weight:700; color:#fff; display:inline-flex; align-items:center; gap:.32em; white-space:nowrap; }
.tg-label svg{ width:14px; height:14px; }

/* — Bandeaux propriétaire / congé — */
.owner-bar, .conge-banner{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  border-radius:var(--rad); padding:.85rem 1.1rem; margin:1.6rem 0 -.6rem; font-size:.9rem; }
.owner-bar{ background:#eef0ff; border:1px solid #d9ddfb; color:var(--indigo); }
.owner-bar .btn{ margin-left:auto; }
.owner-bar svg, .conge-banner svg{ width:20px; height:20px; flex:none; }
.conge-banner{ background:#fff6e5; border:1px solid #ffe2ad; color:#92590a; }

/* — Politique & garanties — */
.policy-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--rad) var(--cut-sm) var(--rad) var(--rad); padding:1.5rem 1.6rem; }
.policy-card h2{ font-size:1.15rem; margin-bottom:1.1rem; display:flex; align-items:center; gap:.5rem; }
.policy-card h2 svg{ width:20px; height:20px; color:var(--indigo); }
.policy-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.policy-item{ display:flex; align-items:flex-start; gap:.7rem; }
.policy-item .pi-ic{ flex:none; width:38px; height:38px; border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  background:#eef0ff; color:var(--indigo); display:flex; align-items:center; justify-content:center; }
.policy-item .pi-ic svg{ width:19px; height:19px; }
.policy-item b{ display:block; font-size:.9rem; color:var(--ink); }
.policy-item span{ font-size:.82rem; color:var(--mut); }
.policy-pay, .policy-zones{ margin-top:1.2rem; padding-top:1.1rem; border-top:1px dashed var(--line); }
.policy-pay b, .policy-zones b{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); margin-bottom:.55rem; }
.pay-chips{ display:flex; gap:.5rem; flex-wrap:wrap; }
.pay-chip{ display:inline-flex; align-items:center; gap:.35em; font-size:.8rem; font-weight:600;
  border:1.5px solid var(--line); border-radius:var(--pill); padding:.32em .8em; color:var(--ink-2); }
.pay-chip svg{ width:14px; height:14px; }
.pay-orange{ border-color:#ffd2a8; color:#d2691e; }
.pay-mtn{ border-color:#ffe89a; color:#b58900; }
.chip-static{ display:inline-flex; align-items:center; gap:.32em; font-size:.8rem; font-weight:600;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--pill); padding:.3em .75em; color:var(--ink-2); }
.chip-static svg{ width:13px; height:13px; color:var(--mut); }
.vit-slogan{ margin:1.1rem 0 0; font-family:var(--ff-head); font-style:italic; color:var(--indigo); font-size:1.05rem; }

/* — Fil d'actu — */
.post-box{ display:flex; gap:.6rem; align-items:flex-end; margin-bottom:1.4rem; flex-wrap:wrap; }
.post-box textarea{ flex:1; min-width:240px; resize:vertical; }
.feed-list{ display:grid; gap:1rem; }
.feed-post{ background:var(--surface); border:1px solid var(--line); border-radius:var(--rad); padding:1.1rem 1.3rem; }
.fp-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.55rem; }
.fp-head .fp-av{ width:34px; height:34px; border-radius:50%; background:#eef0ff; color:var(--indigo);
  display:flex; align-items:center; justify-content:center; flex:none; }
.fp-head .fp-av svg{ width:18px; height:18px; }
.fp-head b{ display:block; font-size:.9rem; color:var(--ink); }
.fp-head .when{ font-size:.74rem; color:var(--mut); }
.fp-del{ margin-left:auto; background:none; border:none; color:var(--mut-2); cursor:pointer; padding:.3rem; border-radius:6px; }
.fp-del:hover{ color:var(--bad); background:#fdeaea; }
.fp-del svg{ width:16px; height:16px; }
.feed-post p{ margin:0; color:var(--ink-2); font-size:.93rem; line-height:1.6; white-space:pre-line; }
.fp-img{ margin-top:.7rem; max-width:100%; border-radius:var(--rad); }

/* — Avis : badge vérifié + réponse vendeur — */
.review-head .rv-id{ display:flex; flex-direction:column; gap:.1rem; }
.vbadge{ display:inline-flex; align-items:center; gap:.3em; font-size:.68rem; font-weight:800;
  color:var(--ok); }
.vbadge svg{ width:12px; height:12px; }
.review-reply{ margin:.7rem 0 0; padding:.7rem .9rem; background:var(--bg-2); border-left:3px solid var(--indigo); border-radius:0 var(--rad) var(--rad) 0; }
.review-reply b{ display:flex; align-items:center; gap:.35em; font-size:.78rem; color:var(--indigo); margin-bottom:.25rem; }
.review-reply b svg{ width:14px; height:14px; }
.review-reply p{ margin:0; font-size:.86rem; color:var(--ink-2); }
.reply-form{ display:flex; gap:.5rem; margin-top:.7rem; flex-wrap:wrap; }
.reply-form input{ flex:1; min-width:200px; }

/* — Carte annonce : prix promo — */
.badge-promo{ background:var(--gn-red); color:#fff; }
.price-was{ color:var(--mut-2); text-decoration:line-through; font-weight:500; font-size:.82em; margin-left:.3em; }

/* — Carte boutique : couverture image, abonnés, congé — */
.shop-card .cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.shop-card.is-conge{ opacity:.92; }
.shop-card .vchk{ color:var(--blue); }
.shop-card .vchk svg{ width:15px; height:15px; vertical-align:-2px; }
.shop-card .nums{ gap:1.1rem; }
.badge-conge{ background:#fff6e5; color:#92590a; }

/* — Annuaire boutiques : recherche + tri — */
.shop-tools{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-bottom:1.4rem; }
.shop-search{ flex:1; min-width:200px; display:flex; align-items:center; gap:.5rem;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--pill); padding:.15rem .15rem .15rem 1rem; }
.shop-search svg{ width:17px; height:17px; color:var(--mut); flex:none; }
.shop-search input{ flex:1; border:none; outline:none; background:none; padding:.55em 0; font:inherit; color:var(--ink); }
.shop-tools select{ border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:var(--pill); padding:.6em 1em; font:inherit; font-size:.88rem; cursor:pointer; flex:none; }

/* — Coach de complétude (compte) — */
.coach{ background:var(--surface); border:1px solid var(--line); border-radius:var(--rad); padding:1.2rem 1.3rem; margin-bottom:1.4rem; }
.coach-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
.coach-head b{ font-family:var(--ff-head); }
.coach-head .pct{ font-family:var(--ff-head); font-weight:900; font-size:1.3rem; color:var(--indigo); }
.coach-bar{ height:8px; border-radius:6px; background:var(--bg-3); overflow:hidden; margin-bottom:.9rem; }
.coach-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--indigo)); transition:width .5s; }
.coach-list{ display:grid; gap:.4rem; }
.coach-item{ display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--mut); }
.coach-item.ok{ color:var(--ink-2); }
.coach-item svg{ width:16px; height:16px; flex:none; }
.coach-item.ok svg{ color:var(--ok); }
.coach-item.todo svg{ color:var(--mut-2); }

/* — formulaire vitrine : cases paiement, aperçu bannière — */
.chk-row{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chk-pill{ display:inline-flex; align-items:center; gap:.4em; font-size:.85rem; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--pill); padding:.4em .9em; background:var(--surface); color:var(--ink-2); }
.chk-pill input{ accent-color:var(--indigo); }
.cover-prev{ height:120px; border-radius:var(--rad); border:1px dashed var(--line); overflow:hidden;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem;
  background:linear-gradient(120deg,var(--bg-2),var(--bg-3)); }
.cover-prev img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:640px){
  .vitrine .bav{ width:80px; height:80px; flex-basis:80px; font-size:1.7rem; }
  .vit-stats{ gap:1.2rem; }
}

/* ---------- Caractéristiques par catégorie (dépôt + filtres) ---------- */
.dyn-h{ display:flex; align-items:center; gap:.4em; font-size:.95rem; color:var(--indigo);
  margin:1.4rem 0 .9rem; padding-top:1.1rem; border-top:1px dashed var(--line); }
.dyn-h svg{ width:17px; height:17px; }
.spec-f{ margin-bottom:.7rem; }
.spec-f > label{ display:block; font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:.3rem; }
.spec-f .price-range{ display:flex; align-items:center; gap:.4rem; }
.spec-f .price-range input{ width:100%; }
#f-specs .check{ display:flex; align-items:center; gap:.5em; font-size:.85rem; margin-bottom:.45rem; cursor:pointer; }

/* ============================================================
   EMPLOI — vertical type Indeed (gombo.zone)
   ============================================================ */

/* ---------- Hero + double recherche (Quoi / Où) ---------- */
.job-hero{ background:linear-gradient(120deg,var(--brand),var(--brand-2)); color:#fff; padding:2.6rem 0 2.2rem; }
.job-hero .breadcrumb a, .job-hero .breadcrumb span{ color:rgba(255,255,255,.85); }
.job-hero h1{ color:#fff; font-size:2rem; margin:.4rem 0 .2rem; }
.job-hero .sub{ color:rgba(255,255,255,.85); margin:0 0 1.3rem; max-width:620px; }
.jobsearch{ display:flex; gap:.5rem; background:#fff; border-radius:14px; padding:.5rem; box-shadow:0 14px 40px rgba(0,0,0,.18); flex-wrap:wrap; }
.jobsearch .js-field{ flex:1 1 200px; display:flex; align-items:center; gap:.5rem; padding:.2rem .7rem; min-width:0; }
.jobsearch .js-field + .js-field{ border-left:1px solid var(--line); }
.jobsearch .js-field svg{ width:19px; height:19px; color:var(--mut); flex:none; }
.jobsearch input, .jobsearch select{ border:0; outline:0; width:100%; font-size:.95rem; background:none; color:var(--ink); font-family:inherit; padding:.6rem 0; }
.jobsearch .btn{ flex:none; }
.job-hero-stats{ display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:1.2rem; }
.job-hero-stats div{ color:#fff; } .job-hero-stats b{ font-size:1.35rem; display:block; font-family:var(--ff-head); }
.job-hero-stats span{ font-size:.78rem; color:rgba(255,255,255,.8); }
@media (max-width:640px){ .jobsearch .js-field + .js-field{ border-left:0; border-top:1px solid var(--line); } .jobsearch .btn{ width:100%; } .job-hero h1{ font-size:1.55rem; } }

/* ---------- Bandeau anti-arnaque ---------- */
.safety-banner{ display:flex; gap:.7rem; align-items:flex-start; background:var(--bg-3,rgba(0,0,0,.04)); border:1px solid var(--line);
  border-left:4px solid var(--okra,#2ba84a); border-radius:0 10px 10px 0; padding:.85rem 1rem; margin:1.4rem 0; font-size:.86rem; color:var(--ink-2); }
.safety-banner svg{ width:20px; height:20px; color:var(--okra,#2ba84a); flex:none; margin-top:1px; }
.safety-banner b{ color:var(--ink); }

/* ---------- Carte offre ---------- */
.jobs-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
.job-card{ position:relative; background:var(--surface,#fff); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.1rem 1rem;
  display:flex; flex-direction:column; gap:.6rem; transition:border-color .2s, box-shadow .2s, transform .2s; }
.job-card:hover{ border-color:var(--indigo); box-shadow:0 10px 30px rgba(0,0,0,.08); transform:translateY(-2px); }
.job-card.is-feat{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset; }
.job-save{ position:absolute; top:.7rem; right:.7rem; width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  background:var(--bg,#fff); color:var(--mut); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; }
.job-save svg{ width:18px; height:18px; }
.job-save:hover{ color:var(--indigo); border-color:var(--indigo); }
.job-save.on{ background:var(--indigo); color:#fff; border-color:var(--indigo); }
.job-top{ display:flex; gap:.7rem; align-items:flex-start; padding-right:2.2rem; }
.job-logo{ width:44px; height:44px; border-radius:11px; flex:none; color:#fff; font-weight:800; font-family:var(--ff-head);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
.job-id{ min-width:0; }
.job-card h3{ font-size:1.02rem; line-height:1.25; margin:0 0 .15rem; }
.job-card h3 a{ color:var(--ink); }
.job-card h3 a:hover{ color:var(--indigo); }
.job-co{ font-size:.84rem; color:var(--mut); display:flex; align-items:center; gap:.3em; }
.job-co .vchk{ color:var(--okra,#2ba84a); display:inline-flex; }
.job-co .vchk svg{ width:14px; height:14px; }
.job-badges{ display:flex; gap:.35rem; flex-wrap:wrap; }
.job-meta{ display:flex; gap:.5rem .9rem; flex-wrap:wrap; font-size:.8rem; color:var(--mut); align-items:center; }
.job-meta svg{ width:14px; height:14px; vertical-align:-2px; margin-right:.25em; }
.job-contract{ font-weight:700; font-size:.72rem; padding:.12rem .5rem; border-radius:6px; border:1px solid currentColor; color:var(--indigo); }
.job-c-cdi{ color:#1e9e5a; } .job-c-cdd{ color:#2b73d6; } .job-c-stage{ color:#c47f15; }
.job-c-interim,.job-c-prestation,.job-c-freelance{ color:#8d3fc8; } .job-c-journalier,.job-c-tempspartiel{ color:#b8590f; }
.job-c-concourspublic{ color:#0a7ea4; } .job-c-benevolatong{ color:#0a7a48; }
.job-salary{ font-weight:700; color:var(--ink); font-size:.92rem; display:flex; align-items:center; gap:.4em; }
.job-salary svg{ width:16px; height:16px; color:var(--okra,#2ba84a); }
.job-salary small{ font-weight:500; color:var(--mut); }
.job-resume{ font-size:.85rem; color:var(--ink-2); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.job-tags{ display:flex; gap:.35rem; flex-wrap:wrap; }
.job-tag{ font-size:.72rem; background:var(--bg-3,rgba(0,0,0,.05)); color:var(--ink-2); padding:.18rem .55rem; border-radius:20px; }
.job-foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.2rem; padding-top:.6rem; border-top:1px dashed var(--line); }
.job-time{ font-size:.76rem; color:var(--mut); } .job-time svg{ width:13px; height:13px; vertical-align:-2px; margin-right:.2em; }
.job-match{ font-size:.72rem; font-weight:700; color:var(--mut); display:inline-flex; align-items:center; gap:.25em; }
.job-match svg{ width:13px; height:13px; }
.job-match.mid{ color:#c47f15; } .job-match.hi{ color:var(--okra,#2ba84a); }
.job-list .job-card{ flex-direction:column; }

/* ---------- Secteurs (tuiles) + strips ---------- */
.sector-grid{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.sector-tile{ display:flex; align-items:center; gap:.6rem; padding:.8rem .9rem; border:1px solid var(--line); border-radius:12px;
  background:var(--surface,#fff); color:var(--ink); cursor:pointer; transition:.2s; text-align:left; }
.sector-tile:hover{ border-color:var(--indigo); transform:translateY(-2px); }
.sector-tile .ic{ width:38px; height:38px; border-radius:10px; background:rgba(26,112,53,.08); color:var(--indigo);
  display:flex; align-items:center; justify-content:center; flex:none; }
.sector-tile .ic svg{ width:20px; height:20px; }
.sector-tile b{ font-size:.88rem; display:block; line-height:1.15; } .sector-tile span{ font-size:.74rem; color:var(--mut); }
.hscroll{ display:flex; gap:1rem; overflow-x:auto; padding:.3rem .2rem 1rem; scroll-snap-type:x mandatory; }
.hscroll > *{ flex:0 0 300px; scroll-snap-align:start; }

/* ---------- Fiche offre (détail) ---------- */
.jobd-grid{ display:grid; grid-template-columns:1fr 340px; gap:1.6rem; align-items:start; }
.jobd-head{ background:var(--surface,#fff); border:1px solid var(--line); border-radius:16px; padding:1.4rem; margin-bottom:1.2rem; }
.jobd-head .top{ display:flex; gap:1rem; align-items:flex-start; }
.jobd-head .logo{ width:60px; height:60px; border-radius:14px; flex:none; color:#fff; font-weight:800; font-family:var(--ff-head);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.jobd-head h1{ font-size:1.5rem; margin:0 0 .2rem; }
.jobd-co{ font-size:.95rem; color:var(--ink-2); }
.jobd-co a{ color:var(--indigo); font-weight:600; }
.jobd-meta{ display:flex; gap:.5rem .9rem; flex-wrap:wrap; margin-top:.9rem; font-size:.85rem; color:var(--mut); }
.jobd-meta svg{ width:15px; height:15px; vertical-align:-3px; margin-right:.25em; color:var(--indigo); }
.jobd-tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.9rem; }
.jobd-section{ background:var(--surface,#fff); border:1px solid var(--line); border-radius:16px; padding:1.3rem 1.4rem; margin-bottom:1.1rem; }
.jobd-section h2{ font-size:1.1rem; margin:0 0 .8rem; display:flex; align-items:center; gap:.45em; }
.jobd-section h2 svg{ width:19px; height:19px; color:var(--indigo); }
.jobd-list{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.jobd-list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--ink-2); }
.jobd-list li svg{ width:17px; height:17px; color:var(--okra,#2ba84a); flex:none; margin-top:2px; }
.jobd-desc{ font-size:.94rem; color:var(--ink-2); line-height:1.7; }
.jobd-spec{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; }
.jobd-spec .k{ font-size:.74rem; color:var(--mut); text-transform:uppercase; letter-spacing:.04em; }
.jobd-spec .v{ font-size:.9rem; color:var(--ink); font-weight:600; }
/* boîte de candidature collante */
.apply-box{ background:var(--surface,#fff); border:1px solid var(--line); border-radius:16px; padding:1.2rem; position:sticky; top:90px; }
.apply-box .salary{ font-size:1.15rem; font-weight:800; color:var(--ink); font-family:var(--ff-head); }
.apply-box .salary small{ font-size:.78rem; font-weight:500; color:var(--mut); display:block; }
.apply-box .recruiter{ display:flex; gap:.6rem; align-items:center; margin:1rem 0; padding:.8rem; border:1px solid var(--line); border-radius:12px; }
.apply-box .recruiter .logo{ width:40px; height:40px; border-radius:10px; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.apply-box .recruiter b{ font-size:.9rem; } .apply-box .recruiter span{ font-size:.76rem; color:var(--mut); }
.apply-actions{ display:grid; gap:.55rem; }
.job-safety{ font-size:.78rem; color:var(--mut); margin-top:1rem; display:flex; gap:.5rem; align-items:flex-start; }
.job-safety svg{ width:16px; height:16px; color:var(--okra,#2ba84a); flex:none; margin-top:1px; }
@media (max-width:900px){ .jobd-grid{ grid-template-columns:1fr; } .apply-box{ position:static; } }

/* ---------- Espace recruteur / mini-ATS ---------- */
.job-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.8rem; margin-bottom:1.4rem; }
.job-kpi{ background:var(--bg-3,rgba(0,0,0,.04)); border-radius:12px; padding:1rem; }
.job-kpi b{ font-size:1.6rem; font-family:var(--ff-head); color:var(--ink); display:block; }
.job-kpi span{ font-size:.78rem; color:var(--mut); }
.ats-board{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:.8rem; overflow-x:auto; padding-bottom:.8rem; }
.ats-col{ background:var(--bg-3,rgba(0,0,0,.04)); border-radius:12px; padding:.7rem; min-width:230px; }
.ats-col-head{ display:flex; align-items:center; justify-content:space-between; font-size:.82rem; font-weight:700; color:var(--ink-2); margin-bottom:.6rem; padding:0 .2rem; }
.ats-col-head .n{ background:var(--indigo); color:#fff; border-radius:20px; font-size:.7rem; padding:.05rem .5rem; }
.applicant-card{ background:var(--surface,#fff); border:1px solid var(--line); border-radius:10px; padding:.7rem; margin-bottom:.55rem; }
.applicant-card .ac-top{ display:flex; gap:.5rem; align-items:center; }
.applicant-card .av{ width:34px; height:34px; border-radius:50%; background:var(--indigo); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; flex:none; }
.applicant-card b{ font-size:.86rem; display:block; line-height:1.1; } .applicant-card .role{ font-size:.74rem; color:var(--mut); }
.applicant-card .ac-actions{ display:flex; gap:.35rem; margin-top:.55rem; flex-wrap:wrap; }
.applicant-card select.input{ font-size:.78rem; padding:.3rem .4rem; }
.job-rows{ display:grid; gap:.7rem; }
.job-row{ display:flex; gap:.8rem; align-items:center; background:var(--surface,#fff); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; flex-wrap:wrap; }
.job-row .jr-main{ flex:1; min-width:160px; } .job-row .jr-main b{ font-size:.95rem; }
.job-row .jr-stat{ text-align:center; } .job-row .jr-stat b{ display:block; font-size:1.05rem; } .job-row .jr-stat span{ font-size:.7rem; color:var(--mut); }
.job-row .jr-status{ font-size:.74rem; font-weight:700; padding:.15rem .55rem; border-radius:20px; }
.jr-open{ background:rgba(43,168,74,.14); color:#1e7a3a; } .jr-closed{ background:rgba(0,0,0,.08); color:var(--mut); }

/* ---------- Explorateur de salaires ---------- */
.salary-explorer{ background:var(--surface,#fff); border:1px solid var(--line); border-radius:16px; padding:1.4rem; }
.salary-row{ display:grid; grid-template-columns:180px 1fr auto; gap:.9rem; align-items:center; padding:.6rem 0; border-bottom:1px dashed var(--line); }
.salary-row:last-child{ border-bottom:0; }
.salary-row .name{ font-size:.88rem; font-weight:600; color:var(--ink); }
.salary-bar{ height:10px; border-radius:6px; background:linear-gradient(90deg,var(--cyan),var(--indigo)); }
.salary-row .val{ font-size:.84rem; color:var(--ink-2); font-weight:700; white-space:nowrap; }
.salary-card{ background:var(--bg-3,rgba(0,0,0,.04)); border-radius:12px; padding:1rem 1.2rem; display:flex; gap:2rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.salary-card div b{ font-size:1.5rem; font-family:var(--ff-head); display:block; color:var(--ink); } .salary-card div span{ font-size:.76rem; color:var(--mut); }
@media (max-width:560px){ .salary-row{ grid-template-columns:1fr auto; } .salary-row .salary-bar{ display:none; } }

/* ---------- Statut candidature (côté candidat) ---------- */
.appstatus{ font-size:.74rem; font-weight:700; padding:.15rem .6rem; border-radius:20px; background:var(--bg-3,rgba(0,0,0,.06)); color:var(--ink-2); display:inline-flex; align-items:center; gap:.3em; }
.appstatus svg{ width:13px; height:13px; }
.appstatus.s-entretien,.appstatus.s-offre{ background:rgba(43,168,74,.14); color:#1e7a3a; }
.appstatus.s-refusee{ background:rgba(226,75,74,.13); color:#a32d2d; }
.appstatus.s-recrutee{ background:var(--okra,#2ba84a); color:#fff; }

/* coach / barre de progression réutilisable emploi */
.cv-coach{ background:var(--bg-3,rgba(0,0,0,.04)); border-radius:14px; padding:1.1rem 1.3rem; margin-bottom:1.4rem; }
.cv-bar{ height:8px; border-radius:6px; background:var(--line); overflow:hidden; margin:.5rem 0 .8rem; }
.cv-bar > i{ display:block; height:100%; background:linear-gradient(90deg,var(--okra,#2ba84a),var(--cyan)); }
.cv-todo{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.cv-todo li{ font-size:.84rem; color:var(--ink-2); display:flex; gap:.5rem; align-items:center; }
.cv-todo li svg{ width:15px; height:15px; flex:none; } .cv-todo li.ok{ color:var(--mut); } .cv-todo li.ok svg{ color:var(--okra,#2ba84a); }
.cv-todo li.no svg{ color:var(--mut); }
.chip-pick{ display:inline-flex; align-items:center; gap:.3em; font-size:.8rem; padding:.25rem .7rem; border-radius:20px; border:1px solid var(--line); background:var(--surface,#fff); color:var(--ink-2); cursor:pointer; }
.chip-pick.on{ background:var(--indigo); color:#fff; border-color:var(--indigo); }
.sec-title{ font-family:var(--ff-head); font-weight:800; font-size:1.3rem; color:var(--ink); margin:0 0 1rem; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
@media (max-width:560px){ .grid-2{ grid-template-columns:1fr; } }
.hero-sub{ margin:.5rem 0 0; max-width:640px; }
.vchk{ display:inline-flex; vertical-align:middle; color:var(--okra,#2ba84a); }
.vchk svg{ width:15px; height:15px; }

/* ============================================================
   IMMOBILIER — vertical type Zillow/SeLoger (gombo.zone)
   ============================================================ */
/* bascule d'intention Louer / Acheter / Terrains */
.trans-toggle{ display:inline-flex; background:rgba(255,255,255,.18); border-radius:12px; padding:.25rem; gap:.2rem; margin-bottom:1rem; }
.trans-toggle button{ border:0; background:none; color:#fff; font-weight:700; font-size:.9rem; padding:.5rem 1.1rem; border-radius:9px; cursor:pointer; opacity:.85; }
.trans-toggle button.on{ background:#fff; color:var(--brand); opacity:1; }
.immo-tools{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }

/* grille de biens */
.props-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.prop-card{ position:relative; background:var(--surface,#fff); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:box-shadow .2s, transform .2s; display:flex; flex-direction:column; }
.prop-card:hover{ box-shadow:0 12px 32px rgba(0,0,0,.1); transform:translateY(-2px); }
.prop-card.hl{ outline:2px solid var(--indigo); outline-offset:-2px; }
.pp-ph{ display:block; position:relative; aspect-ratio:4/3; overflow:hidden; }
.pp-ph svg, .pp-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.pp-badges{ position:absolute; top:.6rem; left:.6rem; display:flex; gap:.35rem; flex-wrap:wrap; }
.pp-trans{ font-size:.72rem; font-weight:800; padding:.2rem .6rem; border-radius:7px; color:#fff; text-transform:uppercase; letter-spacing:.03em; }
.pp-trans.louer{ background:var(--indigo); } .pp-trans.vente{ background:var(--okra,#2ba84a); }
.prop-card .fav{ position:absolute; top:.55rem; right:.55rem; z-index:2; }
.pp-bd{ padding:.85rem 1rem 1rem; display:flex; flex-direction:column; gap:.35rem; }
.pp-price{ font-family:var(--ff-head); font-weight:800; font-size:1.2rem; color:var(--ink); }
.pp-price .price-was{ font-size:.8rem; font-weight:500; color:var(--mut); text-decoration:line-through; margin-left:.3rem; }
.pp-facts{ display:flex; gap:.5rem .9rem; flex-wrap:wrap; font-size:.82rem; color:var(--ink-2); }
.pp-facts span{ display:inline-flex; align-items:center; gap:.25em; } .pp-facts svg{ width:14px; height:14px; color:var(--mut); }
.prop-card h3{ font-size:.98rem; line-height:1.25; margin:.1rem 0 0; }
.prop-card h3 a{ color:var(--ink); } .prop-card h3 a:hover{ color:var(--indigo); }
.pp-loc{ font-size:.82rem; color:var(--mut); display:flex; align-items:center; gap:.3em; } .pp-loc svg{ width:14px; height:14px; flex:none; }
.pp-ag{ font-size:.78rem; color:var(--ink-2); display:flex; align-items:center; gap:.3em; margin-top:.1rem; } .pp-ag svg{ width:14px; height:14px; color:var(--okra,#2ba84a); } .pp-ag.mut{ color:var(--mut); }

/* split carte + liste */
.immo-split{ display:grid; grid-template-columns:1fr 420px; gap:1.4rem; align-items:start; }
.immo-split.no-map{ grid-template-columns:1fr; }
.immo-map{ position:sticky; top:84px; height:calc(100vh - 110px); min-height:420px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--bg-3,#e9eef5); }
.immo-map .map-fallback{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--mut); font-size:.9rem; text-align:center; padding:2rem; }
.leaflet-popup-content{ margin:.6rem .8rem; font-family:var(--ff-body); }
.map-price{ background:var(--brand); color:#fff; font-weight:800; font-size:.74rem; padding:.2rem .5rem; border-radius:20px; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.3); border:2px solid #fff; }
.map-price.vente{ background:var(--okra,#2ba84a); }
@media (max-width:980px){ .immo-split{ grid-template-columns:1fr; } .immo-map{ position:static; height:340px; order:-1; } }

/* faits clés (fiche bien) */
.kfacts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.7rem; margin:1rem 0; }
.kfact{ background:var(--bg-3,rgba(0,0,0,.04)); border-radius:12px; padding:.8rem; text-align:center; }
.kfact b{ display:block; font-size:1.2rem; font-family:var(--ff-head); color:var(--ink); } .kfact span{ font-size:.74rem; color:var(--mut); }
.kfact svg{ width:18px; height:18px; color:var(--indigo); margin-bottom:.2rem; }
.ppm2{ font-size:.85rem; color:var(--mut); font-weight:600; }

/* simulateur de financement */
.fin-sim{ background:var(--bg-3,rgba(0,0,0,.04)); border-radius:12px; padding:1.1rem 1.2rem; }
.fin-grid{ display:grid; gap:.7rem; }
.fin-grid label{ font-size:.82rem; font-weight:600; color:var(--ink-2); display:block; margin-bottom:.25rem; }
.fin-out{ background:var(--surface,#fff); border:1px solid var(--line); border-radius:12px; padding:1rem; margin-top:.9rem; text-align:center; }
.fin-out .fin-big{ font-size:1.6rem; font-family:var(--ff-head); font-weight:800; color:var(--indigo); display:block; }
.fin-out .fin-sub{ font-size:.78rem; color:var(--mut); }
.fin-break{ display:grid; gap:.4rem; margin-top:.8rem; font-size:.85rem; }
.fin-break div{ display:flex; justify-content:space-between; color:var(--ink-2); }
.fin-break div b{ color:var(--ink); }
.fin-break div.tot{ border-top:1px dashed var(--line); padding-top:.5rem; font-size:1rem; }

/* estimateur */
.estim-result{ background:linear-gradient(120deg,var(--brand),var(--brand-2)); color:#fff; border-radius:16px; padding:1.6rem; text-align:center; margin-top:1.2rem; }
.estim-result .big{ font-size:2rem; font-family:var(--ff-head); font-weight:900; display:block; }
.estim-result .range{ font-size:.95rem; color:rgba(255,255,255,.85); margin-top:.3rem; }
.estim-result .note{ font-size:.78rem; color:rgba(255,255,255,.7); margin-top:.6rem; }

/* tuiles quartiers */
.quartier-grid{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.quartier-tile{ background:var(--surface,#fff); border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; cursor:pointer; transition:.2s; }
.quartier-tile:hover{ border-color:var(--indigo); transform:translateY(-2px); }
.quartier-tile b{ display:block; font-size:.92rem; color:var(--ink); } .quartier-tile span{ font-size:.76rem; color:var(--mut); }

/* ============================================================
   LOGO gombo.zone — image officielle (fichiers fournis)
   En-tête : bascule clair/sombre selon le thème (.brand-l / .brand-d).
   Footer / drawer / panneau auth : version blanche (.brand-logo) sur fond sombre.
   ============================================================ */
.logo-name{ display:flex; flex-direction:column; gap:.2rem; color:inherit; }
.brand{ display:inline-flex; align-items:center; }
.brand img, .brand-logo{ height:40px; width:auto; display:block; }
.brand .brand-d{ display:none; }
html[data-theme="dark"] .brand .brand-l{ display:none; }
html[data-theme="dark"] .brand .brand-d{ display:block; }
.site-foot .brand-logo{ height:48px; }
.drawer .panel-head .brand-logo{ height:40px; }
@media (max-width:520px){ .brand img, .brand-logo{ height:34px; } }

/* ---------- Accessibilité : anneau de focus clavier (navigation au clavier) ---------- */
/* N'apparaît qu'au focus clavier (:focus-visible), jamais au clic souris. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid #1a7a33; outline-offset:2px; border-radius:4px;
}
.cat-tile:focus-visible, .card-ad:focus-visible, .region-card:focus-visible,
.shop-card:focus-visible, .job-card:focus-visible, .prop-card:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(47,158,68,.55);
}
html[data-theme="dark"] a:focus-visible, html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] input:focus-visible, html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible, html[data-theme="dark"] [tabindex]:focus-visible{
  outline-color:#7fe0a0;
}