/* ==========================================================================
   MODULE PROPOSITION CITOYENNE — STYLES NÉO-BRUTALISTES 2 COLONNES
   inc/pages/proposition-citoyenne/style.css
   Strictement confiné au formulaire Proposition Citoyenne
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__form:has(.oasis-idea-builder) {
  max-width: 1060px !important;
  margin: 0 auto 30px !important;
  background: #ffffff !important;
  border: 3px solid #101010 !important;
  box-shadow: 6px 6px 0 #101010 !important;
  padding: 24px !important;
}

.oasis-idea-content-box {
  width: 100% !important;
}

.oasis-idea-builder {
  width: 100% !important;
  box-sizing: border-box !important;
}

.oasis-idea-builder * {
  box-sizing: border-box !important;
  /* Empêche N'IMPORTE QUEL contenu (long texte, plusieurs thèmes sélectionnés,
     etc.) de forcer une colonne de la grille à s'élargir au-delà de sa part
     1.1fr/0.9fr — sans ça, un élément de grille/flex ne peut jamais être plus
     étroit que son contenu le plus long (min-width:auto implicite), ce qui
     grignotait l'autre colonne. Règle globale demandée par Mia le 21/08 : doit
     marcher sur TOUTES les zones, pas juste Thème. */
  min-width: 0 !important;
}

/* Tous les émojis du formulaire (rendus en <img class="emoji"> par le navigateur,
   taille par défaut = 1em, donc minuscules à côté des icônes 👥📍💰 dans les
   petits labels 11px) à la même taille que les icônes FontAwesome (14px) —
   demande de Mia le 21/08 : "tous les émojis", pas juste certains. */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder img.emoji,
.oasis-idea-builder img.emoji {
  width: 16px !important;
  height: 16px !important;
}

/* Bandeau noir du volet (titre + croix ✕) : géré par inc/pages/nouveau-sujet/style.css,
   partagé par tous les formulaires "Nouveau sujet" — ne pas le redéfinir ici, ça créait
   un doublon de règles en conflit avec !important des deux côtés (trouvé le 21/08). */

/* 2. En-tête de la proposition (Capsule JAUNE + Cartouche d'Instructions) */
.oasis-idea-builder__head {
  margin: 0 0 24px 0 !important;
  padding: 0 0 16px 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #101010 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Capsule PROPOSITION CITOYENNE : Fond JAUNE FLUO */
.oasis-idea-builder__capsule {
  display: inline-block !important;
  padding: 4px 14px !important;
  background: #ffd600 !important;
  color: #101010 !important;
  border: 2px solid #101010 !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  border-radius: 20px !important;
  box-shadow: 2px 2px 0 #101010 !important;
}

/* Cartouche d'instructions : Fond BLANC + Icône ampoule sur carré NOIR */
.oasis-idea-builder__guide-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  background: #ffffff !important;
  border: 2px solid #101010 !important;
  box-shadow: 3px 3px 0 #101010 !important;
}

.oasis-idea-builder__guide-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: #101010 !important;
  border: 2px solid #101010 !important;
  font-size: 18px !important;
  color: #ffd600 !important;
  flex-shrink: 0 !important;
}

.oasis-idea-builder__guide-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.oasis-idea-builder__guide-text strong {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
}

.oasis-idea-builder__guide-text p {
  margin: 0 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #4a4845 !important;
  line-height: 1.35 !important;
}

/* 3. Masquage des mentions parasites dans le formulaire proposition */
.oasis-idea-builder .wpf-desc,
.oasis-idea-builder .oasis-form-important,
.oasis-idea-builder .oasis-idea-tags-help,
.oasis-idea-builder .oasis-field-help {
  display: none !important;
}

/* 4. Grille 2 colonnes équilibrée */
.oasis-idea-builder__grid {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 24px !important;
  align-items: start !important;
}

.oasis-idea-builder__col-left,
.oasis-idea-builder__col-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* Espace agrandi UNIQUEMENT à partir de Mots-clés (Titre→Thème avait déjà le bon
   espacement, pas touché — demande de Mia le 21/08 après le premier essai trop
   large). ~ sélectionne tous les frères qui suivent .slot-prefix (Thème) dans le
   DOM, donc Mots-clés et tout ce qui vient après, sans lister chaque champ. */
