/*
Theme Name: Kaala Child
Theme URI: http://nous-tous-maires.local/
Description: Thème enfant OASIS pour le thème Kaala.
Author: OASIS
Template: kaala
Version: 1.0.0
Text Domain: kaala-child
*/

/* ==========================================================================
   OASIS - STYLE GLOBAL PROPRE
   Fichier : kaala-child/style.css

   Important :
   - Ne jamais supprimer l'en-tête WordPress ci-dessus.
   - Le CSS spécifique au forum doit rester dans assets/css/wpforo-oasis.css.
   - Ce fichier gère le fond global, le header, les boutons et les blocs généraux.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Caveat:wght@600;700&family=Inter:wght@400;600;700;800;900&family=Oswald:wght@500;600;700&display=swap");

/* ==========================================================================
   1. Variables
   ========================================================================== */

:root {
  --black: #101010;

  --paper: #ffffff;
  --paper-light: #fffaf0;
  --paper-soft: #f8f1e4;
  --paper-dark: #e5d2b7;

  --pink: #ff1493;
  --orange: #ff6b00;
  --blue: #3f8cff;
  --green: #b7e600;
  --yellow: #ffe23a;

  /* Harmonisé le 11/07 avec la largeur de l'accueil/forum/pages NTM (1320px) —
     utilisé notamment par .site-footer, visible sur toutes les pages. */
  --max: 1320px;
  --header-max: 1440px;

  --border: 3px solid var(--black);
  --shadow: 5px 5px 0 var(--black);

  --kaala-noise: url("https://noustousmaires.fr/wp-content/themes/kaala/img/kaala-noise.gif");
}

/* ==========================================================================
   2. Reset doux
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background-color: var(--paper);
  background-image: var(--kaala-noise);
  background-repeat: repeat;
  scrollbar-width: auto;
  scrollbar-color: var(--pink) var(--paper);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;

  color: var(--black);
  background-color: var(--paper);
  background-image: var(--kaala-noise);
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
  background-attachment: fixed;

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

/* Aucun pseudo-grain global animé : on évite les conflits avec le forum */
body::before {
  display: none !important;
}

body > * {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: "Anton", Impact, sans-serif;
  line-height: 0.92;
  text-transform: uppercase;
}

h1 {
  margin-bottom: 1.1rem;
  font-size: clamp(3.4rem, 10vw, 7.4rem);
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.2rem, 7vw, 5rem);
}

h3 {
  margin-bottom: 0.55rem;
  font-family: "Oswald", Impact, sans-serif;
  font-size: clamp(1.45rem, 3vw, 2rem);
  text-transform: uppercase;
}

/* ==========================================================================
   3. Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background-color: var(--paper);
  background-image: var(--kaala-noise);
  background-repeat: repeat;
  border-left: 2px solid var(--black);
}

::-webkit-scrollbar-thumb {
  background: var(--pink);
  border: 3px solid var(--paper);
  box-shadow: inset 0 0 0 2px var(--black);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--yellow);
}

/* ==========================================================================
   4. Header OASIS
   ========================================================================== */

.oasis-site-header,
.kaala-body-padding-content > header.oasis-site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;

  width: 100vw !important;
  max-width: 100vw !important;

  margin: 0 0 28px !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 0 clamp(18px, 2vw, 34px) !important;

  background-color: rgba(255, 255, 255, 0.97) !important;
  background-image: var(--kaala-noise) !important;
  background-repeat: repeat !important;

  border: 0 !important;
  border-bottom: 3px solid var(--black) !important;
  box-shadow: 0 3px 0 rgba(16, 16, 16, 0.10) !important;

  overflow: visible !important;
  backdrop-filter: blur(8px) !important;
}

.admin-bar .oasis-site-header,
.admin-bar .kaala-body-padding-content > header.oasis-site-header {
  top: 32px !important;
}

