/* ==========================================================================
   OASIS — FORUM SOCIAL WPFORO
   Version nettoyée — 22 juin 2026
   Ce fichier se charge après wpforo-oasis.css.

   !! NE PAS SUPPRIMER NI RÉÉCRIRE CE FICHIER !!
   Avant toute modification, lire :
     kaala-child/CLAUDE.md                     ← contraintes absolues
     kaala-child/docs/OASIS-MODE-OPERATOIRE.md ← architecture complète
   ========================================================================== */

/* IBM Plex Mono : rapatriée ici le 15/08 depuis wpforo-oasis.css (chantier de
   suppression de ce fichier legacy). Seule source de cette police sur le
   site — utilisée massivement dans ce fichier, oasis-profil-membre.css et
   ntm-pages.css (sitewide). Anton/Oswald/Inter restent importées par
   style.css, pas dupliquées ici. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600;700;800&display=swap");

/* ==========================================================================
   1. COULEURS ET VARIABLES
   ========================================================================== */

body.is_wpforo_page-1 {
  --os-page-fallback: #eeeced;
  --os-paper: #f4f1ea;
  --os-surface: rgba(255, 255, 255, 0.82);
  --os-surface-solid: #fff;
  --os-panel: #dfddda;
  --os-ink: #101010;
  --os-muted: #625f5b;
  --os-line: rgba(16, 16, 16, 0.36);
  --os-line-soft: rgba(16, 16, 16, 0.15);
  --os-pink: #ff1493;
  --os-yellow: #ffd600;
  --os-green: #98d800;
  --os-blue: #1e88ff;
  --os-violet: #8e24ff;
  --os-shadow: 4px 4px 0 var(--os-ink);

  background-color: var(--os-page-fallback) !important;
}


/* Le menu mobile bas OASIS (section 17) s'affiche sur TOUT le site, pas
   seulement sur les pages forum (body.is_wpforo_page-1 ci-dessus) — les
   variables --os-* doivent donc aussi exister hors de ce contexte, sinon le
   menu se retrouve sans couleurs sur les pages WordPress classiques. */
:root {
  --os-paper: #f4f1ea;
  --os-surface: rgba(255, 255, 255, 0.82);
  --os-surface-solid: #fff;
  --os-panel: #dfddda;
  --os-ink: #101010;
  --os-muted: #625f5b;
  --os-line: rgba(16, 16, 16, 0.36);
  --os-line-soft: rgba(16, 16, 16, 0.15);
  --os-pink: #ff1493;
  --os-yellow: #ffd600;
  --os-green: #98d800;
  --os-blue: #1e88ff;
  --os-violet: #8e24ff;
}


/* Chrome teinte en bleu clair le fond des champs "recherche récente"/autofill
   — neutralisé sur tous les champs de saisie du forum, natifs ou OASIS. */
#wpforo #wpforo-wrap input:-webkit-autofill,
#wpforo #wpforo-wrap input:-webkit-autofill:hover,
#wpforo #wpforo-wrap input:-webkit-autofill:focus,
#wpforo #wpforo-wrap input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--os-surface-solid) inset !important;
  box-shadow: 0 0 0 1000px var(--os-surface-solid) inset !important;
  -webkit-text-fill-color: var(--os-ink) !important;
  caret-color: var(--os-ink) !important;
}

/* Le champ de recherche natif wpForo (widget "Recherche", barre du haut)
   garde un fond bleu clair au focus/à la saisie (rendu natif macOS du
   champ, pas de l'autofill) — neutralisé partout. */
#wpforo #wpforo-wrap input[type="text"],
#wpforo #wpforo-wrap input[type="search"] {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Filet de sécurité anti-"blanc sur blanc" : wpForo (uploads/wpforo/assets/colors.css,
   généré par le plugin, hors des 3 fichiers OASIS) applique `color: #ffffff` à TOUS
   les <a> du forum par défaut, sans !important. Un lien hérite normalement la couleur
   de son parent (ex: var(--os-ink) posée sur une carte) — mais l'héritage ne fait pas
   le poids face à une règle qui cible le <a> lui-même, même moins spécifique : dès
   qu'on oublie de fixer explicitement la couleur d'un nouveau lien OASIS, il devient
   invisible sur fond clair (trouvé le 08/07 sur "Dernier sujet" des cartes Explorer).
   Cette règle, plus spécifique que celle de wpForo mais sans !important, restaure
   l'héritage par défaut pour tout lien vivant dans un conteneur oasis-* — les règles
   de composants plus bas (qui utilisent !important, convention du fichier) continuent
   de s'appliquer normalement par-dessus quand une couleur différente est voulue. */
#wpforo #wpforo-wrap [class*="oasis-"] a,
#wpforo #wpforo-wrap [id*="oasis-"] a {
  color: inherit;
}

#wpforo #wpforo-wrap input[type="text"],
#wpforo #wpforo-wrap input[type="search"],
#wpforo #wpforo-wrap input[type="text"]:focus,
#wpforo #wpforo-wrap input[type="search"]:focus,
#wpforo #wpforo-wrap input[type="text"]:active,
#wpforo #wpforo-wrap input[type="search"]:active {
  background-color: var(--os-surface-solid) !important;
}

/* ==========================================================================
   2. ICÔNES — CHEMINS MODIFIABLES
   ========================================================================== */

body.is_wpforo_page-1 {
  --os-icon-forum: url("/wp-content/uploads/2026/06/bulle_dialogue-1.svg");
  --os-icon-quartier: url("/wp-content/uploads/2026/06/immeuble.svg");
  --os-icon-ville: url("/wp-content/uploads/2026/06/Targuet_oasis-1.svg");
  --os-icon-moderation: url("/wp-content/uploads/2026/06/Moderation_oasis-1.svg");
  --os-icon-agenda: url("/wp-content/uploads/2026/06/agenda_oasis.svg");
}

#wpforo #wpforo-wrap .oasis-forum-card--forum .oasis-forum-card__icon {
  background-image: var(--os-icon-forum) !important;
}

#wpforo #wpforo-wrap .oasis-forum-card--district .oasis-forum-card__icon {
  background-image: var(--os-icon-quartier) !important;
}

#wpforo #wpforo-wrap .oasis-forum-card--city .oasis-forum-card__icon {
  background-image: var(--os-icon-ville) !important;
}

#wpforo #wpforo-wrap .oasis-forum-card--moderation .oasis-forum-card__icon {
  background-image: var(--os-icon-moderation) !important;
}

#wpforo #wpforo-wrap .oasis-forum-card--agenda .oasis-forum-card__icon {
  background-image: var(--os-icon-agenda) !important;
}

/* ==========================================================================
   3. FONDS ET STRUCTURE GLOBALE
   ========================================================================== */

body.is_wpforo_page-1 .site-content,
body.is_wpforo_page-1 #content,
body.is_wpforo_page-1 #primary,
body.is_wpforo_page-1 #main,
body.is_wpforo_page-1 #wpforo,
body.is_wpforo_page-1 #wpforo #wpforo-wrap {
  background-color: transparent !important;
}

#wpforo #wpforo-wrap,
#wpforo #wpforo-wrap *,
#wpforo #wpforo-wrap *::before,
#wpforo #wpforo-wrap *::after {
  box-sizing: border-box !important;
}

#wpforo #wpforo-wrap {
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap [hidden] {
  display: none !important;
}

#wpforo #wpforo-wrap [data-oasis-page-shell] {
  transition: opacity 0.16s ease !important;
}

#wpforo #wpforo-wrap [data-oasis-page-shell].is-loading {
  opacity: 0.48 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   3 bis. FOND TEXTURÉ ET CADRE DU FORUM
   Migré le 15/08 depuis wpforo-oasis.css (chantier de suppression de ce
   fichier legacy), copié tel quel sans réécriture. Attention : le fond
   texturé a déjà causé un incident (11/07, URL cassée pointant vers un
   serveur tiers) — l'URL ci-dessous est la même que celle déjà vérifiée
   fonctionnelle ce jour-là, ne pas la modifier sans revérifier en HTTP 200.
   ========================================================================== */

body.is_wpforo_page-1,
body[class*="wpforo"] {
  --oasis-bg: #eeeced;
  --oasis-white: #fdfdfd;
  --oasis-black: #101010;
  --oasis-pink: #ff1493;
  --oasis-yellow: #ffd600;
  --oasis-yellow-soft: #ffe23a;
  --oasis-orange: #ff7a00;
  --oasis-line: rgba(16, 16, 16, 0.42);
  --oasis-line-light: rgba(16, 16, 16, 0.18);
  --oasis-noise: url("https://noustousmaires.fr/wp-content/themes/kaala/img/kaala-noise.gif");

  background-color: var(--oasis-bg) !important;
  background-image: var(--oasis-noise) !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: top left !important;
  background-attachment: fixed !important;
}

body.is_wpforo_page-1 .entry-content,
body.is_wpforo_page-1 main,
body.is_wpforo_page-1 article,
body.is_wpforo_page-1 .kaala-body-padding-content,
body.is_wpforo_page-1 .kaala-body-padding,
body.is_wpforo_page-1 .wp-site-blocks {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  max-width: none !important;
}

body.is_wpforo_page-1::before,
body.is_wpforo_page-1::after {
  display: none !important;
}

#wpforo {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
}

#wpforo #wpforo-wrap {
  width: min(1320px, calc(100% - 32px)) !important;
  max-width: none !important;

  margin: 0 auto 64px !important;
  padding: clamp(24px, 2.4vw, 38px) !important;

  background: transparent !important;
  color: var(--oasis-black) !important;

  border: 1px solid var(--oasis-line) !important;
  box-shadow: none !important;

  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Mobile : le cadre gris + le padding intérieur mangeaient trop de largeur
   utile de chaque côté (16px de marge + jusqu'à 24px de padding = 40px
   perdus par côté sur un écran de ~390px). On resserre la marge extérieure ici.
   Le padding intérieur, lui, est piloté par la règle plus spécifique
   "body.is_wpforo_page-1 #wpforo #wpforo-wrap" dans le bloc @media 760px
   plus bas dans ce fichier (elle gagne sur celle-ci à spécificité égale
   grâce à la classe body en plus) — modifier le padding LA-BAS, pas ici. */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #wpforo #wpforo-wrap {
    width: calc(100% - 4px) !important;
  }
}

/* ==========================================================================
   4. MASQUAGE WPFORO NATIF
   ========================================================================== */

body.oasis-social-feed-view #wpforo #wpforo-wrap > #wpforo-menu,
body.oasis-social-feed-view #wpforo #wpforo-wrap > .wpforo-subtop,
body.oasis-social-feed-view #wpforo #wpforo-wrap > .wpforo-main,
body.oasis-social-forums-view #wpforo #wpforo-wrap > #wpforo-menu,
body.oasis-social-forums-view #wpforo #wpforo-wrap > .wpforo-subtop,
body.oasis-social-forums-view #wpforo #wpforo-wrap > .wpforo-main,
body.oasis-main-forum-hub #wpforo #wpforo-wrap > #wpforo-menu,
body.oasis-main-forum-hub #wpforo #wpforo-wrap > .wpforo-subtop,
body.oasis-main-forum-hub #wpforo #wpforo-wrap > .wpforo-main,
body.oasis-quarter-hub #wpforo #wpforo-wrap > #wpforo-menu,
body.oasis-quarter-hub #wpforo #wpforo-wrap > .wpforo-subtop,
body.oasis-quarter-hub #wpforo #wpforo-wrap > .wpforo-main {
  display: none !important;
}

/* Pages natives wpForo personnalisées (Quoi de neuf, Derniers sujets/messages,
   Recherche) : notre mini en-tête a sa propre barre de navigation
   (voir section 5 bis), le menu natif wpForo juste au-dessus fait doublon. On
   ne masque que ce menu, jamais .wpforo-main qui contient le vrai contenu
   natif (résultats de recherche, liste de tags, etc.) sur ces pages. */
body.wpft-recent-activity #wpforo #wpforo-wrap > #wpforo-menu,
body.wpft-recent #wpforo #wpforo-wrap > #wpforo-menu,
body.wpft-search #wpforo #wpforo-wrap > #wpforo-menu {
  display: none !important;
}

/* Barre laterale droite native wpForo sur la page Inscription (sign-up) :
   supprimee a la demande de Mia le 11/07 (widgets recherche/sujets recents/
   sondages sans interet pendant le parcours d'inscription). Scope a
   body.wpft-register uniquement, pas touche aux autres sidebars droites
   natives ailleurs sur le site. Meme traitement sur la page Connexion
   (sign-in, body.wpft-login) demande le 12/07 : cette page n'avait jamais
   ete personnalisee et gardait la sidebar native par defaut. */
body.wpft-register #wpforo #wpforo-wrap .wpforo-right-sidebar,
body.wpft-login #wpforo #wpforo-wrap .wpforo-right-sidebar {
  display: none !important;
}
body.wpft-register #wpforo #wpforo-wrap .wpforo-content,
body.wpft-login #wpforo #wpforo-wrap .wpforo-content {
  width: 100% !important;
  float: none !important;
}

/* Icones qui chevauchent le texte dans les selects (Je participe comme /
   Quartier) sur la page Inscription : wpForo positionne son icone en
   absolute (left:12px) independamment du padding-left que pose le theme
   parent kaala sur tous les <select> — les deux ne se coordonnent jamais
   nativement. Corrige en forcant un padding-left suffisant pour degager
   l'icone, uniquement sur cette page. Demande Mia 11/07. */
body.wpft-register #wpforo #wpforo-wrap .wpf-field-wrap select {
  padding-left: 38px !important;
}

/* Texte de l'option vide du select "Je participe comme" (natif wpForo,
   "--- Choisir ---") remplace par un texte plus explicite, coherent avec
   celui du select Quartier juste en dessous ("Choisis ton quartier").
   Fait en JS (voir oasis-wpforo-social.js) car ce texte est une chaine
   de traduction wpForo, pas un champ personnalise qu'on peut editer. */

/* Lien vers la charte ajoute a cote de la case "J'ai lu et j'accepte les
   regles du forum" (voir oasis-wpforo-social.js pour l'injection DOM). */


/* Banniere d'accueil citoyenne au-dessus du titre "Devenir membre" sur la
   page Inscription : cadre le forum comme un espace de travail serieux,
   pas un lieu de polemique politicienne. Demande Mia 11/07. */


body.wpft-register #wpforo #wpforo-wrap .wpforo-register-content h3 {
  margin-top: 24px !important;
  color: #ff1493 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}


/* Menu natif wpForo (#wpforo-menu, "Fil commun / Quoi de neuf / Derniers
   sujets / Derniers messages / Mots Clés / Connexion / Inscription") retiré
   partout, sans exception : notre mini en-tête (section 5 bis) fournit deja
   la meme navigation sur toutes les pages forum, y compris celles non
   listees ci-dessus (ex: /sign-up/, body.wpft-register). Demande explicite
   de Mia le 11/07. */
#wpforo #wpforo-wrap > #wpforo-menu {
  display: none !important;
}

/* Fil d'Ariane natif wpForo (.wpf-breadcrumb, dans .wpforo-subtop) — masqué
   partout où .wpforo-subtop n'est pas déjà masqué en entier ci-dessus (ex:
   pages Quartier). On ne masque que le fil lui-même, pas tout
   .wpforo-subtop, pour garder les boutons de partage/notifications natifs
   à côté. */
#wpforo #wpforo-wrap .wpf-breadcrumb {
  display: none !important;
}

/* ==========================================================================
   5. HEADER FORUM
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-quarter-hero,
#wpforo #wpforo-wrap .oasis-main-forum-hero {
  color: var(--os-ink) !important;
  background-color: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
}

/* --- Forum header (page d'accueil) ---------------------------------------- */

#wpforo #wpforo-wrap .oasis-forum-header {
  margin-bottom: 16px !important;
  overflow: hidden !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
}

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  body.oasis-social-forum-home .kaala-body-padding-content,
  body.oasis-social-forum-home main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body.oasis-social-forum-home #wpforo {
    margin-top: 0 !important;
  }

  body.oasis-social-forum-home #wpforo #wpforo-wrap {
    padding-top: 4px !important;
  }

}


/* Bandeau repliable (summary natif <details>) */
#wpforo #wpforo-wrap .oasis-forum-header__drawer > summary {
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 14px !important;
  color: var(--os-surface-solid) !important;
  background: var(--os-ink) !important;
  cursor: pointer !important;
  list-style: none !important;
  font: 700 10px/1.25 "IBM Plex Mono", monospace !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__drawer > summary::-webkit-details-marker {
  display: none !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__drawer > summary span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__drawer > summary i {
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  color: var(--os-ink) !important;
  background: var(--os-yellow) !important;
  border: 1.5px solid var(--os-surface-solid) !important;
  font-style: normal !important;
  font: 700 16px/1 "IBM Plex Mono", monospace !important;
  white-space: nowrap !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__drawer[open] > summary i::before {
  content: "−" !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__drawer:not([open]) > summary i::before {
  content: "+" !important;
}

/* Grille principale */
#wpforo #wpforo-wrap .oasis-forum-header__body {
  display: grid !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr) !important;
  min-height: 260px !important;
  background: var(--os-surface-solid) !important;
}

/* Manifesto */
#wpforo #wpforo-wrap .oasis-forum-header__lead {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 26px 26px 20px !important;
  border-right: 2px solid var(--os-ink) !important;
  background-image:
    linear-gradient(rgba(16, 16, 16, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 16, 16, 0.07) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  overflow: hidden !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__eyebrow {
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 0 5px !important;
  color: var(--os-pink) !important;
  border-bottom: 4px solid var(--os-pink) !important;
  font: 700 10px/1 "IBM Plex Mono", monospace !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-forum-header h1 {
  max-width: none !important;
  margin: 0 !important;
  color: var(--os-ink) !important;
  font: 400 clamp(30px, 3.4vw, 52px)/1.05 "Anton", Impact, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__highlight {
  display: inline-block !important;
  max-width: none !important;
  white-space: nowrap !important;
  font-size: 1em !important;
  margin: 2px 0 2px 8px !important;
  padding: 2px 12px 2px 6px !important;
  background: var(--os-yellow) !important;
  color: var(--os-ink) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 4px 4px 0 var(--os-ink) !important;
  transform: rotate(-3.5deg) !important;
  transform-origin: left center !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__subtitle {
  max-width: 46ch !important;
  margin: 10px 0 0 !important;
  padding-left: 13px !important;
  color: var(--os-ink) !important;
  border-left: 5px solid var(--os-pink) !important;
  font: 700 14px/1.3 "Oswald", Impact, sans-serif !important;
}

/* Statistiques — bande façon ticker, encadrée de deux filets */
#wpforo #wpforo-wrap .oasis-forum-header__stats {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 12px !important;
  padding: 8px 0 !important;
  border-top: 1.5px solid var(--os-ink) !important;
  border-bottom: 1.5px solid var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__stat {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__stat strong {
  color: var(--os-ink) !important;
  font: 400 22px/1 "Anton", Impact, sans-serif !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__stat-label {
  color: var(--os-ink) !important;
  font: 500 9px/1.1 "IBM Plex Mono", monospace !important;
  text-transform: uppercase !important;
  opacity: .6 !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__stat-sep {
  color: var(--os-ink) !important;
  opacity: .3 !important;
  font: 400 16px/1 "IBM Plex Mono", monospace !important;
}

/* Bloc "idées les plus soutenues" — 3 sujets les plus likés, fixes */


@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #wpforo #wpforo-wrap .oasis-forum-header__drawer > summary {
    grid-template-columns: 1fr auto !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
    font-size: 7.5px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__drawer > summary span {
    white-space: normal !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__drawer > summary i {
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    font-size: 14px !important;
    border-width: 1.5px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__highlight {
    margin: 4px 0 2px 6px !important;
    padding: 2px 10px 2px 5px !important;
    box-shadow: 3px 3px 0 var(--os-ink) !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__body {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__lead {
    padding: 16px 16px 14px !important;
    border-right: 0 !important;
    border-bottom: 2px solid var(--os-ink) !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__eyebrow {
    margin-bottom: 9px !important;
    font-size: 8.5px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header h1 {
    max-width: none !important;
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.1 !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__subtitle {
    margin-top: 10px !important;
    font-size: 13px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__stats {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px 10px !important;
    margin-top: 12px !important;
    padding: 9px 0 !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__stat strong {
    font-size: 17px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__stat-label {
    font-size: 7.5px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__stat-sep {
    font-size: 13px !important;
  }

}

@media (max-width: 410px) {
  #wpforo #wpforo-wrap .oasis-forum-header__drawer > summary i {
    width: 18px !important;
  }

}

/* Version compacte validée le 22/07/2026 : une seule zone éditoriale.
   Le bandeau noir reste celui du forum ; l'en-tête général du site n'est
   pas reproduit ici. Le bloc de sujets populaires a été retiré du rendu. */
#wpforo #wpforo-wrap .oasis-forum-header__body {
  display: block !important;
  min-height: 0 !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__lead {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr) !important;
  grid-template-areas:
    "eyebrow eyebrow"
    "title subtitle"
    "title stats" !important;
  align-items: start !important;
  column-gap: clamp(28px, 5vw, 72px) !important;
  row-gap: 0 !important;
  min-height: 0 !important;
  padding: 20px clamp(20px, 3vw, 34px) 18px !important;
  border: 0 !important;
  background-size: 36px 36px !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__eyebrow {
  grid-area: eyebrow !important;
  margin-bottom: 11px !important;
}

#wpforo #wpforo-wrap .oasis-forum-header h1 {
  grid-area: title !important;
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  grid-template-rows: auto auto !important;
  justify-content: start !important;
  gap: 10px .28em !important;
  width: max-content !important;
  max-width: 650px !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  font-size: clamp(32px, 3.7vw, 56px) !important;
  line-height: .94 !important;
  white-space: nowrap !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__title-word--build {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__title-word--together {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__highlight {
  display: inline-block !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
  width: max-content !important;
  margin: 0 !important;
  padding: 3px 13px 4px 8px !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__subtitle {
  grid-area: subtitle !important;
  align-self: end !important;
  max-width: 40ch !important;
  margin: 7px 0 12px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__stats {
  grid-area: stats !important;
  align-self: start !important;
  flex-wrap: nowrap !important;
  gap: 9px 12px !important;
  margin-top: 0 !important;
  padding: 7px 0 !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__stat strong {
  font-size: 20px !important;
}

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #wpforo #wpforo-wrap .oasis-forum-header {
    margin-bottom: 10px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__lead {
    display: block !important;
    min-height: 0 !important;
    padding: 10px 12px 10px !important;
    border: 0 !important;
    background-size: 28px 28px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__eyebrow {
    width: max-content !important;
    margin: 0 0 7px !important;
    padding-bottom: 3px !important;
    border-bottom-width: 3px !important;
    font-size: 7px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header h1 {
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    grid-template-rows: auto auto !important;
    justify-content: start !important;
    gap: 0 .28em !important;
    max-width: none !important;
    margin-bottom: 0 !important;
    font-size: clamp(21px, 6vw, 26px) !important;
    line-height: 1 !important;
    white-space: normal !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__title-word--build {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__title-word--together {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__highlight {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    width: max-content !important;
    margin: 5px 0 1px 2px !important;
    padding: 2px 8px 3px 6px !important;
    font-size: 1em !important;
    box-shadow: 2px 2px 0 var(--os-ink) !important;
    transform: rotate(-2deg) !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__subtitle {
    max-width: none !important;
    margin: 8px 0 0 !important;
    padding-left: 8px !important;
    border-left-width: 3px !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__stats {
    gap: 8px 10px !important;
    margin-top: 7px !important;
    padding: 7px 0 !important;
    overflow: visible !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__stat {
    gap: 4px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__stat strong {
    font-size: 18px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__stat-label {
    font-size: 8.5px !important;
    font-weight: 700 !important;
    opacity: .72 !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__stat-sep {
    font-size: 12px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__bottom,
  #wpforo #wpforo-wrap .oasis-forum-header__tabs-list > li > a {
    min-height: 36px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__tabs-list > li > a {
    padding: 0 10px !important;
    font-size: 10px !important;
  }

}

/* Barre du bas — menu wp_nav_menu */
#wpforo #wpforo-wrap .oasis-forum-header__bottom {
  display: flex !important;
  align-items: stretch !important;
  background: var(--os-surface-solid) !important;
  border-top: 2px solid var(--os-ink) !important;
  min-height: 42px !important;
}

/* nav container */
#wpforo #wpforo-wrap .oasis-forum-header__tabs {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* liste du menu */
#wpforo #wpforo-wrap .oasis-forum-header__tabs-list {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  align-items: stretch !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__tabs-list::-webkit-scrollbar {
  display: none !important;
}

/* chaque item de premier niveau */
#wpforo #wpforo-wrap .oasis-forum-header__tabs-list > li {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  flex-shrink: 0 !important;
}

/* lien de premier niveau */
#wpforo #wpforo-wrap .oasis-forum-header__tabs-list > li > a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 18px !important;
  color: var(--os-ink) !important;
  font: 700 13px/1 "Oswald", Impact, sans-serif !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  letter-spacing: .03em !important;
  min-height: 42px !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__tabs-list > li > a:hover {
  background: rgba(16,16,16,.05) !important;
}

/* Neutralise la bordure native wpForo (.wpforo-active, matrix.css) qui
   doublait notre soulignement jaune ci-dessous d'un trait noir natif. */
#wpforo #wpforo-wrap .oasis-forum-header__tabs-list > li.wpforo-active {
  border-bottom: 0 !important;
}

/* soulignement actif */
#wpforo #wpforo-wrap .oasis-forum-header__tabs-list > li.current-menu-item > a::after,
#wpforo #wpforo-wrap .oasis-forum-header__tabs-list > li.current-menu-ancestor > a::after {
  position: absolute !important;
  right: 10px !important;
  bottom: 0 !important;
  left: 10px !important;
  height: 5px !important;
  content: "" !important;
  background: var(--os-yellow) !important;
}

/* ===== Sous-menus (dropdown) ===== */
#wpforo #wpforo-wrap .oasis-forum-header__tabs-list .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 200 !important;
  display: none !important;
  min-width: 200px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 4px 4px 0 var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__tabs-list > li:hover > .sub-menu {
  display: block !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__tabs-list .sub-menu li {
  border-bottom: 1px solid var(--os-line-soft) !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__tabs-list .sub-menu li:last-child {
  border-bottom: 0 !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__tabs-list .sub-menu a {
  display: block !important;
  padding: 11px 16px !important;
  color: var(--os-ink) !important;
  font: 700 11px/1 "Oswald", Impact, sans-serif !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__tabs-list .sub-menu a:hover {
  background: var(--os-yellow) !important;
}

/* ===== Items auth (connexion / inscription / déconnexion / mon profil) ===== */
#wpforo #wpforo-wrap .oasis-forum-header__tabs-list .oasis-auth-item--login,
#wpforo #wpforo-wrap .oasis-forum-header__tabs-list .oasis-auth-item--profile {
  margin-left: auto !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__tabs-list .oasis-auth-item > a {
  border-left: 2px solid var(--os-ink) !important;
  padding: 0 16px !important;
  font-size: 11px !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__tabs-list .oasis-auth-item--logout > a {
  background: var(--os-pink) !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-forum-header__tabs-list .oasis-auth-item--register > a {
  background: var(--os-pink) !important;
  color: var(--os-ink) !important;
}

/* Visibilité selon état de connexion */
body.logged-in #wpforo .oasis-auth-item--login,
body.logged-in #wpforo .oasis-auth-item--register {
  display: none !important;
}

body.logged-out #wpforo .oasis-auth-item--logout,
body.logged-out #wpforo .oasis-auth-item--profile {
  display: none !important;
}

/* --- Mini en-tête (toutes les pages sauf l'accueil) ----------------------- */
/* Barre du bas identique à .oasis-forum-header__bottom (classes réutilisées,
   voir plus haut) : aucune règle CSS à dupliquer pour la navigation. */

#wpforo #wpforo-wrap .oasis-mini-header,
#wpforo #wpforo-wrap .oasis-forum-header {
  margin-bottom: 16px !important;
  overflow: hidden !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-mini-header .oasis-mini-header__crumb,
#wpforo #wpforo-wrap .oasis-forum-header .oasis-mini-header__crumb {
  min-height: 43px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  color: var(--os-surface-solid) !important;
  background: var(--os-ink) !important;
  font: 700 10px/1.25 "IBM Plex Mono", monospace !important;
  text-transform: uppercase !important;
  border-top: 2px solid var(--os-ink) !important;
  border-bottom: 2px solid var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-mini-header .oasis-mini-header__crumb span,
#wpforo #wpforo-wrap .oasis-forum-header .oasis-mini-header__crumb span {
  color: var(--os-surface-solid) !important;
}

#wpforo #wpforo-wrap .oasis-mini-header .oasis-mini-header__crumb a,
#wpforo #wpforo-wrap .oasis-forum-header .oasis-mini-header__crumb a {
  color: var(--os-surface-solid) !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .oasis-mini-header .oasis-mini-header__crumb a:hover,
#wpforo #wpforo-wrap .oasis-forum-header .oasis-mini-header__crumb a:hover {
  text-decoration: underline !important;
}

#wpforo #wpforo-wrap .oasis-mini-header .oasis-mini-header__crumb i,
#wpforo #wpforo-wrap .oasis-forum-header .oasis-mini-header__crumb i {
  color: var(--os-yellow) !important;
  font-style: normal !important;
}

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  /* Masquage des 4 gros blocs défilants sur mobile (Fil Commun, Quartiers, Chantiers, Communs) */
  #wpforo #wpforo-wrap .oasis-forum-header__bottom {
    display: none !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header.oasis-mini-header {
    margin-bottom: 8px !important;
    border: 2px solid var(--os-ink) !important;
    box-shadow: 2.5px 2.5px 0 var(--os-ink) !important;
  }

  #wpforo #wpforo-wrap .oasis-app-header {
    padding: 6px 10px !important;
  }

  #wpforo #wpforo-wrap .oasis-app-logo {
    font-size: 16px !important;
    letter-spacing: -0.01em !important;
  }

  #wpforo #wpforo-wrap .oasis-header-icon-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }

  /* Fil d'Ariane discret, propre et lisible sur une seule ligne */
  #wpforo #wpforo-wrap .oasis-mini-header .oasis-mini-header__crumb,
  #wpforo #wpforo-wrap .oasis-forum-header .oasis-mini-header__crumb {
    min-height: 26px !important;
    padding: 4px 10px !important;
    font-size: 9px !important;
    background: #101010 !important;
    color: #ffffff !important;
    gap: 6px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    border-top: 1.5px solid var(--os-ink) !important;
    border-bottom: none !important;
  }
}

/* ==========================================================================
   6. BOUTONS
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-quarter-new-topic,
#wpforo #wpforo-wrap .oasis-forum-card__button,
#wpforo #wpforo-wrap .oasis-common-feed__head > a,
#wpforo #wpforo-wrap .oasis-main-forum-hero > a {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 12px !important;
  color: #101010 !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

#wpforo #wpforo-wrap button:disabled,
#wpforo #wpforo-wrap .is-busy {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   7. TAGS
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-social-tags,
#wpforo #wpforo-wrap .oasis-quarter-topic__tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

#wpforo #wpforo-wrap .oasis-social-tags a,
#wpforo #wpforo-wrap .oasis-social-tags a:visited,
#wpforo #wpforo-wrap .oasis-quarter-topic__tags a,
#wpforo #wpforo-wrap .oasis-quarter-topic__tags a:visited {
  min-height: 25px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 8px !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: lowercase !important;
}

#wpforo #wpforo-wrap .oasis-social-tags a:hover,
#wpforo #wpforo-wrap .oasis-social-tags a:visited:hover,
#wpforo #wpforo-wrap .oasis-quarter-topic__tags a:hover,
#wpforo #wpforo-wrap .oasis-quarter-topic__tags a:visited:hover {
  background: var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .oasis-social-tags a::before,
#wpforo #wpforo-wrap .oasis-quarter-topic__tags a::before {
  content: "#" !important;
  margin-right: 1px !important;
  background: transparent !important;
}

/* Sélecteur de tags fermé (formulaire "Nouveau sujet") */
/* Le display:none posé en JS sur le champ natif peut être repris par une autre
   initialisation wpForo (autocomplétion native) après coup : on le renforce ici
   en !important pour qu'il reste caché, quoi qu'il arrive ensuite. */
input.wpf-tags,
input[name='thread[tags]'] {
  display: none !important;
}

.oasis-tagpicker {
  margin-top: 10px;
}

.oasis-tagpicker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 25px;
  margin-bottom: 6px;
}

.oasis-tagpicker__empty {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--os-ink);
  opacity: 0.55;
}

.oasis-tagpicker__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 4px 6px 4px 8px;
  background: var(--os-yellow);
  border: 1px solid var(--os-line);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-transform: lowercase;
  color: var(--os-ink);
}

.oasis-tagpicker__chip::before {
  content: "#";
}

.oasis-tagpicker__chip button {
  border: none;
  background: transparent;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  color: var(--os-ink);
  padding: 0;
}

.oasis-tagpicker__counter {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--os-ink);
  opacity: 0.6;
  margin: 0 0 8px;
}

.oasis-tagpicker__group {
  border-top: 1px solid var(--os-line);
  padding: 8px 0;
}

.oasis-tagpicker__group-title {
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  text-transform: lowercase;
  color: var(--os-ink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.oasis-tagpicker__group-title::before {
  content: "▶";
  font-size: 8px;
  color: var(--os-ink);
  opacity: 0.5;
  display: inline-block;
  transition: transform 0.15s;
  flex: none;
}

.oasis-tagpicker__group[open] > .oasis-tagpicker__group-title::before {
  transform: rotate(90deg);
}

.oasis-tagpicker__group-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: rgba(16, 16, 16, 0.035);
  border-radius: 4px;
}

/* "Thématiques secondaires" n'est qu'une ÉTIQUETTE qui regroupe, pas une catégorie
   cliquable au même titre que "Quartier concerné"/"Public concerné" — traitement
   volontairement plus petit/pâle/sans chevron plein, pour que l'œil la lise comme un
   TITRE DE SECTION plutôt qu'un item de plus au même niveau que les autres. Les 4
   catégories qu'elle contient gardent, elles, exactement le même style que les
   catégories de premier niveau (ce sont de vraies catégories) — seule l'indentation
   + la ligne verticale à gauche signale qu'elles sont groupées dessous. */
.oasis-tagpicker__group--secondary > .oasis-tagpicker__group-title,
.oasis-tagpicker__group--muted > .oasis-tagpicker__group-title {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.45;
}

.oasis-tagpicker__group--secondary > .oasis-tagpicker__group-title::before,
.oasis-tagpicker__group--muted > .oasis-tagpicker__group-title::before {
  opacity: 0.3;
}

.oasis-tagpicker__group--secondary > .oasis-tagpicker__group-body {
  background: none;
  padding: 0;
}

.oasis-tagpicker__group-body--nested {
  margin-top: 6px;
  padding-left: 14px;
  border-left: 2px solid var(--os-line-soft);
  gap: 0;
}

.oasis-tagpicker__group-body--nested > .oasis-tagpicker__group {
  border-top: none;
  padding: 6px 0;
}

.oasis-tagpicker__group-body--nested > .oasis-tagpicker__group:first-child {
  padding-top: 2px;
}

.oasis-tagpicker__sub-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--os-ink);
  opacity: 0.55;
  margin: 0 0 4px;
}

.oasis-tagpicker__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.oasis-tagpicker__tag {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  color: var(--os-ink);
  background: var(--os-surface-solid);
  border: 1px solid var(--os-line);
  border-radius: 5px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.oasis-tagpicker__tag::before {
  content: "#";
  margin-right: 2px;
  opacity: 0.5;
}

.oasis-tagpicker__tag:hover {
  background: var(--os-yellow);
  border-color: #d97706;
}

.oasis-tagpicker__tag.is-selected {
  background: var(--os-yellow);
  border-color: #d97706;
  font-weight: 800;
}

/* ==========================================================================
   8. NAVIGATION ET RECHERCHE
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-feed-filters a,
#wpforo #wpforo-wrap .oasis-quarter-filters a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
  border-bottom: 2px solid var(--os-ink) !important;
  border-radius: 0 !important;
  box-shadow: 2.5px 2.5px 0 var(--os-ink) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.1s ease !important;
}

#wpforo #wpforo-wrap .oasis-feed-filters a:hover,
#wpforo #wpforo-wrap .oasis-quarter-filters a:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3.5px 3.5px 0 var(--os-ink) !important;
  background: #fdfdfd !important;
}

#wpforo #wpforo-wrap .oasis-feed-filters a.is-active,
#wpforo #wpforo-wrap .oasis-quarter-filters a.is-active {
  background: var(--os-ink) !important;
  color: var(--os-surface-solid) !important;
  border-color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-social-search,
#wpforo #wpforo-wrap .oasis-wpforo-search-widget {
  margin-bottom: 14px !important;
}

/* Dans les barres latérales gauches (grille avec son propre gap régulier),
   la marge ci-dessus se cumule avec le gap de la grille et déséquilibre les
   espaces entre Mon Profil / Recherche / Explorer — neutralisée ici. */
#wpforo #wpforo-wrap .oasis-social-leftnav .oasis-wpforo-search-widget,
#wpforo #wpforo-wrap .oasis-quarter-leftnav .oasis-wpforo-search-widget {
  margin-bottom: 0 !important;
}

/* Le thème natif wpForo 2026 applique un padding asymétrique (10px en haut,
   20px en bas) à l'intérieur de CHAQUE widget (.wpforo-widget-content) —
   invisible sur "Mon profil" (contenu dense), mais très visible sur
   "Recherche" (un seul champ) : plus de vide en bas qu'en haut. Neutralisé
   uniquement pour ce widget précis. Demande de Mia le 09/07. */
#wpforo #wpforo-wrap .oasis-wpforo-search-widget .wpforo-widget-content {
  padding: 0 !important;
}

/* Même geste que .oasis-social-utilities (barre latérale droite) pour que
   l'espace entre widgets soit identique des deux côtés. */
#wpforo #wpforo-wrap .oasis-social-leftnav,
#wpforo #wpforo-wrap .oasis-quarter-leftnav {
  gap: 14px !important;
}

/* Le champ de recherche hérite d'une police système par défaut (pas la
   police du site) faute de règle explicite côté wpForo natif. */
#wpforo #wpforo-wrap .oasis-wpforo-search-widget input[type="text"],
#wpforo #wpforo-wrap .oasis-social-search input {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Dans la boîte "Recherche" des barres latérales gauches, la boîte
   (.oasis-quarter-widget) gère déjà le padding — la marge propre au
   formulaire ferait dépasser le bas de la boîte. */
#wpforo #wpforo-wrap .oasis-quarter-widget--search .oasis-social-search {
  margin-bottom: 0 !important;
}

/* Barre latérale gauche : la grande carte ".oasis-quarter-widget" (cadre +
   padding, même taille que "Mon profil"/"Explorer") ne bouge plus. À
   l'intérieur, le label (icône loupe + texte "Recherche") garde son propre
   petit cadre — c'est le rendu voulu par Mia le 16/08, carte + cadre
   interne autour d'icône+texte, pas un doublon à retirer. */

#wpforo #wpforo-wrap .oasis-social-search {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

#wpforo #wpforo-wrap .oasis-social-search label {
  min-height: 44px !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 0 13px !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
}

/* L'icône lance la recherche au clic (voir initialiseSearchIconSubmit() dans
   oasis-wpforo-social.js) — curseur pointeur pour que ce soit perceptible. */
#wpforo #wpforo-wrap .oasis-social-search label > i {
  cursor: pointer !important;
}

#wpforo #wpforo-wrap .oasis-social-search input,
#wpforo #wpforo-wrap .oasis-social-search input[type="search"],
#wpforo #wpforo-wrap .oasis-social-search input[type="text"] {
  width: 100% !important;
  color: var(--os-ink) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  font-size: 13px !important;
}

/* Petite croix native "effacer" des champs input[type=search] (Chrome/Safari
   uniquement, Firefox n'en a pas) : recolorée en rose via un masque CSS,
   seul moyen de la teinter (pas un élément HTML classique). Demande de
   Mia le 16/08. */
#wpforo #wpforo-wrap .oasis-social-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 10px !important;
  height: 10px !important;
  cursor: pointer !important;
  background-color: var(--os-pink) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2l12 12M14 2L2 14' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2l12 12M14 2L2 14' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

#wpforo #wpforo-wrap .oasis-social-search button {
  min-height: 44px !important;
  padding: 0 14px !important;
  color: #101010 !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
  cursor: pointer !important;
}

#wpforo #wpforo-wrap .oasis-feed-filters,
#wpforo #wpforo-wrap .oasis-quarter-filters {
  position: sticky !important;
  top: 0px !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 0 !important;
  margin-bottom: 12px !important;
  overflow-x: auto !important;
  background: #d0cfcf !important;
  border: none !important;
}

.admin-bar #wpforo #wpforo-wrap .oasis-feed-filters,
.admin-bar #wpforo #wpforo-wrap .oasis-quarter-filters {
  top: 32px !important;
}

@media (max-width: 782px) {
  .admin-bar #wpforo #wpforo-wrap .oasis-feed-filters,
  .admin-bar #wpforo #wpforo-wrap .oasis-quarter-filters {
    top: 46px !important;
  }
}

#wpforo #wpforo-wrap .oasis-stream-refresh {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2.5px 2.5px 0 var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

#wpforo #wpforo-wrap .oasis-stream-refresh:hover,
#wpforo #wpforo-wrap .oasis-stream-refresh:focus-visible {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3.5px 3.5px 0 var(--os-ink) !important;
  border-color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-stream-refresh .fa-rotate-right {
  font-size: 12px !important;
}

#wpforo #wpforo-wrap .oasis-stream-refresh.is-busy .fa-rotate-right {
  animation: oasis-stream-refresh-spin 0.7s linear infinite !important;
}

#wpforo #wpforo-wrap .oasis-stream-refresh__badge[hidden] {
  display: none !important;
}

#wpforo #wpforo-wrap .oasis-stream-refresh__badge {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  min-width: 18px !important;
  height: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 4px !important;
  color: #fff !important;
  background: var(--os-pink) !important;
  border: 1px solid var(--os-ink) !important;
  border-radius: 999px !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

@keyframes oasis-stream-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   9. FIL COMMUN
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-stream-load-more {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding: 10px !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

#wpforo #wpforo-wrap .oasis-stream-load-more:hover,
#wpforo #wpforo-wrap .oasis-stream-load-more:focus-visible {
  border-color: var(--os-ink) !important;
  background: var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .oasis-stream-load-more__remaining {
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

#wpforo #wpforo-wrap .oasis-stream-load-more.is-busy {
  opacity: 0.6 !important;
  cursor: default !important;
}

#wpforo #wpforo-wrap .oasis-social-layout {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) 280px !important;
  align-items: start !important;
  gap: 20px !important;
}

/* Le bandeau du haut du site (.oasis-site-header, dans style.css — pas un
   des 3 fichiers OASIS) est collant avec une marge de 28px en dessous de
   lui. Nos éléments collants (top ci-dessous) sont calés pile sur son
   bord réel (84px de hauteur + 3px de bordure ≈ 87px, arrondi à 88px), mais
   cette marge de 28px restait une zone "morte" non couverte par personne,
   où le contenu qui défile devenait visible un court instant (signalé par
   Mia le 08/07, capture à l'appui — le 1er correctif, qui déplaçait juste le
   chiffre "top", n'avait rien changé car le vrai problème est cette marge,
   pas le décalage). On la retire ici, uniquement sur les pages forum,
   plutôt que de toucher au fichier du thème. */
body.is_wpforo_page-1 .oasis-site-header,
body.is_wpforo_page-1 .kaala-body-padding-content > header.oasis-site-header {
  margin-bottom: 0 !important;
}

/* Même bug iOS Safari que .oasis-quarter-leftnav/.oasis-quarter-sidebar plus
   bas dans ce fichier (position:sticky peu fiable sur iPhone réel) : le
   bandeau natif se décroche pendant le scroll, laissant un vide gris à
   l'endroit qu'on lui réserve pour caler nos cartes juste en dessous.
   Signalé par Mia le 18/08 sur iPhone réel (capture à l'appui). Même
   correctif ici, restreint aux pages forum comme la règle juste au-dessus. */
body.is_wpforo_page-1 .oasis-site-header,
body.is_wpforo_page-1 .kaala-body-padding-content > header.oasis-site-header {
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

#wpforo #wpforo-wrap .oasis-social-leftnav,
#wpforo #wpforo-wrap .oasis-social-rightbar {
  min-width: 0 !important;
  height: 100% !important;
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  position: sticky !important;
  top: 88px !important;
  max-height: calc(100vh - 108px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-top: 8px !important;
  box-sizing: border-box !important;
  /* Bug documenté de Safari iOS : "position: sticky" échoue souvent quand
     l'élément est directement enfant d'une grille CSS (display:grid) — ça
     marche sur Safari/Chrome ordinateur (pas ce bug-là), mais pas sur iPad
     réel (signalé par Mia le 08/07, confirmé aussi en navigation privée donc
     pas un souci de cache). Le correctif standard pour ce bug précis force
     iOS à recalculer la position collante via l'accélération matérielle. */
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

.admin-bar #wpforo #wpforo-wrap .oasis-social-leftnav,
.admin-bar #wpforo #wpforo-wrap .oasis-social-rightbar {
  top: 120px !important;
  max-height: calc(100vh - 140px) !important;
}

#wpforo #wpforo-wrap .oasis-social-leftnav .oasis-social-explorer {
  position: static !important;
}

#wpforo #wpforo-wrap .oasis-social-rightbar > .oasis-social-utilities,
#wpforo #wpforo-wrap .oasis-quarter-sidebar > .oasis-social-utilities {
  min-width: 0 !important;
}

#wpforo #wpforo-wrap .oasis-common-feed {
  min-width: 0 !important;
}

#wpforo #wpforo-wrap .oasis-common-feed__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 20px 12px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-main__head {
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
  border-bottom: 2px solid var(--os-ink) !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
  margin-bottom: 8px !important;
}

#wpforo #wpforo-wrap .oasis-sticky-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: var(--os-pink) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 3px !important;
}

#wpforo #wpforo-wrap .oasis-common-feed__title-group h2,
#wpforo #wpforo-wrap .oasis-common-feed__head h2 {
  margin: 0 !important;
  font-family: "Anton", "Oswald", Impact, sans-serif !important;
  font-size: clamp(22px, 2.6vw, 28px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  color: var(--os-ink) !important;
  letter-spacing: 0.5px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-card-eyebrow,
#wpforo #wpforo-wrap .oasis-hub-card-eyebrow {
  display: none !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  background: #fbfbfb !important;
  border-bottom: 2px solid var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--os-ink) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* N'apparaît qu'une fois la carte réellement collée en haut de l'écran
   (classe .is-stuck posée par initStickyHeaderObserver() au scroll) —
   au chargement de la page, le nom est déjà visible en gros dans la
   bannière Hero juste au-dessus, pas besoin de le répéter. */
#wpforo #wpforo-wrap .oasis-feed-header-card.is-stuck .oasis-quarter-card-eyebrow,
#wpforo #wpforo-wrap .oasis-feed-header-card.is-stuck .oasis-hub-card-eyebrow {
  display: flex !important;
}

#wpforo #wpforo-wrap .oasis-hero-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: var(--os-ink) !important;
  background: var(--os-yellow) !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  padding: 3px 8px !important;
  text-decoration: none !important;
  margin-bottom: 8px !important;
  width: fit-content !important;
  transition: transform 0.05s ease, background 0.1s ease !important;
}

#wpforo #wpforo-wrap .oasis-hero-back-link:hover {
  background: var(--os-pink) !important;
  color: #ffffff !important;
}

/* Accroche identique sur tous les écrans : top:0 + z-index au-dessus de la
   barre d'admin WordPress (99999). Le décalage réel sous la barre d'admin
   est posé en JS (initStickyHeaderObserver, oasis-wpforo-social.js), qui
   remplace ce top:0 par la vraie hauteur mesurée quand elle est présente. */
#wpforo #wpforo-wrap .oasis-feed-header-card,
#wpforo #wpforo-wrap .oasis-quarter-header-card,
#wpforo #wpforo-wrap .oasis-hub-header-card {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999999 !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 4px 4px 0 var(--os-ink) !important;
  margin-bottom: 16px !important;
  overflow: visible !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

/* Le panneau "Nouveau sujet" (data-oasis-new-topic-panel) s'ouvre À
   L'INTÉRIEUR de cette carte collée en haut de l'écran. Une fois le
   formulaire chargé (éditeur, choix du forum, tags...), la carte devient
   plus haute que l'écran — et comme elle reste "sticky" (collée en haut),
   son bas (le bouton Envoyer) se retrouve hors du champ visible, impossible
   à atteindre en scrollant, sur tous les appareils/méthodes de scroll
   (souris, trackpad, tactile — signalé par Mia le 19/08 sur Mac, tablette
   ET iPhone). On désactive le collage seulement pendant que le panneau est
   ouvert, pour que la page défile normalement jusqu'au bouton. */
#wpforo #wpforo-wrap .oasis-feed-header-card:has(.oasis-quarter-new-topic-panel:not([hidden])),
#wpforo #wpforo-wrap .oasis-quarter-header-card:has(.oasis-quarter-new-topic-panel:not([hidden])),
#wpforo #wpforo-wrap .oasis-hub-header-card:has(.oasis-quarter-new-topic-panel:not([hidden])) {
  position: static !important;
}

