/* Shared by templates/outils/*.html.twig — the tools hub, the random
   discovery tool, and the map search tool. Reuses base.css tokens plus
   profile.css's .avatar-lg/.profile-meta/.profile-bio/.links/.link-row
   classes for the detail card content (see _profile_detail_card.html.twig)
   — this file only covers page layout and the bits those don't already
   style: the hub tiles, prev/next nav, map, and search form. */

.wrap-narrow{max-width:640px;}

.tool-breadcrumb{
  display:inline-block;margin-bottom:18px;
  font-family:var(--font-mono);font-size:13px;color:var(--text-dim);text-decoration:none;
}
.tool-breadcrumb:hover{color:var(--text);}

.tools-hub-section,
.tool-page-section{padding:56px 0 80px;}
.tools-hub-section .sub,
.tool-page-section .sub{margin-top:10px;color:var(--text-dim);font-size:15px;max-width:520px;}
.tools-hub-section h1,
.tool-page-section h1{margin-top:10px;font-size:32px;}

/* ---------- Hub tiles ---------- */
.tools-grid{
  margin-top:36px;display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;
}
@media (max-width:820px){ .tools-grid{grid-template-columns:1fr;} }
.tool-tile{
  aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:32px;text-decoration:none;color:var(--text);
  transition:border-color .15s ease,transform .15s ease;
}
.tool-tile:hover{border-color:var(--accent);transform:translateY(-2px);}
.tool-tile-icon{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:var(--surface-2);color:var(--accent);margin-bottom:20px;
}
.tool-tile-icon svg{width:24px;height:24px;}
.tool-tile h2{font-size:19px;margin-bottom:8px;}
.tool-tile p{font-size:13.5px;color:var(--text-dim);line-height:1.5;}

/* ---------- Prev/next nav (hasard + carte) ---------- */
.tool-nav{display:flex;align-items:center;gap:12px;margin:28px 0 20px;}
.tool-nav-btn{
  background:var(--surface-2);color:var(--text);border:1px solid var(--line);
  font-family:var(--font-body);font-weight:600;font-size:13.5px;
  padding:10px 16px;border-radius:999px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.tool-nav-btn:hover:not(:disabled){border-color:var(--text-faint);}
.tool-nav-btn:disabled{opacity:.4;cursor:default;}
.tool-nav-btn-primary{background:var(--accent);color:var(--bg);border-color:transparent;}
.tool-nav-btn-primary:hover:not(:disabled){background:var(--accent-dim);}

.tool-empty{color:var(--text-dim);padding:32px 0;}

/* ---------- Detail card (wraps _profile_detail_card.html.twig, which
   otherwise reuses profile.css classes as-is) ---------- */
.tool-card{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:32px 28px;text-align:center;
}
.tool-card .avatar-wrap{display:flex;justify-content:center;}
.tool-card .profile-name-row{justify-content:center;margin-top:6px;}
.tool-card .profile-meta{justify-content:center;}
.tool-card .links{margin-top:18px;text-align:left;}
.tool-card-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:20px;
  background:var(--accent);color:var(--bg);font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:999px;text-decoration:none;
  transition:background .15s ease;
}
.tool-card-cta:hover{background:var(--accent-dim);}

/* ---------- Map search ---------- */
.map-search-form{display:flex;gap:10px;margin-top:28px;max-width:420px;}
.map-search-form input{
  flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;font-family:var(--font-body);font-size:14px;color:var(--text);
}
.map-search-form input:focus{outline:none;border-color:var(--accent);}
.map-search-form button{
  background:var(--accent);color:var(--bg);border:0;border-radius:10px;
  padding:11px 18px;font-weight:600;font-size:14px;cursor:pointer;
  transition:background .15s ease;
}
.map-search-form button:hover{background:var(--accent-dim);}
.map-search-message{margin-top:10px;font-size:13px;color:var(--text-dim);}
.map-search-message.error{color:#ff6b6b;}

.map-layout{margin-top:24px;display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:start;}
@media (max-width:820px){ .map-layout{grid-template-columns:1fr;} }
.tools-map{
  height:480px;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--surface-2);
}
.map-results .tool-nav{margin-top:0;}
.map-results-count{font-family:var(--font-mono);font-size:12.5px;color:var(--text-faint);}

/* Leaflet's own CSS resets some of this back if not scoped — z-index/etc.
   already handled by leaflet.css, this just themes our custom divIcon pin. */
.tools-map-pin{color:var(--accent);filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));transition:transform .15s ease;}
.tools-map-pin.active{color:#ff6b6b;transform:scale(1.15);}
.tools-map-pin svg{width:28px;height:28px;}