.oasis-site-header__inner,
.kaala-body-padding-content > header.oasis-site-header .oasis-site-header__inner {
  width: 100% !important;
  max-width: none !important;

  min-height: 84px !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: clamp(18px, 3vw, 48px) !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Logo texte */
.oasis-site-logo {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  flex: 0 0 auto !important;
  min-width: max-content !important;

  margin-left: 0 !important;
  margin-right: auto !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;

  overflow: visible !important;
}

.oasis-site-logo img,
.kaala-body-padding-content > header.oasis-site-header .oasis-site-logo img,
.oasis-site-logo span,
.oasis-site-logo strong,
.oasis-site-logo small {
  display: none !important;
}

.oasis-site-logo::before {
  content: "Nous Tous Maires" !important;

  display: inline-block !important;

  color: var(--black) !important;

  font-family: "Anton", Impact, sans-serif !important;
  font-size: clamp(28px, 3vw, 52px) !important;
  font-weight: 900 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
}

/* Navigation principale */
.oasis-site-nav,
.kaala-body-padding-content > header.oasis-site-header nav.oasis-site-nav {
  position: relative !important;

  flex: 1 1 auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;

  gap: clamp(16px, 2vw, 34px) !important;

  width: auto !important;
  margin-left: auto !important;

  font-family: "Anton", Impact, sans-serif !important;
  font-size: clamp(19px, 1.6vw, 32px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;

  overflow: visible !important;
}

/* Liens principaux + déclencheurs Quartiers / Ville */
.oasis-site-nav > a,
.oasis-site-nav > .oasis-nav-dropdown > .oasis-nav-dropdown__trigger,
.kaala-body-padding-content > header.oasis-site-header nav.oasis-site-nav > a,
.kaala-body-padding-content > header.oasis-site-header nav.oasis-site-nav > .oasis-nav-dropdown > .oasis-nav-dropdown__trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0.25rem 0.05rem !important;

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

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-family: "Anton", Impact, sans-serif !important;
  font-size: inherit !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  cursor: pointer !important;
  transform: none !important;
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.oasis-site-nav > a:hover,
.oasis-site-nav > a:focus,
.oasis-site-nav > .oasis-nav-dropdown > .oasis-nav-dropdown__trigger:hover,
.oasis-site-nav > .oasis-nav-dropdown > .oasis-nav-dropdown__trigger:focus {
  color: var(--black) !important;
  background: transparent !important;
  text-decoration: none !important;
  transform: skew(-7deg) translateY(-1px) !important;
}

/* Trait jaune actif — suit la page courante (Fil commun/Quartiers/Ville/
   Outils/À propos), calculé par oasis_social_wpforo_active_nav_section() et
   posé en classe .is-active côté header.php. Demande de Mia le 13/07 :
   "si je suis dans Ville, trait jaune sous Ville" — pas un trait fixe sur un
   seul item. Piège du 13/07 (1er essai, fixe sur Fil commun) : la règle
   n'était pas scopée au desktop, sa spécificité écrasait le style de liste
   mobile générique (.oasis-site-nav > a en @media 760px) qui donne à CHAQUE
   item sa boîte + son alignement à gauche — restreint à min-width:761px ; en
   dessous, la liste mobile garde son style uniforme (@media max-width:760px
   plus bas), pas de trait actif là (moins pertinent en liste verticale). */
@media (min-width: 761px) {
  .oasis-site-nav > a.oasis-nav-link.is-active,
  .oasis-site-nav > a.oasis-nav-link.is-active:link,
  .oasis-site-nav > a.oasis-nav-link.is-active:visited,
  .oasis-site-nav > .oasis-nav-dropdown > .oasis-nav-dropdown__trigger.is-active,
  .kaala-body-padding-content > header.oasis-site-header nav.oasis-site-nav > a.oasis-nav-link.is-active,
  .kaala-body-padding-content > header.oasis-site-header nav.oasis-site-nav > .oasis-nav-dropdown > .oasis-nav-dropdown__trigger.is-active {
    border-bottom: 4px solid var(--yellow) !important;
  }
}

/* Bouton Participer */
.oasis-site-nav > a.oasis-site-cta,
.oasis-site-nav > a.oasis-site-cta:link,
.oasis-site-nav > a.oasis-site-cta:visited,
.kaala-body-padding-content > header.oasis-site-header nav.oasis-site-nav > a.oasis-site-cta,
.kaala-body-padding-content > header.oasis-site-header nav.oasis-site-nav > a.oasis-site-cta:link,
.kaala-body-padding-content > header.oasis-site-header nav.oasis-site-nav > a.oasis-site-cta:visited {
  padding: 0.64rem 1.1rem !important;

  color: var(--black) !important;
  background: var(--pink) !important;

  border: 3px solid var(--black) !important;
  box-shadow: 5px 5px 0 var(--black) !important;

  text-decoration: none !important;
  transform: none !important;
}

.oasis-site-nav > a.oasis-site-cta:hover,
.oasis-site-nav > a.oasis-site-cta:focus {
  color: var(--black) !important;
  background: var(--pink) !important;

  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--black) !important;
}

/* Compte : un seul accès stable, avec les actions adaptées à l'état de connexion. */
.oasis-account-menu {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.oasis-account-menu__trigger {
  padding: 0.64rem 1.1rem !important;
  color: var(--black) !important;
  background: var(--pink) !important;
  border: 3px solid var(--black) !important;
  box-shadow: 5px 5px 0 var(--black) !important;
  font-family: "Anton", Impact, sans-serif !important;
  font-size: inherit !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.oasis-account-menu__trigger:hover,
.oasis-account-menu__trigger:focus {
  background: var(--pink) !important;
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--black) !important;
}

.oasis-account-menu__panel {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  right: 0 !important;
  z-index: 100000 !important;
  display: none !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  width: max-content !important;
  min-width: 220px !important;
  padding: 10px !important;
  background: var(--os-page-fallback, #eeeced) !important;
  background-image: var(--kaala-noise) !important;
  border: 3px solid var(--black) !important;
  box-shadow: 6px 6px 0 var(--black) !important;
}

.oasis-account-menu.is-open .oasis-account-menu__panel {
  display: grid !important;
}

.oasis-account-menu__panel a {
  display: flex !important;
  align-items: center !important;
  padding: 9px 10px !important;
  color: var(--black) !important;
  background: var(--os-page-fallback, #eeeced) !important;
  border: 2px solid var(--black) !important;
  box-shadow: 2px 2px 0 var(--black) !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.oasis-account-menu__panel a:hover,
.oasis-account-menu__panel a:focus {
  background: var(--yellow) !important;
  box-shadow: 1px 1px 0 var(--black) !important;
  transform: translate(1px, 1px) !important;
}

/* Dropdowns Quartiers / Ville */
.oasis-nav-dropdown {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}

.oasis-nav-dropdown__trigger::after {
  content: "▾" !important;
  display: inline-block !important;

  margin-left: 0.25em !important;

  font-size: 0.62em !important;
  line-height: 1 !important;

  transform: translateY(-0.04em) !important;
}

.oasis-nav-dropdown.is-open > .oasis-nav-dropdown__trigger::after {
  transform: translateY(-0.04em) rotate(180deg) !important;
}

/* Menus fermés par défaut */
.oasis-nav-dropdown > .oasis-nav-dropdown__menu,
.oasis-nav-dropdown:not(.is-open) > .oasis-nav-dropdown__menu {
  position: absolute !important;

  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Menus ouverts au clic */
.oasis-nav-dropdown.is-open > .oasis-nav-dropdown__menu {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  left: 0 !important;
  z-index: 100000 !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;

  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  width: max-content !important;
  min-width: 280px !important;
  max-width: 380px !important;

  margin: 0 !important;
  padding: 10px !important;

  background-color: var(--os-page-fallback, #eeeced) !important;
  background-image: var(--kaala-noise) !important;
  background-repeat: repeat !important;

  border: 3px solid var(--black) !important;
  box-shadow: 6px 6px 0 var(--black) !important;
}

/* Ville : position un peu plus centrée */
.oasis-nav-dropdown.is-open > .oasis-nav-dropdown__menu--ville {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* À propos : dernier item avant le bouton S'inscrire — alignée à droite pour
   ne pas déborder de l'écran (même piège que "Ville", résolu pareil mais de
   l'autre côté puisque celui-ci est tout à droite de la nav). */
.oasis-nav-dropdown.is-open > .oasis-nav-dropdown__menu--a-propos {
  left: auto !important;
  right: 0 !important;
}

/* Liens dans les menus déroulants */
.oasis-site-nav .oasis-nav-dropdown__menu a,
.oasis-site-nav .oasis-nav-dropdown__menu a:link,
.oasis-site-nav .oasis-nav-dropdown__menu a:visited,
.oasis-site-nav .oasis-nav-dropdown__menu a[href*="/forum/"],
.oasis-site-nav .oasis-nav-dropdown__menu a:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 9px 10px !important;

  color: var(--black) !important;
  background: var(--os-page-fallback, #eeeced) !important;

  border: 2px solid var(--black) !important;
  box-shadow: 2px 2px 0 var(--black) !important;

  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  transform: none !important;
}

.oasis-site-nav .oasis-nav-dropdown__menu a:hover,
.oasis-site-nav .oasis-nav-dropdown__menu a:focus {
  color: var(--black) !important;
  background: var(--yellow) !important;

  box-shadow: 1px 1px 0 var(--black) !important;
  transform: translate(1px, 1px) !important;
}

/* Burger mobile */
.oasis-menu-toggle {
  display: none !important;
}

/* Rideau opaque fixe sous l'en-tete -- voir header.php pour le contexte
   complet. Hauteur posee en JS (initStickyHeaderObserver). */
.oasis-sticky-curtain {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 0;
  background-color: var(--paper) !important;
  background-image: var(--kaala-noise) !important;
  background-repeat: repeat !important;
  z-index: 9998 !important;
  pointer-events: none !important;
}

/* Cloche notifs + burger : groupe mobile/tablette portrait uniquement --
   sur desktop/tablette paysage cet espace est deja pris par le menu nav
   classique (demande de Mia le 20/08 : la cloche de la barre "Forum
   Citoyen" n'est pas collante et disparait au scroll ; desktop pas encore
   traite, a reprendre si Mia le demande). */
.oasis-header-mobile-actions {
  display: none;
}


/* ==========================================================================
   5. Boutons généraux
   ========================================================================== */

.button,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.85rem 1.1rem;

  border: 3px solid var(--black);
  border-radius: 0;
  background: var(--paper-light);
  color: var(--black);

  font-family: "Oswald", Impact, sans-serif;
  font-weight: 700;
  text-transform: uppercase;

  box-shadow: var(--shadow);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover,
.wp-block-button__link:hover {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--black);
  background: var(--yellow);
  color: var(--black);
}

.button-primary {
  background: var(--pink);
  color: var(--black);
}

.button-secondary {
  background: var(--yellow);
  color: var(--black);
}

/* ==========================================================================
   6. Hero générique
   ========================================================================== */

.hero {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;

  width: min(var(--max), calc(100% - 2rem));
  min-height: calc(100vh - 5rem);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.eyebrow {
  width: fit-content;
  margin: 0 0 1rem;
  padding: 0.25rem 0.6rem;

  border: 2px solid var(--black);
  background: var(--green);

  font-family: "Oswald", Impact, sans-serif;
  font-weight: 700;
  text-transform: uppercase;

  transform: rotate(-1.5deg);
}

.hero-text {
  max-width: 38rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.hero-visual {
  position: relative;
  isolation: isolate;
  padding: 1rem;
  transform: rotate(1.5deg);
}

.collage {
  max-height: 68vh;
  object-fit: cover;

  border: 4px solid var(--black);
  filter: contrast(1.08) saturate(1.05);
  box-shadow: 12px 12px 0 var(--black);
}

.sticker {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.sticker-smiley {
  top: -1.4rem;
  right: 0.25rem;
  width: clamp(4.5rem, 10vw, 7rem);
  transform: rotate(12deg);
}

.sticker-arrow {
  right: 2rem;
  bottom: -1rem;
  width: clamp(5rem, 12vw, 8rem);
  transform: rotate(-7deg);
}

.torn-label {
  position: absolute;
  left: -0.5rem;
  bottom: 2.5rem;
  z-index: 3;

  padding: 0.45rem 0.8rem;

  border: 3px solid var(--black);
  background: var(--orange);
  color: var(--black);

  font-family: "Caveat", cursive;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 700;

  transform: rotate(-4deg);
}

/* ==========================================================================
   7. Sections génériques
   ========================================================================== */

.intro-band,
.forum-panel,
.agenda,
.cards {
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto clamp(3rem, 7vw, 5rem);
}

.intro-band {
  position: relative;

  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: 2rem;
  align-items: end;

  padding: clamp(1.5rem, 4vw, 2.5rem);

  border-block: 5px solid var(--black);
  background: var(--yellow);
}

.intro-band p:last-child {
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 1.55;
}

.wave {
  position: absolute;
  right: 2rem;
  top: -2rem;
  width: min(16rem, 35vw);
}

.section-heading {
  grid-column: 1 / -1;

  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;

  margin-bottom: 1.2rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.action-card {
  min-height: 19rem;
  padding: 1.25rem;

  border: 4px solid var(--black);
  background: var(--paper-light);
  box-shadow: 8px 8px 0 var(--black);

  transform: rotate(-1deg);
}

.action-card:nth-child(3) {
  transform: rotate(1.4deg);
}

.action-card:nth-child(4) {
  transform: rotate(-0.5deg);
}

.action-card img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
  margin-bottom: 1.5rem;
}

.action-card p,
.forum-copy p,
.event p {
  line-height: 1.55;
}

.yellow {
  background: var(--yellow);
}

.pink {
  background: var(--pink);
  color: var(--black);
}

.green {
  background: var(--green);
}

/* ==========================================================================
   8. Forum panel page accueil
   ========================================================================== */

.forum-panel {
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  gap: clamp(1rem, 5vw, 4rem);
  align-items: center;

  padding: clamp(1.5rem, 5vw, 3rem);

  border: 4px solid var(--black);
  background: var(--black);
  color: var(--paper);

  box-shadow: 12px 12px 0 var(--pink);
}

.forum-panel .eyebrow {
  color: var(--black);
}

.forum-notes {
  position: relative;
  min-height: 23rem;
}

.note {
  position: absolute;

  display: grid;
  place-items: center;

  width: 15rem;
  height: 15rem;
  padding: 2rem;

  color: var(--black);
  font-family: "Caveat", cursive;
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;

  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.note-one {
  top: 0;
  left: 0;
  background-image: url("assets/oasis/postit-jaune.svg");
  transform: rotate(-8deg);
}

.note-two {
  top: 4.5rem;
  right: 0;
  background-image: url("assets/oasis/postit-rose.svg");
  transform: rotate(7deg);
}

.note-three {
  left: 24%;
  bottom: 0;
  background-image: url("assets/oasis/postit-vert.svg");
  transform: rotate(-1deg);
}

/* ==========================================================================
   9. Agenda
   ========================================================================== */

.event-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.event {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;

  padding: 1.25rem;

  border: 3px solid var(--black);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 6px 6px 0 var(--black);
}

.event img {
  width: 4rem;
}

.event-date {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.5rem;

  background: var(--blue);
  color: white;

  font-family: "Oswald", Impact, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto 1rem;
  padding: 1rem 0;

  border-top: 3px solid var(--black);
  font-weight: 700;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--pink);
}

/* ==========================================================================
   11. Bouton retour en haut
   ========================================================================== */

.oasis-back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99998;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  background: var(--green);
  color: var(--black);

  border: 3px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);

  font-family: "Anton", Impact, sans-serif;
  font-size: 30px;
  line-height: 1;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  transition:
    opacity 160ms ease,
    visibility 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.oasis-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.oasis-back-to-top:hover {
  background: var(--yellow);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--black);
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .oasis-site-header,
  .kaala-body-padding-content > header.oasis-site-header {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .oasis-site-header__inner,
  .kaala-body-padding-content > header.oasis-site-header .oasis-site-header__inner {
    min-height: 72px !important;
  }

  .oasis-site-nav,
  .kaala-body-padding-content > header.oasis-site-header nav.oasis-site-nav {
    gap: 18px !important;
    font-size: clamp(1.1rem, 2.4vw, 2rem) !important;
  }

  .oasis-site-logo::before {
    font-size: clamp(22px, 2.8vw, 38px) !important;
  }
}

@media (max-width: 860px) {
  .hero,
  .intro-band,
  .forum-panel,
  .event-list {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .action-card {
    min-height: 14rem;
  }

  .forum-notes {
    min-height: 30rem;
  }

  .note-two {
    top: 8rem;
  }

  .note-three {
    left: 6%;
  }
}

/* Le bloc ci-dessous bascule le header en menu burger. Deux conditions au
   choix (virgule = OU en CSS media queries) : largeur <= 760px (mobile,
   toute orientation), OU largeur <= 1024px en orientation portrait (couvre
   les tablettes en mode portrait — iPad 768px à iPad Pro 11" 834px — qui en
   paysage restent sur le header desktop). Demande de Mia le 03/08. */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .oasis-site-header,
  .kaala-body-padding-content > header.oasis-site-header {
    position: sticky !important;
    top: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin: 0 0 18px !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 10px 14px !important;

    border: 0 !important;
    border-bottom: 3px solid var(--black) !important;
  }

  .admin-bar .oasis-site-header,
  .admin-bar .kaala-body-padding-content > header.oasis-site-header {
    top: 0 !important;
  }

  .oasis-site-header__inner,
  .kaala-body-padding-content > header.oasis-site-header .oasis-site-header__inner {
    min-height: auto !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .oasis-site-logo::before {
    /* clamp (pas 38px fixe) : sur mobile etroit (~375px et moins), logo +
       cloche + burger ne tenaient plus sur une seule ligne et l'entete
       repassait sur 2 lignes -- pas franchement joli (retour de Mia, 20/08,
       "sur tablette c'est pas mal mais sur mobile ca ne va pas"). Le clamp
       retrecit le logo juste assez sur les petits ecrans pour regagner la
       place perdue par l'ajout de la cloche, sans rien changer sur tablette
       (plafonne a 38px comme avant des ~475px de large). */
    font-size: clamp(24px, 8vw, 38px) !important;
  }

  .oasis-header-mobile-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
  }

  .oasis-header-mobile-actions .oasis-notif-wrap {
    position: relative !important;
    display: inline-flex !important;
  }

  .oasis-header-mobile-actions .oasis-header-icon-btn {
    width: 42px !important;
    height: 42px !important;
    display: inline-grid !important;
    place-items: center !important;
    background: #ffffff !important;
    border: 3px solid var(--black) !important;
    box-shadow: 3px 3px 0 var(--black) !important;
    color: var(--black) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  .oasis-header-mobile-actions .oasis-unread-dot {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 3px !important;
    background: var(--pink) !important;
    color: #ffffff !important;
    border: 1px solid var(--black) !important;
    border-radius: 9px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
  }

  .oasis-header-mobile-actions .oasis-unread-dot.is-hidden {
    display: none !important;
  }

  .oasis-menu-toggle {
    display: grid !important;
    gap: 5px !important;

    width: 48px !important;
    height: 42px !important;
    padding: 8px !important;

    background: var(--yellow) !important;
    border: 3px solid var(--black) !important;
    box-shadow: 3px 3px 0 var(--black) !important;

    cursor: pointer !important;
  }

  .oasis-menu-toggle span {
    display: block !important;
    height: 3px !important;
    background: var(--black) !important;
  }

  .oasis-site-nav,
  .kaala-body-padding-content > header.oasis-site-header nav.oasis-site-nav {
    display: none !important;

    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    gap: 8px !important;
    margin-left: 0 !important;
    padding-top: 10px !important;

    font-size: 22px !important;
  }

  .oasis-site-nav.is-open,
  .kaala-body-padding-content > header.oasis-site-header nav.oasis-site-nav.is-open {
    display: flex !important;
  }

  .oasis-site-nav > a,
  .oasis-site-nav > .oasis-nav-dropdown > .oasis-nav-dropdown__trigger {
    width: 100% !important;
    justify-content: flex-start !important;

    padding: 10px 12px !important;

    background: rgba(255, 255, 255, 0.55) !important;
    border: 2px solid var(--black) !important;
    box-shadow: none !important;

    font-size: 22px !important;

    transform: none !important;
  }

  .oasis-site-nav > a:hover,
  .oasis-site-nav > a:focus,
  .oasis-site-nav > .oasis-nav-dropdown > .oasis-nav-dropdown__trigger:hover,
  .oasis-site-nav > .oasis-nav-dropdown > .oasis-nav-dropdown__trigger:focus {
    background: var(--yellow) !important;
    transform: none !important;
  }

  /* Page courante en mobile : même logique que le trait jaune desktop, mais
     en liste verticale un fond jaune se voit mieux qu'un soulignement. Pas
     de règle pour "Fil commun" ici : il est déjà toujours jaune (CTA, voir
     plus bas), donc son état actif ne se distinguerait pas visuellement. */
  .oasis-site-nav > .oasis-nav-dropdown > .oasis-nav-dropdown__trigger.is-active {
    background: var(--yellow) !important;
  }

  .oasis-site-nav > a.oasis-nav-link--forum,
  .oasis-site-nav > a.oasis-site-cta {
    justify-content: center !important;

    border: 3px solid var(--black) !important;
    box-shadow: 3px 3px 0 var(--black) !important;
  }

  .oasis-site-nav > a.oasis-nav-link--forum {
    background: var(--yellow) !important;
  }

  .oasis-site-nav > a.oasis-site-cta,
  .oasis-site-nav > a.oasis-site-cta:hover,
  .oasis-site-nav > a.oasis-site-cta:focus {
    background: var(--pink) !important;
  }

  /* Mon compte est un conteneur autour du bouton : il doit suivre la même
     pleine largeur que Fil commun en tablette portrait. */
  .oasis-site-nav > .oasis-account-menu {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .oasis-site-nav > .oasis-account-menu > .oasis-account-menu__trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    border: 3px solid var(--black) !important;
    box-shadow: 3px 3px 0 var(--black) !important;
    background: var(--pink) !important;
    font-size: 22px !important;
    transform: none !important;
  }

  .oasis-site-nav > .oasis-account-menu > .oasis-account-menu__trigger:hover,
  .oasis-site-nav > .oasis-account-menu > .oasis-account-menu__trigger:focus {
    background: var(--pink) !important;
    transform: none !important;
  }

  .oasis-nav-dropdown {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .oasis-nav-dropdown.is-open > .oasis-nav-dropdown__menu,
  .oasis-nav-dropdown.is-open > .oasis-nav-dropdown__menu--ville {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin-top: 8px !important;

    box-shadow: none !important;
  }

  .oasis-site-nav .oasis-nav-dropdown__menu a,
  .oasis-site-nav .oasis-nav-dropdown__menu a[href*="/forum/"],
  .oasis-site-nav .oasis-nav-dropdown__menu a:last-child {
    font-size: 16px !important;
    padding: 9px 10px !important;
  }

  .oasis-back-to-top {
    right: 12px;
    bottom: 12px;
    width: 48px;
    height: 48px;
    font-size: 28px;
  }
}

@media (max-width: 520px) {
  .hero-visual {
    padding: 0;
  }

  .collage {
    box-shadow: 6px 6px 0 var(--black);
  }

  .event {
    grid-template-columns: 1fr;
  }

  .note {
    width: 13rem;
    height: 13rem;
    font-size: 2rem;
  }
}