/* Clean.Brussels — charte alignée sur le site officiel clean.brussels :
   texte violet sur blanc, titres Albert Sans 800, hover rose, action vert menthe. */
:root {
  --brand: #5325d1;        /* violet — couleur du texte ET de la marque */
  --brand-dark: #3f1ba3;
  --lavender: #f2f2ff;
  --lavender-2: #d8d8ff;
  --pink: #ff438f;
  --green: #03cb8e;        /* bouton d'action officiel */
  --green-dark: #02a875;
  --mint: #c3ffe6;
  --yellow: #ffbf19;
  --ink: #5325d1;
  --muted: #8078c8;
  --bg: #ffffff;
  --card: #ffffff;
  --line: #e4e1f5;
  --red: #d3306a;
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
a { color: inherit; text-decoration: none; transition: color 0.12s; }
a:hover { color: var(--pink); }
main a { text-decoration: underline; text-underline-offset: 3px; }
main a:hover { color: var(--pink); }
h1, h2, h3 { font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Header */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1100; padding-top: env(safe-area-inset-top, 0); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; min-height: 64px; flex-wrap: wrap; padding: 8px 16px; }
.header-inner .main-nav { margin-left: auto; }
.nav-sub { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 16px; }
.nav-sub a { color: var(--brand); font-weight: 600; font-size: 0.95rem; }
.nav-sub a:hover, .nav-sub a.active { color: var(--pink); }
.nav-sub a.nav-admin-link { background: var(--brand); color: #fff; padding: 5px 13px; border-radius: 99px; font-weight: 700; }
.nav-sub a.nav-admin-link:hover { background: var(--brand-dark); color: #fff; }
.admin-topbar .nav-sub { display: none; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--brand); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; text-transform: lowercase; }
.brand:hover { color: var(--brand); }
.brand em { color: var(--pink); font-style: normal; }
.brand img { display: block; }
.brand .logo-stack { display: none; }   /* PC : logo une ligne */
.main-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.main-nav a { color: var(--brand); font-weight: 600; font-size: 0.95rem; }
.main-nav a:hover, .main-nav a.active { color: var(--pink); }

/* Sélecteur de langue — comme clean.brussels : boîte lavande, dropdown au survol */
.lang-switch { position: relative; width: 52px; text-align: center; background: var(--lavender); padding: 13px 0; cursor: pointer; margin-left: 6px; }
.lang-switch .cur { font-weight: 800; color: var(--brand); font-size: 0.95rem; display: block; line-height: 1; }
.lang-switch .others { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: var(--lavender); padding-bottom: 13px; z-index: 60; }
.lang-switch:hover .others, .lang-switch:focus-within .others { display: block; }
.lang-switch .others a { display: block; padding-top: 14px; color: var(--brand); font-weight: 400; font-size: 0.95rem; line-height: 1; }
.lang-switch .others a:hover { color: var(--pink); }

/* Boutons */
.btn { display: inline-block; border: 0; cursor: pointer; text-decoration: none !important; text-align: center;
  background: var(--brand); color: #fff !important; font-weight: 800; font-size: 1rem; font-family: inherit;
  padding: 13px 28px; border-radius: 99px; transition: background 0.15s, transform 0.1s; }
.btn:hover { background: var(--pink); color: #fff; }
.btn:active { transform: scale(0.98); }
.btn-cta { background: var(--green); }
.btn-cta:hover { background: var(--pink); }
.btn-sm { padding: 8px 18px; font-size: 0.9rem; }
.btn-outline { background: transparent; color: var(--brand) !important; border: 2px solid var(--brand); }
.btn-outline:hover { background: transparent; color: var(--pink) !important; border-color: var(--pink); }
.btn-danger { background: var(--red); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Hero — diaporama photos avec voile violet */
.hero { padding: 60px 0 44px; text-align: center; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3.2rem); margin: 0 auto 20px; max-width: 760px; color: var(--brand); }
.hero p { max-width: 640px; margin: 0 auto 30px; color: var(--brand); font-weight: 400; font-size: 1.08rem; }

.hero-slider { position: relative; overflow: hidden; padding: 84px 20px 64px; border-radius: 0 0 26px 26px; }
.hero-bg, .hero-slide { position: absolute; inset: 0; }
.hero-slide { background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; }
.hero-slide.on { opacity: 1; }
.hero-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(63,27,163,0.88) 0%, rgba(83,37,209,0.78) 55%, rgba(83,37,209,0.62) 100%); }
.hero-slider .hero-content { position: relative; z-index: 2; }
.hero-slider h1 { color: #ffffff; text-shadow: 0 2px 18px rgba(36,18,90,0.35); }
.hero-slider p { color: #e9e4ff; }
.hero-dots { position: relative; z-index: 2; display: flex; gap: 9px; justify-content: center; margin-top: 34px; }
.hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.45); transition: background 0.2s, transform 0.2s; }
.hero-dots button.on { background: #ffffff; transform: scale(1.25); }
.hero-dots button:hover { background: var(--pink); }

/* Cartes & grilles */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 26px 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--brand); }
.card.legal h3 { margin-top: 26px; }
.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.step-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; background: var(--lavender); }
.grid-3 .card:nth-child(2) .step-icon { background: #ffe3ef; }
.grid-3 .card:nth-child(3) .step-icon { background: var(--mint); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 30px 0 50px; }
.stat { background: var(--lavender); border-radius: var(--radius); padding: 20px; text-align: center; }
.stat .n { font-size: 2.1rem; font-weight: 800; color: var(--brand); }
.stat .l { color: var(--muted); font-size: 0.85rem; }

/* Formulaires */
.form-card { max-width: 460px; margin: 40px auto; }
form .field { margin-bottom: 16px; }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; color: var(--brand); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=tel], select, textarea {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--lavender-2); border-radius: 9px;
  font: inherit; background: #fff; color: var(--brand); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
