/* ============================================================
   Signalement Citoyen, design system v2
   Source : refonte 2026, voir DESIGN-SYSTEM.md
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #f4f7fa; }              /* fallback clair pour éviter les bandes blanches */
html:has(.sc[data-theme="dark"]) { background: #0b0c0f; }  /* fallback sombre */
body {
  font-family: 'Roboto', system-ui, sans-serif;
  background: transparent;
  color: inherit;
  min-height: 100vh;
}
img { display: block; max-width: 100%; }
/* Les navigateurs donnent une police monospace aux <textarea> : on reprend celle du site */
textarea { font-family: inherit; }

/* Le conteneur .sc doit couvrir TOUTE la hauteur, et écraser le background pour vrai */
.sc {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  transition: background .25s, color .25s;
}
.sc > main { flex: 1; }
.sc > main:last-child > section:last-child { padding-bottom: 80px; }

/* ------------------------------------------------------------
   Variables, mode clair (défaut)
   ------------------------------------------------------------ */
.sc {
  --primary:      #1976D2;
  --primary-dark: #1565C0;
  --primary-deep: #0d3a73;
  --primary-50:   #E8F1FB;
  --primary-100:  #D2E4F7;

  --cta:      #FF5722;
  --cta-dark: #E64A19;
  --cta-text: #ffffff;      /* texte du bouton CTA — recalculé par commune (auto-contraste) */
  --primary-text: #ffffff;  /* texte du bouton principal — recalculé par commune */
  --accent:   #FFC107;

  --success:   #4CAF50;
  --success-d: #2E7D32;
  --warning:   #FF9800;
  --warning-d: #B26A00;
  --danger:    #DC2626;

  --text:  #1f2630;
  --muted: #5f6b7a;
  --faint: #8a94a3;
  --bg:        #f4f7fa;
  --surface:   #ffffff;
  --surface-2: #f4f7fa;
  --border:    #e4e8ee;
  --navy:      #0f1d2b;
  --field:     #ffffff;

  --map-bg1:    #eef3f9;
  --map-bg2:    #e4ecf5;
  --map-land:   #ffffff;
  --map-stroke: #1976D2;

  --bd-att-bg: rgba(255,152,0,.15); --bd-att-fg: #B26A00;
  --bd-cur-bg: rgba(25,118,210,.13); --bd-cur-fg: #1565C0;
  --bd-res-bg: rgba(76,175,80,.16);  --bd-res-fg: #2E7D32;

  --shadow-md: 0 12px 28px rgba(17,32,47,.12);

  font-family: 'Roboto', system-ui, sans-serif;
}

/* ------------------------------------------------------------
   Variables, mode sombre
   Activé via data-theme="dark" sur .sc
   ------------------------------------------------------------ */
.sc[data-theme="dark"] {
  --primary:      #2b86e0;
  --primary-dark: #4f9ce8;
  --primary-deep: #eaf1fb;
  --primary-50:   #17202b;
  --primary-100:  #1e2b3a;

  --cta:      #FF5722;
  --cta-dark: #ff6b3d;
  --accent:   #FFC107;

  --success:   #4CAF50;
  --success-d: #6ace77;
  --warning:   #FF9800;
  --warning-d: #e3a64a;
  --danger:    #f87171;

  --text:  #f4f7fa;
  --muted: #a7b0bc;
  --faint: #7a838f;
  --bg:        #0b0c0f;
  --surface:   #15171c;
  --surface-2: #1b1e24;
  --border:    #2a2e36;
  --navy:      #08090c;
  --field:     #0e1116;

  --map-bg1:    #10141a;
  --map-bg2:    #0c0f14;
  --map-land:   #1b2027;
  --map-stroke: #3b8ae6;

  --bd-att-bg: rgba(255,152,0,.18); --bd-att-fg: #f0b35a;
  --bd-cur-bg: rgba(59,138,230,.20); --bd-cur-fg: #73b2f2;
  --bd-res-bg: rgba(76,175,80,.20);  --bd-res-fg: #7ed389;

  --shadow-md: 0 14px 30px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------
   Typographie
   ------------------------------------------------------------ */
.sc h1, .sc h2, .sc h3, .sc h4, .sc h5 {
  font-family: 'IBM Plex Sans', sans-serif;
  margin: 0;
}
/* Titres façon IBM : IBM Plex Sans en Regular 400 (le !important neutralise les
   font-weight 700/800 posés en style inline dans les gabarits). */
.sc h1, .sc h2 { font-weight: 400 !important; }
.sc h3 { font-weight: 400 !important; }
.sc h4, .sc h5 { font-weight: 500 !important; }
/* Tailles de titres sur mobile (le grand héros et les titres de section) */
@media (max-width: 640px) {
  .sc main h1 { font-size: 28px !important; line-height: 1.2 !important; }
  .sc main h2 { font-size: 26px !important; line-height: 1.25 !important; }
}

/* Bandes de section : fond légèrement contrasté en clair, séparées par un filet.
   En mode SOMBRE, la teinte surface-2 (#1b1e24) tranchait trop avec le fond de
   page (#0b0c0f) des sections voisines : on la fond dans le fond, les filets
   suffisent à délimiter. Les deux bandes sont ainsi de la même teinte que le reste. */
.sc-band { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sc[data-theme="dark"] .sc-band { background: var(--bg); }
.sc p { margin: 0; }
.sc a { text-decoration: none; color: inherit; }
.num {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Accessibilité
   ------------------------------------------------------------ */
.sc :focus-visible {
  outline: 3px solid #ffc107;
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--primary-dark);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { left: 8px; }

/* ------------------------------------------------------------
   Animations et micro-interactions
   ------------------------------------------------------------ */
.lnk-u:hover { text-decoration: underline; }
.card-rise { transition: transform .16s ease, box-shadow .16s ease; }
.card-rise:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.tile-z img { transition: transform .5s ease; }
.tile-z:hover img { transform: scale(1.05); }

@keyframes scfade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   Composants utilitaires
   ------------------------------------------------------------ */
.fld {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
}
.fld::placeholder { color: var(--faint); }
.fld:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25,118,210,.15);
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cta-text);
  background: var(--cta);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s ease;
}
/* Survol volontairement sans effet (demande client) */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-text);
  background: var(--primary);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s ease;
}
/* Survol volontairement sans effet */

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-deep);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .15s ease;
}
/* Survol volontairement sans effet */