.oasis-idea-builder__slot-prefix ~ * {
  margin-top: 18px !important;
}

/* Titre/Thème/Mots-clés : labels natifs wpForo (.wpf-label dans .wpf-label-wrap),
   partagés avec inc/pages/nouveau-sujet/style.css qui les met en noir avec la même
   spécificité (2 ID) — ajout de .oasis-idea-content-box pour être sûr de gagner ici
   sans toucher au fichier partagé (demande de Mia le 21/08 : toutes les variables en
   rose comme Solution, pas seulement Problème/Solution). */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .wpf-label-wrap .wpf-label,
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .wpf-label-wrap i {
  color: #ff1493 !important;
}

/* Tous les textes "indicatifs" (placeholders + le texte "Quel est le thème de ton
   message ?", qui n'est pas un vrai placeholder mais un bouton custom) dans le même
   style, en un seul passage — plus une règle par champ à deviner. ::placeholder
   couvre Titre, Problème, Solution, mots-clés, adresse, "Précise..." (Autre) d'un
   coup. Demande de Mia le 21/08 : même police, même taille, gris clair partout. */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder ::placeholder,
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-pfx-zone__question,
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-pfx-zone__toggle {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #9a9691 !important;
  opacity: 1 !important;
}

/* Les <select> natifs ("— Choisir —") n'ont pas de ::placeholder — :has() détecte
   quand l'option vide est encore sélectionnée pour leur appliquer le même style,
   et repasse automatiquement en noir gras dès qu'un vrai choix est fait. */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder select:has(option:checked[value=""]) {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #9a9691 !important;
}

/* Thème(s) sélectionné(s) affiché(s) EN ENTIER, jamais tronqués — le membre doit
   voir clairement ce qu'il a choisi (demande de Mia le 21/08). Le natif coupait à
   55% de largeur avec "...". Passe à la ligne sous "Quel est le thème..." plutôt
   que de forcer la largeur (voir min-width:0 plus haut, qui protège les colonnes
   de la grille contre ce genre de contenu long). */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-pfx-zone__toggle {
  flex-wrap: wrap !important;
  height: auto !important;
}
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-pfx-zone__current {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  text-align: left !important;
  font-family: "Inter", sans-serif !important;
}

/* "Contenu" au-dessus de l'éditeur "Compléments utiles" : un ::before généré en
   CSS (non sélectionnable, non copiable) — retiré, le label "📎 COMPLÉMENTS
   UTILES" au-dessus suffit (demande de Mia le 21/08). */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .wpf-field-name-body::before {
  content: "" !important;
  display: none !important;
}

/* <textarea name="thread[body]"> natif que TinyMCE réduit à ~1px de hauteur au
   lieu de display:none — invisible en théorie mais récupérait quand même une
   bordure via .oasis-idea-builder__field textarea (2e cadre fantôme, repéré
   par Mia le 21/08). Neutralisé explicitement en plus du ciblage plus précis
   plus haut, par sécurité. */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .wpf-field-name-body textarea[name="thread[body]"] {
  display: none !important;
}

/* Double cadre autour de l'éditeur "Compléments utiles" : le skin natif de
   TinyMCE (.mce-tinymce, WordPress core) a sa propre bordure grise, EN PLUS de
   notre cadre noir posé sur .wpf-field-wrap — un cadre dans l'autre, repéré par
   Mia le 21/08. Bordure TinyMCE neutralisée, le nôtre suffit. */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .mce-tinymce {
  border: none !important;
  box-shadow: none !important;
}

/* Astérisque "obligatoire" (.wpf-field-required-icon, wpForo natif, colors.css)
   orange par défaut — en rose comme le reste (demande de Mia le 21/08). */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .wpf-field-required-icon {
  color: #ff1493 !important;
}

/* Ombre du bloc "Compléments utiles" (.wpf-field-name-body, éditeur) retirée.
   Le cadre 2px noir venait en double : celui natif sur .wpf-field-name-body
   (nouveau-sujet/style.css) EN PLUS de celui posé sur .wpf-field-wrap juste à
   l'intérieur (harmonisation plus haut) — d'où la bordure plus épaisse repérée
   par Mia le 21/08. Un seul cadre gardé, sur .wpf-field-wrap. */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .wpf-field-name-body {
  border: none !important;
  box-shadow: none !important;
}

