:root{
  --g:#6BBF4E;--gd:#3D7A28;--gdd:#245A18;
  --c0:#F4EFE7;--c5:#2C2420;
  --tx:#352C26;--mt:#6B5E54;--lt:#9A8E84;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font-family:'DM Sans',sans-serif;color:var(--tx);background:var(--c0)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.w-shell{display:flex;flex-direction:column;height:100vh;min-height:320px}

/* 03/09/2026 — decision produit : le widget est pense comme LA page
   d'accueil CleanCity d'une mairie (visite directe frequente, pas
   seulement un embed iframe reduit). Plafonner sa largeur/hauteur en
   visite directe le faisait paraitre petit et perdu au milieu d'un fond
   vide — l'oppose de l'effet recherche. Le shell remplit donc TOUJOURS
   son conteneur (iframe ou onglet plein ecran), sans distinction : c'est
   l'ecran d'accueil (.w-intro ci-dessous) qui porte l'effort visuel pour
   bien occuper l'espace et donner envie de signaler, pas une contrainte
   de taille artificielle. */

.w-demo-banner{order:-1;background:#8a1f1f;color:#fff;text-align:center;font-size:.7rem;font-weight:600;letter-spacing:.03em;padding:5px;text-transform:uppercase;flex-shrink:0}

.w-header{display:flex;align-items:center;padding:12px 18px;background:#fff;border-bottom:1px solid rgba(61,122,40,.1);flex-shrink:0;gap:12px}
/* Logo + nom cliquables pour revenir a l'ecran d'accueil (03/09/2026) —
   pattern classique "logo = retour a l'accueil", evite d'ajouter un
   bouton dedie qui alourdirait l'en-tete. Reset des styles de bouton par
   defaut pour qu'il se comporte visuellement comme le simple texte
   d'avant. */
.w-header-home{display:flex;align-items:center;gap:10px;background:none;border:none;padding:0;margin:0;font:inherit;text-align:left;cursor:pointer;min-width:0}
.w-header-home:hover .w-header-title{color:var(--gd)}
.w-header-logo{height:28px;width:auto;flex-shrink:0}
.w-header-title{display:block;font-family:'Playfair Display',serif;font-size:.95rem;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.w-header-sub{display:block;font-size:.68rem;color:var(--mt);text-transform:uppercase;letter-spacing:.06em}

.w-body{display:flex;flex:1;min-height:0;position:relative}
.w-map-wrap{position:relative;flex:1;min-height:0}
#widget-map{position:absolute;inset:0}
/* Curseur en croix de visée pendant l'étape "position" du flux de
   création (04/09/2026, retour Antoine) — signale clairement "cliquez
   ici pour placer le repère", au lieu du curseur "main" (grab) par
   défaut de Leaflet qui laisse penser qu'on ne peut que déplacer la
   carte. #widget-map porte directement la classe leaflet-container
   (Leaflet transforme l'élément cible lui-même) : sélecteur ID+classe,
   spécificité suffisante pour l'emporter sur .leaflet-container sans
   !important. Classe togglée par create.js (render()) et demo.js
   (setDraftStep()) — jamais par CSS seul. */
#widget-map.w-map-placing{cursor:crosshair}

/* Ecran d'accueil du widget (02/09/2026, redesign 03/09/2026) — le widget
   sert de mini page d'accueil CleanCity embarquee sur le site d'une
   mairie (voire visitee directement en pleine page) : la carte reste
   masquee (recouverte, z-index au-dessus de tout) tant que le visiteur
   n'a pas choisi une action. Positionne en absolute par-dessus .w-body
   (pas tout .w-shell) : header + footer restent visibles pour le
   contexte. Fond en degrade de marque (pas blanc plat) + carte un peu
   plus large + mini-parcours en 3 etapes : porte l'effort visuel pour
   bien occuper l'espace et donner envie de signaler, plutot que de
   contraindre artificiellement la taille du widget (cf .w-shell). */
.w-intro{position:absolute;inset:0;z-index:1500;background:radial-gradient(ellipse 900px 700px at 50% 0%,rgba(107,191,78,.14),transparent 60%),var(--c0);display:flex;align-items:center;justify-content:center;padding:32px 24px;text-align:center}
.w-intro[hidden]{display:none}
.w-intro-card{max-width:420px}

/* Badge d'accueil (03/09/2026, v2 — retour Antoine PM) — le logo CleanCity
   se dissout vers une icône feuille qui se MORPHE organiquement en
   marqueur de carte, avec des feuilles qui s'envolent et un tourbillon en
   fond. Remplace la v1 (matin, simple flip/fondu 3D) — v1 remplaçait déjà
   l'ancien balai 🧹 (mauvais 1er signal) et les emoji couleur (📍🏛️✅,
   couleurs figées par l'OS, impossibles à aligner sur --gd) plus bas.
   Style volontairement PLAT/SOBRE (pas de verre/3D/bleu) pour rester
   cohérent avec la charte olive/crème du site — cf. discussion : la
   référence visuelle apportée était un rendu glossy bleu qui aurait cassé
   cette charte, seul le CONCEPT de mouvement (logo -> feuille -> pin,
   organique, particules, tourbillon) a été repris.
   Interpolation de tracé réelle (feuille -> goutte) pilotée par Flubber
   (js/widget/intro-badge.js, vendored en js/vendor/flubber.min.js — MIT,
   AUCUN appel CDN au runtime). Le trou du marqueur (Flubber gère mal les
   tracés à trou) est ajouté par un crossfade CSS vers .w-intro-badge-
   pin-final au moment où le mouvement s'arrête — invisible à l'œil.
   Durée totale 2200ms — les % ci-dessous ET les constantes de temps dans
   intro-badge.js DOIVENT rester synchronisés si l'un des deux change. */
.w-intro-badge{width:60px;height:60px;margin:0 auto 16px;border-radius:18px;background:rgba(107,191,78,.16);position:relative;overflow:visible}

.w-intro-badge-swirl{position:absolute;inset:-14px;border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,rgba(107,191,78,0) 0deg,rgba(107,191,78,.35) 90deg,rgba(61,122,40,.45) 180deg,rgba(107,191,78,0) 270deg,rgba(107,191,78,0) 360deg);filter:blur(6px);opacity:0;animation:w-badge-swirl-spin 2.2s linear 1 both,w-badge-swirl-fade 2.2s ease-in-out 1 both}
@keyframes w-badge-swirl-spin{to{transform:rotate(360deg)}}
@keyframes w-badge-swirl-fade{0%,32%{opacity:0}40%{opacity:1}80%{opacity:1}96%,100%{opacity:0}}

.w-intro-badge-particles{position:absolute;inset:0;pointer-events:none}
.w-particle{position:absolute;top:50%;left:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;fill:var(--g);opacity:0}
.w-particle-1{animation:w-particle-fly-1 2.2s ease-out 1 both}
.w-particle-2{animation:w-particle-fly-2 2.2s ease-out .08s 1 both}
.w-particle-3{animation:w-particle-fly-3 2.2s ease-out .16s 1 both}
@keyframes w-particle-fly-1{0%,34%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.4)}42%{opacity:1;transform:translate(-6px,-4px) rotate(20deg) scale(1)}70%,100%{opacity:0;transform:translate(-26px,-20px) rotate(80deg) scale(.6)}}
@keyframes w-particle-fly-2{0%,34%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.4)}42%{opacity:1;transform:translate(8px,-6px) rotate(-15deg) scale(1)}70%,100%{opacity:0;transform:translate(30px,-22px) rotate(-70deg) scale(.6)}}
@keyframes w-particle-fly-3{0%,34%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.4)}42%{opacity:1;transform:translate(2px,8px) rotate(30deg) scale(1)}70%,100%{opacity:0;transform:translate(8px,32px) rotate(100deg) scale(.6)}}

