/* ═══════════════════════════════════════════════════════
   JUMARO BASE CSS — socle commun toutes les pages
   PasAdi · Infomaniak 🇨🇭 · session 14
═══════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────── */
:root {
  --brand:  #0f5132;
  --b2:     #2eb087;
  --bbg:    #f0fdf4;
  --b100:   #dcfce7;
  --amber:  #f59e0b;
  --abg:    #fef3c7;
  --ink:    #0b1220;
  --muted:  #374151;
  --soft:   #6b7280;
  --line:   #e5e7eb;
  --bg:     #f4f6f8;
  --sur:    #ffffff;
  --sh:     0 2px 8px rgba(11,18,32,.07);
  --sh2:    0 6px 24px rgba(11,18,32,.1);

  /* Layout */
  --topbar-h:   52px;
  --col-left-w: 240px;
  --col-right-w:280px;
  --col-gap:    16px;
  --radius:     12px;
  --radius-sm:  8px;
}

/* ── Reset minimal ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  padding-top: var(--topbar-h);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Topbar ─────────────────────────────────────────── */
.j-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--sur);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: 1rem;
  z-index: 1000;
  box-shadow: var(--sh);
}
.j-topbar__logo {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  margin-right: .5rem;
  flex-shrink: 0;
}
.j-topbar__sub {
  font: 400 .6rem/1 'DM Sans', sans-serif;
  color: var(--soft);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.j-topbar__name {
  font: 700 1.15rem/1 'Lora', serif;
  color: var(--brand);
  letter-spacing: -.01em;
}
.j-topbar__name span { color: var(--b2); }
.j-topbar__search {
  flex: 1;
  max-width: 360px;
  position: relative;
}
.j-topbar__search input {
  width: 100%;
  height: 34px;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 0 1rem 0 2.2rem;
  font: 400 .82rem/1 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--bg);
  outline: none;
  transition: border-color .2s;
}
.j-topbar__search input:focus { border-color: var(--b2); background: var(--sur); }
.j-topbar__search svg {
  position: absolute;
  left: .7rem; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  stroke: var(--soft);
  pointer-events: none;
}
.j-topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.j-topbar__notif {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line);
  transition: background .15s;
}
.j-topbar__notif:hover { background: var(--b100); }
.j-topbar__notif svg { width: 16px; height: 16px; stroke: var(--muted); }
.j-topbar__notif__badge {
  position: absolute;
  top: 3px; right: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  border: 1.5px solid var(--sur);
}
.j-topbar__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bbg);
  border: 2px solid var(--b2);
  display: flex; align-items: center; justify-content: center;
  font: 700 .75rem/1 'DM Sans', sans-serif;
  color: var(--brand);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}
.j-topbar__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Layout 3 colonnes ──────────────────────────────── */
.j-layout {
  display: grid;
  grid-template-columns: var(--col-left-w) 1fr var(--col-right-w);
  grid-template-areas: "left center right";
  gap: var(--col-gap);
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--col-gap);
  min-height: calc(100vh - var(--topbar-h));
  align-items: start;
}

/* Layout réglages — col droite plus étroite */
.j-layout--settings {
  grid-template-columns: var(--col-left-w) 1fr 260px;
}

