/* Main site styles - ported from PHP version */
:root {
  --bg: #ffffff;
  --bg-alt: #f4f4f5;
  --bg-card: #ffffff;
  --text: #18181b;
  --text-muted: #71717a;
  --border: #e4e4e7;
  --radius: 16px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

html { scroll-behavior: smooth; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

/* Page Header */
.page-header { text-align: center; padding: 48px 0 32px; }
.page-header h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: 12px; }
.page-header p { font-size: 1.1rem; color: var(--text-muted); max-width: 800px; margin: 0 auto; }

/* Sections */
.section { background: white; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-lg); margin-bottom: 24px; }
@media (min-width: 640px) { .section { padding: 32px; } }
.section h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 20px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-header h2 { margin-bottom: 0; }

/* Profile Grid */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
@media (min-width: 640px) { .profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .profile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Profile Popup/Modal */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.active { display: flex; }
.modal-content { background: white; border-radius: var(--radius); max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; }
.modal-close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.5); color: white; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; z-index: 10; }
.modal-carousel { position: relative; width: 100%; aspect-ratio: 4/5; overflow: hidden; background: #000; border-radius: var(--radius) var(--radius) 0 0; }
.modal-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.modal-slide.active { opacity: 1; pointer-events: auto; }
.modal-slide .modal-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-image-mirror { transform: scaleX(-1) rotate(180deg); filter: blur(20px) !important; }
.modal-image-zoom { transform: scale(1.5); transform-origin: center; filter: blur(20px) !important; }
.modal-cta-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.35); z-index: 10; padding: 20px; text-align: center; }
.modal-cta-overlay p { color: white; font-size: 1.15rem; font-weight: 600; margin-bottom: 16px; text-shadow: 0 2px 8px rgba(0,0,0,.5); max-width: 280px; }
.btn-cta-overlay { display: inline-block; color: white !important; font-size: .95rem; font-weight: 600; padding: 12px 28px; border-radius: 10px; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.3); background: var(--secondary, #e91e63); }
.modal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; background: rgba(0,0,0,.5); color: white; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-nav:hover { background: rgba(0,0,0,.7); }
.modal-nav-prev { left: 10px; }
.modal-nav-next { right: 10px; }
.modal-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 20; }
.modal-dot { width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.5); padding: 0; }
.modal-dot.active { background: white; width: 20px; border-radius: 4px; }
.modal-body { padding: 24px; }
.modal-body h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
.modal-body .modal-meta { color: var(--secondary, #e91e63); margin-bottom: 16px; display: block; text-decoration: none; font-size: .95rem; }
.modal-body .modal-bio { line-height: 1.7; margin-bottom: 16px; }
.modal-body .modal-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.modal-body .modal-tag { background: var(--bg-alt); padding: 4px 12px; border-radius: 20px; font-size: .85rem; }
.modal-actions { display: flex; gap: 12px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 24px; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem; border: none; cursor: pointer; transition: all .2s; text-decoration: none; }
.btn-primary { background: var(--primary, #e91e63); color: white; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary { background: var(--bg-alt); color: var(--text); }
.btn-outline { background: transparent; border: 2px solid var(--primary, #e91e63); color: var(--primary, #e91e63); }
.btn-outline:hover { background: var(--primary, #e91e63); color: white; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 16px; font-size: .85rem; }
.btn-lg { padding: 14px 32px; font-size: 1.1rem; }

/* Search */
.search-box { position: relative; margin-bottom: 20px; }
.search-input { width: 100%; padding: 12px 16px 12px 44px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem; outline: none; transition: border-color .2s; }
.search-input:focus { border-color: var(--primary, #e91e63); }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }

/* Prevent search input overflow inside cards/sections */
.section .search-box {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.section .search-input {
  display: block;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Links grid */
.links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.link-tag { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; font-size: .88rem; color: var(--text); transition: all .2s; text-decoration: none; }
.link-tag:hover { border-color: var(--primary, #e91e63); transform: translateY(-1px); }
@media (max-width: 768px) { .links-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; } }

/* Breadcrumb */
.breadcrumb { padding: 12px 0; font-size: .9rem; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); }

/* SEO Text */
.seo-text { color: var(--text-muted); line-height: 1.8; }
.seo-text-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* CTA Section */
.cta-section { background: linear-gradient(135deg, var(--primary, #e91e63), #1a1a2e); color: white; border-radius: var(--radius); padding: 48px 32px; text-align: center; margin-bottom: 24px; }
.cta-section h2 { color: white; font-size: 2rem; margin-bottom: 12px; }
.cta-section p { color: rgba(255,255,255,.8); font-size: 1.1rem; margin-bottom: 24px; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter-btn { padding: 6px 16px; border-radius: 20px; border: 2px solid var(--border); background: white; cursor: pointer; font-size: .9rem; transition: all .2s; }
.filter-btn:hover, .filter-btn.active { border-color: var(--primary, #e91e63); background: var(--primary, #e91e63); color: white; }

/* Scrolling bar */
.scrolling-bar { overflow: hidden; white-space: nowrap; background: var(--bg-alt); padding: 12px 0; }
.scrolling-inner { display: inline-block; animation: scroll-left 30s linear infinite; }
.scrolling-inner a { display: inline-block; padding: 6px 16px; margin: 0 4px; background: white; border-radius: 20px; font-size: .85rem; color: var(--text); text-decoration: none; }
.scrolling-inner a:hover { background: var(--primary, #e91e63); color: white; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Collapsible links */
.links-grid-collapsed { max-height: 50px; overflow: hidden; position: relative; }
.links-grid-collapsed::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 24px; background: linear-gradient(to bottom, transparent, white); pointer-events: none; }
.links-grid-expanded { max-height: none !important; overflow: visible; }
.links-grid-expanded::after { display: none; }
.btn-voir-plus { display: inline-flex; align-items: center; gap: 6px; padding: 8px 24px; border: 2px solid var(--border); border-radius: 20px; background: white; font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--text-muted); }

/* Signup popup */
.signup-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
.signup-overlay.active { display: flex; }
.signup-modal { background: white; border-radius: var(--radius); max-width: 440px; width: 100%; position: relative; overflow: hidden; padding: 32px; animation: signupSlideIn .3s ease; }
@keyframes signupSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.signup-close { position: absolute; top: 12px; right: 12px; background: var(--bg-alt); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; z-index: 10; }
.signup-header { text-align: center; margin-bottom: 16px; }
.signup-header h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 8px; }
.signup-header p { color: var(--text-muted); font-size: .95rem; }
.signup-step { display: none; }
.signup-step.active { display: block; }
.signup-steps-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.signup-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.signup-step-dot.active { background: var(--primary, #e91e63); width: 24px; border-radius: 4px; }
.signup-error { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .9rem; background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }

/* Forms */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem; outline: none; transition: border-color .2s; }
.form-input:focus, .form-select:focus { border-color: var(--primary, #e91e63); }
.form-textarea { min-height: 120px; resize: vertical; }

/* Alert */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .95rem; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }

/* Info duo (FAQ + map / businesses) */
.info-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}
.info-duo-col {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}
.info-duo-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  margin: 0;
  padding: 16px 20px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Accordion */
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-item:last-child { border-bottom: none; }
.accordion-item summary { list-style: none; }
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  user-select: none;
  text-align: left;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.accordion-q { flex: 1; min-width: 0; }
.accordion-header::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform .25s;
  flex-shrink: 0;
  margin-left: auto;
  margin-top: 0.35em;
}
.accordion-item[open] > .accordion-header::after { transform: rotate(-135deg); }
.accordion-header:hover { background: var(--bg-alt); }
.accordion-badge { font-size: .75rem; font-weight: 700; background: var(--primary, #e91e63); color: #fff; padding: 2px 8px; border-radius: 12px; flex-shrink: 0; }
.accordion-body { padding: 4px 20px 16px; color: var(--text-muted); font-size: .9rem; line-height: 1.6; }

/* Business items */
.biz-item { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.biz-item:last-child { border-bottom: none; }
.biz-name { font-weight: 600; font-size: .9rem; }
.biz-addr { font-size: .82rem; color: var(--text-muted); margin-top: 2px; }
.biz-phone { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--primary, #e91e63); margin-top: 3px; }

/* Leaflet map cards and markers */
.ville-map-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.ville-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  min-width: 0;
}
.ville-map-header h3 {
  margin: 0;
  font-size: .98rem;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ville-map-badge {
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary, #e91e63);
  border-radius: 999px;
  padding: 3px 9px;
}
.ville-map-container {
  height: min(50vh, 320px);
  min-height: 240px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background: #f3f4f6;
  position: relative;
  isolation: isolate;
}
/* Leaflet / tuiles : ne pas dépasser la colonne mobile */
.ville-map-container .leaflet-container,
.ville-map-container iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.ville-map-loading { height: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: #6b7280; font-size: .9rem; }
.ville-map-spinner { width: 26px; height: 26px; border: 3px solid #e5e7eb; border-top-color: var(--primary, #e91e63); border-radius: 50%; animation: spin360 .9s linear infinite; }
@keyframes spin360 { to { transform: rotate(360deg); } }

.custom-profile-marker { background: transparent; border: none; }
.map-profile-marker {
  width: 44px; height: 44px; border-radius: 999px; border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  background-size: cover; background-position: center;
  position: relative;
}
.map-profile-bubble {
  position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--primary, #e91e63);
  border: 2px solid #fff;
}
.regional-city-bubble-wrap { background: transparent; border: none; }
.regional-city-bubble {
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--primary, #e91e63); color: #fff;
  border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
}
.regional-city-bubble-count { font-size: .78rem; font-weight: 800; line-height: 1; }
.regional-popup-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; cursor: pointer;
}
.regional-popup-item img { width: 22px; height: 22px; border-radius: 999px; object-fit: cover; }
.regional-popup-item span { font-size: .82rem; color: #374151; }

/* Utilities */
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.bg-gradient {
  background: linear-gradient(to bottom, var(--bg-alt), var(--bg));
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

@media (max-width: 768px) {
  .breadcrumb {
    padding-top: 16px;
    padding-bottom: 8px;
  }
  .info-duo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .page-header { padding: 18px 0 16px; }
  .page-header h1 { font-size: clamp(1.35rem, 6vw, 1.8rem); overflow-wrap: anywhere; }
  .section {
    padding: 14px max(12px, env(safe-area-inset-left, 0px)) 14px max(12px, env(safe-area-inset-right, 0px));
    border-radius: 12px;
    max-width: 100%;
    min-width: 0;
  }
  .section h2 { font-size: 1.25rem; overflow-wrap: anywhere; word-break: break-word; }
  .cta-section {
    padding: 2rem max(1rem, env(safe-area-inset-left, 0px)) 2rem max(1rem, env(safe-area-inset-right, 0px));
  }
  .cta-section h2 { font-size: 1.35rem; overflow-wrap: anywhere; }
  /* Bloc SEO sous la carte : pas de coupure type "..." */
  .seo-content h2,
  .seo-content p {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }
}

/* ---------- Pagination profils (global : le CSS du layout ne cible pas le slot Astro) ---------- */
.pagination {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}
.pagination-link,
.pagination-current,
.pagination-ellipsis {
  min-width: 48px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.pagination-link {
  background: #f3f4f6;
  color: #1f2937 !important;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.pagination-link:hover {
  background: #e5e7eb;
  color: #111827 !important;
  text-decoration: none !important;
}
.pagination-link:focus-visible {
  outline: 2px solid var(--primary, #e91e63);
  outline-offset: 2px;
}
.pagination-current {
  background: var(--primary, #e91e63);
  color: #fff !important;
  cursor: default;
}
.pagination-ellipsis {
  color: #6b7280;
  width: 40px;
  min-width: 40px;
  height: 40px;
  font-weight: 700;
  background: transparent;
}
.pagination-arrow {
  font-size: 1.3rem;
  line-height: 1;
}
/* Ancien markup éventuel */
.pagination > a:not(.pagination-link) {
  min-width: 48px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: #1f2937 !important;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none !important;
}
.pagination > a.active,
.pagination > span.active {
  background: var(--primary, #e91e63);
  color: #fff !important;
}

@media (max-width: 768px) {
  .pagination { gap: 8px; margin-top: 1.25rem; }
  .pagination-link,
  .pagination-current,
  .pagination-ellipsis {
    min-width: 44px;
    width: 44px;
    height: 44px;
    font-size: 0.95rem;
  }
  .pagination-ellipsis {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }
}

/* Map toggle */
.btn-map-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 7px 16px; border: 2px solid var(--border); border-radius: 20px; background: white; font-size: .85rem; font-weight: 600; cursor: pointer; }
.btn-map-toggle:hover { border-color: var(--primary, #e91e63); color: var(--primary, #e91e63); }
.btn-map-toggle.active { background: var(--primary, #e91e63); color: white; border-color: var(--primary, #e91e63); }

/* ========== Dashboard utilisateur (global : slot non couvert par le CSS scopé du layout) ========== */
.dashboard-page {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  min-width: 0;
}

.dashboard-title {
  font-size: clamp(1.35rem, 4.2vw, 1.85rem);
  font-weight: 800;
  margin: 0 0 1.25rem;
  color: var(--text, #111827);
  line-height: 1.2;
}

.dashboard-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 16px;
  padding: clamp(1.1rem, 4vw, 1.75rem);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.07);
  margin-bottom: 1.25rem;
}

.dashboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.dashboard-toolbar h1,
.dashboard-toolbar .dashboard-title {
  margin-bottom: 0;
}

.dashboard-toolbar .btn {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  justify-content: center;
}

.dashboard-page .form-group {
  margin-bottom: 1.35rem;
}

.dashboard-page .form-group:last-of-type {
  margin-bottom: 0;
}

.dashboard-page .form-label {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text, #18181b);
}

.dashboard-page .form-input,
.dashboard-page select.form-input,
.dashboard-page textarea.form-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid var(--border, #e4e4e7);
  font-size: 1rem;
  line-height: 1.35;
  background: #fff;
}

.dashboard-page textarea.form-input {
  min-height: 140px;
  resize: vertical;
}

.dashboard-page input[type="file"].form-input {
  min-height: auto;
  padding: 0.65rem 0.75rem;
  line-height: 1.4;
}

.dashboard-page select.form-input {
  cursor: pointer;
  background-color: #fff;
}

.dashboard-page .form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.25rem;
  margin-bottom: 0.25rem;
}

.dashboard-check-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin: 0.25rem 0 1.35rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border, #f4f4f5);
  border-bottom: 1px solid var(--border, #f4f4f5);
}

.dashboard-check-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text, #374151);
}

.dashboard-page .btn-block {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dashboard-submit-wide {
  margin-top: 0.75rem;
  width: 100%;
}

@media (min-width: 480px) {
  .dashboard-submit-wide {
    width: auto;
    min-width: 220px;
  }
}

/* Profil dashboard */
.dashboard-welcome {
  background: linear-gradient(135deg, var(--primary, #e91e63), #1a1a2e);
  color: #fff;
  border-radius: 16px;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 28px rgba(233, 30, 99, 0.25);
}

.dashboard-welcome h1 {
  font-size: clamp(1.2rem, 3.5vw, 1.45rem);
  margin: 0 0 0.35rem;
  color: #fff !important;
}

.dashboard-welcome p {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}

.dashboard-welcome-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.dashboard-welcome-text {
  flex: 1;
  min-width: 0;
}

.dashboard-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

.dashboard-profile-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.dashboard-profile-form .form-row.single {
  grid-template-columns: 1fr;
}

.dashboard-profile-form .form-input-lg {
  font-size: 1rem;
  padding: 14px 16px;
  min-height: 52px;
}

.dashboard-cta-box {
  margin-top: 1.5rem;
  text-align: center;
  border: 2px dashed var(--border, #e5e7eb);
  background: var(--bg-alt, #f9fafb);
  padding: clamp(1.35rem, 4vw, 2rem);
  border-radius: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.dashboard-cta-box h3 {
  font-size: 1.12rem;
  margin: 0 0 0.5rem;
}

.dashboard-cta-box p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0 2px;
}

/* Bouton pleine largeur sans dépasser (min-width:auto des flex items) */
.dashboard-cta-box .btn,
.dashboard-cta-box a.btn {
  box-sizing: border-box !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
  margin-left: auto;
  margin-right: auto;
}

.dashboard-cta-box .btn.btn-lg,
.dashboard-cta-box a.btn.btn-lg {
  padding: 0.85rem 1rem;
  font-size: clamp(0.9rem, 3.8vw, 1.05rem);
}

.dashboard-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  max-width: 100%;
  box-sizing: border-box;
}

.dashboard-empty .btn {
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
}

/* Mes annonces */
.dashboard-annonce-item {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.25rem);
  background: var(--bg-alt, #f9fafb);
  border-radius: 12px;
  border: 1px solid var(--border, #f4f4f5);
  align-items: flex-start;
}

.dashboard-annonce-item img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.dashboard-annonce-body {
  flex: 1;
  min-width: 0;
}

.dashboard-annonce-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.dashboard-page > .alert {
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .dashboard-page {
    max-width: 100%;
  }

  .dashboard-page .form-grid-2 {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .dashboard-profile-form .form-row {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .dashboard-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-toolbar .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: center;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .dashboard-annonce-item {
    flex-direction: column;
  }

  .dashboard-annonce-item img {
    width: 100%;
    height: 200px;
  }
}

/* ===========================================================================
   Fiche profil — mise en page et appel a l'action
   ===========================================================================

   🔑 DEUX MISES EN PAGE DISTINCTES, POUR UNE RAISON DE CONVERSION.

   Sur PC, la fiche tenait dans une colonne de 600 px : la photo mangeait tout
   l'ecran et il fallait FAIRE DEFILER pour decouvrir la bio, les tags, puis le
   bouton. Chaque cran de molette est une occasion de fermer. On passe donc en
   DEUX COLONNES — photo a gauche, contenu et bouton a droite — pour que tout
   soit visible d'un coup, sans defilement.

   Sur mobile il n'y a pas la largeur pour deux colonnes : on garde le
   defilement, mais le bouton reste colle en bas pour ne jamais sortir du champ.
*/

/* --- Titre + etoile favoris ------------------------------------------- */
.modal-titre-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-titre-ligne h3 { margin-bottom: 0; }

.modal-favori {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  padding: 4px;
  color: #d0d0d0;                 /* eteinte par defaut : c'est une invitation */
  transition: color .15s ease, transform .15s ease;
}
.modal-favori:hover { color: var(--secondary, #e91e63); transform: scale(1.15); }

/* --- Barre d'action ---------------------------------------------------- */
.modal-actions.modal-actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  padding: 12px 0 calc(4px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  box-shadow: 0 -14px 18px -14px rgba(0, 0, 0, .22);
}
/* Un seul bouton, toute la largeur : rien ne doit lui disputer le clic. */
.modal-action-primary { width: 100%; flex: 1 1 100%; font-size: 16px; padding: 14px 20px; }

/* --- PC : deux colonnes, sans defilement -------------------------------- */
@media (min-width: 900px) {
  .modal-content {
    max-width: 940px;
    max-height: 88vh;
    /* ⚠️ `hidden` et non `auto` : c'est ce qui garantit qu'on ne fait PAS
       defiler la fiche. Les deux colonnes doivent tenir telles quelles. */
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: stretch;
  }
  .modal-carousel {
    height: 100%;
    aspect-ratio: auto;           /* la hauteur suit la colonne de droite */
    border-radius: var(--radius) 0 0 var(--radius);
  }
  .modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;                /* sans quoi le contenu deborde de la grille */
    padding: 28px 28px 20px;
  }
  /* Seule la bio se retracte si le profil est bavard — le nom, les tags et le
     bouton restent toujours visibles. */
  .modal-body .modal-bio { overflow-y: auto; min-height: 0; }
  .modal-actions.modal-actions-sticky { margin-top: auto; box-shadow: none; }
}

/* --- Mobile : defilement, mais bouton toujours visible ------------------ */
@media (max-width: 899px) {
  .modal-content { max-height: 90vh; overflow-y: auto; }
}

/* __DESIGN_SITE__ */
/* ===== Direction : industriel — gris acier, angles vifs, liseré orange, footer à bandes ===== */
/* Palette : acier #24272b / #34383d, texte clair #e7e9ea, accent orange #ff6d1f */

/* --- Barre latérale desktop (le "header" de ce gabarit) --- */
aside.sidebar {
  background: linear-gradient(180deg, #2b2f33 0%, #1e2124 100%);
  border-right: 3px solid #ff6d1f;
  position: relative;
  overflow: hidden;
}
/* liseré orange qui glisse lentement le long du bord droit */
aside.sidebar::after {
  content: "";
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent 0%, #ffb066 45%, #ff6d1f 55%, transparent 100%);
  background-size: 100% 220%;
  animation: sib-liseret 6s linear infinite;
}
@keyframes sib-liseret {
  0%   { background-position: 0 0%; }
  100% { background-position: 0 100%; }
}

.sb-logo { gap: 10px; }
.sb-logo-text {
  color: #f2f3f4;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: .92em;
}
.sb-logo-dot {
  background: #ff6d1f;
  border-radius: 0; /* angles vifs : pas de rond, la "vis" devient un boulon carré */
  box-shadow: 0 0 0 2px #1e2124, 0 0 0 3px #4a4f54;
}

.sb-section-title span {
  color: #9aa1a7;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72em;
}
.sb-section-title::before {
  content: "";
  display: inline-block;
  width: 8px; height: 2px;
  background: #ff6d1f;
  margin-right: 6px;
  vertical-align: middle;
}

.sb-link {
  color: #cfd3d6;
  border-radius: 0;
  border-left: 3px solid transparent;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.sb-link:hover,
.sb-link.active {
  color: #ffffff;
  background: rgba(255, 109, 31, .12);
  border-left-color: #ff6d1f;
}
.sb-ico { color: #ff6d1f; }

.sb-map-quick-link {
  border-radius: 0;
  border: 1px solid #4a4f54;
  color: #e7e9ea;
}
.sb-map-quick-link:hover { border-color: #ff6d1f; color: #ff6d1f; }

.sb-silo-region {
  color: #d7dadc;
  border-radius: 0;
  transition: color .18s ease;
}
.sb-silo-region:hover { color: #ff6d1f; }
.sb-silo-ville { color: #9aa1a7; }
.sb-silo-ville:hover { color: #ffb066; }

/* --- Bandeau mobile (guest top) --- */
.mobile-guest-top {
  background: linear-gradient(180deg, #2b2f33 0%, #1e2124 100%) !important;
  border-bottom: 3px solid #ff6d1f;
  position: relative;
  overflow: hidden;
}
.mobile-guest-top::after {
  content: "";
  position: absolute;
  left: -20%; right: -20%; bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #ffb066 45%, #ff6d1f 55%, transparent 100%);
  background-size: 220% 100%;
  animation: sib-liseret-h 6s linear infinite;
}
@keyframes sib-liseret-h {
  0%   { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

.mobile-guest-brand {
  color: #f2f3f4 !important;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.mobile-guest-login {
  color: #d7dadc !important;
  border: 1px solid #4a4f54;
  border-radius: 0;
  padding: 6px 10px;
}
.mobile-guest-login:hover { border-color: #ff6d1f; color: #ff6d1f !important; }

.mobile-guest-cta-offer { color: #ffb066 !important; }
.mobile-guest-cta-kw { color: #f2f3f4 !important; font-weight: 700; }
.mobile-guest-timer-label { color: #9aa1a7 !important; }
.mobile-guest-timer {
  color: #ff6d1f !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.mobile-guest-cta-btn {
  background: #ff6d1f !important;
  color: #1e2124 !important;
  border-radius: 0 !important; /* angles vifs */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 #1e2124, 3px 3px 0 3px #4a4f54;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mobile-guest-cta-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #1e2124, 4px 4px 0 3px #4a4f54;
}

/* --- Pied de page : footer à bandes --- */
footer.footer-v2 {
  background:
    repeating-linear-gradient(
      135deg,
      #24272b 0px, #24272b 26px,
      #2b2f33 26px, #2b2f33 52px
    );
  border-top: 4px solid #ff6d1f;
  position: relative;
}
footer.footer-v2::before {
  content: "";
  position: absolute;
  top: -4px; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(90deg, #ff6d1f 0 24px, #ffb066 24px 28px);
  opacity: .9;
}

.footer-logo {
  color: #f2f3f4;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.footer-links a {
  color: #c7cbce;
  position: relative;
  padding-bottom: 2px;
}
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 2px;
  background: #ff6d1f;
  transition: right .2s ease;
}
.footer-links a:hover { color: #ffffff; }
.footer-links a:hover::after { right: 0; }

.footer-copy {
  color: #8b9096;
  letter-spacing: .03em;
}

/* --- Accessibilité : on coupe toute animation si demandé --- */
@media (prefers-reduced-motion: reduce) {
  aside.sidebar::after,
  .mobile-guest-top::after {
    animation: none;
  }
  .mobile-guest-cta-btn,
  .footer-links a::after {
    transition: none;
  }
}
/* __END_DESIGN_SITE__ */