#wpforo #wpforo-wrap .oasis-feed-header-card .oasis-feed-filters {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 10px 20px 14px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  /* Ce nav hérite overflow-x:auto de la règle .oasis-feed-filters de base
     (ligne ~1474), ce qui clippe aussi verticalement (règle CSS standard).
     La pastille de notif en coin haut-droit d'un onglet (.oasis-tab-badge,
     dépasse de 8px) était tronquée par CE conteneur en plus de son enfant
     .oasis-feed-filters__tabs juste en dessous — les deux ont besoin du
     padding-top ci-dessus pour laisser la place. Pas de margin-top négatif
     compensateur ici (essayé puis retiré le 19/08) : ça pousse ce nav vers
     le haut dans le flux normal, ce qui pouvait chevaucher le panneau
     "Nouveau sujet" juste au-dessus quand il est ouvert — mieux vaut un
     tout petit espace visuel en plus qu'un risque de chevauchement. */
  flex-wrap: wrap !important;
}

#wpforo #wpforo-wrap .oasis-feed-filters__tabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding-top: 10px !important;
}

#wpforo #wpforo-wrap .oasis-feed-filters__actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

/* Pastille de notification sur les onglets (ex. "À la une" quand il y a des
   sujets dedans) — même format et même position (coin haut-droit du cadre)
   que la pastille de la cloche (.oasis-unread-dot), pour que toutes les
   notifs se ressemblent. Le lien parent a déjà position:relative (règle
   .oasis-feed-filters a plus haut dans ce fichier). */
#wpforo #wpforo-wrap .oasis-tab-badge {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 3px !important;
  background: var(--os-pink) !important;
  color: #ffffff !important;
  border: 1px solid var(--os-ink) !important;
  border-radius: 8px !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#wpforo #wpforo-wrap .oasis-stream-refresh {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2.5px 2.5px 0 var(--os-ink) !important;
  cursor: pointer !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

#wpforo #wpforo-wrap .oasis-stream-refresh i {
  font-size: 13px !important;
}

@media (max-width: 768px) {
  #wpforo #wpforo-wrap .oasis-feed-header-card,
  #wpforo #wpforo-wrap .oasis-quarter-header-card,
  #wpforo #wpforo-wrap .oasis-hub-header-card {
    margin-bottom: 8px !important;
    box-shadow: 2px 2px 0 var(--os-ink) !important;
  }

  #wpforo #wpforo-wrap .oasis-common-feed__head {
    padding: 12px 14px 6px !important;
  }

  #wpforo #wpforo-wrap .oasis-common-feed__title-group h2 {
    font-size: 22px !important;
  }

  #wpforo #wpforo-wrap .oasis-feed-header-card .oasis-feed-filters,
  #wpforo #wpforo-wrap .oasis-quarter-header-card .oasis-feed-filters,
  #wpforo #wpforo-wrap .oasis-hub-header-card .oasis-feed-filters {
    padding: 6px 8px !important;
    gap: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  #wpforo #wpforo-wrap .oasis-feed-filters__tabs {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
  }

  #wpforo #wpforo-wrap .oasis-feed-filters__actions {
    margin-left: auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  #wpforo #wpforo-wrap .oasis-feed-filters a {
    min-height: 26px !important;
    padding: 3px 8px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  }

  #wpforo #wpforo-wrap .oasis-stream-refresh-btn,
  #wpforo #wpforo-wrap .refresh-stream-btn {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 11px !important;
    background: #ffffff !important;
    border: 1.5px solid var(--os-ink) !important;
    box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
    cursor: pointer !important;
  }
    box-shadow: 2px 2px 0 var(--os-ink) !important;
  }
}

#wpforo #wpforo-wrap .oasis-social-empty {
  margin: 12px 0 0 !important;
  padding: 22px !important;
  color: var(--os-muted) !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   10. EXPLORER LES FORUMS
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-social-explorer,
#wpforo #wpforo-wrap .oasis-forums-board__hero,
#wpforo #wpforo-wrap .oasis-forums-section {
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
}

#wpforo #wpforo-wrap .oasis-social-explorer {
  position: sticky !important;
  top: 88px !important;
  padding: 14px !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

.admin-bar #wpforo #wpforo-wrap .oasis-social-explorer {
  top: 120px !important;
}

#wpforo #wpforo-wrap .oasis-social-explorer header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-bottom: 10px !important;
  border-bottom: 3px solid var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-social-explorer h2,
#wpforo #wpforo-wrap .oasis-social-utilities h2 {
  margin: 0 !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-social-explorer a,
#wpforo #wpforo-wrap .oasis-social-explorer summary {
  color: var(--os-ink) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

#wpforo #wpforo-wrap .oasis-social-explorer > a,
#wpforo #wpforo-wrap .oasis-explorer-link,
#wpforo #wpforo-wrap .oasis-explorer-group summary,
#wpforo #wpforo-wrap .oasis-explorer-district summary {
  min-height: 34px !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 5px !important;
  border-bottom: 1px solid var(--os-line-soft) !important;
  font-size: 12px !important;
}

/* Les <summary> n'ont que texte + chevron (pas d'icône en 1re colonne comme
   .oasis-explorer-link) : sans ce template dédié, le texte tombe dans la
   colonne de 18px prévue pour l'icône et retourne à la ligne mot par mot. */
#wpforo #wpforo-wrap .oasis-explorer-group summary,
#wpforo #wpforo-wrap .oasis-explorer-district summary {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

/* "Voir tout l'espace" n'a ni icône ni compteur : une seule colonne pleine
   largeur, sinon le texte hérite la même colonne 18px que ci-dessus. */
#wpforo #wpforo-wrap .oasis-explorer-link--all {
  grid-template-columns: minmax(0, 1fr) !important;
}

#wpforo #wpforo-wrap .oasis-social-explorer > a:not(.is-current):hover,
#wpforo #wpforo-wrap .oasis-explorer-link:hover,
#wpforo #wpforo-wrap .oasis-explorer-group summary:hover,
#wpforo #wpforo-wrap .oasis-explorer-district summary:hover {
  background: var(--os-line-soft) !important;
}

#wpforo #wpforo-wrap .oasis-social-explorer .is-current {
  background: var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .oasis-explorer-children {
  padding-left: 10px !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 16px !important;
  padding: 24px !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__hero h2,
#wpforo #wpforo-wrap .oasis-forums-section__head h2 {
  margin: 0 !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  /* Sans line-height explicite ici, un titre qui passe sur plusieurs lignes
     (ex. "Agir pour nos quartiers" en mobile) hérite d'un line-height fixé en
     px par une autre feuille de style pour un texte plus petit — les lignes
     se chevauchent au lieu de s'empiler. Confirmé en conditions réelles (05/07). */
  line-height: 1 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) !important;
  align-items: start !important;
  gap: 20px !important;
}

#wpforo #wpforo-wrap .oasis-forums-section {
  margin-bottom: 16px !important;
  padding: 18px !important;
}

#wpforo #wpforo-wrap .oasis-forums-section__head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 3px solid var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-forums-section__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#wpforo #wpforo-wrap .oasis-forum-card {
  min-width: 0 !important;
  padding: 15px !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
}

#wpforo #wpforo-wrap .oasis-forum-card__top {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

#wpforo #wpforo-wrap .oasis-forum-card__icon {
  width: 36px !important;
  height: 36px !important;
  background-color: var(--os-yellow) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 19px 19px !important;
  border: 1px solid var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-forum-card h3 {
  margin: 0 !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 22px !important;
}

#wpforo #wpforo-wrap .oasis-forum-card h3 a {
  color: var(--os-ink) !important;
  text-decoration: none !important;
}

/* ==========================================================================
   11. PAGE INTÉRIEURE FORUM — MODÈLE COMMUN
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-main-forum-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 160px auto !important;
  align-items: center !important;
  gap: 24px !important;
  margin-bottom: 18px !important;
  padding: 26px 30px !important;
  border-bottom: 4px solid var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-main-forum-hero h1 {
  margin: 4px 0 10px !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: clamp(42px, 5vw, 70px) !important;
  font-weight: 400 !important;
  line-height: 0.95 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-main-forum-hero__icon {
  display: grid !important;
  place-items: center !important;
}

#wpforo #wpforo-wrap .oasis-main-forum-hero__icon img {
  width: auto !important;
  max-width: 150px !important;
  max-height: 150px !important;
}

#wpforo #wpforo-wrap .oasis-main-forum-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 20px !important;
}

/* ==========================================================================
   12. PAGE QUARTIER — MODÈLE DES HUBS SOCIAUX
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-quarter-page {
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-hero {
  position: relative !important;
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 22px 26px !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 4px 4px 0 var(--os-ink) !important;
  margin-bottom: 20px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-hero__copy {
  min-width: 0 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-hero__copy > p {
  margin: 0 0 4px !important;
  color: var(--os-pink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-quarter-hero h1,
#wpforo #wpforo-wrap .oasis-hub-hero h1 {
  margin: 0 0 8px !important;
  font-family: "Anton", "Oswald", Impact, sans-serif !important;
  font-size: clamp(28px, 3.8vw, 42px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-hero h1 span {
  display: inline !important;
}

#wpforo #wpforo-wrap .oasis-quarter-hero h1 .oasis-quarter-hero__title-part {
  display: inline-block !important;
  white-space: nowrap !important;
}

#wpforo #wpforo-wrap .oasis-quarter-hero h1 .oasis-quarter-hero__separator {
  display: inline !important;
  white-space: pre !important;
}

#wpforo #wpforo-wrap .oasis-quarter-hero__copy > span {
  display: block !important;
  font-size: 14px !important;
  color: var(--os-muted) !important;
  line-height: 1.4 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-hero > .oasis-forum-follow-icon {
  align-self: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2.5px 2.5px 0 var(--os-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   ONGLETS MAÎTRES D'ESPACE & CARTE D'EN-TÊTE QUARTIER UNIFIÉE & STICKY
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-quarter-space-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border-bottom: 2px solid var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-tab-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
  font-family: "Anton", "Oswald", Impact, sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: var(--os-surface-solid) !important;
  transition: background 0.1s ease !important;
}

#wpforo #wpforo-wrap .oasis-quarter-tab-btn:first-child {
  border-right: 2px solid var(--os-ink) !important;
}

/* Variante à un seul onglet (pages Ville/Chantiers/Communs, sans duo
   type "Vie de quartier"/"Comité" — uniformisation du 19/08) : une
   colonne pleine largeur, pas de trait de séparation à droite. */
#wpforo #wpforo-wrap .oasis-quarter-space-tabs--single {
  grid-template-columns: 1fr !important;
}

#wpforo #wpforo-wrap .oasis-quarter-space-tabs--single .oasis-quarter-tab-btn:first-child {
  border-right: 0 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-tab-btn.is-active {
  background: var(--os-yellow) !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-tab-btn:not(.is-active):hover {
  background: #f8f8f8 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-tab-main {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
}

#wpforo #wpforo-wrap .oasis-quarter-tab-icon {
  font-size: 18px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-tab-btn .oasis-forum-follow-icon {
  position: relative !important;
  z-index: 2 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  background: var(--os-surface-solid) !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Doit rester APRÈS le bloc @media(max-width:768px) generique plus haut
   dans ce fichier (.oasis-feed-header-card .oasis-feed-filters, padding
   0 14px 10px) : même spécificité (2 classes), donc à égalité c'est
   l'ordre dans le fichier qui tranche — cette règle-ci doit gagner sur
   mobile aussi. Un 1er essai avait posé la version hub plus HAUT dans le
   fichier (avant ce bloc mobile) : elle perdait silencieusement sur
   mobile, boutons À la une/Récent/Non lus recollés en haut malgré la
   correction (repéré par Mia le 19/08 sur capture réelle). */
#wpforo #wpforo-wrap .oasis-quarter-header-card .oasis-feed-filters,
#wpforo #wpforo-wrap .oasis-hub-header-card .oasis-feed-filters {
  padding: 6px 8px !important;
}

@media (max-width: 768px) {
  #wpforo #wpforo-wrap .oasis-quarter-space-tabs {
    grid-template-columns: 1fr 1fr !important;
    border-bottom: 2px solid var(--os-ink) !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-tab-btn:first-child {
    border-right: 2px solid var(--os-ink) !important;
    border-bottom: none !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-tab-btn {
    padding: 7px 8px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    min-height: 34px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-tab-icon {
    font-size: 13px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-tab-btn .oasis-forum-follow-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }
}

#wpforo #wpforo-wrap .oasis-quarter-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  align-items: start !important;
  gap: 20px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-leftnav,
#wpforo #wpforo-wrap .oasis-quarter-sidebar {
  height: 100% !important;
  position: sticky !important;
  top: 88px !important;
  max-height: calc(100vh - 108px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-top: 8px !important;
  box-sizing: border-box !important;
  /* Même correctif iOS que .oasis-social-leftnav/-rightbar plus haut dans ce
     fichier — voir le commentaire là-bas pour le détail du bug. */
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

.admin-bar #wpforo #wpforo-wrap .oasis-quarter-leftnav,
.admin-bar #wpforo #wpforo-wrap .oasis-quarter-sidebar {
  top: 120px !important;
  max-height: calc(100vh - 140px) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-leftnav {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-leftnav .oasis-social-explorer {
  position: static !important;
}

#wpforo #wpforo-wrap .oasis-quarter-leftnav .oasis-quarter-widget,
#wpforo #wpforo-wrap .oasis-quarter-leftnav .wpforo-widget-wrap,
#wpforo #wpforo-wrap .oasis-quarter-leftnav .wpf-prof-wrap,
#wpforo #wpforo-wrap .oasis-quarter-leftnav .wpf-prof-header,
#wpforo #wpforo-wrap .oasis-quarter-leftnav .wpf-prof-footer,
#wpforo #wpforo-wrap .oasis-social-leftnav .oasis-quarter-widget,
#wpforo #wpforo-wrap .oasis-social-leftnav .wpforo-widget-wrap,
#wpforo #wpforo-wrap .oasis-social-leftnav .wpf-prof-wrap,
#wpforo #wpforo-wrap .oasis-social-leftnav .wpf-prof-header,
#wpforo #wpforo-wrap .oasis-social-leftnav .wpf-prof-footer {
  min-width: 0 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-leftnav .wpf-prof-buttons,
#wpforo #wpforo-wrap .oasis-social-leftnav .wpf-prof-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-leftnav .wpf-prof-avatar img,
#wpforo #wpforo-wrap .oasis-social-leftnav .wpf-prof-avatar img {
  width: 44px !important;
  height: 44px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-leftnav .oasis-quarter-widget,
#wpforo #wpforo-wrap .oasis-quarter-leftnav .wpforo-widget-wrap,
#wpforo #wpforo-wrap .oasis-social-leftnav .oasis-quarter-widget,
#wpforo #wpforo-wrap .oasis-social-leftnav .wpforo-widget-wrap {
  padding: 10px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-leftnav .wpf-prof-header,
#wpforo #wpforo-wrap .oasis-quarter-leftnav .wpf-prof-content,
#wpforo #wpforo-wrap .oasis-quarter-leftnav .wpf-prof-footer,
#wpforo #wpforo-wrap .oasis-social-leftnav .wpf-prof-header,
#wpforo #wpforo-wrap .oasis-social-leftnav .wpf-prof-content,
#wpforo #wpforo-wrap .oasis-social-leftnav .wpf-prof-footer {
  margin-top: 6px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-sidebar > .oasis-sidebar-toggle {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 10px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-main {
  min-width: 0 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topics {
  min-width: 0 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic {
  scroll-margin-top: 190px !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: 16px !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  color: var(--os-ink) !important;
  background: #ffffff !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 5px 5px 0 var(--os-ink) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 7px 7px 0 var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__header {
  padding: 12px 18px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1.5px solid var(--os-ink) !important;
  background: #ffffff !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__author-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__avatar-wrap img {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  border-radius: 50% !important;
  display: block !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__author-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__author-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__author-line strong {
  font-family: var(--font-sub, "Oswald", sans-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--os-ink) !important;
  line-height: 1.1 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__author-sub {
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__prefix {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__content {
  min-width: 0 !important;
  padding: 18px 20px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__title-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic h4 {
  margin: 0 0 10px !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 29px !important;
  line-height: 1.05 !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic h4 a {
  color: var(--os-ink) !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic header b {
  flex: 0 0 auto !important;
  padding: 4px 6px !important;
  color: #fff !important;
  background: var(--os-pink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__content > p,
#wpforo #wpforo-wrap .oasis-expandable-text {
  max-width: 76ch !important;
  margin: 0 0 10px !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

@media (max-width: 680px) {

}

#wpforo #wpforo-wrap .oasis-expandable-text__toggle {
  margin-left: 5px !important;
  padding: 0 !important;
  color: var(--os-pink) !important;
  background: transparent !important;
  border: 0 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

/* ==========================================================================
   13. ACTIONS : SUIVRE, UTILE, RÉPONDRE
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-quarter-topic__actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 17px !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--os-line-soft) !important;
}

/* Ligne séparée pour les actions de modération (Résolu/Épinglé/Désapprouver/
   Fermé/Privé/Supprimer/Outils) : volontairement à part de la barre
   d'actions habitant-e (like/répondre/suivre/signaler/vues), pour que les
   deux publics ne se mélangent pas visuellement. Le <details> parent est
   toujours rendu avec l'attribut "open" (PHP) — pas de bataille de
   spécificité contre le display:none par défaut du navigateur pour un
   <details> fermé, donc display:flex peut rester posé sans condition ici. */
#wpforo #wpforo-wrap .oasis-quarter-topic__mod-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 17px !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 0 !important;
}

/* Accordéon modération (<details>/<summary>) : mêmes réglages que
   .oasis-proposal-flow ("Gestion du vote", juste en dessous dans la carte) —
   même triangle natif du navigateur (pas de chevron maison, list-style-
   position:inside comme l'autre), un seul trait plein au-dessus, pas de
   pointillés ni de trait en dessous. Repliable manuellement par un clic sur
   le résumé (comportement natif du navigateur, aucun JS nécessaire).
   Fermé par défaut partout (corrigé le 19/08 -- l'attribut "open" restait
   pose en dur cote PHP malgre ce commentaire qui pretendait deja "ouvert
   par defaut partout", contredisant Mia). A partir de 1025px (desktop),
   le <summary> (bouton pour déplier) est caché : le contenu est donc forcé
   visible en CSS independamment de l'etat ouvert/ferme natif, sinon les
   modérateurs desktop n'auraient plus aucun moyen de le déplier.
   Seuil relevé de 480px à 1024px le 09/08 (tablette paysage incluse). */
#wpforo #wpforo-wrap .oasis-mod-accordion {
  /* Marge basse retiree entierement (19/08, retour de Mia -- 3e essai) : les
     2 reglages precedents (12px/20px, puis 20px/20px, puis 12px/12px)
     restaient tous imperceptibles car le VRAI gros de l'espace vu par Mia ne
     vient pas d'ici mais de .oasis-quarter-topic__actions juste en dessous
     (deja 14px de margin-top + 12px de padding-top + son propre border-top,
     ~26px a elle seule) -- mes reglages ne faisaient que s'y additionner en
     petites variations invisibles. Plus de marge basse ici du tout: la
     separation d'avec les icones est entierement assuree par cette barre
     elle-meme, pas la peine de la doubler. */
  margin: 12px 0 0 !important;
  border-top: 1px solid #e4e4e4 !important;
}

#wpforo #wpforo-wrap .oasis-mod-accordion summary {
  cursor: pointer !important;
  padding: 9px 0 !important;
  color: #FF1F8E !important;
  font: 900 11px/1.2 "IBM Plex Mono", monospace !important;
  text-transform: uppercase !important;
  list-style-position: inside !important;
}

@media (min-width: 1025px) {
  #wpforo #wpforo-wrap .oasis-mod-accordion > summary {
    display: none !important;
  }

  /* Fix du 19/08 (retour de Mia: boutons de moderation entierement invisibles
     sur grand ecran) -- la regle precedente forcait TOUS les enfants directs
     de l'accordeon (via *:not(summary)) en display:block, y compris
     .oasis-quarter-topic__mod-actions dont la specificite plus faible perdait
     alors face a ce block, cassant son display:flex (regle de base, ligne
     ~2640) -- verifie en isolant les deux regles dans une page de test, le
     block gagnait bien mathematiquement (specificite superieure a cause du
     :not(summary)). Cible desormais precisement cet element avec la MEME
     valeur (flex) qu'il porte deja normalement, au lieu d'un display
     generique -- neutralise le display:none natif d'un <details> ferme sans
     ecraser sa mise en page. Le panneau Outils (deplacer/fusionner/scinder,
     egalement enfant direct de l'accordeon) n'est plus touche par cette regle
     et reste cache par son propre attribut [hidden] comme prevu. */
  #wpforo #wpforo-wrap .oasis-mod-accordion > .oasis-quarter-topic__mod-actions {
    display: flex !important;
  }
}

/* Version compacte : le texte du survol (natif wpForo) répète mot pour mot
   le texte déjà visible, donc pas d'info perdue en réduisant la taille.
   Le bouton "Outils" (déplacer/fusionner/scinder) rejoint la même pilule
   depuis le 19/08 (retour de Mia : avant, il gardait un style "icône nue"
   different du reste et retombait tout seul sur sa propre ligne au lieu de
   tenir a cote de "Supprimer" -- voir PHP, render_moderator_quick_actions). */
#wpforo #wpforo-wrap .oasis-quarter-topic__mod-actions .wpf-action,
#wpforo #wpforo-wrap .oasis-quarter-topic__mod-actions .oasis-quarter-action--mod-tools {
  font-size: 12px !important;
  gap: 4px !important;
  border: 1px solid var(--os-line) !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  background: transparent !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__mod-actions .wpf-action:hover,
#wpforo #wpforo-wrap .oasis-quarter-topic__mod-actions .oasis-quarter-action--mod-tools:hover {
  background: var(--os-yellow) !important;
  border-color: #000 !important;
}

/* Bouton "Éditer" modérateur : classe autonome, sans .oasis-quarter-action
   (dont le survol met le texte/icône en rose — cohérent pour la barre icône
   habitant-e, pas pour une pilule au milieu des boutons wpForo natifs). Même
   gabarit que les pilules .wpf-action pour rester cohérent avec elles (retour
   de Mia le 08/08). */
#wpforo #wpforo-wrap .oasis-mod-edit-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #999999 !important;
  border: 1px solid var(--os-line) !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  background: transparent !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

#wpforo #wpforo-wrap .oasis-mod-edit-btn:hover {
  background: var(--os-yellow) !important;
  border-color: #000 !important;
}

/* Dans la modération d'une réponse (Éditer/Désapprouver/Supprimer), les
   boutons natifs wpForo n'ont pas d'encadré — juste icône + texte, police
   héritée du parent (aucune taille/graisse propre à .wpf-action). Le bouton
   Éditer, même classe que côté sujet, reprend donc EXACTEMENT la même police
   par héritage (font:inherit) plutôt que ses propres valeurs, pour être
   identique à ses voisins au pixel près (retour de Mia le 09/08) — et un
   espacement entre les 3 boutons, qui étaient collés. */
#wpforo #wpforo-wrap .oasis-reply-mod-actions {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

/* Désapprouver + Supprimer sont imbriqués ensemble par wpForo dans un
   <span class="wpforo-action-buttons-wrap"> — un seul enfant direct de
   .oasis-reply-mod-actions, donc le gap ci-dessus ne s'appliquait qu'avant
   ce bloc, pas entre les deux boutons qu'il contient. "display:contents"
   fait disparaître cette boîte intermédiaire : les 3 boutons deviennent
   enfants directs, tous espacés pareil par le même gap (retour de Mia le
   09/08, identique sur tous les écrans). */
#wpforo #wpforo-wrap .oasis-reply-mod-actions .wpforo-action-buttons-wrap {
  display: contents !important;
}

#wpforo #wpforo-wrap .oasis-reply-mod-actions .oasis-mod-edit-btn {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font: inherit !important;
  color: #999999 !important;
}

#wpforo #wpforo-wrap .oasis-reply-mod-actions .oasis-mod-edit-btn:hover {
  background: transparent !important;
  color: #000 !important;
}

/* .oasis-quarter-mod-actions (span autour du bouton Éditer + des pilules
   wpForo) portait jusqu'ici la mise en page uniquement sur .wpforo-action-
   buttons-wrap (le <div> généré par wpForo) — le bouton Éditer, span/bouton
   AVANT ce <div>, restait donc en dehors du flex/grid et retombait tout seul
   à la ligne (bug signalé par Mia le 08/08 : bouton isolé au-dessus des
   autres, aussi bien en grand écran qu'en grille mobile 3 colonnes). Fix :
   la mise en page (flex desktop / grille mobile) est posée directement sur
   .oasis-quarter-mod-actions, et .wpforo-action-buttons-wrap devient
   "display:contents" pour laisser ses propres boutons rejoindre le même
   flex/grid que le bouton Éditer, au lieu de former un sous-conteneur à part. */
#wpforo #wpforo-wrap .oasis-quarter-mod-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__mod-actions .wpforo-action-buttons-wrap {
  display: contents !important;
}

/* Icône engrenage du bouton "Outils" — trop discrète avec le style de base
   (.oasis-quarter-action), on l'agrandit un peu et on l'espace du texte. */
#wpforo #wpforo-wrap .oasis-quarter-action--mod-tools .fa-gear {
  font-size: 15px !important;
  margin-right: 2px !important;
}

/* Bouton de réaction natif (wpForo Advanced Reactions), premier élément de
   la ligne d'actions — encadré brutaliste identique. */
#wpforo #wpforo-wrap .oasis-quarter-topic__actions > div[data-postid] {
  min-height: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  background: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--os-ink) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: transform 0.05s ease, box-shadow 0.05s ease !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__actions > div[data-postid]:empty {
  display: none !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__actions > div[data-postid]:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
  color: var(--os-pink) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__actions .wpf-current-reaction {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Tous les boutons d'actions (.oasis-quarter-action) en boîtes blanches surélevées */
#wpforo #wpforo-wrap .oasis-quarter-action {
  min-height: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  color: var(--os-ink) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: transform 0.05s ease, box-shadow 0.05s ease !important;
}

#wpforo #wpforo-wrap .oasis-quarter-action:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
  color: var(--os-pink) !important;
  background: #ffffff !important;
}

#wpforo #wpforo-wrap .oasis-quarter-action:hover .fas,
#wpforo #wpforo-wrap .oasis-quarter-action:hover .far,
#wpforo #wpforo-wrap .oasis-quarter-action:hover::before {
  color: var(--os-pink) !important;
}

/* Bouton Partager (demande de Mia le 19/08) : confirmation visuelle brève
   après copie du lien (pas de navigator.share natif disponible). */
#wpforo #wpforo-wrap .oasis-quarter-action--share.is-copied {
  background: var(--os-yellow) !important;
  border-color: var(--os-ink) !important;
}

/* État sélectionné : reste sur fond blanc (JAMAIS de fond noir), icône et texte passent en rose fluo */
#wpforo #wpforo-wrap .oasis-quarter-action.is-active,
#wpforo #wpforo-wrap .oasis-quarter-action.is-followed,
#wpforo #wpforo-wrap .oasis-quarter-action.is-pending {
  background: #ffffff !important;
  color: var(--os-pink) !important;
  border-color: var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-action.is-active .fas,
#wpforo #wpforo-wrap .oasis-quarter-action.is-active::before,
#wpforo #wpforo-wrap .oasis-quarter-action.is-followed::before,
#wpforo #wpforo-wrap .oasis-quarter-action.is-pending::before {
  color: var(--os-pink) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-action small {
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-topic__actions .oasis-quarter-action--report {
  margin-left: auto !important;
}

#wpforo #wpforo-wrap .oasis-quarter-action--report::before {
  display: inline-block !important;
  content: "\f071" !important;
  color: inherit !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Bouton Favoris (bookmark, ajouté le 14/08) */
#wpforo #wpforo-wrap .oasis-quarter-action--bookmark {
  position: relative !important;
}

#wpforo #wpforo-wrap .oasis-quarter-action--bookmark::before {
  display: inline-block !important;
  content: "\f02e" !important;
  color: inherit !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Icône commentaire du bouton Répondre */
#wpforo #wpforo-wrap .oasis-quarter-action--reply .fas.fa-message,
#wpforo #wpforo-wrap .oasis-quarter-action--reply .fas.fa-comment {
  font-size: 14px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-action--reply small::before,
#wpforo #wpforo-wrap .oasis-quarter-action--useful small::before {
  content: "(" !important;
}

#wpforo #wpforo-wrap .oasis-quarter-action--reply small::after,
#wpforo #wpforo-wrap .oasis-quarter-action--useful small::after {
  content: ")" !important;
}