/* Bouton "Replier ↑" en bas du panneau Thème déplié — même classe que celui des
   réponses (.oasis-replies-collapse-btn dans oasis-wpforo-social.css), juste
   repositionné ici en bas à droite avec un séparateur (demande de Mia le 21/08). */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-pfx-zone__panel [data-oasis-pfx-collapse] {
  display: block !important;
  margin: 10px 0 0 auto !important;
  padding: 4px 0 0 0 !important;
  border-top: 1px dashed #101010 !important;
  width: 100% !important;
  text-align: right !important;
}

/* Labels de variables : STRICTEMENT IBM Plex Mono 11px Bold ROSE (tous, pas seulement
   Problème/Solution — demande de Mia le 21/08, avant seuls ces deux-là étaient en rose). */
.oasis-idea-builder__field > span,
.oasis-idea-builder__field > label > span,
.oasis-idea-builder__slot-title .wpf-label-wrap,
.oasis-idea-builder__slot-prefix .wpf-label-wrap,
.oasis-idea-builder__slot-tags .wpf-topic-tags-label,
.oasis-idea-builder__label-pink {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #ff1493 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Textareas Problème & Solution — [data-oasis-idea-field] obligatoire : sans ça
   ce sélecteur attrapait aussi le <textarea name="thread[body]"> natif que
   TinyMCE cache (hauteur ~1px, pas display:none), lui donnant quand même une
   bordure = un 2e cadre fantôme sous l'éditeur (repéré par Mia le 21/08). */
.oasis-idea-builder__field textarea[data-oasis-idea-field] {
  width: 100% !important;
  min-height: 90px !important;
  padding: 10px 12px !important;
  background: #ffffff !important;
  border: 2px solid #101010 !important;
  box-shadow: 2.5px 2.5px 0 #101010 !important;
  border-radius: 0 !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  color: #101010 !important;
  resize: vertical !important;
  outline: none !important;
}

.oasis-idea-builder__field textarea[data-oasis-idea-field]:focus {
  border-color: #ffd600 !important;
  box-shadow: 3px 3px 0 #ffd600 !important;
}

/* Compléments utiles — placé AVANT la carte dans l'ordre visuel (demande de Mia le 21/08) :
   le zoom automatique sur le quartier choisi (listener existant, déjà fonctionnel) a le
   temps de se faire avant que la carte soit visible, plutôt que de montrer une carte encore
   dézoomée sur tout Saint-Denis au moment où on y arrive. Uniquement du CSS (order sur un
   flex existant) — aucune structure HTML/JS déplacée, donc aucun risque pour le micro ou la
   carte elle-même. Piège à connaître si on retouche ce bloc : tout enfant de
   .oasis-idea-builder__col-right sans "order" explicite retombe à 0 et repasserait devant —
   les 3 enfants (location / field-details / slot-options) ont donc chacun leur "order". */
.oasis-idea-builder__field-details {
  order: 1 !important;
  margin-top: 0 !important;
}

.oasis-idea-builder__slot-options {
  order: 2 !important;
}

.oasis-idea-builder__field-details textarea,
.oasis-idea-builder__field-details .wpf-field-name-body {
  min-height: 180px !important;
}

/* Selects */
.oasis-idea-builder__field select {
  width: 100% !important;
  padding: 10px 36px 10px 12px !important;
  background: #ffffff !important;
  border: 2px solid #101010 !important;
  box-shadow: 2.5px 2.5px 0 #101010 !important;
  border-radius: 0 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #101010 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23101010' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
  outline: none !important;
}

/* Champs "Précise..." (Autre) : forcés display:none tant que `hidden` est posé par
   updateOther() (assets/js/oasis-wpforo-social.js). Cause du bug du 21/08 trouvée via
   DevTools de Mia : #wpforo #wpforo-wrap .oasis-idea-content-box input { display:block
   !important } (oasis-wpforo-social.css, site entier) a plus de spécificité (2 ID) que
   la version précédente de cette règle et gagnait, gardant le champ visible malgré
   l'attribut hidden. Repris avec le même préfixe #wpforo #wpforo-wrap pour être sûr de
   gagner (piège de spécificité déjà documenté dans CLAUDE.md). Scoper STRICTEMENT à
   .oasis-idea-builder pour ne rien changer ailleurs sur le site. */
#wpforo #wpforo-wrap .oasis-idea-builder [data-oasis-idea-other][hidden] {
  display: none !important;
}