.w-intro-badge-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.w-intro-badge-logo{width:34px;height:34px;object-fit:contain;animation:w-badge-logo-fade 2.2s ease 1 both}
@keyframes w-badge-logo-fade{0%{opacity:0;transform:scale(.5)}10%{opacity:1;transform:scale(1)}32%{opacity:1;transform:scale(1)}38%,100%{opacity:0;transform:scale(.85)}}

.w-intro-badge-morph{width:30px;height:30px;opacity:0;animation:w-badge-morph-fade 2.2s ease 1 both}
.w-intro-badge-morph path{fill:var(--g);animation:w-badge-morph-color 2.2s ease 1 both}
@keyframes w-badge-morph-fade{0%,34%{opacity:0}40%{opacity:1}80%{opacity:1}84%,100%{opacity:0}}
@keyframes w-badge-morph-color{0%,40%{fill:var(--g)}82%,100%{fill:var(--gd)}}

.w-intro-badge-pin-final{width:30px;height:30px;fill:var(--gd);opacity:0;animation:w-badge-pinfinal-fade 2.2s ease 1 both}
@keyframes w-badge-pinfinal-fade{0%,80%{opacity:0;transform:scale(.9)}88%{opacity:1;transform:scale(1.1)}94%{transform:scale(.96)}100%{opacity:1;transform:scale(1)}}

