/* ============================================================
   CUIS.web — Cité Culinaire — styles
   ============================================================
   Chargé par views/cite/accueil.php. Tout est scopé sous #cite-root
   pour ne rien affecter du reste du site.
*/

#cite-root { margin: -1rem -1rem 0; }
#cite-root .cw-wrap {
    font-family: "Fraunces", Georgia, serif;
    background: linear-gradient(180deg,#fdf9ef 0%,#f3ead6 55%,#ecdfc0 100%);
    border-radius: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
}
#cite-root .cw-sans { font-family: "Inter", system-ui, sans-serif; }
#cite-root a { color: inherit; text-decoration: none; }
#cite-root .cw-btn { cursor: pointer; border: none; font-family: "Inter", system-ui, sans-serif; background: none; }
#cite-root .cw-bldg { transition: transform .12s ease, box-shadow .12s ease; cursor: pointer; }
#cite-root .cw-bldg:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(60,40,20,0.20); }
#cite-root .cw-bldg.cw-locked { cursor: default; opacity: .55; }
#cite-root .cw-bldg.cw-locked:hover { transform: none; box-shadow: none; }
#cite-root .cw-tab { transition: background .15s ease, color .15s ease; }
#cite-root .cw-zone-label { font-family: "Inter", system-ui, sans-serif; }
#cite-root .cw-pin { transition: transform .12s ease; cursor: pointer; }
#cite-root .cw-pin:hover { transform: translateY(-3px) scale(1.06); }
#cite-root .cw-pin.cw-locked { cursor: default; opacity: .6; }
#cite-root .cw-pin.cw-locked:hover { transform: none; }
#cite-root .cw-road { position:absolute; background:#e2cf9e; }

/* ── HEADER / HERO / LEGENDE — tailles fluides avec clamp(), pas de
   palier fixe : ça bouge en continu avec la largeur réelle de la fenêtre,
   du smartphone au grand écran. ── */
#cite-root .cw-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: clamp(8px, 2vw, 18px);
  padding: clamp(12px, 2.2vw, 24px) clamp(16px, 4vw, 48px);
  background: #2c2116;
}
#cite-root .cw-brand { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
#cite-root .cw-brand-name { font-size: clamp(19px, 2.4vw, 26px); font-weight:700; color:#f6ead2; letter-spacing:.5px; }
#cite-root .cw-brand-name span { color:#d97757; }
#cite-root .cw-brand-tag { font-size: clamp(11px, 1.1vw, 13px); color:#c9b892; }
#cite-root .cw-tabs-row { display:flex; align-items:center; gap: clamp(8px, 1.6vw, 18px); flex-wrap: wrap; }
#cite-root .cw-tab-group { display:flex; align-items:center; gap:6px; background:#3a2c1c; padding:6px; border-radius:999px; flex-wrap: wrap; }
#cite-root .cw-tab { padding: clamp(6px,1vw,8px) clamp(12px,2vw,20px); border-radius:999px; font-size: clamp(11px, 1.1vw, 13px); font-weight:600; white-space: nowrap; }

#cite-root .cw-hero { padding: clamp(14px, 2.4vw, 24px) clamp(16px, 4vw, 48px) 8px; text-align:center; }
#cite-root .cw-hero h1 { margin:0 0 6px; font-size: clamp(20px, 3vw, 30px); color:#2c2116; font-weight:600; }
#cite-root .cw-hero-subtitle { margin:0 auto; max-width:680px; font-size: clamp(12.5px, 1.3vw, 14px); color:#5a4a34; line-height:1.5; }

#cite-root .cw-view-pad { flex-grow:1; padding: clamp(10px, 2vw, 16px) clamp(16px, 4vw, 48px) clamp(16px, 3vw, 24px); position: relative; }

#cite-root .cw-legend {
  padding: 0 clamp(16px, 4vw, 48px) clamp(14px, 2.5vw, 20px);
  display:flex; gap: clamp(10px, 2vw, 22px); font-size: clamp(10.5px, 1vw, 12px);
  color:#5a4a34; align-items:center; justify-content:center; flex-wrap:wrap;
}

/* ── VUE GRILLE — grid CSS fluide : le nombre de colonnes de zones et la
   taille des pavés s'ajustent en continu, aucun palier de media query. ── */
#cw-grid-zones {
  background:#f1e6c9; border:1px solid #d9c79b; border-radius: clamp(12px, 2vw, 22px);
  padding: clamp(14px, 2.5vw, 28px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}
#cite-root .cw-zone-label {
  font-size: clamp(11px, 1vw, 12px); font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
#cite-root .cw-zone-shops { display:flex; flex-wrap:wrap; gap: clamp(8px, 1.4vw, 14px); }
#cite-root .cw-bldg {
  position: relative;
  width: var(--bldg-size); height: var(--bldg-size);
  border-radius: 18px; background:#fffdf8; border:1px solid #e6d8bb;
  box-shadow:0 3px 8px rgba(60,40,20,0.08);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