#wpforo #wpforo-wrap .oasis-idea-builder [data-oasis-idea-other]:not([hidden]) {
  display: block !important;
  width: 100% !important;
  margin-top: 8px !important;
  padding: 10px 12px !important;
  background: #ffffff !important;
  border: 2px solid #101010 !important;
  box-shadow: 2.5px 2.5px 0 #101010 !important;
  border-radius: 0 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #101010 !important;
  outline: none !important;
}

/* Public & Quartier sur 2 colonnes */
.oasis-idea-builder__row-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

/* 5. Carte Leaflet (340px) — order:3, tout en bas de la colonne, après Compléments utiles
   ET le bloc smiley/micro/pièces jointes (voir commentaire plus haut, demande de Mia) */
.oasis-idea-builder__location {
  order: 3 !important;
  margin-top: 24px !important;
  border: 2px dashed #101010 !important;
  padding: 14px !important;
  background: #fdfcfb !important;
}

.oasis-idea-builder__label-loc {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #101010 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.oasis-idea-location-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.oasis-idea-location-search {
  width: 100% !important;
  padding: 8px 12px !important;
  background: #ffffff !important;
  border: 2px solid #101010 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  color: #101010 !important;
  outline: none !important;
}

.oasis-idea-location-mini-map {
  width: 100% !important;
  height: 340px !important;
  border: 2px solid #101010 !important;
  background: #eeeced !important;
}

.oasis-idea-location-selected {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  background: #ffd600 !important;
  border: 2px solid #101010 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.oasis-idea-location-clear {
  background: #ffffff !important;
  border: 1.5px solid #101010 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
}

/* 6. Barre d'outils sous Compléments utiles (Médias uniquement — le smiley et le micro ne
   sont PAS ici : ils vivent dans .wpf-extra-fields, sous Mots-clés, voir plus bas). */
.oasis-idea-builder__field-details .wpf-main-fields,
.oasis-idea-builder__field-details .oasis-idea-native-body-block .wpf-main-fields {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 8px !important;
  padding: 6px 0 !important;
}

/* Micro à côté du smiley, dans .wpf-extra-fields (sous Mots-clés) — PAS dans "Compléments
   utiles" comme cru à tort deux fois de suite le 21/08 (captures DevTools de Mia ont
   montré le vrai emplacement : frère de .wpfe-button, le conteneur du smiley). Le plugin
   wpforo-voice-posting positionne son bouton en absolute (top/right fixes) par défaut, peu
   importe où on le déplace dans le DOM — neutralisé ici (voir setupDecisionIdeaForm() dans
   oasis-wpforo-social.js). Format discret aligné sur le smiley, pas un bouton encadré. */
.oasis-idea-builder__slot-options .wpf-extra-fields .wpfv-button {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  display: inline-block !important;
  margin-left: 8px !important;
}

.oasis-idea-builder__slot-options .wpf-extra-fields .wpf-voice-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}

/* Une fois sorti de son emplacement natif wpForo, ce lien perdait la couleur d'encre du
   site et reprenait le rose des liens génériques (bug confirmé le 21/08, capture de Mia :
   noir avant déplacement, rose juste après) — forcé en noir dans tous ses états, taille
   alignée sur le smiley (24px, voir .wpf-smile-button i dans le CSS natif wpForo). */
.oasis-idea-builder__slot-options .wpf-extra-fields .wpf-voice-button,
.oasis-idea-builder__slot-options .wpf-extra-fields .wpf-voice-button:hover,
.oasis-idea-builder__slot-options .wpf-extra-fields .wpf-voice-button:focus,
.oasis-idea-builder__slot-options .wpf-extra-fields .wpf-voice-button .fa-microphone {
  color: #101010 !important;
  font-size: 22px !important;
  line-height: 30px !important;
  vertical-align: text-bottom !important;
}

