/* =========================================================
   Colonies — styles complets (HERO + filtres + cartes)
   ========================================================= */

/* Utilitaire accessibilité */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

:root{
  --colonies-box-max: 1260px;
  --colonies-card-radius: 20px;
  /* Variables de couleur par défaut (seront écrasées par le JS selon la saison) */
  --colonies-primary-color: #2563eb;
  --colonies-secondary-color: #60a5fa;
  --colonies-accent-color: #38bdf8;
}

body.colonies-loading .le-card{
  pointer-events:none;
}

html{scroll-behavior:smooth}

/* Spacer supprimé : offset géré par .page-has-hero .colonies-hero dans custom.css */

/* ===== HERO pleine largeur ===== */
.colonies-hero{
  width:100vw; position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  min-height:clamp(560px, 70vh, 860px); overflow:hidden;
  font-family: var(--codex-body-font);
  background:#0b1220;
  margin-top: calc(var(--header-height) - 25px);
  display:grid;
  place-items:center;
  /* padding-top supprimé : offset géré centralement par .page-has-hero .colonies-hero dans custom.css */
}
.colonies-hero__media{ position:absolute; inset:0; }
.colonies-hero__media picture, .colonies-hero__media img{
  width:100%; height:100%; display:block; object-fit:cover;
  filter: contrast(1.04) saturate(1.02);
  transform: scale(1.02);
  will-change: transform;
  animation: hero-image-zoom 20s ease-in-out infinite alternate;
}
@keyframes hero-image-zoom {
  0% { transform: scale(1.02); }
  100% { transform: scale(1.08); }
}
.colonies-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,23,42,.25) 0%, rgba(15,23,42,.5) 55%, rgba(12,19,34,.7) 100%),
              linear-gradient(120deg, rgba(37,99,235,.2) 0%, rgba(125,211,252,.12) 100%);
  pointer-events: none;
  z-index: 1;
  animation: hero-gradient-shift 8s ease-in-out infinite alternate;
}
@keyframes hero-gradient-shift {
  0% { opacity: 0.9; }
  100% { opacity: 1; }
}
.colonies-hero__content{
  position:relative; z-index:2; /* passe devant l'overlay */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  padding: 6vh 4vw;
  max-width: 1100px;
  margin-inline: auto;
}