/* Compteur de Vues encadré également */
#wpforo #wpforo-wrap .oasis-quarter-views {
  min-height: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  color: var(--os-ink) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
}

#wpforo #wpforo-wrap .oasis-forum-follow-icon:not(.oasis-quarter-action--follow) {
  display: inline-grid !important;
  place-items: center !important;
  color: var(--os-ink) !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#wpforo #wpforo-wrap .oasis-forum-follow-icon .oasis-follow-svg {
  display: none !important;
}

/* Cloche claire par défaut partout HORS barre de messages (en-tête Quartier,
   cartes Vie de quartier/Comité, Explorer) — passe au rose de façon
   permanente une fois suivie, pas juste au survol (demande de Mia le 14/08). */
#wpforo #wpforo-wrap .oasis-forum-follow-icon::before {
  display: block !important;
  content: "\f0f3" !important;
  color: var(--os-line) !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#wpforo #wpforo-wrap .oasis-forum-follow-icon.is-followed::before,
#wpforo #wpforo-wrap .oasis-forum-follow-icon.is-pending::before {
  color: var(--os-pink) !important;
}

/* Sur la carte de message, la cloche reste foncée par défaut (harmonie avec
   Répondre/Signaler, héritée de .oasis-quarter-action, var(--os-muted))
   plutôt que la version claire générique — demande de Mia le 14/08, plus
   spécifique donc prioritaire sur les deux règles ci-dessus.
   Le bouton lui-même (pas juste ::before) doit aussi être explicitement
   remis à var(--os-muted) : la règle générique ".oasis-forum-follow-icon"
   (ligne ~2853) le forçait en noir, plus prioritaire par ordre d'écriture
   que ".oasis-quarter-action" à spécificité égale — la cloche ressortait
   plus foncée que ses voisines Répondre/Signaler/Favoris. Corrigé le 16/08.
   17/08 : restreint aux états ni suivi ni en attente — cette règle, à
   spécificité égale et écrite après, écrasait aussi le rose de l'abonnement
   actif juste au-dessus, la cloche d'un sujet suivi ne changeait jamais
   d'apparence après le clic alors que l'abonnement était bien enregistré. */
#wpforo #wpforo-wrap .oasis-quarter-action--follow.oasis-forum-follow-icon:not(.is-followed):not(.is-pending) {
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-action--follow.oasis-forum-follow-icon:not(.is-followed):not(.is-pending)::before {
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-forum-follow-icon:hover::before,
#wpforo #wpforo-wrap .oasis-forum-follow-icon:focus-visible::before {
  color: var(--os-pink) !important;
}

/* ==========================================================================
   14. RÉPONSE RAPIDE ET NOUVEAU SUJET
   ========================================================================== */

.oasis-quarter-reply-panel:not([hidden]),
.oasis-quarter-new-topic-panel:not([hidden]) {
  display: block !important;
}

#wpforo #wpforo-wrap .oasis-quarter-reply-panel,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel {
  margin-top: 12px !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
  box-shadow: 4px 4px 0 rgba(16, 16, 16, 0.16) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-reply-panel__inner,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__inner {
  padding: 15px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-quick-form {
  display: grid !important;
  gap: 10px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-quick-form > strong {
  color: var(--os-pink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-quarter-quick-form textarea {
  width: 100% !important;
  min-height: 110px !important;
  padding: 12px !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
  border-radius: 0 !important;
  font: inherit !important;
  line-height: 1.45 !important;
  resize: vertical !important;
}

#wpforo #wpforo-wrap .oasis-quarter-quick-form__actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-quick-form__actions button,
#wpforo #wpforo-wrap .oasis-quarter-quick-form__actions a,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__head button,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__fallback a,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__fallback button {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 11px !important;
  color: #101010 !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

#wpforo #wpforo-wrap .oasis-quarter-quick-form__actions .is-secondary {
  color: var(--os-muted) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#wpforo #wpforo-wrap .oasis-quarter-quick-form__status,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__status {
  min-height: 18px !important;
  margin: 0 !important;
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__status.is-success {
  color: #386300 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__status.is-error {
  color: #b0004f !important;
}

#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__head strong {
  font-family: "Anton", Impact, sans-serif !important;
  font-size: 25px !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel form,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-add-topic-wrap,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-topic-form-extra-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel input,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel textarea,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel select {
  max-width: 100% !important;
}

/* Sur certains forums (Fil commun, Ville), wpForo regroupe nativement le préfixe et le
   titre du sujet sur la même ligne, côte à côte (structure différente de celle des pages
   Quartier, où ils sont déjà sur des lignes séparées) — rendu déséquilibré. La largeur figée
   vient À LA FOIS de la cellule ".wpf-td" (classes "wpfw-X" de wpForo, largeurs en colonnes)
   ET du champ lui-même (".wpf-field-name-prefix"/"-title" ont aussi leur propre largeur figée)
   — il faut forcer les deux niveaux pour que ça s'empile, partout, peu importe la structure
   native de ce forum précis. */
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-tr .wpf-td,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field-name-prefix,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field-name-title {
  display: block !important;
  float: none !important;
  width: 100% !important;
  clear: both !important;
}

/* Un peu d'air entre les lignes du formulaire natif wpForo (.wpf-tr = une
   ligne, .wpf-field = un champ à l'intérieur) — vérifié sur le HTML réel
   de la page d'ajout de sujet, scopé à ce panneau uniquement. */
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-tr {
  margin-bottom: 14px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field {
  margin-bottom: 4px !important;
}

#wpforo #wpforo-wrap .oasis-field-help {
  clear: both !important;
  margin: 10px 0 !important;
  padding: 8px 10px !important;
  background: var(--os-surface) !important;
  border: 1px solid var(--os-line-soft) !important;
}

#wpforo #wpforo-wrap .oasis-field-help p {
  margin: 0 !important;
  padding: 2px 0 !important;
  font-size: 12px !important;
  color: var(--os-muted) !important;
}

#wpforo #wpforo-wrap .oasis-topic-visibility {
  margin-top: 14px !important;
  padding: 14px !important;
  background: var(--os-surface) !important;
  border: 1px solid var(--os-line) !important;
}

#wpforo #wpforo-wrap .oasis-topic-visibility__choices {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

#wpforo #wpforo-wrap .oasis-topic-visibility__choices label {
  display: grid !important;
  grid-template-columns: auto 20px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 11px !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
  cursor: pointer !important;
}

#wpforo #wpforo-wrap .oasis-topic-visibility__choices label.is-selected {
  background: var(--os-yellow) !important;
  color: #101010 !important;
}

/* Comité de quartier (07/07) : choix à cases à cocher (multiple), pas de choix
   exclusif comme les radios — une liste verticale simple plutôt que la grille à
   2 colonnes utilisée pour les radios. */
#wpforo #wpforo-wrap .oasis-topic-visibility__choices--multi {
  display: flex !important;
  flex-direction: column !important;
}

/* ==========================================================================
   15. WIDGETS ET COLONNES
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-social-utilities {
  display: grid !important;
  gap: 14px !important;
}

#wpforo #wpforo-wrap .oasis-social-utilities section,
#wpforo #wpforo-wrap .oasis-quarter-widget,
#wpforo #wpforo-wrap .oasis-quarter-profile-box,
#wpforo #wpforo-wrap .wpforo-widget-wrap {
  padding: 14px !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
}

#wpforo #wpforo-wrap .oasis-social-utilities section > h2,
#wpforo #wpforo-wrap .oasis-quarter-widget__title,
#wpforo #wpforo-wrap .oasis-quarter-profile-box h3 {
  margin: 0 0 12px !important;
  padding-bottom: 8px !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  border-bottom: 3px solid var(--os-ink) !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-social-utilities section > a {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 8px 0 !important;
  color: var(--os-ink) !important;
  border-bottom: 1px solid var(--os-line-soft) !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .oasis-social-utilities small {
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9px !important;
}

#wpforo #wpforo-wrap .oasis-utility-subtitle {
  margin: 16px 0 4px !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--os-muted) !important;
}

#wpforo #wpforo-wrap .oasis-utility-subtitle:first-child {
  margin-top: 0 !important;
}

#wpforo #wpforo-wrap .oasis-utility-item__status {
  font-size: 8px !important;
  align-self: center !important;
  justify-self: center !important;
}

#wpforo #wpforo-wrap .oasis-utility-item__status.is-online {
  color: #2fa84f !important;
}

#wpforo #wpforo-wrap .oasis-utility-item__status.is-offline {
  color: var(--os-line) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-profile-box__row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-profile-box__row img {
  width: 54px !important;
  height: 54px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* ==========================================================================
   16. PIÈCES JOINTES ET MÉDIAS
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-feed-attachment {
  max-width: 100% !important;
  margin: 12px 0 !important;
  padding: 11px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--os-surface-solid) 85%, var(--os-paper)) !important;
  border: 1px solid var(--os-line-soft) !important;
}

#wpforo #wpforo-wrap .oasis-feed-attachment img {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 440px) !important;
  max-height: 360px !important;
  margin: 0 !important;
  object-fit: contain !important;
}

#wpforo #wpforo-wrap .oasis-feed-attachment .oasis-feed-attachment__title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#wpforo #wpforo-wrap .oasis-feed-attachment--file .oasis-feed-attachment__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#wpforo #wpforo-wrap .oasis-feed-attachment__badge {
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  color: #101010 !important;
  background: #fff !important;
  border: 1px solid #101010 !important;
  border-radius: 50% !important;
  font-size: 10px !important;
}

#wpforo #wpforo-wrap .oasis-feed-audio,
#wpforo #wpforo-wrap .oasis-feed-video {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

#wpforo #wpforo-wrap .oasis-feed-video {
  max-height: 520px !important;
  object-fit: contain !important;
}

#wpforo #wpforo-wrap .oasis-quarter-replies,
#wpforo #wpforo-wrap .oasis-feed-replies-live {
  margin-top: 14px !important;
  border-top: 2px solid var(--os-ink) !important;
  background: #f4f3f4 !important;
  padding: 14px 18px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-replies summary {
  padding: 6px 0 10px !important;
  color: var(--os-ink) !important;
  cursor: pointer !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  list-style: none !important;
}

#wpforo #wpforo-wrap .oasis-quarter-reply {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 5px 12px !important;
  padding: 12px 14px !important;
  background: color-mix(in srgb, var(--os-surface-solid) 82%, var(--os-paper)) !important;
  border-top: 1px solid var(--os-line-soft) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-reply p {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

/* ==========================================================================
   17. NAVIGATION MOBILE BASSE
   ========================================================================== */

.oasis-social-mobile-nav {
  display: none !important;
}

/* ==========================================================================
   18. RESPONSIVE

   MISE EN PAGE SIDEBARS — VERROUILLÉE le 08/07/2026 (Mia).
   Comportement final validé, obtenu après plusieurs allers-retours :
     - Desktop ET tablette paysage (>900px) : 3 colonnes, collant + réductible
       des deux côtés (règles par défaut de ce fichier + @media min-width:901px
       plus bas).
     - Tablette portrait / mobile (≤900px, sauf gauche masquée <760px, voir
       section dédiée) : colonne de gauche visible et collante, colonne de
       droite statique et repassée pleine largeur sous le contenu.
   NE PAS RETOUCHER cette logique (seuils, position, grid-template-columns)
   sans que Mia le demande explicitement — 2ᵉ verrouillage après un premier
   raté le 07/07. Si un ajustement est demandé, repartir de cet état, pas
   d'une version antérieure.
   ========================================================================== */

