/* simple-web styles — LIGHT THEME with bolder borders */
:root{
  /* Base palette */
  --bg:#f6f8fb;            /* app background */
  --card:#ffffff;           /* card background */
  --text:#0f172a;           /* primary text */
  --muted:#5f6b7a;          /* secondary text */
  --border:#cbd5e1;         /* default border */
  --border-strong:#94a3b8;  /* stronger, more visible border */
  --shadow:0 6px 24px rgba(15,23,42,.08);

  /* Accents */
  --acc:#0ea5a5;            /* green/teal for in-ACC */
  --near:#b45309;           /* amber for near */
  --pts:#6d28d9;            /* violet for points */
  --err:#b91c1c;            /* red for errors */
  --accent:#2563eb;         /* action buttons */
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif}
.container{max-width:1100px; margin:0 auto; padding:1rem}

/* Header with gradient */
.site-header{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%); color:#fff; padding:2rem 1rem; border-bottom:2px solid rgba(255,255,255,.2)}
.site-header h1{margin:0 0 .5rem 0; font-size:1.8rem; font-weight:700}
.site-header .lead{color:rgba(255,255,255,.95); margin:.75rem 0; font-size:1.05rem}
.site-header .lead strong{color:#fff}

/* Hero tagline */
.hero-tagline{font-size:1.25rem; margin:.25rem 0 1rem 0; background:rgba(255,255,255,.2); display:inline-block; padding:.25rem .75rem; border-radius:8px; font-weight:600}
.hero-tagline strong{color:#fbbf24}

/* Benefits Grid in header */
.benefits-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; margin:1.5rem 0 1rem 0}
.benefit-item{display:flex; gap:.75rem; align-items:flex-start; background:rgba(255,255,255,.15); padding:1rem; border-radius:12px; border:1.5px solid rgba(255,255,255,.25)}
.benefit-icon{font-size:1.75rem; line-height:1; flex-shrink:0}
.benefit-item strong{display:block; margin-bottom:.25rem; font-size:1.05rem}
.benefit-item p{margin:0; font-size:.92rem; opacity:.95}

/* Stats badge */
.stats-badge{display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.25); padding:.5rem 1rem; border-radius:999px; font-size:.9rem; margin-top:.5rem; border:1.5px solid rgba(255,255,255,.3)}