/* ── Colonne gauche ─────────────────────────────────── */
.j-col-left {
  grid-area: left;
  position: sticky;
  top: calc(var(--topbar-h) + var(--col-gap));
  height: calc(100vh - var(--topbar-h) - var(--col-gap) * 2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.j-col-left__profile {
  background: var(--sur);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  flex-shrink: 0;
}
.j-col-left__banner {
  height: 52px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--b2) 100%);
}
.j-col-left__body {
  padding: .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.j-col-left__av-wrap {
  margin-top: -28px;
  margin-bottom: .5rem;
}
.j-col-left__av {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 3px solid var(--sur);
  background: var(--bbg);
  display: flex; align-items: center; justify-content: center;
  font: 700 1rem/1 'DM Sans', sans-serif;
  color: var(--brand);
  overflow: hidden;
}
.j-col-left__av img { width: 100%; height: 100%; object-fit: cover; }
.j-col-left__name {
  font: 600 .85rem/1.2 'DM Sans', sans-serif;
  color: var(--ink);
}
.j-col-left__cap {
  font: 400 .68rem/1.3 'DM Sans', sans-serif;
  color: var(--soft);
  margin: .2rem 0 .6rem;
}
.j-col-left__divider {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin: .5rem 0;
}
.j-col-left__stats {
  display: flex;
  gap: .75rem;
  width: 100%;
  justify-content: center;
}
.j-col-left__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
}
.j-col-left__stat-n {
  font: 700 .9rem/1 'DM Sans', sans-serif;
  color: var(--brand);
}
.j-col-left__stat-l {
  font: 400 .6rem/1 'DM Sans', sans-serif;
  color: var(--soft);
}
.j-col-left__crecos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: .6rem;
  padding: .4rem .6rem;
  background: var(--abg);
  border-radius: var(--radius-sm);
}
.j-col-left__crecos-n {
  font: 700 .8rem/1 'DM Sans', sans-serif;
  color: #92400e;
}
.j-col-left__crecos-l {
  font: 400 .62rem/1 'DM Sans', sans-serif;
  color: #b45309;
}
.j-col-left__crecos-link {
  font: 600 .62rem/1 'DM Sans', sans-serif;
  color: #92400e;
}

/* Moteurs mini-roue */
.j-col-left__wheel {
  width: 100%;
  margin: .75rem 0 .5rem;
  flex-shrink: 0;
}

/* Menu de navigation */
.j-col-left__nav {
  flex: 1;
  overflow-y: auto;
  margin-top: .75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: none;
}
.j-col-left__nav::-webkit-scrollbar { display: none; }
.j-nav-section {
  font: 600 .6rem/1 'DM Sans', sans-serif;
  color: var(--soft);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .5rem .5rem .25rem;
}
.j-nav-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .65rem;
  border-radius: var(--radius-sm);
  font: 500 .8rem/1 'DM Sans', sans-serif;
  color: var(--muted);
  transition: background .15s, color .15s;
  cursor: pointer;
}
.j-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.j-nav-item:hover { background: var(--bbg); color: var(--brand); }
.j-nav-item.active { background: var(--bbg); color: var(--brand); font-weight: 600; }
.j-nav-item.active svg { stroke: var(--brand); }

/* ── Colonne centrale ───────────────────────────────── */
.j-col-center {
  grid-area: center;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--col-gap);
}

/* Carte Leaflet */
.j-map-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--sur);
}
.j-map {
  width: 100%;
  height: 240px;
}
.j-map-zoom {
  position: absolute;
  top: .6rem; right: .6rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 500;
}
.j-map-zoom button {
  width: 28px; height: 28px;
  background: var(--sur);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 600 1rem/1 'DM Sans', sans-serif;
  color: var(--ink);
  box-shadow: var(--sh);
  transition: background .15s;
}
.j-map-zoom button:hover { background: var(--bbg); color: var(--brand); }