@media (max-width: 900px) {
  #wpforo #wpforo-wrap .oasis-social-layout,
  #wpforo #wpforo-wrap .oasis-quarter-layout {
    grid-template-columns: 1fr !important;
  }

  /* Le correctif iOS (translateZ(0), sur la règle sticky de base plus haut
     dans ce fichier) est ce qui permet à cette colonne d'être collante ici
     sans chevaucher la barre du bas — ne pas retirer translateZ(0) sans
     retester sur iPad réel. */
  #wpforo #wpforo-wrap .oasis-quarter-leftnav,
  #wpforo #wpforo-wrap .oasis-social-leftnav {
    height: auto !important;
  }

  /* Barre du bas : statique, pleine largeur sous le contenu. Ne JAMAIS lui
     ajouter de règle "grid-template-columns" sur .oasis-quarter-layout /
     .oasis-social-layout ici (même en apparence anodine, ex. remettre la
     colonne 1 à 210px) : la colonne de gauche ci-dessus s'en charge déjà
     seule (via sa propre classe "collapsed"), et toute règle redondante ici
     l'écrase par ordre de cascade dès que la droite est réduite. */
  #wpforo #wpforo-wrap .oasis-quarter-sidebar,
  #wpforo #wpforo-wrap .oasis-social-rightbar {
    position: static !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-sidebar > .oasis-social-utilities,
  #wpforo #wpforo-wrap .oasis-social-rightbar > .oasis-social-utilities {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.oasis-left-sidebar-collapsed #wpforo #wpforo-wrap .oasis-quarter-layout,
  body.oasis-left-sidebar-collapsed #wpforo #wpforo-wrap .oasis-social-layout {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  #wpforo #wpforo-wrap .oasis-main-forum-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* tabs menu horizontal scroll sur tablette */
  #wpforo #wpforo-wrap .oasis-forum-header__tabs-list > li > a {
    padding: 0 14px !important;
    font-size: 12px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-hero {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__header {
    padding: 10px 14px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__content {
    padding: 14px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic h4 {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }
}

/* Onglets Ville (espaces + thématiques) : version compacte à partir de la
   tablette paysage, pas seulement en mobile strict (760px) — demande de Mia
   le 13/07. 1er essai à 1024px insuffisant (encore "grands onglets" sur
   tablette paysage réelle le 13/07) : la plupart des tablettes récentes en
   paysage (iPad 10e gen/Air/Pro 11") font 1180-1194px de large, pas 1024 —
   remonté à 1280px pour les couvrir toutes sans mordre sur les petits
   écrans d'ordinateur portable. En dessous de ce seuil, carrousel de cartes
   pour les espaces (Chantiers citoyens/Espaces communs) et bande d'onglets
   pour les thématiques — au-dessus, grille de cartes classique (voir règles
   par défaut plus haut dans ce fichier). */
@media (max-width: 1280px) {
  #wpforo #wpforo-wrap .oasis-quarter-space-picker,
  #wpforo #wpforo-wrap .oasis-hub-space-picker {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-space-picker__item {
    flex: 0 0 84% !important;
    max-height: 164px !important;
    scroll-snap-align: start !important;
  }

  /* La 2e rangée (thématiques : Cadre de vie/Grandir et vivre/...) reprend
     par défaut le même style "grande carte carrousel" que la 1ère rangée —
     deux carrousels de 164px empilés prennent tout l'écran avant le contenu
     (signalé par Mia le 13/07, "trop gros"). 1er essai en pastilles boxées :
     jugé "moche" (13/07) — remplacé par le style "bande d'onglets" déjà
     utilisé juste en dessous pour les filtres (À la une/Récent/Non lus,
     .oasis-quarter-filters) : ligne unique qui défile, texte + soulignement
     jaune actif, pas de boîtes empilées. Cohérent avec ce qui suit déjà.
     Balisage __item/__link (pas un <a> direct) depuis l'ajout du bookmark
     de suivi (13/07) — même structure que la page Quartier. */
  #wpforo #wpforo-wrap .oasis-hub-space-picker--sub {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow-x: auto !important;
    scroll-snap-type: none !important;
    gap: 22px !important;
    margin: 4px 0 16px !important;
    padding: 0 16px !important;
    background: var(--os-surface-solid) !important;
    border: 1px solid var(--os-line) !important;
  }

  #wpforo #wpforo-wrap .oasis-hub-space-picker--sub .oasis-quarter-space-picker__item {
    position: relative !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    padding: 13px 28px 10px 2px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 4px solid transparent !important;
    box-shadow: none !important;
    scroll-snap-align: none !important;
  }

  #wpforo #wpforo-wrap .oasis-hub-space-picker--sub .oasis-quarter-space-picker__item.is-active {
    background: transparent !important;
    border-bottom-color: var(--os-yellow) !important;
    box-shadow: none !important;
  }

  #wpforo #wpforo-wrap .oasis-hub-space-picker--sub .oasis-quarter-space-picker__item > .oasis-forum-follow-icon {
    position: absolute !important;
    z-index: 1 !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
  }

  #wpforo #wpforo-wrap .oasis-hub-space-picker--sub .oasis-quarter-space-picker__link {
    display: block !important;
  }

  #wpforo #wpforo-wrap .oasis-hub-space-picker--sub .oasis-quarter-space-picker__link small,
  #wpforo #wpforo-wrap .oasis-hub-space-picker--sub .oasis-quarter-space-picker__link span {
    display: none !important;
  }

  #wpforo #wpforo-wrap .oasis-hub-space-picker--sub .oasis-quarter-space-picker__link strong {
    font-family: "Oswald", Impact, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
  }
}

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  /* Le menu mobile bas est fixe et affiché sur tout le site (pas seulement
     is_wpforo_page-1) : on réserve la place en bas de TOUTES les pages. */
  body {
    padding-bottom: 72px !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__tabs-list > li > a {
    padding: 0 12px !important;
    font-size: 11px !important;
  }

  /* Sous-menu en mobile : ouverture inline (pas de hover possible) */
  #wpforo #wpforo-wrap .oasis-forum-header__tabs-list .sub-menu {
    position: static !important;
    display: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-top: 1px solid var(--os-line-soft) !important;
    background: rgba(16,16,16,.04) !important;
  }

  #wpforo #wpforo-wrap .oasis-forum-header__tabs-list > li.is-submenu-open > .sub-menu {
    display: block !important;
  }

  #wpforo #wpforo-wrap .oasis-social-layout,
  #wpforo #wpforo-wrap .oasis-quarter-layout,
  body.oasis-left-sidebar-collapsed #wpforo #wpforo-wrap .oasis-quarter-layout,
  body.oasis-right-sidebar-collapsed #wpforo #wpforo-wrap .oasis-quarter-layout,
  body.oasis-left-sidebar-collapsed #wpforo #wpforo-wrap .oasis-social-layout,
  body.oasis-right-sidebar-collapsed #wpforo #wpforo-wrap .oasis-social-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #wpforo #wpforo-wrap .oasis-social-explorer,
  #wpforo #wpforo-wrap .oasis-quarter-leftnav,
  #wpforo #wpforo-wrap .oasis-social-leftnav {
    display: none !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-sidebar,
  #wpforo #wpforo-wrap .oasis-social-rightbar {
    grid-column: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    /* Sans ça, le max-height/overflow-y:auto hérité de la règle desktop
       (sticky sidebar) piège "Prochains RDV"/"Votes en cours" dans une mini
       zone de défilement interne au lieu de suivre le flux normal de la
       page — confirmé en conditions réelles (05/07). */
    max-height: none !important;
    overflow: visible !important;
    /* Le "height:100%" hérité de la règle desktop n'avait jamais été retiré
       ici : avec overflow:visible, la boîte garde une hauteur ~nulle/ambiguë
       pour la mise en page (elle ne s'agrandit pas avec son contenu), mais
       le contenu déborde quand même visuellement en dessous — ce qui fait
       que la section suivante de la page (ex. "Règles rapides") démarre
       trop tôt et s'entremêle visuellement avec "Derniers messages"/"Mes
       suivis". Bug signalé par Mia le 08/07 sur mobile réel (capture
       d'écran à l'appui). */
    height: auto !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-sidebar > .oasis-social-utilities,
  #wpforo #wpforo-wrap .oasis-social-rightbar > .oasis-social-utilities {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-sidebar > .oasis-sidebar-toggle,
  #wpforo #wpforo-wrap .oasis-social-rightbar > .oasis-sidebar-toggle {
    display: none !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-hero {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    align-items: flex-start !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-hero__copy > p {
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-hero__copy {
    container-type: inline-size !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-hero h1 {
    --oasis-hero-title-len: 20;
    font-size: clamp(13px, calc(100cqw / (var(--oasis-hero-title-len) * 0.46)), 24px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-hero h1 .oasis-quarter-hero__title-part {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  /* Masquage de la phrase explicative longue sur mobile pour libérer l'écran */
  #wpforo #wpforo-wrap .oasis-quarter-hero__copy > span,
  #wpforo #wpforo-wrap .oasis-quarter-hero.oasis-hub-hero .oasis-quarter-hero__copy > span {
    display: none !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-hero > .oasis-forum-follow-icon {
    align-self: flex-start !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    margin-top: 1px !important;
  }

  #wpforo #wpforo-wrap .oasis-common-feed__head,
  #wpforo #wpforo-wrap .oasis-quarter-main__head {
    align-items: flex-start !important;
    flex-direction: column !important;
    /* Sur mobile, le titre passe au-dessus du bouton (colonne au lieu de
       ligne juste au-dessus) : collant, ce bloc devient bien plus haut et
       mange une part disproportionnée du petit écran, réduisant d'autant
       les messages visibles à l'écran. Retiré du collant ici seulement —
       reste collant en tablette (761-1180px) où il n'a pas ce problème de
       hauteur. Signalé par Mia le 08/07 ("gâche la moitié des messages"). */
    position: static !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__content {
    padding: 17px 14px !important;
  }

  #wpforo #wpforo-wrap .oasis-topic-visibility__choices {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #wpforo #wpforo-wrap .oasis-feed-attachment img {
    max-width: 100% !important;
    max-height: 320px !important;
  }

  .oasis-social-mobile-nav {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    min-height: 66px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    background: var(--os-surface-solid) !important;
    border-top: 2px solid var(--os-ink) !important;
  }

  .oasis-social-mobile-nav a,
  .oasis-social-mobile-nav button {
    display: grid !important;
    place-items: center !important;
    gap: 4px !important;
    padding: 7px 2px !important;
    color: var(--os-ink) !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 9px !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
  }

  .oasis-social-mobile-nav a.is-active,
  .oasis-social-mobile-nav button.is-active {
    color: var(--os-pink) !important;
  }

  .oasis-social-mobile-nav .oasis-mobile-nav-plus-btn {
    width: 44px !important;
    height: 44px !important;
    background: var(--os-pink) !important;
    color: #ffffff !important;
    border: 2px solid var(--os-ink) !important;
    box-shadow: 2px 2px 0 var(--os-ink) !important;
    border-radius: 50% !important;
    margin: -8px auto 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: transform 0.1s ease !important;
  }

  .oasis-social-mobile-nav .oasis-mobile-nav-plus-btn:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0 var(--os-ink) !important;
  }

  .oasis-social-mobile-nav button.is-tools i {
    color: var(--os-ink) !important;
  }

  /* Modale d'action de publication mobile */
  .oasis-mobile-publish-sheet {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  .oasis-mobile-publish-sheet[hidden] {
    display: none !important;
  }

  .oasis-mobile-publish-sheet__backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(16, 16, 16, 0.6) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }

  .oasis-mobile-publish-sheet__card {
    position: relative !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border-top: 3px solid var(--os-ink) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 16px 24px !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 1 !important;
  }

  .oasis-mobile-publish-sheet__drag {
    width: 36px !important;
    height: 4px !important;
    background: #ccc !important;
    border-radius: 2px !important;
    align-self: center !important;
    margin-bottom: 4px !important;
  }

  .oasis-mobile-publish-sheet__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 4px !important;
  }

  .oasis-mobile-publish-sheet__head h3 {
    font-family: "Oswald", Impact, sans-serif !important;
    font-size: 17px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    margin: 0 !important;
    color: var(--os-ink) !important;
  }

  .oasis-mobile-publish-sheet__close {
    background: none !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    color: var(--os-ink) !important;
    padding: 4px 8px !important;
  }

  .oasis-mobile-publish-sheet__options {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .oasis-mobile-publish-opt {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background: var(--os-surface-solid) !important;
    border: 2px solid var(--os-ink) !important;
    box-shadow: 2px 2px 0 var(--os-ink) !important;
    text-decoration: none !important;
    color: var(--os-ink) !important;
    cursor: pointer !important;
    text-align: left !important;
    border-radius: 4px !important;
    width: 100% !important;
  }

  .oasis-mobile-publish-opt.is-primary {
    background: var(--os-yellow) !important;
  }

  .oasis-mobile-publish-opt.is-pink {
    background: var(--os-pink) !important;
    color: #ffffff !important;
  }

  .oasis-mobile-publish-opt.is-pink span {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .oasis-mobile-publish-opt i {
    font-size: 18px !important;
    flex-shrink: 0 !important;
  }

  .oasis-mobile-publish-opt strong {
    display: block !important;
    font-family: "Oswald", Impact, sans-serif !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
  }

  .oasis-mobile-publish-opt span {
    display: block !important;
    font-size: 11px !important;
    color: var(--os-muted) !important;
    font-family: "IBM Plex Mono", monospace !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-section__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

}

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  /* box-shadow:none demande par Mia le 19/08 - mobile uniquement, cartes
     de SUJET seulement (pas les reponses, classe differente). */
  #wpforo #wpforo-wrap .oasis-quarter-topic {
    margin-top: 10px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__header {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__avatar-wrap img {
    width: 36px !important;
    height: 36px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__author-line strong {
    font-size: 13.5px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__author-line .oasis-usergroup-badge {
    font-size: 8.5px !important;
    padding: 1px 4px !important;
    white-space: nowrap !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__author-sub {
    font-size: 9px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__prefix {
    gap: 4px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__prefix .oasis-proposal-status-pill,
  #wpforo #wpforo-wrap .oasis-quarter-topic__prefix .wpf-prefix-tag,
  #wpforo #wpforo-wrap .oasis-quarter-topic__prefix .wpf-prefix {
    font-size: 8.5px !important;
    padding: 2px 5px !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__content {
    padding: 10px 12px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic h4 {
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: 8px !important;
    padding-bottom: 2px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* flex-shrink:0 obligatoire ici : sans lui, les boutons se compressaient
     sous leur taille naturelle sur mobile etroit (nowrap + pas assez de
     place pour les 7 icones), ecrasant surtout le bouton like/dislike (plus
     de contenu que les autres) en un rond illisible qui se chevauche
     (retour de Mia, 20/08, capture a l'appui). */
  #wpforo #wpforo-wrap .oasis-quarter-topic__actions .oasis-quarter-action,
  #wpforo #wpforo-wrap .oasis-quarter-topic__actions > div[data-postid] {
    flex-shrink: 0 !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__actions > div[data-postid],
  #wpforo #wpforo-wrap .oasis-quarter-action,
  #wpforo #wpforo-wrap .oasis-quarter-views {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
    gap: 3px !important;
    box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__actions > div[data-postid] {
    padding: 0 4px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__actions .wpf-reaction-excerpt-wrap {
    gap: 4px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__actions .oasis-recexc-count {
    font-size: 9.5px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__actions .wpf-current-reaction::before,
  #wpforo #wpforo-wrap .oasis-quarter-topic__actions .wpf-reaction-icon::before {
    font-size: 11px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__actions .oasis-quarter-action--report {
    margin-left: 0 !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-replies,
  #wpforo #wpforo-wrap .oasis-feed-replies-live,
  #wpforo #wpforo-wrap .oasis-quarter-replies-empty {
    padding: 10px 10px !important;
  }

  .oasis-reply--loaded {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .oasis-reply-avatar img {
    width: 28px !important;
    height: 28px !important;
    box-shadow: 1px 1px 0 var(--os-ink) !important;
  }

  .oasis-reply-bubble {
    padding: 8px 10px !important;
    box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  }

  .oasis-reply--loaded .oasis-reply-author {
    font-size: 12px !important;
  }

  .oasis-reply--loaded .oasis-usergroup-badge {
    font-size: 8px !important;
    padding: 1px 3px !important;
    white-space: nowrap !important;
  }

  .oasis-reply--loaded .oasis-reply-body {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 6px 0 !important;
  }

  .oasis-social-quick-reply-box {
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  .oasis-social-quick-avatar img {
    width: 28px !important;
    height: 28px !important;
  }

  .oasis-social-quick-input {
    min-height: 48px !important;
    font-size: 16px !important; /* Évite le zoom automatique sur iPhone */
    padding: 6px 10px !important;
  }

  .oasis-social-quick-full-btn {
    font-size: 10px !important;
    padding: 2px 4px !important;
  }

  .oasis-social-quick-send-btn {
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 480px) {
  #wpforo #wpforo-wrap .oasis-quarter-quick-form__actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}

/* Grille des boutons modération (accordéon) : seuil relevé de 480px à
   1024px le 09/08 pour rester cohérent avec le repli de l'accordéon lui-même
   (tablette paysage incluse), séparée du bloc 480px ci-dessus qui ne concerne
   pas la modération. */
@media (max-width: 1024px) {
  /* align-items:center (règle de base, ligne ~2551) sert à centrer
     verticalement les boutons quand ils sont en ligne (desktop) — mais en
     colonne (mobile/tablette) elle centre horizontalement chaque bloc
     (la grille et le bouton Outils), d'où le rendu centré signalé par Mia le
     09/08. On repasse à flex-start pour un alignement à gauche. */
  #wpforo #wpforo-wrap .oasis-quarter-topic__mod-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* La grille est posée directement sur .oasis-quarter-mod-actions (pas sur
     .wpforo-action-buttons-wrap, "display:contents" plus haut dans ce fichier)
     pour que le bouton Éditer rejoigne la même grille 3 colonnes que Résolu/
     Épinglé/Désapprouver/etc au lieu de rester isolé au-dessus (bug signalé
     par Mia le 08/08). Le bouton Outils rejoint la meme grille depuis le
     19/08 (voir PHP, render_moderator_quick_actions), donc il tient
     desormais a cote de "Supprimer" au lieu d'une ligne pleine largeur
     a lui tout seul. */
  #wpforo #wpforo-wrap .oasis-quarter-mod-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    row-gap: 16px !important;
    column-gap: 8px !important;
  }

  /* justify-content:center retire du bouton Editer le 19/08 (Mia: seul ce
     bouton avait son texte centre, tous ses voisins .wpf-action restent
     alignes a gauche par defaut -- incoherence visuelle). */
  #wpforo #wpforo-wrap .oasis-mod-edit-btn {
    min-height: 32px !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-topic__mod-actions .wpf-action,
  #wpforo #wpforo-wrap .oasis-quarter-topic__mod-actions .oasis-quarter-action--mod-tools {
    min-height: 32px !important;
    padding: 4px !important;
  }
}

/* ==========================================================================
   19. ACCESSIBILITÉ
   ========================================================================== */

#wpforo #wpforo-wrap a:focus-visible,
#wpforo #wpforo-wrap button:focus-visible,
#wpforo #wpforo-wrap input:focus-visible,
#wpforo #wpforo-wrap textarea:focus-visible,
#wpforo #wpforo-wrap select:focus-visible,
#wpforo #wpforo-wrap summary:focus-visible {
  outline: 3px solid var(--os-pink) !important;
  outline-offset: 3px !important;
}

#wpforo #wpforo-wrap .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  #wpforo #wpforo-wrap *,
  #wpforo #wpforo-wrap *::before,
  #wpforo #wpforo-wrap *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

}


/* ==========================================================================
   OASIS - Correctif stable v6 : header, sidebars, formulaire natif intégré
   ========================================================================== */

/* kaala-child/style.css (hors des 3 fichiers OASIS, jamais modifié directement)
   met "overflow-x: hidden" sur <body> pour tout le site. N'importe quel
   ancêtre avec un overflow non-visible casse position:sticky pour tous ses
   descendants — c'est ce qui neutralisait l'effet collant des sidebars
   partout sur le forum (07/07). On ne touche pas au fichier du thème, on
   annule juste cette règle sur les pages forum où elle ne sert à rien. */
body.is_wpforo_page-1 {
  overflow-x: visible !important;
}

/* :not(.oasis-offcanvas-content) : le tiroir mobile Outils (data-oasis-toggle-mobile-sidebar)
   reutilise le meme id #wpforo-wrap pour sa copie des widgets sidebar (voir
   inc/oasis-wpforo-social.php ~L2928) -- sans cette exclusion, ce gris de fond
   (prevu pour le cadre forum normal) s'imposait aussi dans le tiroir a la place
   du blanc+noise pose sur .oasis-global-offcanvas__panel (demande de Mia, 20/08). */
body.is_wpforo_page-1 #wpforo #wpforo-wrap:not(.oasis-offcanvas-content) {
  background: #d0cfcf !important;
  padding: 18px !important;
}

/* La copie mobile de #wpforo-wrap (tiroir Outils) garde sinon la bordure
   grise claire posee par la regle "#wpforo #wpforo-wrap" plus haut dans ce
   fichier (var(--oasis-line)) -- on veut les box posees a meme le noise,
   sans cadre autour du groupe (demande de Mia, 20/08). Selecteur avec les
   2 memes id que la regle a battre (#wpforo + #wpforo-wrap), sinon perd en
   specificite malgre le !important. */
#wpforo #wpforo-wrap.oasis-offcanvas-content {
  border: none !important;
}

#wpforo #wpforo-wrap .oasis-social-layout,
#wpforo #wpforo-wrap .oasis-quarter-layout,
#wpforo #wpforo-wrap .oasis-social-leftnav,
#wpforo #wpforo-wrap .oasis-social-rightbar,
#wpforo #wpforo-wrap .oasis-quarter-leftnav,
#wpforo #wpforo-wrap .oasis-quarter-main,
#wpforo #wpforo-wrap .oasis-quarter-sidebar,
#wpforo #wpforo-wrap .oasis-common-feed,
#wpforo #wpforo-wrap .oasis-social-utilities,
#wpforo #wpforo-wrap .oasis-forums-board,
#wpforo #wpforo-wrap .oasis-forums-board__layout,
#wpforo #wpforo-wrap .oasis-forums-board__main {
  min-width: 0 !important;
}

/* Seuil remonté à 901px le 08/07 (demande de Mia) : la mise en page tablette
   2 colonnes (section "18. RESPONSIVE" plus bas) s'arrête maintenant à
   900px, donc la plage 901-1180px (tablette paysage) doit utiliser CETTE
   mise en page 3 colonnes desktop — y compris les variantes réduites
   ci-dessous, sinon le bouton "Réduire" rétrécirait la barre elle-même
   (règle générale, hors media query) SANS que la colonne de la grille ne se
   réduise en face, laissant un vide à la place de la barre au lieu
   d'agrandir la colonne centrale (piège identique à celui déjà documenté
   ici le 05/07, mais côté 901-1180 cette fois). */
@media (min-width: 901px) {
  #wpforo #wpforo-wrap .oasis-social-layout,
  #wpforo #wpforo-wrap .oasis-quarter-layout {
    grid-template-columns: minmax(0, 1fr) 280px !important;
  }

  body.oasis-right-sidebar-collapsed #wpforo #wpforo-wrap .oasis-social-layout,
  body.oasis-right-sidebar-collapsed #wpforo #wpforo-wrap .oasis-quarter-layout {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }
}

#wpforo #wpforo-wrap .oasis-sidebar-toggle,
#wpforo #wpforo-wrap .oasis-quarter-leftnav-toggle {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  color: #101010 !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: none !important;
  cursor: pointer !important;
}

#wpforo #wpforo-wrap .oasis-sidebar-toggle__icon::before {
  display: block !important;
  color: #101010 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: .8 !important;
}

#wpforo #wpforo-wrap [data-oasis-sidebar="left"] .oasis-sidebar-toggle__icon::before,
#wpforo #wpforo-wrap .oasis-quarter-leftnav-toggle .oasis-sidebar-toggle__icon::before {
  content: "‹" !important;
}

#wpforo #wpforo-wrap [data-oasis-sidebar="right"] .oasis-sidebar-toggle__icon::before {
  content: "›" !important;
}

body.oasis-left-sidebar-collapsed #wpforo #wpforo-wrap [data-oasis-sidebar="left"] .oasis-sidebar-toggle__icon::before {
  content: "›" !important;
}

body.oasis-right-sidebar-collapsed #wpforo #wpforo-wrap [data-oasis-sidebar="right"] .oasis-sidebar-toggle__icon::before {
  content: "‹" !important;
}

body.oasis-left-sidebar-collapsed #wpforo #wpforo-wrap .oasis-social-leftnav > *:not(.oasis-sidebar-toggle),
body.oasis-left-sidebar-collapsed #wpforo #wpforo-wrap .oasis-quarter-leftnav > *:not(.oasis-sidebar-toggle):not(.oasis-quarter-leftnav-toggle),
body.oasis-right-sidebar-collapsed #wpforo #wpforo-wrap .oasis-social-rightbar > *:not(.oasis-sidebar-toggle),
body.oasis-right-sidebar-collapsed #wpforo #wpforo-wrap .oasis-quarter-sidebar > *:not(.oasis-sidebar-toggle) {
  display: none !important;
}

body.oasis-left-sidebar-collapsed #wpforo #wpforo-wrap .oasis-social-leftnav,
body.oasis-left-sidebar-collapsed #wpforo #wpforo-wrap .oasis-quarter-leftnav,
body.oasis-right-sidebar-collapsed #wpforo #wpforo-wrap .oasis-social-rightbar,
body.oasis-right-sidebar-collapsed #wpforo #wpforo-wrap .oasis-quarter-sidebar {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  overflow: visible !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Bug corrigé le 08/07 : ".oasis-sidebar-toggle" tout court (sans préciser
   gauche/droite) matchait les DEUX boutons à la fois — réduire un côté
   changeait donc aussi l'apparence du bouton de l'autre côté (icône seule
   au lieu du texte "Réduire"), même si son contenu à lui n'avait pas
   bougé. Signalé par Mia ("réduire un côté ouvre l'autre"). Chaque règle
   cible maintenant explicitement [data-oasis-sidebar="left"/"right"], posé
   directement sur le bouton concerné. */
body.oasis-left-sidebar-collapsed #wpforo #wpforo-wrap [data-oasis-sidebar="left"].oasis-sidebar-toggle,
body.oasis-left-sidebar-collapsed #wpforo #wpforo-wrap .oasis-quarter-leftnav-toggle,
body.oasis-right-sidebar-collapsed #wpforo #wpforo-wrap [data-oasis-sidebar="right"].oasis-sidebar-toggle {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  justify-content: center !important;
  padding: 0 !important;
}

body.oasis-left-sidebar-collapsed #wpforo #wpforo-wrap [data-oasis-sidebar="left"].oasis-sidebar-toggle span:last-child,
body.oasis-left-sidebar-collapsed #wpforo #wpforo-wrap .oasis-quarter-leftnav-toggle span:last-child,
body.oasis-right-sidebar-collapsed #wpforo #wpforo-wrap [data-oasis-sidebar="right"].oasis-sidebar-toggle span:last-child {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-add-topic-wrap,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-form-wrapper,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-topic-create,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel form.wpforoeditor {
  width: 100% !important;
  max-width: none !important;
}

#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__status {
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  color: var(--os-ink) !important;
  background: #f7f7f7 !important;
  border: 1px solid var(--os-line) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__status.is-success {
  background: color-mix(in srgb, var(--os-green) 18%, #ffffff) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__status.is-error {
  background: color-mix(in srgb, var(--os-pink) 14%, #ffffff) !important;
}

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  body.is_wpforo_page-1 #wpforo #wpforo-wrap {
    padding: 4px !important;
  }

}

/* ==========================================================================
   EXPLORER LE FORUM — NAVIGATION ET SUIVI
   Modifications limitées à la page .oasis-forums-board.
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-forums-board__hero {
  align-items: flex-start !important;
  padding: 28px 30px !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__hero > div {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__hero > div > p:first-child {
  margin: 0 0 3px !important;
  color: var(--os-pink) !important;
  font: 900 11px/1.2 "IBM Plex Mono", monospace !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__lead {
  margin: 5px 0 0 !important;
  color: var(--os-ink) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__intro {
  position: relative !important;
  display: grid !important;
  gap: 0 !important;
  max-width: 760px !important;
  margin-top: 20px !important;
  padding-left: 32px !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__intro::before {
  position: absolute !important;
  top: 12px !important;
  bottom: 12px !important;
  left: 9px !important;
  width: 3px !important;
  content: "" !important;
  background: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__intro a {
  position: relative !important;
  min-height: 46px !important;
  display: block !important;
  padding: 9px 8px 9px 0 !important;
  color: var(--os-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--os-line-soft) !important;
  box-shadow: none !important;
  font: 500 12px/1.4 "IBM Plex Mono", monospace !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__intro a::before {
  position: absolute !important;
  top: 14px !important;
  left: -30px !important;
  z-index: 2 !important;
  width: 18px !important;
  height: 18px !important;
  content: "" !important;
  background: var(--os-pink) !important;
  border: 3px solid var(--os-surface-solid) !important;
  box-shadow: 0 0 0 2px var(--os-ink) !important;
  transform: rotate(3deg) !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__intro a:hover,
#wpforo #wpforo-wrap .oasis-forums-board__intro a:focus-visible {
  color: var(--os-ink) !important;
  background: #eeeced !important;
  outline: 2px solid var(--os-pink) !important;
  outline-offset: 2px !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__intro strong {
  display: inline !important;
  margin-right: 5px !important;
  color: var(--os-pink) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__follow-help {
  display: flex !important;
  align-items: flex-start !important;
  gap: 7px !important;
  position: relative !important;
  /* Pas de max-width : sur un texte qui tient sur plusieurs lignes, une
     largeur plafonnée arbitrairement plus étroite que la colonne réelle
     forçait un retour à la ligne prématuré (signalé par Mia le 15/08). */
  width: 100% !important;
  min-height: 24px !important;
  margin: 13px 0 0 32px !important;
  padding: 4px 0 !important;
  color: var(--os-ink) !important;
  background: transparent !important;
  border: 0 !important;
  font: 700 10px/1.35 "IBM Plex Mono", monospace !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow: visible !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__follow-help-text {
  /* Regroupe tout le texte + le lien "profil" dans un seul item flex, sinon
     le <a> devient lui-même un item flex séparé sur la même ligne que le
     texte au lieu de couler normalement après "ton" (signalé par Mia le
     15/08). */
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__follow-help-link {
  color: var(--os-pink) !important;
  font-weight: 900 !important;
  text-decoration: underline !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__follow-help-icon {
  margin-top: 2px !important;
  flex-shrink: 0 !important;
  color: var(--os-ink) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}


#wpforo #wpforo-wrap .oasis-forums-board__hero > a,
#wpforo #wpforo-wrap .oasis-forums-section__head > a {
  flex-shrink: 0 !important;
  color: var(--os-ink) !important;
  font: 900 10px/1 "IBM Plex Mono", monospace !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card {
  padding: 18px !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__top {
  align-items: start !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card h4 {
  margin: 0 !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card h4 a {
  color: var(--os-ink) !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon {
  width: 30px !important;
  height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 4px !important;
  color: var(--os-ink) !important;
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid var(--os-ink) !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 rgba(16, 16, 16, .18) !important;
  cursor: pointer !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon:hover,
#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon:focus-visible {
  background: var(--os-yellow) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  outline: 2px solid var(--os-pink) !important;
  outline-offset: 2px !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-follow-svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  overflow: visible !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-follow-outline {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linejoin: round !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-follow-fill {
  fill: transparent !important;
  stroke: none !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon.is-followed,
#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon.is-pending {
  color: var(--os-ink) !important;
  background: #fff !important;
  box-shadow: 2px 2px 0 var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon.is-followed .oasis-follow-outline,
#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon.is-pending .oasis-follow-outline {
  stroke: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon.is-followed .oasis-follow-fill,
#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon.is-pending .oasis-follow-fill {
  fill: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__subforums {
  display: grid !important;
  gap: 7px !important;
  margin-top: 14px !important;
  margin-bottom: 16px !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__subforum-item {
  min-height: 32px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 6px 6px 9px !important;
  background: #eeeced !important;
  border-left: 4px solid var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__subforum-item > a {
  color: var(--os-ink) !important;
  font: 700 10px/1.2 "IBM Plex Mono", monospace !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__subforum-item .oasis-forum-follow-icon {
  width: 22px !important;
  height: 22px !important;
  padding: 3px !important;
  box-shadow: none !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__subforum-item .oasis-follow-svg {
  width: 14px !important;
  height: 14px !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__latest {
  margin-top: 16px !important;
  padding-top: 15px !important;
  border-top: 1px solid var(--os-line-soft) !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__latest > span:first-child {
  display: inline-block !important;
  margin: 0 0 8px !important;
  padding: 3px 6px !important;
  color: var(--os-ink) !important;
  background: var(--os-yellow) !important;
  font: 900 9px/1 "IBM Plex Mono", monospace !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__latest > span:first-child::after {
  content: " :" !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__latest > a,
#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__latest > em {
  display: block !important;
  margin-bottom: 6px !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__latest > p {
  margin: 0 !important;
  line-height: 1.45 !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__button {
  margin-top: 18px !important;
}

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #wpforo #wpforo-wrap .oasis-forums-board__hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 22px 18px !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board__intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: 18px !important;
    padding-left: 29px !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board__intro a {
    width: 100% !important;
    min-height: 52px !important;
    padding: 10px 6px 10px 0 !important;
    font-size: 11px !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board__follow-help {
    margin-left: 29px !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board__hero > a {
    justify-self: start !important;
    margin-top: 5px !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card {
    padding: 16px !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon {
    width: 36px !important;
    height: 36px !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__subforum-item {
    grid-template-columns: minmax(0, 1fr) 32px !important;
    min-height: 40px !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__subforum-item .oasis-forum-follow-icon {
    width: 30px !important;
    height: 30px !important;
  }

}

/* ==========================================================================
   EXPLORER LE FORUM — CORRECTIFS RESPONSIVE, SUIVI ET FRISE
   ========================================================================== */

/* Frise : le trait continu traversait les icônes panneau — remplacé par des
   petits points posés sur la bordure entre deux lignes (jamais sur l'icône
   elle-même, qui reste près du haut de sa propre ligne). */
#wpforo #wpforo-wrap .oasis-forums-board__intro::before {
  content: none !important;
  display: none !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__intro a:not(:first-child)::after {
  position: absolute !important;
  top: 0 !important;
  left: -21px !important;
  z-index: 1 !important;
  width: 2px !important;
  height: 2px !important;
  content: "" !important;
  background: var(--os-ink) !important;
  border-radius: 50% !important;
  box-shadow: 0 -6px 0 var(--os-ink), 0 6px 0 var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__intro a::before {
  top: 11px !important;
  left: -32px !important;
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  content: "\f277" !important;
  color: var(--os-ink) !important;
  background: var(--os-pink) !important;
  border: 2px solid var(--os-ink) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px var(--os-surface-solid) !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: none !important;
}

/* Le bouton de suivi doit rester entièrement visible dans les cartes. */
#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card,
#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__top {
  overflow: visible !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__top {
  grid-template-columns: 36px minmax(0, 1fr) 34px !important;
  padding-right: 3px !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon {
  min-width: 30px !important;
  min-height: 30px !important;
  flex: 0 0 auto !important;
  justify-self: end !important;
  overflow: visible !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-follow-svg {
  overflow: visible !important;
}

/* Tablette et mobile : une seule colonne, puis les widgets en dessous. */
@media (max-width: 900px) {
  #wpforo #wpforo-wrap .oasis-forums-board__layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board__main,
  #wpforo #wpforo-wrap .oasis-forums-board > .oasis-forums-board__layout > .oasis-social-utilities {
    width: 100% !important;
    min-width: 0 !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board > .oasis-forums-board__layout > .oasis-social-utilities {
    grid-column: 1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 4px !important;
  }
}

@media (max-width: 620px) {
  #wpforo #wpforo-wrap .oasis-forums-board > .oasis-forums-board__layout > .oasis-social-utilities {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__top {
    grid-template-columns: 36px minmax(0, 1fr) 40px !important;
  }

}

/* ==========================================================================
   EXPLORER LE FORUM — AJUSTEMENTS MOBILES CIBLÉS
   ========================================================================== */

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  /* Introduction plus discrète pour laisser respirer la navigation. */
  #wpforo #wpforo-wrap .oasis-forums-board__lead {
    max-width: 32ch !important;
    margin-top: 7px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  /* Consigne de suivi compacte et entièrement visible. */
  #wpforo #wpforo-wrap .oasis-forums-board__follow-help {
    width: 100% !important;
    max-width: none !important;
    min-height: 22px !important;
    margin: 10px 0 0 !important;
    padding: 3px 0 !important;
    box-sizing: border-box !important;
    font-size: 9px !important;
    overflow: visible !important;
  }

  /* Bouton de suivi des cartes plus petit, sans être rogné. */
  #wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__top {
    grid-template-columns: 36px minmax(0, 1fr) 30px !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon .oasis-follow-svg {
    width: 16px !important;
    height: 16px !important;
  }

}

/* ==========================================================================
   EXPLORER LE FORUM — FINITIONS ICÔNES, FRISE ET TITRE MOBILE
   ========================================================================== */

/* Cloche Font Awesome (ex-marque-page, changé le 14/08) : remplace le SVG pour
   éviter tout rognage. Claire par défaut, rose une fois suivie — demande de
   Mia le 14/08 (la cloche foncée est réservée à la barre de messages). */
#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon {
  width: 24px !important;
  min-width: 24px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  color: var(--os-line) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon .oasis-follow-svg {
  display: none !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon::before {
  display: block !important;
  content: "\f0f3" !important;
  color: currentColor !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon.is-followed,
#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon.is-pending,
#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon:hover,
#wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon:focus-visible {
  color: var(--os-pink) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Frise : pictogramme seul, sans pastille rose. */
#wpforo #wpforo-wrap .oasis-forums-board__intro a::before {
  top: 13px !important;
  left: -30px !important;
  width: 20px !important;
  height: 20px !important;
  content: "\f277" !important;
  color: var(--os-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__intro a:hover,
#wpforo #wpforo-wrap .oasis-forums-board__intro a:focus-visible {
  color: var(--os-ink) !important;
  background: transparent !important;
  outline: 0 !important;
}

#wpforo #wpforo-wrap .oasis-forums-board__intro strong {
  color: var(--os-pink) !important;
  font-weight: 900 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-card__top {
    grid-template-columns: 36px minmax(0, 1fr) 24px !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon {
    width: 22px !important;
    min-width: 22px !important;
    height: 26px !important;
    min-height: 26px !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-board .oasis-forum-follow-icon::before {
    font-size: 16px !important;
  }

  /* Titres de section ("Agir pour nos quartiers", "Interface de modération"...)
     empilés au-dessus de "Retour au fil" au lieu de partager la même ligne :
     sans ça, le titre est artificiellement rétréci pour laisser la place au
     lien, et des mots courts ("nos", "de") se retrouvent seuls sur leur
     ligne alors qu'ils auraient la place de rejoindre le mot suivant.
     Généralisé le 05/07 — ne s'appliquait avant qu'au titre "Interface de
     modération", avec un calc() fragile qui ne réglait pas le fond du
     problème. */
  #wpforo #wpforo-wrap .oasis-forums-section__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  #wpforo #wpforo-wrap .oasis-forums-section__head h2 {
    max-width: 100% !important;
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

}

/* ==========================================================================
   INTRO FIL DE DISCUSSION
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-feed-intro {
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  border-left: 3px solid var(--os-pink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--os-muted) !important;
  background: #fff !important;
}

#wpforo #wpforo-wrap .oasis-feed-intro .fas {
  font-size: 11px !important;
  color: var(--os-pink) !important;
}

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #wpforo #wpforo-wrap .oasis-feed-intro__more {
    display: none !important;
  }

}

/* ==========================================================================
   BADGES DE GROUPE UTILISATEUR
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-usergroup-badges {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  vertical-align: middle !important;
}

#wpforo #wpforo-wrap .oasis-usergroup-badge {
  display: inline-block !important;
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: "IBM Plex Mono", monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--badge-c, var(--os-pink)) !important;
  border: 1px solid var(--badge-c, var(--os-pink)) !important;
  padding: 1px 5px !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
}

/* Groupes primaires — qui je suis */
#wpforo #wpforo-wrap .oasis-usergroup-badge--habitant-e    { --badge-c: var(--os-pink); }
#wpforo #wpforo-wrap .oasis-usergroup-badge--association   { --badge-c: var(--os-green); }
#wpforo #wpforo-wrap .oasis-usergroup-badge--collectif-citoyen { --badge-c: #00bfbf; }
#wpforo #wpforo-wrap .oasis-usergroup-badge--commercant-e  { --badge-c: #ff8c00; }
#wpforo #wpforo-wrap .oasis-usergroup-badge--agent-e-public { --badge-c: #5c6bc0; }
#wpforo #wpforo-wrap .oasis-usergroup-badge--professionnel-le-du-territoire { --badge-c: #9c27b0; }
#wpforo #wpforo-wrap .oasis-usergroup-badge--autre         { --badge-c: var(--os-muted); }

/* Groupes secondaires — rôle spécial */
#wpforo #wpforo-wrap .oasis-usergroup-badge--elu-e         { --badge-c: #c8a000; }
#wpforo #wpforo-wrap .oasis-usergroup-badge--candidat-e    { --badge-c: #e67c00; }
#wpforo #wpforo-wrap .oasis-usergroup-badge--moderateur-local { --badge-c: #e53935; }
#wpforo #wpforo-wrap .oasis-usergroup-badge--moderateur    { --badge-c: #b71c1c; }
#wpforo #wpforo-wrap .oasis-usergroup-badge--admin         { --badge-c: var(--os-ink); }

/* Fallback Membre */
#wpforo #wpforo-wrap .oasis-usergroup-badge--default       { --badge-c: var(--os-muted); }

/* Surcharge du sélecteur générique em dans la colonne auteur */
#wpforo #wpforo-wrap .oasis-quarter-topic__author .oasis-usergroup-badge {
  color: var(--badge-c, var(--os-pink)) !important;
}

/* Badges "groupes de travail" — fond plein, pour se distinguer du rôle (contour) */
#wpforo #wpforo-wrap .oasis-workgroup-badges {
  display: block !important;
  margin-top: 4px !important;
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: "IBM Plex Mono", monospace !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--os-muted, #666) !important;
  line-height: 1.4 !important;
}

#wpforo #wpforo-wrap .oasis-workgroup-badges em {
  font-style: normal !important;
  color: var(--os-ink, #111) !important;
}

/* Réactions (J'aime / Je n'aime pas) : voir le bloc consolidé unique plus
   bas dans ce fichier ("RÉACTIONS — J'aime / Je n'aime pas"), qui remplace
   plusieurs anciennes tentatives dispersées ici et ailleurs dans ce fichier,
   plus toute la section réactions de wpforo-oasis.css — nettoyage du 09/08. */

/* ==========================================================================
   EMOJI PICKER — formulaire de réponse rapide
   ========================================================================== */


/* ==========================================================================
   TOGGLE RÉAGIR
   ========================================================================== */


/* ==========================================================================
   VOIR LES RÉPONSES — compteur en rose
   ========================================================================== */

#wpforo #wpforo-wrap details.oasis-quarter-replies summary [data-oasis-summary-count] {
  color: var(--os-pink) !important;
  font-weight: 900 !important;
}

/* ==========================================================================
   FORMULAIRE RÉPONSE RAPIDE — textarea gris clair, boutons rose
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-quarter-quick-form textarea {
  border: 1px solid var(--os-line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.12s ease !important;
  background: #fff !important;
}

#wpforo #wpforo-wrap .oasis-quarter-quick-form textarea:focus {
  border-color: var(--os-muted) !important;
  box-shadow: none !important;
}

#wpforo #wpforo-wrap .oasis-quarter-quick-form__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-quick-form .oasis-quick-cancel {
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-family: "IBM Plex Mono", monospace !important;
  text-transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #625f5b !important;
  border: 1px solid rgba(16, 16, 16, 0.15) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  order: 1 !important;
  transition: border-color 0.1s !important;
}

#wpforo #wpforo-wrap .oasis-quarter-quick-form .oasis-quick-cancel:hover {
  border-color: #625f5b !important;
}

#wpforo #wpforo-wrap .oasis-quarter-quick-form .oasis-quick-submit {
  padding: 6px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: "IBM Plex Mono", monospace !important;
  text-transform: none !important;
  background: #ff1493 !important;
  background-color: #ff1493 !important;
  color: #fff !important;
  border: 1px solid #ff1493 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  order: 2 !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

#wpforo #wpforo-wrap .oasis-quarter-quick-form .oasis-quick-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 3px 0 #990050 !important;
}

#wpforo #wpforo-wrap .oasis-quick-form-footer {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

#wpforo #wpforo-wrap .oasis-quick-form-footer__link {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  color: var(--os-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.oasis-full-reply-success {
  margin: 6px 0 0 !important;
  padding: 8px 12px !important;
  background: #f0faf5 !important;
  border-left: 3px solid #2d9e5f !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  color: #1a5c38 !important;
}

.oasis-report-success {
  margin: 6px 0 0 !important;
  padding: 8px 12px !important;
  background: #f0faf5 !important;
  border-left: 3px solid #2d9e5f !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  color: #1a5c38 !important;
}

.oasis-report-error {
  margin: 8px 0 0 !important;
  padding: 8px 12px !important;
  background: #fdf0f0 !important;
  border-left: 3px solid #c23b3b !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  color: #7a1f1f !important;
}

.oasis-reply-actions {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 4px 14px 0 !important;
}

/* Réponses chargées inline (pages quartier/ville/modération) */
.oasis-reply--loaded {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.oasis-reply-avatar {
  flex: 0 0 auto !important;
}

.oasis-reply-avatar img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid var(--os-ink) !important;
  object-fit: cover !important;
  background: var(--os-yellow) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  display: block !important;
}

.oasis-reply-bubble {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  padding: 10px 14px !important;
}

.oasis-reply--loaded.oasis-reply--op .oasis-reply-bubble {
  border-left: 5px solid var(--os-pink) !important;
}

.oasis-reply--loaded .oasis-reply-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin-bottom: 6px !important;
}

.oasis-reply--loaded .oasis-reply-header-top {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.oasis-reply--loaded .oasis-reply-author {
  font-family: var(--font-sub, "Oswald", sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--os-ink) !important;
  word-break: break-word !important;
}

.oasis-reply--loaded .oasis-reply-date {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  color: var(--os-muted) !important;
  white-space: nowrap !important;
  margin-left: auto !important;
}

.oasis-reply--loaded .oasis-reply-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.oasis-reply--loaded .oasis-reply-body {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: #111111 !important;
  margin: 6px 0 8px !important;
}

.oasis-reply--loaded .oasis-reply-body p {
  margin: 0 !important;
}

/* Ligne des actions au bas de la bulle de réponse : Like à gauche, Signaler à droite */
.oasis-reply--loaded .oasis-reply-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(16, 16, 16, 0.08) !important;
}

.oasis-reply--loaded .oasis-reply-footer-left,
.oasis-reply--loaded .oasis-reply-footer-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.oasis-reply--loaded .oasis-reply-footer .oasis-reaction-postwrap,
.oasis-reply--loaded .oasis-reply-footer .oasis-quarter-action {
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
  font-size: 9.5px !important;
  border: 1px solid var(--os-ink) !important;
  box-shadow: 1px 1px 0 var(--os-ink) !important;
  background: #ffffff !important;
}

.oasis-reply--loaded .oasis-reply-footer .wpforo-reaction .wpf-current-reaction::before {
  font-size: 12px !important;
}

.oasis-reply--loaded .oasis-reply-footer .oasis-quarter-action--report::before {
  font-size: 11px !important;
}

/* Formulaire de réponse rapide au bas des réponses */
.oasis-social-quick-reply-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px dashed rgba(16, 16, 16, 0.25) !important;
}

.oasis-social-quick-avatar {
  flex: 0 0 auto !important;
  margin-top: 2px !important;
}

.oasis-social-quick-avatar img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid var(--os-ink) !important;
  object-fit: cover !important;
  background: var(--os-yellow) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  display: block !important;
}

.oasis-social-quick-input-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.oasis-social-quick-input-row {
  position: relative !important;
  width: 100% !important;
}

.oasis-social-quick-input {
  width: 100% !important;
  min-height: 52px !important;
  padding: 8px 32px 8px 12px !important;
  background: #ffffff !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  font-family: var(--font-body, "IBM Plex Sans", sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--os-ink) !important;
  resize: vertical !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.oasis-social-quick-input:focus {
  border-color: var(--os-ink) !important;
  box-shadow: 3px 3px 0 var(--os-pink) !important;
}

#wpforo #wpforo-wrap .oasis-social-quick-close-btn,
.oasis-social-quick-close-btn {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 1px 1px 0 var(--os-ink) !important;
  border-radius: 0 !important;
  color: var(--os-ink) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background 0.1s ease, color 0.1s ease !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

#wpforo #wpforo-wrap .oasis-social-quick-close-btn i,
.oasis-social-quick-close-btn i {
  font-size: 10px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}

#wpforo #wpforo-wrap .oasis-social-quick-close-btn:hover,
.oasis-social-quick-close-btn:hover {
  background: var(--os-pink) !important;
  color: var(--os-ink) !important;
}

.oasis-social-quick-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.oasis-social-quick-full-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 28px !important;
  padding: 0 8px !important;
  background: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  color: var(--os-ink) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}

.oasis-social-quick-full-btn:hover {
  background: #ffffff !important;
  color: var(--os-pink) !important;
}

.oasis-social-quick-full-btn i {
  font-size: 12px !important;
}

.oasis-social-quick-send-btn {
  height: 32px !important;
  padding: 0 16px !important;
  background: var(--os-pink) !important;
  color: var(--os-ink) !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.05s ease, box-shadow 0.05s ease !important;
}

.oasis-social-quick-send-btn:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
  background: var(--os-pink) !important;
  color: var(--os-ink) !important;
}

.oasis-social-quick-reply-box--guest {
  justify-content: center !important;
}

/* Barre de modération des réponses isolée et neutralisation des flottants */
.oasis-reply--loaded .oasis-reply-mod-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px dashed rgba(16, 16, 16, 0.2) !important;
  width: 100% !important;
}

.oasis-reply--loaded .oasis-reply-mod-bar .oasis-reply-mod-actions,
.oasis-reply--loaded .oasis-reply-mod-bar .wpforo-action-buttons-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.oasis-reply--loaded .oasis-reply-mod-bar a,
.oasis-reply--loaded .oasis-reply-mod-bar button {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  background: #ffffff !important;
  border: 1px solid var(--os-ink) !important;
  box-shadow: 1px 1px 0 var(--os-ink) !important;
  color: var(--os-ink) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.oasis-reply--loaded .oasis-reply-mod-bar a:hover,
.oasis-reply--loaded .oasis-reply-mod-bar button:hover {
  background: var(--os-yellow) !important;
  color: var(--os-ink) !important;
}

.oasis-reply-bubble .wpf-mod-tools,
.oasis-reply-bubble .wpforo-post-buttons,
.oasis-reply-bubble .wpf-action-buttons {
  float: none !important;
  position: static !important;
  width: auto !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Panneau de formulaire complet wpForo */
.oasis-quarter-reply-panel {
  position: relative !important;
}

.oasis-quarter-reply-panel__close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  background: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  color: var(--os-ink) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  z-index: 10 !important;
}

.oasis-quarter-reply-panel__close:hover {
  background: var(--os-pink) !important;
}

.oasis-social-quick-login-link {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--os-pink) !important;
  text-decoration: underline !important;
}

.oasis-reply--loaded .oasis-reply-attachments {
  margin-top: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.oasis-reply--loaded .oasis-reply-attachments .oasis-feed-attachment {
  margin: 6px 0 !important;
}

/* Vignettes plus petites pour les pièces jointes en réponse (fil dense,
   pas besoin de la taille utilisée sur la carte "Proposition citoyenne").
   Cliquables comme partout ailleurs : le lightbox s'ouvre au clic.

   .oasis-reply-body ajouté le 19/08 (Mia, capture à l'appui) : les images
   envoyées via l'upload natif du formulaire de réponse (pas les shortcodes
   [wpf_image]/[wpf_attach]) ne passent PAS par .oasis-reply-attachments —
   oasis_social_wpforo_reply_body_render() (inc/oasis-wpforo-social.php) les
   convertit en <figure> directement DANS le corps du message, où elles
   n'avaient donc aucune des règles ci-dessous et ressortaient géantes et
   empilées. display:inline-flex (au lieu de flex sur le conteneur, qui
   casserait le texte du message) leur permet de se mettre côte à côte dans
   le flux normal du texte, comme des mots/images inline. */
.oasis-reply--loaded .oasis-reply-attachments .oasis-feed-attachment--image,
.oasis-reply--loaded .oasis-reply-body .oasis-feed-attachment--image {
  display: inline-flex !important;
  vertical-align: top !important;
  flex: 0 0 auto !important;
  width: 96px !important;
  margin: 0 6px 6px 0 !important;
  padding: 3px !important;
}
.oasis-reply--loaded .oasis-reply-attachments .oasis-feed-attachment--image img,
.oasis-reply--loaded .oasis-reply-body .oasis-feed-attachment--image img {
  width: 88px !important;
  height: 88px !important;
  max-width: 88px !important;
  max-height: 88px !important;
  object-fit: contain !important;
  background: color-mix(in srgb, var(--os-surface-solid) 85%, var(--os-paper)) !important;
}
.oasis-reply--loaded .oasis-reply-attachments .oasis-feed-attachment--file,
.oasis-reply--loaded .oasis-reply-attachments .oasis-feed-attachment--audio,
.oasis-reply--loaded .oasis-reply-attachments .oasis-feed-attachment--video {
  flex: 1 1 100% !important;
  width: auto !important;
  margin: 0 !important;
}
.oasis-reply--loaded .oasis-reply-body .oasis-feed-attachment--file {
  display: block !important;
  margin: 6px 0 !important;
}

/* Limite à 3 miniatures + bouton "Voir plus (+N)" (demande de Mia le 19/08) —
   le JS (initialiseIdeaAttachmentsGalleryLimit, oasis-wpforo-social.js) pose
   déjà .oasis-idea-attachments--collapsed et injecte .oasis-idea-attachments__more
   depuis le 10/08, sur les PJ de sujet (.oasis-idea-attachments) COMME sur
   celles de réponse (.oasis-reply-attachments, même nom de classe des deux
   côtés) — mais sans CSS en face, ce qui laissait toutes les images visibles
   d'un coup, sans repli "Voir plus". On cible les images par sélecteur de
   frère général (~) après le bouton plutôt que nth-child, pour ne pas
   compter les PJ non-image (fichier/audio/vidéo) qui peuvent être mêlées
   dans la même galerie et que le JS n'inclut pas dans la limite. */
.oasis-idea-attachments--collapsed .oasis-idea-attachments__more ~ .oasis-feed-attachment--image {
  display: none !important;
}

.oasis-idea-attachments__more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  padding: 8px 14px !important;
  margin: 6px 0 !important;
  cursor: pointer !important;
  transition: transform 0.05s ease, box-shadow 0.05s ease !important;
}

.oasis-idea-attachments__more:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
}

.oasis-idea-attachments__more:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0 var(--os-ink) !important;
}

/* Dans une réponse (les deux chemins d'upload) : le bouton prend le même
   gabarit carré que les miniatures (96px) pour rester bien aligné. */
.oasis-reply--loaded .oasis-reply-attachments .oasis-idea-attachments__more,
.oasis-reply--loaded .oasis-reply-body .oasis-idea-attachments__more {
  display: inline-flex !important;
  vertical-align: top !important;
  width: 96px !important;
  height: 94px !important;
  padding: 4px 6px !important;
  margin: 0 6px 6px 0 !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  font-size: 10px !important;
}
.oasis-replies-bottom-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid rgba(16, 16, 16, 0.06) !important;
}
.oasis-replies-more-btn {
  padding: 8px 14px !important;
  background: transparent !important;
  border: none !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  color: var(--os-muted) !important;
  text-align: left !important;
  cursor: pointer !important;
}
.oasis-replies-more-btn:hover {
  color: var(--os-pink) !important;
}
.oasis-replies-collapse-btn {
  padding: 8px 14px !important;
  background: transparent !important;
  border: none !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  color: var(--os-muted) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.oasis-replies-collapse-btn:hover {
  color: var(--os-pink) !important;
}
.oasis-replies-loading {
  padding: 8px 14px !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  color: var(--os-muted) !important;
}

/* ==========================================================================
   CONTRÔLES MODIFICATION / SUPPRESSION (1 min)
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-reply-controls {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
  border-top: 1px dashed var(--os-line-soft) !important;
}

/* Sans flex-wrap, les 3 boutons (Modifier/Supprimer/Valider) + le chrono
   débordaient de la carte sur mobile et ne laissaient que "Supprimer"
   visible (retour de Mia le 19/08, bouton permanent ajouté ce jour-là avec
   ce 3e bouton en plus). Passe sur deux lignes au lieu de déborder. */
@media (max-width: 480px) {
  #wpforo #wpforo-wrap .oasis-reply-edit-btn,
  #wpforo #wpforo-wrap .oasis-reply-delete-btn,
  #wpforo #wpforo-wrap .oasis-reply-dismiss-btn {
    font-size: 12px !important;
    padding: 3px 7px !important;
  }

  #wpforo #wpforo-wrap .oasis-reply-timer {
    flex-basis: 100% !important;
    order: 10 !important;
    margin-left: 0 !important;
  }
}

#wpforo #wpforo-wrap .oasis-reply-edit-btn,
#wpforo #wpforo-wrap .oasis-reply-delete-btn,
#wpforo #wpforo-wrap .oasis-reply-dismiss-btn {
  padding: 2px 6px !important;
  font-size: 13px !important;
  border: 1px solid var(--os-line-soft) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform 0.1s, border-color 0.1s, background 0.1s !important;
}

/* Trois couleurs distinctes, pastel en permanence (pas juste au survol) :
   sans fond, les 3 boutons étaient trop peu visibles (retour de Mia le
   19/08). Orange = modifier, rouge = supprimer, vert = valider — code
   couleur standard, cohérent avec l'icône déjà verte de Valider. Le survol
   fonce juste un peu la même teinte plutôt que de changer de couleur. */
#wpforo #wpforo-wrap .oasis-reply-edit-btn {
  background: #ffe8dc !important;
  border-color: #ffb98f !important;
}

#wpforo #wpforo-wrap .oasis-reply-delete-btn {
  background: #ffe3e3 !important;
  border-color: #ffa8a8 !important;
}

#wpforo #wpforo-wrap .oasis-reply-dismiss-btn {
  background: #eef9d0 !important;
  border-color: #c3e577 !important;
}

#wpforo #wpforo-wrap .oasis-reply-edit-btn:hover {
  background: #ffd6bd !important;
  border-color: #ff6b35 !important;
  transform: translateY(-1px) !important;
}

#wpforo #wpforo-wrap .oasis-reply-delete-btn:hover {
  background: #ffc9c9 !important;
  border-color: #e03131 !important;
  transform: translateY(-1px) !important;
}

#wpforo #wpforo-wrap .oasis-reply-dismiss-btn:hover {
  background: #e0f2ac !important;
  border-color: var(--os-green) !important;
  transform: translateY(-1px) !important;
}

#wpforo #wpforo-wrap .oasis-reply-timer {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--os-muted) !important;
  /* Rapproché des boutons (19/08, retour de Mia) : "margin-left: auto"
     l'envoyait tout à droite du conteneur, loin de Modifier/Supprimer/
     Valider, presque hors du champ visuel sur mobile. */
  margin-left: 4px !important;
}

/* Onglet "Utilisateur" (bannir/suspendre) du panneau Outils modérateur */
#wpforo #wpforo-wrap .oasis-mod-user-tool__actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

#wpforo #wpforo-wrap .oasis-mod-user-btn {
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: 1px solid var(--os-line) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform 0.1s, border-color 0.1s, background 0.1s !important;
}

#wpforo #wpforo-wrap .oasis-mod-user-btn--suspend:hover {
  border-color: #d97706 !important;
  background: #fef3c7 !important;
}

#wpforo #wpforo-wrap .oasis-mod-user-btn--ban:hover {
  border-color: #e03 !important;
  background: #fee2e2 !important;
}

#wpforo #wpforo-wrap .oasis-mod-user-btn:disabled {
  opacity: 0.5 !important;
  cursor: default !important;
}

#wpforo #wpforo-wrap .oasis-mod-user-tool__notice {
  font-size: 12px !important;
  color: var(--os-muted) !important;
  margin-top: 8px !important;
}

#wpforo #wpforo-wrap .oasis-reply-edit-form,
#wpforo #wpforo-wrap .oasis-topic-edit-form {
  margin-top: 6px !important;
}

#wpforo #wpforo-wrap .oasis-topic-edit-input {
  width: 100% !important;
  margin-bottom: 8px !important;
  padding: 6px !important;
  font-size: 15px !important;
  font-family: "Oswald", Impact, sans-serif !important;
  border: 1px solid var(--os-line-soft) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#wpforo #wpforo-wrap .oasis-reply-edit-textarea {
  width: 100% !important;
  min-height: 60px !important;
  padding: 6px !important;
  font-size: 13px !important;
  border: 1px solid var(--os-line-soft) !important;
  box-shadow: none !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

/* Champs préfixe/mots-clés dans le formulaire d'édition modérateur (sujet) —
   seulement présents quand oasis_get_topic_body confirme is_mod, voir
   handleEditTopic() / oasis_social_wpforo_ajax_get_topic_body(). */
#wpforo #wpforo-wrap .oasis-topic-edit-mod-fields {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px dashed var(--os-line-soft) !important;
}

/* Titre "Mots-clés" : sépare visuellement ce bloc du menu Préfixe juste
   au-dessus (sinon la liste de catégories dépliables ressemble à une
   continuation du menu déroulant plutôt qu'à un champ distinct). */
#wpforo #wpforo-wrap .oasis-topic-edit-tags-label {
  margin-top: 16px !important;
}

#wpforo #wpforo-wrap .oasis-topic-edit-mod-label {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  color: var(--os-muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

#wpforo #wpforo-wrap .oasis-topic-edit-prefix {
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: 13px !important;
  padding: 5px !important;
  border: 1px solid var(--os-line-soft) !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* Puces "mots-clés sélectionnés" (avec croix) au-dessus des catégories —
   même système que le formulaire Nouveau sujet (setupClosedTagPicker),
   juste réutilisé ici via les mêmes classes .oasis-tagpicker__chips/chip/
   counter (déjà stylées plus haut dans ce fichier). Marges ajoutées pour
   bien les séparer du menu Préfixe au-dessus et des catégories en dessous —
   "pas de boutons collés les uns aux autres" (retour de Mia le 08/08). */
#wpforo #wpforo-wrap .oasis-topic-edit-mod-fields .oasis-tagpicker__chips {
  margin-top: 6px !important;
  margin-bottom: 8px !important;
  min-height: 0 !important;
}

#wpforo #wpforo-wrap .oasis-topic-edit-mod-fields .oasis-tagpicker__counter {
  margin: 0 0 12px !important;
}

#wpforo #wpforo-wrap .oasis-topic-edit-tags {
  width: 100% !important;
  box-sizing: border-box !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  margin-top: 4px !important;
  padding: 10px !important;
  border: 1px solid var(--os-line-soft) !important;
  border-radius: 4px !important;
}