/* 7. Footer pleine largeur (Diffusion + CTA) */
.oasis-idea-builder__footer-full {
  width: 100% !important;
  margin-top: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Diffusion du sujet */
.oasis-idea-builder .oasis-topic-visibility {
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 2px dashed #101010 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* Même piège que les labels Titre/Thème/Mots-clés : inc/pages/nouveau-sujet/style.css
   stylise ce même legend avec #wpforo #wpforo-wrap (2 ID), plus spécifique que la
   règle ci-dessous seule — .oasis-idea-content-box ajouté pour être sûr de gagner. */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-topic-visibility legend,
.oasis-idea-builder .oasis-topic-visibility legend {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #ff1493 !important;
  padding: 0 8px !important;
}

/* Explication du processus (30j discussion + 30j vote, auteur-e responsable)
   ajoutée en JS juste après le legend "Diffusion du sujet" — demande de Mia
   le 21/08. */
.oasis-idea-builder .oasis-idea-builder__process-note {
  margin: 6px 0 16px !important;
  padding: 0 8px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #4a4845 !important;
}

.oasis-idea-builder .oasis-topic-visibility__choices {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
}

.oasis-idea-builder .oasis-topic-visibility__choices input[type="radio"],
.oasis-idea-builder .oasis-topic-visibility__choices input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Tuiles de diffusion — :not([hidden]) obligatoire : sans ça "Dans cet espace
   uniquement" (masqué en JS car interdit pour une proposition citoyenne) reste
   affiché malgré son attribut hidden, display:flex !important l'emportant sur
   le hidden non-important (piège déjà rencontré plusieurs fois aujourd'hui). */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-topic-visibility__choices label[hidden],
.oasis-idea-builder .oasis-topic-visibility__choices label[hidden] {
  display: none !important;
}
.oasis-idea-builder .oasis-topic-visibility__choices label:not([hidden]) {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  border: 2px solid #101010 !important;
  box-shadow: 3px 3px 0 #101010 !important;
  cursor: pointer !important;
}

/* Tuile sélectionnée : Fond JAUNE FLUO */
.oasis-idea-builder .oasis-topic-visibility__choices label.is-selected,
.oasis-idea-builder .oasis-topic-visibility__choices label:has(input:checked) {
  background: #ffd600 !important;
  border-color: #101010 !important;
  box-shadow: 3px 3px 0 #101010 !important;
}

.oasis-idea-builder .oasis-topic-visibility__choices label span.fas {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border: 2px solid #101010 !important;
  background: #ffffff !important;
  color: #101010 !important;
  font-size: 11px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-topic-visibility__choices label.is-selected span.fas,
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-topic-visibility__choices label:has(input:checked) span.fas,
.oasis-idea-builder .oasis-topic-visibility__choices label.is-selected span.fas,
.oasis-idea-builder .oasis-topic-visibility__choices label:has(input:checked) span.fas {
  background: #101010 !important;
  border-color: #101010 !important;
  color: #ffd600 !important;
}
/* Coche ✓ dessinée en CSS, indépendante de l'icône FontAwesome (fa-lock/fa-eye)
   qui ne s'affichait pas — vraie confirmation visuelle "case cochée" demandée
   par Mia le 21/08 ("c'est plus des cases à cocher"). */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-topic-visibility__choices label.is-selected span.fas::after,
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-topic-visibility__choices label:has(input:checked) span.fas::after {
  content: "✓" !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #ffd600 !important;
}

.oasis-idea-builder .oasis-topic-visibility__choices label strong {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
  display: block !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}

.oasis-idea-builder .oasis-topic-visibility__choices label small {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  color: #4a4845 !important;
  display: block !important;
  line-height: 1.3 !important;
}

/* Bouton d'envoi PUBLIER L'IDÉE en Rose Fluo */
.oasis-idea-builder__slot-buttons .wpf-buttons-wrap {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  justify-content: stretch !important;
  width: 100% !important;
}

.oasis-idea-builder__slot-buttons .wpf-buttons-wrap input[type="submit"],
.oasis-idea-builder__slot-buttons .wpf-buttons-wrap .wpf-button {
  width: 100% !important;
  text-align: center !important;
  padding: 16px 24px !important;
  background: #ff1493 !important;
  color: #ffffff !important;
  border: 3px solid #101010 !important;
  box-shadow: 5px 5px 0 #101010 !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: transform 0.05s, box-shadow 0.05s !important;
}

.oasis-idea-builder__slot-buttons .wpf-buttons-wrap input[type="submit"]:hover,
.oasis-idea-builder__slot-buttons .wpf-buttons-wrap .wpf-button:hover {
  background: #e00078 !important;
  box-shadow: 2px 2px 0 #101010 !important;
  transform: translate(3px, 3px) !important;
}

/* 8. Responsive Mobile (< 900px) */
@media (max-width: 900px), (max-width: 1024px) and (orientation: portrait) {
  .oasis-idea-builder__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .oasis-idea-builder__row-2col {
    grid-template-columns: 1fr !important;
    /* Sur mobile, Public et Quartier passent en colonnes empilées (1fr) et
       héritaient encore du petit gap:12px pensé pour la version côte-à-côte —
       aligné sur les 32px des autres champs, uniquement ici (le 12px reste
       inchangé en horizontal sur grand écran, demande de Mia le 21/08). */
    gap: 32px !important;
  }

  .oasis-idea-builder .oasis-topic-visibility__choices {
    grid-template-columns: 1fr !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__form:has(.oasis-idea-builder) {
    padding: 14px !important;
    box-shadow: none !important;
    border: none !important;
  }
}

/* 9. Carte de lecture d'une proposition déjà publiée (oasis_social_wpforo_render_decision_idea_card()
   dans page.php) — perdue lors de la réécriture du 20/08, reconstruite le 21/08 dans le même
   langage visuel néo-brutaliste que le formulaire ci-dessus (au lieu de l'ancien style gris clair). */

#wpforo #wpforo-wrap .oasis-idea-card {
  display: block !important;
  width: 100% !important;
  margin: 12px 0 !important;
  padding: 20px !important;
  background: #ffffff !important;
  border: 3px solid #101010 !important;
  box-shadow: 5px 5px 0 #101010 !important;
  box-sizing: border-box !important;
}

#wpforo #wpforo-wrap .oasis-idea-card__head {
  display: block !important;
  margin: 0 0 16px !important;
}

#wpforo #wpforo-wrap .oasis-idea-card__head small {
  display: inline-block !important;
  padding: 4px 14px !important;
  background: #ffd600 !important;
  color: #101010 !important;
  border: 2px solid #101010 !important;
  box-shadow: 2px 2px 0 #101010 !important;
  border-radius: 20px !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-idea-card__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

#wpforo #wpforo-wrap .oasis-idea-card__item {
  display: block !important;
  padding: 12px 14px !important;
  background: #fdfcfb !important;
  border: 2px solid #101010 !important;
  box-sizing: border-box !important;
}

#wpforo #wpforo-wrap .oasis-idea-card__item--main,
#wpforo #wpforo-wrap .oasis-idea-card__item--full,
#wpforo #wpforo-wrap .oasis-idea-card__item--location {
  grid-column: 1 / -1 !important;
}

#wpforo #wpforo-wrap .oasis-idea-card__item span {
  display: block !important;
  margin: 0 0 6px !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #101010 !important;
}