@media (prefers-reduced-motion: reduce){
  .w-intro-badge-swirl,.w-particle,.w-intro-badge-logo,.w-intro-badge-morph,.w-intro-badge-pin-final{animation:none}
  .w-intro-badge-swirl,.w-particle,.w-intro-badge-logo,.w-intro-badge-morph{opacity:0;display:none}
  .w-intro-badge-pin-final{opacity:1;transform:none}
}

.w-intro-title{font-family:'Playfair Display',serif;font-weight:700;font-size:1.55rem;color:var(--tx);margin:0 0 14px;line-height:1.28}
.w-intro-text{font-size:.92rem;color:var(--mt);line-height:1.6;margin:0 0 24px}

.w-intro-steps{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 26px;flex-wrap:wrap}
.w-intro-step{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.68rem;font-weight:600;color:var(--tx);width:92px}
.w-intro-step-icon{width:38px;height:38px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(44,36,32,.1);display:flex;align-items:center;justify-content:center}
.w-intro-step-icon svg{width:19px;height:19px;fill:var(--gd)}
.w-intro-step-arrow{color:var(--lt);font-size:1.1rem;margin-bottom:20px}

.w-intro-cta{font-size:.95rem;padding:14px;box-shadow:0 6px 18px rgba(61,122,40,.25);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.w-intro-cta-icon{width:16px;height:16px;fill:currentColor;flex-shrink:0}

/* Colonne de formulaire (03/09/2026, redesign) — regroupe le rail d'etapes
   ET le panneau d'etape dans UN SEUL bloc, au lieu d'un rail separe a cote
   d'une carte flottante disjointe au-dessus de la carte (ancien design :
   sur un embed large, la carte demesuree rendait le rail et le panneau
   minuscules et deconnectes). <640px : display:contents efface la colonne
   elle-meme, ses enfants (rail masque par CSS ci-dessous, panneau en
   position absolute) retrouvent exactement l'ancien comportement mobile
   (carte plein cadre, panneau flottant par-dessus). >=640px : vraie
   colonne de gauche, largeur fixe, fond blanc, le panneau devient un bloc
   normal SOUS le rail (plus de flottement), la carte occupe le reste. */
.w-form-col[hidden]{display:none}
.w-form-col:not([hidden]){display:contents}
@media (min-width:640px){
  /* display:flex column BORNE par la hauteur de .w-body (stretch par
     defaut d'un flex parent en row) — c'est ce qui permet a .w-panel
     (flex:1;min-height:0, regle plus bas) de se voir attribuer une
     hauteur "espace restant sous le rail" et donc a .w-panel-body
     (flex:1;min-height:0;overflow-y:auto, regle de base inchangee) de
     scroller EN INTERNE quand le contenu (ex. la grille de 22 categories)
     deborde, plutot que de faire deborder toute la colonne (bug constate :
     sans ce bornage, .w-panel-body grandissait a sa taille naturelle et
     le rail+panneau ensemble depassaient, masquant Suivant/Annuler). PAS
     de overflow-y ici : c'est .w-panel-body qui scrolle, pas la colonne. */
  /* Colonne élargie 340px -> 410px (retour Antoine 04/09/2026, "carte
     plus petite, sentir qu'on suit un parcours") : réduit d'autant la
     part de la carte (flex:1 = "ce qui reste") sans toucher au contrat
     d'intégration (?city=, largeur totale du widget décidée par la page
     hôte) — donne aussi plus de place au rail agrandi ci-dessous. */
  .w-form-col:not([hidden]){
    display:flex;
    flex-direction:column;
    width:410px;
    flex-shrink:0;
    background:#fff;
    border-right:1px solid rgba(61,122,40,.1);
  }
}

.w-rail{display:flex;flex-direction:column;gap:22px;padding:24px 22px 8px;flex-shrink:0}
@media (max-width:639px){ .w-rail{display:none!important} }
.w-rail-heading{font-family:'Playfair Display',serif;font-weight:700;font-size:1rem;color:var(--tx);margin:0 0 6px}
.w-rail-step{position:relative;display:flex;align-items:center;gap:14px;opacity:.42;transition:opacity .2s}
.w-rail-step.is-active,.w-rail-step.is-done{opacity:1}
/* Pastilles + libellés agrandis (34px->46px, .78rem->.92rem) — le rail
   doit se sentir comme un vrai parcours à suivre, pas un détail discret
   dans un coin. Couleur pilotée par `color` (fill:currentColor dans le
   SVG injecté par buildRailIconSvg, cf create.js/demo.js). */
.w-rail-dot{position:relative;flex-shrink:0;width:46px;height:46px;border-radius:14px;background:#f5f3ee;display:flex;align-items:center;justify-content:center;color:var(--mt);z-index:1}
.w-rail-step.is-active .w-rail-dot{background:var(--gd);color:#fff}
.w-rail-step.is-done .w-rail-dot{background:rgba(107,191,78,.16);color:var(--gd);font-weight:700}
.w-rail-label{font-size:.92rem;font-weight:700;color:var(--tx);line-height:1.3}
.w-rail-step:not(.is-active) .w-rail-label{color:var(--mt);font-weight:500}
/* Trait de liaison entre les pastilles — combine le gap (22px) du flex
   parent pour relier visuellement deux etapes consecutives. */
.w-rail-step:not(:last-child) .w-rail-dot::after{content:'';position:absolute;top:100%;left:50%;width:2px;height:22px;background:rgba(61,122,40,.14);transform:translateX(-50%);z-index:0}
.w-rail-step.is-done:not(:last-child) .w-rail-dot::after{background:rgba(107,191,78,.35)}

.w-status{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:1000;background:rgba(255,255,255,.95);padding:7px 14px;border-radius:20px;font-size:.78rem;color:var(--mt);box-shadow:0 2px 10px rgba(0,0,0,.12);max-width:88%;text-align:center}
.w-status-error{color:#8a1f1f;background:#fbeaea}

.w-root-empty #widget-map{display:none}
.w-root-empty .w-intro{display:none}

.w-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px;background:#fff;border-top:1px solid rgba(61,122,40,.1);font-size:.66rem;color:var(--lt);flex-shrink:0}
.w-footer a{color:var(--mt);text-decoration:none}
.w-footer a:hover{color:var(--gd)}
.w-footer-brand{display:flex;align-items:center;gap:5px;font-weight:600;color:var(--tx)}
.w-footer-brand img{height:15px;width:auto;flex-shrink:0}

/* Pin en goutte (04/09/2026, icone Material 03/09/2026) — reproduit la
   structure des marqueurs de l'app Civic (48x60dp, map_marker_builder.dart
   buildCategoryMarker) : forme obtenue via la technique CSS standard
   "carre a bord arrondi sur 3 coins, pivote -45deg" plutot qu'un chemin
   SVG dessine a la main. Les spans generes par buildPinMarkerHtml()
   (marker-icons.js) : .w-pin-outer (conteneur, taille = diagonale du
   carre + marge, fournie par Leaflet via iconSize), .w-pin-body (le carre
   pivote, colore = tier statut/confirmations), .w-pin-inner-circle
   (cercle blanc interne, non pivote, slot de l'icone Material coloree
   dans la couleur du pin — PAS l'emoji de categorie, cf dualite
   volontaire documentee dans marker-icons.js). */
.w-pin-outer{position:relative;display:block;width:100%;height:100%}
.w-pin-body{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-45deg);border-radius:50% 50% 50% 0;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(44,36,32,.35)}
.w-pin-inner-circle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none}

/* Marqueur de cluster (04/09/2026) — reproduit buildClusterMarker
   (map_marker_builder.dart) : halo semi-transparent + cercle plein +
   nombre, coloré par seuil de comptage (mêmes couleurs que les pins,
   cf buildClusterMarkerHtml, marker-icons.js). Un clic zoome pour cadrer
   les signalements du cluster (map.js/demo.js, comme Civic _onClusterTap). */
.w-cluster-marker{position:relative;width:100%;height:100%}
.w-cluster-halo{position:absolute;inset:0;border-radius:50%;opacity:.22}
.w-cluster-body{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76%;height:76%;border-radius:50%;border:2px solid #fff;color:#fff;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(44,36,32,.35);cursor:pointer}

/* Repère "création de signalement" (04/09/2026, retour Antoine "il faut
   le même marqueur que sur l'app Civic") — reproduit exactement l'asset
   assets/markers/marker_create.png (goutte + icône "+" au lieu d'un halo
   inventé). .w-pin-inner-plus centre le "+" comme .w-pin-inner-circle
   mais SANS cercle blanc en fond (le corps du pin est déjà clair, cf
   couleurs dans buildCreatePinMarkerHtml, marker-icons.js). */
.w-pin-inner-plus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;pointer-events:none}

.w-popup{font-family:'DM Sans',sans-serif;font-size:.8rem;min-width:180px}
.w-popup-photo{width:100%;max-height:120px;object-fit:cover;border-radius:6px;margin-bottom:6px}
.w-popup-cat{font-weight:600;color:var(--tx);margin-bottom:2px}
.w-popup-addr{color:var(--mt);font-size:.75rem;margin-bottom:4px}
.w-popup-meta{display:flex;gap:4px;flex-wrap:wrap;color:var(--lt);font-size:.7rem}
.w-popup-note{margin-top:6px;padding-top:6px;border-top:1px solid rgba(0,0,0,.08);font-size:.7rem;color:var(--mt);font-style:italic}

.w-create-btn{position:absolute;bottom:16px;right:16px;z-index:900;background:var(--gd);color:#fff;border:none;border-radius:24px;padding:12px 20px;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer}
.w-create-btn:hover{background:var(--gdd)}

/* Légende des couleurs de marqueurs (04/09/2026) — équivalent web du
   bottom sheet Civic (map_legend.dart, markerLegendEntries), en bas à
   GAUCHE pour ne jamais chevaucher le bouton "+ Signaler" (bas-droite).
   "Résolu/annulé" omis : ce statut n'est jamais chargé sur cette carte
   (cf ACTIVE_STATUSES, map.js). */
.w-legend-btn{position:absolute;bottom:16px;left:16px;z-index:900;display:flex;align-items:center;gap:6px;background:#fff;color:var(--tx);border:none;border-radius:20px;padding:9px 14px;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.15);cursor:pointer}
.w-legend-btn:hover{background:#f5f3ee}
.w-legend-panel{position:absolute;bottom:56px;left:16px;z-index:900;background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 4px 18px rgba(0,0,0,.18);max-width:230px;font-family:'DM Sans',sans-serif}
.w-legend-panel[hidden]{display:none}
.w-legend-title{font-size:.7rem;font-weight:700;color:var(--lt);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.w-legend-row{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--tx);margin-bottom:6px;line-height:1.3}
.w-legend-row:last-child{margin-bottom:0}
.w-legend-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}

/* Carte flottante compacte (inspiree de patterns type Signaleo, sans
   copier : coins tres arrondis, marge sur les 4 cotes plutot qu'un
   panneau plein-largeur colle au bas, largeur plafonnee pour rester
   "petite" meme dans un grand embed). */
.w-panel{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:calc(100% - 28px);max-width:380px;z-index:1100;background:#fff;border-radius:22px;box-shadow:0 10px 32px rgba(44,36,32,.22);max-height:82%;overflow:hidden;display:flex;flex-direction:column}
.w-panel-body{padding:18px 20px 4px;overflow-y:auto;flex:1;min-height:0}

/* >=640px : le panneau quitte le flottement au-dessus de la carte pour
   devenir un bloc normal sous le rail, dans .w-form-col (redesign
   03/09/2026, cf .w-form-col ci-dessus). flex:1;min-height:0 (conserve de
   la regle de base, PAS flex:none) : c'est ce qui borne la hauteur du
   panneau a "l'espace restant sous le rail" dans .w-form-col, pour que
   .w-panel-body (flex:1;min-height:0;overflow-y:auto, regle de base
   inchangee) scrolle EN INTERNE quand le contenu deborde (ex. la grille
   de categories) au lieu de faire deborder toute la colonne par-dessus
   .w-nav-bar — bug constate au premier essai (flex:none cassait ce
   bornage, .w-nav-bar disparaissait derriere le contenu). .w-nav-bar
   reste ainsi TOUJOURS visible en bas du panneau, jamais besoin de
   scroller pour l'atteindre. */
@media (min-width:640px){
  /* flex:1;min-height:0 (jamais applique avant ce fix — le panneau restait
     a sa taille de contenu naturelle, flex-grow:0 par defaut) : necessaire
     pour que le panneau REMPLISSE l'espace restant de la colonne sous le
     rail quand son contenu est court (ex. etape position : juste un texte
     + un bouton), au lieu de laisser un grand vide blanc jusqu'au bas de
     la colonne avec Suivant/Annuler colles en haut. Pour un contenu plus
     grand que l'espace disponible (ex. grille de categories), flex-shrink
     (implicite) + .w-panel-body en flex:1/min-height:0/overflow-y:auto
     (regle de base, inchangee) continuent de faire defiler EN INTERNE
     comme avant. */
  .w-form-col .w-panel{position:static;left:auto;bottom:auto;transform:none;width:100%;max-width:none;z-index:auto;border-radius:0;box-shadow:none;max-height:none;flex:1;min-height:0}
  .w-form-col .w-panel-body{padding:14px 20px 8px}
  .w-form-col .w-nav-dots{display:none} /* deja represente par le rail, redondant en colonne large */
  .w-form-col .w-nav-bar{border-top:1px solid rgba(61,122,40,.08)}
}
.w-panel-head{display:flex;align-items:center;justify-content:space-between;font-family:'Playfair Display',serif;font-weight:600;font-size:1.02rem;color:var(--tx);margin-bottom:10px;gap:8px}
.w-panel-head .w-close{background:rgba(61,122,40,.08);border:none;width:26px;height:26px;border-radius:50%;font-size:1.1rem;line-height:1;color:var(--mt);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0}
.w-panel-head .w-close:hover{background:rgba(61,122,40,.15);color:var(--tx)}

/* Barre de navigation persistante (pastilles d'etape + precedent/suivant),
   commune a toutes les etapes du flux principal position->categorie->details. */
.w-nav-dots{display:flex;justify-content:center;gap:6px;padding:12px 0 4px}
.w-nav-dot{width:6px;height:6px;border-radius:50%;background:rgba(61,122,40,.18)}
.w-nav-dot.is-active{background:var(--gd);width:16px;border-radius:3px}
.w-nav-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 16px;flex-shrink:0}
/* Variante mode démo (04/09/2026) — demo.js n'a qu'un seul bouton "Suivant/
   Envoyer/Fermer" par étape (pas de "Précédent"), contrairement au vrai
   flux (create.js, Annuler+Suivant). .w-btn-primary porte déjà width:100%
   + margin-top:12px pour son usage flottant ; ici on neutralise cette
   marge (le padding du nav-bar la double sinon) sans toucher sa règle de
   base partagée avec d'autres écrans. */
.w-nav-bar-single{display:block}
.w-nav-bar-single .w-btn-primary{margin-top:0}
.w-nav-back{background:none;border:none;color:var(--mt);font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;padding:8px 6px;display:flex;align-items:center;gap:4px}
.w-nav-back:hover{color:var(--tx)}
.w-nav-next{background:var(--gd);color:#fff;border:none;border-radius:12px;padding:11px 22px;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px}
.w-nav-next:disabled{background:rgba(61,122,40,.18);color:rgba(53,44,38,.4);cursor:not-allowed}
.w-nav-next:not(:disabled):hover{background:var(--gdd)}

/* Grille catégories (04/09/2026) — alignée sur le vrai layout Civic
   (CategoryGrid, map_report_flow.dart) : 2 colonnes, cellules LARGES
   (childAspectRatio 2.6, pas des carrés), emoji + libellé côte à côte
   en ligne — PAS empilés verticalement. L'ancienne grille 3 colonnes de
   carrés (emoji au-dessus d'un libellé minuscule) était une invention
   du widget, pas un choix Civic ; le libellé complet est plus lisible
   à côté de l'icône que tronqué sous une icône trop petite. */
.w-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.w-cat-btn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid transparent;background:#f5f3ee;cursor:pointer;font-family:'DM Sans',sans-serif;min-height:52px;text-align:left;transition:transform .12s,background .12s}
.w-cat-btn:hover{background:rgba(107,191,78,.14);transform:translateY(-1px)}
.w-cat-btn-emergency{background:#fdeeee}
.w-cat-btn-emergency:hover{background:#fbdada}
.w-cat-btn.is-selected{background:rgba(107,191,78,.16);border-color:var(--gd)}
.w-cat-emoji{font-size:1.6rem;flex-shrink:0}
.w-cat-label{font-size:.78rem;font-weight:600;color:var(--tx);line-height:1.25}

/* Badge d'icone teinte (motif repris des dialogs de l'app Civic —
   map_report_flow.dart showEmergencyBlockDialog — cercle colore derriere
   l'emoji, pour une coherence visuelle widget/app sur cet ecran critique). */
.w-emergency-badge{width:56px;height:56px;margin:4px auto 12px;border-radius:16px;background:rgba(255,77,77,.12);border:1px solid rgba(255,77,77,.25);display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.w-emergency-title{font-family:'Playfair Display',serif;font-weight:800;font-size:1.05rem;color:var(--tx);text-align:center;line-height:1.3;margin:0 0 8px}

.w-hint{font-size:.82rem;color:var(--mt);margin:0 0 8px}
.w-hint-sub{font-size:.75rem;color:var(--lt)}

/* Adresse resolue en direct pendant le placement du repere (05/09/2026,
   retour Antoine "comme sur l'application mobile") — barre flottante
   au-dessus de la carte, meme emplacement/esprit que le bandeau d'adresse
   Civic (buildMapSignalingOverlays, map_widgets.dart) plutot qu'une ligne
   de texte dans le panneau lateral. Geocodage inverse debounce sur la
   position courante (cf scheduleAddressGeocode, create.js), meme principe
   que _scheduleSignalingGeocode cote Civic (map_screen.dart). */
/* left:48px (pas 16px) : laisse la place aux boutons zoom Leaflet
   (leaflet-control-zoom, left:10px + largeur 26px ~= 36px) sans
   chevauchement — verifie visuellement, le control zoom passe sinon
   par-dessus la barre (z-index Leaflet 1000 > 900 ici). */
.w-map-address-bar{position:absolute;top:16px;left:48px;right:16px;z-index:900;display:flex;align-items:center;gap:8px;background:#fff;color:var(--tx);border-radius:14px;padding:10px 14px;box-shadow:0 2px 10px rgba(0,0,0,.15);font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:700}
.w-map-address-bar[hidden]{display:none}
.w-map-address-icon{color:var(--gd);flex-shrink:0;display:flex}
.w-map-address-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Indicateur de chargement (04/09/2026) — écran "Envoi en cours" était
   du texte nu sans aucun repère visuel. Anneau CSS simple, pas de GIF/
   librairie, cohérent avec l'esprit léger du widget. */
.w-spinner{width:34px;height:34px;margin:8px auto 16px;border:3px solid rgba(61,122,40,.15);border-top-color:var(--gd);border-radius:50%;animation:w-spin .8s linear infinite}
@keyframes w-spin{to{transform:rotate(360deg)}}

/* Aperçu du signalement existant sur l'écran de doublon (04/09/2026) —
   même contenu que le popup carte (map.js buildPopupHtml), pour montrer
   concrètement de quoi il s'agit plutôt qu'une simple phrase. */
.w-duplicate-card{background:#f5f3ee;border-radius:12px;padding:10px;margin:0 0 12px}
.w-duplicate-photo{width:100%;max-height:110px;object-fit:cover;border-radius:8px;margin-bottom:8px}
.w-duplicate-cat{font-weight:700;color:var(--tx);font-size:.86rem;margin-bottom:2px}
.w-duplicate-addr{color:var(--mt);font-size:.78rem;margin-bottom:4px}
.w-duplicate-meta{display:flex;gap:6px;flex-wrap:wrap;color:var(--lt);font-size:.72rem}
.w-error{font-size:.8rem;color:#8a1f1f;background:#fbeaea;padding:8px 10px;border-radius:8px;margin:6px 0}

.w-field-label{display:block;font-size:.75rem;font-weight:600;color:var(--tx);margin:12px 0 6px}
.w-radio-row{display:flex;gap:14px;font-size:.82rem;color:var(--tx);margin-bottom:6px}
/* margin-bottom (04/09/2026, retour Antoine "ça ne respire pas") — sans
   ça, un champ suivi directement d'un .w-hint (ex: recherche d'adresse)
   n'avait AUCUN espace entre les deux : la liste de résultats masquée
   par defaut ([hidden]) ne compte pour rien dans le flux, le hint
   collait directement sous le champ. */
.w-textarea{width:100%;border:1.5px solid rgba(61,122,40,.15);border-radius:12px;padding:10px 12px;font-family:'DM Sans',sans-serif;font-size:.85rem;resize:vertical;background:#fbfaf7;margin-bottom:12px}
/* Contour de focus aligné sur la charte (04/09/2026, retour Antoine sur
   le champ de recherche d'adresse) — sans ça, tous les champs texte du
   widget (commentaire, email, adresse) affichent le contour bleu par
   defaut du navigateur, hors charte verte/olive. */
.w-textarea:focus{outline:none;border-color:var(--gd);box-shadow:0 0 0 3px rgba(61,122,40,.15)}

/* Recherche d'adresse (04/09/2026) — liste de suggestions BAN, position
   relative au champ (le champ #w-address-search reprend .w-textarea). */
.w-address-results{position:relative;list-style:none;margin:0 0 8px;padding:0;border:1.5px solid rgba(61,122,40,.15);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 4px 12px rgba(44,36,32,.12)}
.w-address-results li{padding:9px 12px;font-size:.82rem;color:var(--tx);cursor:pointer;border-bottom:1px solid rgba(61,122,40,.08)}
.w-address-results li:last-child{border-bottom:none}
.w-address-results li:hover,.w-address-results li.is-active{background:rgba(107,191,78,.1)}
.w-address-results li.is-empty{cursor:default;color:var(--lt)}

.w-btn-primary{width:100%;margin-top:12px;background:var(--gd);color:#fff;border:none;border-radius:12px;padding:12px;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer}
.w-btn-primary:disabled{background:var(--lt);cursor:not-allowed}
.w-btn-primary:not(:disabled):hover{background:var(--gdd)}

.w-btn-secondary{display:block;box-sizing:border-box;width:100%;margin-top:8px;background:#fff;color:var(--gd);border:1.5px solid var(--gd);border-radius:12px;padding:10px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;text-align:center;text-decoration:none}
.w-btn-secondary:hover{background:rgba(107,191,78,.08)}

.w-btn-emergency-call{display:block;box-sizing:border-box;width:100%;margin-top:12px;background:#8a1f1f;color:#fff;border:none;border-radius:12px;padding:13px;font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:700;cursor:pointer;text-align:center;text-decoration:none}
.w-btn-emergency-call:hover{background:#6e1818}