/* Air entre chaque groupe de catégorie dépliable — sinon ils sont collés
   les uns aux autres, en particulier une fois plusieurs groupes ouverts. */
#wpforo #wpforo-wrap .oasis-topic-edit-tags .oasis-tagpicker__group {
  margin-bottom: 4px !important;
}

#wpforo #wpforo-wrap .oasis-topic-edit-tags .oasis-tagpicker__group-body {
  margin-top: 10px !important;
}

#wpforo #wpforo-wrap .oasis-topic-edit-tags .oasis-tagpicker__tags {
  gap: 8px !important;
}

#wpforo #wpforo-wrap .oasis-reply-edit-actions {
  display: flex !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

/* Un peu plus d'air avant Enregistrer/Annuler quand ils suivent le bloc
   préfixe/mots-clés modération, plutôt que le petit espacement générique
   (partagé avec le formulaire d'édition de réponse, plus simple). */
#wpforo #wpforo-wrap .oasis-topic-edit-mod-fields + .oasis-reply-edit-actions {
  margin-top: 14px !important;
}

#wpforo #wpforo-wrap .oasis-reply-save-btn {
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-family: "IBM Plex Mono", monospace !important;
  background: var(--os-pink) !important;
  color: #fff !important;
  border: 1px solid var(--os-pink) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform 0.1s !important;
}

#wpforo #wpforo-wrap .oasis-reply-save-btn:hover {
  transform: translateY(-1px) !important;
}

#wpforo #wpforo-wrap .oasis-reply-cancel-btn {
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-family: "IBM Plex Mono", monospace !important;
  background: transparent !important;
  color: var(--os-muted) !important;
  border: 1px solid var(--os-line-soft) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#wpforo #wpforo-wrap .wpf-popover-content {
  max-height: 260px !important;
  overflow-y: auto !important;
}

/* ==========================================================================
   20. PROFIL MEMBRE NATIF (wpForo) — migration progressive depuis wpforo-oasis.css
   ========================================================================== */

#wpforo #wpforo-wrap .wpforo-profile {
  background: transparent !important;
}

#wpforo #wpforo-wrap .wpforo-profile-head {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding: 16px !important;
  /* background-color (pas "background") : la couverture uploadée par le
     membre est posée en background-image inline par wpForo sur ce même
     élément — un raccourci "background:" l'aurait écrasée. */
  background-color: var(--os-surface-solid) !important;
  background-size: cover !important;
  background-position: center !important;
  border: 0 !important;
  border-bottom: 1px solid var(--os-line-soft) !important;
}

#wpforo #wpforo-wrap .oasis-profile-head-stats {
  display: flex !important;
  gap: 18px !important;
}

#wpforo #wpforo-wrap .oasis-profile-head-stats__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

#wpforo #wpforo-wrap .oasis-profile-head-stats__item strong {
  color: var(--os-ink) !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#wpforo #wpforo-wrap .oasis-profile-head-stats__item span {
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .wpf-prof-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#wpforo #wpforo-wrap .wpf-prof-buttons a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-ink) !important;
}

#wpforo #wpforo-wrap .wpf-prof-buttons a:hover,
#wpforo #wpforo-wrap .wpf-prof-buttons a:focus-visible {
  background: var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .wpf-prof-buttons a svg {
  fill: currentColor !important;
}

/* Icône "Déconnexion" : couleur fixée en dur (pas via variable CSS, parfois
   indéfinie selon le contexte de page) pour qu'elle ne disparaisse jamais,
   et fond rouge natif du thème wpForo neutralisé au survol. */
#wpforo #wpforo-wrap .wpf-prof-buttons a.wpf-logout,
#wpforo #wpforo-wrap .wpf-prof-buttons a.wpf-logout svg {
  color: #101010 !important;
  fill: #101010 !important;
}

#wpforo #wpforo-wrap #wpf-widget-profile .wpf-prof-footer .wpf-prof-buttons a.wpf-logout:hover,
#wpforo #wpforo-wrap #wpf-widget-profile .wpf-prof-footer .wpf-prof-buttons a.wpf-logout:hover svg {
  color: #101010 !important;
  fill: #101010 !important;
  background: var(--os-yellow, #ffd600) !important;
  background-color: var(--os-yellow, #ffd600) !important;
}

#wpforo #wpforo-wrap .wpf-prof-buttons .wpf-member-profile-button {
  width: 30px !important;
  padding: 0 !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
}

/* Icônes "Profil/Compte/Activité/..." de Mon Profil : noires au repos, roses
   au survol sur l'icône seule (pas de fond rose). Demande de Mia le 16/08. */
#wpforo #wpforo-wrap .wpf-prof-buttons .wpf-member-profile-button:hover,
#wpforo #wpforo-wrap .wpf-prof-buttons .wpf-member-profile-button:focus-visible {
  color: var(--os-pink) !important;
  background: var(--os-surface-solid) !important;
}

/* Pastille "messages non lus" (icône enveloppe) : ajoutée en JS pur par le
   plugin wpforo-private-messages (assets/js/pm.js), avec des styles inline
   (display:flex + justify-content:space-between sur le bouton, span orange
   sans classe) — ça écartait l'icône de son carré 30x30 et cassait la
   grille des autres icônes. !important nécessaire pour battre le style
   inline. Redevient une vraie pastille posée sur l'icône, couleur charte
   (rose) au lieu de l'orange natif. Demande de Mia le 16/08. */
#wpforo #wpforo-wrap .wpf-prof-buttons .wpf-member-profile-button[data-unreads] {
  position: relative !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-top: 0 !important;
}

#wpforo #wpforo-wrap .wpf-prof-buttons .wpf-member-profile-button[data-unreads] span {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  left: auto !important;
  margin-left: 0 !important;
  display: inline-block !important;
  width: auto !important;
  min-width: 14px !important;
  max-width: none !important;
  height: 14px !important;
  padding: 0 4px !important;
  background-color: var(--os-pink) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 14px !important;
  white-space: nowrap !important;
  text-align: center !important;
  border-radius: 7px !important;
  box-sizing: border-box !important;
}

#wpforo #wpforo-wrap .wpforo-profile-head-panel {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

#wpforo #wpforo-wrap .wpf-profile-avatar img {
  border: 2px solid var(--os-ink) !important;
}

/* Indicateur en ligne/hors ligne sur l'avatar : rond dessiné en CSS pur
   (la police d'icônes ne se chargeait pas correctement ici, ce qui
   affichait un carré de remplacement à la place du rond). */
#wpforo #wpforo-wrap .wpf-profile-avatar .wpf-profile-online {
  width: 20px !important;
  height: 20px !important;
  background: #999 !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px var(--os-ink) !important;
  overflow: hidden !important;
}

#wpforo #wpforo-wrap .wpf-profile-avatar .wpf-profile-online i {
  font-size: 0 !important;
}

#wpforo #wpforo-wrap .wpf-profile-avatar .wpf-profile-online:has(.wpfcl-8) {
  background: #2ecc71 !important;
}

#wpforo #wpforo-wrap .wpf-profile-details {
  background-color: transparent !important;
  opacity: 1 !important;
}

#wpforo #wpforo-wrap .wpfp-name {
  font-family: "Anton", Impact, sans-serif !important;
  font-size: 26px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .wpfp-name .wpf-member-nicename {
  display: block !important;
  margin-top: 4px !important;
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

/* Barre "Accueil du forum | Posts récents" : fond noir natif neutralisé
   (texte devenait illisible dessus, sans rapport avec la couverture photo). */
#wpforo #wpforo-wrap .wpforo-profile-back {
  background: transparent !important;
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
}

#wpforo #wpforo-wrap .wpforo-profile-back a {
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .wpforo-profile-head-bottom {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  background: #eeeced !important;
  border: 0 !important;
  border-bottom: 1px solid var(--os-line-soft) !important;
}

#wpforo #wpforo-wrap .wpfp-box:empty,
#wpforo #wpforo-wrap .wpfp-ug {
  display: none !important;
}

#wpforo #wpforo-wrap .wpfp-box {
  display: inline-block !important;
  width: auto !important;
  padding: 0 !important;
  color: var(--os-pink) !important;
  background: transparent !important;
  border: 0 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .wpfp-box * {
  color: var(--os-pink) !important;
}

#wpforo #wpforo-wrap .wpfp-joined {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--os-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  line-height: 1.5 !important;
}

#wpforo #wpforo-wrap .wpfp-flex {
  flex: 1 1 auto !important;
}

#wpforo #wpforo-wrap .wpforo-user-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  background: var(--os-surface-solid) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--os-line-soft) !important;
}

#wpforo #wpforo-wrap .wpf-member-profile-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  color: #fff !important;
  background: var(--os-pink) !important;
  border: 1px solid var(--os-ink) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .wpforo-profile-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  background: var(--os-surface-solid) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--os-line-soft) !important;
  overflow-x: auto !important;
}

#wpforo #wpforo-wrap .wpf-profile-menu {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px 2px 11px !important;
  color: var(--os-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 4px solid transparent !important;
  box-shadow: none !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: left !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .wpf-profile-menu:hover,
#wpforo #wpforo-wrap .wpf-profile-menu:focus-visible {
  color: var(--os-pink) !important;
}

#wpforo #wpforo-wrap .wpf-profile-menu.wpforo-active {
  border-bottom-color: var(--os-yellow) !important;
  box-shadow: none !important;
}

#wpforo #wpforo-wrap .wpf-profile-menu i,
#wpforo #wpforo-wrap .wpf-profile-menu svg {
  display: none !important;
}

#wpforo #wpforo-wrap .wpf-profile-menu-label {
  display: inline !important;
  color: inherit !important;
}

#wpforo #wpforo-wrap .wpforo-profile-content {
  padding: 20px !important;
  background: var(--os-surface-solid) !important;
  border: 0 !important;
}

#wpforo #wpforo-wrap .wpf-stat-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

@media (max-width: 900px) {
  #wpforo #wpforo-wrap .wpf-stat-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

}

@media (max-width: 480px) {
  #wpforo #wpforo-wrap .wpf-stat-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

}

#wpforo #wpforo-wrap .wpf-statbox {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  background: #eeeced !important;
  border-left: 4px solid var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .wpf-statbox-icon {
  display: none !important;
}

#wpforo #wpforo-wrap .wpf-statbox-value {
  font-family: "Anton", Impact, sans-serif !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

#wpforo #wpforo-wrap .wpf-statbox-title {
  margin-top: 2px !important;
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .wpf-table {
  display: block !important;
  width: 100% !important;
  margin-top: 20px !important;
  padding: 0 !important;
  background: var(--os-surface-solid) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--os-line-soft) !important;
}

#wpforo #wpforo-wrap .wpf-table .wpf-field {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px 16px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--os-line) !important;
}

#wpforo #wpforo-wrap .wpf-table .wpf-field:last-child {
  border-bottom: 0 !important;
}

#wpforo #wpforo-wrap .wpf-table .wpf-label-wrap {
  flex: 0 0 220px !important;
  width: 220px !important;
  max-width: 220px !important;
  margin: 0 !important;
  white-space: normal !important;
}

#wpforo #wpforo-wrap .wpf-table .wpf-label {
  margin: 0 !important;
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .wpf-table .wpf-field-wrap {
  flex: 1 1 200px !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13px !important;
  white-space: normal !important;
  word-break: break-word !important;
}

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #wpforo #wpforo-wrap .wpf-table .wpf-field {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #wpforo #wpforo-wrap .wpf-table .wpf-label-wrap {
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Bug decouvert 11/07 : en flex-direction:column (juste au-dessus),
     "flex: 1 1 200px" sur .wpf-field-wrap applique son 200px a la HAUTEUR
     (axe principal vertical en mode colonne) au lieu de la largeur d'origine
     en mode ligne — creait un enorme vide sous chaque champ (ex: page
     Inscription, entre "Nom affiche" et "Identifiant"). */
  #wpforo #wpforo-wrap .wpf-table .wpf-field-wrap {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

}

#wpforo #wpforo-wrap .wpf-table .wpf-field-cl {
  display: none !important;
}

/* ==========================================================================
   21. ABONNEMENTS (gestion des suivis)
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-subscriptions-nav {
  display: flex !important;
  width: 100% !important;
  gap: 10px !important;
  margin: 0 !important;
}

/* Rendu plus visible et plus grand (demande de Mia le 15/08, le bouton se
   noyait dans la page) : rose plein pleine largeur + ombre dure façon NTM,
   même gabarit que les gros bandeaux de section (ex. "Détail par forum"). */
#wpforo #wpforo-wrap .oasis-subscriptions-nav button {
  width: 100% !important;
  padding: 18px 22px !important;
  color: #101010 !important;
  background: var(--os-pink) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 5px 5px 0 var(--os-ink) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: transform .1s ease, box-shadow .1s ease !important;
}

#wpforo #wpforo-wrap .oasis-subscriptions-nav button:hover,
#wpforo #wpforo-wrap .oasis-subscriptions-nav button:focus-visible {
  background: var(--os-yellow) !important;
  color: var(--os-ink) !important;
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
}

/* Séparateur "OU" entre le bouton "Voir mes abonnements" et le bandeau
   "M'abonner" (demande de Mia le 15/08) : traits verticaux au-dessus et
   en-dessous du texte (pas à gauche/droite), pour relier visuellement les
   2 bandeaux comme un seul connecteur. */
#wpforo #wpforo-wrap .oasis-sbs-divider {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 6px 0 !important;
}

#wpforo #wpforo-wrap .oasis-sbs-divider__line {
  width: 1px !important;
  height: 12px !important;
  background: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-sbs-divider__text {
  width: 100% !important;
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-align: center !important;
}

/* Le conteneur natif wpForo #wpf_subscription_tools (.wpf-tools) a 20px de
   padding tout autour (thèmes/2022/style.css du plugin) : c'est cette
   marge invisible qui empêchait le séparateur "OU" de toucher le bandeau
   "M'abonner" en dessous, malgré toutes les marges déjà mises à 0 côté
   thème — trouvé le 15/08 après plusieurs essais infructueux. */
#wpforo #wpforo-wrap .wpf-tools {
  padding: 0 !important;
  margin: 0 !important;
}

/* Bandeau "M'abonner", vrai bloc HTML (voir
   initialiseSubscriptionManagerAutoSave() dans oasis-wpforo-social.js) —
   même gabarit que le bouton "Voir mes abonnements", pour coller pile
   contre le séparateur "OU" des deux côtés. */
#wpforo #wpforo-wrap .oasis-sbs-subscribe-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 22px !important;
  color: #101010 !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 5px 5px 0 var(--os-ink) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
}

#wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  margin-top: 0 !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-ink) !important;
}

#wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options ul li {
  padding: 8px 14px !important;
  border-bottom: 1px solid var(--os-line) !important;
}

#wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options ul li:last-child {
  border-bottom: 0 !important;
}

#wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options .wpf-sbs-cat.wpf-sbs-div {
  background: #eeeced !important;
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .wpforo-sbs {
  margin-top: 20px !important;
}

#wpforo #wpforo-wrap .wpforo-sb {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
  border-top: 0 !important;
}

#wpforo #wpforo-wrap .wpforo-sbs .wpforo-sb:first-child {
  border-top: 1px solid var(--os-ink) !important;
}

#wpforo #wpforo-wrap .wpforo-sb .sbn-title a {
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .wpforo-sb .sbn-action {
  margin-left: auto !important;
}

#wpforo #wpforo-wrap .wpf-sbs-bulk-options input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  margin: 0 !important;
  background: #fff !important;
  border: 2px solid var(--os-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#wpforo #wpforo-wrap .wpf-sbs-bulk-options input[type="checkbox"]:checked {
  background: var(--os-yellow) !important;
  border-color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .wpf-sbs-bulk-options input[type="checkbox"]:checked::after {
  content: "\2715" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: var(--os-ink) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Numérotation des pages (utilisée par les listes "Activité", "Abonnements", etc.) */

#wpforo #wpforo-wrap .wpf-navi .wpf-navi-wrap {
  gap: 4px !important;
}

#wpforo #wpforo-wrap .wpf-navi .wpf-page-info {
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .wpf-navi .wpf-prev-button,
#wpforo #wpforo-wrap .wpf-navi .wpf-next-button {
  display: none !important;
}

#wpforo #wpforo-wrap .wpf-navi select.wpf-navi-dropdown {
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-ink) !important;
  border-radius: 0 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Widget "Mon profil" : remettre le libellé du groupe ("Membre") avant le badge de niveau (étoiles) */

#wpforo #wpforo-wrap .wpf-prof-data {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#wpforo #wpforo-wrap .wpf-prof-data .wpf-prof-rating {
  order: 2 !important;
}

#wpforo #wpforo-wrap .wpf-prof-data > .wpfut {
  order: 1 !important;
}

#wpforo #wpforo-wrap .oasis-rating-label {
  margin-left: 4px !important;
  color: var(--os-pink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* Messages privés : la colonne avatar+nom du participant était fixée à
   40px par le plugin, ce qui tronquait les noms longs. */
#wpforo #wpforo-wrap .wpfpm-details {
  flex-basis: auto !important;
  width: auto !important;
  max-width: 110px !important;
}

#wpforo #wpforo-wrap .wpfpm-dname {
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
}

/* Messages privés : en-tête du fil (avatar + nom + actions).
   .wpfpm-toolbar et #wpfpm_left_toggle_button sont maintenant entièrement
   redéclarés (refonte "Project Alpha Chat") dans oasis-profil-membre.css,
   qui charge après ce fichier (dépendance wp_enqueue_style) — retirés d'ici
   le 16/08 après vérification propriété par propriété qu'aucun réglage n'y
   survivait encore. */

#wpforo #wpforo-wrap .wpfpm-convr-user {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .tollbar-top-info {
  display: flex !important;
  align-items: center !important;
}

/* .wpfpm-convr-title et #wpfpm-tools (bloc de base + li) : mêmes raisons
   qu'au-dessus, entièrement redéclarés dans oasis-profil-membre.css qui
   charge après — retirés d'ici le 16/08. #wpfpm-tools li:hover reste : il
   fixe encore border-color, propriété que le nouveau fichier ne touche pas. */

#wpforo #wpforo-wrap .wpfpm-current-folder-info {
  display: none !important;
}

#wpforo #wpforo-wrap #wpfpm-tools li:hover {
  background: var(--os-yellow) !important;
  border-color: var(--os-ink) !important;
}

/* .wpfpm-main / .wpfpm-main-inner (cadre à 0) : même cas, redéclaré dans
   oasis-profil-membre.css — retiré d'ici le 16/08. */

/* Messages privés : séparateurs de date */

#wpforo #wpforo-wrap .wpforo-messages-content .whr {
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* Messages privés : encadré net, sans la flèche/triangle natif */

#wpforo #wpforo-wrap .wpfpm-msg-inner {
  display: inline-block !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 10px 14px !important;
  color: var(--os-ink) !important;
  background: #f4f3f1 !important;
  border: 1px solid var(--os-line) !important;
  border-radius: 6px !important;
  line-height: 1.4 !important;
}

#wpforo #wpforo-wrap .wpfpm-me .wpfpm-msg-inner {
  background: #fbf0c7 !important;
  border-color: #e8d98a !important;
}

/* Les pièces jointes (images) gardent leur propre cadre natif, ce qui crée
   un effet "cadre dans le cadre" : on l'aplatit ici. */
#wpforo #wpforo-wrap .wpfpm-msg-inner img,
#wpforo #wpforo-wrap .wpfpm-msg-inner .wpforo-attached-file,
#wpforo #wpforo-wrap .wpfpm-msg-inner .wpforo-attached-file a {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}

#wpforo #wpforo-wrap .wpfpm-msg-before:before,
#wpforo #wpforo-wrap .wpfpm-msg-inner:before,
#wpforo #wpforo-wrap .wpfpm-msg-inner:after {
  display: none !important;
  content: none !important;
}

#wpforo #wpforo-wrap .wpfpm-msg-inner p {
  margin: 0 !important;
}

#wpforo #wpforo-wrap .wpfpm-form-wrapper .wpf-post-create {
  padding: 12px 16px !important;
  border: 0 !important;
  border-top: 1px solid var(--os-line) !important;
}

#wpforo #wpforo-wrap .wpfpm-dname {
  color: var(--os-ink) !important;
  font-weight: 700 !important;
}

/* Liste des conversations (panneau gauche) : la ligne active/survolée passe en
   fond noir nativement, mais certains textes internes gardent leur couleur
   sombre d'origine et deviennent illisibles. On ne touche pas à l'avatar
   (icône sur fond clair) pour ne pas le rendre invisible à son tour. */
#wpforo #wpforo-wrap .wpfpm-uli-active .wpfpm-uli-details,
#wpforo #wpforo-wrap .wpfpm-uli-active .wpfpm-uli-details *,
#wpforo #wpforo-wrap .wpfpm-uli:hover .wpfpm-uli-details,
#wpforo #wpforo-wrap .wpfpm-uli:hover .wpfpm-uli-details * {
  color: var(--oasis-black, #101010) !important;
  text-shadow: none !important;
}

/* Sidebar dédiée aux pages Profil/Activité/Favoris/Abonnements/Messages.
   Ces blocs reprennent la classe native .wpforo-widget-wrap pour avoir
   exactement le même encadré et le même espacement que les widgets wpForo
   (MON PROFIL, RECHERCHE, VOTES EN COURS...). */

#wpforo #wpforo-wrap .oasis-profile-sidebar__neighbor {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--os-line-soft) !important;
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .oasis-profile-sidebar__neighbor:last-child,
#wpforo #wpforo-wrap .oasis-profile-sidebar__link:last-child {
  border-bottom: 0 !important;
}

/* RÈGLE GÉNÉRALE — blindage définitif contre le "Stabilo jaune" de l'ancien
   wpforo-oasis.css : ce fichier surligne AUTOMATIQUEMENT tout lien a[href*="/forum/"]
   dans un widget de sidebar native (.wpforo-widget-wrap, .wpf-sidebar,
   .wpforo-right-sidebar, aside[id^="wpforo_"]). Ce comportement n'est plus
   voulu par défaut. Portée volontairement large (deux niveaux) car nos widgets
   de sidebar vivent dans PLUSIEURS conteneurs différents selon la page
   (.oasis-social-utilities sur Fil commun/Quartier, mais un balisage propre
   et séparé sur la page Profil) : on neutralise donc à la fois par conteneur
   connu ET directement sur la classe .oasis-quarter-widget que porte chaque
   widget lui-même, quel que soit l'endroit où il est appelé.
   Si un surlignage est un jour vraiment souhaité quelque part, il doit être
   ajouté explicitement à côté de cette règle, jamais hérité de l'ancien fichier. */
#wpforo #wpforo-wrap .oasis-social-utilities a,
#wpforo #wpforo-wrap .oasis-social-utilities a:visited,
#wpforo #wpforo-wrap .oasis-social-utilities a[href*="/forum/"],
#wpforo #wpforo-wrap .oasis-social-utilities a[href*="/forum/"]:visited,
#wpforo #wpforo-wrap .oasis-quarter-widget a,
#wpforo #wpforo-wrap .oasis-quarter-widget a:visited,
#wpforo #wpforo-wrap .oasis-quarter-widget a[href*="/forum/"],
#wpforo #wpforo-wrap .oasis-quarter-widget a[href*="/forum/"]:visited,
#wpforo #wpforo-wrap .oasis-profile-sidebar__section a,
#wpforo #wpforo-wrap .oasis-profile-sidebar__section a[href*="/forum/"] {
  background-color: transparent !important;
  background-image: none !important;
}

/* Agenda compact (ticket jour/mois) — classes neuves et isolées, en
   span uniquement (jamais strong/small), pour ne pas hériter du style
   générique de wpforo-oasis.css appliqué à ces balises ailleurs sur le site. */

#wpforo #wpforo-wrap .oasis-mini-agenda {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* wpforo-oasis.css applique un "Stabilo jaune" (dégradé) à tout lien
   .../forum/... dans un widget de sidebar — pensé pour les titres de sujets,
   mais nos liens d'agenda matchent aussi ce motif. On neutralise précisément
   ce cas avec la même spécificité (classe + attribut), sans toucher au
   Stabilo ailleurs sur le site. */
#wpforo #wpforo-wrap .wpforo-widget-wrap a.oasis-mini-agenda__item,
#wpforo #wpforo-wrap .wpforo-widget-wrap a.oasis-mini-agenda__item:visited,
#wpforo #wpforo-wrap .wpforo-widget-wrap a[href*="/forum/"].oasis-mini-agenda__item,
#wpforo #wpforo-wrap .wpforo-widget-wrap a[href*="/forum/"].oasis-mini-agenda__item:visited {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  text-decoration: none !important;
  background-color: transparent !important;
  background-image: none !important;
  font: inherit !important;
}

#wpforo #wpforo-wrap .oasis-mini-agenda__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  text-decoration: none !important;
  background: none !important;
}

#wpforo #wpforo-wrap .oasis-mini-agenda__ticket {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--os-ink) !important;
  background: var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .oasis-mini-agenda__day {
  font-family: "Anton", Impact, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--os-ink) !important;
  background: none !important;
}

#wpforo #wpforo-wrap .oasis-mini-agenda__month {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--os-ink) !important;
  background: none !important;
}

#wpforo #wpforo-wrap .oasis-mini-agenda__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding-top: 2px !important;
}

#wpforo #wpforo-wrap .oasis-mini-agenda__title {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  color: var(--os-ink) !important;
  background: none !important;
}

#wpforo #wpforo-wrap .oasis-mini-agenda__time {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  color: var(--os-muted) !important;
  background: none !important;
}

#wpforo #wpforo-wrap .oasis-mini-agenda__empty {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  color: var(--os-muted) !important;
}

#wpforo #wpforo-wrap .oasis-profile-sidebar__neighbor img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
}

/* Même "Stabilo jaune" que pour l'agenda : "Mon quartier"/"Fil commun"
   pointent vers des URLs /forum/..., donc ils matchent aussi la règle de
   wpforo-oasis.css qui force display:inline + dégradé jaune. On neutralise
   avec la même spécificité (classe + attribut) que ce fichier. */
#wpforo #wpforo-wrap .wpforo-widget-wrap a.oasis-profile-sidebar__link,
#wpforo #wpforo-wrap .wpforo-widget-wrap a.oasis-profile-sidebar__link:visited,
#wpforo #wpforo-wrap .wpforo-widget-wrap a[href*="/forum/"].oasis-profile-sidebar__link,
#wpforo #wpforo-wrap .wpforo-widget-wrap a[href*="/forum/"].oasis-profile-sidebar__link:visited {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--os-line-soft) !important;
  color: var(--os-ink) !important;
  background-color: transparent !important;
  background-image: none !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: normal !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-profile-sidebar__link {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--os-line-soft) !important;
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-profile-sidebar__link:last-child {
  border-bottom: 0 !important;
}

#wpforo #wpforo-wrap .oasis-profile-sidebar__link:hover {
  color: var(--os-pink) !important;
}

/* Le widget "Votes en cours" n'a pas la classe native wpforo-widget-wrap,
   donc pas la marge automatique en dessous : on l'ajoute explicitement. */
#wpforo #wpforo-wrap .oasis-quarter-widget--polls {
  margin-bottom: 22px !important;
}

#wpforo #wpforo-wrap .oasis-polls-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#wpforo #wpforo-wrap .oasis-polls-sidebar-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#wpforo #wpforo-wrap .oasis-polls-sidebar-item a {
  font-size: 13px;
  font-weight: 600;
  color: var(--os-ink, #111);
  text-decoration: none;
  line-height: 1.3;
}

#wpforo #wpforo-wrap .oasis-polls-sidebar-item a i {
  margin-right: 4px;
  color: var(--os-pink, #ff1493);
}

#wpforo #wpforo-wrap .oasis-polls-sidebar-item a:hover {
  text-decoration: underline;
}

#wpforo #wpforo-wrap .oasis-polls-sidebar-item small {
  font-size: 11px;
  color: #888;
}

@media (max-width: 480px) {
  #wpforo #wpforo-wrap .oasis-profile-sidebar__neighbor,
  #wpforo #wpforo-wrap .oasis-profile-sidebar__link {
    flex-wrap: wrap !important;
  }

  #wpforo #wpforo-wrap .oasis-profile-sidebar__neighbor span {
    min-width: 0 !important;
    word-break: break-word !important;
  }

}

/* ==========================================================================
   22. PROFIL / MESSAGERIE — CORRECTIONS MOBILE UNIQUEMENT
   (n'affecte rien au-dessus de 760px, desktop inchangé)
   ========================================================================== */

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  /* La bande d'identité (avatar+nom+stats) a une hauteur fixe héritée du
     plugin qui ne s'adapte pas quand le contenu passe sur plusieurs lignes
     sur mobile : ça provoque le chevauchement avec la bande des badges. */
  #wpforo #wpforo-wrap .wpforo-profile-head {
    height: auto !important;
    min-height: 0 !important;
  }

  #wpforo #wpforo-wrap .wpforo-profile-head-panel {
    flex-wrap: wrap !important;
  }

  #wpforo #wpforo-wrap .wpforo-profile-head-data,
  #wpforo #wpforo-wrap .wpforo-profile-head-top {
    flex-wrap: wrap !important;
    height: auto !important;
  }

  #wpforo #wpforo-wrap .oasis-profile-head-stats {
    margin-top: 8px !important;
  }

  /* Barre d'onglets (Profil/Activité/Favoris/Abonnements/Messages) : on
     garde le défilement horizontal, sans laisser les libellés se coller. */
  #wpforo #wpforo-wrap .wpforo-profile-menu {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 14px !important;
  }

  #wpforo #wpforo-wrap .wpf-profile-menu {
    flex: 0 0 auto !important;
  }

  /* Compteur "Sujets / Réponses" (onglet Activité) : on évite que le
     nombre passe seul à la ligne suivante. */
  #wpforo #wpforo-wrap .wpf-activity-panel-left span {
    white-space: nowrap !important;
  }

  #wpforo #wpforo-wrap .wpf-activity-panel-left {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Le panneau "Sujets/Réponses" (Activité, Favoris) a une grosse marge
     native (30px) qui crée un grand vide sur mobile : on la réduit et on
     laisse les filtres (Tout/Sujets/Réponse) passer à la ligne. */
  #wpforo #wpforo-wrap .wpf-activity-panel {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 8px 0 !important;
    padding: 10px !important;
    border-radius: 0 !important;
  }

  /* Avatar du profil : beaucoup trop grand sur mobile, et la colonne
     posée en dessous au lieu d'être à côté. */
  #wpforo #wpforo-wrap .wpforo-profile-head-panel {
    flex-direction: row !important;
    align-items: center !important;
    bottom: auto !important;
  }

  #wpforo #wpforo-wrap .wpforo-profile-head-panel .wpf-profile-avatar img,
  #wpforo #wpforo-wrap .wpforo-profile-head-panel .wpf-profile-avatar img.avatar {
    width: 64px !important;
    height: 64px !important;
  }

  #wpforo #wpforo-wrap .wpforo-profile-head-panel .wpforo-profile-head-data {
    padding-left: 12px !important;
  }

  /* Fil de messages privés : le plugin impose une hauteur fixe de 415px,
     ce qui occupe une trop grande partie de l'écran sur mobile même quand
     il y a peu de messages. */
  #wpforo #wpforo-wrap .wpfpm-content {
    height: auto !important;
    max-height: 55vh !important;
  }

  #wpforo #wpforo-wrap .wpfpm-toolbar {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }

  /* Sur mobile, on réduit aussi le padding de toute la zone pour
     récupérer de la place — le contenu reste séparé par des lignes fines. */
  #wpforo #wpforo-wrap .wpforo-profile-head,
  #wpforo #wpforo-wrap .wpforo-profile-head-bottom,
  #wpforo #wpforo-wrap .wpforo-user-actions,
  #wpforo #wpforo-wrap .wpforo-profile-menu,
  #wpforo #wpforo-wrap .wpforo-profile-content,
  #wpforo #wpforo-wrap .wpf-table,
  #wpforo #wpforo-wrap .wpfpm-toolbar,
  #wpforo #wpforo-wrap .wpfpm-form-wrapper .wpf-post-create {
    padding: 8px 0 !important;
  }

  #wpforo #wpforo-wrap .wpfpm-main-inner {
    padding: 0 !important;
  }
}

#wpforo #wpforo-wrap .wpf-table .wpf-field {
  border-bottom: 1px solid var(--os-line-soft) !important;
}

/* ==========================================================================
   23. PRÉFIXES DE SUJET (Topic Prefix) — contour de couleur, sans fond plein
   ========================================================================== */

/* Chaque préfixe a sa propre couleur de texte réglée dans
   wpForo → Topic Prefix : on la réutilise pour le contour (currentColor),
   on retire juste le fond plein imposé par le plugin. */
#wpforo #wpforo-wrap .wpf-prefix {
  background: color-mix( in srgb, var( --prefix-color, currentColor ) 15%, white ) !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 3px !important;
  padding: 1px 6px !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* Badge "Agenda" ajouté à gauche du préfixe de type sur les sujets venant du forum
   Agenda (ex: visible sur le Fil commun, pour repérer un événement hors de sa page). */
#wpforo #wpforo-wrap .oasis-prefix-agenda {
  --prefix-color: #555;
  margin-right: 4px;
}

/* Préfixes cliquables (15/07) : chaque badge renvoie vers "Derniers sujets" filtré sur ce
   préfixe (page déjà personnalisée) — annule le style de lien par défaut du navigateur pour
   que ça reste visuellement un badge, pas un lien souligné bleu. */
#wpforo #wpforo-wrap a.oasis-prefix-link {
  text-decoration: none !important;
  display: inline-block;
  margin-bottom: 6px !important;
}
#wpforo #wpforo-wrap a.oasis-prefix-link:hover .wpf-prefix {
  filter: brightness(0.92);
}

/* ==========================================================================
   24. BARRES DE DÉFILEMENT DES SIDEBARS — plus fines, partout
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-quarter-leftnav,
#wpforo #wpforo-wrap .oasis-quarter-sidebar,
#wpforo #wpforo-wrap .oasis-social-leftnav,
#wpforo #wpforo-wrap .oasis-social-rightbar {
  scrollbar-width: thin !important;
}

#wpforo #wpforo-wrap .oasis-quarter-leftnav::-webkit-scrollbar,
#wpforo #wpforo-wrap .oasis-quarter-sidebar::-webkit-scrollbar,
#wpforo #wpforo-wrap .oasis-social-leftnav::-webkit-scrollbar,
#wpforo #wpforo-wrap .oasis-social-rightbar::-webkit-scrollbar {
  width: 6px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-leftnav::-webkit-scrollbar-track,
#wpforo #wpforo-wrap .oasis-quarter-sidebar::-webkit-scrollbar-track,
#wpforo #wpforo-wrap .oasis-social-leftnav::-webkit-scrollbar-track,
#wpforo #wpforo-wrap .oasis-social-rightbar::-webkit-scrollbar-track {
  background: transparent !important;
}

#wpforo #wpforo-wrap .oasis-quarter-leftnav::-webkit-scrollbar-thumb,
#wpforo #wpforo-wrap .oasis-quarter-sidebar::-webkit-scrollbar-thumb,
#wpforo #wpforo-wrap .oasis-social-leftnav::-webkit-scrollbar-thumb,
#wpforo #wpforo-wrap .oasis-social-rightbar::-webkit-scrollbar-thumb {
  background: var(--os-line) !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   23. MÉTA ÉVÉNEMENT — carte de sujet, onglet/liste Agenda
   Classes isolées (div/span uniquement, aucun lien) pour ne jamais hériter
   du "Stabilo jaune" de wpforo-oasis.css. Voir oasis_social_wpforo_event_inline_meta_html().
   Rangée avec séparateurs verticaux en desktop, empilé avec séparateurs
   horizontaux en mobile (cf. oasis-quarter-topic, même point de bascule).
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-quarter-topic__prefix {
  display: block !important;
  margin: 0 0 6px !important;
}

/* Pilule de statut d'une proposition citoyenne (Décider ensemble) — retrouvée
   manquante le 07/08 (aucune règle CSS pour cette classe, sur aucune
   sauvegarde retrouvée) alors que le HTML/la classe existent bien. */
#wpforo #wpforo-wrap .oasis-proposal-status-pill {
  display: block !important;
  width: fit-content !important;
  margin: 0 8px 6px 0 !important;
  padding: 4px 10px !important;
  border: 1.5px solid var(--os-ink) !important;
  background: var(--os-yellow) !important;
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  vertical-align: middle !important;
}

/* Badge "Nouveau" (<b data-oasis-new-badge>) sur les cartes de sujet — n'avait
   aucune règle CSS dédiée, s'affichait en gras navigateur par défaut. Même
   gabarit pilule néo-brutaliste que .oasis-proposal-status-pill ci-dessus,
   en rose pour rester distinct du jaune (statut) et du vert (live). */
#wpforo #wpforo-wrap [data-oasis-new-badge],
#wpforo #wpforo-wrap .oasis-forum-card__new {
  display: inline-block !important;
  width: fit-content !important;
  margin: 0 0 0 8px !important;
  padding: 3px 9px !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  background: var(--os-pink) !important;
  color: #fff !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}


/* "Topic Prefix" a maintenant beaucoup plus d'options (intentions + thèmes) : sa liste
   déroulante (positionnée en absolu par vanilla-select) devient très haute et recouvre
   Titre/Message en dessous. On la limite pour réduire ce recouvrement (défilement interne
   déjà géré par vanillaSelectBox.css). */
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .vsb-menu .multi {
  max-height: 260px !important;
}