#wpforo #wpforo-wrap .oasis-idea-card__item--main span {
  color: #ff1493 !important;
}

#wpforo #wpforo-wrap .oasis-idea-card__item p {
  margin: 0 !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #101010 !important;
  white-space: pre-line !important;
}

#wpforo #wpforo-wrap .oasis-idea-card__location-val {
  margin: 0 !important;
}

#wpforo #wpforo-wrap .oasis-idea-map-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #101010 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: 2px solid #101010 !important;
}

#wpforo #wpforo-wrap .oasis-idea-map-link:hover {
  color: #ff1493 !important;
  border-bottom-color: #ff1493 !important;
}

#wpforo #wpforo-wrap .oasis-idea-map-link-arrow {
  transition: transform 0.1s !important;
}

#wpforo #wpforo-wrap .oasis-idea-map-link:hover .oasis-idea-map-link-arrow {
  transform: translateX(3px) !important;
}

@media (max-width: 680px) {
  #wpforo #wpforo-wrap .oasis-idea-card {
    padding: 14px !important;
  }

  #wpforo #wpforo-wrap .oasis-idea-card__grid {
    grid-template-columns: 1fr !important;
  }
}

/* 10. Pièces jointes d'une proposition publiée (galerie de vignettes) — perdu dans la
   même réécriture du 20/08 que .oasis-idea-card, reconstruit le 21/08. */