/* ------------------------------------------------------------
   Messages flash
   ------------------------------------------------------------ */
.flash-wrap {
  max-width: 1240px;
  margin: 16px auto 0;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flash {
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.flash--success { border-color: var(--success); color: var(--success-d); background: rgba(76,175,80,.08); }
.flash--error,
.flash--danger  { border-color: var(--danger);  color: var(--danger);    background: rgba(220,38,38,.08); }
.flash--warning { border-color: var(--warning); color: var(--warning-d); background: rgba(255,152,0,.08); }
.flash--info    { border-color: var(--primary); color: var(--primary-deep); background: rgba(25,118,210,.08); }

/* ------------------------------------------------------------
   Safety net pour le mode sombre :
   force les éléments natifs (input, select, textarea, button)
   à utiliser nos variables, même quand des styles inline les ratent
   ------------------------------------------------------------ */
.sc[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.sc[data-theme="dark"] textarea,
.sc[data-theme="dark"] select {
  background-color: var(--field);
  color: var(--text);
  border-color: var(--border);
}
.sc[data-theme="dark"] input::placeholder,
.sc[data-theme="dark"] textarea::placeholder {
  color: var(--faint);
}
.sc[data-theme="dark"] option {
  background: var(--surface);
  color: var(--text);
}

/* Le footer a un fond toujours sombre (navy), reste donc cohérent dans les 2 thèmes */
.sc footer { flex-shrink: 0; }

/* Espacement final avant le footer pour ne pas que ça soit collé */
.sc > main > section:last-of-type,
.sc > main:last-child {
  margin-bottom: 0;
  padding-bottom: 80px;
}
@media (max-width: 768px) {
  .sc > main > section:last-of-type,
  .sc > main:last-child {
    padding-bottom: 60px;
  }
}

/* ------------------------------------------------------------
   Responsive : header sur mobile
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .sc-header-nav { display: none !important; }
  .sc-header-actions a span,
  .sc-header-actions .btn-label { display: none; }
}

/* ============================================================
   RESPONSIVE MOBILE : règles globales robustes
   ============================================================ */

/* Filet de sécurité contre le débordement horizontal (la vraie correction se fait
   sur l'élément fautif). « clip » plutôt que « hidden » : hidden faisait du <body>
   un conteneur de défilement, ce qui empêchait l'en-tête sticky de rester collé.
   hidden reste en repli pour les navigateurs qui ignorent clip (Safari < 16). */
html, body { overflow-x: hidden; overflow-x: clip; }

/* Auto-fluidifier les grid-template-columns hardcodées */
@media (max-width: 900px) {
  .sc [style*="grid-template-columns:2fr 1fr"],
  .sc [style*="grid-template-columns: 2fr 1fr"],
  .sc [style*="grid-template-columns:1.5fr 1fr"],
  .sc [style*="grid-template-columns: 1.5fr 1fr"],
  .sc [style*="grid-template-columns:1.05fr .95fr"],
  .sc [style*="grid-template-columns: 1.05fr .95fr"],
  .sc [style*="grid-template-columns:1fr 1fr"],
  .sc [style*="grid-template-columns: 1fr 1fr"],
  .sc [style*="grid-template-columns:1fr 380px"],
  .sc [style*="grid-template-columns: 1fr 380px"],
  .sc [style*="grid-template-columns:1.5fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Grilles 3 et 4 colonnes → 2 colonnes tablette, 1 colonne mobile */
@media (max-width: 1024px) {
  .sc [style*="grid-template-columns:repeat(3"],
  .sc [style*="grid-template-columns: repeat(3"],
  .sc [style*="grid-template-columns:repeat(4"],
  .sc [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 620px) {
  /* Rangées de stats/KPI : 2 colonnes compactes plutôt qu'une pile géante */
  .sc [style*="grid-template-columns:repeat(3"],
  .sc [style*="grid-template-columns: repeat(3"],
  .sc [style*="grid-template-columns:repeat(4"],
  .sc [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* Sections avec padding fixe : réduire sur mobile */
@media (max-width: 620px) {
  .sc section[style*="padding:48px 32px"],
  .sc section[style*="padding: 48px 32px"],
  .sc section[style*="padding:32px 32px"],
  .sc section[style*="padding: 32px 32px"],
  .sc section[style*="padding:72px 32px"],
  .sc section[style*="padding: 72px 32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Titres H1 énormes → réduire */
  .sc h1[style*="font-size:42px"],
  .sc h1[style*="font-size: 42px"],
  .sc h1[style*="font-size:38px"],
  .sc h1[style*="font-size: 38px"],
  .sc h1[style*="font-size:36px"],
  .sc h1[style*="font-size: 36px"],
  .sc h1[style*="font-size:34px"],
  .sc h1[style*="font-size: 34px"],
  .sc h1[style*="font-size:32px"],
  .sc h1[style*="font-size: 32px"] {
    font-size: 23px !important;
    line-height: 1.2 !important;
  }

  /* Padding tables trop larges → compresser */
  .sc table th, .sc table td {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  /* Boutons de header/footer wrap correctement */
  .sc footer > div > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* Toasts déjà responsive dans base.html */

/* Formulaires fluides */
@media (max-width: 620px) {
  .sc .fld { font-size: 15px !important; }
  .sc .btn-cta, .sc .btn-ghost { font-size: 14px !important; }
}

/* Cookie banner : ne dépasse jamais */
@media (max-width: 480px) {
  #cookie-banner {
    left: 10px !important;
    right: 10px !important;
    padding: 14px 16px !important;
  }
  #cookie-banner > div {
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* ============================================================
   OPTIMISATION MOBILE GLOBALE (v2.78)
   Les templates utilisent beaucoup de styles inline ; les règles
   !important ci-dessous les surchargent sur petit écran pour que
   chaque page (citoyen, mairie, super admin) tienne dans l'écran.
   ============================================================ */

@media (max-width: 900px) {
  main img { max-width: 100%; height: auto; }

  /* Grilles multi-colonnes fixes -> 1 colonne (layouts 2fr/1fr des dashboards) */
  main [style*="grid-template-columns:2fr 1fr"],
  main [style*="grid-template-columns: 2fr 1fr"],
  main [style*="grid-template-columns:1fr 2fr"],
  main [style*="grid-template-columns:1.5fr 1fr"],
  main [style*="grid-template-columns:1fr 340px"],
  main [style*="grid-template-columns:1fr 360px"],
  main [style*="grid-template-columns:340px 1fr"],
  main [style*="grid-template-columns:360px 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  /* Marges latérales compactes partout */
  main section { padding-left: 16px !important; padding-right: 16px !important; }
  main section > div { padding-left: 0; padding-right: 0; }

  /* Typo : titres raisonnables sur téléphone */
  main h1 { font-size: 23px !important; line-height: 1.2 !important; }
  main h2 { font-size: 18.5px !important; line-height: 1.25 !important; }
  main h3 { font-size: 16px !important; }

  /* Rangées de stats : 2 colonnes au lieu de 4 écrasées ou 1 géante */
  main [style*="repeat(4, 1fr)"],
  main [style*="repeat(4,1fr)"],
  main [style*="repeat(3, 1fr)"],
  main [style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* Grilles de cartes auto-fit : gaps resserrés */
  main [style*="repeat(auto-fit"] { gap: 14px !important; }

  /* Grilles 1fr 1fr de contenu -> 1 colonne */
  main [style*="grid-template-columns:1fr 1fr"],
  main [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Cartes : padding interne réduit */
  main [style*="padding:22px"], main [style*="padding: 22px"],
  main [style*="padding:24px"], main [style*="padding:26px"],
  main [style*="padding:28px"] { padding: 16px !important; }

  /* Tables larges : défilement interne plutôt que débordement de page */
  main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Carte : popups Leaflet compacts sur téléphone */
@media (max-width: 640px) {
  .leaflet-popup-content { max-width: 240px !important; font-size: 13px !important; margin: 10px 12px !important; }
  .leaflet-popup-content h1, .leaflet-popup-content h2,
  .leaflet-popup-content h3, .leaflet-popup-content strong { font-size: 14.5px !important; }
  .leaflet-popup-content img { max-height: 110px; object-fit: cover; }
  .leaflet-popup-content a[style], .leaflet-popup-content .btn-cta { padding: 8px 12px !important; font-size: 13px !important; }
}

/* Rythme vertical compact sur téléphone : moins de blanc entre les blocs */
@media (max-width: 640px) {
  /* Sections et conteneurs avec gros padding vertical inline */
  .sc main [style*="padding:64px 32px"],
  .sc main [style*="padding: 64px 32px"],
  .sc main [style*="padding:72px 32px"],
  .sc main [style*="padding: 72px 32px"],
  .sc main [style*="padding:64px 32px 72px"],
  .sc main [style*="padding:64px 32px 56px"] {
    padding: 32px 16px !important;
  }
  .sc main [style*="padding:60px 52px"] { padding: 30px 22px !important; }

  /* Gros écarts de grilles/colonnes */
  .sc main [style*="gap:48px"] { gap: 22px !important; }
  .sc main [style*="gap:40px"], .sc main [style*="gap:36px"] { gap: 20px !important; }

  /* Marges sous les titres de sections */
  .sc main h2[style*="margin-bottom:36px"] { margin-bottom: 18px !important; }
  .sc main [style*="margin-bottom:48px"] { margin-bottom: 22px !important; }
}

/* Tableaux de bord mairie/admin sur téléphone (v2.81) */
@media (max-width: 640px) {
  /* Cartes KPI (auto-fit minmax 180-240px) : 2 colonnes compactes
     au lieu d'une pile de cartes géantes */
  .sc main [style*="minmax(180px"],
  .sc main [style*="minmax(190px"],
  .sc main [style*="minmax(200px"],
  .sc main [style*="minmax(220px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Graphiques côte à côte -> empilés (titres coupés sinon) */
  .sc main [style*="grid-template-columns:1fr 1.4fr"],
  .sc main [style*="grid-template-columns:1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Listes-tableaux en grille (utilisateurs, signalements, services...) :
     largeur minimale + défilement horizontal dans leur carte, au lieu
     d'écraser les colonnes (e-mails cassés lettre par lettre) */
  .sc main [style*="grid-template-columns:50px"],
  .sc main [style*="grid-template-columns:170px"] {
    min-width: 720px;
  }
  .sc main div:has(> [style*="grid-template-columns:50px"]),
  .sc main div:has(> [style*="grid-template-columns:170px"]) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Lisibilité mobile : lignes label + contrôle empilés (v2.82) */
@media (max-width: 640px) {
  /* Routage des signalements : catégorie AU-DESSUS, menu déroulant en dessous
     pleine largeur (fini le libellé coupé sur le côté) */
  .sc main [style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .sc main [style*="grid-template-columns:1fr 280px"] > span:first-child {
    font-weight: 600;
  }
  /* L'en-tête de colonnes (redondant une fois empilé) disparaît */
  .sc main [style*="grid-template-columns:1fr 280px"][style*="uppercase"] {
    display: none !important;
  }

  /* Gérer les signalements (tableau de bord mairie) : chaque ligne devient
     une carte empilée (réf, titre, catégorie, date, statut de haut en bas) */
  .sc main [style*="grid-template-columns:64px 1fr 150px"],
  .sc main [style*="grid-template-columns:60px 1fr"] {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    gap: 3px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }
  .sc main [style*="grid-template-columns:64px 1fr 150px"][style*="uppercase"],
  .sc main [style*="grid-template-columns:60px 1fr"][style*="uppercase"] {
    display: none !important;
  }

  /* La carte bleue d'appel à l'action ne colle plus au bloc du dessus */
  .sc main section[style*="padding:0 32px 72px"] {
    padding-top: 28px !important;
    padding-bottom: 40px !important;
  }
}

/* Les colonnes passées en 1 colonne ne gardent pas leur largeur minimale
   de contenu (titres nowrap) : sans ceci, la piste de grille s'élargit
   au-delà de l'écran et toute la page déborde (vu sur « Mon espace »). */
@media (max-width: 900px) {
  main [style*="grid-template-columns:2fr 1fr"] > *,
  main [style*="grid-template-columns: 2fr 1fr"] > *,
  main [style*="grid-template-columns:1fr 2fr"] > *,
  main [style*="grid-template-columns:1.5fr 1fr"] > *,
  main [style*="grid-template-columns:1fr 340px"] > *,
  main [style*="grid-template-columns:1fr 360px"] > *,
  main [style*="grid-template-columns:340px 1fr"] > *,
  main [style*="grid-template-columns:360px 1fr"] > *,
  main [style*="grid-template-columns:1fr 380px"] > *,
  main [style*="grid-template-columns:1fr 1.4fr"] > *,
  main [style*="grid-template-columns:1.4fr 1fr"] > * {
    min-width: 0;
    max-width: 100%;
  }
}