/* Le CSS du widget tiers "Topic Prefix" (vanillaSelectBox.css) ne stylise les cases à cocher,
   groupes repliables et menu déroulant que sous la classe ".wpf-topic-create" — celle du
   formulaire natif wpForo, pas la nôtre. Notre panneau injecté n'a jamais cette classe, donc
   ce widget s'affichait en simple liste à puces sans aucun style. On reproduit ici les mêmes
   règles, à l'identique, juste avec notre propre sélecteur ancêtre à la place. */
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .hidden-search {
  display: none !important;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field li[data-parent].closed {
  display: none !important;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field li[data-parent].open:not(.hidden-search) {
  display: block !important;
  line-height: 18px;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu {
  cursor: pointer;
  z-index: 1000;
  display: block;
  visibility: hidden;
  position: absolute;
  border: 1px solid #b2b2b2;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  border-radius: 4px;
  font-size: 11px;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-js-search-zone {
  position: absolute;
  z-index: 1001;
  width: 90%;
  min-height: 1.8em;
  padding: 2px;
  background-color: #fff;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-js-search-zone input {
  border: 1px solid #ddd;
  margin-left: 2px;
  width: 100%;
  border-radius: 4px;
  height: 27px !important;
  padding-left: 5px;
  font-size: 14px;
  transition: none;
  margin-top: 6px;
  background: #f9f9f9;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-main {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  width: 100%;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu ul {
  user-select: none;
  list-style: none;
  white-space: nowrap;
  margin: 0px;
  margin-top: 4px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  color: #333;
  cursor: pointer;
  overflow-y: auto;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field li.disabled,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field li.overflow {
  cursor: not-allowed;
  opacity: 0.3;
  background-color: #999;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field li.short {
  overflow: hidden;
  text-overflow: ellipsis;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-main button {
  min-width: 120px;
  width: 100%;
  text-align: left;
  z-index: 1;
  color: #555;
  background: white !important;
  border: 1px solid #dedede;
  line-height: 20px;
  font-size: 14px;
  padding: 6px 12px;
  margin-top: 1px;
  border-radius: 7px;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-main button.disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-main .title {
  margin-right: 6px;
  user-select: none;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-main ul {
  white-space: nowrap;
  min-width: 100% !important;
  max-width: 640px !important;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu li {
  font-size: 14px;
  background-color: #fff;
  min-height: 1.4em;
  padding: 0.2em 2em 0.2em 1em;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu li.grouped-option b {
  display: inline-block;
  font-size: 15px;
  margin-left: 1px;
  transform: translate(-28px);
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu li.grouped-option.open span {
  display: inline-block;
  font-size: inherit;
  margin-top: -3px;
  height: 10px;
  width: 10px;
  transform: translate(-38px) rotate(45deg);
  border-bottom: 3px solid black;
  border-right: 3px solid black;
  border-radius: 2px;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu li.grouped-option.closed span {
  display: inline-block;
  font-size: inherit;
  height: 10px;
  width: 10px;
  transform: translate(-38px) rotate(-45deg);
  border-bottom: 3px solid black;
  border-right: 3px solid black;
  border-radius: 2px;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu li.grouped-option i {
  display: none;
  font-size: inherit;
  float: left;
  font-weight: bold;
  margin-left: 22px;
  margin-right: 2px;
  height: 11px;
  width: 8px;
  border: 1px solid;
  border-radius: 3px;
  padding: 1px 3px 2px 3px;
  margin-top: 0px;
  color: black;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu li.grouped-option.checked i::after {
  content: "";
  display: inline-block;
  font-size: inherit;
  color: #333;
  float: left;
  margin-left: 0px;
  transform: rotate(45deg);
  height: 8px;
  width: 5px;
  border-bottom: 3px solid black;
  border-right: 3px solid black;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu :not(.multi) li.active {
  margin-left: 7px;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu :not(.multi) li.active::before {
  content: "";
  display: inline-block;
  font-size: inherit;
  margin-left: -18px;
  transform: rotate(45deg);
  height: 10px;
  width: 5px;
  border-bottom: 3px solid black;
  border-right: 3px solid black;
  border-radius: 2px;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu .multi li {
  font-size: 14px;
  background-color: #fff;
  min-height: 1.4em;
  padding: 0.2em 2em 0.2em 26px;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu .multi li.grouped-option {
  font-size: 15px;
  padding-left: 5px;
  margin-left: 38px;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu .multi li.grouped-option:hover {
  font-weight: bold;
  text-decoration: underline;
  color: rgb(52, 31, 112);
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu .multi li:not(.grouped-option)::before {
  content: "";
  display: inline-block;
  font-size: inherit;
  float: left;
  font-weight: bold;
  margin-left: -22px;
  margin-right: 2px;
  border: 1px solid;
  border-radius: 3px;
  padding: 7px;
  margin-top: 0px;
  color: black;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu .multi li[data-value="0"]:not(.grouped-option)::before,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu .multi li[data-value="0"]:not(.grouped-option).active::after {
  content: "";
  display: none;
  cursor: default;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu .multi li[data-value="0"]:not(.grouped-option) {
  cursor: default;
  margin-top: -8px;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu .multi li:not(.grouped-option).active::after {
  content: "";
  display: inline-block;
  font-size: inherit;
  color: #333;
  float: left;
  margin-left: -17px;
  transform: rotate(45deg);
  margin-top: 2px;
  height: 10px;
  width: 6px;
  border-bottom: 3px solid black;
  border-right: 3px solid black;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu .multi > p {
  line-height: 30px;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field li[data-parent] {
  padding-left: 50px !important;
}

/* ── Deux zones de préfixe (Intention + Thème) ────────────────────────── */
#wpforo #wpforo-wrap .oasis-pfx-zones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
#wpforo #wpforo-wrap .oasis-pfx-zone {
  border-radius: 0;
  overflow: visible;
}
/* Le thème Kaala impose Poppins à tout le site (theme.json). Les champs natifs
   wpForo (ex. "Titre de ton sujet") s'affichent en Inter — déjà chargé sur le site
   (Google Fonts, voir usage existant plus bas dans ce même fichier) — donc on
   fixe explicitement la même police ici pour que "Quel est le sujet principal/
   thème" ne détonne pas visuellement avec le reste du formulaire. */
#wpforo #wpforo-wrap .oasis-pfx-zone__toggle,
#wpforo #wpforo-wrap .oasis-pfx-zone__option,
#wpforo #wpforo-wrap .oasis-pfx-group summary.oasis-pfx-group__title {
  font-family: "Inter", system-ui, sans-serif !important;
}
#wpforo #wpforo-wrap .oasis-pfx-zone__toggle {
  width: 100%;
  text-align: left;
  background: #fff !important;
  border: 1px solid var(--os-line) !important;
  border-radius: 0;
  padding: 7px 12px;
  font-size: 14px;
  color: #555;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
#wpforo #wpforo-wrap .oasis-pfx-zone__toggle[aria-expanded="true"] {
  border-radius: 0;
  border-bottom-color: transparent;
}
#wpforo #wpforo-wrap .oasis-pfx-zone__question {
  font-weight: 500;
  color: #333;
}
#wpforo #wpforo-wrap .oasis-pfx-zone__current {
  font-size: 13px;
  color: #888;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
#wpforo #wpforo-wrap .oasis-pfx-zone__current:not(.oasis-pfx-zone__empty) {
  color: var(--os-ink);
  font-style: normal;
  font-weight: 500;
}
#wpforo #wpforo-wrap .oasis-pfx-zone__panel {
  border: 1px solid var(--os-line) !important;
  border-top: none !important;
  border-radius: 0;
  background: #fff;
  padding: 10px 12px;
}
#wpforo #wpforo-wrap .oasis-pfx-zone__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#wpforo #wpforo-wrap .oasis-pfx-zone__option {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 4px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--os-ink);
  transition: background 0.15s, color 0.15s;
}
#wpforo #wpforo-wrap .oasis-pfx-zone__option:hover {
  background: var(--os-yellow);
  border-color: var(--os-ink);
}
#wpforo #wpforo-wrap .oasis-pfx-zone__option.is-active {
  background: var(--os-yellow);
  color: var(--os-ink);
  border-color: var(--os-ink);
  font-weight: 600;
}
#wpforo #wpforo-wrap .oasis-pfx-group {
  margin-bottom: 4px;
}
#wpforo #wpforo-wrap .oasis-pfx-group summary.oasis-pfx-group__title {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #444;
  padding: 5px 4px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
#wpforo #wpforo-wrap .oasis-pfx-group summary.oasis-pfx-group__title::before {
  content: "▶";
  font-size: 10px;
  color: #888;
  transition: transform 0.15s;
  display: inline-block;
}
#wpforo #wpforo-wrap .oasis-pfx-group[open] summary.oasis-pfx-group__title::before {
  transform: rotate(90deg);
}
#wpforo #wpforo-wrap .oasis-pfx-group .oasis-pfx-zone__list {
  padding: 4px 0 6px 18px;
}
#wpforo #wpforo-wrap .oasis-pfx-zone__sub-label {
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 600;
  font-size: 13px;
  color: #444;
  margin: 8px 0 4px;
}

/* Un fond jaune est imposé par une règle legacy (wpforo-oasis.css, "#wpforo #wpforo-wrap
   select", spécificité 2 ID) sur tout <select> natif — repérable notamment sur "Quartier
   concerné" (champ personnalisé Agenda). Neutralisé ici (même préfixe d'ID pour égaler sa
   spécificité) plutôt que d'y toucher, pour rester au même style plat que les autres champs
   du formulaire (input texte, textarea). */
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel select,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel option {
  background-color: #fff !important;
  background-image: none !important;
  color: var(--os-ink) !important;
  box-shadow: none !important;
  font-weight: 400 !important;
  font-family: "Inter", system-ui, sans-serif !important;
}
#wpforo #wpforo-wrap .oasis-pfx-zone__sub-label:first-child {
  margin-top: 0;
}


/* L'auto-complétion native wpForo (jQuery .suggest()) réaffiche le champ texte libre des
   mots-clés (display:flex) après que notre JS l'ait caché (display:none) — un script qui
   gagne sur un autre selon l'ordre d'exécution, fragile. Le CSS !important règle ça une
   fois pour toutes, sans toucher à la logique JS existante. */
#wpforo #wpforo-wrap input.wpf-tags[data-oasis-tag-picker="done"] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   Sondage inline (oasis-poll-*)
   Entièrement indépendant des classes .poll-wrap / .wpf-poll-* du plugin legacy.
   ───────────────────────────────────────────────────────────────── */

/* Palettes de couleurs : noir / rose / violet / bleu / vert / orange / jaune */
:root {
  --op-1: #101010;
  --op-2: #FF1F8E;
  --op-3: #9B8ECA;
  --op-4: #3FA9F5;
  --op-5: #C5D400;
  --op-6: #FF7A00;
  --op-7: #FFD600;
}

#wpforo #wpforo-wrap .oasis-poll-wrap {
  position: relative;
  margin: 12px 0 8px;
  padding: 10px 16px 12px;
  scroll-margin-top: 280px;
  border: 1.5px solid #e4e4e4;
  border-radius: 8px;
  background: #f6f6f6;
  font-size: 14px;
}

/* Bandeau "VOTE EN COURS" en haut du cadre */
#wpforo #wpforo-wrap .oasis-poll-wrap::before {
  content: "VOTE EN COURS";
  display: block;
  margin: -10px -16px 10px;
  padding: 5px 16px 5px;
  background: #ececec;
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid #e0e0e0;
  color: #FF1F8E;
  font: 900 9px/1 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .1em;
}

#wpforo #wpforo-wrap .oasis-poll-question {
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--os-ink, #111);
}

#wpforo #wpforo-wrap .oasis-poll-proposal-title {
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  color: var(--os-ink, #111);
}

#wpforo #wpforo-wrap .oasis-poll-expiry {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  color: #888;
  vertical-align: middle;
}

#wpforo #wpforo-wrap .oasis-poll-expiry--closed {
  color: #FF1F8E;
}
#wpforo #wpforo-wrap .oasis-poll-deadline-note {
  margin: 8px 0 12px;
  padding: 9px 11px;
  border-left: 3px solid #FF1F8E;
  background: #fff4fa;
  color: #625f5b;
  font-size: 12px;
  line-height: 1.45;
}

/* Gestion du vote : compacte, repliable et confortable sur petit écran. */
#wpforo #wpforo-wrap .oasis-proposal-flow {
  margin: 12px 0 10px;
  border-top: 1px solid #e4e4e4;
  border-bottom: 0;
}
#wpforo #wpforo-wrap .oasis-proposal-flow > summary {
  padding: 9px 0;
  cursor: pointer;
  color: #FF1F8E;
  font: 900 11px/1.2 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  list-style-position: inside;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__body {
  padding: 2px 0 10px;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__decision {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__form {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: 680px;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__form label {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__form textarea {
  display: block;
  width: 100%;
  min-height: 58px;
  box-sizing: border-box;
  resize: vertical;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__button {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100%;
  align-items: center;
  justify-self: start;
  padding: 7px 10px !important;
  border: 1px solid #101010;
  border-radius: 0;
  background: #FF1F8E;
  color: #101010;
  font: 800 12px/1.1 "Oswald", Impact, sans-serif !important;
  text-transform: uppercase !important;
  box-shadow: 3px 3px 0 #101010 !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__button:hover,
#wpforo #wpforo-wrap .oasis-proposal-flow__button:focus-visible {
  background: var(--os-yellow) !important;
  color: var(--os-ink) !important;
  transform: translateY(-2px);
  box-shadow: 3px 5px 0 #101010 !important;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__button.is-secondary {
  background: #f5c9df;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__hint {
  margin: 18px 0 0;
  font-size: 12px;
  color: #625f5b;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__hint--edit {
  margin-top: 4px;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__hint--attachments {
  margin-top: 3px;
  margin-bottom: 14px;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__follow-link {
  color: #FF1F8E !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  white-space: nowrap;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__follow-link::before {
  content: "→";
  display: inline-block;
  margin-right: 4px;
  text-decoration: none;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__follow-link:hover,
#wpforo #wpforo-wrap .oasis-proposal-flow__follow-link:focus-visible {
  color: #101010 !important;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__extend-label {
  margin: 18px 0 6px;
  font-size: 12px;
  color: #625f5b;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__extend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__extend-form {
  display: block;
  max-width: none;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__button--extend {
  background: #fff;
  color: #101010;
  font-size: 12px !important;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__history {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #e4e4e4;
  font-size: 12px;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__history > summary {
  cursor: pointer;
  color: #625f5b;
  font-weight: 600;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__edit-history ol {
  margin-top: 4px;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__history ol {
  margin: 8px 0 0 18px;
  padding: 0;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__history li {
  margin: 0 0 8px;
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
#wpforo #wpforo-wrap .oasis-proposal-flow__history li span {
  color: #625f5b;
}
@media (max-width: 600px) {
  #wpforo #wpforo-wrap .oasis-proposal-flow__button {
    width: auto !important;
  }

}

/* Formulaire de vote */
#wpforo #wpforo-wrap .oasis-poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

#wpforo #wpforo-wrap .oasis-poll-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 22px;
  cursor: pointer;
  font-weight: 400;
  font-size: 14px;
  min-height: 20px;
}

/* Input complètement invisible — supprime tooltip natif et décalage */
#wpforo #wpforo-wrap .oasis-poll-option input[type="radio"],
#wpforo #wpforo-wrap .oasis-poll-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Case visuelle via ::before sur le label */
#wpforo #wpforo-wrap .oasis-poll-option::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 1.5px solid #101010;
  border-radius: 2px;
  background: #fff;
  flex-shrink: 0;
  transition: background .1s, border-color .1s;
}

/* Croix SVG quand coché — couleur par ordre */
#wpforo #wpforo-wrap .oasis-poll-options .oasis-poll-option:nth-child(1):has(input:checked)::before { background-color: var(--op-1); border-color: var(--op-1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2L8 8M8 2L2 8' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 9px; background-repeat: no-repeat; background-position: center; }
#wpforo #wpforo-wrap .oasis-poll-options .oasis-poll-option:nth-child(2):has(input:checked)::before { background-color: var(--op-2); border-color: var(--op-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2L8 8M8 2L2 8' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 9px; background-repeat: no-repeat; background-position: center; }
#wpforo #wpforo-wrap .oasis-poll-options .oasis-poll-option:nth-child(3):has(input:checked)::before { background-color: var(--op-3); border-color: var(--op-3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2L8 8M8 2L2 8' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 9px; background-repeat: no-repeat; background-position: center; }
#wpforo #wpforo-wrap .oasis-poll-options .oasis-poll-option:nth-child(4):has(input:checked)::before { background-color: var(--op-4); border-color: var(--op-4); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2L8 8M8 2L2 8' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 9px; background-repeat: no-repeat; background-position: center; }
#wpforo #wpforo-wrap .oasis-poll-options .oasis-poll-option:nth-child(5):has(input:checked)::before { background-color: var(--op-5); border-color: var(--op-5); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2L8 8M8 2L2 8' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 9px; background-repeat: no-repeat; background-position: center; }
#wpforo #wpforo-wrap .oasis-poll-options .oasis-poll-option:nth-child(6):has(input:checked)::before { background-color: var(--op-6); border-color: var(--op-6); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2L8 8M8 2L2 8' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 9px; background-repeat: no-repeat; background-position: center; }
#wpforo #wpforo-wrap .oasis-poll-options .oasis-poll-option:nth-child(7):has(input:checked)::before { background-color: var(--op-7); border-color: var(--op-7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2L8 8M8 2L2 8' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 9px; background-repeat: no-repeat; background-position: center; }

#wpforo #wpforo-wrap .oasis-poll-submit {
  display: inline-block;
  padding: 6px 18px;
  border: 1.5px solid var(--os-ink, #111);
  border-radius: 4px;
  background: var(--os-ink, #111);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}

#wpforo #wpforo-wrap .oasis-poll-submit:hover {
  opacity: .8;
}

#wpforo #wpforo-wrap .oasis-poll-submit:disabled {
  opacity: .45;
  cursor: default;
}

/* Résultats */
#wpforo #wpforo-wrap .oasis-poll-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

#wpforo #wpforo-wrap .oasis-poll-result-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

#wpforo #wpforo-wrap .oasis-poll-result-label {
  grid-column: 1 / -1;
  font-weight: 400;
  color: var(--os-ink, #111);
}

#wpforo #wpforo-wrap .oasis-poll-result-row--mine .oasis-poll-result-label {
  font-weight: 700;
}

#wpforo #wpforo-wrap .oasis-poll-bar-wrap {
  grid-column: 1 / 3;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}

/* Couleur des barres par ordre */
#wpforo #wpforo-wrap .oasis-poll-bar { height: 100%; border-radius: 3px; transition: width .4s ease; }
#wpforo #wpforo-wrap .oasis-poll-results .oasis-poll-result-row:nth-child(1) .oasis-poll-bar { background: var(--op-1); }
#wpforo #wpforo-wrap .oasis-poll-results .oasis-poll-result-row:nth-child(2) .oasis-poll-bar { background: var(--op-2); }
#wpforo #wpforo-wrap .oasis-poll-results .oasis-poll-result-row:nth-child(3) .oasis-poll-bar { background: var(--op-3); }
#wpforo #wpforo-wrap .oasis-poll-results .oasis-poll-result-row:nth-child(4) .oasis-poll-bar { background: var(--op-4); }
#wpforo #wpforo-wrap .oasis-poll-results .oasis-poll-result-row:nth-child(5) .oasis-poll-bar { background: var(--op-5); }
#wpforo #wpforo-wrap .oasis-poll-results .oasis-poll-result-row:nth-child(6) .oasis-poll-bar { background: var(--op-6); }
#wpforo #wpforo-wrap .oasis-poll-results .oasis-poll-result-row:nth-child(7) .oasis-poll-bar { background: var(--op-7); }

#wpforo #wpforo-wrap .oasis-poll-result-pct {
  color: #555;
  font-size: 12px;
  white-space: nowrap;
  text-align: right;
}

/* Footer (compteur votants + messages d'état) */
#wpforo #wpforo-wrap .oasis-poll-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e0e0e0;
  color: #888;
  font-size: 12px;
}

#wpforo #wpforo-wrap .oasis-poll-login,
#wpforo #wpforo-wrap .oasis-poll-vote-to-see {
  margin: 0 0 10px;
  font-size: 13px;
  color: #666;
}

#wpforo #wpforo-wrap .oasis-poll-login a {
  color: var(--os-ink, #111);
  text-decoration: underline;
}

@media (max-width: 600px) {
  #wpforo #wpforo-wrap .oasis-poll-wrap {
    padding: 10px 12px 12px;
  }
  #wpforo #wpforo-wrap .oasis-poll-result-row {
    grid-template-columns: 1fr auto;
  }

}

/* ==========================================================================
   25. RECHERCHE — page de résultats native wpForo (thème "2026")
   Page non recréée par OASIS (URL native /forum/?wpfs=...), on habille
   uniquement son HTML existant. Le formulaire de recherche avancée
   (.wpf-search-bar) n'est jamais caché ni simplifié — Mia doit pouvoir
   comparer/retrouver toutes ses options telles quelles.
   ========================================================================== */

/* Bannière — même gabarit que .oasis-quarter-hero (pages Quartier/Ville) */
#wpforo #wpforo-wrap #wpforo-search-title {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 0 0 14px !important;
  padding: 30px 34px !important;
  background-color: var(--os-surface-solid) !important;
  background-image:
    repeating-linear-gradient(-12deg, transparent 0 24px, rgba(16, 16, 16, 0.045) 25px 26px) !important;
  border: 1px solid var(--os-line) !important;
  border-bottom: 4px solid var(--os-ink) !important;
  color: var(--os-muted) !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}

#wpforo #wpforo-wrap #wpforo-search-title .fas {
  color: var(--os-pink) !important;
}

#wpforo #wpforo-wrap #wpforo-search-title .wpfcl-5 {
  display: block !important;
  margin-top: 6px !important;
  color: var(--os-ink) !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: clamp(40px, 6vw, 72px) !important;
  font-weight: 400 !important;
  line-height: 0.95 !important;
  text-transform: uppercase !important;
}

/* Formulaire natif (recherche + options avancées + champs personnalisés) :
   même cadre que nos widgets, contenu et options intégralement conservés. */
#wpforo #wpforo-wrap .wpf-search-bar {
  padding: 16px !important;
  margin-bottom: 14px !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
}

#wpforo #wpforo-wrap .wpf-search-label {
  display: block !important;
  margin-bottom: 4px !important;
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .wpf-search-bar input[type="text"],
#wpforo #wpforo-wrap .wpf-search-bar input[type="search"],
#wpforo #wpforo-wrap .wpf-search-bar select {
  width: 100% !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-ink) !important;
  border-radius: 0 !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 12px !important;
}

#wpforo #wpforo-wrap .wpf-search-bar select[multiple] {
  min-height: 120px !important;
  padding: 8px !important;
}

#wpforo #wpforo-wrap .wpf-search-bar select[multiple] option {
  background-color: transparent !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .wpf-search-bar select[multiple] option:hover {
  background: var(--os-yellow) !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .wpf-toggle-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

#wpforo #wpforo-wrap .wpf-search-bar input.wpf-search,
#wpforo #wpforo-wrap .wpf-search-bar input[type="submit"] {
  min-height: 40px !important;
  padding: 0 18px !important;
  color: #101010 !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

#wpforo #wpforo-wrap .wpforo-search-sep {
  margin: 14px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--os-line-soft) !important;
}

/* Liste des résultats — même carte que les sujets du fil */
#wpforo #wpforo-wrap .wpforo-search-results {
  display: grid !important;
  gap: 14px !important;
  margin: 14px 0 !important;
}

#wpforo #wpforo-wrap .wpf-search-result-card {
  padding: 18px !important;
  color: var(--os-ink) !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
  box-shadow: var(--os-shadow) !important;
}

#wpforo #wpforo-wrap .wpf-sr-header {
  margin-bottom: 8px !important;
}

#wpforo #wpforo-wrap .wpf-sr-title a {
  color: var(--os-ink) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .wpf-sr-title a:hover {
  text-decoration: underline !important;
}

#wpforo #wpforo-wrap .wpf-sr-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px 12px !important;
  margin-bottom: 10px !important;
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .wpf-sr-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#wpforo #wpforo-wrap .wpf-sr-meta-item a {
  color: var(--os-muted) !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .wpf-sr-relevance {
  padding: 2px 6px !important;
  color: #fff !important;
  background: var(--os-pink) !important;
}

#wpforo #wpforo-wrap .wpf-sr-body {
  max-width: 76ch !important;
  margin: 0 0 10px !important;
  color: var(--os-ink) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

#wpforo #wpforo-wrap .wpf-sr-body .wpf-sword {
  background: var(--os-yellow) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

#wpforo #wpforo-wrap .wpf-sr-footer {
  border-top: 1px solid var(--os-line-soft) !important;
  padding-top: 10px !important;
}

#wpforo #wpforo-wrap .wpf-sr-view-link {
  color: var(--os-pink) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .wpf-sr-view-link:hover {
  text-decoration: underline !important;
}

#wpforo #wpforo-wrap .wpf-sr-empty {
  padding: 22px !important;
  color: var(--os-muted) !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
  font-weight: 700 !important;
  text-align: center !important;
}

#wpforo #wpforo-wrap .wpf-sr-empty-icon {
  margin-bottom: 8px !important;
  font-size: 22px !important;
}

/* ==========================================================================
   23. « QUOI DE NEUF » — TIMELINE D'ACTIVITÉ (recent-activity)
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-activity-banner {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 18px !important;
  padding: 30px 34px !important;
  background-color: var(--os-surface-solid) !important;
  background-image:
    repeating-linear-gradient(-12deg, transparent 0 24px, rgba(16, 16, 16, 0.045) 25px 26px) !important;
  border: 1px solid var(--os-line) !important;
  border-bottom: 4px solid var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-activity-banner .oasis-activity-banner__kicker {
  margin: 0 0 6px !important;
  color: var(--os-pink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-activity-banner__title {
  margin: 0 0 12px !important;
  color: var(--os-ink) !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: clamp(48px, 6vw, 82px) !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-activity-banner__sub {
  margin: 0 !important;
  color: var(--os-ink) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

#wpforo #wpforo-wrap .wpforo-recent-activity-wrap {
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-activity-main {
  min-width: 0 !important;
}

/* Cette page utilise nativement la sidebar wpForo (.wpforo-right-sidebar,
   layout 71%/26% en float) : on la désactive pour laisser nos deux barres
   OASIS (gauche + droite) occuper toute la largeur, comme sur les pages
   quartier. Scopé via body.wpft-recent-activity/wpft-recent (classes posées
   par wpForo uniquement sur ces vues) pour ne toucher aucune autre page native. */
body.wpft-recent-activity #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout .wpforo-content,
body.wpft-recent #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout .wpforo-content {
  width: 100% !important;
  float: none !important;
}

body.wpft-recent-activity #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout .wpforo-right-sidebar,
body.wpft-recent #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout .wpforo-right-sidebar {
  display: none !important;
}

/* Sur les pages quartier, tout est transparent depuis le body jusqu'au
   contenu : le gris de fond (--os-page-fallback) apparaît derrière les
   cartes blanches et sépare visuellement les 3 zones. Ici, les conteneurs
   natifs wpForo (.wpforo-content, .wpforo-profile-content...) restent
   opaques blancs par défaut : on les rend transparents pour retrouver le
   même contraste. */
body.wpft-recent-activity #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout,
body.wpft-recent-activity #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout .wpforo-content,
body.wpft-recent-activity #wpforo #wpforo-wrap .wpforo-profile-content.wpf-pt-recent-activity,
body.wpft-recent #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout,
body.wpft-recent #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout .wpforo-content,
body.wpft-recent #wpforo #wpforo-wrap .wpforo-profile-content.wpf-pt-recent,
body.wpft-recent-activity #wpforo #wpforo-wrap .wpf-profile-section.wpf-mi-section,
body.wpft-recent-activity #wpforo #wpforo-wrap .wpf-profile-section.wpf-mi-section .wpf-profile-body,
body.wpft-recent #wpforo #wpforo-wrap .wpf-profile-section.wpf-mi-section,
body.wpft-recent #wpforo #wpforo-wrap .wpf-profile-section.wpf-mi-section .wpf-profile-body,
body.wpft-recent #wpforo #wpforo-wrap .wpforo-recent-wrap {
  background: transparent !important;
}

/* .wpforo-recent-activity-wrap (page « Quoi de neuf » uniquement) garde son
   fond blanc (section 23 ci-dessous) pour former un cadre visible derrière
   le déroulé d'activité, au lieu de laisser les cartes flotter directement
   sur le gris de fond — .wpforo-recent-wrap (page « Derniers sujets/messages »)
   reste transparent comme avant, cette demande ne concernait que Quoi de neuf. */

#wpforo #wpforo-wrap .wpf-head-bar {
  margin: 0 0 20px !important;
  padding: 0 0 14px !important;
  background: transparent !important;
  border-bottom: 2px solid var(--os-ink) !important;
}

/* wpforo-oasis.css (chargé avant ce fichier) impose un fond blanc + bordure
   gauche noire à TOUS les .wpf-head-bar du forum via un sélecteur plus
   spécifique (#wpforo #wpforo-wrap .wpforo-content .wpf-head-bar, !important).
   On neutralise ici (titre + filtres restent sans cadre, demande du 12/07 :
   Mia ne veut aucun cadre autour du titre/des filtres, uniquement autour du
   déroulé d'activité plus bas — voir .wpf-recent-activity-content). */
#wpforo #wpforo-wrap .wpforo-content .wpforo-recent-activity-wrap .wpf-head-bar,
#wpforo #wpforo-wrap .wpforo-content .wpforo-recent-wrap .wpf-head-bar {
  background: transparent !important;
  border-left: 0 !important;
  padding: 0 0 14px !important;
}

/* Le SEUL cadre blanc de cette page : autour du déroulé d'activité lui-même
   (liste des sujets/réponses récents), pas autour du titre ni des filtres. */
#wpforo #wpforo-wrap .wpf-recent-activity-content {
  padding: 14px !important;
  background: var(--os-surface-solid) !important;
  border: 1px solid var(--os-line) !important;
}

#wpforo #wpforo-wrap .wpf-head-bar #wpforo-title {
  margin: 0 0 12px !important;
  color: var(--os-ink) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 24px !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .wpf-recent-activity-filter-form {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

#wpforo #wpforo-wrap .wpf-recent-activity-filter-form select {
  padding: 9px 12px !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  border-radius: 0 !important;
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

#wpforo #wpforo-wrap .wpf-timeline {
  position: relative !important;
}

#wpforo #wpforo-wrap .wpf-timeline-line {
  background: var(--os-line) !important;
}

#wpforo #wpforo-wrap .wpf-timeline-item {
  margin-bottom: 16px !important;
}

#wpforo #wpforo-wrap .wpf-timeline-user a {
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .wpf-timeline-user a:hover {
  color: var(--os-pink) !important;
}

#wpforo #wpforo-wrap .wpf-timeline-date {
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
}

#wpforo #wpforo-wrap .wpf-timeline-avatar img {
  border: 2px solid var(--os-ink) !important;
  border-radius: 50% !important;
}

#wpforo #wpforo-wrap .wpf-timeline-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  border-radius: 50% !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .wpf-timeline-card {
  padding: 16px 18px !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(16, 16, 16, 0.16) !important;
}

#wpforo #wpforo-wrap .wpf-timeline-activity {
  color: var(--os-ink) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

#wpforo #wpforo-wrap .wpf-activity-topic-link,
#wpforo #wpforo-wrap .wpf-activity-forum-link,
#wpforo #wpforo-wrap .wpf-activity-author-link {
  color: var(--os-ink) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .wpf-activity-topic-link:hover,
#wpforo #wpforo-wrap .wpf-activity-forum-link:hover,
#wpforo #wpforo-wrap .wpf-activity-author-link:hover {
  color: var(--os-pink) !important;
  border-color: var(--os-pink) !important;
}

#wpforo #wpforo-wrap .wpf-timeline-excerpt {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--os-line-soft) !important;
  color: var(--os-muted) !important;
  font-size: 13px !important;
}

#wpforo #wpforo-wrap .wpf-activity-delete {
  color: var(--os-muted) !important;
  background: transparent !important;
  border: none !important;
}

#wpforo #wpforo-wrap .wpf-activity-delete:hover {
  color: var(--os-pink) !important;
}

#wpforo #wpforo-wrap .wpf-timeline-load-more {
  padding: 12px 22px !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  border-radius: 0 !important;
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
}

#wpforo #wpforo-wrap .wpf-timeline-load-more:hover {
  background: var(--os-pink) !important;
  color: #fff !important;
}

#wpforo #wpforo-wrap .wpf-timeline-empty {
  padding: 42px 22px !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
  color: var(--os-muted) !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* ==========================================================================
   24. « DERNIERS SUJETS » / « DERNIERS MESSAGES » (recent-topics/recent-posts)
   ========================================================================== */

#wpforo #wpforo-wrap .wpforo-recent-content table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-htr .wpf-shead-title {
  padding: 0 0 10px !important;
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-ttr {
  background: var(--os-surface-solid) !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-ttr td {
  border-top: 2px solid var(--os-ink) !important;
  padding: 16px 14px 10px !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-ptr td {
  background: var(--os-surface-solid) !important;
  padding: 0 14px 16px !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-tr-sep td {
  height: 14px !important;
  background: transparent !important;
  border: 0 !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-spost-avatar img {
  border: 2px solid var(--os-ink) !important;
  border-radius: 50% !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-spost-title-link {
  color: var(--os-ink) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 20px !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-spost-title-link:hover {
  color: var(--os-pink) !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content p {
  margin: 6px 0 !important;
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-spost-forum-label {
  margin-right: 4px !important;
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-spost-forum a {
  color: var(--os-ink) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-spost-forum a:hover {
  color: var(--os-pink) !important;
  border-color: var(--os-pink) !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-stext {
  color: var(--os-ink) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-stext ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-stext li {
  margin-bottom: 8px !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-stext li a {
  color: var(--os-ink) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--os-line) !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-stext li a:hover {
  color: var(--os-pink) !important;
  border-color: var(--os-pink) !important;
}

#wpforo #wpforo-wrap .wpforo-recent-content .wpf-spost-topic-recent-posts {
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
}

#wpforo #wpforo-wrap .wpf-head-filter select {
  padding: 9px 12px !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  border-radius: 0 !important;
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .wpf-p-error {
  padding: 42px 22px !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
  color: var(--os-muted) !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* ── Section Mots clés — retouches ──────────────────────────────────── */
/* Masquer le span "(Séparer les étiquettes...)" dans le label wpForo */
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-topic-tags label span,
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-topic-tags-label label span {
  display: none !important;
}
/* Cadre léger autour de la zone tagpicker */
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .oasis-tagpicker {
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  padding: 10px 12px 12px;
}
/* Chips (mots clés sélectionnés) */
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .oasis-tagpicker__chip {
  border-radius: 5px;
}
/* Compteur */
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .oasis-tagpicker__counter {
  margin-bottom: 10px;
}

/* ── Pills de mots-clés natifs wpForo (migré depuis wpforo-oasis.css le
   06/07 : classes réelles seulement — vérifié contre le code de wpForo.
   .wpforo-tags + .wpf-tags = tags de sujet (functions-template.php,
   wpforo_tags()) ; .wpf-tag-list = pied de page sujet ; .wpf-sr-tags =
   résultats de recherche (2026/search.php). Les anciens sélecteurs
   a[href*="/tag/"] et a[href*="wpfst="] ont été supprimés : le vrai lien
   de tag wpForo est "?wpfin=tag&wpfs=...", ces motifs ne matchaient donc
   jamais rien et ne servaient qu'à élargir le risque de collision avec
   n'importe quel lien du site. ────────────────────────────────────── */
#wpforo #wpforo-wrap .wpforo-tags,
#wpforo #wpforo-wrap .wpf-tags,
#wpforo #wpforo-wrap .wpf-tag-list,
#wpforo #wpforo-wrap .wpf-sr-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 6px !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 8px 0 0 !important;
  padding: 0 !important;

  list-style: none !important;
  overflow: hidden !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#wpforo #wpforo-wrap .wpforo-tags li,
#wpforo #wpforo-wrap .wpf-tags li,
#wpforo #wpforo-wrap .wpf-tag-list li,
#wpforo #wpforo-wrap .wpf-sr-tags li {
  display: inline-flex !important;
  align-items: center !important;

  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  overflow: hidden !important;
}

#wpforo #wpforo-wrap .wpforo-tags a,
#wpforo #wpforo-wrap .wpforo-tags a:visited,
#wpforo #wpforo-wrap .wpf-tags a,
#wpforo #wpforo-wrap .wpf-tags a:visited,
#wpforo #wpforo-wrap .wpf-tag-list a,
#wpforo #wpforo-wrap .wpf-tag-list a:visited,
#wpforo #wpforo-wrap .wpf-sr-tags a,
#wpforo #wpforo-wrap .wpf-sr-tags a:visited {
  display: inline-block !important;

  max-width: 100% !important;

  margin: 0 !important;
  padding: 2px 5px !important;

  color: var(--os-ink) !important;
  background: var(--os-yellow) !important;

  border: 1px solid var(--os-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.04em !important;
  text-transform: lowercase !important;
  text-decoration: none !important;

  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

#wpforo #wpforo-wrap .wpforo-tags a::before,
#wpforo #wpforo-wrap .wpf-tags a::before,
#wpforo #wpforo-wrap .wpf-tag-list a::before,
#wpforo #wpforo-wrap .wpf-sr-tags a::before {
  content: "#" !important;
  display: inline !important;
  margin-right: 1px !important;
  color: var(--os-ink) !important;
  background: transparent !important;
}

#wpforo #wpforo-wrap .wpforo-tags a::after,
#wpforo #wpforo-wrap .wpf-tags a::after,
#wpforo #wpforo-wrap .wpf-tag-list a::after,
#wpforo #wpforo-wrap .wpf-sr-tags a::after {
  content: none !important;
  display: none !important;
}

#wpforo #wpforo-wrap .wpforo-tags a:hover,
#wpforo #wpforo-wrap .wpf-tags a:hover,
#wpforo #wpforo-wrap .wpf-tag-list a:hover,
#wpforo #wpforo-wrap .wpf-sr-tags a:hover {
  color: var(--os-ink) !important;
  background: var(--os-yellow) !important;

  border-color: var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;

  text-decoration: none !important;

  transform: translate(-1px, -1px) !important;
}

/* ==========================================================================
   25. « MOTS-CLÉS » — PAGE NATIVE WPFORO (tags.php)
   ========================================================================== */

body.wpft-tags #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout .wpforo-content {
  width: 100% !important;
  float: none !important;
}

body.wpft-tags #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout .wpforo-right-sidebar {
  display: none !important;
}

body.wpft-tags #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout,
body.wpft-tags #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout .wpforo-content,
body.wpft-tags #wpforo #wpforo-wrap .wpforo-profile-content.wpf-pt-tags,
body.wpft-tags #wpforo #wpforo-wrap .wpf-profile-section.wpf-mi-section,
body.wpft-tags #wpforo #wpforo-wrap .wpf-profile-section.wpf-mi-section .wpf-profile-body,
body.wpft-tags #wpforo #wpforo-wrap .wpforo-tags-wrap {
  background: transparent !important;
}

/* Le HTML natif de tags.php devient le 3e enfant de la grille
   .oasis-quarter-layout (voir oasis_social_wpforo_tags_page_wrap()) — le
   vrai enfant direct est le conteneur wpForo .wpforo-profile-content.wpf-pt-tags
   (pas .wpforo-tags-wrap, imbriqué plus profond dedans). On le place au
   milieu via `order`, les deux asides ayant déjà order 1/3 en inline style. */


/* Titre natif "Étiquettes du sujet" invisible mais qui gardait sa hauteur de
   ligne : ça laissait un vide en haut de la colonne du milieu, pas aligné
   avec le haut des barres latérales. Masqué, remplacé par .oasis-tagrank-title
   (JS) qui reprend le même gabarit que le bouton "Réduire" — trouvé le 06/07. */
#wpforo #wpforo-wrap .wpforo-tags-wrap .wpf-head-bar {
  display: none !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-title {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 40px !important;
  margin: 0 0 12px !important;
  padding: 8px 12px !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

/* Widget de recherche natif — pas utile ici, la page est déjà dédiée aux
   mots-clés (demande du 06/07). */
#wpforo #wpforo-wrap .wpforo-tags-wrap .wpf-search-bar,
#wpforo #wpforo-wrap .wpforo-tags-wrap hr {
  display: none !important;
}

/* Tant que le JS n'a pas reconstruit le classement, on laisse les pills
   natives visibles (repli sans JS) — masquées seulement une fois
   .oasis-tagrank injecté à côté. */
#wpforo #wpforo-wrap .wpforo-tags-content:has(.oasis-tagrank) > tag {
  display: none !important;
}

/* wpForo (matrix.css) stylise TOUT lien à l'intérieur de .wpf-tags en pill
   jaune avec des pseudo-éléments ::before/::after façon post-it — nos lignes
   de classement sont aussi des <a> dans ce même conteneur, donc héritent de
   cette règle native malgré nos classes. On neutralise explicitement avant
   de restyliser (trouvé et corrigé le 06/07 : sans ce reset, le classement
   s'affichait comme un bloc jaune écrasé, texte qui déborde par-dessus). */
/* Le natif cible ".wpf-tags a" (id,id,classe,type = mêmes poids qu'un simple
   ".oasis-tagrank-row"), donc pour gagner à spécificité égale + !important
   des deux côtés (et donc départager par l'ordre de chargement, nous en
   dernier), chaque sélecteur ci-dessous ajoute explicitement le type "a". */
#wpforo #wpforo-wrap a.oasis-tagrank-row,
#wpforo #wpforo-wrap a.oasis-tagrank-row:visited,
#wpforo #wpforo-wrap a.oasis-tagrank-row:hover,
#wpforo #wpforo-wrap a.oasis-tagrank-pill,
#wpforo #wpforo-wrap a.oasis-tagrank-pill:visited,
#wpforo #wpforo-wrap a.oasis-tagrank-pill:hover {
  background-image: none !important;
}

#wpforo #wpforo-wrap a.oasis-tagrank-row::before,
#wpforo #wpforo-wrap a.oasis-tagrank-row::after,
#wpforo #wpforo-wrap a.oasis-tagrank-pill::before,
#wpforo #wpforo-wrap a.oasis-tagrank-pill::after {
  display: none !important;
  content: none !important;
}

#wpforo #wpforo-wrap .oasis-tagrank {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  margin: 0 0 20px !important;
}

#wpforo #wpforo-wrap .oasis-tagrank > a.oasis-tagrank-row {
  margin-bottom: 12px !important;
}

#wpforo #wpforo-wrap a.oasis-tagrank-row {
  display: grid !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  line-height: normal !important;
  position: static !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  grid-template-columns: 64px minmax(0, 1fr) auto 26px !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  background: var(--os-surface-solid) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 4px 4px 0 var(--os-ink) !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap a.oasis-tagrank-row--first {
  grid-template-columns: 84px minmax(0, 1fr) auto 30px !important;
  background: var(--os-ink) !important;
  color: var(--os-yellow) !important;
  border-width: 3px !important;
  box-shadow: 5px 5px 0 var(--os-yellow) !important;
}

/* Filet de sécurité lisibilité carte n°1 : force la couleur du texte sur
   TOUS les enfants, sans dépendre de l'héritage (qui peut être coupé par
   une règle native ciblant directement rank/label/count) — trouvé le 06/07,
   première carte illisible malgré le fond noir déjà correct. */
#wpforo #wpforo-wrap a.oasis-tagrank-row--first .oasis-tagrank-label {
  color: var(--os-yellow) !important;
}

/* Le badge de rang garde fond jaune + texte noir même sur la carte n°1 noire
   (sinon jaune sur jaune, comme pour le badge "sujets") — trouvé le 06/07. */
#wpforo #wpforo-wrap a.oasis-tagrank-row--first .oasis-tagrank-rank {
  color: var(--os-ink) !important;
  background: var(--os-yellow) !important;
}