#wpforo #wpforo-wrap .oasis-idea-attachments {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

#wpforo #wpforo-wrap .oasis-idea-attachments__label {
  flex: 1 1 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #101010 !important;
}

#wpforo #wpforo-wrap .oasis-idea-attachments .oasis-feed-attachment .oasis-feed-attachment__title {
  display: none !important;
}

#wpforo #wpforo-wrap .oasis-idea-attachments .oasis-feed-attachment--image {
  flex: 1 1 calc(33.333% - 7px) !important;
  max-width: calc(33.333% - 7px) !important;
  margin: 0 !important;
  padding: 4px !important;
  border: 2px solid #101010 !important;
  box-sizing: border-box !important;
}

#wpforo #wpforo-wrap .oasis-idea-attachments .oasis-feed-attachment--image a {
  aspect-ratio: 1 / 1 !important;
}

#wpforo #wpforo-wrap .oasis-idea-attachments .oasis-feed-attachment--image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: #f2ede4 !important;
}

#wpforo #wpforo-wrap .oasis-idea-attachments .oasis-feed-attachment--file,
#wpforo #wpforo-wrap .oasis-idea-attachments .oasis-feed-attachment--audio,
#wpforo #wpforo-wrap .oasis-idea-attachments .oasis-feed-attachment--video {
  flex: 1 1 100% !important;
  width: auto !important;
  margin: 0 !important;
}

#wpforo #wpforo-wrap .oasis-idea-attachments .oasis-feed-attachment--file {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 6px !important;
}

/* Badge trombone sur les vignettes d'image : rendu par la même fonction PHP partout
   (idées ET réponses normales), donc volontairement PAS scopé à .oasis-idea-attachments —
   sans ce position:relative sur le lien, le badge (position:absolute dans
   assets/css/oasis-wpforo-social.css) perd son ancrage et part se coller n'importe où sur
   la page (bug confirmé le 21/08 : badge trombone collé en haut à gauche de l'en-tête,
   capture de Mia — la vraie cause de l'icône "sortie de nulle part"). */
#wpforo #wpforo-wrap .oasis-feed-attachment--image a {
  position: relative !important;
  display: block !important;
}

/* Galerie : au-delà de 3 images, les suivantes sont masquées et un bouton "Voir plus" les
   révèle (voir initialiseIdeaAttachmentsGalleryLimit dans oasis-wpforo-social.js). */
#wpforo #wpforo-wrap .oasis-idea-attachments.oasis-idea-attachments--collapsed .oasis-feed-attachment--image:nth-of-type(n+4),
#wpforo #wpforo-wrap .oasis-reply-attachments.oasis-idea-attachments--collapsed .oasis-feed-attachment--image:nth-of-type(n+4) {
  display: none !important;
}

#wpforo #wpforo-wrap .oasis-idea-attachments__more {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 4px 0 0 !important;
  padding: 8px 14px !important;
  color: #101010 !important;
  background: #ffffff !important;
  border: 2px dashed #101010 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

@media (max-width: 680px) {
  #wpforo #wpforo-wrap .oasis-idea-attachments .oasis-feed-attachment--image {
    flex: 1 1 calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
  }
}

/* ==========================================================================
   HARMONISATION DES ENCADREMENTS — demande de Mia le 21/08
   Tous les champs de saisie en bordure noire simple 1px, sans ombre (au lieu du
   mélange 2px+ombre / 1px gris / accent jaune selon les champs). Localisation et
   Diffusion du sujet restent en pointillé, pas touchés ici (gardés tels quels).
   Préfixe complet #wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder
   partout : ces champs partagent leurs classes avec le formulaire "Nouveau sujet"
   (inc/pages/nouveau-sujet/style.css) et assets/css/oasis-wpforo-social.css, qui
   gagnaient sinon à spécificité égale (piège déjà rencontré 2 fois aujourd'hui).
   ========================================================================== */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-idea-builder__field textarea[data-oasis-idea-field],
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-idea-builder__field select,
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder [data-oasis-idea-other]:not([hidden]),
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-idea-location-search,
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .wpf-field-name-title input[type="text"],
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-pfx-zone__toggle,
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-pfx-zone__panel,
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .wpf-topic-tags,
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .wpf-field-name-body .wpf-field-wrap {
  border: 2px solid #101010 !important;
  border-left-width: 2px !important;
  box-shadow: none !important;
}

