/* ========== Les Artisans du Grand Est — design system ========== */
:root{
  --terracotta:#C4622D; --terracotta-d:#A24E20; --ochre:#D98324;
  --forest:#4C8B4A; --ink:#2A2520; --paper:#FBF7F0; --card:#FFFFFF;
  --muted:#7A7065; --line:#EAE0D2; --line-strong:#D9CcB8;
  --shadow:0 1px 2px rgba(60,40,20,.05), 0 8px 24px rgba(60,40,20,.06);
  --shadow-lg:0 12px 40px rgba(60,40,20,.16);
  --radius:16px; --radius-sm:10px; --container:1180px;
  --bg:var(--paper); --fg:var(--ink); --accent:var(--terracotta);
  --field:#fff; --chip:#fff; --chip-line:var(--line-strong);
}
:root[data-theme="dark"]{
  --ink:#ECE3D6; --paper:#1B1714; --card:#262019; --muted:#A99E8E;
  --line:#3A3127; --line-strong:#4A3F31; --card:#241E18;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 16px 48px rgba(0,0,0,.5);
  --bg:var(--paper); --fg:var(--ink); --terracotta:#E0824A; --accent:#E0824A;
  --field:#1f1a15; --chip:#2b241d; --chip-line:#473b2d;
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* l'attribut hidden prime sur tout display: de classe */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 1px 1px, rgba(140,110,70,.05) 1px, transparent 0);
  background-size:22px 22px;
}
h1,h2,h3{font-family:Fraunces,Georgia,serif; line-height:1.1; margin:0}
a{color:inherit}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:var(--container); margin:0 auto; padding:0 18px}

/* ---------- Topbar ---------- */
.topbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 18px; background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-mark{font-size:24px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
.brand-txt{display:flex; flex-direction:column; line-height:1.05}
.brand-txt strong{font-family:Fraunces; font-weight:900; font-size:17px; letter-spacing:.2px}
.brand-txt em{font-style:normal; font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--accent); font-weight:600}
.topbar-actions{display:flex; align-items:center; gap:6px}
.btn-ghost{background:transparent; border:1px solid transparent; color:var(--fg); font:inherit; font-size:13px;
  font-weight:600; padding:8px 12px; border-radius:99px; cursor:pointer}
.btn-ghost:hover{background:var(--card); border-color:var(--line)}
#viewToggle .vt-map{display:none}
#viewToggle.is-map .vt-list{display:none}
#viewToggle.is-map .vt-map{display:inline}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:54px 18px 30px;
  background:
    radial-gradient(120% 90% at 88% -10%, color-mix(in srgb,var(--ochre) 30%, transparent), transparent 60%),
    radial-gradient(90% 80% at 0% 0%, color-mix(in srgb,var(--terracotta) 22%, transparent), transparent 55%);
  border-bottom:1px solid var(--line)}
.hero-inner{max-width:var(--container); margin:0 auto}
.hero h1{font-size:clamp(30px,5vw,52px); font-weight:900; letter-spacing:-.5px}
.hero h1 .hl{color:var(--accent); position:relative; white-space:nowrap}
.hero-sub{font-size:clamp(15px,2vw,19px); color:var(--muted); margin:.5em 0 1.3em; max-width:46ch}
.searchbox{display:flex; align-items:center; gap:8px; background:var(--card); border:1.5px solid var(--line-strong);
  border-radius:99px; padding:7px 7px 7px 16px; box-shadow:var(--shadow); max-width:640px}
.searchbox:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%, transparent)}
.searchbox-ico{font-size:18px; opacity:.7}
.searchbox input{flex:1; border:0; background:transparent; color:var(--fg); font:inherit; font-size:16px; outline:none; min-width:0}
.btn-primary{background:var(--accent); color:#fff; border:0; font:inherit; font-weight:700; font-size:15px;
  padding:11px 20px; border-radius:99px; cursor:pointer; white-space:nowrap; transition:transform .06s, background .15s}