/* Le badge du compteur garde son fond jaune même sur la carte n°1 noire :
   le texte doit rester noir dessus, pas jaune (sinon jaune sur jaune). */
#wpforo #wpforo-wrap a.oasis-tagrank-row--first .oasis-tagrank-count {
  color: var(--os-ink) !important;
  background: var(--os-yellow) !important;
  border-color: var(--os-yellow) !important;
}

#wpforo #wpforo-wrap a.oasis-tagrank-row--first .oasis-tagrank-cat {
  color: var(--os-paper) !important;
  opacity: 0.75 !important;
}

/* Badge de position : bloc plein-hauteur noir/jaune, gros chiffre — doit se
   voir comme "voici le rang", pas se confondre avec le nombre de sujets
   (revu le 06/07 : trop discret pour ressembler à un vrai classement). */
#wpforo #wpforo-wrap .oasis-tagrank-rank {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  margin: auto !important;
  background: var(--os-yellow) !important;
  color: var(--os-ink) !important;
  border-radius: 8px !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-row--first .oasis-tagrank-rank {
  width: 58px !important;
  height: 58px !important;
  border-radius: 10px !important;
  font-size: 26px !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 16px 20px !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-label {
  font-family: "Oswald", Impact, sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  text-transform: uppercase !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-row--first .oasis-tagrank-label {
  font-size: 30px !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-cat {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--os-muted) !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-bar {
  display: block !important;
  height: 8px !important;
  background: var(--os-paper) !important;
  border: 1px solid var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-row--first .oasis-tagrank-bar {
  height: 10px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-fill {
  display: block !important;
  height: 100% !important;
  /* PAS de !important sur width : le JS l'anime via style inline juste après
     l'insertion (double requestAnimationFrame) — un !important ici bloquerait
     à jamais cette animation, "!important" en feuille de style l'emporte
     toujours sur un style inline sans !important. Bug trouvé le 06/07. */
  width: 0;
  background: var(--os-ink) !important;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-row--first .oasis-tagrank-fill {
  background: var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-count {
  display: flex !important;
  align-items: center !important;
  margin: 16px 12px !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  color: var(--os-ink) !important;
  background: var(--os-yellow) !important;
  padding: 6px 12px !important;
  border: 1.5px solid var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--os-ink) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-row--first .oasis-tagrank-arrow {
  color: var(--os-yellow) !important;
  font-size: 26px !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-row--first .oasis-tagrank-count {
  font-size: 17px !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-rest {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 8px !important;
  border-top: 2px solid var(--os-ink) !important;
  padding-top: 12px !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-rest summary {
  cursor: pointer !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--os-muted) !important;
}

#wpforo #wpforo-wrap .oasis-tagrank-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 12px !important;
}

#wpforo #wpforo-wrap a.oasis-tagrank-pill {
  float: none !important;
  height: auto !important;
  line-height: normal !important;
  position: static !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  background: var(--os-surface-solid) !important;
  border: 1.5px solid var(--os-ink) !important;
  color: var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap a.oasis-tagrank-pill:hover {
  background: var(--os-yellow) !important;
}


/* ==========================================================================
   26. « RECHERCHE » — PAGE NATIVE WPFORO (search.php)
   ========================================================================== */

body.wpft-search #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout .wpforo-content {
  width: 100% !important;
  float: none !important;
}

body.wpft-search #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout .wpforo-right-sidebar {
  display: none !important;
}

body.wpft-search #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout,
body.wpft-search #wpforo #wpforo-wrap .wpforo-main.wpforo-right-sidebar-layout .wpforo-content {
  background: transparent !important;
}

/* Flexbox, pas grid : avec un nombre d'enfants qui varie (barre + 1 ou 2
   blocs de contenu selon la vue), le placement automatique en grille
   recasait tout n'importe comment (contenu au-dessus, barre tout en bas).
   Le script JS de oasis_social_wpforo_search_page_wrap() regroupe d'abord
   titre + résultats en un seul .oasis-search-main, donc il n'y a plus que
   2 enfants réels côte à côte : la barre et ce bloc. */
#wpforo #wpforo-wrap .oasis-search-layout {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
}

#wpforo #wpforo-wrap .oasis-search-layout > .oasis-quarter-leftnav {
  flex: 0 0 280px !important;
}

#wpforo #wpforo-wrap .oasis-search-layout > .oasis-search-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ==========================================================================
   ZONE DE MESSAGE (TinyMCE) — cadre visible + bouton micro qui ne gêne plus
   ========================================================================== */

/* La zone d'édition n'a aucun cadre visible par défaut — on lui donne EXACTEMENT
   la même bordure native que "Titre de ton sujet" (2px solid noir, sans arrondi —
   valeurs du thème Kaala, `--kaala--form-border-*`), pour qu'il n'y ait plus
   qu'un seul style de bordure sur tout le formulaire (demande explicite de Mia
   le 07/07 : trois épaisseurs différentes coexistaient). */
/* Le cadre est posé sur .wpf-field-wrap (pas .mce-tinymce) car ce dernier
   n'entoure que la zone de texte — pas la ligne micro/smiley/texte
   "Tu ne peux pas encore joindre..." en dessous, tirée vers le haut par une
   marge négative native de wpForo (-38px, prévue pour 1 ligne de texte ;
   ici le texte fait 2 lignes et débordait donc en bas du cadre, constaté le
   09/07). .wpf-field-wrap contient tout, donc le cadre englobe toujours
   l'ensemble quelle que soit la longueur du texte. */
#wpforo #wpforo-wrap .wpf-field-name-body .wpf-field-wrap {
  border: 1px solid var(--os-line) !important;
  border-radius: 0 !important;
}
#wpforo #wpforo-wrap .wpf-field-name-body .mce-tinymce {
  border: none !important;
}
/* Certains formulaires de réponse chargent un <textarea> brut sans TinyMCE
   (pas de .mce-tinymce du tout) — son style natif a sa propre bordure, ce qui
   créait un 2e cadre visible en plus de celui posé ci-dessus (constaté par
   Mia le 09/07 avec DevTools). */
#wpforo #wpforo-wrap .wpf-field-name-body textarea {
  border: none !important;
  outline: none !important;
}

/* Micro (wpforo-voice-posting) et smiley (wpForo core) : leur CSS natif les
   positionne par rapport à .wpf-field-wrap, c'est-à-dire par rapport au HAUT
   DE TOUT LE CADRE, barre d'outils TinyMCE comprise. Sur "Nouveau sujet"
   (barre d'outils riche, qui peut passer sur 2 lignes en écran étroit), ça
   les fait atterrir dans la barre d'outils au redimensionnement (constaté
   par Mia le 09/07). Correctif : on les rattache plutôt à .wpf-extra-fields,
   leur propre bloc, qui se positionne toujours juste après la zone de texte
   quelle que soit la hauteur de la barre d'outils — stable sur "Répondre"
   ET "Nouveau sujet", à toutes les tailles d'écran. */
#wpforo #wpforo-wrap .wpf-field-name-body .wpf-extra-fields {
  position: relative !important;
  padding: 8px 40px 8px 12px !important;
  min-height: 70px !important;
  /* wpForo pose nativement margin-top:-38px ici pour compenser l'espace vide
     sous une textarea fixe à 2 lignes. Depuis que le message s'agrandit avec
     le texte tapé (growBodyTextarea() en JS), cette marge négative faisait
     chevaucher "Mes médias/Joindre des fichiers" par-dessus le texte — neutralisée. */
  margin-top: 0 !important;
}

#wpforo #wpforo-wrap .wpf-field-name-body .wpfv-button {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
}

#wpforo #wpforo-wrap .wpf-field-name-body .wpfe-button {
  position: absolute !important;
  bottom: 6px !important;
  right: 8px !important;
  margin-left: 0 !important;
}

/* Astérisque "champ obligatoire" des formulaires natifs wpForo : orange par
   défaut, mis en noir pour rester cohérent avec la palette du site. */
#wpforo #wpforo-wrap .wpf-field-required-icon {
  color: var(--os-ink) !important;
}

/* ==========================================================================
   RÉACTIONS — J'aime (cœur) / Je n'aime pas (pouce vers le bas)
   Seule source de vérité pour l'icône des réactions, en Font Awesome uni,
   même style/couleur que les autres icônes de la ligne (Suivre/Répondre/
   Signaler) — plus de SVG personnalisés (Like_oasis.svg, Dislike_oasis.svg,
   coeur.svg, coeur-1.svg). Ce bloc remplace plusieurs tentatives dispersées
   qui se contredisaient parfois entre elles ET avec wpforo-oasis.css (icône
   invisible au chargement, visible seulement après un clic qui forçait un
   recalcul de style) — nettoyage complet du 09/08, demande de Mia. La
   section réactions de wpforo-oasis.css a été retirée en parallèle de ce
   chantier, ce fichier est désormais la seule source pour ces icônes.
   ========================================================================== */

#wpforo #wpforo-wrap .wpforo-reaction,
#wpforo #wpforo-wrap .wpf-reaction-wrap,
#wpforo #wpforo-wrap .wpf-reactions,
#wpforo #wpforo-wrap .wpf-post-reactions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* oasis_social_wpforo_render_native_reaction() ajoute la classe native
   .wpforo-post à son conteneur (nécessaire pour que le JS natif rafraîchisse
   .reacted-users en direct après un clic — voir le commentaire dans
   inc/oasis-wpforo-social.php). Mais wpforo-oasis.css stylise .wpforo-post
   comme une carte de message complète (fond blanc, bordure, marge 28px) —
   cadre non voulu ici, ce <div> n'enveloppe qu'un petit bouton de réaction.
   Neutralisé via la classe compagne .oasis-reaction-postwrap (retour de Mia
   le 09/08, régression du premier passage). */
#wpforo #wpforo-wrap .oasis-reaction-postwrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Cache les icônes/SVG natifs — seul le ::before ci-dessous affiche un glyphe.
   Ciblage par attribut [data-type] plutôt que par la classe .wpf-react : le
   plugin natif (modules/reactions/classes/Template.php::like_button()) ne
   pose cette classe que sur l'option NON sélectionnée du popover — l'option
   qui correspond à la réaction déjà choisie ne l'a pas, donc un sélecteur
   basé sur .wpf-react ratait cette icône (pouce natif bleu/rouge visible),
   alors que [data-type] est toujours posé, peu importe l'état. Trouvé et
   corrigé le 09/08, retour de Mia sur le premier passage de nettoyage. */
#wpforo #wpforo-wrap .wpforo-reaction .wpf-current-reaction svg,
#wpforo #wpforo-wrap .wpforo-reaction .wpf-current-reaction .wpf-reaction-icon,
#wpforo #wpforo-wrap .wpforo-reaction .wpf-popover-content [data-type] svg,
#wpforo #wpforo-wrap .wpforo-reaction .wpf-popover-content [data-type] .wpf-reaction-icon,
#wpforo #wpforo-wrap .reacted-users .wpf-reaction-icon svg,
#wpforo #wpforo-wrap #wpf-reaction-list-wrap .wpf-reaction-icon svg,
#wpforo-reaction-general-wrap .wpf-reaction-icon svg {
  display: none !important;
}

/* Bouton principal (avant/après avoir réagi). Le "color: ink" que ce bloc
   portait a ete retire le 19/08 (retour de Mia) : cette couleur ne s'affiche
   jamais (le span n'a pas de texte visible, seule l'icone ::before compte,
   qui a sa propre couleur explicite plus bas) -- reste mort qui pretait a
   confusion avec la vraie regle de couleur de l'icone. */
#wpforo #wpforo-wrap .wpforo-reaction .wpf-current-reaction {
  display: inline-flex !important;
  align-items: center !important;
}

#wpforo #wpforo-wrap .wpforo-reaction .wpf-current-reaction::before {
  content: "\f004" !important; /* fa-heart : J'aime, par défaut */
  display: inline-block !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: var(--os-ink) !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
}

#wpforo #wpforo-wrap .wpforo-reaction .wpf-current-reaction[data-type="down"]::before {
  content: "\f165" !important; /* fa-thumbs-down : une fois "Je n'aime pas" choisi */
}

/* Icone rose une fois la reaction posee (retour de Mia le 19/08 : sans ca,
   le clic ne donnait aucun retour visuel, impossible de savoir si ca avait
   marche). wpForo (Template.php::like_button()) pose la classe .wpf-unreact
   (sans "ed") sur .wpf-current-reaction UNIQUEMENT une fois qu'on a deja
   reagi -- nom trompeur, ca ne veut pas dire "non reagi" mais "cliquer ici
   pour annuler la reaction". A ne pas confondre avec .wpf-unreacted (avec
   "ed"), la classe de l'etat NON reagi utilisee juste au-dessus pour le
   survol. */
#wpforo #wpforo-wrap .wpforo-reaction .wpf-current-reaction.wpf-unreact,
#wpforo #wpforo-wrap .wpforo-reaction .wpf-current-reaction.wpf-unreact::before {
  color: var(--os-pink) !important;
}

/* Popover de choix (J'aime / Je n'aime pas) — [data-type], pas .wpf-react
   (voir explication plus haut). */
#wpforo #wpforo-wrap .wpforo-reaction .wpf-popover-content [data-type] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .wpforo-reaction .wpf-popover-content [data-type]::before {
  content: "\f004" !important;
  display: inline-block !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--os-ink) !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
}

#wpforo #wpforo-wrap .wpforo-reaction .wpf-popover-content [data-type="down"]::before {
  content: "\f165" !important;
}

/* Liste des personnes ayant réagi (sur le forum + fenêtre admin wpForo,
   hors #wpforo) : même traitement, cœur/pouce Font Awesome. */
#wpforo #wpforo-wrap .reacted-users .wpf-reaction-icon::before,
#wpforo #wpforo-wrap #wpf-reaction-list-wrap .wpf-reaction-icon::before,
#wpforo-reaction-general-wrap .wpf-reaction-icon::before {
  content: "\f004" !important;
  display: inline-block !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--os-ink) !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
}

#wpforo #wpforo-wrap .reacted-users .wpf-recexc-down .wpf-reaction-icon::before,
#wpforo #wpforo-wrap #wpf-reaction-list-wrap .wpf-reaction-icon[title="N'aime pas"]::before,
#wpforo-reaction-general-wrap .wpf-reaction-icon[title="N'aime pas"]::before,
#wpforo-reaction-general-wrap .wpf-reaction-tab[title="N'aime pas"] .wpf-reaction-icon::before {
  content: "\f165" !important;
}

/* Onglets de la fenêtre admin (icône directement sur l'onglet, pas sur .wpf-reaction-icon). */
#wpforo-reaction-general-wrap #wpf-reaction-tabs .wpf-reaction-tab[data-type="up"] > svg,
#wpforo-reaction-general-wrap #wpf-reaction-tabs .wpf-reaction-tab[data-type="down"] > svg {
  display: none !important;
}

#wpforo-reaction-general-wrap #wpf-reaction-tabs .wpf-reaction-tab[data-type="up"]::before,
#wpforo-reaction-general-wrap #wpf-reaction-tabs .wpf-reaction-tab[data-type="down"]::before {
  content: "\f004" !important;
  display: inline-block !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  margin-right: 3px !important;
  vertical-align: -2px !important;
  color: var(--os-muted) !important;
}

#wpforo-reaction-general-wrap #wpf-reaction-tabs .wpf-reaction-tab[data-type="down"]::before {
  content: "\f165" !important;
}

/* Chiffre par type sur le badge "qui a réagi" (.oasis-recexc-count, injecté en
   JS — initialiseReactionExcerptCounts) : le plugin natif n'affiche cette
   valeur qu'une fois la fenêtre ouverte, Mia veut le voir directement à côté
   de chaque icône (retour du 09/08). Espacement corrigé le 09/08 (2e retour) :
   ❤1👎1 était tout collé, aucun espace entre les types ni avant le total. */
#wpforo #wpforo-wrap .reacted-users {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .wpf-reaction-excerpt-wrap {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  color: var(--os-ink) !important;
}

/* Total global (badge "ALL", ex. le "2" isolé après les cercles) masqué —
   redondant avec le détail par type déjà affiché à côté, demande de Mia le
   09/08. Sur tous les écrans, pas de media query ici. */
#wpforo #wpforo-wrap .wpf-reaction-excerpt-wrap .wpf-recexc-all {
  display: none !important;
}

/* .wpf-reaction-excerpt (le cercle ❤/👎 seul) reste tel quel — 25x25px fixé
   par reactions.css du plugin, prévu pour l'icône seule. Le chiffre vit dans
   .oasis-recexc-item, un wrapper ajouté en JS À CÔTÉ du cercle, pas dedans —
   sinon un total à 2-3 chiffres déborderait du cercle (retour de Mia le 09/08). */
#wpforo #wpforo-wrap .oasis-recexc-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-recexc-count {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--os-ink) !important;
  white-space: nowrap !important;
}

@media (max-width: 480px) {
  #wpforo #wpforo-wrap .wpf-reaction-excerpt-wrap {
    gap: 8px !important;
  }

  #wpforo #wpforo-wrap .reacted-users .wpf-reaction-icon::before,
  #wpforo-reaction-general-wrap .wpf-reaction-icon::before {
    font-size: 14px !important;
  }

  #wpforo #wpforo-wrap .oasis-recexc-count {
    font-size: 11px !important;
  }

}

@media (max-width: 680px) {

}

/* Survol du bouton pas encore reagi (.wpf-unreacted) : apercu rose avant clic.
   Une fois reagi, la couleur rose est desormais permanente (voir la regle
   .wpf-unreact plus haut) -- ancien commentaire disait "reste gris", corrige
   le 19/08. */
#wpforo #wpforo-wrap .wpforo-reaction .wpf-current-reaction.wpf-unreacted:hover::before {
  color: var(--os-pink) !important;
}

/* Le bouton courant ne doit afficher qu'une seule icône : wpForo ajoute parfois
   un <i> natif à côté de notre pseudo-élément. */
#wpforo #wpforo-wrap .wpforo-reaction .wpf-current-reaction > i,
#wpforo #wpforo-wrap .wpforo-reaction .wpf-current-reaction > svg {
  display: none !important;
}

/* Dans le menu, cœur et pouce bas deviennent roses au survol uniquement. */
#wpforo #wpforo-wrap .wpforo-reaction .wpf-popover-content [data-type]:hover::before {
  color: var(--os-pink) !important;
}

#wpforo #wpforo-wrap .wpforo-reaction .wpf-popover-content [data-type].wpf-reaction-selected::before,
#wpforo #wpforo-wrap .wpforo-reaction .wpf-popover-content [data-type].wpf-reaction-tab-active::before,
#wpforo #wpforo-wrap .wpforo-reaction .wpf-popover-content [data-type][aria-pressed="true"]::before {
  color: var(--os-muted) !important;
}

/* Lightbox pour les images jointes (clic = overlay sur la page, pas un nouvel
   onglet). Injecté par JS directement sur <body>, hors de #wpforo-wrap. */
.oasis-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(16, 16, 16, 0.88) !important;
}

.oasis-lightbox.is-open {
  display: flex !important;
}

.oasis-lightbox img {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

.oasis-lightbox__close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  color: #101010 !important;
  background: #fff !important;
  border: 2px solid #101010 !important;
  border-radius: 50% !important;
  font-size: 24px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

/* Bouton "Télécharger" du lightbox (demande de Mia le 19/08, repositionné
   à droite le 19/08 aussi) — en bas à droite, le ✕ restant en haut à
   droite : assez espacés verticalement pour ne pas se toucher. */
.oasis-lightbox__download {
  position: absolute !important;
  bottom: 16px !important;
  right: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  color: #101010 !important;
  background: var(--os-yellow) !important;
  border: 2px solid #101010 !important;
  /* Ombre en blanc, pas en noir comme les autres boutons du site : ici le
     fond du lightbox est sombre (rgba(16,16,16,.88)), une ombre noire y
     devient invisible. Repéré par Mia le 19/08 sur capture. */
  box-shadow: 3px 3px 0 #ffffff !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 0.05s ease, box-shadow 0.05s ease !important;
}

.oasis-lightbox__download:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0 #ffffff !important;
  color: #101010 !important;
}

.oasis-lightbox__download:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0 #ffffff !important;
}
#wpforo #wpforo-wrap .oasis-quarter-new-topic-panel__head { align-items: center !important; }
#wpforo #wpforo-wrap .oasis-required-mark { color: var(--os-pink) !important; font-weight: 900 !important; }


/* Formulaire proposition : bloc mobile canonique */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .oasis-idea-content-box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 8px 0 12px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .oasis-idea-content-box,
  #wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .oasis-idea-content-box *,
  #wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .oasis-idea-builder,
  #wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .oasis-idea-builder * {
    box-sizing: border-box !important;
  }

  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-td,
  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-tr,
  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-field,
  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-field-wrap,
  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-label-wrap,
  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-field-name-title,
  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-field-name-prefix,
  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-topic-tags,
  #wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder__field {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    overflow: visible !important;
  }

  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-field-name-title .wpf-label-wrap,
  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-field-name-prefix .wpf-label-wrap {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* :not([hidden]) ajouté le 21/08 — cette règle (2 ID de spécificité) écrasait
     l'attribut hidden des champs "Précise..." (Autre) du formulaire Proposition
     Citoyenne, qui restaient visibles par défaut sur mobile malgré JS/CSS corrects
     par ailleurs (bug mettant du temps à être trouvé, voir HANDOFF-NTM.md 21/08).
     Protège aussi tout futur champ hidden ajouté dans .oasis-idea-content-box. */
  #wpforo #wpforo-wrap .oasis-idea-content-box input:not([hidden]),
  #wpforo #wpforo-wrap .oasis-idea-content-box textarea:not([hidden]),
  #wpforo #wpforo-wrap .oasis-idea-content-box select:not([hidden]) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-field-name-title input {
    min-height: 48px !important;
  }

  #wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-builder__field textarea {
    min-height: 112px !important;
    height: auto !important;
    resize: vertical !important;
    overflow: auto !important;
    white-space: pre-wrap !important;
  }

  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-field-name-prefix .wpf-label-wrap {
    display: flex !important;
  }

  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-field-name-prefix .wpf-label {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  #wpforo #wpforo-wrap .oasis-idea-content-box .wpf-field-name-prefix .wpf-desc {
    display: inline !important;
    flex: 1 1 180px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #wpforo #wpforo-wrap .oasis-idea-content-box .oasis-idea-tags-help {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  #wpforo #wpforo-wrap .oasis-pfx-zone__toggle {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  #wpforo #wpforo-wrap .oasis-pfx-zone__question,
  #wpforo #wpforo-wrap .oasis-pfx-zone__current {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-overflow: clip !important;
  }

  #wpforo #wpforo-wrap .oasis-pfx-zone__panel,
  #wpforo #wpforo-wrap .oasis-pfx-zone__list,
  #wpforo #wpforo-wrap .oasis-pfx-group,
  #wpforo #wpforo-wrap .oasis-pfx-group .oasis-pfx-zone__list,
  #wpforo #wpforo-wrap .oasis-pfx-zone__option {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #wpforo #wpforo-wrap .oasis-pfx-zone__option {
    display: block !important;
    margin: 6px 0 !important;
    padding: 8px 10px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: left !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-main,
  #wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu,
  #wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu ul,
  #wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu li {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  #wpforo #wpforo-wrap .oasis-quarter-new-topic-panel .wpf-field .vsb-menu ul {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {

}


@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {

}
/* OASIS — taille commune des contenus vidéo intégrés wpForo */ #wpforo #wpforo-wrap .wpf-embed{width:min(360px,100%)!important;max-width:100%!important;height:auto!important;aspect-ratio:16/9!important;overflow:hidden!important} #wpforo #wpforo-wrap .wpf-embed iframe,#wpforo #wpforo-wrap .wpf-embed video{display:block!important;width:100%!important;max-width:100%!important;height:100%!important}

#wpforo #wpforo-wrap .oasis-feed-attachment--video iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  border: 0 !important;
}

/* ==========================================================================
   CHAMPS DE SAISIE ET MENUS DÉROULANTS NATIFS
   Migré le 15/08 depuis wpforo-oasis.css (section 11, chantier de suppression
   de ce fichier legacy), copié tel quel sans réécriture.
   ========================================================================== */

#wpforo #wpforo-wrap textarea,
#wpforo #wpforo-wrap input[type="text"],
#wpforo #wpforo-wrap input[type="search"],
#wpforo #wpforo-wrap input[type="password"],
#wpforo #wpforo-wrap input[type="email"],
#wpforo #wpforo-wrap input[type="url"] {
  background: var(--oasis-white, #fdfdfd) !important;
  color: var(--oasis-black, #101010) !important;
  border: 1px solid rgba(16, 16, 16, 0.55) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#wpforo #wpforo-wrap select,
#wpforo #wpforo-wrap .wpforo-search-wrap select,
#wpforo #wpforo-wrap .wpf-search-bar select,
#wpforo #wpforo-wrap select.wpfin {
  min-height: 40px !important;

  padding: 8px 38px 8px 12px !important;

  color: var(--oasis-black, #101010) !important;
  background-color: var(--oasis-yellow, #ffd600) !important;
  background-image: none !important;

  border: 2px solid var(--oasis-black, #101010) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--oasis-black, #101010) !important;

  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;

  cursor: pointer !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
}

#wpforo #wpforo-wrap select:focus,
#wpforo #wpforo-wrap textarea:focus,
#wpforo #wpforo-wrap input:focus {
  border-color: var(--oasis-black, #101010) !important;
  outline: 3px solid var(--oasis-yellow, #ffd600) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

#wpforo #wpforo-wrap select option,
#wpforo #wpforo-wrap select option:checked,
#wpforo #wpforo-wrap select option:hover {
  color: var(--oasis-black, #101010) !important;
  background-color: var(--oasis-yellow, #ffd600) !important;
}

#wpforo #wpforo-wrap ::selection {
  background: var(--oasis-yellow, #ffd600) !important;
  color: var(--oasis-black, #101010) !important;
}

#wpforo #wpforo-wrap ::-moz-selection {
  background: var(--oasis-yellow, #ffd600) !important;
  color: var(--oasis-black, #101010) !important;
}

/* ==========================================================================
   Sous-titre proposition citoyenne / sondage dans les widgets "Votes en cours"
   (barre latérale du forum) — distingue les deux types mélangés jusqu'ici,
   en simple texte, sans bandeau de couleur (refusé par Mia le 17/08 : "je
   n'aime pas du tout ces barres roses"). Deux widgets différents affichent
   ces listes (#wpf-widget-recent-polls : zone widget WP classique ;
   .oasis-polls-sidebar-item : rendu OASIS réellement utilisé sur les pages
   Quartier/Ville), d'où les deux sélecteurs. */
#wpf-widget-recent-polls .oasis-poll-widget-badge,
.oasis-polls-sidebar-item .oasis-poll-widget-badge {
  display: block;
  margin: 0 0 2px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--os-muted, #625f5b);
}

/* ==========================================================================
   Boutons wpForo (migré depuis wpforo-oasis.css, débranché le 15/08)
   ========================================================================== */

#wpforo #wpforo-wrap .wpf-button,
#wpforo #wpforo-wrap input[type="submit"],
#wpforo #wpforo-wrap button[type="submit"],
#wpforo #wpforo-wrap a[href*="add-topic"] {
  color: var(--oasis-black) !important;
  background: var(--oasis-pink) !important;

  border: 2px solid var(--oasis-black) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--oasis-black) !important;

  font-family: "Oswald", Impact, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .wpf-button:hover,
#wpforo #wpforo-wrap input[type="submit"]:hover,
#wpforo #wpforo-wrap button[type="submit"]:hover,
#wpforo #wpforo-wrap a[href*="add-topic"]:hover {
  color: var(--oasis-black) !important;
  background: var(--oasis-yellow) !important;
  box-shadow: 1px 1px 0 var(--oasis-black) !important;
  transform: translate(2px, 2px) !important;
}

/* ==========================================================================
   NOUVELLE NAVIGATION 4 PILIERS (Fil Commun, Quartiers, Chantiers, Communs)
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-hub-nav-bar {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px 0 !important;
  margin: 0 !important;
}

#wpforo #wpforo-wrap .oasis-hub-nav-btn {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  padding: 8px 4px !important;
  background: #ffffff !important;
  color: var(--os-ink) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  transition: transform 0.05s ease, background 0.1s ease, box-shadow 0.05s ease !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
}

#wpforo #wpforo-wrap .oasis-hub-nav-btn:hover {
  background: #fafafa !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-hub-nav-btn.is-active {
  background: var(--os-yellow) !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
  transform: translate(-1px, -1px) !important;
}

#wpforo #wpforo-wrap .oasis-hub-nav-btn:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0 var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-hub-nav-btn i {
  font-size: 14px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#wpforo #wpforo-wrap .oasis-hub-nav-btn:nth-child(1) i { color: var(--os-pink) !important; }
#wpforo #wpforo-wrap .oasis-hub-nav-btn:nth-child(2) i { color: var(--os-green) !important; }
#wpforo #wpforo-wrap .oasis-hub-nav-btn:nth-child(3) i { color: #f97316 !important; }
#wpforo #wpforo-wrap .oasis-hub-nav-btn:nth-child(4) i { color: var(--os-blue) !important; }

#wpforo #wpforo-wrap .oasis-hub-nav-btn small {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--os-muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
}

/* Modale Bottom Sheet pour les 4 Piliers */
.oasis-hub-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  animation: oasisFadeIn 0.2s ease forwards !important;
}

.oasis-hub-modal-overlay[hidden] {
  display: none !important;
}

.oasis-hub-modal-card {
  background: #ffffff !important;
  border: 3px solid var(--os-ink) !important;
  border-bottom: 0 !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -6px 30px rgba(0,0,0,0.3) !important;
  width: 100% !important;
  max-width: 520px !important;
  padding: 18px 18px 36px !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  animation: oasisSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.oasis-hub-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--os-ink) !important;
}

.oasis-hub-modal-title {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--os-ink) !important;
  margin: 0 !important;
}

.oasis-hub-modal-close {
  width: 28px !important;
  height: 28px !important;
  background: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  border-radius: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  color: var(--os-ink) !important;
  cursor: pointer !important;
  transition: background 0.1s ease !important;
  padding: 0 !important;
}

.oasis-hub-modal-close:hover {
  background: var(--os-pink) !important;
  color: #ffffff !important;
}

.oasis-hub-modal-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.oasis-hub-choice-btn {
  background: #ffffff !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2.5px 2.5px 0 var(--os-ink) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
  cursor: pointer !important;
  transition: transform 0.05s ease, background 0.1s ease !important;
  box-sizing: border-box !important;
}

.oasis-hub-choice-btn:hover {
  background: var(--os-yellow) !important;
  color: var(--os-ink) !important;
}

.oasis-hub-choice-btn:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
}

.oasis-hub-choice-card {
  background: #ffffff !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2.5px 2.5px 0 var(--os-ink) !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

.oasis-hub-choice-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
  cursor: pointer !important;
}

.oasis-hub-choice-head:hover .oasis-hub-choice-name {
  color: var(--os-pink) !important;
}

.oasis-hub-choice-pills {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.oasis-hub-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  min-height: 32px !important;
  background: #f8f8f8 !important;
  border: 1.5px solid var(--os-ink) !important;
  border-radius: 999px !important;
  color: var(--os-ink) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  transition: background 0.1s ease, transform 0.05s ease, box-shadow 0.05s ease !important;
}

.oasis-hub-pill:hover {
  background: var(--os-yellow) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 2.5px 2.5px 0 var(--os-ink) !important;
}

.oasis-hub-pill:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0 var(--os-ink) !important;
}

@media (max-width: 480px) {
  .oasis-hub-pill {
    flex: 1 1 calc(50% - 4px) !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    min-height: 38px !important;
    font-size: 11px !important;
  }
}

.oasis-hub-choice-name {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}

.oasis-hub-choice-desc {
  font-family: "IBM Plex Sans", -apple-system, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: var(--os-muted) !important;
  text-transform: none !important;
  margin-top: 3px !important;
}

.oasis-hub-modal-overlay[hidden],
.oasis-hub-modal-pane[hidden] {
  display: none !important;
}

.oasis-hub-modal-pane {
  display: block !important;
}

.oasis-hub-modal-footer {
  margin-top: 14px !important;
  padding-top: 10px !important;
  border-top: 1.5px dashed rgba(16, 16, 16, 0.2) !important;
}

.oasis-hub-footer-btn {
  width: 100% !important;
  background: var(--os-bg, #f4f3f4) !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  padding: 10px 12px !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: var(--os-ink) !important;
  cursor: pointer !important;
  transition: background 0.1s ease !important;
}

.oasis-hub-footer-btn:hover {
  background: var(--os-yellow) !important;
}

.oasis-hub-footer-btn i {
  font-size: 13px !important;
}

@keyframes oasisSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes oasisFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 600px) {
  /* Barre des 4 piliers (Fil Commun/Quartiers/Chantiers/Communs) : en grille
     4 colonnes égales, un sous-titre long (ex. "Joliot-Curie / Lamaze /
     Cosmonautes" sous QUARTIERS) forçait sa colonne à s'élargir bien au-delà
     de sa part malgré l'ellipsis posé dessus (les pistes de grille en 1fr se
     dimensionnent sur le contenu intrinsèque, pas sur le rendu tronqué) —
     le bouton COMMUNS se retrouvait carrément hors écran, inatteignable.
     Repère par Mia le 19/08 sur "Joliot-Curie / Lamaze / Cosmonautes". Passage
     en rangée flex qui défile horizontalement : plus aucun bouton ne peut
     sortir de l'écran sans recours, on peut toujours glisser pour l'atteindre. */
  #wpforo #wpforo-wrap .oasis-hub-nav-bar {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
  }

  #wpforo #wpforo-wrap .oasis-hub-nav-bar::-webkit-scrollbar {
    display: none !important;
  }

  #wpforo #wpforo-wrap .oasis-hub-nav-btn {
    font-size: 11px !important;
    padding: 6px 2px !important;
    min-height: 44px !important;
    flex: 0 0 104px !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
  }
  #wpforo #wpforo-wrap .oasis-hub-nav-btn span {
    font-weight: 900 !important;
  }
  #wpforo #wpforo-wrap .oasis-hub-nav-btn small {
    font-size: 8px !important;
  }
  #wpforo #wpforo-wrap .oasis-hub-nav-btn i {
    font-size: 12px !important;
  }
  .oasis-hub-footer-btn {
    font-size: 11px !important;
    padding: 8px 10px !important;
  }
}