/* Puce "#mot-clé ✕" (résumé en haut de la zone Mots-clés) : contour noir retiré,
   espace ajouté avant la croix de suppression (demande de Mia le 21/08). */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-tagpicker__chip {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-tagpicker__chip button {
  margin-left: 4px !important;
}

/* Boutons de la liste de mots-clés ("#bailleur", etc.) un peu plus grands, et
   sans contour coloré (ni noir ni rose) — juste le gris neutre d'origine, plus
   discret (demande de Mia le 21/08). */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-tagpicker__tag {
  min-height: 32px !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  border-color: #ccc !important;
}
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-tagpicker__tag.is-selected {
  border-color: #ccc !important;
}
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-tagpicker__tag:hover {
  border-color: #ccc !important;
}

/* Boîtes Mots-clés ET Thème décalées vers la droite par rapport à Titre/Problème
   (marge/padding hérités de la structure native wpForo, .wpf-td notamment) —
   Thème était le vrai décalé, pas Mots-clés (confirmé capture Mia 21/08 : Titre et
   Mots-clés étaient déjà alignés entre eux, Thème seul dépassait à droite). */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-idea-builder__slot-tags,
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-idea-builder__slot-tags > *,
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-idea-builder__slot-prefix,
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-idea-builder__slot-prefix > * {
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

/* Fond gris de la zone Mots-clés (.oasis-tagpicker, #fafafa par défaut) retiré —
   fond blanc comme le reste du formulaire (demande de Mia le 21/08). */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-tagpicker {
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Catégories de mots-clés (ex. "logement, habitat, condition de vie") mal
   distinguées les unes des autres, pas assez d'espace entre elles — demande de
   Mia le 21/08. Séparateur pointillé + label plus visible (noir, gras, majuscule)
   au lieu du gris pâle 10px quasi invisible d'origine (.oasis-tagpicker__sub-label,
   pensé pour un contexte plus dense ailleurs sur le site, pas touché là-bas). */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-tagpicker__sub-label {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #ff1493 !important;
  opacity: 1 !important;
  margin: 18px 0 8px !important;
  padding-top: 12px !important;
  border-top: 1px dashed #101010 !important;
}
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-tagpicker__sub-label:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* "aucun mot-clé sélectionné" déclaré en IBM Plex Mono italique, mais la police
   chargée sur le site (Google Fonts) n'a AUCUNE graisse en italique (seulement
   500/600/700 normal) — le navigateur retombe sur une police complètement
   différente pour simuler l'italique, d'où le rendu qui "n'a pas l'air d'être
   IBM" repéré par Mia le 21/08. Italique retiré. */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-tagpicker__empty {
  font-family: "IBM Plex Mono", monospace !important;
  font-style: normal !important;
}
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-tagpicker__tags {
  margin-bottom: 6px !important;
}

/* Bouton "Replier ↑" en bas de la zone Mots-clés — masqué par défaut via l'attribut
   hidden (posé en JS), ne doit apparaître qu'une fois la liste ouverte. Piège déjà
   rencontré 2 fois aujourd'hui : :not([hidden]) obligatoire, sinon "display:block
   !important" écrase l'attribut hidden et le bouton reste visible au chargement
   (demande de Mia le 21/08, "tu le fous à l'intérieur"). */
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-tagpicker > [data-oasis-tagpicker-collapse][hidden] {
  display: none !important;
}
#wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder .oasis-tagpicker > [data-oasis-tagpicker-collapse]:not([hidden]) {
  display: block !important;
  width: 100% !important;
  text-align: right !important;
  margin: 10px 0 0 auto !important;
  padding: 8px 0 0 0 !important;
  border-top: 1px dashed #101010 !important;
}