/* ── Colonne droite ─────────────────────────────────── */
.j-col-right {
  grid-area: right;
  position: sticky;
  top: calc(var(--topbar-h) + var(--col-gap));
  height: calc(100vh - var(--topbar-h) - var(--col-gap) * 2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  scrollbar-width: none;
}
.j-col-right::-webkit-scrollbar { display: none; }

/* Widgets colonne droite */
.j-widget {
  background: var(--sur);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
}
.j-widget__head {
  padding: .65rem .9rem .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.j-widget__title {
  font: 600 .78rem/1 'DM Sans', sans-serif;
  color: var(--ink);
}
.j-widget__more {
  font: 500 .68rem/1 'DM Sans', sans-serif;
  color: var(--b2);
}
.j-widget__body { padding: .65rem .9rem; }

/* ── Cards génériques ───────────────────────────────── */
.j-card {
  background: var(--sur);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--sh);
}
.j-card__head {
  padding: .9rem 1rem .6rem;
  border-bottom: 1px solid var(--line);
}
.j-card__body { padding: .9rem 1rem; }

/* ── Boutons ────────────────────────────────────────── */
.j-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border-radius: 20px;
  font: 600 .78rem/1 'DM Sans', sans-serif;
  transition: all .15s;
  cursor: pointer;
}
.j-btn--primary {
  background: var(--brand);
  color: #fff;
  border: 1.5px solid var(--brand);
}
.j-btn--primary:hover { background: #0d4429; }
.j-btn--outline {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.j-btn--outline:hover { background: var(--bbg); }
.j-btn--ghost {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
}
.j-btn--ghost:hover { background: var(--line); }

/* ── Badges ─────────────────────────────────────────── */
.j-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 20px;
  font: 600 .65rem/1 'DM Sans', sans-serif;
}
.j-badge--green  { background: var(--bbg);  color: var(--brand); }
.j-badge--amber  { background: var(--abg);  color: #92400e; }
.j-badge--purple { background: #f3e8ff;     color: #6d28d9; }
.j-badge--blue   { background: #eff6ff;     color: #1d4ed8; }
.j-badge--gray   { background: var(--bg);   color: var(--soft); }

/* ── Avatar ─────────────────────────────────────────── */
.j-av {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bbg);
  color: var(--brand);
}
.j-av img { width: 100%; height: 100%; object-fit: cover; }
.j-av--sm { width: 32px; height: 32px; font-size: .72rem; }
.j-av--md { width: 42px; height: 42px; font-size: .85rem; }
.j-av--lg { width: 54px; height: 54px; font-size: 1rem; }

/* ── Séparateur ─────────────────────────────────────── */
.j-divider {
  height: 1px;
  background: var(--line);
  margin: .75rem 0;
}

/* ── Toast ──────────────────────────────────────────── */
.j-toast {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: .55rem 1.25rem;
  border-radius: 24px;
  font: 500 .8rem/1 'DM Sans', sans-serif;
  z-index: 9999;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  white-space: nowrap;
}
.j-toast.show { opacity: 1; }

/* ── Loader ─────────────────────────────────────────── */
.j-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--soft);
  font: 400 .82rem/1 'DM Sans', sans-serif;
  gap: .5rem;
}
.j-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--line);
  border-top-color: var(--b2);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Bandeau cookies ────────────────────────────────── */
.j-cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--ink);
  color: #fff;
  padding: .9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 9000;
  font: 400 .78rem/1.5 'DM Sans', sans-serif;
  border-top: 2px solid var(--b2);
}
.j-cookie-banner a { color: var(--b2); text-decoration: underline; }
.j-cookie-banner__actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .j-layout {
    grid-template-columns: var(--col-left-w) 1fr;
    grid-template-areas: "left center";
  }
  .j-col-right { display: none; }
}
@media (max-width: 720px) {
  .j-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "center";
    padding: .5rem;
  }
  .j-col-left { display: none; }
  .j-topbar__search { display: none; }
}

/* ── Mini agenda ─────────────────────────────────── */
.agenda-event-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .55rem;
  border-radius: 8px;
  background: var(--bg);
  margin-bottom: .3rem;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.agenda-event-row:hover { background: var(--bbg); }
