/* ============================================================
   WOUGGO V2 — index.css
   ============================================================ */
body { background:#FFF7ED; overflow-x:hidden; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar { position:fixed;top:0;left:0;width:60px;height:100vh;background:#fff;border-right:1px solid #E5E7EB;display:flex;flex-direction:column;align-items:center;padding:1rem 0;z-index:200; }
.sidebar__logo { margin-bottom:1.25rem; }
.sidebar__links { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px; }
.sidebar__bottom { margin-top:auto; }
.sidebar__item { width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;text-decoration:none;cursor:pointer;color:#9CA3AF;transition:background .15s,color .15s; }
.sidebar__item:hover,.sidebar__item.active { background:#FFF7ED;color:#F97316; }
.sidebar__item svg { width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
@media(max-width:768px){.sidebar{display:none;}}

/* ── Page ─────────────────────────────────────────────────── */
.page-wrap { margin-left:60px;min-height:100vh;background:#FFF7ED; }
@media(max-width:768px){.page-wrap{margin-left:0;padding-bottom:64px;}}

/* ── Header ──────────────────────────────────────────────── */
.top-header { display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.25rem;background:#fff;border-bottom:1px solid #E5E7EB;position:sticky;top:0;z-index:200; }
.top-header__left { display:flex;align-items:center;gap:.75rem; }
.top-header__logo { height:26px;width:auto; }
.top-header__page { font-size:.875rem;color:#7A5C58; }
.top-header__right { display:flex;align-items:center;gap:.75rem; }
.top-header__btn { display:flex;align-items:center;gap:5px;padding:.375rem 1rem;border:1.5px solid #E5E7EB;border-radius:999px;font-size:.875rem;font-weight:500;color:#532822;background:#fff;text-decoration:none;white-space:nowrap;transition:border-color .15s,color .15s;cursor:pointer; }
.top-header__btn:hover { border-color:#F97316;color:#F97316; }

/* ── Hero ────────────────────────────────────────────────── */
.hero { background:#FFF7ED;text-align:center;padding:2.5rem 1.5rem 2rem; }
.hero__inner { max-width:860px;margin:0 auto; }
.hero__orb { width:68px;height:68px;background:#F97316;border-radius:50%;margin:0 auto 1.25rem;animation:orb-float 3s ease-in-out infinite; }
@keyframes orb-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }
.hero__title { font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;color:#532822;line-height:1.2;margin:0 0 .75rem; }
.hero__accent { color:#F97316; }
.hero__sub { font-size:1rem;color:#7A5C58;max-width:520px;margin:0 auto 1.5rem;line-height:1.6; }
.search-bar { display:flex;align-items:center;gap:.5rem;max-width:600px;margin:0 auto 1.25rem;background:#fff;border:1.5px solid #E8E0D8;border-radius:24px;padding:.375rem .375rem .375rem 1.25rem;box-shadow:0 2px 16px rgba(0,0,0,.06);transition:border-color .15s; }
.search-bar:focus-within { border-color:#F97316; }
.search-bar__input { flex:1;border:none;outline:none;font-size:1rem;font-family:inherit;background:transparent;min-height:38px;color:#532822; }
.search-bar__input::placeholder { color:#9CA3AF; }
.search-bar__btn { width:44px;height:44px;flex-shrink:0;background:#F97316;color:#fff;border-radius:18px;border:none;font-size:1.125rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .15s; }
.search-bar__btn:hover { background:#EA6A00; }
.cats { display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap; }
.cat { display:flex;align-items:center;gap:5px;padding:.375rem 1rem;border:1.5px solid #E0D8D0;border-radius:999px;font-size:.875rem;font-weight:500;background:#fff;color:#532822;cursor:pointer;font-family:inherit;transition:all .15s; }
.cat:hover { background:#F97316;border-color:#F97316;color:#fff;transform:translateY(-1px); }

/* ══ 3 COLONNES ══════════════════════════════════════════════ */
.triple-sect { display:grid;grid-template-columns:1fr 1fr 1fr;background:#FFF7ED;padding:1.75rem 0 1.5rem;gap:0;max-width:860px;margin:0 auto;width:100%; }
.triple-col { padding:0 1rem;border-right:1px solid #E8DFD5;min-width:0; }
.triple-col:first-child { padding-left:0; }
.triple-col:last-child  { padding-right:0;border-right:none; }

/* Header colonne */
.col-hd { display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem; }
.col-title { font-size:1.0625rem;font-weight:700;color:#532822; }

/* Boutons nav */
.col-nav { display:flex;align-items:center;gap:.375rem; }
.col-btn { width:30px;height:30px;border-radius:50%;border:1.5px solid #DDD5CC;background:#fff;font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;color:#7A5C58;transition:all .2s;user-select:none;flex-shrink:0; }
.col-btn:hover { border-color:#F97316;color:#F97316;background:#FFF7ED; }
.col-btn:active { transform:scale(.9); }

/* Dots */
.col-dots { display:none; }
.col-dot { display:none; }
.col-dot.active { display:none; }

/* ══ SLIDER — UNE SEULE CARTE VISIBLE ═══════════════════════
   Principe : overflow:hidden sur le wrapper,
   les cartes sont en position absolute et on joue sur opacity+transform
   → Pas besoin de offsetWidth !
*/
.col-slider {
  position: relative;
  /* Hauteur fixe pour que le wrapper ait une taille définie */
  height: 110px;
  overflow: hidden;
  border-radius: 14px;
}

/* Chaque carte est en absolute, empilées */
.h-card {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #EDE8E2;
  overflow: hidden;
  cursor: pointer;
  height: 102px;
  /* État par défaut : caché à droite */
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}

/* Carte active : visible */
.h-card.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}

/* Carte qui sort : part à gauche */
.h-card.leaving {
  opacity: 0;
  transform: translateX(-40px);
  z-index: 1;
}

.h-card:hover { box-shadow:0 6px 24px rgba(83,40,34,.12); }

/* Image */
.h-card__img { width:88px;height:88px;flex-shrink:0;overflow:hidden;background:#F5F0EB;margin:4px;border-radius:10px; }
.h-card__img img { width:100%;height:100%;object-fit:cover;transition:transform .35s; }
.h-card:hover .h-card__img img { transform:scale(1.06); }
.h-card__ph { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:30px;background:#F0EDE8; }

/* Corps */
.h-card__body { flex:1;min-width:0;padding:.5rem .625rem .5rem .375rem; }
.h-card__nom { font-size:.875rem;font-weight:700;color:#532822;margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:90px; }
.h-card__desc { font-size:.6875rem;color:#7A5C58;margin:0 0 5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.h-card__bottom { display:flex;align-items:center;justify-content:space-between;gap:.5rem; }
.h-card__prix { font-size:.8125rem;font-weight:700; }
.h-card__prix--orange { color:#F97316; }
.h-card__prix--green  { color:#10B981; }
.h-card__prix--gold   { color:#F59E0B; }
.h-card__prix--dark   { color:#532822; }

/* Badge */
.h-card__badge { position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;color:#fff;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis; }
.h-card__badge--orange  { background:#F97316; }
.h-card__badge--green   { background:#10B981; }
.h-card__badge--gold    { background:#F59E0B; }
.h-card__badge--dark    { background:#3B3B5C; }
.h-card__badge--gratuit { background:#10B981; }
.h-card__badge--flash   { background:#F97316;animation:pulse-flash 1.5s infinite; }

/* Favori */
.h-card__fav { width:26px;height:26px;border-radius:50%;background:#F5F0EB;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:transform .15s; }
.h-card__fav:hover { transform:scale(1.2); }

/* Footer */
.col-footer { margin-top:.875rem; }
.col-voir-tout { font-size:.875rem;font-weight:500;color:#F97316;text-decoration:none;cursor:pointer;background:none;border:none;font-family:inherit;padding:0;transition:opacity .15s; }
.col-voir-tout:hover { opacity:.7; }

/* Mobile */
@media(max-width:640px){.triple-sect{grid-template-columns:1fr;gap:1.25rem;padding:.75rem;}.triple-col{padding:0;border-right:none;}}

/* ── Pro CTA ─────────────────────────────────────────────── */
.pro-cta { margin:.5rem 1.25rem 1.5rem;background:#1A1A2E;border-radius:16px;padding:2.5rem 2rem;text-align:center; }
.pro-cta__title { font-size:1.5rem;font-weight:700;color:#fff;margin:0 0 .75rem; }
.pro-cta__txt { font-size:1rem;color:rgba(255,255,255,.7);margin:0 auto 1.5rem;line-height:1.6;max-width:460px; }

/* ── Bottom nav ──────────────────────────────────────────── */
.bottom-nav { display:none; }
@media(max-width:768px){.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:64px;background:#fff;border-top:1px solid #E5E7EB;align-items:center;justify-content:space-around;z-index:200;padding-bottom:env(safe-area-inset-bottom);}}
.bottom-nav__item { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;color:#9CA3AF;text-decoration:none;cursor:pointer;transition:color .15s; }
.bottom-nav__item.active { color:#F97316; }
.bottom-nav__label { font-size:10px;font-weight:500; }
.bnav-icon { width:24px;height:24px;display:flex;align-items:center;justify-content:center; }
.bnav-icon svg { width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.bottom-nav__item.active .bnav-icon svg { stroke:#F97316; }
.bnav-center { position:relative; }
.bnav-fab { width:52px;height:52px;background:#F97316;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:-16px;box-shadow:0 4px 16px rgba(249,115,22,.4); }
.bnav-fab svg { width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }

/* ── Misc ────────────────────────────────────────────────── */
.villes-list { display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto; }
.ville-item { display:flex;justify-content:space-between;align-items:center;padding:.625rem 1rem;border-radius:8px;cursor:pointer;transition:background .15s; }
.ville-item:hover { background:#FFF7ED; }
.ville-item__nom { font-weight:600;color:#532822; }
.ville-item__pays { font-size:.875rem;color:#7A5C58; }
.sk { background:linear-gradient(90deg,#EDE8E2 25%,#F5F0EA 50%,#EDE8E2 75%);background-size:200% 100%;animation:sk-sh 1.5s infinite;border-radius:8px; }
@keyframes sk-sh { 0%{background-position:200% 0}100%{background-position:-200% 0} }
.empty-msg { padding:1rem;color:#9CA3AF;font-size:.875rem;text-align:center; }
@keyframes pulse-flash { 0%,100%{opacity:1}50%{opacity:.7} }