/* Privacy box */
.privacy-box{background:#fef3c7; border:1.5px solid #fbbf24; padding:.75rem; border-radius:12px; margin:.75rem 0; font-size:.92rem; color:#78350f}
.privacy-box strong{color:#713f12}

/* Cards */
.card{background:var(--card); border:2px solid var(--border-strong); border-radius:16px; padding:1rem; margin:1rem 0; box-shadow:var(--shadow); position:relative}

/* Form */
.form-row{display:flex; gap:.5rem}
.form-row .ac-wrap{position:relative; flex:1; min-width:0}
.form-row input{width:100%; background:#ffffff; border:1.5px solid var(--border-strong); color:var(--text); padding:.75rem .9rem; border-radius:12px; box-shadow:inset 0 1px 0 rgba(0,0,0,.02)}
.form-row input::placeholder{color:#9aa5b1}
.form-row button{background:var(--accent); color:white; border:0; padding:.75rem 1rem; border-radius:12px; cursor:pointer; font-weight:600; transition:all .2s}
.form-row button:hover{filter:brightness(.95); transform:translateY(-1px)}

.hint{color:var(--muted); font-size:.92rem; margin:.5rem 0}

/* Autocomplete dropdown */
.ac-list{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20; background:#fff; border:2px solid var(--border-strong); border-radius:12px; box-shadow:0 10px 28px rgba(15,23,42,.12); max-height:320px; overflow:auto}
.ac-item{padding:.55rem .7rem; border-bottom:1px dashed var(--border-strong); cursor:pointer; line-height:1.35}
.ac-item:last-child{border-bottom:0}
.ac-item:hover, .ac-item.active{background:#eef2ff}

/* Layout */
.grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:1rem}
.map{width:100%; height:380px; border-radius:12px; overflow:hidden; background:#eef2f7}

/* Status chips */
.status{font-weight:700; padding:.5rem .75rem; border-radius:999px; display:inline-block; background:#f8fafc; border:1.5px solid var(--border-strong)}
.status.ok{background:rgba(14,165,165,.10); color:#0f766e; border-color:rgba(14,165,165,.45)}
.status.warn{background:rgba(245,158,11,.10); color:#92400e; border-color:rgba(245,158,11,.45)}
.status.info{background:rgba(37,99,235,.10); color:#1d4ed8; border-color:rgba(37,99,235,.45)}
.status.none{color:var(--muted)}
.status.loading{background:rgba(59,130,246,.10); color:#2563eb; border-color:rgba(59,130,246,.45)}
.status.err{background:rgba(239,68,68,.10); color:#991b1b; border-color:rgba(239,68,68,.45)}

/* Content blocks */
.blk{margin-top:.75rem}
.ttl{font-weight:700; margin:.25rem 0 .5rem 0}

/* Badges */
.badge{padding:.25rem .55rem; border-radius:8px; font-size:.85rem; border:1.5px solid var(--border-strong); display:inline-block; font-weight:600}
.badge.in{background:rgba(14,165,165,.10); color:#0f766e; border-color:rgba(14,165,165,.45)}
.badge.near{background:rgba(245,158,11,.10); color:#92400e; border-color:rgba(245,158,11,.45)}
.badge.pts{background:rgba(109,40,217,.10); color:#5b21b6; border-color:rgba(109,40,217,.45)}
.badge.active{background:rgba(16,185,129,.10); color:#047857; border-color:rgba(16,185,129,.45)}
.badge.engaged{background:rgba(99,102,241,.10); color:#3730a3; border-color:rgba(99,102,241,.45)}

/* Status list with badges */
.status-list{list-style:none; padding:0; margin:1rem 0}
.status-list li{padding:.5rem 0; display:flex; gap:.5rem; align-items:center}

/* Info section */
.info-section{background:#f8fafc; border-left:4px solid var(--accent); padding:1rem; border-radius:8px; margin:1rem 0}
.info-section h4{margin:0 0 .5rem 0; color:var(--text)}
.info-section ul{margin:.5rem 0; padding-left:1.5rem}
.info-section li{margin:.25rem 0}

/* FAQ items with details/summary */
.faq-item{background:#f8fafc; border:1.5px solid var(--border-strong); border-radius:12px; padding:1rem; margin:.75rem 0; cursor:pointer}
.faq-item summary{font-weight:600; cursor:pointer; user-select:none; list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"▶ "; display:inline-block; transition:transform .2s; margin-right:.5rem}
.faq-item[open] summary::before{transform:rotate(90deg)}
.faq-item p{margin:.75rem 0 0 1.5rem; color:var(--muted)}
.faq-item:hover{background:#f1f5f9}

/* Chips */
.chip{display:inline-block; padding:.15rem .45rem; margin:.15rem .25rem .15rem 0; background:#f3f4f6; border:1.5px solid var(--border-strong); border-radius:999px}

/* Muted text */
.muted{color:var(--muted)}

/* Sample list */
.samples{list-style:none; padding:0; margin:.5rem 0}
.samples li{padding:.35rem 0; border-bottom:1.25px dashed var(--border-strong)}

/* Utilities */
.hidden{display:none !important}

/* Buttons */
.btn-primary{background:var(--accent); color:#fff; border:0; padding:.75rem 1rem; border-radius:12px; cursor:pointer; font-weight:600; transition:all .2s}
.btn-primary:hover{filter:brightness(.95); transform:translateY(-1px)}
.btn-primary[disabled]{opacity:.6; cursor:not-allowed}
.btn-ghost{background:#fff; border:2px solid var(--border-strong); color:var(--text); padding:.65rem 1rem; border-radius:12px; cursor:pointer; transition:all .2s}
.btn-ghost:hover{background:#f8fafc}

/* CTA block */
.cta-row{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.cta-text{color:var(--text)}

/* Interest form */
.interest-form{margin-top:.25rem}
.form-grid{display:grid; gap:.75rem}
.stack{display:flex; flex-direction:column; gap:.35rem}
.lbl{font-weight:700}
.cols-2{display:grid; gap:.75rem; grid-template-columns:1fr 1fr}
.radiogroup{display:flex; gap:1rem; flex-wrap:wrap}
.radiogroup label{display:flex; align-items:center; gap:.35rem; padding:.35rem .5rem; border:1.5px solid var(--border-strong); border-radius:999px; cursor:pointer; transition:all .2s}
.radiogroup label:hover{background:#f1f5f9}

/* ✅ Zone explicative de visibilité dynamique */
.visibility-explanation{
  background:#eef2ff;
  border-left:4px solid var(--accent);
  padding:.75rem;
  border-radius:8px;
  margin-top:.5rem;
  font-size:.92rem;
  line-height:1.5;
  color:var(--text);
  transition:all .3s ease;
}
.visibility-explanation strong{
  color:#1d4ed8;
  display:block;
  margin-bottom:.25rem;
}

.legal{font-size:.92rem; color:var(--muted); background:#f8fafc; border:1.5px solid var(--border-strong); border-radius:12px; padding:.65rem .75rem}
.form-actions{display:flex; gap:.5rem; align-items:center; margin-top:.5rem}
.success{background:#d1fae5; border:2px solid #10b981; border-radius:12px; padding:1rem; color:#047857}
.success h4{margin:0 0 .5rem 0; color:#065f46}

/* ✅ Champs du formulaire stylés (intégrés à la charte) */
.interest-form input[type="text"],
.interest-form input[type="email"],
.interest-form textarea{
  background:#ffffff;
  border:1.5px solid var(--border-strong);
  color:var(--text);
  padding:.75rem .9rem;
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
  transition:all .2s;
}
.interest-form input::placeholder,
.interest-form textarea::placeholder{color:#9aa5b1}
.interest-form input:focus,
.interest-form textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(37,99,235,.15);
}

/* ✅ Checkbox producteur : ligne compacte et accessible */
.checkline{display:flex; align-items:center; gap:.5rem; margin:.25rem 0}
.checkline input[type="checkbox"]{width:1.15rem; height:1.15rem; accent-color:var(--accent)}
.checkline span{font-weight:600}

/* Mobile overlay status on map (hidden on desktop) */
.status.mobile{
  display:none;
  position:absolute; top:.75rem; right:.75rem; left:auto; z-index:10;
  background:rgba(255,255,255,.95);
  border:2px solid var(--border-strong); border-radius:12px;
  box-shadow:0 10px 25px rgba(15,23,42,.10);
  padding:.55rem .75rem; line-height:1.35;
}
/* ✅ Lien “Voir les résultats” dans l’overlay mobile */
.status.mobile a{
  font-weight:700;
  text-decoration:underline;
}
.status.mobile .sep{
  margin:0 .5rem;
  opacity:.6;
}

/* Leaflet tweaks */
.leaflet-container{background:#eef2f7}
.leaflet-pane, .leaflet-top, .leaflet-bottom{z-index: 1}

/* ===== Responsive ===== */
@media (max-width: 760px){
  .site-header h1{font-size:1.4rem}
  .hero-tagline{font-size:1.1rem}
  .benefits-grid{grid-template-columns:1fr}
  .benefit-item{padding:.75rem}
  .grid{grid-template-columns: 1fr}
  .map{height: 64vh}
  .status.mobile{display:block; width:70%; max-width:70%}
  .results-card{margin-top:.5rem}
  .status{font-size:.95rem}
  .card .hint{font-size:.88rem}
  .cols-2{grid-template-columns:1fr}
  .cta-row{flex-direction:column; align-items:flex-start}
}