.btn-primary:hover{background:var(--terracotta-d)} .btn-primary:active{transform:translateY(1px)}
.hero-stats{display:flex; align-items:center; gap:10px; margin-top:16px; font-size:14px; color:var(--muted); flex-wrap:wrap}
.hero-stats strong{color:var(--fg)} .hero-stats .dot{opacity:.5}
.hero-cats{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.hero-cat{display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--line-strong);
  padding:7px 13px; border-radius:99px; font-size:13.5px; font-weight:600; cursor:pointer; box-shadow:var(--shadow)}
.hero-cat:hover{border-color:var(--accent); transform:translateY(-1px)}

/* ---------- Layout ---------- */
.layout{display:grid; grid-template-columns:268px 1fr; gap:26px; padding:26px 0 10px; align-items:start}
@media(max-width:880px){ .layout{grid-template-columns:1fr; gap:14px} }

/* ---------- Filtres ---------- */
.filters{position:sticky; top:64px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow)}
@media(max-width:880px){
  .filters{
    position:fixed; top:0; left:0; bottom:0; width:88%; max-width:360px; margin:0;
    border-radius:0 20px 20px 0; z-index:70; transform:translateX(-102%);
    transition:transform .26s cubic-bezier(.4,0,.2,1); overflow-y:auto;
    box-shadow:var(--shadow-lg); -webkit-overflow-scrolling:touch; padding-bottom:24px;
  }
  .filters.open{transform:translateX(0)}
}
.filters-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.filters-head h2{font-size:17px}
.btn-link{background:none;border:0;color:var(--accent);font:inherit;font-weight:600;font-size:13px;cursor:pointer;padding:0}
.filter-group{margin-top:14px}
.filter-group>label,.fg-label{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:7px}
select,input,textarea{font:inherit}
.filter-group select{width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--field); color:var(--fg); cursor:pointer}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--chip); border:1px solid var(--chip-line);
  padding:7px 11px; border-radius:99px; font-size:13px; font-weight:600; cursor:pointer; transition:.12s}
.chip:hover{border-color:var(--accent)}
.chip.is-active{background:var(--accent); border-color:var(--accent); color:#fff}
.chip .n{font-size:11px; opacity:.7; font-weight:600}
.chip.is-active .n{opacity:.85}
.chips-sm .chip{padding:5px 9px; font-size:12px}

/* ---------- Results bar ---------- */
.results-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.results-count{margin:0; font-weight:600} .results-count strong{color:var(--accent)}
.results-tools select{padding:9px 12px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--field); color:var(--fg); cursor:pointer}
.active-filters{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; min-height:0}
.tagf{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--accent) 12%,var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));color:var(--fg);
  padding:5px 8px 5px 11px;border-radius:99px;font-size:12.5px;font-weight:600}
.tagf button{background:none;border:0;color:inherit;cursor:pointer;font-size:14px;line-height:1;opacity:.7;padding:0}
.tagf button:hover{opacity:1}

/* ---------- Cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 16px 14px; box-shadow:var(--shadow); cursor:pointer; transition:transform .1s, box-shadow .15s, border-color .15s;
  display:flex; flex-direction:column; border-top:3px solid var(--cc,var(--accent))}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)}
.card.is-featured{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 40%,transparent), var(--shadow)}
.card-top{display:flex; align-items:flex-start; gap:10px; margin-bottom:8px}
.card-emoji{font-size:22px; line-height:1; background:color-mix(in srgb,var(--cc,var(--accent)) 14%,var(--card));
  width:42px;height:42px;display:grid;place-items:center;border-radius:12px; flex:none}
.card-h{flex:1; min-width:0}
.card-name{font-family:Fraunces; font-weight:600; font-size:18px; letter-spacing:-.2px; margin:0}
.card-metier{font-size:13px; color:var(--cc,var(--accent)); font-weight:700; margin-top:1px}
.card-badges{display:flex; gap:5px; flex-wrap:wrap; margin:8px 0}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;
  background:color-mix(in srgb,var(--muted) 14%,transparent); color:var(--muted); white-space:nowrap}
.badge.ok{background:color-mix(in srgb,var(--forest) 18%,transparent); color:var(--forest)}
.badge.rm{background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent)}
.card-loc{font-size:13.5px; color:var(--muted); margin:2px 0 0; display:flex; gap:5px; align-items:baseline}
.card-loc b{color:var(--fg); font-weight:600}
.card-actions{display:flex; gap:7px; flex-wrap:wrap; margin-top:auto; padding-top:12px}
.act{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; text-decoration:none;
  padding:7px 11px; border-radius:99px; border:1px solid var(--line-strong); color:var(--fg); background:var(--field)}
.act:hover{border-color:var(--accent); color:var(--accent)}
.act.solid{background:var(--accent); border-color:var(--accent); color:#fff}
.act.solid:hover{background:var(--terracotta-d); color:#fff}

/* ---------- Pager ---------- */
.pager{display:flex; justify-content:center; gap:8px; margin:24px 0 8px; flex-wrap:wrap}
.pager button{background:var(--card); border:1px solid var(--line-strong); color:var(--fg); font:inherit; font-weight:600;
  padding:9px 16px; border-radius:99px; cursor:pointer}