textarea { min-height: 110px; resize: vertical; }
input[type=date] { min-width: 150px; cursor: pointer; }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; filter: invert(18%) sepia(84%) saturate(3000%) hue-rotate(255deg); }
input[type=date]:hover { border-color: var(--brand); }
/* Bloc « entre deux dates » du dashboard */
.date-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; background: var(--lavender); border-radius: 12px; padding: 12px 14px; }
.date-range .df { display: flex; flex-direction: column; }
.date-range .df label { margin-bottom: 4px; }
.date-range .arrow { align-self: center; color: var(--muted); font-weight: 700; padding-bottom: 10px; }

/* Selects : apparence personnalisée + chevron violet */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 40px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235325d1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
}
select:hover { border-color: var(--brand); }
select:focus { box-shadow: 0 0 0 3px rgba(83, 37, 209, .15); }
select::-ms-expand { display: none; }
option { color: var(--brand-dark); }
.hint { color: var(--muted); font-size: 0.85rem; margin-top: 5px; }
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 0.95rem; }
.alert-error { background: #ffe9f1; color: var(--red); border: 1px solid #ffc3da; }
.alert-success { background: var(--mint); color: #067a57; border: 1px solid #8fe9c8; }
.alert-warn { background: #fff5d6; color: #8a6d00; border: 1px solid #f0df9b; }

/* Flux de signalement */
.report-step { margin-bottom: 26px; }
.report-step h2 { font-size: 1.15rem; margin: 0 0 12px; color: var(--brand); }
#map { height: 380px; border-radius: var(--radius); border: 1px solid var(--line); z-index: 1; }
.photo-drop { border: 2px dashed var(--lavender-2); border-radius: var(--radius); background: var(--lavender);
  padding: 34px 20px; text-align: center; cursor: pointer; transition: border-color 0.15s; }
.photo-drop:hover { border-color: var(--pink); }
.photo-drop img { max-width: 100%; max-height: 300px; border-radius: 10px; }
.photo-btns .btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; filter: grayscale(0.4); }
.photo-btns .btn:disabled:hover { transform: none; }
.geo-note { margin-top: 10px; }

/* Tableaux */
table.list { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
table.list th, table.list td { padding: 11px 14px; text-align: left; font-size: 0.93rem; }
table.list th { background: var(--lavender); color: var(--brand); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
table.list tr + tr td { border-top: 1px solid var(--line); }
table.list tr:hover td { background: #fbfaff; }
table.list a { text-decoration: underline; text-underline-offset: 3px; }
/* Conteneur à défilement horizontal invisible (la table slide, la page ne bouge pas) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.table-wrap::-webkit-scrollbar { display: none; }
/* Table responsive → cartes empilées en mobile */
@media (max-width: 600px) {
  .table-wrap { overflow-x: visible; }
  .responsive-list { border: 0; background: transparent; }
  .responsive-list thead { display: none; }
  .responsive-list, .responsive-list tbody, .responsive-list tr, .responsive-list td { display: block; width: 100%; }
  .responsive-list tr { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; background: #fff; box-shadow: 0 1px 5px rgba(36,28,61,.06); }
  .responsive-list tr + tr td { border-top: 0; }
  .responsive-list td { border: 0 !important; padding: 7px 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: right; }
  .responsive-list td + td { border-top: 1px solid var(--line) !important; }
  .responsive-list td::before { content: attr(data-label); font-weight: 700; color: var(--brand); text-transform: uppercase; font-size: 0.72rem; letter-spacing: .03em; text-align: left; flex: 0 0 auto; }
  .responsive-list td:last-child { justify-content: flex-end; padding-top: 10px; }
  .responsive-list td:last-child::before { content: none; }
}

/* Badges */
.badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.b-pending { background: #fff1c7; color: #7a5d00; }
.b-progress { background: var(--lavender-2); color: var(--brand-dark); }
.b-resolved { background: var(--mint); color: #067a57; }
.b-rejected { background: #eeeeee; color: #666; }
.b-revisit { background: #ffe1ee; color: #c1185b; }
.b-archived { background: #e4e2ec; color: #5a5470; }
.b-inspected { background: #ece3f9; color: #7e57c2; }   /* lieu inspecté (passage GPS de l'agent) */

/* ---------- Navigation admin : menu burger (toutes tailles d'écran) ---------- */
.main-nav a { display: inline-flex; align-items: center; }
.main-nav a .nav-ico { margin-right: 8px; opacity: .9; flex: 0 0 auto; }
.btn svg { vertical-align: -3px; }
.admin-topbar .header-inner { position: relative; }
.nav-burger { display: inline-flex; align-items: center; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; margin-left: auto; }
.admin-topbar .main-nav {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  flex-direction: column; align-items: stretch; gap: 2px;
  background: var(--brand-dark); padding: 8px; min-width: 244px;
  border-radius: 12px; box-shadow: 0 14px 34px rgba(36, 28, 61, .4); z-index: 1200;
}
.admin-topbar .main-nav.open { display: flex; }
.admin-topbar .main-nav a { padding: 10px 12px; border-radius: 8px; color: #fff; }
.admin-topbar .main-nav a:hover, .admin-topbar .main-nav a.active { background: rgba(255, 255, 255, .16); color: #fff; }
.admin-topbar .lang-switch { margin-top: 6px; }
@media (max-width: 560px) { .admin-topbar .main-nav { right: -8px; min-width: min(244px, 88vw); } }

/* ---- Sidebar latérale admin (PC uniquement ≥1024px) ; le burger reste présent ---- */
.admin-shell { display: block; }
/* Respiration en bas de TOUTES les pages admin : le contenu ne colle plus jamais au bord de la fenêtre
   (dernière ligne de table, boutons… inaccessibles sur Mac quand le Dock surgit). */
.admin-shell main.container { padding-bottom: 100px; }
.admin-side { display: none; }
@media (min-width: 1024px) {
  .admin-shell { display: flex; align-items: flex-start; gap: 0; }
  .admin-side {
    display: block; flex: 0 0 236px; width: 236px;
    position: sticky; top: 59px; align-self: flex-start;
    height: calc(100vh - 59px); overflow-y: auto;
    background: #fff; border-right: 1px solid var(--line);
    padding: 16px 10px 28px;
  }
  .admin-shell > main.container { flex: 1 1 auto; min-width: 0; }
}
.side-link, .side-grp-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; margin: 1px 0; border-radius: 10px;
  color: var(--brand); font-weight: 700; font-size: 0.92rem;
  background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit;
}
.side-link:hover, .side-grp-btn:hover { background: var(--lavender); }
.side-link.active { background: var(--brand); color: #fff; }
.side-link .nav-ico, .side-grp-btn .nav-ico { flex: 0 0 auto; opacity: .9; }
.side-grp { margin-top: 1px; }
.side-grp-btn .side-caret { margin-left: auto; flex: 0 0 auto; transition: transform .18s; }
.side-grp.open > .side-grp-btn .side-caret { transform: rotate(90deg); }
.side-grp.open > .side-grp-btn { color: var(--brand-dark); }
.side-grp-items { display: none; padding: 2px 0 6px; margin: 0 0 4px 22px; border-left: 2px solid var(--lavender-2); }
.side-grp.open > .side-grp-items { display: block; }
.side-grp-items a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px 8px 12px; border-radius: 8px;
  color: var(--brand-dark); font-weight: 600; font-size: 0.88rem;
}
.side-grp-items a:hover { background: var(--lavender); }
.side-grp-items a.active { background: var(--brand); color: #fff; }
.side-grp-items .nav-ico { flex: 0 0 auto; opacity: .85; }
.side-scope { font-weight: 800; color: var(--brand); font-size: .9rem; padding: 2px 12px 12px; margin-bottom: 8px; border-bottom: 2px solid var(--lavender-2); text-decoration: underline; text-underline-offset: 3px; }

/* Barre admin : logo agrandi à gauche, burger agrandi à droite, header pleine largeur */
.admin-topbar .header-inner { max-width: none; margin: 0; padding: 6px 18px; gap: 12px; justify-content: space-between; }
.admin-topbar .nav-burger { margin-left: auto; padding: 6px 8px; }
.admin-topbar .nav-burger .nav-ico { width: 30px; height: 30px; }
.admin-topbar .brand .logo-row { height: 40px; }
.admin-topbar .main-nav { right: 18px; left: auto; }
.side-quit { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); }
.admin-topbar .main-nav .nav-scope { color: #fff; font-weight: 800; font-size: .9rem; padding: 6px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.22); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .admin-topbar .main-nav .nav-scope { display: none; } }

/* Groupes déroulants (accordéon) dans le menu burger — mêmes groupes que la sidebar */
.admin-topbar .main-nav .mn-grp { display: block; }
.admin-topbar .main-nav .mn-grp-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; background: none; color: #fff; font: inherit; font-weight: 600; font-size: 0.93rem; cursor: pointer; text-align: left; border-radius: 8px; }
.admin-topbar .main-nav .mn-grp-btn:hover { background: rgba(255, 255, 255, .16); }
.admin-topbar .main-nav .mn-grp-btn .nav-ico { flex: 0 0 auto; }
.admin-topbar .main-nav .mn-grp-btn .side-caret { margin-left: auto; flex: 0 0 auto; transition: transform .18s; }
.admin-topbar .main-nav .mn-grp.open > .mn-grp-btn .side-caret { transform: rotate(90deg); }
.admin-topbar .main-nav .mn-grp-items { display: none; margin: 2px 0 4px 20px; padding-left: 8px; border-left: 2px solid rgba(255, 255, 255, .22); }
.admin-topbar .main-nav .mn-grp.open > .mn-grp-items { display: block; }
.admin-topbar .main-nav .mn-grp-items a { font-weight: 400; font-size: 0.9rem; }

/* Détail signalement */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-grid img.photo { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.kv { margin: 0; }
.kv dt { color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 14px; }
.kv dd { margin: 2px 0 0; font-weight: 600; }
.history-item { border-left: 3px solid var(--lavender-2); padding: 4px 0 4px 14px; margin: 10px 0; font-size: 0.92rem; }
.history-item .when { color: var(--muted); font-size: 0.8rem; }

/* Admin */
.admin-topbar { background: var(--brand); color: #fff; }
.admin-topbar .header-inner { height: auto; min-height: 58px; flex-wrap: wrap; padding: 8px 0; }
.admin-topbar .brand { font-size: 1rem; }
.admin-topbar .main-nav { gap: 14px; }
.admin-topbar .lang-switch { padding: 8px 0; width: 44px; }
.admin-topbar a, .admin-topbar .brand { color: #fff; font-weight: 600; font-size: 0.93rem; }
.admin-topbar .brand em { color: var(--pink); }
.admin-topbar a:hover { color: var(--mint); }
.admin-topbar a.active { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--pink); }
.admin-topbar .lang-switch { background: rgba(255,255,255,0.12); }
.admin-topbar .lang-switch .cur, .admin-topbar .lang-switch .others a { color: #fff; }
.admin-topbar .lang-switch .others { background: var(--brand); }
.admin-filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; align-items: end; }
.admin-filters .field { margin: 0; flex: 1 1 150px; }
.admin-filters .field.date-range { flex: 1 1 100%; }
.admin-filters select { min-width: 0; width: 100%; }
#adminMap { height: 420px; border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 10px; z-index: 1; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: -8px 0 20px; font-size: 0.85rem; color: var(--muted); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.cat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: 0; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.pred-carousel-wrap { display: flex; align-items: stretch; gap: 6px; margin-top: 12px; }
.pred-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px; flex: 1; scrollbar-width: thin; }
.pred-carousel::-webkit-scrollbar { height: 6px; }
.pred-carousel::-webkit-scrollbar-thumb { background: var(--lavender-2); border-radius: 4px; }
.pred-slide { flex: 0 0 260px; scroll-snap-align: start; text-align: left; background: var(--lavender); border: 0; border-radius: 10px; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--brand); transition: transform .12s, box-shadow .12s; }
.pred-slide:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(83, 37, 209, .15); }
.pred-slide strong { color: var(--brand-dark); }
.pred-nav { flex: 0 0 auto; border: 1.5px solid var(--lavender-2); background: #fff; color: var(--brand); border-radius: 8px; width: 34px; cursor: pointer; font-size: 1.3rem; font-weight: 700; line-height: 1; }
.pred-nav:hover { background: var(--lavender); }
@media (max-width: 560px) { .pred-slide { flex-basis: 78vw; } .pred-nav { display: none; } }
.map-toggle { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; align-items: center; }
.map-toggle #planBtn { background: var(--brand); color: #fff; border-color: var(--brand); margin-left: auto; }
.map-toggle #planBtn svg { vertical-align: -3px; }
.map-toggle button { border: 2px solid var(--brand); background: #fff; color: var(--brand); font: inherit; font-weight: 700; font-size: 0.85rem; padding: 6px 16px; border-radius: 99px; cursor: pointer; }
.map-toggle button.on { background: var(--brand); color: #fff; }
.page-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 26px 0 16px; }
.page-title h1 { margin: 0; font-size: 1.6rem; color: var(--brand); }
.bar { background: var(--lavender); border-radius: 6px; height: 10px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--pink)); }
.muted { color: var(--muted); }
.mt { margin-top: 22px; }
.mb { margin-bottom: 22px; }
.ai-output { background: var(--lavender); border-radius: var(--radius); padding: 24px; line-height: 1.65; }
.ai-output h2, .ai-output h3 { margin: 18px 0 8px; }
.ai-output ul { margin: 8px 0; }

/* Onglets par statut (dashboard admin) */
.status-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 0; border-bottom: 2px solid var(--lavender-2); }
.status-tabs button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 0.92rem;
  color: var(--muted); padding: 10px 16px; cursor: pointer; border-radius: 10px 10px 0 0; position: relative; }
.status-tabs button:hover { color: var(--pink); }
.status-tabs button.on { color: var(--brand); background: var(--lavender); }
.status-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--pink); border-radius: 2px; }
.status-tabs .cnt { display: inline-block; background: var(--lavender-2); color: var(--brand-dark); border-radius: 99px;
  font-size: 0.75rem; padding: 1px 8px; margin-left: 4px; }
.status-tabs button.on .cnt { background: var(--brand); color: #fff; }

/* ============ Dashboard premium ============ */
/* Cartes de statistiques relevées */
.stats { gap: 16px; margin: 26px 0 30px; }
.stat { background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 12px rgba(36,28,61,.05); transition: transform .16s ease, box-shadow .16s ease; }
.stat:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(36,28,61,.11); }
.stat .n { font-size: 2.35rem; letter-spacing: -0.025em; line-height: 1.05; }
.stat .l { text-transform: uppercase; letter-spacing: .045em; font-size: .72rem; font-weight: 700; margin-top: 5px; }

/* Barre de filtres = panneau premium */
.admin-filters { background: linear-gradient(135deg, var(--lavender) 0%, #ffffff 70%); border: 1px solid var(--line); border-radius: 16px; padding: 15px 18px; box-shadow: 0 3px 14px rgba(36,28,61,.05); gap: 16px; align-items: end; }
.admin-filters .field label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: var(--brand); margin-bottom: 6px; display: block; }
.admin-filters select, .admin-filters input[type="date"] { border: 1.5px solid var(--line); border-radius: 11px; padding: 10px 12px; background: #fff; font-weight: 600; color: var(--brand-dark); font-size: .92rem; transition: border-color .14s, box-shadow .14s; }
.admin-filters select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235325d1' stroke-width='2' stroke-linecap='round'><path d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px; cursor: pointer; }
.admin-filters select:hover { border-color: var(--brand); }
.admin-filters select:focus, .admin-filters input[type="date"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(83,37,209,.15); }
.admin-filters .date-range { background: #fff; border: 1px solid var(--line); }

/* Contrôles de carte = segmented control premium */
.map-toggle button { border: 1.5px solid var(--line); background: #fff; color: var(--brand-dark); box-shadow: 0 1px 5px rgba(36,28,61,.05); transition: .14s; }
.map-toggle button:hover { border-color: var(--brand); }
.map-toggle button.on { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 5px 14px rgba(83,37,209,.28); }
#adminMap { border-radius: 16px; box-shadow: 0 3px 16px rgba(36,28,61,.07); }

/* Onglets de statut polis */
.status-tabs button { transition: background .14s, color .14s; }
.status-tabs button:hover { background: var(--lavender); color: var(--brand); }

/* Cadre premium autour des DataTables + contrôles */
#reportsTable_wrapper, #usersTable_wrapper { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px 6px; box-shadow: 0 3px 16px rgba(36,28,61,.06); margin-top: 4px; }
.dataTables_wrapper .dataTables_filter input { box-shadow: 0 1px 4px rgba(36,28,61,.05); transition: border-color .14s, box-shadow .14s; }
.dataTables_wrapper .dataTables_filter input:focus { outline: none; box-shadow: 0 0 0 3px rgba(83,37,209,.15); }
.dt-button { border: 1.5px solid var(--line) !important; box-shadow: 0 1px 5px rgba(36,28,61,.05); transition: .14s; }
.dt-button:hover { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; box-shadow: 0 5px 14px rgba(83,37,209,.26); }
/* Bouton « Créer un plan d'inspection » intégré à la barre des boutons, en mauve plein */
#planForm { display: inline-flex; margin: 0; }
.dt-buttons #planForm { margin-left: 6px; }
.dt-button.dt-plan { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
.dt-button.dt-plan:hover { background: var(--brand-dark) !important; color: #fff !important; border-color: var(--brand-dark) !important; box-shadow: 0 5px 14px rgba(83,37,209,.3); }
.dt-button.dt-plan .nav-ico { vertical-align: -3px; margin-right: 4px; }
/* Icônes d'action dans les lignes de table */
.row-act { display: inline-flex; align-items: center; color: var(--brand); transition: color .12s, transform .12s; }
button.row-act { background: none; border: 0; padding: 0; cursor: pointer; }
.row-act:hover { color: var(--pink); transform: scale(1.12); }
.row-act .nav-ico { margin: 0; }
.row-act-del { color: #d11a2a; }
.row-act-del:hover { color: #a00; }

/* DataTables — habillage charte */
.dt-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 10px; }
.dt-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; font-size: 0.9rem; }
/* Sélecteur « Afficher N entrées » : assez large pour lire le nombre malgré la flèche décorative */
.dataTables_wrapper .dataTables_length select { min-width: 84px; padding-right: 32px !important; }
/* Pagination DataTables : boutons pilules espacés (Précédente / pages / Suivante) */
.dataTables_wrapper .dataTables_paginate { display: inline-flex; gap: 6px; align-items: center; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 6px 14px !important; margin: 0 !important; border: 1.5px solid var(--lavender-2) !important;
  border-radius: 99px !important; background: #fff !important; color: var(--brand) !important;
  font-weight: 700; text-decoration: none !important; cursor: pointer; transition: .14s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
  background: var(--lavender) !important; border-color: var(--brand) !important; color: var(--brand) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: .45; cursor: default; background: #fff !important; color: var(--muted) !important;
}
.dataTables_wrapper .dataTables_filter { margin: 0; }
.dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--brand); }
.dataTables_wrapper .dataTables_filter input { width: 240px; padding: 9px 12px; border: 1.5px solid var(--lavender-2); border-radius: 99px; font: inherit; color: var(--brand); }
.dataTables_wrapper .dataTables_filter input:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_info { color: var(--muted); font-size: 0.85rem; }
.dataTables_wrapper .dataTables_length select { width: auto; padding: 6px 30px 6px 12px; border-radius: 8px; margin: 0 4px; background-position: right 9px center; }
.dt-buttons { display: flex; gap: 6px; }
.dt-button { border: 2px solid var(--brand) !important; background: #fff !important; color: var(--brand) !important;
  font: inherit !important; font-weight: 700 !important; font-size: 0.83rem !important; padding: 6px 16px !important;
  border-radius: 99px !important; cursor: pointer; }
.dt-button:hover { border-color: var(--pink) !important; color: var(--pink) !important; background: #fff !important; }
.dataTables_wrapper .dataTables_paginate a.paginate_button { border-radius: 8px !important; border: 0 !important; color: var(--brand) !important; background: transparent !important; }
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover { background: var(--brand) !important; color: #fff !important; border: 0 !important; }
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover { background: var(--lavender) !important; color: var(--pink) !important; border: 0 !important; }
table.dataTable thead th { border-bottom: 0 !important; }
table.dataTable.no-footer { border-bottom: 1px solid var(--line) !important; }
table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after { color: var(--pink); }

/* Badges stores */
.apps-section { margin: 46px 0; }
.store-badges { display: flex; gap: 22px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.store-badge { text-align: center; }
.store-badge img { display: block; height: 56px; width: auto; }
.webapp-badge { display: inline-flex; align-items: center; gap: 11px; width: 176px; height: 56px; padding: 0 14px; background: #000; color: #fff; border: 0; border-radius: 12px; cursor: pointer; text-align: left; transition: transform .12s; }
.webapp-badge:hover { transform: scale(1.04); }
.webapp-badge .wa-ic { width: 32px; height: 32px; border-radius: 8px; display: block; }
.webapp-badge span { display: flex; flex-direction: column; line-height: 1.05; }
.webapp-badge .wa-top { font-size: 0.66rem; opacity: .9; text-transform: uppercase; letter-spacing: .03em; }
.webapp-badge .wa-main { font-size: 1.2rem; font-weight: 700; }
.wa-block { margin-top: 14px; }
.wa-block h4 { margin: 0 0 6px; color: var(--brand); font-size: 1rem; }
.wa-steps { margin: 0; padding-left: 20px; }
.wa-steps li { margin: 5px 0; font-size: 0.94rem; line-height: 1.35; }
.store-badge a img { transition: transform 0.12s; }
.store-badge a:hover img { transform: scale(1.04); }
.badge-soon img { opacity: 0.35; filter: grayscale(1); }
.badge-note { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--muted); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 60px; background: var(--lavender); }
.footer-inner { padding: 26px 16px; text-align: center; color: var(--brand); font-size: 0.88rem; }
.footer-inner p { margin: 4px 0; }
.footer-inner a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
  .header-inner { flex-wrap: wrap; height: auto; padding: 10px 16px; }
  .brand .logo-row { display: block; height: 42px; }   /* mobile : logo une seule ligne (agrandi) */
  .brand .logo-stack { display: none; }
  .header-inner { gap: 5px; }
  .header-inner .main-nav { gap: 6px; }
  .header-inner .main-nav .btn-cta.btn-sm { padding: 8px 12px; font-size: 0.86rem; }
  .header-inner .lang-switch { width: 40px; margin-left: 0; }
  .nav-sub { gap: 8px 14px; }
  .hero { padding: 36px 0 26px; }
  .hero h1 { font-size: 1.4rem; line-height: 1.25; }
  .hero p { font-size: 0.96rem; }
  .hero-slider { padding: 52px 16px 44px; }
}

/* ---------- Impression des fiches (bouton Imprimer / PDF) ---------- */
.print-header { display: none; }
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff !important; font-size: 11pt; }
  .site-header, .site-footer, .admin-topbar, .map-toggle, .no-print,
  form, .btn, button, .lang-switch, .leaflet-control-zoom { display: none !important; }
  .print-header { display: flex !important; align-items: center; justify-content: space-between;
    border-bottom: 3px solid #5325d1; padding-bottom: 10px; margin-bottom: 16px; }
  .print-header img { height: 34px; }
  .print-header .print-meta { text-align: right; font-size: 9pt; color: #6f6a85; }
  .detail-grid { display: block !important; }
  .detail-grid > div { page-break-inside: avoid; margin-bottom: 12px; }
  .detail-grid img.photo { max-height: 110mm; width: auto; max-width: 100%; }
  #map { height: 70mm !important; page-break-inside: avoid; }
  .card { border: 1px solid #ddd !important; }
  .history-item { page-break-inside: avoid; }
  a { text-decoration: none !important; color: inherit !important; }
  .container { max-width: none; padding: 0; }
}

/* ---------- Modales admin ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(36,28,61,.55); backdrop-filter:blur(2px);
  display:none; align-items:flex-start; justify-content:center;
  padding:40px 16px; overflow-y:auto;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:#fff; border-radius:16px; width:100%; max-width:520px;
  box-shadow:0 24px 60px rgba(36,28,61,.35);
  padding:26px 26px 22px; animation:modalIn .16s ease-out;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:none; } }
.modal h3{ margin:0 0 16px; color:#5325d1; }
.modal .modal-actions{
  display:flex; gap:10px; justify-content:flex-end; margin-top:20px;
}
.modal-close{
  float:right; margin:-6px -6px 0 0; border:0; background:none;
  font-size:1.5rem; line-height:1; color:#9a92b5; cursor:pointer;
}
.modal-close:hover{ color:#ff438f; }