/* ==========================================================================
   TOP APP HEADER (Logo, Recherche, Cloche, Hamburger)
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-app-header {
  background: #ffffff !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#wpforo #wpforo-wrap .oasis-app-logo {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: var(--os-ink) !important;
  text-decoration: none !important;
}

/* "Saint-Denis" à côté du logo : grand écran seulement (demande de Mia le
   19/08). Masqué en dessous de 760px (même seuil mobile que le reste du
   fichier) pour ne pas allonger le libellé sur petit écran. */
#wpforo #wpforo-wrap .oasis-app-logo__city {
  color: var(--os-muted) !important;
}

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #wpforo #wpforo-wrap .oasis-app-logo__city {
    display: none !important;
  }
}

#wpforo #wpforo-wrap .oasis-app-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#wpforo #wpforo-wrap .oasis-header-icon-btn {
  width: 36px !important;
  height: 36px !important;
  background: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 14px !important;
  color: var(--os-ink) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  position: relative !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

#wpforo #wpforo-wrap .oasis-header-icon-btn.is-tools-btn {
  background: var(--os-surface-solid) !important;
}

#wpforo #wpforo-wrap .oasis-header-icon-btn.is-tools-btn:hover {
  background: var(--os-yellow) !important;
}

/* Cache l'icone eclair de l'entete uniquement sur vrai desktop/tablette
   paysage -- reste visible sur mobile ET tablette portrait (meme regle que
   partout ailleurs, demande de Mia le 20/08 : "je parle du haut, a cote de
   la loupe"), ou elle fait doublon volontaire avec celle de la barre du bas. */
@media (min-width: 761px) and (max-width: 1024px) and (orientation: landscape), (min-width: 1025px) {
  #wpforo #wpforo-wrap .oasis-header-icon-btn.is-tools-btn {
    display: none !important;
  }
}

#wpforo #wpforo-wrap .oasis-header-icon-btn.is-hamburger {
  background: var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .oasis-unread-dot {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 3px !important;
  background: var(--os-pink) !important;
  color: #ffffff !important;
  border: 1px solid var(--os-ink) !important;
  border-radius: 8px !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  transition: opacity 0.2s ease !important;
}

#wpforo #wpforo-wrap .oasis-unread-dot.is-hidden {
  display: none !important;
}

/* ==========================================================================
   CLOCHE — PANNEAU DÉROULANT DE NOTIFICATIONS RÉELLES
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-notif-wrap {
  position: relative !important;
  display: inline-flex !important;
}

.oasis-notif-dropdown {
  position: fixed !important;
  top: 60px;
  right: 12px;
  width: 320px !important;
  max-width: 88vw !important;
  max-height: 70vh !important;
  background: #ffffff !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 4px 4px 0 var(--os-ink) !important;
  z-index: 999997 !important;
  display: flex !important;
  flex-direction: column !important;
}

.oasis-notif-dropdown[hidden] {
  display: none !important;
}

.oasis-notif-dropdown__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  background: var(--os-yellow) !important;
  border-bottom: 2px solid var(--os-ink) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--os-ink) !important;
}

.oasis-notif-dropdown__clear {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  text-decoration: underline !important;
  color: var(--os-ink) !important;
  cursor: pointer !important;
}

.oasis-notif-dropdown__list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.oasis-notif-dropdown__empty {
  margin: 0 !important;
  padding: 18px 12px !important;
  font-size: 12.5px !important;
  color: var(--os-ink) !important;
  text-align: center !important;
}

.oasis-notif-dropdown__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
}

.oasis-notif-dropdown__item:last-child {
  border-bottom: none !important;
}

.oasis-notif-dropdown__item:hover {
  background: #f4f3f4 !important;
}

.oasis-notif-dropdown__icon {
  flex: 0 0 auto !important;
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  background: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  font-size: 11px !important;
  color: var(--os-pink) !important;
}

.oasis-notif-dropdown__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.oasis-notif-dropdown__label {
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}

.oasis-notif-dropdown__label strong {
  font-weight: 700 !important;
}

.oasis-notif-dropdown__excerpt {
  font-size: 11.5px !important;
  color: #555 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.oasis-notif-dropdown__date {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9.5px !important;
  color: #777 !important;
}

.oasis-notif-dropdown__foot {
  padding: 8px 12px !important;
  border-top: 2px solid var(--os-ink) !important;
  text-align: center !important;
}

.oasis-notif-dropdown__foot a {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
}

.oasis-search-dropdown {
  width: 400px !important;
  max-width: 92vw !important;
}

.oasis-search-dropdown__form {
  display: flex !important;
  gap: 6px !important;
  padding: 12px !important;
}

.oasis-search-dropdown__form input[type="search"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 10px !important;
  background: #ffffff !important;
  border: 2px solid var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13px !important;
  color: var(--os-ink) !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
}

.oasis-search-dropdown__form button {
  flex: 0 0 auto !important;
  height: 38px !important;
  padding: 0 12px !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--os-ink) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

@media (max-width: 480px) {
  .oasis-notif-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: 66px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* La recherche reste ancree sous son icone (comme sur les autres tailles
     d'ecran), contrairement au panneau de notifications qui, lui, remonte
     volontairement en bas pres de la barre de nav mobile. Valeurs fixes
     (et non le top/right calcules en JS, qu'on ne peut pas laisser gagner
     face a un !important existant) alignees sur celles du header mobile. */
  .oasis-search-dropdown {
    top: 60px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: 320px !important;
    max-width: 88vw !important;
  }
}

/* ==========================================================================
   SUJET À LA UNE
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-featured-hero-card {
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 4px 4px 0 var(--os-ink) !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 10px 0 !important;
}

#wpforo #wpforo-wrap .oasis-featured-pill {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  background: var(--os-pink) !important;
  color: #ffffff !important;
  border: 1px solid var(--os-ink) !important;
  padding: 2px 6px !important;
  text-transform: uppercase !important;
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

#wpforo #wpforo-wrap .oasis-featured-title {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-featured-meta {
  font-size: 12px !important;
  color: #333333 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#wpforo #wpforo-wrap .oasis-featured-cta {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  background: var(--os-ink) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  padding: 5px 12px !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* ==========================================================================
   BANDEAU FLASH CITOYEN (Votes & RDV)
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-flash-widget-bar {
  background: #ffffff !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 3px 3px 0 var(--os-ink) !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}

#wpforo #wpforo-wrap .oasis-flash-badge {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  background: var(--os-ink) !important;
  color: #ffffff !important;
  padding: 3px 6px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#wpforo #wpforo-wrap .oasis-flash-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#wpforo #wpforo-wrap .oasis-flash-btn {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  background: var(--os-yellow) !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
}

#wpforo #wpforo-wrap .oasis-action-new-btn {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  background: var(--os-pink) !important;
  color: #ffffff !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2.5px 2.5px 0 var(--os-ink) !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
  transition: transform 0.05s ease, background 0.1s ease !important;
}

#wpforo #wpforo-wrap .oasis-action-new-btn:hover {
  background: var(--os-yellow) !important;
  color: var(--os-ink) !important;
}

/* ==========================================================================
   TIROIR HAMBURGER (Menu latéral droit)
   ========================================================================== */

.oasis-menu-drawer-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  z-index: 2147483647 !important;
  display: flex !important;
  justify-content: flex-end !important;
  animation: oasisFadeIn 0.2s ease forwards !important;
  box-sizing: border-box !important;
}

body.admin-bar .oasis-menu-drawer-overlay {
  top: 46px !important;
  height: calc(100vh - 46px) !important;
  height: calc(100dvh - 46px) !important;
}

@media (min-width: 783px) {
  body.admin-bar .oasis-menu-drawer-overlay {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
    height: calc(100dvh - 32px) !important;
  }
}

body.oasis-drawer-is-open {
  overflow: hidden !important;
}

body.oasis-drawer-is-open .oasis-site-header,
body.oasis-drawer-is-open .kaala-body-padding-content > header.oasis-site-header {
  z-index: 1 !important;
}

.oasis-menu-drawer-overlay[hidden] {
  display: none !important;
}

.oasis-menu-drawer {
  background-color: #ffffff !important;
  background-image: var(--kaala-noise) !important;
  background-repeat: repeat !important;
  border-left: 3px solid var(--os-ink) !important;
  width: 360px !important;
  max-width: 90vw !important;
  height: 100% !important;
  max-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: -6px 0 30px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  animation: oasisSlideLeft 0.2s ease forwards !important;
}

.oasis-menu-drawer a {
  text-decoration: none !important;
  color: inherit !important;
}

.oasis-drawer-close-row {
  background: var(--os-yellow) !important;
  border-bottom: 2.5px solid var(--os-ink) !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.oasis-drawer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.oasis-drawer-brand-icon {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--os-ink) !important;
}

.oasis-drawer-main-title {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  color: var(--os-ink) !important;
}

.oasis-drawer-close-btn {
  width: 30px !important;
  height: 30px !important;
  background: #ffffff !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--os-ink) !important;
}

.oasis-drawer-close-btn:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0 var(--os-ink) !important;
}

.oasis-drawer-scroll-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  padding: 16px 14px 110px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

.oasis-drawer-scroll-body > * {
  flex-shrink: 0 !important;
}

.oasis-user-profile-header-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: var(--os-yellow) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  padding: 10px 12px !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin-bottom: 4px !important;
  flex-shrink: 0 !important;
}

.oasis-user-profile-header-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid var(--os-ink) !important;
  background: #ffffff !important;
  object-fit: cover !important;
  display: block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.oasis-user-profile-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  text-align: left !important;
}

.oasis-user-profile-header-info h4 {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  color: var(--os-ink) !important;
  line-height: 1.2 !important;
}

.oasis-user-profile-header-info .oasis-user-badge {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9.5px !important;
  color: var(--os-ink) !important;
  font-weight: 600 !important;
}

.oasis-pane-section-label {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--os-muted) !important;
  letter-spacing: 0.04em !important;
  margin: 12px 0 4px 2px !important;
  flex-shrink: 0 !important;
}

/* Boutons / cartes de menu */
.oasis-menu-card-btn {
  background: #ffffff !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
  border-radius: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  font-family: inherit !important;
  flex-shrink: 0 !important;
}

.oasis-menu-card-btn.has-arrow {
  background: #ffffff !important;
}

.oasis-menu-card-btn.is-highlight {
  background: var(--os-yellow) !important;
}

.oasis-menu-card-btn:hover {
  background: #fff9c4 !important;
  text-decoration: none !important;
}

.oasis-menu-card-btn:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0 var(--os-ink) !important;
}

.oasis-menu-card-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.oasis-menu-card-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  background: #ffe600;
  border: 2px solid var(--os-ink) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  color: #101010 !important;
}

.oasis-menu-card-icon i {
  color: #101010 !important;
}

.oasis-menu-card-name {
  display: block !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
  color: var(--os-ink) !important;
}

.oasis-menu-card-sub {
  display: block !important;
  font-size: 10px !important;
  color: var(--os-muted) !important;
  font-family: "IBM Plex Mono", monospace !important;
}

/* Accordéon Néo-brutaliste */
.oasis-menu-accordion {
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2.5px 2.5px 0 var(--os-ink) !important;
  background: #ffffff !important;
  margin-bottom: 2px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}

.oasis-menu-accordion > .oasis-menu-card-btn {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

.oasis-menu-accordion.is-open > .oasis-menu-card-btn {
  background: transparent !important;
  border-bottom: 2px solid var(--os-ink) !important;
}

.oasis-accordion-arrow {
  transition: transform 0.2s ease !important;
  font-size: 12px !important;
  color: var(--os-ink) !important;
  flex-shrink: 0 !important;
}

.oasis-menu-accordion.is-open .oasis-accordion-arrow {
  transform: rotate(90deg) !important;
}

.oasis-menu-accordion-body {
  background: #fafafa !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.oasis-menu-accordion-body > * {
  flex-shrink: 0 !important;
}

.oasis-menu-accordion-body[hidden] {
  display: none !important;
}

/* Quartiers dans l'accordéon avec accès directs */
.oasis-drawer-quarter-block {
  background: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  padding: 10px 12px !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.oasis-drawer-quarter-name {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--os-ink) !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.oasis-drawer-quarter-name i {
  color: var(--os-pink) !important;
  font-size: 12px !important;
}

.oasis-drawer-quarter-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

.oasis-drawer-quarter-chip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 6px !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  color: #101010 !important;
  border: 1.5px solid var(--os-ink) !important;
  background: #ffffff !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  text-align: center !important;
  gap: 4px !important;
}

.oasis-drawer-quarter-chip.is-life:hover {
  background: var(--os-yellow) !important;
  text-decoration: none !important;
}

.oasis-drawer-quarter-chip.is-committee:hover {
  background: #ffd600 !important;
  text-decoration: none !important;
}

.oasis-drawer-sub-link {
  background: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  padding: 9px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
}

.oasis-drawer-sub-link.is-highlight {
  background: var(--os-yellow) !important;
}

.oasis-drawer-sub-link:hover {
  background: #fff9c4 !important;
  text-decoration: none !important;
}

.oasis-drawer-sub-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.oasis-drawer-sub-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  border: 1.5px solid var(--os-ink) !important;
  background: #ffe600;
  color: #101010 !important;
  flex-shrink: 0 !important;
}

.oasis-drawer-sub-icon i {
  color: #101010 !important;
}

.oasis-drawer-sub-text strong {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  display: block !important;
  color: var(--os-ink) !important;
  line-height: 1.2 !important;
}

.oasis-drawer-sub-text span {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9.5px !important;
  color: var(--os-muted) !important;
  display: block !important;
}

.oasis-drawer-sub-link i.fa-arrow-right {
  font-size: 11px !important;
  color: var(--os-ink) !important;
}

/* Auth Footer */
.oasis-drawer-auth-footer {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 2px dashed rgba(16, 16, 16, 0.2) !important;
}

.oasis-drawer-logout-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #fee !important;
  border: 2px solid #e00 !important;
  color: #e00 !important;
  padding: 10px !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  text-decoration: none !important;
  box-shadow: 2px 2px 0 #e00 !important;
}

.oasis-drawer-auth-buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.oasis-drawer-login-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 9px !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  text-decoration: none !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  color: var(--os-ink) !important;
}

.oasis-drawer-login-card.is-login {
  background: var(--os-yellow) !important;
}

.oasis-drawer-login-card.is-signup {
  background: #ffffff !important;
}

@keyframes oasisSlideLeft {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ==========================================================================
   ESPACE VILLE — Organisation moderne en 2 Blocs (Chantiers & Communs)
   ========================================================================== */

#wpforo #wpforo-wrap .oasis-quarter-page.oasis-hub-page .oasis-quarter-hero.oasis-hub-hero,
#wpforo #wpforo-wrap .oasis-quarter-hero.oasis-hub-hero {
  min-height: auto !important;
  height: auto !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 2px solid var(--os-ink) !important;
  border-bottom: 2px solid var(--os-ink) !important;
  box-shadow: 4px 4px 0 var(--os-ink) !important;
  margin: 12px 0 16px !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-hero.oasis-hub-hero .oasis-quarter-hero__copy {
  flex: 1 1 auto !important;
}

#wpforo #wpforo-wrap .oasis-quarter-hero.oasis-hub-hero .oasis-quarter-hero__copy > p {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--os-pink) !important;
  text-transform: uppercase !important;
  margin: 0 0 2px !important;
}

#wpforo #wpforo-wrap .oasis-quarter-hero.oasis-hub-hero h1,
#wpforo #wpforo-wrap .oasis-quarter-hero.oasis-hub-hero h1 span {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  display: inline-block !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-quarter-hero.oasis-hub-hero .oasis-quarter-hero__copy > span {
  font-size: 12.5px !important;
  color: #333333 !important;
  display: block !important;
  margin-top: 3px !important;
  font-family: var(--font-body, "IBM Plex Sans", sans-serif) !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-section {
  margin: 16px 0 !important;
  background: #f4f3f4 !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 4px 4px 0 var(--os-ink) !important;
  padding: 14px 16px !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-head h3 {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-tag {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  background: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  padding: 2px 6px !important;
  text-transform: uppercase !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #wpforo #wpforo-wrap .oasis-city-hub-grid {
    grid-template-columns: 1fr !important;
  }
}

#wpforo #wpforo-wrap .oasis-city-hub-grid--3cols {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

@media (max-width: 900px) {
  #wpforo #wpforo-wrap .oasis-city-hub-grid--3cols {
    grid-template-columns: 1fr !important;
  }
}

#wpforo #wpforo-wrap .oasis-city-hub-card {
  background: #ffffff !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 3.5px 3.5px 0 var(--os-ink) !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 10px !important;
  transition: transform 0.05s ease, box-shadow 0.05s ease !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 5.5px 5.5px 0 var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card.is-active {
  border: 2.5px solid var(--os-ink) !important;
  box-shadow: 5px 5px 0 var(--os-ink) !important;
  background: #fffdf0 !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card__top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card__icon {
  width: 38px !important;
  height: 38px !important;
  background: var(--os-bg) !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card__main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card__main h4 {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card__main p {
  font-size: 12px !important;
  color: var(--os-muted) !important;
  margin: 3px 0 0 !important;
  line-height: 1.35 !important;
}

/* Cloche néo-brutaliste */
#wpforo #wpforo-wrap .oasis-city-hub-card .oasis-forum-follow-icon,
#wpforo #wpforo-wrap .oasis-quarter-hero.oasis-hub-hero .oasis-forum-follow-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 0 !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  background: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  color: var(--os-ink) !important;
  opacity: 1 !important;
  font-size: 13px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card .oasis-forum-follow-icon:hover,
#wpforo #wpforo-wrap .oasis-quarter-hero.oasis-hub-hero .oasis-forum-follow-icon:hover {
  background: var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card .oasis-forum-follow-icon.is-following,
#wpforo #wpforo-wrap .oasis-quarter-hero.oasis-hub-hero .oasis-forum-follow-icon.is-following {
  background: var(--os-yellow) !important;
}

/* Ligne Dernier Sujet */
#wpforo #wpforo-wrap .oasis-city-hub-card__latest {
  background: #ffffff !important;
  border: 1px solid var(--os-ink) !important;
  box-shadow: 1px 1px 0 var(--os-ink) !important;
  padding: 6px 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card__latest:hover {
  background: #fffdf0 !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card__latest--empty {
  background: var(--os-bg) !important;
  color: var(--os-muted) !important;
  font-weight: 500 !important;
  border-style: dashed !important;
  box-shadow: none !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(16, 16, 16, 0.1) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 10px !important;
  color: var(--os-muted) !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card__btn {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: #ffffff !important;
  border: 1px solid var(--os-ink) !important;
  box-shadow: 1px 1px 0 var(--os-ink) !important;
  padding: 3px 8px !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-city-hub-card__btn:hover {
  background: var(--os-yellow) !important;
}

#wpforo #wpforo-wrap .oasis-city-action-badge {
  font-family: var(--font-mono, monospace) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--os-muted) !important;
  text-transform: none !important;
}

#wpforo #wpforo-wrap #oasis-flux-ville {
  scroll-margin-top: 110px !important;
}

#wpforo #wpforo-wrap .oasis-city-all-link {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: #ffffff !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  padding: 3px 8px !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
  transition: all 0.1s ease !important;
  white-space: nowrap !important;
}

#wpforo #wpforo-wrap .oasis-city-all-link:hover {
  background: var(--os-yellow) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 2.5px 2.5px 0 var(--os-ink) !important;
}

#wpforo #wpforo-wrap .oasis-city-reset-filter-btn {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  background: var(--os-yellow) !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 2px 2px 0 var(--os-ink) !important;
  padding: 3px 10px !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
  transition: all 0.1s ease !important;
}

#wpforo #wpforo-wrap .oasis-city-reset-filter-btn:hover {
  background: #ffffff !important;
}

/* ==========================================================================
   PAGE VILLE : LAYOUT 2 COLONNES (FLUX + BARRE LATÉRALE UNIQUE)
   ========================================================================== */

@media (min-width: 761px) {
  #wpforo #wpforo-wrap .oasis-hub-page .oasis-quarter-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    gap: 20px !important;
    align-items: start !important;
  }

  #wpforo #wpforo-wrap .oasis-hub-page .oasis-quarter-sidebar > .oasis-social-utilities {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.oasis-right-sidebar-collapsed #wpforo #wpforo-wrap .oasis-hub-page .oasis-quarter-layout {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }

  #wpforo #wpforo-wrap .oasis-hub-page .oasis-quarter-leftnav {
    display: none !important;
  }

  #wpforo #wpforo-wrap .oasis-hub-page .oasis-quarter-main {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #wpforo #wpforo-wrap .oasis-hub-page .oasis-quarter-sidebar {
    grid-column: 2 / 3 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #wpforo #wpforo-wrap .oasis-hub-page .oasis-quarter-sidebar > .oasis-sidebar-toggle {
    display: inline-flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
  }
}

/* ==========================================================================
   WIDGETS NÉO-BRUTALISTES (.sidebar-box & .oasis-modo-live)
   ========================================================================== */

#wpforo #wpforo-wrap .sidebar-box,
#wpforo #wpforo-wrap .oasis-modo-live,
#wpforo #wpforo-wrap .oasis-quarter-widget--polls {
  background: #ffffff !important;
  border: 2px solid var(--os-ink) !important;
  box-shadow: 2.5px 2.5px 0 var(--os-ink) !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
  box-sizing: border-box !important;
}

#wpforo #wpforo-wrap .sidebar-box-header,
#wpforo #wpforo-wrap .oasis-modo-live-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 2px solid var(--os-ink) !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}

#wpforo #wpforo-wrap .sidebar-box-header h3,
#wpforo #wpforo-wrap .oasis-modo-live-heading strong,
#wpforo #wpforo-wrap .oasis-quarter-widget__title {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--os-ink) !important;
  line-height: 1.2 !important;
}

/* Badges carrés néo-brutalistes pour les icônes d'en-tête de widget */
.sidebar-box-header-icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  color: #101010 !important;
  flex-shrink: 0 !important;
  background: #ffe600;
}

.sidebar-box-header-icon i {
  color: #101010 !important;
}

/* Modérateurs du jour */
#wpforo #wpforo-wrap .mod-section-title,
#wpforo #wpforo-wrap .oasis-modo-live-label {
  display: block !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--os-muted) !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.05em !important;
}

#wpforo #wpforo-wrap .mod-section-title:first-of-type {
  margin-top: 0 !important;
}

#wpforo #wpforo-wrap .mod-user-row,
#wpforo #wpforo-wrap .oasis-modo-live-person {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 0 !important;
  color: var(--os-ink) !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .mod-user-row:hover,
#wpforo #wpforo-wrap .oasis-modo-live-person:hover {
  color: var(--os-pink) !important;
  text-decoration: none !important;
}

#wpforo #wpforo-wrap .mod-avatar-sm {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--os-ink) !important;
  display: block !important;
}

#wpforo #wpforo-wrap .oasis-modo-live-group {
  margin-bottom: 8px !important;
}

#wpforo #wpforo-wrap .oasis-modo-live-group:last-child {
  margin-bottom: 0 !important;
}

#wpforo #wpforo-wrap .oasis-modo-live-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  border: 1px solid var(--os-ink) !important;
  flex-shrink: 0 !important;
}

#wpforo #wpforo-wrap .oasis-modo-live-dot.is-online {
  background: #2fa84f !important;
}

#wpforo #wpforo-wrap .oasis-modo-live-dot.is-offline {
  background: var(--os-line) !important;
}

#wpforo #wpforo-wrap .oasis-modo-live-nobody {
  font-size: 11px !important;
  color: var(--os-muted) !important;
  font-style: italic !important;
  display: block !important;
  padding: 2px 0 !important;
  font-family: "IBM Plex Mono", monospace !important;
}

/* Votes & RDV */
#wpforo #wpforo-wrap .vote-poll-item {
  background: #f8f8f8 !important;
  border: 1.5px solid var(--os-ink) !important;
  padding: 8px 10px !important;
  margin-bottom: 8px !important;
}

#wpforo #wpforo-wrap .vote-poll-title {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .vote-poll-buttons {
  display: flex !important;
  gap: 6px !important;
}

#wpforo #wpforo-wrap .vote-choice-btn {
  flex: 1 !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--os-ink) !important;
  box-shadow: 1px 1px 0 var(--os-ink) !important;
  cursor: pointer !important;
  text-align: center !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .agenda-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  border-bottom: 1px dashed rgba(16, 16, 16, 0.15) !important;
}

#wpforo #wpforo-wrap .agenda-row:last-child {
  border-bottom: 0 !important;
}

#wpforo #wpforo-wrap .agenda-date-badge {
  background: var(--os-yellow) !important;
  border: 1.5px solid var(--os-ink) !important;
  box-shadow: 1.5px 1.5px 0 var(--os-ink) !important;
  padding: 2px 6px !important;
  text-align: center !important;
  font-family: var(--font-mono, monospace) !important;
  line-height: 1.1 !important;
  min-width: 32px !important;
}

#wpforo #wpforo-wrap .agenda-day {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .agenda-month {
  font-size: 8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .agenda-details h4 {
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--os-ink) !important;
}

#wpforo #wpforo-wrap .agenda-details span {
  font-family: var(--font-mono, monospace) !important;
  font-size: 10px !important;
  color: var(--os-muted) !important;
}

/* Items de liste : Derniers sujets, Derniers messages, Mes suivis */
#wpforo #wpforo-wrap .oasis-utility-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 8px 0 !important;
  border-bottom: 1px dashed rgba(16, 16, 16, 0.15) !important;
  text-decoration: none !important;
  color: var(--os-ink) !important;
  transition: all 0.1s ease !important;
}

#wpforo #wpforo-wrap .oasis-utility-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

#wpforo #wpforo-wrap .oasis-utility-item:first-child {
  padding-top: 0 !important;
}

#wpforo #wpforo-wrap .oasis-utility-item i {
  margin-top: 3px !important;
  font-size: 11px !important;
  color: var(--os-muted) !important;
  flex-shrink: 0 !important;
}

#wpforo #wpforo-wrap .oasis-utility-item span {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

#wpforo #wpforo-wrap .oasis-utility-item strong {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--os-ink) !important;
  word-break: break-word !important;
}

#wpforo #wpforo-wrap .oasis-utility-item small {
  font-family: var(--font-mono, monospace) !important;
  font-size: 10px !important;
  color: var(--os-muted) !important;
}

#wpforo #wpforo-wrap .oasis-utility-item:hover strong {
  color: var(--os-pink) !important;
}

/* Entête fermeture mobile */
#wpforo #wpforo-wrap .oasis-mobile-sidebar-close-row {
  display: none !important;
}

.oasis-mobile-fab-btn {
  display: none !important;
}

/* ==========================================================================
   OFF-CANVAS GLOBAL MOBILE (.oasis-global-offcanvas)
   ========================================================================== */

.oasis-global-offcanvas {
  display: none !important;
}

/* Seuil 760px (pas 900) : doit rester aligné avec .oasis-social-mobile-nav
   (section "17. NAVIGATION MOBILE BASSE" plus haut, @media max-width:760px)
   qui est le SEUL point d'entrée du bouton "⚡ Outils" ouvrant ce tiroir.
   Un décalage ici (ex: 900px) masque les barres latérales in-page en
   tablette portrait (761-900px) SANS que le bouton pour rouvrir le tiroir
   existe encore à cette largeur — trou trouvé le 19/08 (Mia : "l'espace y
   est mais pas la barre", puis "elle n'est plus nulle part" en portrait).
   En dessous de 760px, tout va bien (barre du bas + tiroir présents tous
   les deux). Entre 761-900px, ne pas toucher : c'est la mise en page
   tablette portrait VERROUILLÉE le 08/07 (section "18. RESPONSIVE" plus
   haut) qui reprend la main automatiquement dès qu'on ne la masque plus
   ici. */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  #wpforo #wpforo-wrap .oasis-hub-page .oasis-quarter-layout,
  #wpforo #wpforo-wrap .oasis-quarter-layout,
  #wpforo #wpforo-wrap .oasis-social-layout {
    grid-template-columns: 1fr !important;
  }

  /* Sur mobile, masquer les barres latérales in-page */
  #wpforo #wpforo-wrap .oasis-quarter-sidebar,
  #wpforo #wpforo-wrap .oasis-social-rightbar,
  #wpforo #wpforo-wrap .oasis-quarter-leftnav,
  #wpforo #wpforo-wrap .oasis-social-leftbar {
    display: none !important;
  }

  .oasis-global-offcanvas {
    display: block !important;
    position: relative !important;
    z-index: 2147483647 !important;
  }

  .oasis-global-offcanvas__backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 2147483646 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
  }

  /* Masquage des boutons + Proposer / + Nouveau sujet in-page sur mobile (point d'entrée unique sur le bouton [+] du bas) */
  #wpforo #wpforo-wrap .oasis-action-new-btn,
  #wpforo #wpforo-wrap .oasis-quarter-new-topic-btn,
  #wpforo #wpforo-wrap .oasis-feed-filters__actions .oasis-action-new-btn,
  #wpforo #wpforo-wrap .oasis-quarter-top-actions .oasis-quarter-new-topic-btn {
    display: none !important;
  }

  .oasis-global-offcanvas__panel {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 88% !important;
    max-width: 360px !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    background-image: var(--kaala-noise) !important;
    background-repeat: repeat !important;
    border-left: 2.5px solid var(--os-ink) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: -6px 0 25px rgba(0, 0, 0, 0.35) !important;
    z-index: 2147483647 !important;
    transform: translateX(100%) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
  }

  .oasis-global-offcanvas__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffe600 !important;
    border-bottom: 2.5px solid var(--os-ink) !important;
    padding: 12px 14px !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }

  .oasis-global-offcanvas__header h3 {
    font-family: "Oswald", Impact, sans-serif !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    margin: 0 !important;
    letter-spacing: 0.03em !important;
    color: #101010 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .oasis-global-offcanvas__close {
    background: #ffffff !important;
    border: 2px solid #101010 !important;
    box-shadow: 2px 2px 0 #101010 !important;
    font-family: "Oswald", Impact, sans-serif !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #101010 !important;
    padding: 0 !important;
  }

  .oasis-global-offcanvas__close:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0 #101010 !important;
  }

  .oasis-global-offcanvas__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding: 14px 12px 100px !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  .oasis-global-offcanvas__body #wpforo-wrap {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  body.oasis-mobile-sidebar-open {
    overflow: hidden !important;
  }

  body.oasis-mobile-sidebar-open .oasis-global-offcanvas__backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.oasis-mobile-sidebar-open .oasis-global-offcanvas__panel {
    transform: translateX(0) !important;
  }

  body.oasis-mobile-sidebar-open .oasis-social-mobile-nav button.is-tools {
    color: var(--os-pink) !important;
    font-weight: 800 !important;
  }

  body.oasis-mobile-sidebar-open .oasis-site-header,
  body.oasis-mobile-sidebar-open header.oasis-forum-header,
  body.oasis-mobile-sidebar-open .site-header,
  body.oasis-mobile-sidebar-open header {
    z-index: 1 !important;
  }
}

/* ==========================================================================
   TRANSITIONS DE PAGE & MICRO-ANIMATIONS NÉO-BRUTALISTES
   ========================================================================== */

/* API View Transition retiree le 19/08 : provoquait des pages blanches/grises
   figees sur iPad Safari (bug de rendu WebKit avec cette API encore jeune,
   confirme en direct par Mia sur la page Delaunay/Belleville/Semard malgre
   plusieurs correctifs cote JS). Remplacee par un simple fondu CSS classique
   sur la nouvelle page au moment ou elle remplace l'ancienne dans le DOM --
   moins spectaculaire mais fiable sur tous les navigateurs. Ne pas remettre
   document.startViewTransition()/@view-transition sans re-tester a fond sur
   un vrai iPad. */
@keyframes oasisMicroFadeUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.oasis-page-stage {
  animation: oasisMicroFadeUp 0.12s ease-out both;
  overflow: visible !important;
}

/* Barre de chargement éclair néo-brutaliste */
#oasis-page-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3.5px;
  background: var(--os-yellow);
  border-bottom: 1.5px solid var(--os-ink);
  z-index: 1000000;
  transition: width 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
  opacity: 0;
}

.admin-bar #oasis-page-progress-bar {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar #oasis-page-progress-bar {
    top: 46px;
  }
}

#oasis-page-progress-bar.is-active {
  opacity: 1;
  width: 75%;
}

#oasis-page-progress-bar.is-done {
  width: 100%;
  opacity: 0;
}

/* Attenuation adoucie (19/08) : 0.65 donnait une impression de page "cassee"
   pendant l'attente reseau, surtout si elle dure sur une connexion tablette
   plus lente -- laisse la page presque intacte, seule la barre de progression
   signale le chargement. Impression de "rester sur la meme page" preservee. */
[data-oasis-stage].is-loading {
  opacity: 0.94;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

/* ==========================================================================
   Passerelle Carte-Forum : Localisation dans le formulaire et les fiches
   ========================================================================== */

/* Pin rose dans la barre d'actions basse quand l'idée est localisée */
#wpforo #wpforo-wrap .oasis-quarter-action--map.is-located,
.oasis-quarter-action--map.is-located {
  background: var(--os-pink, #ff1493) !important;
  border-color: #101010 !important;
  box-shadow: 2px 2px 0 #101010 !important;
}
#wpforo #wpforo-wrap .oasis-quarter-action--map.is-located .fas,
.oasis-quarter-action--map.is-located .fas {
  color: #ffffff !important;
}

/* Rendu de la localisation dans la fiche de proposition citoyenne */
.oasis-idea-card__item--location {
  grid-column: 1 / -1;
  background: #ffffff;
  border: 1.5px solid #101010;
  padding: 8px 12px;
  margin-top: 4px;
}
.oasis-idea-card__location-val {
  margin: 0;
}
.oasis-idea-map-link {
  color: #101010;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}
.oasis-idea-map-link:hover {
  color: var(--os-pink, #ff1493);
  text-decoration: underline;
}
.oasis-idea-map-link .fa-map-marker-alt {
  color: var(--os-pink, #ff1493);
}
.oasis-idea-map-link-arrow {
  font-size: 1rem;
  line-height: 1;
}

/* Champ de recherche de localisation dans le formulaire de proposition */
.oasis-idea-builder__location {
  margin-top: 6px;
}
.oasis-idea-location-box {
  position: relative;
  width: 100%;
}
.oasis-idea-location-search {
  width: 100%;
  border: 1.5px solid #101010;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  background: #ffffff;
  box-sizing: border-box;
  outline: none;
  border-radius: 0;
}
.oasis-idea-location-search:focus {
  border-color: var(--os-pink, #ff1493);
  box-shadow: 2px 2px 0 #101010;
}
.oasis-idea-location-mini-map {
  width: 100%;
  height: 320px;
  border: 2px solid #101010;
  box-shadow: 2px 2px 0 #101010;
  margin-top: 8px;
  background: #f4f3f0;
  position: relative;
  z-index: 5;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .oasis-idea-location-mini-map {
    height: 260px;
  }
}
.oasis-idea-location-results {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1.5px solid #101010;
  border-top: none;
  z-index: 200;
  max-height: 180px;
  overflow-y: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.oasis-idea-location-item {
  padding: 8px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid #eeeced;
  display: flex;
  align-items: center;
  gap: 6px;
}
.oasis-idea-location-item:hover {
  background: #ffea00;
}
.oasis-idea-location-empty {
  padding: 10px 12px;
  font-size: 0.8rem;
  color: #625f5b;
  font-style: italic;
}
.oasis-idea-location-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0fdf4;
  border: 1.5px solid #101010;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 8px;
}
.oasis-idea-location-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #101010;
}
.oasis-idea-location-clear {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  padding: 0 6px;
  color: #625f5b;
  line-height: 1;
}
.oasis-idea-location-clear:hover {
  color: #e11d48;
}

/* Marqueurs de la mini-carte (.oasis-idea-location-mini-map, ci-dessus) —
   même classes que /carte-participative/ (assets JS partagé,
   oasisMapMarkerIcon/.oasis-map-marker__dot dans oasis-wpforo-social.js),
   mais SANS le CSS qui les stylise (inc/pages/carte-participative/style.css
   n'est enqueue que sur cette page-là, jamais ici, voir oasis_map_enqueue_assets()
   gated par is_page('carte-participative')). Dupliqué ici plutôt que de
   changer ce gate, pour ne pas risquer d'effets de bord sur la page carte.
   Repéré par Mia le 21/08 ("je ne pense pas que ce soit la même carte") —
   la couleur/l'icône de catégorie venaient déjà d'être ajoutées à la grande
   carte le même soir, jamais reflétées ici faute de style. Périmètre
   volontairement limité aux marqueurs eux-mêmes, pas à la mise en forme du
   formulaire (Mia bosse dessus dans une autre session). */
.oasis-map-marker {
  background: transparent !important;
  border: none !important;
  position: relative !important;
}

.oasis-map-marker__dot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 1px 4px rgba(16, 16, 16, 0.4) !important;
}

.oasis-map-marker__dot--approx {
  border-style: dashed !important;
  opacity: 0.8 !important;
}

.oasis-map-marker__category-icon {
  color: #ffffff !important;
  font-size: 11px !important;
}