/* Badge saison — style accueil moderne avec couleurs dynamiques */
.colonies-hero__badge{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.65em 1.05em; border-radius:var(--radius-pill);
  font-weight:900; font-size:clamp(.95rem, 1.8vw, 1.08rem);
  letter-spacing:.5px;
  color:#fff; /* Changed from #0b1220 to white for better readability */
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 12px 36px rgba(0,0,0,.25);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  backdrop-filter:saturate(150%) blur(10px);
  margin-bottom:1.2rem;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  animation: badge-pulse-colonies 3s ease-in-out infinite;
  opacity: 1;
  transform: scale(1);
}
@keyframes badge-pulse-colonies {
  0%, 100% {
    box-shadow: 0 12px 36px rgba(0,0,0,.25);
  }
  50% {
    box-shadow: 0 16px 42px rgba(0,0,0,.35);
  }
}
.colonies-hero__badge:hover {
  animation: none;
  transform: scale(1.05);
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
}
/* Dot animé style accueil avec couleur dynamique */
.colonies-hero__badge::before{
  content:"";
  width:.5em; height:.5em;
  background: var(--colonies-secondary-color);
  border-radius:var(--radius-pill);
  box-shadow:0 0 0 4px rgba(255,255,255,.25);
}
/* Masqué avec visibility pour garder l'espace et éviter le saut de contenu */
.colonies-hero__badge[hidden]{ 
  visibility: hidden;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

/* (Option) micro-affinage global possible via variable : */
/* .colonies-hero{ --hero-badge-top: calc(50% - 160px); } */

.colonies-hero__title{
  margin:.2em 0 .65em 0; font-weight:900; line-height:1.05; letter-spacing:.5px; color:#fff;
  font-size:clamp(2rem, 4.2vw, 3.2rem);
  text-shadow:
    0 18px 46px rgba(12,19,34,.45),
    0 3px 10px rgba(0,0,0,.40);
  max-width:min(1100px,92vw);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
  cursor: default;
}
.colonies-hero__title:hover{
  transform: scale(1.02);
  text-shadow: 0 24px 58px rgba(12,19,34,.65), 0 0 80px rgba(255,255,255,.35);
}

/* CTAs dans le hero - style accueil moderne avec couleurs dynamiques */
.colonies-hero__ctas{
  display:flex; gap:.8em; flex-wrap:wrap; justify-content:center;
}
.colonies-hero__cta{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.9em 1.4em;
  border-radius:var(--radius-md);
  font-size:1.03rem;
  font-weight:800;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease;
  will-change: transform;
}
.colonies-hero__cta:hover{ transform:translateY(-2px); }
.colonies-hero__cta:focus-visible{
  outline:2px solid var(--colonies-accent-color);
  outline-offset:3px;
}

/* CTA Primary - solid color that changes with season filter */
.colonies-hero__cta--primary{
  background: var(--colonies-primary-color, #2563eb); /* Uses primary color from season config */
  color:#fff;
  box-shadow:0 12px 32px rgba(37,99,235,.25);
}
.colonies-hero__cta--primary:hover{
  box-shadow:0 16px 40px rgba(37,99,235,.35);
  color:#fff;
}

/* CTA Secondary/Ghost - same as btn-ghost from homepage */
.colonies-hero__cta--secondary,
.colonies-hero__cta--ghost{
  background: rgba(255,255,255,.24);
  color:#fff;
  border:2px solid rgba(255,255,255,.6);
  box-shadow:0 12px 32px rgba(12,19,34,.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.colonies-hero__cta--secondary:hover,
.colonies-hero__cta--ghost:hover{
  background: rgba(255,255,255,.32);
  box-shadow:0 16px 40px rgba(12,19,34,.55);
  border-color: rgba(255,255,255,.8);
  color:#fff;
}

/* ===== Layout & header (section filtres) ===== */
.colonies-wrap{
  padding-inline: clamp(14px, 3vw, 32px);
  padding-bottom: clamp(3.75rem, 7vw, 6rem);
}
.colonies-header{
  text-align:center;
  margin-bottom:1.25rem;
  padding-top: clamp(2rem, 4.5vw, 3rem);
}
.colonies-header p{margin:0;color:#334155}

/* ===== Filtres compacts ===== */
.filters-collapsible{
  margin:0 auto .4rem;
  max-width:var(--colonies-box-max);
  text-align:left;
  background:transparent;
}
.filters-summary{
  list-style:none;
  display:none; /* visible seulement en mobile */
  align-items:center; justify-content:space-between;
  gap:.6rem;
  padding:.7em 1rem;
  border:1px solid #e2e8f0; border-radius:var(--radius-md);
  background:#fff;
  font-weight:900;
  box-shadow:0 2px 10px rgba(2,6,23,.06);
  cursor:pointer;
}
.filters-summary::-webkit-details-marker{ display:none }
.filters-summary__label{ font-size:1rem; color:#0f172a }
.filters-summary__hint{ font-size:.85rem; color:#334155 }
.filters-inner{ padding:0 }

/* Desktop/tablette : tout est ouvert */
@media (min-width: 768px){
  .filters-summary{ display:none; }
  .filters-collapsible[open] .filters-inner,
  .filters-collapsible:not([open]) .filters-inner{ padding-top:0; display:block }
  .filters-collapsible{ overflow:visible }
}
/* Mobile : Bottom Sheet moderne pour les filtres */
@media (max-width: 767px){
  .filters-summary{
    display: flex;
    position: relative;
    z-index: 99;
    margin-bottom: .75rem;
    transition: all 0.3s ease;
    /* Style bouton plus incitatif - Utilise la variable définie par colonies.js */
    background: var(--colonies-primary-color, var(--codex-accent));
    color: #fff;
    border: none;
  }
  .filters-summary__label, .filters-summary__hint { color: #fff !important; }
  
  /* Overlay sombre (Backdrop - élément séparé géré par JS) */
  .filters-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .filters-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Bottom Sheet Container */
  .filters-inner{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 1; /* Toujours opaque, c'est la position qui cache */
    pointer-events: auto;
    overscroll-behavior: contain; /* Empêche le scroll de se propager */
    display: flex;
    flex-direction: column;
  }

  /* Handle pour le swipe */
  .filters-handle {
    width: 100%;
    height: 40px; /* Plus haut pour faciliter le touch */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    padding-top: 10px; /* Espace pour le handle */
    border-bottom: 1px solid #f1f5f9; /* Trait de séparation subtil */
  }
  .filters-handle::after {
    content: "";
    display: block;
    width: 40px;
    height: 5px;
    background: #e2e8f0;
    border-radius: 10px;
  }

  .filters-collapsible[open] .filters-inner{
    transform: translateY(0);
  }

  /* Style interne de la bottom sheet */
  .colonies-filters-box{
    border: none;
    box-shadow: none;
    padding: 10px 20px 40px; /* Padding haut ajusté */
    margin: 0;
  }
  
  /* Supprime l'ancien pseudo-élément handle */
  .colonies-filters-box::before { display: none; }

  /* Animation d'entrée */
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
}

/* ===== Filters box - style accueil moderne avec accent de couleur dynamique ===== */
.colonies-filters-box{
  width:100%;
  max-width:var(--colonies-box-max);
  margin:0 auto;
  padding:24px clamp(20px,4vw,32px);
  background:#fff;
  border:1px solid rgba(148,186,255,.28);
  border-radius:var(--radius-2xl);
  box-shadow:0 18px 46px rgba(15,23,42,.11), 0 0 0 1px rgba(255,255,255,.8) inset;
  display:grid;
  gap:20px;
}
.colonies-filters__legend{
  margin:0 auto;
  max-width:var(--colonies-box-max);
  font-size:.95rem;
  font-weight:600;
  color: var(--codex-muted);
  text-align:left;
}
.colonies-filters{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.colonies-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.colonies-field__label{
  font-size:.85rem;
  font-weight:700;
  color:#334155;
}
.colonies-field--search{
  grid-column:1/-1;
}
.colonies-filters input,
.colonies-filters select{
  appearance:none;
  padding:.65em 1.1em;
  border:1px solid rgba(148,186,255,.28);
  border-radius:var(--radius-md);
  font-size:.95rem;
  font-weight:500;
  background:#fff;
  color:#0f172a;
  box-shadow:0 2px 8px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.6);
  transition:all .2s ease;
  width:100%;
}
.colonies-filters select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right .7em center;
  background-repeat: no-repeat;
  background-size: 1.5em;
  padding-right: 2.8em;
}
.colonies-filters input::placeholder{color:#4a5568; font-weight:400}
.colonies-filters input:hover,
.colonies-filters select:hover{
  border-color:rgba(96,165,250,.4);
  box-shadow:0 3px 12px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
.colonies-filters input:focus,
.colonies-filters select:focus{
  outline:2px solid var(--colonies-secondary-color);
  outline-offset:3px;
  border-color:var(--colonies-secondary-color);
  box-shadow:0 4px 16px rgba(96,165,250,.22), inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 3px rgba(96,165,250,.1);
  background:#fafcff;
  transform: translateY(-1px);
}
.colonies-filters__footer{display:flex;flex-direction:column;gap:12px;align-items:flex-start}

/* ===== Toolbar (insérée par JS) ===== */
.colonies-toolbar{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0;
}
.colonies-toolbar .btn,
.colonies-toolbar .chip,
.colonies-toolbar .sel select{
  border:1px solid #e2e8f0;background:#fff;border-radius:var(--radius-pill);
  padding:.55em .9em;font-weight:800;cursor:pointer;
  box-shadow: 0 2px 8px rgba(2,6,23,.06), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.colonies-toolbar .btn,
.colonies-toolbar .chip{display:inline-flex;align-items:center;gap:.45em}
.colonies-toolbar .btn:hover{background:#f8fafc;transform:translateY(-1px)}
.colonies-toolbar .btn-ghost{background:#fff}
.colonies-toolbar .btn-primary{
  color:#0b1220; background:linear-gradient(135deg, rgba(59,130,246,.1), rgba(168,85,247,.12));
  border-color:rgba(59,130,246,.35);
}
.colonies-toolbar .btn-reset{
  background:linear-gradient(135deg, rgba(248,113,113,.12), rgba(239,68,68,.18));
  border-color:rgba(239,68,68,.28);
  color:#b91c1c;
  display:inline-flex;align-items:center;gap:.45em;
  padding:.55em 1.05em;
}
.colonies-toolbar .btn-reset::before{content:"\00D7";font-weight:900;font-size:.9em;line-height:1;display:inline-block}
.colonies-toolbar .btn-reset:hover{background:rgba(239,68,68,.16);color:#991b1b}
.colonies-toolbar .chk{display:inline-flex;align-items:center;gap:.5em;color:#334155;font-weight:700}
.colonies-toolbar .sel{display:inline-flex;align-items:center;gap:.45em;color:#334155;font-weight:700}
.colonies-toolbar .sel select{padding:.5em .9em;}

/* Chips actifs avec couleur d'accent dynamique */
.colonies-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0}
.colonies-chips.is-empty{display:none}
.colonies-chips .chip{
  border:1px solid #e2e8f0;border-radius:var(--radius-pill);background:#f8fafc;
  padding:.45em .8em;font-weight:800;color:#0f172a;
  transition: background .2s ease, transform .15s ease, opacity .2s ease;
  display:inline-flex;align-items:center;gap:.5em;
  animation: chip-appear 0.3s ease;
}
@keyframes chip-appear {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.chip__label{flex:1}
.chip__close{
  appearance:none;
  border:none;
  background:rgba(148,163,184,.2);
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
  color:#334155;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
  padding:0;
  font-weight:900;
}
.chip__close:hover{
  background:rgba(239,68,68,.85);
  color:#fff;
  transform: rotate(90deg) scale(1.1);
}
.colonies-chips .chip:hover{
  background:#eef2f7;
  transform:translateY(-1px) scale(1.02);
}

/* ===== Dynamic notes + counter avec couleur d'accent ===== */
.colonies-note{margin:1.2rem auto 0;max-width:var(--colonies-box-max)}
.colonies-note-list{
  margin:0;
  padding:24px clamp(24px,4vw,36px);
  list-style:none;
  text-align:left;
  background:linear-gradient(145deg,rgba(237,242,255,.9),rgba(219,234,254,.65));
  border:1px solid rgba(148,163,184,.28);
  border-radius:var(--radius-xl);
  box-shadow:0 18px 42px rgba(15,23,42,.10);
  display:flex;
  flex-direction:column;
  gap:.6rem;
  width:100%;
}
.colonies-note-list li{
  margin:0;
  color:#1f2937;
  font-weight:700;
  font-size:1.05rem;
  line-height:1.6;
}
.colonies-count{align-self:flex-end;color:#334155;font-weight:700;font-size:.95rem;margin:0}
#colonies-count.pulse{animation:pulse .6s ease}
@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.06)}
  100%{transform:scale(1)}
}

/* ===== Grid ===== */
.colonies-list{
  display:grid;
  gap:clamp(18px,3vw,28px);
  grid-template-columns:1fr;
  margin-top:1.25rem
}
@media (min-width:768px){
  .colonies-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1280px){
  .colonies-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1440px){
  .colonies-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ===== Card - style accueil moderne ===== */
.le-card{
  background:#fff;
  border:1px solid rgba(148,186,255,.28);
  border-radius:var(--colonies-card-radius);
  overflow:hidden;
  box-shadow:0 12px 32px rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  position:relative;
  transform:translateZ(0);
  transition: translate .25s ease, scale .25s ease, box-shadow .3s ease;
  will-change: translate, scale;
  isolation:isolate;
}
.le-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--colonies-secondary-color) 14%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 80% 14%, color-mix(in oklab, var(--colonies-accent-color) 10%, transparent) 0%, transparent 38%),
    linear-gradient(135deg, color-mix(in oklab, var(--colonies-primary-color) 8%, #fff) 0%, rgba(255,255,255,0) 65%);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:0;
}
@media (pointer:fine){
  .le-card:hover{
    translate: 0 -6px;
    scale: 1.01;
    box-shadow:0 18px 40px rgba(15,23,42,.12), 0 14px 30px rgba(96,165,250,.10);
  }
  .le-card:hover::after{
    opacity:.2;
  }
}
.le-card:focus-within{
  transform:translateY(-6px) scale(1.005);
  box-shadow:0 16px 32px rgba(15,23,42,.1), 0 10px 24px rgba(96,165,250,.08);
}
.le-card:focus-within::after{
  opacity:.18;
}
.le-card__media{
  display:block;
  aspect-ratio: 16/10;
  overflow:hidden;
  background:#f1f5f9;
  position:relative;
  border-radius:var(--colonies-card-radius) var(--colonies-card-radius) 0 0;
}
.le-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .5s ease; /* Un peu plus lent pour fluidité */
  border-radius:inherit;
  will-change: transform;
}

/* Zoom au survol (tous devices supportant le hover) */
@media (hover: hover) {
  .le-card:hover .le-card__media img{
    transform: scale(1.08);
  }
}

/* ===== Badges (nouvelle version - Pill & Floating) ===== */
.le-card__badges{
  position:absolute;
  top:12px;
  left:12px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  z-index:3;
  max-width:calc(100% - 24px);
  pointer-events:auto;
}
.le-card__badges--right{
  top:auto !important;
  left:auto !important; 
  right:12px !important;
  bottom:12px !important;
  flex-direction:row;
  max-width:auto;
  justify-content:flex-start;
}

.le-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:50%;
  font-size:20px;
  line-height:1;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
  transition:transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease;
  border:1px solid rgba(255,255,255,0.4);
  flex-shrink:0;
  flex-grow:0;
}
.le-badge:hover{
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

/* --- Thèmes (emojis avec fond blanc cassé) --- */
.le-badge--theme{
  background: rgba(255, 255, 255, 0.9);
}

/* --- Nouveauté --- */
.le-badge--new{
  background:rgba(96, 165, 250, 0.9);
  color:transparent;
  border:1px solid rgba(255,255,255,0.3);
  animation:badge-bounce 2s infinite;
  width:42px;
  height:42px;
  min-width:42px;
}
.le-badge--new::before{
  content:"✨";
  color:#fff;
  font-size:24px;
}
@keyframes badge-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* --- Complet (Pill allongé) --- */
.le-badge--soldout{
  background:rgba(239, 68, 68, 0.95);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:999px;
  width:auto;
  min-width:unset;
  max-width:none;
  padding:0 16px;
  gap:6px;
  color:#fff;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.05em;
  height:36px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* --- Thèmes Spécifiques --- */
.le-badge--theme-decouverte{
  border-color: rgba(16, 185, 129, 0.4);
}
.le-badge--theme-decouverte::before{content:"🔍"}

.le-badge--theme-initiation{
  border-color: rgba(245, 158, 11, 0.4);
}
.le-badge--theme-initiation::before{content:"🌱"}

.le-badge--theme-passion{
  border-color: rgba(139, 92, 246, 0.4);
}
.le-badge--theme-passion::before{content:"🔥"}
.le-badge--soldout::before{content:"🚫"}
.le-badge--soldout::after{content:"Complet"}

/* État visuel si "complet" */
.le-card.is-soldout .le-card__media img{ filter: grayscale(.25) brightness(.92); }
.le-card.is-soldout .le-card__cta{ opacity:.65; pointer-events:none; }

/* ===== Body - style accueil moderne ===== */
.le-card__body{
  padding:18px;
  flex-grow:1;
  display:flex;
  flex-direction:column;
  border-radius:0 0 var(--colonies-card-radius) var(--colonies-card-radius);
}
.le-card__title{
  margin:0 0 8px 0;
  font-size:1.08rem;
  font-weight:900;
  line-height:1.25;
  letter-spacing:-.01em;
}
.le-card__title a{
  text-decoration:none;
  color:#0f172a;
  transition:color .2s ease;
  position:relative;
}
.le-card:hover .le-card__title a{
  color:var(--colonies-primary-color);
}
.le-card__title a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2px;
  background:linear-gradient(90deg,var(--colonies-primary-color),var(--colonies-secondary-color));
  transition:width .2s ease;
}
.le-card:hover .le-card__title a::after,
.le-card:focus-within .le-card__title a::after{
  width:42%;
}
.le-card__line{
  color: var(--codex-muted);
  margin:.2rem 0 .3rem 0;
  font-size:.94rem;
  line-height:1.4;
}
.le-card__cta{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin-top:auto;
  padding-top:10px;
  font-weight:900;
  font-size:.92rem;
  color:var(--colonies-primary-color);
  text-decoration:none;
  position:relative;
  transition:gap .2s ease, color .2s ease, transform .2s ease;
}
.le-card__cta:hover{
  gap:.6em;
  color:var(--colonies-secondary-color);
  transform:translateX(2px);
}
.le-card__cta::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:0; height:2px;
  background:linear-gradient(90deg,var(--colonies-primary-color),var(--colonies-secondary-color));
  transition:width .2s ease;
}
.le-card__cta:hover::after,
.le-card:focus-within .le-card__cta::after{
  width:60%;
}

/* ===== Responsive badges (cartes) - version consolidée et robuste ===== */
@media (max-width:768px){
  .le-card__badges{
    gap:6px;
    top:8px !important;
    left:8px !important;
    max-width:calc(100% - 16px);
  }
  
  .le-card__badges--right{
    gap:4px;
    top:auto !important;
    left:auto !important;
    bottom:8px !important;
    right:8px !important;
    max-width:auto;
  }
  
  .le-badge{
    width:36px;
    height:36px;
    font-size:18px;
  }
  
  .le-badge--new{
    width:36px;
    height:36px;
  }
  
  .le-badge--new::before { 
    font-size: 20px; 
  }
  
  .le-badge--soldout{
    width:auto !important;
    height:32px;
    padding:0 14px;
    font-size:10px;
    min-width:unset;
    max-width:none;
    gap:4px;
  }
}

@media (max-width:480px){
  .le-card__badges{
    gap:4px;
    top:6px !important;
    left:6px !important;
    max-width:calc(100% - 12px);
  }
  
  .le-card__badges--right{
    gap:3px;
    top:auto !important;
    left:auto !important;
    bottom:6px !important;
    right:6px !important;
    max-width:auto;
  }
  
  .le-badge{
    width:32px;
    height:32px;
    font-size:16px;
  }
  
  .le-badge--new{
    width:32px;
    height:32px;
  }
  
  .le-badge--new::before { 
    font-size: 18px; 
  }
  
  .le-badge--soldout{
    width:auto !important;
    height:30px;
    padding:0 12px;
    font-size:9px;
    min-width:unset;
    max-width:none;
    gap:3px;
  }
}

/* ===== Favoris ===== */
.fav-btn{
  float:right;margin:-2px 0 8px 8px;
  border:1px solid #e2e8f0;border-radius:var(--radius-sm);background:#fff;
  padding:.2em .45em;font-size:14px;font-weight:900;cursor:pointer;
  box-shadow: 0 2px 6px rgba(2,6,23,.06), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .15s ease, box-shadow .2s ease;
}
.fav-btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(2,6,23,.1)}
.fav-btn.is-fav{background:#fde68a;border-color:#f59e0b}

/* ===== Reveal-on-scroll (si activé côté JS) ===== */
.le-card{opacity:1; transform:none; transition:opacity .25s ease, transform .25s ease}
.le-card.in{opacity:1; transform:translateY(0)}

/* ===== Empty State ===== */
.colonies-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--codex-muted);
}
.colonies-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--background-color);
  color: var(--colonies-primary-color);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.colonies-empty__title {
  font-size: 1.5rem;
  color: var(--titles-color);
  margin-bottom: 0.5rem;
}
.colonies-empty__text {
  margin-bottom: 2rem;
  font-size: 1.1rem;
}
.colonies-empty .btn-reset {
  display: inline-flex;
  /* S'assure que le bouton reset a du style même hors toolbar */
  background: linear-gradient(135deg, var(--colonies-primary-color), var(--colonies-secondary-color));
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.colonies-empty .btn-reset:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

/* =========================================================
/* ===== HOTFIXES (ajouts non-destructifs)
   ========================================================= */

@media (max-width:768px){
  .colonies-filters-box{padding:18px 16px;border-radius:var(--radius-lg);gap:16px}
  .colonies-filters{grid-template-columns:1fr;gap:12px}
  .colonies-filters__legend{text-align:center}
  .colonies-filters__footer{align-items:stretch}
  .colonies-toolbar{flex-direction:column;align-items:stretch}
  .colonies-toolbar .btn,
  .colonies-toolbar .chip,
  .colonies-toolbar .sel select{width:100%;justify-content:center}
}
@media (min-width:768px){
  .colonies-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .colonies-field--search{grid-column:1/-1}
}
@media (min-width:1280px){
  .colonies-filters{grid-template-columns:repeat(4,minmax(0,1fr))}
  .colonies-field--search{grid-column:span 2}
}

/* ===== ANIMATIONS SCROLL ===== */
.reveal-up{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.reveal-up.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-up[data-reveal-delay="1"]{transition-delay:.1s}
.reveal-up[data-reveal-delay="2"]{transition-delay:.2s}
.reveal-up[data-reveal-delay="3"]{transition-delay:.3s}
.reveal-up[data-reveal-delay="4"]{transition-delay:.4s}
.reveal-up[data-reveal-delay="5"]{transition-delay:.5s}
.reveal-up[data-reveal-delay="6"]{transition-delay:.6s}