.pager button:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.pager button:disabled{opacity:.45; cursor:default}
.pager .more{padding:11px 26px}

/* ---------- Map ---------- */
.map-wrap{height:min(72vh,640px); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); position:relative; z-index:0; isolation:isolate}
#map{height:100%}
.leaflet-popup-content{font-family:Inter,sans-serif}
.mappin{font-size:13px}.mappin b{font-family:Fraunces}

/* ---------- Empty ---------- */
.empty{text-align:center; padding:48px 16px; background:var(--card); border:1px dashed var(--line-strong); border-radius:var(--radius)}
.empty p{margin:.3em 0} .empty p:first-child{font-size:20px; font-weight:600; font-family:Fraunces}

/* ---------- CTA ---------- */
.cta{margin:34px 0 10px; background:linear-gradient(120deg, color-mix(in srgb,var(--terracotta) 16%,var(--card)), color-mix(in srgb,var(--ochre) 14%,var(--card)));
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:26px}
.cta-inner{max-width:640px} .cta h2{font-size:23px; margin-bottom:6px} .cta p{color:var(--fg); margin:.4em 0 1em}

/* ---------- Footer ---------- */
.footer{max-width:var(--container); margin:30px auto 40px; padding:22px 18px 0; border-top:1px solid var(--line); font-size:13.5px}
.footer a{color:var(--accent); font-weight:600; text-decoration:none}
.footer a:hover{text-decoration:underline}

/* ---------- Modales ---------- */
.modal{position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:16px}
.modal-backdrop{position:absolute; inset:0; background:rgba(30,20,10,.5); backdrop-filter:blur(3px)}
.modal-card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); max-width:560px; width:100%; max-height:88vh; overflow:auto; padding:22px}
.modal-close{position:absolute; top:12px; right:12px; background:var(--field); border:1px solid var(--line); color:var(--fg);
  width:34px;height:34px;border-radius:99px;cursor:pointer;font-size:14px}
.modal-form label{display:block; font-size:13px; font-weight:600; margin-top:11px}
.modal-form input,.modal-form select,.modal-form textarea{width:100%; margin-top:5px; padding:10px 12px;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--field); color:var(--fg)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
@media(max-width:480px){.grid2{grid-template-columns:1fr}}
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px; align-items:center}
.form-msg{font-size:13px; margin-top:8px; min-height:1em}
.form-msg.ok{color:var(--forest)} .form-msg.err{color:#c0392b}

/* ---------- Detail content ---------- */
.dt-head{display:flex; gap:13px; align-items:flex-start; padding-right:30px}
.dt-emoji{font-size:30px; background:color-mix(in srgb,var(--cc,var(--accent)) 14%,var(--card)); width:60px;height:60px;
  display:grid;place-items:center;border-radius:16px; flex:none}
.dt-name{font-family:Fraunces; font-weight:600; font-size:24px; line-height:1.1}
.dt-metier{color:var(--cc,var(--accent)); font-weight:700; font-size:14px}
.dt-section{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.dt-row{display:flex; gap:9px; font-size:14.5px; margin:7px 0; align-items:baseline}
.dt-row .k{color:var(--muted); min-width:96px; flex:none; font-size:13px}
.dt-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.dt-note{font-size:12px; color:var(--muted); margin-top:14px}
.dt-foot{display:flex; justify-content:space-between; align-items:center; margin-top:18px; gap:10px; flex-wrap:wrap}

/* ---------- Toast ---------- */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--paper);
  padding:12px 20px; border-radius:99px; font-weight:600; font-size:14px; box-shadow:var(--shadow-lg); z-index:1200}