.agenda-event-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.agenda-event-info { flex:1; min-width:0; }
.agenda-event-title {
  font: 600 .75rem/1.2 'DM Sans', sans-serif;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-event-meta { font:400 .62rem/1 'DM Sans',sans-serif; color:var(--soft); margin-top:.15rem; }
.agenda-event-date { font:500 .62rem/1 'DM Sans',sans-serif; color:var(--soft); flex-shrink:0; }

/* ── Topbar mobile — 3 éléments seulement ────────────── */
@media (max-width: 720px) {

  /* Cache tout sauf logo + avatar sur mobile */
  .j-topbar__search,
  .j-topbar__notif,
  .tright > *:not(#j-mobile-menu-btn):not(#j-topbar-av) {
    display: none !important;
  }

  /* Avatar mobile — plus grand, cliquable */
  #j-topbar-av {
    width: 34px !important;
    height: 34px !important;
    cursor: pointer;
    position: relative;
  }

  /* Point rouge sur avatar */
  #j-topbar-av.has-notif::after {
    content: '';
    position: absolute;
    top: -2px; right: -2px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #fff;
  }

  /* Bouton recherche mobile */
  .j-topbar__search-mobile {
    display: flex !important;
    width: 34px; height: 34px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--bbg);
    border: 1px solid var(--line);
    cursor: pointer;
    color: var(--muted);
  }
}

/* Cache le bouton recherche mobile sur desktop */
.j-topbar__search-mobile { display: none; }

/* ── Drawer profil mobile ─────────────────────────────── */
.j-drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 400;
  backdrop-filter: blur(2px);
}
.j-drawer-overlay.open { display: block; }

.j-drawer {
  position: fixed;
  top: 0; right: -320px; bottom: 0;
  width: 300px;
  background: var(--sur);
  z-index: 401;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  box-shadow: -4px 0 32px rgba(11,18,32,.15);
  display: flex;
  flex-direction: column;
}
.j-drawer.open { right: 0; }

.j-drawer-header {
  background: linear-gradient(135deg, var(--brand), var(--b2));
  padding: 1.5rem 1.25rem 1.25rem;
  color: #fff;
}
.j-drawer-av {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font: 700 1.1rem/1 'DM Sans', sans-serif;
  color: #fff;
  margin-bottom: .75rem;
  border: 2px solid rgba(255,255,255,.4);
}
.j-drawer-name {
  font: 700 1rem/1.2 'Lora', serif;
  color: #fff;
  margin-bottom: .2rem;
}
.j-drawer-meta {
  font: 400 .72rem/1 'DM Sans', sans-serif;
  color: rgba(255,255,255,.7);
}
.j-drawer-crecos {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .85rem;
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  padding: .45rem .75rem;
  font: 600 .8rem/1 'DM Sans', sans-serif;
  color: #fff;
}

.j-drawer-section {
  padding: .75rem 1.25rem .25rem;
  font: 700 .58rem/1 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--soft);
}
.j-drawer-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1.25rem;
  font: 500 .88rem/1 'DM Sans', sans-serif;
  color: var(--muted);
  text-decoration: none;
  transition: background .15s;
  position: relative;
  border: none; background: none; width: 100%; cursor: pointer; text-align: left;
}
.j-drawer-item:hover { background: var(--bbg); color: var(--brand); }
.j-drawer-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .7; }
.j-drawer-item:hover svg { opacity: 1; }
.j-drawer-badge {
  margin-left: auto;
  background: #ef4444; color: #fff;
  font: 700 .6rem/1 'DM Sans', sans-serif;
  padding: .15rem .45rem;
  border-radius: 20px;
  min-width: 18px; text-align: center;
}
.j-drawer-item.urgent { color: var(--brand); font-weight: 600; }
.j-drawer-item.urgent svg { opacity: 1; stroke: var(--brand); }
.j-drawer-sep { height: 1px; background: var(--line); margin: .4rem 0; }
.j-drawer-close {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,.2); border: none;
  border-radius: 50%; width: 28px; height: 28px;
  color: #fff; cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}

/* ── Masquage mobile ── */
@media(max-width:720px){
  .hide-mobile{display:none!important}
  .g-hero{display:none!important}
  .g-discover-banner{display:none!important}
}

/* ── Prevent horizontal overflow mobile ── */
@media(max-width:720px){
  body{overflow-x:hidden}
  .lt,.tabs,.filters-row{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lt::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
}

/* ── Fix scroll horizontal mobile ── */
@media(max-width:720px){
  html,body{overflow-x:hidden;max-width:100vw}
}