#cite-root .cw-bldg-emoji { font-size: var(--bldg-emoji-size); }
#cite-root .cw-bldg-name {
  text-align:center; font-size: clamp(9.5px, .95vw, 11px); font-weight:600; color:#2c2116;
  line-height:1.2; margin-top:4px; padding: 0 4px;
}
#cite-root .cw-lock-badge {
  position:absolute; top:-8px; right:-8px; background:#fff; border-radius:999px;
  padding:3px; box-shadow:0 2px 6px rgba(0,0,0,0.15); font-size: 11px;
}

/* Les pavés eux-mêmes rétrécissent en continu avec la largeur de l'écran
   (via une variable CSS --bldg-scale posée sur le root, calculée en JS
   à partir de la largeur réelle disponible, pas d'un palier fixe). */
#cite-root { --bldg-scale: 1; }
#cite-root .cw-bldg { width: calc(var(--bldg-size) * var(--bldg-scale)); height: calc(var(--bldg-size) * var(--bldg-scale)); }
#cite-root .cw-bldg-emoji { font-size: calc(var(--bldg-emoji-size) * var(--bldg-scale)); }

/* Bulle métiers inline (grille) */
#cite-root .cw-inline-card {
  margin-top:12px; background:#2c2116; border-radius:14px; padding:14px 16px;
}

/* ── VUE CARTE — positionnement absolu nécessaire (géométrie ville /
   enclaves / ceinture), scalée en JS avec plancher de lisibilité. ── */
#cite-root .cw-map-scale-wrap { width: 100%; overflow: hidden; }
#cite-root .cw-map-canvas { position:relative; background:#e4f0d8; border:1px solid #cfe0bb; overflow:hidden; transform-origin: top left; }

/* ── HUB COMMERCE — écran dédié quand on "entre" dans un commerce, en
   remplacement de la grille/carte (pas une bulle empilée par-dessus).
   Rayons = les métiers du commerce (étape 1) ; regroupement en catégories
   et lien vers le vrai catalogue viendront ensuite. ── */
#cite-root .cw-hub { animation: cw-hub-in .18s ease; }
@keyframes cw-hub-in { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none; } }
#cite-root .cw-hub-back {
  display:inline-flex; align-items:center; gap:6px; background:#3a2c1c; color:#f0dfc0;
  border-radius:999px; padding:8px 16px; font-size:13px; font-weight:600; margin-bottom:18px;
}
#cite-root .cw-hub-back:hover { background:#4a3826; }
#cite-root .cw-hub-header {
  display:flex; align-items:center; gap:16px; margin-bottom:22px; flex-wrap:wrap;
}
#cite-root .cw-hub-emoji {
  font-size: clamp(36px, 4vw, 52px); background:#fffdf8; border:1px solid #e6d8bb;
  border-radius:18px; width: clamp(64px, 6vw, 84px); height: clamp(64px, 6vw, 84px);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 3px 8px rgba(60,40,20,0.08);
}
#cite-root .cw-hub-title { font-size: clamp(20px, 2.6vw, 28px); font-weight:600; color:#2c2116; margin:0 0 4px; }
#cite-root .cw-hub-desc { font-size: clamp(12.5px, 1.2vw, 14px); color:#5a4a34; margin:0; max-width:60ch; }
#cite-root .cw-hub-rayons-label {
  font-size: clamp(11px, 1vw, 12px); font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:#8a7a63; margin-bottom:12px;
}
#cite-root .cw-hub-rayons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(12px, 2vw, 18px);
}
#cite-root .cw-rayon {
  background:#fffdf8; border:1px solid #e6d8bb; border-radius:16px;
  padding: clamp(14px, 2vw, 18px); cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
#cite-root .cw-rayon:hover { transform: translateY(-2px); box-shadow:0 8px 18px rgba(60,40,20,0.14); }
#cite-root .cw-rayon.cw-rayon-open { border-color:#d97757; box-shadow:0 8px 18px rgba(60,40,20,0.14); }
#cite-root .cw-rayon-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#cite-root .cw-rayon-name { font-size: clamp(13px, 1.2vw, 15px); font-weight:700; color:#2c2116; }
#cite-root .cw-rayon-chevron { color:#b8a888; font-size:13px; transition: transform .15s ease; flex-shrink:0; }
#cite-root .cw-rayon.cw-rayon-open .cw-rayon-chevron { transform: rotate(90deg); }
#cite-root .cw-rayon-desc {
  font-size: clamp(11.5px, 1vw, 12.5px); color:#5a4a34; margin-top:8px; line-height:1.45;
  display:none;
}
#cite-root .cw-rayon.cw-rayon-open .cw-rayon-desc { display:block; }
#cite-root .cw-hub-lockmark {
  margin-top:18px; font-size:12px; color:#a3701f; background:#fdf1de; border:1px solid #f0dcb8;
  border-radius:10px; padding:10px 14px; display:inline-flex; align-items:center; gap:6px;
}