:root[data-theme="dark"] .toast{background:var(--accent); color:#fff}

/* ---------- Skeleton ---------- */
.skel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); height:168px;
  position:relative; overflow:hidden}
.skel::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--muted) 10%,transparent), transparent);
  animation:sh 1.2s infinite}
@keyframes sh{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ================= Ergonomie v2 (mobile drawer, webapp, polish) ================= */

/* Contrôles du tiroir : masqués par défaut (desktop) */
.filters-toggle,.filters-close,.filters-done{display:none}
.filters-backdrop{display:none}
.filters-head .fh-actions{display:flex; align-items:center; gap:10px}

/* Selects plus nets (flèche custom) + meilleures cibles tactiles */
.filter-group select,.results-tools select{
  min-height:44px; -webkit-appearance:none; appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A7065' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.chip{min-height:36px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Polish desktop : un peu plus d'air, barre résultats soulignée */
.results-bar{border-bottom:1px solid var(--line); padding-bottom:12px}
@media(min-width:881px){
  .layout{gap:30px}
  .hero{padding:60px 18px 34px}
  .cards{gap:16px}
}

/* iOS : inputs >=16px pour éviter le zoom auto au focus */
input,select,textarea{font-size:16px}

/* ===================== MOBILE (<=880px) ===================== */
@media(max-width:880px){
  .wrap{padding:0 14px}
  main.wrap{padding-bottom:92px}
  .layout{padding-top:14px; gap:0}

  /* Bouton flottant central "Filtres" */
  .filters-toggle{
    display:inline-flex; align-items:center; gap:8px; position:fixed;
    left:50%; bottom:18px; transform:translateX(-50%); z-index:55;
    background:var(--accent); color:#fff; border:0; font:inherit; font-weight:700; font-size:15px;
    padding:13px 22px; border-radius:99px; box-shadow:var(--shadow-lg); cursor:pointer;
  }
  .filters-toggle .fcount{
    background:#fff; color:var(--accent); font-weight:800; font-size:12px;
    min-width:20px; height:20px; padding:0 5px; border-radius:99px; display:inline-grid; place-items:center;
  }
  .filters-close{
    display:inline-grid; place-items:center; width:34px; height:34px; border-radius:99px;
    border:1px solid var(--line-strong); background:var(--field); color:var(--fg); cursor:pointer; font-size:14px;
  }
  .filters-done{display:block; width:100%; margin-top:18px; position:sticky; bottom:0}
  .filters-backdrop:not([hidden]){
    display:block; position:fixed; inset:0; z-index:68; background:rgba(30,20,10,.5); backdrop-filter:blur(2px);
  }

  /* Topbar compacte */
  .topbar{padding:8px 12px}
  .topbar-actions .btn-ghost[href="#artisan-cta"]{display:none}
  .brand-txt strong{font-size:15px}
  .btn-ghost{padding:8px 10px; font-size:12.5px}

  /* Hero compact */
  .hero{padding:26px 14px 20px}
  .hero h1{font-size:clamp(25px,7.4vw,33px)}
  .hero-sub{font-size:14.5px; margin:.4em 0 .9em; max-width:none}
  .searchbox{max-width:none; padding:6px 6px 6px 14px}
  .btn-primary{padding:11px 16px}
  .hero-stats{font-size:13px; margin-top:12px}
  .hero-cats{margin-top:14px}

  /* Résultats / cartes */
  .results-bar{padding:2px 0 12px}
  .results-count{font-size:15px}
  .cards{grid-template-columns:1fr; gap:12px}
  .card{padding:15px}
  .pager{margin:18px 0 8px}

  /* Modales = feuille basse (bottom sheet) */
  .modal{padding:0; place-items:end stretch}
  .modal-card{max-width:none; width:100%; border-radius:20px 20px 0 0; max-height:92vh; padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
  .grid2{grid-template-columns:1fr}
}

/* ===================== PWA (mode standalone) ===================== */
@media (display-mode:standalone){
  .topbar{padding-top:max(10px, env(safe-area-inset-top))}
  body{min-height:100svh}
}