/* =====================================================
   CA — Communauté Adoptants MesLapins.fr
   ===================================================== */

/* Variables */
:root {
    --ca-primary:    #104B59;
    --ca-primary-l:  #1a6b7a;
    --ca-accent:     #ff7d44;
    --ca-accent-l:   #fff0ea;
    --ca-gold:       #d4a96a;
    --ca-gold-l:     #f5e9d0;
    --ca-bg:         #f0f4f6;
    --ca-card:       #ffffff;
    --ca-text:       #1a2e35;
    --ca-muted:      #6b8896;
    --ca-border:     #e2e8eb;
    --ca-success:    #22c55e;
    --ca-warning:    #f97316;
    --ca-danger:     #ef4444;
    --ca-radius:     14px;
    --ca-shadow:     0 4px 20px rgba(16,75,89,.09);
    --ca-shadow-l:   0 2px 8px rgba(16,75,89,.06);
    --ca-font:       'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   Forum index footer — Community stats + online
   ============================================================ */

.ca-stats-wrap{
  width: 100%;
  box-sizing: border-box;
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 14px 14px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(226,232,235,.95);
  box-shadow: 0 10px 28px rgba(16,75,89,.08);
}

/* Séparateur design avant les stats */
.ca-index-sep{
  width: 100%;
  margin: 22px 0 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #64748b;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.ca-index-sep::before,
.ca-index-sep::after{
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, rgba(226,232,235,0), rgba(226,232,235,1));
}
.ca-index-sep::after{
  background: linear-gradient(90deg, rgba(226,232,235,1), rgba(226,232,235,0));
}
.ca-index-sep > span{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e7eef5;
  background: #fff;
  box-shadow: 0 1px 6px rgba(16,75,89,.06);
}

.ca-stats-head{
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
}

.ca-stats-grid{
  /* Flex-wrap centre naturellement la dernière ligne (contrairement à grid) */
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  gap: 12px;
}

.ca-stat-card{
  --accent: var(--ca-accent);
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 14px 12px;
  min-height: 86px;
  width: 178px;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid rgba(226,232,235,.95);
  box-shadow: 0 10px 22px rgba(16,75,89,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Accent bar (premium dashboard) */
.ca-stat-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,.2), var(--accent));
}

.ca-stat-card:hover{
  transform: translateY(-4px);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 14px 34px rgba(16,75,89,.12);
}

.ca-stat-icon{ font-size: 20px; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 6px 12px rgba(16,75,89,.10)); }
.ca-stat-val{ font-weight: 900; font-size: 20px; line-height: 1; color: #0f172a; }
.ca-stat-label{ font-size: 12px; color: #64748b; margin-top: 6px; }

/* Per-card colors */
.ca-stat--adoptants{ --accent:#7c3aed; }
.ca-stat--lapins{ --accent:#ec4899; }
.ca-stat--favoris{ --accent:#f59e0b; }
.ca-stat--topics{ --accent:#3b82f6; }
.ca-stat--messages{ --accent:#60a5fa; }
.ca-stat--reactions{ --accent:#f97316; }
.ca-stat--quiz{ --accent:#8b5cf6; }
.ca-stat--badges{ --accent:#eab308; }

/* Top adoptant du mois (widget) */
.ca-topad-wrap{ width:100%; display:flex; flex-direction:column; align-items:center; margin: 6px 0 14px; }
.ca-topad-head{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:900; color:#0f172a; }
.ca-topad-card{ width: 240px; max-width:100%; background:#fff; border:1px solid rgba(226,232,235,.95); border-radius: 18px; padding: 16px 14px 14px; box-shadow: 0 12px 28px rgba(16,75,89,.10); text-align:center; position:relative; overflow:visible; }
.ca-topad-card::before{ content:""; position:absolute; inset:0; background: radial-gradient(80% 90% at 20% 0%, rgba(124,58,237,.10), transparent 60%), radial-gradient(70% 90% at 100% 20%, rgba(249,115,22,.08), transparent 55%); pointer-events:none; }
.ca-topad-avatar{ position:relative; display:inline-flex; align-items:center; justify-content:center; margin: 2px auto 10px; }
.ca-avatar--lg img{ width:74px !important; height:74px !important; }
.ca-topad-name{ font-weight:900; color:#0f172a; }
.ca-topad-meta{ margin-top:8px; font-size:12px; color:#64748b; font-weight:800; }

/* Sidebar variant (fits narrow column) */
.ca-forum-sidebar #ca-widget-top-adoptant .ca-topad-wrap{ margin: 0; }
.ca-forum-sidebar #ca-widget-top-adoptant .ca-topad-head{ justify-content:space-between; padding: 0 2px; }
.ca-forum-sidebar #ca-widget-top-adoptant .ca-topad-title{ font-weight:900; }
.ca-forum-sidebar #ca-widget-top-adoptant .ca-topad-card{ width: 100%; padding: 14px 12px 12px; border-radius: 16px; }
.ca-forum-sidebar #ca-widget-top-adoptant .ca-avatar--lg img{ width:72px !important; height:72px !important; }
.ca-forum-sidebar #ca-widget-top-adoptant .ca-topad-meta{ font-size: 12px; }
.ca-widget-empty{ color:#64748b; font-size:13px; padding: 10px 0; text-align:center; }

/* Niveaux */
.ca-level-pill{ margin-top:6px; display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius:999px; background:#f8fafc; border:1px solid #e8eef5; color:#334155; font-size:12px; font-weight:900; }
.ca-level-mini{ margin-left:6px; font-size:14px; line-height:1; opacity:.95; }

/* Tooltip (bouton info "i") */
.ca-tip-btn{
  border:1px solid #e6edf5;
  background:#fff;
  cursor:pointer;
  width:26px;
  height:26px;
  border-radius:8px; /* carré arrondi */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#64748b;
  line-height:1;
}
.ca-tip-btn:hover{ background:#f8fafc; color:#0f172a; box-shadow:0 10px 22px rgba(2,6,23,.10); }
.ca-topad-card .ca-tip-btn{ position:absolute !important; top:10px !important; right:10px !important; z-index:60; }

.ca-tip-btn[data-tip]{ position:relative; }
.ca-tip-btn[data-tip]:hover::after{
  content: attr(data-tip);
  position:absolute;
  top: calc(100% + 10px);
  right:0;
  background:#0f172a;
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  line-height:1.25;
  width: 260px;
  max-width: 72vw;
  white-space: pre-line; /* 
 => retours à la ligne */
  box-shadow: 0 16px 40px rgba(2,6,23,.25);
  z-index:70;
}
.ca-tip-btn[data-tip]:hover::before{
  content:"";
  position:absolute;
  top: calc(100% + 4px);
  right:10px;
  border:6px solid transparent;
  border-bottom-color:#0f172a;
}

/* Sub stats (top lapin/quiz) */
.ca-stats-extras{ margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ca-stats-extra{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid #edf2f7; background: #f8fafc; color: #334155; font-size: 13px; }
.ca-stats-extra-link{ font-weight: 800; color: #0f172a; text-decoration: none; }
.ca-stats-extra-link:hover{ text-decoration: underline; }
.ca-stats-extra-meta{ color:#64748b; font-weight:700; }

.ca-online-block{
  margin-top: 14px;
  border-top: 1px solid #eef3f8;
  padding-top: 12px;
  padding-bottom: 6px;
  width: 100%;
  box-sizing: border-box;
}

.ca-online-title{ font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.ca-online-count{ font-weight: 700; color:#64748b; }

.ca-online-list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

/* Online badge (avatar) */
.ca-online-user .ca-avatar{ position: relative; }
.ca-online-user .ca-avatar::after{
  content:"";
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:9px;
  height:9px;
  background: var(--ca-success);
  border-radius:50%;
  border:2px solid #fff;
  box-shadow: 0 0 0 0 rgba(34,197,94,.55);
  animation: caPulse 1.6s infinite;
}

@keyframes caPulse{
  0%{ box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.ca-online-user{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.62);
  box-shadow: 0 8px 18px rgba(16,75,89,.08);
  backdrop-filter: blur(10px);
}

.ca-online-name{ font-size: 13px; color:#0f172a; }
.ca-online-empty{ color:#64748b; font-size: 13px; }

.ca-skeleton .ca-stat-card{ background: linear-gradient(90deg, #f1f5f9 0%, #f8fafc 50%, #f1f5f9 100%); background-size: 200% 100%; animation: caSk 1.2s ease-in-out infinite; border-color:#edf2f7; }
.ca-skeleton .ca-online-title{ opacity:.6; }

@keyframes caSk{ 0%{background-position:0% 0} 100%{background-position:200% 0} }

@media (max-width: 980px){
  .ca-stat-card{ width: 170px; }
}

@media (max-width: 680px){
  .ca-stats-wrap{ padding: 12px; }
  .ca-stats-grid{ justify-content: center; }
  .ca-stat-card{ width: calc(50% - 12px); }
  .ca-stat-val{ font-size: 17px; }
}

/* =========================
   Top posteurs (widget)
   ========================= */
.ca-top-poster-row { cursor: pointer; }
.ca-top-poster-row:hover { background: var(--ca-bg); }
.ca-top-poster-medal { font-size: 1em !important; width: 22px; flex-shrink: 0; text-align: center; }
.ca-top-poster-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 1.5px solid var(--ca-border);
}
.ca-top-poster-initiale {
    background: var(--ca-primary-l); color: var(--ca-primary) !important;
    display: flex; align-items: center; justify-content: center;
    font-size: .75em !important; font-weight: 700 !important;
}
.ca-top-poster-name { font-size: .85em !important; }

/* Pop emoji (réaction) */
.ca-react-pop{
    position: absolute;
    right: 12px;
    bottom: 36px;
    font-size: 22px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(.9);
    transition: opacity .18s ease, transform .18s ease;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
}

/* =========================
   Questions : Réponse acceptée (solution)
   ========================= */
.ca-solved-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  font-size:12px;
  background: rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.35);
  vertical-align:middle;
}

.ca-solved-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  margin-right:8px;
  background: rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.35);
}

.ca-solution-tag{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  margin-left:8px;
  background: rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.30);
}

.ca-post--solution{
  box-shadow: 0 0 0 2px rgba(34,197,94,.18) inset;
}

.ca-solution-btn.is-on{
  border-color: rgba(34,197,94,.45);
}
.ca-react-pop.show{
    opacity: 1;
    transform: translateY(-8px) scale(1);
}

/* Assure un contexte pour le pop */
.ca-post-footer{ position: relative; }

/* =========================
   Alignement footer message
   (réactions + bouton Citer)
   ========================= */
.ca-post-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.ca-post-footer .ca-reactions{
    display:flex;
    align-items:center;
    gap:8px;
}
.ca-post-footer .ca-react-picker-wrap,
.ca-post-footer .ca-reaction-counts{
    display:flex;
    align-items:center;
}
.ca-post-footer .ca-react-add-btn,
.ca-post-footer .ca-reaction-count,
.ca-post-footer .ca-action-btn{
    display:inline-flex;
    align-items:center;
    height:32px;
}

.ca-app {
    font-family: var(--ca-font);
    color: var(--ca-text) !important;
    background: var(--ca-bg);
    min-height: 60vh;
    border-radius: var(--ca-radius);
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.ca-app * { box-sizing: border-box; }

/* ========================
   HERO HEADER
   ======================== */
.ca-page-hero {

    background: linear-gradient(135deg, var(--ca-primary) 0%, var(--ca-primary-l) 100%);
    color: white !important;
    text-align: center;
    padding: 48px 24px 40px !important;
    border-radius: var(--ca-radius) var(--ca-radius) 0 0;
    position: relative;
    overflow: hidden;
}
.ca-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.ca-page-hero--small {
 padding: 28px 24px 24px !important;}
.ca-page-hero--forum {

    display: flex !important;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 16px;
    flex-wrap: wrap;
}
.ca-page-hero--forum .ca-forum-hero-content {
    display: flex; align-items: center; gap: 14px;
}
.ca-page-hero--forum .ca-hero-icon {
    font-size: 2.2em !important; margin-bottom: 0;
}
.ca-page-hero--forum h1 { font-size: 1.5em; }
.ca-hero-icon { font-size: 3em !important; margin-bottom: 12px; line-height: 1 !important; }
.ca-page-hero h1 { font-size: 1.9em; font-weight: 800; margin: 0 0 8px; letter-spacing: -.02em; }
.ca-page-hero p { opacity: .85; font-size: 1em !important; margin: 0 !important; }

/* ========================
   BOUTONS
   ======================== */
.ca-btn {

    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px !important; border-radius: 50px !important;
    font-size: .9em !important; font-weight: 700 !important; cursor: pointer !important;
    border: 2px solid transparent; transition: all .2s; text-decoration: none;
}
.ca-btn-primary { background: var(--ca-accent); color: white !important; border-color: var(--ca-accent) !important; }
.ca-btn-primary:hover { background: #e06830; border-color: #e06830; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,125,68,.35); }
.ca-btn-ghost { background: transparent; color: var(--ca-primary) !important; border-color: var(--ca-border) !important; }
.ca-btn-ghost:hover { background: var(--ca-bg); }
.ca-btn-xl { padding: 14px 32px !important; font-size: 1.05em !important; width: 100%; justify-content: center; margin-top: 12px; }
.ca-btn-sm {
 padding: 6px 14px !important; font-size: .82em !important;}

/* ========================
   QUIZ — LISTE
   ======================== */
.ca-quiz-liste-page > .ca-quiz-grid,
.ca-quiz-liste-page > .ca-empty-state { padding: 24px !important; }

.ca-quiz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 24px !important;
}
.ca-quiz-card {
    background: var(--ca-card);
    border-radius: var(--ca-radius);
    box-shadow: var(--ca-shadow);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: var(--ca-text) !important;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s;
    border: 1px solid var(--ca-border);
}
.ca-quiz-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(16,75,89,.15); }
.ca-quiz-card-img {
    height: 140px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--ca-border) !important;
}
.ca-quiz-card-img--default {
    background: linear-gradient(135deg, var(--ca-primary), var(--ca-primary-l));
    display: flex; align-items: center; justify-content: center;
    font-size: 3em !important;
}
.ca-quiz-card .ca-quiz-card-body {
 padding: 16px !important; flex: 1 !important;}
.ca-quiz-card-body h3 { font-size: 1.05em; font-weight: 700; margin: 0 0 8px; }
.ca-quiz-desc { font-size: .85em !important; color: var(--ca-muted) !important; margin: 0 0 12px !important; line-height: 1.5 !important; }
.ca-quiz-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.ca-quiz-meta span { font-size: .78em !important; color: var(--ca-muted) !important; background: var(--ca-bg); padding: 3px 10px !important; border-radius: 20px; }
.ca-quiz-card-cta {

    background: linear-gradient(135deg, var(--ca-accent), #e06830);
    color: white !important; text-align: center; padding: 12px !important;
    font-weight: 700 !important; font-size: .9em !important;
}

/* ========================
   MODAL
   ======================== */
.ca-modal {
    position: fixed; inset: 0;
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px !important;
}
.ca-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(4px);
}
.ca-modal-box {
    position: relative;
    background: var(--ca-card);
    border-radius: var(--ca-radius);
    max-width: 600px; width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
    animation: caModalIn .3s ease;
    padding: 10px !important;
}
@keyframes caModalIn { from { opacity: 0; transform: scale(.95) translateY(20px); } }
.ca-modal-close {
    position: absolute; top: 14px; right: 14px; z-index: 10;
    background: var(--ca-bg); border: none; border-radius: 50%;
    width: 32px; height: 32px; cursor: pointer; font-size: 1em !important;
    display: flex; align-items: center; justify-content: center;
}

/* ========================
   QUIZ — INTRO
   ======================== */
.ca-quiz-intro { padding: 32px !important; text-align: center; }
.ca-quiz-intro-img {
    height: 180px; border-radius: var(--ca-radius);
    background-size: cover; background-position: center; margin-bottom: 20px;
}
.ca-quiz-intro-icon { font-size: 4em !important; margin-bottom: 12px; }
.ca-quiz-intro h2 { font-size: 1.7em; font-weight: 800; margin: 0 0 10px; color: var(--ca-primary); }
.ca-quiz-intro-desc { color: var(--ca-muted) !important; font-size: .95em !important; margin-bottom: 20px; line-height: 1.6 !important; }
.ca-quiz-intro-meta {
    display: flex; justify-content: center; gap: 24px;
    background: var(--ca-bg); border-radius: 12px; padding: 16px !important; margin-bottom: 20px;
}
.ca-quiz-meta-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ca-meta-val { font-size: 1.5em !important; font-weight: 800 !important; color: var(--ca-primary) !important; }
.ca-meta-lab { font-size: .75em !important; color: var(--ca-muted) !important; text-transform: uppercase; letter-spacing: .05em; }
.ca-pseudo-wrap { text-align: left; margin-bottom: 16px; }
.ca-pseudo-wrap label { font-size: .85em !important; font-weight: 600 !important; display: block; margin-bottom: 6px; }
.ca-pseudo-wrap input {
    width: 100%; padding: 10px 14px !important; border: 2px solid var(--ca-border);
    border-radius: 8px; font-size: .95em !important;
}
.ca-classement-btn { width: 100%; justify-content: center; margin-top: 8px; }

/* ========================
   QUIZ — QUESTION
   ======================== */
.ca-quiz-question { padding: 24px !important; }
.ca-quiz-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ca-progress-bar { flex: 1; height: 6px; background: var(--ca-border); border-radius: 3px; overflow: hidden; }
.ca-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ca-accent), #e06830); border-radius: 3px; transition: width .5s ease; }
.ca-q-counter { font-size: .82em !important; color: var(--ca-muted) !important; font-weight: 700 !important; white-space: nowrap; }

/* Timer */
.ca-timer-wrap { display: flex; justify-content: center; margin-bottom: 18px; }
.ca-timer { width: 72px; height: 72px; }
.ca-timer-circle { position: relative; width: 72px; height: 72px; }
.ca-timer-circle svg { width: 72px; height: 72px; transform: rotate(-90deg); }
.ca-timer-bg { fill: none; stroke: var(--ca-border); stroke-width: 3; }
.ca-timer-ring { fill: none; stroke: var(--ca-accent); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .9s linear, stroke .3s; }
#ca-timer-val {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1.3em; font-weight: 800; color: var(--ca-primary);
}
.ca-timer--urgent .ca-timer-ring  { stroke: var(--ca-warning); }
.ca-timer--critical .ca-timer-ring { stroke: var(--ca-danger); }
.ca-timer--critical #ca-timer-val { color: var(--ca-danger); animation: caPulse .5s infinite; }
@keyframes caPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.ca-question-text {
    font-size: 1.1em !important; font-weight: 700 !important; color: var(--ca-primary) !important;
    line-height: 1.5; margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(16,75,89,.06), transparent);
    padding: 16px !important; border-radius: 10px; border-left: 4px solid var(--ca-accent);
}
.ca-reponses { display: grid; gap: 10px; margin-bottom: 20px; }
.ca-rep-btn {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 14px 18px !important;
    background: var(--ca-card); border: 2px solid var(--ca-border);
    border-radius: 10px; cursor: pointer; font-size: .95em !important;
    text-align: left; transition: all .2s;
}
.ca-rep-btn:hover:not(.disabled) { border-color: var(--ca-accent); background: var(--ca-accent-l); transform: translateX(4px); }
.ca-rep-check {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--ca-border); flex-shrink: 0; transition: all .2s;
}
.ca-rep-btn.selected { border-color: var(--ca-accent) !important; background: var(--ca-accent-l); }
.ca-rep-btn.selected .ca-rep-check { background: var(--ca-accent); border-color: var(--ca-accent) !important; }
.ca-rep-btn.selected .ca-rep-check::after { content: '✓'; font-size: .7em; color: white; display: flex; align-items: center; justify-content: center; height: 100%; }
.ca-rep-btn.disabled { opacity: .6; cursor: not-allowed; }
.ca-quiz-nav { text-align: right; }
.ca-quiz-nav button:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ========================
   QUIZ — RÉSULTATS
   ======================== */
.ca-quiz-resultats { padding: 24px !important; }
.ca-resultat-header {

    display: flex; gap: 20px; align-items: center;
    background: linear-gradient(135deg, var(--ca-primary), var(--ca-primary-l));
    color: white !important; border-radius: var(--ca-radius); padding: 24px !important; margin-bottom: 24px !important;
}
.ca-score-circle {
    width: 100px; height: 100px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,.15); border: 3px solid rgba(255,255,255,.3);
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
.ca-score-val { font-size: 2.2em !important; font-weight: 900 !important; }
.ca-score-sep { font-size: 1.2em !important; opacity: .6; }
.ca-score-total { font-size: 1.4em !important; font-weight: 700 !important; opacity: .7; }
.ca-resultat-msg h2 { font-size: 1.3em; font-weight: 800; margin: 0 0 6px; }
.ca-resultat-msg p { font-size: .88em !important; opacity: .85; margin: 0 !important; }
.ca-resultat-emoji { font-size: 2em !important; margin-bottom: 6px; }

.ca-corrections { margin-bottom: 20px; }
.ca-corrections h3 { font-size: 1em; font-weight: 700; margin-bottom: 12px; color: var(--ca-primary); }
.ca-correction-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px !important; border-radius: 8px; margin-bottom: 8px;
}
.ca-correction-item.correct { background: #f0fdf4; border: 1px solid #bbf7d0; }
.ca-correction-item.wrong   { background: #fff5f5; border: 1px solid #fecaca; }
.ca-corr-icon { font-size: 1.1em !important; flex-shrink: 0; margin-top: 1px; }
.ca-corr-question { font-size: .9em !important; font-weight: 600 !important; margin-bottom: 4px; }
.ca-corr-answer { font-size: .82em !important; color: var(--ca-success) !important; }
.ca-corr-expl {
    font-size: .82em !important; margin-top: 6px !important;
    padding: 6px 10px !important; border-radius: 6px;
    background: #fffbeb; border-left: 3px solid #f59e0b;
    color: #92400e !important; line-height: 1.5 !important;
}

.ca-quiz-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ========================
   CLASSEMENT
   ======================== */
.ca-classement { padding: 4px 0 16px !important; }
.ca-classement h3 { font-size: 1em; font-weight: 700; color: var(--ca-primary); margin-bottom: 12px; }
.ca-classement-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.ca-class-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px !important; border-radius: 8px;
    background: var(--ca-bg); font-size: .88em !important;
}
.ca-class-top1 { background: linear-gradient(135deg, #fef9e7, #fef3c7); border: 1px solid #f59e0b; }
.ca-class-top2 { background: linear-gradient(135deg, #f8fafc, #e2e8f0); border: 1px solid #94a3b8; }
.ca-class-top3 { background: linear-gradient(135deg, #fff7ed, #fed7aa); border: 1px solid #fb923c; }
.ca-class-medal { font-size: 1.2em !important; width: 28px; flex-shrink: 0; text-align: center; }
.ca-rank { font-size: .9em !important; font-weight: 700 !important; color: var(--ca-muted) !important; }
.ca-class-pseudo { flex: 1; font-weight: 600 !important; }
.ca-guest-tag { font-size: .72em !important; color: var(--ca-muted) !important; font-weight: 400 !important; margin-left: 4px; }
.ca-class-score { font-size: .85em !important; }
.ca-class-time { font-size: .8em !important; color: var(--ca-muted) !important; }

/* ============================================================
   FORUM v2.0 — Design réseau social mobile-first
   ============================================================ */

/* ── Topbar ──────────────────────────────────────────────── */
.ca-forum-topbar {
    display: flex; align-items: center; gap: 10px;
    background: var(--ca-card); border-bottom: 1px solid var(--ca-border);
    padding: 12px 16px !important;
    position: sticky; top: 0; z-index: 100;
}
.ca-forum-menu-btn{
    display: inline-flex; align-items:center; justify-content:center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ca-bg); border: 1.5px solid var(--ca-border);
    cursor: pointer; color: var(--ca-primary); flex-shrink: 0;
    transition: background .15s;
}
.ca-forum-menu-btn:hover{ background: var(--ca-border) !important; }
.ca-forum-back-btn {
    display: none; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ca-bg); border: 1.5px solid var(--ca-border);
    cursor: pointer; color: var(--ca-primary); flex-shrink: 0;
    transition: background .15s;
}
.ca-forum-back-btn:hover { background: var(--ca-border) !important; }
.ca-forum-topbar-title {
    flex: 1; font-size: 1.05em; font-weight: 800; color: var(--ca-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ca-forum-topbar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.ca-topbar-espace-btn {
    font-size: 1.2em !important; padding: 4px !important; text-decoration: none !important;
    opacity: .8; transition: opacity .15s;
}
.ca-topbar-espace-btn:hover { opacity: 1; }

/* ── Catégories scrollables ──────────────────────────────── */
.ca-categories-bar {
    display: flex; gap: 6px;
    overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 12px 16px 0;
    background: var(--ca-card); border-bottom: 1px solid var(--ca-border);
}

/* ============================================================
   FORUM v3 — XenForo-like (sidebar + layout)
   ============================================================ */
.ca-forum-layout{ display:flex; min-height: 60vh; }
.ca-forum-main{ flex:1; min-width:0; }

.ca-forum-sidebar{
    width: 280px;
    background: var(--ca-bg);
    border-left: 1px solid var(--ca-border);
    position: sticky;
    top: 54px; /* sous la topbar */
    overflow: visible;
    order: 2; /* à droite */
    align-self: flex-start;
}

/* Desktop: sidebar pliable (style XenForo) */
.ca-forum-sidebar{
    transition: width .22s ease, transform .22s ease, opacity .22s ease;
}
.ca-forum-sidebar:not(.is-open){
    width: 0;
    border-left: 0;
    overflow: hidden;
    transform: translateX(105%);
    opacity: 0;
    pointer-events: none;
}
.ca-forum-sidebar.is-open{
    opacity: 1;
    pointer-events: auto;
}

/* Overlay (mobile) : élément réel pour capturer le clic */
.ca-forum-sidebar-overlay{
    display:none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 9998;
}
.ca-forum-main{ order: 1; }
.ca-forum-sidebar-header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 14px 10px !important;
    border-bottom: 1px solid var(--ca-border);
}
.ca-forum-sidebar-title{ font-weight: 900; color: var(--ca-primary); font-size: .95em; }
.ca-forum-sidebar-close{
    width: 32px; height: 32px; border-radius: 10px;
    border: 1px solid var(--ca-border); background: var(--ca-bg);
    cursor:pointer;
}
.ca-forum-sidebar-body{ padding: 12px 12px 18px !important; }
.ca-forum-sidebar-section{ margin-bottom: 14px; }
.ca-forum-sidebar-section-title{ font-weight: 800; font-size: .78em; color: var(--ca-muted); text-transform: uppercase; letter-spacing: .06em; margin: 6px 0 8px; }
.ca-forum-sidebar-links{ display:flex; flex-direction:column; gap: 8px; }
.ca-forum-link{
    display:flex; align-items:center; gap: 8px;
    padding: 10px 12px !important;
    background: var(--ca-bg);
    border: 1px solid var(--ca-border);
    border-radius: 12px;
    text-decoration:none !important;
    color: var(--ca-text) !important;
    font-weight: 700;
    cursor:pointer;
}
.ca-forum-link:hover{ border-color: var(--ca-primary); }

/* Catégories en sidebar (verticales) */
.ca-categories-bar--sidebar{
    display:flex;
    flex-direction:column;
    gap: 6px;
    overflow: visible;
    white-space: normal;
    padding: 0 !important;
    border: none;
    background: transparent;
}
.ca-categories-bar--sidebar .ca-cat-btn{
    width: 100%;
    text-align: left;
    border-radius: 12px !important;
    border: 1px solid var(--ca-border);
    background: var(--ca-bg);
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--ca-border);
    margin-bottom: 0;
    font-size: .9em !important;
}
.ca-categories-bar--sidebar .ca-cat-btn.active{
    background: var(--ca-accent-l);
    border-color: var(--ca-accent) !important;
    color: var(--ca-primary) !important;
}
.ca-categories-bar--sidebar .ca-cat-count{ float:right; }

/* Mobile : sidebar en drawer */
@media (max-width: 980px){
    .ca-forum-layout{ display:block; }
    .ca-forum-sidebar-overlay{
        display:none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.35);
        z-index: 9998;
    }
    .ca-forum-sidebar{
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        max-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* le scroll se fait dans .ca-forum-sidebar-body */
        z-index: 9999;
        transform: translateX(105%);
        transition: transform .22s ease;
        box-shadow: 0 10px 30px rgba(0,0,0,.18);
    }
    .ca-forum-sidebar.is-open{ transform: translateX(0); }
    body.ca-forum-sidebar-open .ca-forum-sidebar-overlay{ display:block; }
    /* Empêche le scroll de la page derrière (tout en gardant le scroll dans la sidebar) */
    body.ca-forum-sidebar-open{ overflow:hidden; }
}

/* Mobile : contenu sidebar scrollable */
@media (max-width: 980px){
    .ca-forum-sidebar-body{
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
}

/* Widgets sidebar (XenForo-like) */
.ca-widget{
    background: var(--ca-bg);
    border: 1px solid var(--ca-border);
    border-radius: 14px;
    padding: 12px !important;
}
.ca-widget-skel{ color: var(--ca-muted) !important; font-size: .88em !important; }

.ca-widget-profile-row{ display:flex; gap: 10px; align-items:center; }
.ca-widget-profile-avatar{
    width: 48px; height: 48px;
    display:flex; align-items:center; justify-content:center;
    font-weight: 900; color: var(--ca-primary);
    overflow:visible;
    cursor:pointer;
}
.ca-widget-profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.ca-widget-profile-name{ font-weight: 900; color: var(--ca-text) !important; line-height: 1.1; }
.ca-widget-profile-sub{ font-size: .78em !important; color: var(--ca-muted) !important; margin-top: 2px; }
.ca-widget-actions{ display:flex; flex-direction:column; gap: 8px; margin-top: 10px; }
.ca-widget-btn{
    display:flex; align-items:center; justify-content:center;
    padding: 10px 12px !important;
    border-radius: 12px;
    border: 1px solid var(--ca-border);
    background: var(--ca-card);
    text-decoration:none !important;
    color: var(--ca-text) !important;
    font-weight: 800;
    cursor:pointer;
}
.ca-widget-btn:hover{ border-color: var(--ca-accent); background: var(--ca-accent-l); }

.ca-widget-list{ display:flex; flex-direction:column; gap: 8px; }
.ca-widget-item{
    display:flex; gap: 10px; align-items:flex-start;
    padding: 10px 10px !important;
    border-radius: 12px;
    border: 1px solid var(--ca-border);
    background: var(--ca-card);
    cursor:pointer;
}
.ca-widget-item:hover{ border-color: var(--ca-primary); }
.ca-widget-item-title{ font-weight: 800; font-size: .9em !important; color: var(--ca-text) !important; line-height: 1.2; }
.ca-widget-item-meta{ font-size: .75em !important; color: var(--ca-muted) !important; margin-top: 2px; }
.ca-widget-item-badge{ width: 34px; height: 34px; border-radius: 10px; background: var(--ca-bg); display:flex; align-items:center; justify-content:center; border: 1px solid var(--ca-border); flex-shrink:0; }

/* Permalink message (#1) */
.ca-msg-permalink{
    font-weight: 900;
    font-size: .85em;
    color: var(--ca-muted) !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    border-radius: 10px;
    border: 1px solid var(--ca-border);
    background: var(--ca-bg);
}
.ca-msg-permalink:hover{ border-color: var(--ca-primary); color: var(--ca-primary) !important; }

/* Bouton citer */
.ca-action-btn{
    margin-left: auto;
    padding: 8px 12px !important;
    border-radius: 999px;
    border: 1px solid var(--ca-border);
    background: var(--ca-bg);
    cursor:pointer;
    font-weight: 800;
    font-size: .85em !important;
    color: var(--ca-primary) !important;
}
.ca-action-btn:hover{ border-color: var(--ca-accent); background: var(--ca-accent-l); }

/* Quote (éviter conflit avec les icônes "quote") */
.ca-quote-box{
    margin: 10px 0;
    border: 1px solid var(--ca-border);
    background: var(--ca-card);
    border-left: 4px solid var(--ca-primary);
    border-radius: 12px;
    overflow:visible;
}
.ca-quote-box-head{
    padding: 8px 10px !important;
    background: var(--ca-bg);
    border-bottom: 1px solid var(--ca-border);
    font-weight: 800;
    font-size: .85em !important;
    color: var(--ca-muted) !important;
}
.ca-quote-box-head a{ color: var(--ca-primary) !important; text-decoration:none !important; }
.ca-quote-box-body{ padding: 8px 10px !important; 
font-weight: normal;
    font-weight: 400;
    line-height: 1.4;
    font-size: 14px;
font-style: italic;

color: var(--ca-text) !important; }

/* Certains thèmes (dont Loraic) stylent fortement les <blockquote> (gros guillemets, cercles, colonnes).
   On neutralise ces effets UNIQUEMENT dans le forum pour garder un rendu XenForo clean. */
.ca-forum-app .ca-post-content blockquote,
.ca-forum-app .ca-post-content blockquote.ca-quote-box{
    padding: 0 !important;
    margin: 10px 0 !important;
    background: transparent !important;
}
.ca-forum-app .ca-post-content blockquote::before,
.ca-forum-app .ca-post-content blockquote::after,
.ca-forum-app .ca-post-content blockquote.ca-quote-box::before,
.ca-forum-app .ca-post-content blockquote.ca-quote-box::after{
    content: none !important;
    display: none !important;
    background: none !important;
}
.ca-forum-app .ca-post-content blockquote.ca-quote-box{
    background: var(--ca-card) !important;
}
.ca-categories-bar::-webkit-scrollbar { display: none; }
.ca-cat-btn {
    flex-shrink: 0;
    padding: 7px 13px !important; border-radius: 6px 6px 0 0 !important;
    background: transparent; border: none; cursor: pointer;
    font-size: .83em !important; font-weight: 600 !important; color: var(--ca-muted) !important;
    transition: all .2s; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.ca-cat-btn:hover { color: var(--ca-primary) !important; }
.ca-cat-btn.active { color: var(--ca-primary) !important; border-bottom-color: var(--ca-accent) !important; }
.ca-cat-count { font-size: .74em !important; background: var(--ca-bg); border-radius: 10px; padding: 1px 5px !important; margin-left: 3px; }

/* ── Barre recherche + Nouveau ───────────────────────────── */
.ca-forum-toolbar {
    display: flex; gap: 10px; align-items: center;
    padding: 12px 16px 8px !important;
}
.ca-forum-search { flex: 1; }
.ca-forum-search input {
    width: 100%; padding: 9px 14px !important;
    border: 1.5px solid var(--ca-border); border-radius: 50px;
    font-size: .88em !important; outline: none; transition: border-color .2s;
    background: var(--ca-bg);
}
.ca-forum-search input:focus { border-color: var(--ca-primary); background: var(--ca-card); }
.ca-btn-new-disc { white-space: nowrap; flex-shrink: 0; }
.ca-cat-description {
    margin: 0 16px 8px !important; padding: 10px 14px !important;
    background: var(--ca-accent-l); border-radius: 8px;
    font-size: .85em !important; color: var(--ca-text) !important;
    border-left: 3px solid var(--ca-accent);
}

/* ── Formulaire nouveau sujet ────────────────────────────── */
.ca-form-card {
    background: var(--ca-card); border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius); padding: 16px !important;
    margin: 0 16px 12px !important; box-shadow: var(--ca-shadow-l);
}
.ca-form-card h3 { font-size: .97em; font-weight: 700; margin: 0 0 14px; color: var(--ca-primary); }
.ca-field { margin-bottom: 12px; }
.ca-field label { display: block; font-size: .83em !important; font-weight: 600 !important; margin-bottom: 4px; }
.ca-field input, .ca-field textarea, .ca-select {
    width: 100%; padding: 9px 11px !important;
    border: 1.5px solid var(--ca-border); border-radius: 8px;
    font-size: .88em !important; font-family: var(--ca-font);
    color: var(--ca-text) !important; outline: none; resize: vertical;
    transition: border-color .2s; box-sizing: border-box;
}
.ca-field input:focus, .ca-field textarea:focus, .ca-select:focus { border-color: var(--ca-primary); }
.ca-form-actions {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 4px;
}
.ca-form-actions-media {
    display: flex; gap: 8px;
}
.ca-form-actions-media .ca-btn {
    flex: 1; justify-content: center;
    padding: 8px 6px !important;
    font-size: .82em !important;
}
.ca-form-actions-submit {
    display: flex; gap: 8px;
}
.ca-form-actions-submit .ca-btn {
    flex: 1; justify-content: center;
}
@media (min-width: 641px) {
    .ca-form-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
    .ca-form-actions-media { flex: 1; }
    .ca-form-actions-submit { margin-left: auto; flex: 0 0 auto; }
    .ca-form-actions-media .ca-btn { flex: 0 0 auto; }
    .ca-form-actions-submit .ca-btn { flex: 0 0 auto; }
}

/* ── Liste des discussions ───────────────────────────────── */
#ca-discussions-list {
    margin: 12px 16px !important;
    padding: 0 !important;
    background: var(--ca-card);
    border: 1px solid var(--ca-border);
    border-radius: 10px;
    overflow: hidden;
}
.ca-disc-row {
    display: flex; gap: 12px; align-items: center;
    background: transparent; border: none; border-bottom: 1px solid var(--ca-border);
    padding: 14px 14px !important; cursor: pointer; transition: background .15s, border-color .15s;
}
.ca-disc-row:first-child { border-top: 1px solid var(--ca-border); }
.ca-disc-row:hover { background: rgba(16,75,89,.04) !important; border-radius: 0; }
.ca-disc-cat-badge {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    background: var(--ca-bg); display: flex; align-items: center;
    justify-content: center; font-size: 1.3em !important;
    margin-left: 0 !important;
}
.ca-disc-body { flex: 1; min-width: 0; }
.ca-disc-title {
    font-size: .95em !important; font-weight: 700 !important; margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--ca-text) !important;
}
.ca-disc-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ca-disc-meta span { font-size: .76em !important; color: var(--ca-muted) !important; }
.ca-disc-right { flex-shrink: 0; text-align: center; min-width: 40px; }
.ca-disc-replies { display: flex; flex-direction: column; align-items: center; }
.ca-disc-replies strong { font-size: 1.05em !important; color: var(--ca-primary) !important; font-weight: 800 !important; }
.ca-disc-replies small  { font-size: .58em !important; color: var(--ca-muted) !important; }
.ca-disc-pinned .ca-disc-title::before { content: '📌 '; }
.ca-pin-icon, .ca-lock-icon { font-size: .9em !important; }
.ca-disc-author, .ca-disc-time, .ca-disc-cat {
    font-size: .76em !important; color: var(--ca-muted) !important;
}
.ca-disc-cat { background: var(--ca-bg); padding: 2px 8px !important; border-radius: 10px; }

/* ── Discussions de type "suggestion" ────────────────────── */
.ca-disc-row--suggest { padding: 12px 0 !important; }
.ca-sugg-vote-btn.voted, .ca-sugg-vote-btn:hover { background: var(--ca-accent-l); border-color: var(--ca-accent) !important; }

/* ── Pagination ──────────────────────────────────────────── */
.ca-pagination {
    display: flex; gap: 4px; flex-wrap: wrap;
    justify-content: center; padding: 16px !important;
}
.ca-page-btn {
    min-width: 36px; height: 36px; padding: 0 10px;
    border-radius: 8px; border: 1.5px solid var(--ca-border);
    background: var(--ca-card); cursor: pointer;
    font-size: .85em !important; font-weight: 600 !important;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.ca-page-btn:hover { border-color: var(--ca-primary); color: var(--ca-primary) !important; }
.ca-page-btn.active {
    background: var(--ca-primary); color: white !important;
    border-color: var(--ca-primary) !important; font-weight: 800 !important;
}
.ca-page-btn.ca-page-nav { font-size: 1.1em !important; font-weight: 900 !important; }
.ca-page-ellipsis {
    min-width: 20px; height: 36px; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: .9em !important; color: var(--ca-muted) !important;
}
.ca-msg-pagination { padding: 8px 16px 0 !important; }

/* ── En-tête discussion ──────────────────────────────────── */
.ca-disc-header {
    background: var(--ca-card); border-bottom: 1px solid var(--ca-border);
}
/* Header compact discussion */
.ca-disc-compact-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
}
.ca-disc-back-btn {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%; border: 1.5px solid var(--ca-border);
    background: var(--ca-bg);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--ca-text);
    transition: background .15s;
}
.ca-disc-back-btn:hover { background: var(--ca-border); }
.ca-disc-compact-body { flex: 1; min-width: 0; }
.ca-disc-compact-top {
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 2px; flex-wrap: wrap;
}
.ca-disc-detail-cat {
    font-size: .72em !important; font-weight: 700 !important;
    color: var(--ca-accent) !important; text-transform: uppercase;
    letter-spacing: .05em;
}
.ca-disc-compact-title {
    font-size: .95em; font-weight: 700; color: var(--ca-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 1px;
}
.ca-disc-detail-meta { font-size: .75em !important; color: var(--ca-muted) !important; }
.ca-locked-tag {
    background: #fff3e0; color: var(--ca-warning) !important;
    padding: 2px 8px !important; border-radius: 20px; font-size: .83em !important;
}
/* ── Messages ────────────────────────────────────────────── */
.ca-messages-list {
    background: var(--ca-bg);
    padding: 12px 16px 16px !important;
}
.ca-msg-card {
    background: var(--ca-card);
    border: 1px solid var(--ca-border);
    border-radius: 10px;
    padding: 14px 16px 10px !important;
    transition: background .1s, border-color .1s;
    margin-bottom: 10px;
}
.ca-msg-card:hover{ border-color: rgba(16,75,89,.22); }
.ca-msg-card--op {
    border-left: 4px solid var(--ca-accent);
    background: linear-gradient(to right, var(--ca-accent-l) 0%, var(--ca-card) 120px);
}
.ca-statut-bg-admin { background: linear-gradient(to right, #e8f4fd 0%, var(--ca-card) 120px) !important; border-left: 4px solid #90caf9 !important; }
.ca-statut-bg-vip   { background: linear-gradient(to right, #fffde7 0%, var(--ca-card) 120px) !important; border-left: 4px solid #f9e04b !important; }
.ca-statut-bg-eleveur { background: linear-gradient(to right, #f0fdf4 0%, var(--ca-card) 120px) !important; border-left: 4px solid #86efac !important; }

/* Header du message */
.ca-msg-card-header {
    display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px;
}
.ca-msg-card-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
    overflow: hidden;
}
.ca-msg-card-meta { flex: 1; min-width: 0; }
.ca-msg-card-meta-top {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 1px;
}
.ca-msg-card-author {
    font-weight: 600 !important; font-size: .92em !important; color: var(--ca-text) !important;
}
.ca-msg-badges { display: flex; gap: 3px; align-items: center; }
.ca-mini-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    border: 0px solid; overflow: hidden; cursor: pointer;
}
.ca-msg-card-meta-bot { display: flex; align-items: center; gap: 6px; }
.ca-msg-card-time {
    font-size: .74em !important; color: var(--ca-muted) !important;
}
/* Actions droite */
.ca-msg-card-actions {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.ca-op-tag {
    background: var(--ca-primary); color: white !important;
    font-size: .66em !important; font-weight: 700 !important;
    padding: 2px 7px !important; border-radius: 20px; white-space: nowrap;
}
.ca-mod-wrap { position: relative; }

/* Contenu message */
.ca-msg-card-content {
    font-size: .93em !important; line-height: 1.7 !important;
    white-space: pre-wrap; word-break: break-word;
    margin-bottom: 8px;
}
.ca-msg-card-content a { color: var(--ca-accent) !important; text-decoration: none; }
.ca-msg-card-content a:hover { text-decoration: underline; }

/* Footer votes */
.ca-msg-card-footer {
    display: flex; align-items: center; gap: 6px; padding-top: 4px !important;
}
.ca-vote-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 4px 10px !important; border-radius: 20px;
    border: 1.5px solid var(--ca-border);
    background: var(--ca-bg); cursor: pointer;
    font-size: .78em !important; font-weight: 700 !important;
    color: var(--ca-muted) !important; transition: all .15s;
    line-height: 1;
}
.ca-vote-btn:hover { border-color: var(--ca-primary); color: var(--ca-primary) !important; }
.ca-vote-btn.active { background: var(--ca-accent-l); border-color: var(--ca-accent) !important; color: var(--ca-accent) !important; }
.ca-vote-btn.pulse { animation: caVotePulse .3s ease; }
/* Désactivé (ex: auto-vote) */
.ca-vote-btn--disabled{
    opacity: .55;
    cursor: not-allowed;
}
@keyframes caVotePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
.ca-vote-score { font-weight: 800 !important; }
.ca-vote-score.pos { color: #15803d !important; }
.ca-vote-score.neg { color: #dc2626 !important; }

/* ── Réactions ── */
.ca-reactions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ca-react-picker-wrap { position: relative; }
.ca-react-add-btn {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 8px !important; border-radius: 20px;
    border: 1.5px solid var(--ca-border); background: var(--ca-bg);
    cursor: pointer; font-size: .78em !important; color: var(--ca-muted) !important;
    transition: all .15s; line-height: 1;
}
.ca-react-add-btn:hover { border-color: var(--ca-primary); color: var(--ca-primary) !important; }
.ca-react-picker {
    position: absolute; bottom: calc(100% + 6px); left: 0;
    background: var(--ca-card); border: 1px solid var(--ca-border);
    border-radius: 24px; padding: 6px 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    display: flex; gap: 4px; z-index: 100;
    animation: caPickerIn .15s ease;
    /* Fix mobile/overrides: force a readable emoji size even if a parent
       sets a small font-size for buttons/footers */
    font-size: 22px;
}
@keyframes caPickerIn { from { opacity:0; transform: scale(.85) translateY(4px); } }
.ca-react-emoji-btn {
    background: none; border: none; cursor: pointer;
    /* Use px to avoid tiny emojis on some mobile CSS cascades */
    font-size: 22px !important;
    width: 34px; height: 34px;
    padding: 0 !important;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .1s;
    line-height: 1;
}
.ca-react-emoji-btn:hover { transform: scale(1.35); }
.ca-react-emoji-btn.active { background: var(--ca-accent-l); }

/* Mobile: make the picker clear + tappable */
@media (max-width: 680px){
  .ca-react-picker{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 88px; /* above the reply bar */
    justify-content: space-around;
    padding: 10px 12px !important;
    border-radius: 18px;
    z-index: 999;
  }
  .ca-react-emoji-btn{
    width: 40px;
    height: 40px;
    font-size: 26px !important;
  }
}

.ca-reaction-counts { display: flex; gap: 4px; flex-wrap: wrap; }
.ca-reaction-count {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px !important; border-radius: 20px;
    border: 1.5px solid var(--ca-border); background: var(--ca-bg);
    cursor: pointer; font-size: .82em !important; line-height: 1;
    transition: all .15s;
}
.ca-reaction-count span { font-weight: 700 !important; color: var(--ca-text) !important; }
.ca-reaction-count:hover { border-color: var(--ca-primary); }
.ca-reaction-count.mine { background: var(--ca-accent-l); border-color: var(--ca-accent) !important; }

/* Images dans messages */
.ca-msg-images {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 !important;
}

/* ── Zone édition inline ─────────────────────────────────── */
.ca-msg-edit-zone { margin: 8px 0 4px !important; }

/* ── Barre de saisie fixe en bas ─────────────────────────── */
.ca-reply-bar {
    position: static;
    display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
    background: var(--ca-card);
    border-top: 1px solid var(--ca-border);
    padding: 14px 12px 12px !important;
}
/* Avatar */

/* Colonne réponse (flex-col) */
.ca-reply-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 0;
}
.ca-reply-top {
    display: flex; align-items: center; gap: 6px;
}
.ca-reply-top .ca-reply-bar-input {
    flex: 1;
}

.ca-reply-bar-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--ca-primary); color: white !important;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800 !important; font-size: .85em !important;
    overflow: hidden;
    transition: width .2s, opacity .2s, margin .2s;
}
/* Textarea */
.ca-reply-bar-input {
    flex: 1; min-width: 0;
    /* hauteur 100% gérée par JS */
    padding: 9px 14px !important; border-radius: 20px !important;
    border: 1.5px solid var(--ca-border) !important; background: var(--ca-bg) !important;
    font-size: .95em !important; font-family: var(--ca-font) !important;
    outline: none !important; resize: none !important; overflow: hidden !important;
    line-height: 1.45 !important; box-sizing: border-box !important;
    transition: height .1s, border-color .2s;
}
.ca-reply-bar-input:focus {
    border-color: var(--ca-primary); background: var(--ca-card);
}
/* Boutons action (📷 😄) */
.ca-reply-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ca-bg);
    border: 1.5px solid var(--ca-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    align-self: flex-start;
    transition: background .15s;
}

.ca-reply-action-btn:hover { background: var(--ca-border) !important; }
.ca-reply-sticker-btn { font-size: 19px !important; }

/* ── Mode étendu ─── */
.ca-reply-bar.is-expanded {
    flex-wrap: wrap;
    padding: 10px 12px 10px !important;
    align-items: flex-end;
}
.ca-reply-bar.is-expanded .ca-reply-bar-avatar {
    display: none;
}
.ca-reply-bar.is-expanded .ca-reply-bar-input {
    flex-basis: 100%;
    order: 1;
    min-height: 44px; overflow-y: hidden;
    border-radius: 14px;
    margin-bottom: 8px;
}
.ca-reply-bar.is-expanded .ca-reply-action-btn {
    order: 2;
}
.ca-reply-bar.is-expanded .ca-reply-send-btn {
    order: 3;
    margin-left: auto;
}

.ca-login-prompt { text-align: center; padding: 20px !important; }

/* Espace sous les messages pour la barre fixe */

/* Zones upload/sticker dans la discussion */


/* ── Zones upload générales ──────────────────────────────── */
.ca-image-upload-zone {
    background: var(--ca-card); border: 1.5px dashed var(--ca-border);
    border-radius: 12px; padding: 14px !important; margin: 8px 16px !important;
}
.ca-upload-header span { font-size: .85em !important; font-weight: 600 !important; }
.ca-upload-preview-item {
    position: relative; width: 72px; height: 72px;
    border-radius: 8px; overflow: hidden; border: 1.5px solid var(--ca-border);
}
.ca-upload-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.ca-upload-preview-remove {
    position: absolute; top: 2px; right: 2px;
    background: rgba(0,0,0,.6); color: white !important;
    border: none; border-radius: 50%; width: 18px; height: 18px;
    font-size: .7em !important; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
}

/* Sticker panel — règle dans section stickers */
.ca-sticker-msg {
    width: 100px; height: 100px; border-radius: 8px;
    display: block; margin: 4px 0 !important;
}
.ca-btn-sticker {
    background: linear-gradient(135deg, #f472b6, #a78bfa) !important;
    color: white !important; border: none !important;
}

/* ── PC — back-btn intégré au flow (pas de topbar sticky sur large) ──────── */
.ca-back-btn {
    display: none; /* remplacé par topbar */
}

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width: 641px) {
    /* Sur desktop, la barre de saisie n'est pas fixe */
    .ca-reply-bar {
        position: static !important;
        border-radius: var(--ca-radius);
        border: 1px solid var(--ca-border) !important;
        margin: 16px !important;
        box-shadow: var(--ca-shadow-l);
        padding: 12px 14px !important;
        flex-wrap: nowrap !important; /* pas de wrap sur desktop */
    }
    /* En mode étendu desktop : pas de flex-wrap non plus, input juste plus grand */
    .ca-reply-bar.is-expanded {
        flex-wrap: nowrap !important;
    }
    .ca-reply-bar.is-expanded .ca-reply-bar-avatar { display: flex !important; }
    .ca-reply-bar.is-expanded .ca-reply-bar-input {
        flex-basis: auto !important; order: 0 !important;
        /* Quick reply plus compact sur desktop */
        min-height: 44px !important;
        border-radius: 18px !important;
    }
    .ca-reply-bar.is-expanded .ca-reply-action-btn { order: 0 !important; }
    .ca-reply-bar.is-expanded .ca-reply-send-btn { order: 0 !important; margin-left: 0 !important; }
        #ca-forum-discussion .ca-image-upload-zone,
    #ca-forum-discussion .ca-sticker-zone {
        position: static !important; border-radius: 12px !important;
        box-shadow: none; max-height: none;
        margin: 0 16px 8px !important;
    }
    /* Le thème peut surcharger la hauteur des textarea : on force ici une hauteur compacte */
    .ca-forum-app .ca-reply-bar-input {
        border-radius: 20px !important;
    }
    .ca-msg-card { padding: 16px 20px 12px !important; }
    .ca-msg-img { max-width: 300px; max-height: 240px; }
    #ca-discussions-list { padding: 0 20px !important; }
    .ca-forum-toolbar { padding: 14px 20px 10px !important; }
    .ca-categories-bar { padding: 12px 20px 0; }
    .ca-form-card { margin: 0 20px 16px !important; }
    .ca-msg-pagination { padding-bottom: 30px !important; }
    .ca-forum-topbar { padding: 14px 20px !important; }
}

@media (max-width: 640px) {
    .ca-disc-row { padding: 12px 0 !important; }
    .ca-disc-title { font-size: .9em !important; }
    .ca-disc-cat-badge { width: 38px; height: 38px; font-size: 1.1em !important; margin-left: 8px !important; }
    .ca-msg-card-avatar { width: 38px; height: 38px; }
    .ca-msg-card-author { font-size: .88em !important; }
    .ca-msg-img { max-width: 160px; max-height: 140px; }
    .ca-form-card { margin: 0 12px 10px !important; }
    .ca-mod-menu { min-width: 185px !important; right: -4px !important; }
    .ca-page-btn { min-width: 32px; height: 32px; font-size: .8em !important; }
}

/* ========================
   BADGES
   ======================== */
.ca-badge-manager { padding: 20px !important; }
.ca-badge-manager-header { margin-bottom: 20px; }
.ca-badge-manager-header h2 { font-size: 1.3em; font-weight: 800; margin: 0 0 8px; color: var(--ca-primary); }
.ca-badge-manager-sub { color: var(--ca-muted) !important; font-size: .9em !important; margin: 0 !important; }
.ca-showcase-select {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--ca-gold-l); border: 1px solid var(--ca-gold);
    border-radius: 8px; padding: 10px 16px !important; margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
#ca-showcase-count { font-size: .9em; font-weight: 700; color: var(--ca-text); }

.ca-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.ca-badge-item {
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 10px !important; border-radius: var(--ca-radius);
    background: var(--ca-card); border: 2px solid var(--ca-border);
    text-align: center; position: relative; transition: all .2s;
    box-shadow: var(--ca-shadow-l);
}
.ca-badge-item.obtained:hover { transform: translateY(-3px); box-shadow: var(--ca-shadow); }
.ca-badge-item.ca-badge-locked { opacity: .45; filter: grayscale(1); }
.ca-badge-item.in-showcase { border-color: var(--ca-gold) !important; background: var(--ca-gold-l); }
.ca-badge-icon-wrap {
    width: 56px; height: 56px; border-radius: 50%;
    border: 3px solid var(--ca-border); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--ca-bg); margin-bottom: 8px; transition: border-color .2s;
}
.ca-badge-item.obtained .ca-badge-icon-wrap { border-color: var(--ca-gold) !important; }
.ca-badge-img { width: 100%; height: 100%; object-fit: cover; }
.ca-badge-emoji { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.6em !important; }
.ca-badge-name { font-size: .78em !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--ca-text) !important; }
.ca-badge-check { position: absolute; top: 6px; right: 6px; color: var(--ca-success) !important; font-size: .8em !important; font-weight: 800 !important; }
.ca-badge-lock  { position: absolute; top: 6px; right: 6px; font-size: .75em !important; color: var(--ca-muted) !important; }
.ca-badge-star  { position: absolute; top: 5px; left: 5px; font-size: .75em !important; }

/* ========================
   PROFIL
   ======================== */
.ca-profil { padding: 20px !important; }
.ca-profil-header {
    display: flex; gap: 20px; align-items: center;
    background: linear-gradient(135deg, var(--ca-primary), var(--ca-primary-l));
    color: white !important; border-radius: var(--ca-radius); padding: 24px !important; margin-bottom: 20px;
}
.ca-profil-initials { font-size: 1.8em !important; font-weight: 800 !important; color: white !important; }
.ca-profil-info h2 { font-size: 1.3em; font-weight: 800; margin: 0 0 12px; }
.ca-profil-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.ca-profil-showcase h3,
.ca-profil-allbadges h3 { font-size: 1em; font-weight: 700; color: var(--ca-primary); margin-bottom: 12px; }
.ca-showcase-badges { display: flex; gap: 12px; flex-wrap: wrap; }

/* ========================
   UTILITAIRES
   ======================== */
.ca-loading {
    text-align: center; padding: 48px 16px;
    color: var(--ca-muted) !important; font-size: .9em !important;
}
.ca-loading::before { content: '⟳'; display: block; font-size: 2em; margin-bottom: 8px; animation: caSpin 1.2s linear infinite; }
.ca-loading-sm { text-align: center; padding: 16px !important; color: var(--ca-muted) !important; font-size: .85em !important; }
.ca-loading--result { padding: 60px 24px !important; }
@keyframes caSpin { to { transform: rotate(360deg); } }

.ca-empty-state { text-align: center; padding: 48px 16px !important; }
.ca-empty-icon { font-size: 3em !important; margin-bottom: 12px; }
.ca-empty-state p { color: var(--ca-muted) !important; font-size: .95em !important; line-height: 1.6 !important; }

.ca-error { background: #fef2f2; color: #dc2626 !important; border: 1px solid #fecaca; border-radius: 8px; padding: 12px 16px !important; font-size: .9em !important; }
.ca-msg { padding: 10px 14px !important; border-radius: 8px; font-size: .88em !important; font-weight: 600 !important; display: none; }
.ca-msg--success { background: #f0fdf4; color: #166534 !important; border: 1px solid #bbf7d0; }
.ca-msg--error   { background: #fef2f2; color: #dc2626 !important; border: 1px solid #fecaca; }
.ca-msg--warning { background: #fffbeb; color: #92400e !important; border: 1px solid #fde68a; }

.ca-toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a2e35; color: white !important;
    padding: 10px 22px !important; border-radius: 50px;
    font-size: .88em !important; font-weight: 700 !important; opacity: 0; pointer-events: none;
    transition: all .3s; z-index: 999999; white-space: nowrap;
}

/* ========================
   RESPONSIVE
   ======================== */
@media (max-width: 640px) {
    .ca-quiz-grid { grid-template-columns: 1fr; padding: 16px !important; gap: 14px; }
    .ca-quiz-intro { padding: 20px 16px !important; }
    .ca-quiz-intro-meta { gap: 12px; }
    .ca-quiz-question { padding: 16px !important; }
    .ca-question-text { font-size: 1em !important; }
    .ca-resultat-header { flex-direction: column; text-align: center; gap: 12px; }
    .ca-score-circle { width: 80px; height: 80px; }
    .ca-score-val { font-size: 1.8em !important; }
    .ca-class-row { font-size: .8em !important; gap: 8px; }
    .ca-class-time { display: none; }
    .ca-modal-box { max-height: 100vh; border-radius: 16px 16px 0 0;
    padding: 10px !important;
}
    .ca-modal { align-items: flex-end; padding: 0 !important; }

    /* Forum responsive géré dans la section FORUM */

    .ca-badge-item { padding: 10px 6px !important; }
    .ca-badge-icon-wrap { width: 44px; height: 44px; }
    .ca-badge-name { font-size: .7em !important; }

    .ca-profil-header { flex-direction: column; text-align: center; padding: 20px 16px !important; }
    .ca-profil-stats { justify-content: center; }
    .ca-profil-avatar { width: 70px; height: 70px; }

    .ca-app { border-radius: 8px; }
    .ca-page-hero { border-radius: 8px 8px 0 0; }
    .ca-page-hero h1 { font-size: 1.5em; }
    .ca-hero-icon { font-size: 2.2em !important; }
}

/* ========================
   BADGES — Redesign v1.3
   ======================== */

/* Page globale */
.ca-badges-page { padding: 0 0 40px !important; }

/* Hero stats */
.ca-badges-hero {
    background: linear-gradient(135deg, var(--ca-primary) 0%, #1a6b7a 100%);
    border-radius: var(--ca-radius); padding: 24px 20px !important; margin-bottom: 24px !important;
    display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
    box-shadow: 0 6px 24px rgba(16,75,89,.3);
}
.ca-badges-hero-main { display: flex; gap: 16px; align-items: center; flex: 1; min-width: 200px; }
.ca-badges-hero-score {

    background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.25);
    border-radius: 16px; padding: 10px 16px !important; text-align: center; backdrop-filter: blur(4px);
    display: flex; align-items: baseline; gap: 3px;
}
.ca-badges-score-val { font-size: 2.2em !important; font-weight: 900 !important; color: #fff !important; line-height: 1 !important; }
.ca-badges-score-sep { font-size: 1.2em !important; color: rgba(255,255,255,.5) !important; }
.ca-badges-score-tot { font-size: 1em !important; color: rgba(255,255,255,.65) !important; font-weight: 700 !important; }
.ca-badges-hero-txt h2 { color: white; font-size: 1.1em; margin: 0 0 4px; }
.ca-badges-hero-txt p  { color: rgba(255,255,255,.8) !important; font-size: .82em !important; margin: 0 !important; line-height: 1.4 !important; }

.ca-badges-hero-nivs { display: flex; gap: 8px; flex-wrap: wrap; }
.ca-hero-niv {

    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px; padding: 8px 12px !important; display: flex; align-items: center; gap: 8px;
    min-width: 100px; transition: all .2s;
}
.ca-hero-niv.done { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4) !important; }
.ca-hero-niv-icon { font-size: 1.2em !important; }
.ca-hero-niv-val  { font-size: .78em !important; color: white !important; font-weight: 700 !important; white-space: nowrap; }
.ca-hero-niv-bar  { flex: 1; height: 4px; background: rgba(255,255,255,.2); border-radius: 2px; overflow: hidden; min-width: 40px; }
.ca-hero-niv-bar div { height: 100%; background: rgba(255,255,255,.75); border-radius: 2px; transition: width .8s ease; }

/* Vitrine */
.ca-badges-showcase {
    background: white; border: 2px solid #f0d060;
    border-radius: var(--ca-radius); box-shadow: 0 4px 20px rgba(212,169,106,.15);
    display: block !important;
    padding: 10px !important;
    margin: 20px 0 !important;
}
.ca-showcase-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ca-showcase-title { font-size: 1em !important; font-weight: 800 !important; color: var(--ca-primary) !important; display: flex; align-items: center; gap: 8px; }
.ca-showcase-title span { font-size: 1.1em !important; }
.ca-showcase-count {
 font-size: .8em !important; font-weight: 700 !important; color: #8d6e08 !important; background: #fffde7; padding: 3px 10px !important; border-radius: 20px; border: 1px solid #f0d060 !important;}
.ca-showcase-hint {
 font-size: .8em !important; color: var(--ca-muted) !important; margin: 0 0 14px !important; line-height: 1.5 !important; background: #fafaf0; border-left: 3px solid #f0d060; padding: 8px 12px !important; border-radius: 0 6px 6px 0 !important;}

/* Slots vitrine */
.ca-showcase-slots { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ca-slot {
    width: 90px; min-height: 90px; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; position: relative; transition: all .2s;
}
.ca-slot--empty {
    border: 2px dashed var(--ca-border); background: var(--ca-bg);
    color: var(--ca-muted) !important; font-size: .75em !important; gap: 3px;
}
.ca-slot--empty .ca-slot-plus { font-size: 1.8em !important; font-weight: 300 !important; color: var(--ca-border) !important; line-height: 1 !important; }
.ca-slot--empty .ca-slot-label { font-size: .7em !important; color: var(--ca-muted) !important; }
.ca-slot--filled {
    border: 2px solid var(--niv-b, #f0d060);
    background: var(--niv-bg, #fffae8);
    cursor: pointer; overflow: hidden;
}
.ca-slot--filled:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.ca-slot--filled:hover .ca-slot-remove { opacity: 1; }
.ca-slot img, .ca-slot-emoji { width: 38px; height: 38px; object-fit: cover; border-radius: 50%; font-size: 2em !important; display: flex; align-items: center; justify-content: center; }
.ca-slot-name { font-size: .62em !important; font-weight: 700 !important; text-align: center; line-height: 1.2 !important; padding: 0 4px !important; max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--niv-c, var(--ca-primary)) !important; }
.ca-slot-remove {
    position: absolute; top: 4px; right: 4px; width: 18px; height: 18px;
    background: rgba(239,68,68,.85); color: white !important; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .72em !important; font-weight: 900 !important; opacity: 0; transition: opacity .15s;
}

.ca-showcase-save-bar { display: flex; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid var(--ca-border); }

/* Sections par niveau */
.ca-badges-collections { display: flex; flex-direction: column; gap: 20px; }
.ca-badges-section {
    background: white; border: 1.5px solid var(--niv-b, var(--ca-border));
    border-radius: var(--ca-radius); overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.ca-badges-section-header {
    background: linear-gradient(to right, var(--niv-bg, #f9f9f9), white);
    border-bottom: 1.5px solid var(--niv-b, var(--ca-border));
    padding: 12px 16px !important; display: flex; align-items: center; gap: 10px;
}
.ca-badges-section-header > span:first-child { font-size: 1.4em; }
.ca-section-label { font-weight: 800 !important; color: var(--niv-c, var(--ca-primary)) !important; font-size: .9em !important; text-transform: uppercase; letter-spacing: .06em; flex: 1; }
.ca-section-count {
 font-size: .78em !important; color: var(--ca-muted) !important; background: var(--ca-bg); padding: 3px 10px !important; border-radius: 20px; font-weight: 700 !important;}
.ca-section-done  { font-size: .78em !important; color: #16a34a !important; background: #dcfce7; padding: 3px 10px !important; border-radius: 20px; font-weight: 700 !important; }

/* Grille badges */
.ca-badges-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px; padding: 16px;
}

/* Card badge individuelle */
.ca-badge-card {
    border-radius: 14px; border: 1.5px solid var(--ca-border);
    background: var(--ca-bg); overflow: hidden; transition: all .2s;
    position: relative;
}
.ca-badge-card.obtained {
    border-color: var(--niv-b, var(--ca-gold)) !important; background: var(--niv-bg, white);
}
.ca-badge-card.obtained:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--niv-glow, rgba(0,0,0,.1));
    border-color: var(--niv-c, var(--ca-primary));
}
.ca-badge-card.in-showcase {
    outline: 3px solid #f59e0b; outline-offset: 2px;
}
.ca-badge-card.locked {
    opacity: .45; filter: grayscale(60%);
}
.ca-badge-card.locked:hover { transform: none; box-shadow: none; opacity: .6; }

/* Effet diamant */
.ca-badge-card.obtained.ca-badges-section .ca-badges-section[style*="diamant"] .ca-badge-card.obtained {
    animation: caDiamantPulse 3s ease-in-out infinite;
}
@keyframes caDiamantPulse {
    0%,100% { box-shadow: 0 2px 8px var(--niv-glow, rgba(59,130,246,.2)); }
    50%      { box-shadow: 0 4px 20px var(--niv-glow, rgba(59,130,246,.5)); }
}

.ca-badge-card-inner {

    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 14px 8px 8px !important; position: relative; gap: 4px;
}
.ca-badge-star-overlay {
    position: absolute; top: 4px; right: 5px; font-size: .75em !important; opacity: .8;
}
.ca-badge-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; position: relative; }
.ca-badge-icon img { width: 68px; height: 68px; object-fit: cover; border-radius: 50%; }
.ca-badge-emoji-big { font-size: 2.8em !important; line-height: 1 !important; display: block; text-align: center; }
.ca-badge-obtained-check {
    position: absolute; bottom: 6px; right: 6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--niv-c, var(--ca-primary)); color: white !important;
    font-size: .65em !important; font-weight: 900 !important; display: flex; align-items: center; justify-content: center;
}
.ca-badge-lock-icon { font-size: .9em !important; }

.ca-badge-card-footer { padding: 0 8px 10px !important; text-align: center; }
.ca-badge-card-name { font-size: .72em !important; font-weight: 700 !important; color: var(--ca-text) !important; line-height: 1.3 !important; margin-bottom: 5px; }
.ca-badge-niv-pill {
 font-size: .62em !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 20px; border: 1px solid; display: inline-block; letter-spacing: .03em !important;}

/* Loading / Error */
.ca-badges-loading {
    display: flex; align-items: center; justify-content: center;
    min-height: 200px;
}
.ca-badges-loading-inner { text-align: center; color: var(--ca-muted) !important; }
.ca-badges-loading-spinner {
    width: 40px; height: 40px; border: 3px solid var(--ca-border);
    border-top-color: var(--ca-primary) !important; border-radius: 50%;
    animation: spin 0.8s linear infinite; margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ca-badges-loading-inner p { font-size: .85em !important; }
.ca-badges-error { text-align: center; padding: 40px 20px !important; color: var(--ca-muted) !important; }
.ca-badges-error span { font-size: 2em !important; display: block; margin-bottom: 8px; }

/* Profil public badges */
.ca-profil-page { padding: 0 0 40px !important; }
.ca-profil-hero {
    display: flex; gap: 16px; align-items: center;
    background: linear-gradient(135deg, var(--ca-primary), #1a6b7a);
    border-radius: var(--ca-radius); padding: 20px !important; margin-bottom: 20px;
    color: white !important; box-shadow: 0 4px 16px rgba(16,75,89,.25);
}
.ca-profil-avatar {
    width: 70px; height: 70px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    border: 3px solid rgba(255,255,255,.4); background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
}
.ca-profil-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ca-profil-init { font-size: 1.8em !important; font-weight: 900 !important; color: white !important; }
.ca-profil-heroinfo h2 { color: white; margin: 0 0 8px; font-size: 1.15em; }
.ca-profil-stats-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ca-pstat { display: flex; flex-direction: column; align-items: center; }
.ca-pstat strong { font-size: 1.1em !important; color: white !important; }
.ca-pstat span { font-size: .7em !important; color: rgba(255,255,255,.75) !important; }

.ca-profil-showcase { margin-bottom: 20px; }
.ca-profil-showcase h3 { font-size: .95em; color: var(--ca-primary); margin: 0 0 12px; font-weight: 700; }
.ca-showcase-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ca-profil-collection h3 { font-size: .95em; color: var(--ca-primary); margin: 0 0 16px; font-weight: 700; }

/* Avatar dans les messages forum */
.ca-avatar {
    border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800 !important; color: white !important; user-select: none;
}
.ca-msg-avatar-wrap { flex-shrink: 0; }

/* Popup lapins amélioré */
.ca-popup-lapin {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px !important; background: var(--ca-bg); border-radius: 8px;
    margin-bottom: 4px; font-size: .82em !important;
}
.ca-popup-lapin-icon { font-size: .9em !important; flex-shrink: 0; }
.ca-popup-lapin-race { color: var(--ca-muted) !important; font-size: .85em !important; }
.ca-popup-lapin-age  { color: var(--ca-muted) !important; font-size: .85em !important; margin-left: auto; white-space: nowrap; }
.ca-popup-empty-small { font-size: .8em !important; color: var(--ca-muted) !important; font-style: italic; padding: 4px 0 !important; }

/* Responsive badges */
@media (max-width: 640px) {
    .ca-badges-hero { flex-direction: column; gap: 14px; padding: 16px !important; }
    .ca-badges-hero-main { width: 100%; }
    .ca-badges-hero-nivs { width: 100%; }
    .ca-hero-niv { flex: 1; min-width: 80px; }
    .ca-badges-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px !important; }
    .ca-badge-card-inner { padding: 10px 6px 6px !important; }
    .ca-badge-icon { width: 52px; height: 52px; }
    .ca-badge-icon img { width: 48px; height: 48px; }
    .ca-badge-emoji-big { font-size: 2em !important; }
    .ca-showcase-slots { gap: 8px; }
    .ca-slot { width: 76px; min-height: 76px; }
    .ca-profil-hero { flex-direction: column; text-align: center; }
    .ca-profil-stats-row { justify-content: center; }
}

/* ========================
   STATUTS VISUELS (Admin / VIP / Éleveur)
   ======================== */
/* Messages avec statut */
.ca-message.ca-statut-admin   { background: #e8f4fd; border-color: #90caf9 !important; }
.ca-message.ca-statut-vip     { background: #fffde7; border-color: #f9e04b !important; }
.ca-message.ca-statut-eleveur { background: #f1f8e9; border-color: #a5d6a7 !important; }

/* Pseudo stylisé */
.ca-statut-pseudo.admin   { color: #1565c0 !important; font-weight: 600 !important; letter-spacing: -.01em; }
.ca-statut-pseudo.vip     { background: linear-gradient(90deg, #d4980a, #f0c040, #d4980a); -webkit-background-clip: text; -webkit-text-fill-color: transparent !important; font-weight: 600 !important; }
.ca-statut-pseudo.eleveur { color: #2e7d32 !important; font-weight: 600 !important; }




.ca-statut-tag.ca-statut-admin   { background: #e3f2fd; color: #1565c0 !important; border: 1px solid #90caf9; }
.ca-statut-tag.ca-statut-vip     { background: linear-gradient(135deg, #fffde7, #fff8e1); color: #8d6e08 !important; border: 1px solid #f9e04b; }
.ca-statut-tag.ca-statut-eleveur { background: #e8f5e9; color: #2e7d32 !important; border: 1px solid #a5d6a7; }
.ca-statut-tag.ca-statut-membre  { background: #eef2f5; color: #5b6b7a !important; border: 1px solid #d7e0e7; }

/* Disc row avec auteur statut */
.ca-disc-pinned { border-left: 3px solid var(--ca-gold); }

/* ========================
   POPUP POSTEUR
   ======================== */
.ca-poster-popup {
    position: absolute; z-index: 99000;
    background: white; border: 1px solid var(--ca-border);
    border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.18);
    width: 280px; overflow: hidden; animation: caPopupIn .2s ease;
}
@keyframes caPopupIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.ca-popup-loading { padding: 20px !important; text-align: center; color: var(--ca-muted) !important; font-size: .85em !important; }
.ca-popup-header {
    display: flex; gap: 12px; align-items: center;
    padding: 14px !important; background: linear-gradient(135deg, var(--ca-primary), var(--ca-primary-l));
    color: white !important;
}
.ca-popup-avatar {
    width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.ca-popup-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.ca-popup-avatar-init { font-size: 1.3em !important; font-weight: 800 !important; color: white !important; }
.ca-popup-info { flex: 1; min-width: 0; }
.ca-popup-pseudo { font-size: .95em !important; font-weight: 700 !important; margin-bottom: 4px; }
.ca-popup-stats { display: flex; gap: 10px; font-size: .78em !important; opacity: .85; }
.ca-popup-section { padding: 12px 14px !important; border-top: 1px solid var(--ca-border); }
.ca-popup-section-title { font-size: .75em !important; font-weight: 700 !important; color: var(--ca-muted) !important; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.ca-popup-lapins { display: flex; flex-direction: column; gap: 5px; }
.ca-popup-lapin { display: flex; justify-content: space-between; align-items: center; font-size: .83em !important; }
.ca-popup-lapin-name { font-weight: 700 !important; color: var(--ca-primary) !important; }
.ca-popup-lapin-info { color: var(--ca-muted) !important; font-size: .9em !important; }
.ca-popup-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ca-popup-badge {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    width: 43px; border-radius: 8px; padding: 4px 2px !important; text-align: center;
    border: 1px solid var(--niv-border, var(--ca-border));
    background: var(--niv-bg, var(--ca-bg));
}
.ca-popup-badge img { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; display: block; }
.ca-popup-badge span:first-child { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; border-radius: 50%; }
.ca-popup-badge-name { display: none; }

/* ========================
   IMAGE QUESTION QUIZ
   ======================== */
.ca-question-img {
    border-radius: 10px; overflow: hidden; margin-bottom: 14px;
    max-height: 220px; display: flex; align-items: center; justify-content: center;
    background: var(--ca-bg);
}
.ca-question-img img { max-width: 100%; max-height: 220px; object-fit: contain; border-radius: 10px; }
.ca-quiz-logged { font-size: .85em !important; color: var(--ca-muted) !important; margin-bottom: 8px; }

/* ========================
   PAGE CLASSEMENTS GÉNÉRAUX
   ======================== */
.ca-classements-generaux { padding: 20px !important; }
.ca-classements-tabs {
    display: flex; gap: 8px;
    overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px 14px;
    margin-bottom: 6px;
    scroll-snap-type: x proximity;
}
.ca-classements-tabs::-webkit-scrollbar { display: none; }
.ca-cls-tab {
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 8px 16px !important; border-radius: 50px !important;
    background: var(--ca-bg); border: 1.5px solid var(--ca-border);
    cursor: pointer; font-size: .85em; font-weight: 600; transition: all .2s;
    white-space: nowrap;
}
.ca-cls-tab:hover { border-color: var(--ca-primary); color: var(--ca-primary); }
.ca-cls-tab.active { background: var(--ca-primary); color: white !important; border-color: var(--ca-primary) !important; }
.ca-empty-classement { text-align: center; color: var(--ca-muted) !important; font-size: .88em !important; padding: 16px !important; }

/* Bouton classements dans hero */
.ca-classements-hero-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.15); color: white !important;
    border: 2px solid rgba(255,255,255,.3); border-radius: 50px;
    padding: 8px 18px !important; font-size: .88em !important; font-weight: 700 !important; cursor: pointer;
    transition: all .2s; text-decoration: none; margin-top: 14px;
}
.ca-classements-hero-btn:hover { background: rgba(255,255,255,.25); }

/* Badge manager amélioré */
.ca-showcase-bar { border-color: var(--ca-gold) !important; position: relative; }

/* Profil forum amélioré */
.ca-member-activity { padding: 16px !important; }
.ca-member-section-title { font-size: .9em !important; font-weight: 700 !important; color: var(--ca-primary) !important; margin: 16px 0 10px !important; padding-bottom: 6px; border-bottom: 2px solid var(--ca-accent); }
.ca-member-disc-item, .ca-member-msg-item {
    padding: 10px 14px !important; background: var(--ca-card); border: 1px solid var(--ca-border);
    border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all .15s;
}
.ca-member-disc-item:hover, .ca-member-msg-item:hover { border-color: var(--ca-primary); transform: translateX(3px); }
.ca-member-disc-title { font-size: .9em !important; font-weight: 700 !important; margin-bottom: 3px; }
.ca-member-disc-meta, .ca-member-msg-meta { font-size: .75em !important; color: var(--ca-muted) !important; }
.ca-member-msg-preview { font-size: .85em !important; color: var(--ca-text) !important; margin: 4px 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-member-vote { font-size: .78em !important; color: var(--ca-success) !important; font-weight: 700 !important; }

/* Timeline communauté */
.ca-timeline { padding: 16px !important; }
.ca-timeline-item {
    display: flex; gap: 12px; padding: 10px 0 !important;
    border-bottom: 1px solid var(--ca-border);
}
.ca-timeline-item:last-child { border-bottom: none; }
.ca-timeline-icon { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1em !important; }
.ca-timeline-icon.quiz     { background: #fff0ea; }
.ca-timeline-icon.forum    { background: #e8f4fd; }
.ca-timeline-icon.badge    { background: var(--ca-gold-l); }
.ca-timeline-icon.lapin    { background: #f1f8e9; }
.ca-timeline-icon.temo     { background: #f3e8ff; }
.ca-timeline-body { flex: 1; min-width: 0; }
.ca-timeline-text { font-size: .88em !important; line-height: 1.4 !important; }
.ca-timeline-text strong { color: var(--ca-primary) !important; }
.ca-timeline-time { font-size: .73em !important; color: var(--ca-muted) !important; margin-top: 2px; }

/* Amélioration hamburger (espace adoptants) */
@media (max-width: 768px) {
    .ca-poster-popup { width: 250px; }
}

/* ========================
   TOOLTIP BADGE (clic sur mini-badge)
   ======================== */
.ca-badge-tooltip {
    position: absolute; z-index: 99999;
    background: white; border: 2px solid var(--ca-border);
    border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.18);
    padding: 14px 16px !important; text-align: center; width: 140px;
    animation: caPopupIn .18s ease;
}
.ca-badge-tip-img {
    width: 100px; height: 100px; border-radius: 50%;
    overflow: hidden; margin: 0 auto 8px !important;
    display: flex; align-items: center; justify-content: center;
 
}
.ca-badge-tip-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ca-badge-tip-titre { font-size: .82em !important; font-weight: 800 !important; line-height: 1.3 !important; margin-bottom: 4px; }
.ca-badge-tip-niv   { font-size: .72em !important; color: var(--ca-muted) !important; }

/* Mini badge agrandis (dans messages) */
.ca-mini-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    cursor: pointer; transition: transform .15s;
    vertical-align: middle;
}
.ca-mini-badge:hover { transform: scale(1.2); z-index: 2; position: relative; }
.ca-mini-badge img { width: 100%; height: 100%; }

/* Couleurs mini-badge par niveau */
.ca-mini-badge.niveau-bronze  { border-color: #e8c498 !important; }
.ca-mini-badge.niveau-argent  { border-color: #b8cdd8 !important; }
.ca-mini-badge.niveau-or      { border-color: #f0d060 !important; }
.ca-mini-badge.niveau-diamant { border-color: #93c5fd !important; }

/* Auth wall forum */
.ca-forum-auth-wall {

    text-align: center; padding: 60px 24px; max-width: 400px; margin: 40px auto;
    background: white; border: 1px solid var(--ca-border); border-radius: var(--ca-radius);
    box-shadow: var(--ca-shadow);
}
.ca-auth-wall-icon { font-size: 3em !important; margin-bottom: 16px; }
.ca-forum-auth-wall h2 { font-size: 1.2em; color: var(--ca-primary); margin: 0 0 10px; }
.ca-forum-auth-wall p  { font-size: .88em !important; color: var(--ca-muted) !important; margin: 0 0 20px !important; line-height: 1.5 !important; }

/* ========================
   INFOBULLE DESCRIPTION BADGE (ℹ️)
   ======================== */
.ca-badge-info-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: transparent; border: 1.5px solid var(--ca-border);
    color: var(--ca-muted) !important; font-size: .65em !important; font-style: normal;
    cursor: pointer; position: absolute; top: 5px; left: 5px;
    transition: all .15s; z-index: 2; font-weight: 700;
    line-height: 1;
}
.ca-badge-info-tooltip {
    position: absolute; z-index: 99999;
    background: #1e293b; color: white !important;
    border-radius: 10px; padding: 10px 12px !important;
    font-size: .78em !important; line-height: 1.5 !important; max-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    pointer-events: none;
    animation: caPopupIn .15s ease;
    white-space: normal; text-align: left;
}
.ca-badge-info-tooltip::before {
    content: ''; position: absolute; top: -6px; left: 16px;
    border: 6px solid transparent;
    border-bottom-color: #1e293b; border-top: none;
}

/* ========================
   BADGE INFO BOUTON + INFOBULLE
   ======================== */
.ca-badge-info-btn {
    position: absolute; top: 4px; left: 5px;
    width: 20px; height: 20px; border-radius: 50%;
    border: 1.5px solid var(--niv-b, var(--ca-border));
    background: white; color: var(--niv-c, var(--ca-primary)) !important;
    font-size: .58em !important; font-weight: 900 !important; font-style: normal;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s; z-index: 2;
    padding: 0 !important; line-height: 1 !important;
}
.ca-badge-info-btn:hover { background: var(--niv-c, var(--ca-primary)); color: white; transform: scale(1.1); }
.ca-badge-card.locked .ca-badge-info-btn { opacity: .6; }

.ca-badge-info-tip {
    position: absolute; z-index: 99990;
    max-width: 220px; background: #1e293b; color: white;
    font-size: .78em !important; line-height: 1.45 !important; padding: 8px 12px !important;
    border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25);
    pointer-events: none;
    animation: caPopupIn .15s ease;
}
.ca-badge-info-tip::before {
    content: ''; position: absolute; top: -5px; left: 12px;
    width: 10px; height: 10px; background: #1e293b;
    transform: rotate(45deg); border-radius: 2px;
}

/* Badge mystère — masquer la description dans la card */
.ca-badge-card[data-critere="secret_carotte"] .ca-badge-info-btn { display: none; }

/* Bouton espace adoptants dans le header forum */
.ca-forum-header-actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ca-btn-espace-adoptants {

    font-size: .78em !important; font-weight: 700 !important; color: white !important;
    border: 2px solid rgba(255,255,255,.7); border-radius: 20px;
    padding: 8px 18px !important; text-decoration: none; white-space: nowrap !important;
    transition: all .2s; background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px); flex-shrink: 0;
}
.ca-btn-espace-adoptants:hover {
    background: white; color: var(--ca-primary);
    border-color: white;
}

/* Barres de progression dans les badges */
.ca-badge-progress-bar {

    width: 100%; height: 5px; background: var(--ca-border);
    border-radius: 99px; margin-top: 6px; overflow: hidden;
}
.ca-badge-progress-bar-fill {
    height: 100%; border-radius: 99px; background: var(--niv-c, var(--ca-primary));
    transition: width .4s ease;
}
.ca-badge-progress-label {

    font-size: .62em !important; color: var(--ca-muted) !important; margin-top: 3px; text-align: center !important;
}

/* ========================
   CLASSEMENT GÉNÉRAL
   ======================== */
.ca-cls-table--general thead th { font-size: .7em !important; text-transform: uppercase; letter-spacing: .05em; }
.ca-cls-parfait { font-size: .85em !important; letter-spacing: -.05em; }
.ca-cls-general-header { padding: 8px 0 12px !important; }
.ca-cls-general-subtitle { font-size: .75em !important; color: var(--ca-muted) !important; font-style: italic; }

/* Onglet général mis en avant */
.ca-cls-tab--general {

    background: linear-gradient(135deg, var(--ca-gold, #d4a96a) 0%, #f0c060 100%) !important;
    color: #7a4800 !important;
    border-color: #d4a96a !important;
    font-weight: 800 !important;
}
.ca-cls-tab--general.active {
    background: linear-gradient(135deg, var(--ca-gold, #d4a96a) 0%, #f0c060 100%) !important;
    color: #7a4800 !important;
    box-shadow: 0 3px 12px rgba(212,169,106,.35);
}

/* ========================
   DESCRIPTION CATÉGORIE
   ======================== */
.ca-cat-description {
    margin: 8px 16px 0 !important;
    padding: 10px 14px !important;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-left: 3px solid var(--ca-primary);
    border-radius: 0 8px 8px 0;
    font-size: .84em !important;
    color: var(--ca-text) !important;
    line-height: 1.5;
}

/* ========================
   FORUM SUGGESTIONS — VOTE
   ======================== */
.ca-disc-row--suggest {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 !important;
    overflow: hidden;
}
.ca-disc-row--suggest .ca-disc-body {
    flex: 1;
    padding: 12px 14px !important;
    min-width: 0;
}
.ca-sugg-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 10px !important;
    background: var(--ca-bg);
    border-right: 1px solid var(--ca-border);
    flex-shrink: 0;
    min-width: 52px;
}
.ca-sugg-vote-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em !important;
    padding: 3px !important;
    border-radius: 50%;
    transition: background .15s, transform .1s;
    line-height: 1;
    opacity: .6;
}
.ca-sugg-vote-btn:hover { background: rgba(0,0,0,.07); transform: scale(1.15); opacity: 1; }
.ca-sugg-vote-btn.voted { opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
.ca-sugg-score {
    font-size: .8em !important;
    font-weight: 800 !important;
    min-width: 20px;
    text-align: center;
}
.ca-disc-replies-inline {
    font-size: .78em !important;
    color: var(--ca-muted) !important;
}

/* ========================
   CLASSEMENT GÉNÉRAL — améliorations
   ======================== */
.ca-cls-general-subtitle {
    font-size: .75em !important;
    color: var(--ca-muted) !important;
    font-style: italic;
    padding: 8px 4px 12px !important;
}
.ca-cls-you {
    font-size: .72em !important;
    color: var(--ca-primary) !important;
    font-weight: 700 !important;
    background: rgba(var(--ca-primary-rgb,16,104,123),.08);
    padding: 1px 6px !important;
    border-radius: 8px;
}
.ca-cls-me {
    background: rgba(var(--ca-primary-rgb,16,104,123),.06) !important;
    border-color: rgba(var(--ca-primary-rgb,16,104,123),.2) !important;
}
.ca-cls-parfait-stars {
    font-size: .8em !important;
    margin-left: 4px;
}

/* Mobile suggestions */
@media(max-width:600px) {
    .ca-sugg-votes { min-width: 44px; padding: 10px 6px !important; }
    .ca-sugg-vote-btn { font-size: .95em !important; }
    .ca-sugg-score { font-size: .75em !important; }
    .ca-disc-row--suggest .ca-disc-body { padding: 10px !important; }
}

/* ============================================================
   ÉDITION DE MESSAGES
   ============================================================ */
.ca-msg-actions-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px;
    /* Laisser .ca-msg-time gérer le "push" à droite.
       Sinon, l'OP/actions partent souvent sur une nouvelle ligne. */
    margin-left: 8px !important;
    flex-shrink: 0;
}

/* Garder le badge OP collé au bloc de droite */
.ca-op-tag { margin-left: 6px !important; white-space: nowrap; flex-shrink: 0; }
.ca-edit-btn {
    background: none !important;
    border: none !important;
    cursor: pointer;
    font-size: .85em !important;
    padding: 3px 6px !important;
    border-radius: 6px;
    opacity: .5;
    transition: opacity .15s, background .15s;
    color: var(--ca-muted) !important;
}
.ca-edit-btn:hover { opacity: 1; background: var(--ca-bg) !important; }
.ca-msg-edit-zone { margin: 8px 0 !important; }
.ca-edit-textarea {
    width: 100% !important;
    border: 1.5px solid var(--ca-primary) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    font-size: .9em !important;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
}
.ca-edit-btns {
    display: flex !important;
    gap: 8px;
    margin-top: 6px !important;
}
.ca-btn-cancel {
    background: var(--ca-bg) !important;
    color: var(--ca-muted) !important;
    border: 1px solid var(--ca-border) !important;
}
.ca-msg-edited {
    font-size: .72em !important;
    color: var(--ca-muted) !important;
    font-style: italic;
    margin-left: 4px;
}

/* ============================================================
   IMAGES DANS LES MESSAGES
   ============================================================ */
.ca-msg-images {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px !important;
}
.ca-msg-img {
    max-width: 200px;
    max-height: 180px;
    border-radius: 8px !important;
    object-fit: cover;
    border: 1px solid var(--ca-border) !important;
    cursor: pointer;
    transition: transform .2s;
}
.ca-msg-img:hover { transform: scale(1.03); }

/* ============================================================
   ZONE UPLOAD IMAGES
   ============================================================ */
.ca-reply-actions {
    display: flex !important;
    gap: 8px;
    align-items: center !important;
    margin-top: 8px !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
}
@media(max-width:600px) {
    .ca-reply-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .ca-reply-actions .ca-btn {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        font-size: .82em !important;
        padding: 8px 12px !important;
    }
    .ca-reply-actions .ca-btn-primary {
        flex: 1 1 100% !important;
        margin-top: 4px !important;
    }
}
.ca-btn-img {
    background: var(--ca-bg) !important;
    border: 2px solid var(--ca-border) !important;
    color: var(--ca-text) !important;
}
.ca-btn-img:hover { background: var(--ca-border) !important; }
.ca-image-upload-zone {
    margin: 8px 0 12px !important;
    background: var(--ca-bg) !important;
    border: 1.5px dashed var(--ca-border) !important;
    border-radius: 12px !important;
    padding: 14px !important;
}
.ca-upload-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: .84em !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    color: var(--ca-text) !important;
}
.ca-upload-close {
    background: none !important;
    border: none !important;
    cursor: pointer;
    font-size: 1.1em !important;
    padding: 2px 6px !important;
    border-radius: 4px;
    color: var(--ca-muted) !important;
    transition: background .15s;
}
.ca-upload-close:hover { background: var(--ca-border) !important; }
.ca-upload-previews {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px !important;
}
.ca-upload-preview {
    position: relative !important;
    width: 80px;
    height: 80px;
}
.ca-upload-preview img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
    border-radius: 8px !important;
    border: 1px solid var(--ca-border) !important;
}
.ca-preview-remove {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: #ef4444 !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    font-size: .7em !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.ca-preview-ok { position: absolute !important; bottom: 2px !important; right: 2px !important; font-size: .8em !important; }
.ca-preview-pending { position: absolute !important; bottom: 2px !important; right: 2px !important; font-size: .8em !important; color: var(--ca-muted) !important; }
.ca-upload-label { display: inline-block; cursor: pointer; }
.ca-upload-btn {
    background: var(--ca-primary) !important;
    color: white !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    font-size: .84em !important;
    font-weight: 600 !important;
    transition: opacity .15s;
}
.ca-upload-btn:hover { opacity: .85; }
/* Fix avatar reply */
.ca-reply-avatar--img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    overflow: hidden;
    flex-shrink: 0;
}

/* ============================================================
   MODÉRATION ADMIN
   ============================================================ */
.ca-mod-wrap {
    position: relative !important;
}
.ca-mod-btn {
    background: none !important;
    border: none !important;
    cursor: pointer;
    font-size: .85em !important;
    padding: 3px 6px !important;
    border-radius: 6px;
    opacity: .45;
    color: var(--ca-muted) !important;
    transition: opacity .15s, background .15s;
}
.ca-mod-btn:hover { opacity: 1; background: #fef3c7 !important; }
.ca-mod-menu {
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    background: white !important;
    border: 1px solid var(--ca-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    z-index: 200;
    min-width: 200px;
    overflow: hidden;
}
.ca-mod-menu button {
    display: block !important;
    width: 100% !important;
    text-align: left;
    background: none !important;
    border: none !important;
    padding: 10px 14px !important;
    cursor: pointer;
    font-size: .84em !important;
    color: var(--ca-text) !important;
    border-bottom: 1px solid var(--ca-bg) !important;
    transition: background .12s;
}
.ca-mod-menu button:last-child { border-bottom: none !important; }
.ca-mod-menu button:hover { background: var(--ca-bg) !important; }
.ca-mod-menu .ca-mod-danger { color: #ef4444 !important; }
.ca-mod-menu .ca-mod-danger:hover { background: #fef2f2 !important; }

/* ============================================================
   INFO / RÈGLEMENT FORUM
   ============================================================ */
.ca-forum-hero-btns {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
}
.ca-forum-info-btn {
    background: rgba(255,255,255,.15) !important;
    border: 1.5px solid rgba(255,255,255,.3) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 1.2em !important;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .2s;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ca-forum-info-btn:hover { background: rgba(255,255,255,.3) !important; }
.ca-forum-info-modal-box {
    max-width: 560px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px !important;
}
.ca-forum-info-modal-box h3 { font-size: 1.15em !important; font-weight: 700 !important; margin-bottom: 12px !important; color: var(--ca-primary) !important; }
.ca-forum-info-modal-box h4 { font-size: .95em !important; font-weight: 700 !important; margin-bottom: 8px !important; }
.ca-forum-info-intro { font-size: .9em !important; line-height: 1.6 !important; color: var(--ca-text) !important; }
.ca-forum-reglement-text { font-size: .86em !important; line-height: 1.6 !important; color: var(--ca-text) !important; }
.ca-forum-reglement-text p { margin-bottom: 8px !important; }
.ca-forum-reglement-text ul, .ca-forum-reglement-text ol { padding-left: 18px !important; margin-bottom: 8px !important; }

/* ============================================================
   QUIZ RUBANS DE STATUT
   ============================================================ */
.ca-quiz-card { position: relative !important; overflow: hidden !important; }
.ca-quiz-ribbon {
    position: absolute !important;
    top: 14px !important;
    right: -28px !important;
    transform: rotate(45deg) !important;
    width: 120px !important;
    text-align: center;
    font-size: .66em !important;
    font-weight: 700 !important;
    padding: 4px 0 !important;
    z-index: 2;
    letter-spacing: .03em;
    pointer-events: none;
    white-space: nowrap;
}
.ca-ribbon--success { background: #22c55e !important; color: white !important; }
.ca-ribbon--progress { background: #f59e0b !important; color: white !important; }
.ca-ribbon--fail    { background: #ef4444 !important; color: white !important; }

/* ============================================================
   TOAST MOBILE — FIX TAILLE
   ============================================================ */
.ca-toast {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #1e293b !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 24px !important;
    font-size: .84em !important;
    font-weight: 500 !important;
    max-width: min(340px, calc(100vw - 32px));
    width: auto !important;
    text-align: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    word-break: break-word;
}
.ca-toast.visible { opacity: 1 !important; pointer-events: auto; }
.ca-toast--success { background: #16a34a !important; }
.ca-toast--warning { background: #d97706 !important; }
.ca-toast--error   { background: #dc2626 !important; }

@media(max-width:600px) {
    .ca-toast {
        font-size: .82em !important;
        padding: 9px 16px !important;
        max-width: calc(100vw - 24px) !important;
        bottom: 12px !important;
    }
    .ca-mod-menu { min-width: 180px !important; right: -4px !important; }
    .ca-msg-img  { max-width: 140px !important; max-height: 130px !important; }
    .ca-edit-btns { flex-wrap: wrap; }
    .ca-forum-info-modal-box { padding: 16px !important; max-height: 90vh !important; }
}

/* ============================================================
   DEEP LINK — SURBRILLANCE MESSAGE CIBLÉ
   ============================================================ */
@keyframes ca-highlight-fade {
    0%   { background: #fef9c3; box-shadow: 0 0 0 3px #fde68a; }
    100% { background: transparent; box-shadow: none; }
}
.ca-msg--highlight {
    animation: ca-highlight-fade 2.5s ease-out forwards;
    border-radius: 10px;
}

/* ============================================================
   VOTE SUGGESTION DANS LE HEADER DE DISCUSSION
   ============================================================ */
.ca-disc-detail-votes {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    margin-top: 12px !important;
    padding: 10px 14px !important;
    background: linear-gradient(135deg, rgba(16,75,89,.06), rgba(16,75,89,.03)) !important;
    border: 1px solid var(--ca-border) !important;
    border-left: 3px solid var(--ca-primary) !important;
    border-radius: 10px !important;
    flex-wrap: wrap;
    gap: 10px;
}
.ca-disc-detail-votes-label {
    font-size: .82em !important;
    font-weight: 600 !important;
    color: var(--ca-primary) !important;
    flex-shrink: 0;
}
.ca-sugg-votes--header {
    flex-direction: row;
    align-items: center !important;
    gap: 8px;
    padding: 0 !important;
    background: transparent !important;
    min-width: 0;
}
.ca-sugg-votes--header .ca-sugg-vote-btn {
    width: 36px; height: 32px;
    border-radius: 8px !important;
    font-size: 1em !important;
    border: 1.5px solid var(--ca-border) !important;
    background: var(--ca-card) !important;
    display: flex; align-items: center; justify-content: center;
}
.ca-sugg-votes--header .ca-sugg-score {
    font-size: 1.05em !important;
    font-weight: 800 !important;
    min-width: 24px;
    text-align: center;
}
/* Mobile : empiler label + votes sur 2 lignes */
@media(max-width: 600px) {
    .ca-disc-detail-votes {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .ca-disc-detail-votes-label { font-size: .8em !important; }
}

/* ============================================================
   EMBED [lapins:TOKEN] DANS LES MESSAGES FORUM  (v1.9.5)
   ============================================================ */
.ca-lapins-embed {
    margin: 12px 0;
    border: 1.5px solid var(--ca-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.ca-lapins-embed-loading { padding: 14px 18px; color: var(--ca-muted, #6b7280); font-size: .85em; }
.ca-lapins-embed-empty   { padding: 12px 16px; font-size: .82em; color: var(--ca-muted, #6b7280); }
.ca-lapins-embed-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(135deg, #104b59, #1a6b7c);
    color: #fff;
    font-size: .88em;
}
.ca-lapins-embed-owner { font-weight: 600; }
.ca-lapins-embed-count { font-size: .8em; opacity: .8; background: rgba(255,255,255,.15); padding: 2px 8px; border-radius: 20px; }
.ca-lapins-embed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 12px;
    background: #f8fafc;
}
.ca-lapins-embed-card {
    background: #fff; border-radius: 10px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    font-size: .82em;
}
.ca-lapins-embed-photo-wrap { position: relative; aspect-ratio: 1; background: #f1f5f9; overflow: hidden; }
.ca-lapins-embed-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-lapins-embed-nophoto { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2em; color: #94a3b8; }
.ca-lapins-carousel { position: relative; width: 100%; height: 100%; }
.ca-lapins-car-prev, .ca-lapins-car-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.4); border: none; color: #fff;
    font-size: 1.1em; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2; padding: 0; transition: background .15s;
}
.ca-lapins-car-prev:hover, .ca-lapins-car-next:hover { background: rgba(0,0,0,.65); }
.ca-lapins-car-prev { left: 4px; }
.ca-lapins-car-next { right: 4px; }
.ca-lapins-car-dots { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 2; }
.ca-lapins-car-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .15s; }
.ca-lapins-car-dot.active { background: #fff; }
.ca-lapins-embed-sexe {
    position: absolute; bottom: 4px; right: 4px;
    background: rgba(255,255,255,.9); border-radius: 50%;
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    font-size: .75em;
}
.ca-lapins-embed-info { padding: 8px; }
.ca-lapins-embed-name { font-weight: 700; color: #1e293b; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-lapins-embed-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.ca-lec {
    font-size: .75em; background: #f1f5f9; color: #475569;
    padding: 2px 6px; border-radius: 20px; white-space: nowrap;
}
@media(max-width:480px) {
    .ca-lapins-embed-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   STICKERS FORUM  (v1.9.6)
   ============================================================ */
.ca-btn-sticker {
    background: linear-gradient(135deg, #f9a8d4, #c084fc) !important;
    color: #fff !important;
    border: 2px solid transparent !important;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .18s, transform .12s;
}
.ca-btn-sticker:hover { opacity: .88; transform: scale(1.04); }

.ca-sticker-panel {
    position: relative;
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--ca-border, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    margin: 10px 0;
    overflow: hidden;
    z-index: 200;
    animation: ca-panel-in .18s ease-out;
}
@keyframes ca-panel-in {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ca-sticker-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f9a8d4, #c084fc);
    color: #fff;
    font-weight: 600;
    font-size: .9em;
}
.ca-sticker-close {
    background: none; border: none; color: #fff;
    font-size: 1.1em; cursor: pointer; line-height: 1; padding: 2px 6px;
    border-radius: 4px; opacity: .85;
}
.ca-sticker-close:hover { opacity: 1; background: rgba(255,255,255,.2); }
.ca-sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
    padding: 4px 0;
    max-height: 200px;
    overflow-y: auto;
}
.ca-sticker-thumb {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px;
    cursor: pointer;
    transition: border-color .15s, transform .12s, background .15s;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1;
}
.ca-sticker-thumb:hover {
    border-color: #c084fc;
    background: #fdf4ff;
    transform: scale(1.1);
}
.ca-sticker-thumb img {
    width: 52px; height: 52px;
    object-fit: contain;
    display: block;
}
.ca-sticker-empty { padding: 16px; color: var(--ca-muted, #6b7280); font-size: .85em; text-align: center; }
.ca-sticker-loading { padding: 16px; color: var(--ca-muted, #6b7280); font-size: .85em; text-align: center; }

/* Sticker affiché dans un message */
.ca-sticker-msg {
    width: 52px; height: 52px;
    object-fit: contain;

    /* Affichage en ligne : plusieurs stickers côte à côte */
    display: inline-block;
    vertical-align: middle;
    margin: 4px 6px 4px 0;

    border-radius: 4px;
    cursor: default;
}
.ca-sticker-placeholder { font-size: 2em; }

@media(max-width:600px) {
    .ca-sticker-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; }
    .ca-sticker-thumb img { width: 44px; height: 44px; }
}

/* Espace cohérent entre stickers consécutifs */
.ca-msg-content img.ca-sticker-msg + img.ca-sticker-msg { margin-left: 6px; }

/* ── Édition message — images existantes avec suppression ── */
.ca-edit-existing-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--ca-bg);
    border-radius: 8px;
    border: 1px solid var(--ca-border);
}
.ca-edit-img-wrap {
    position: relative;
    display: inline-block;
}
.ca-edit-img-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1.5px solid var(--ca-border);
    display: block;
}
.ca-edit-img-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: none;
    cursor: pointer;
    font-size: .7em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}
.ca-edit-img-del:hover { background: #dc2626; }

/* ══════════════════════════════════════════════════
   QUIZ LISTE — Filtres de tri (v1.10.9)
   ══════════════════════════════════════════════════ */

@keyframes caFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ca-quiz-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--ca-bg);
    border-bottom: 1px solid var(--ca-border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.ca-quiz-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--ca-border);
    border-radius: 999px;
    background: white;
    cursor: pointer;
    font-size: .85em;
    font-weight: 500;
    color: var(--ca-text);
    transition: all .2s;
    white-space: nowrap;
}
.ca-quiz-filter-btn:hover {
    border-color: var(--ca-primary);
    color: var(--ca-primary);
    background: rgba(var(--ca-primary-rgb, 16,75,89), .05);
}
.ca-quiz-filter-btn.active {
    background: var(--ca-primary);
    border-color: var(--ca-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.ca-quiz-filter-btn .ca-qf-icon { font-size: 1em; }
.ca-quiz-filter-btn .ca-qf-count {
    background: rgba(0,0,0,.1);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: .8em;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
}
.ca-quiz-filter-btn.active .ca-qf-count { background: rgba(255,255,255,.25); }

.ca-quiz-filter-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--ca-muted);
}
.ca-quiz-filter-empty .ca-empty-icon { font-size: 2.5em; margin-bottom: 10px; }

@media (max-width: 480px) {
    .ca-quiz-filters { padding: 12px; gap: 6px; }
    .ca-quiz-filter-btn { padding: 7px 10px; font-size: .8em; }
    .ca-quiz-filter-btn .ca-qf-label { display: none; }
    .ca-quiz-filter-btn .ca-qf-count { font-size: .85em; }
}

/* ── Classements tabs — mobile compact ── */
@media (max-width: 480px) {
    .ca-cls-tab {
        padding: 7px 10px !important;
        font-size: .78em !important;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ca-cls-tab--general {
        max-width: none;
        flex-shrink: 0;
    }
}

/* ── Fix bouton .ca-btn-espace-adoptants hover sur page quiz ── */
.ca-btn-espace-adoptants:hover, .ca-classements-hero-btn:hover {
    background: rgba(255,255,255,.25) !important;
    color: white !important;
    border-color: rgba(255,255,255,.9) !important;
    text-decoration: none !important;
}

/* ══════════════════════════════════════════════════
   Fix: texte barré causé par le thème WP (v1.10.11)
   ══════════════════════════════════════════════════ */
.ca-app s, .ca-app del,
.ca-quiz-section s, .ca-quiz-section del,
.mlea-quiz-mes-scores s, .mlea-quiz-mes-scores del {
    text-decoration: none !important;
}

/* ── Fix hover button mobile (tactile) ── */
@media (hover: none) {
    .ca-classements-hero-btn:hover,
    .ca-btn-espace-adoptants:hover {
        background: rgba(255,255,255,.15) !important;
        color: white !important;
        border-color: rgba(255,255,255,.3) !important;
    }
    .ca-classements-hero-btn:active,
    .ca-btn-espace-adoptants:active {
        background: rgba(255,255,255,.35) !important;
        color: white !important;
    }
}

/* ══════════════════════════════════════════════════════════
   BADGE DIFFICULTÉ QUIZ (v1.10.12)
   ══════════════════════════════════════════════════════════ */

.ca-quiz-card-img { position: relative; }
.ca-diff-badge {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: .70em;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 8px 8px 0 0;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 -1px 4px rgba(0,0,0,.15);
    z-index: 2;
}
.ca-diff--facile   { background: #22c55e; color: white; }
.ca-diff--moyen    { background: #f59e0b; color: white; }
.ca-diff--difficile { background: #ef4444; color: white; }

/* XenForo-ish tweaks */
.ca-disc-row{
    border-radius: 10px;
    background: var(--ca-card);
    border: 1px solid var(--ca-border);
    box-shadow: none;
}
.ca-disc-row:hover{ border-color: rgba(16,75,89,.35); }
.ca-msg-card{
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid var(--ca-border);
}

/* =====================================================
   XenForo-like layout (liste sujets + messages)
   ===================================================== */

/* --- Liste des sujets (threads) --- */
.ca-thread-row{
  display:grid;
  /* votes | avatar | icône | contenu | stats | dernier msg */
  grid-template-columns: 60px 44px 48px 1fr 86px 220px;
  gap: 12px;
  align-items:center;
  padding: 12px 14px;
  border: 1px solid var(--ca-border);
  border-radius: 16px;
  background: var(--ca-card);
  cursor: pointer;
  margin: 10px 0;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ca-thread-row:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.12);
}

/* Threads "normaux" : pas de colonne votes => on évite le gros espace à gauche */
.ca-thread-row:not(.ca-thread-suggestion){
  /* avatar | icône | contenu | stats | dernier msg */
  grid-template-columns: 44px 48px 1fr 86px 220px;
}
.ca-thread-row:not(.ca-thread-suggestion) .ca-thread-votes{
  display:none !important;
}

.ca-thread-avatar{width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
.ca-thread-votes button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
}
.ca-thread-pinned{ background: rgba(212,169,106,.08); }
/* Suggestions : légère teinte + micro-bordure (pas de gros bandeau) */
.ca-thread-suggestion{ background: rgba(16,75,89,.03); border-left: 2px solid rgba(16,75,89,.35); }

/* Colonne votes (suggestions) */
.ca-thread-votes{display:flex;flex-direction:column;align-items:center;justify-content:center;gap: 6px;}
.ca-thread-votes--empty{opacity:0;pointer-events:none;}
.ca-thread-row .ca-sugg-vote-btn{
  width:30px;height:30px;
  border-radius: 12px;
  border: 1px solid var(--ca-border);
  background: var(--ca-bg);
  cursor:pointer;
}
.ca-thread-row .ca-sugg-score{font-weight: 800; font-size: 14px; line-height: 1;}

.ca-thread-icon{
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(16, 75, 89, .08);
  font-size: 28px;
}
.ca-thread-title{ font-weight: 800; line-height: 1.25; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-thread-replies-badge{
  display:none;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--ca-border);
  border-radius: 999px;
  background: rgba(16,75,89,.03);
  color: var(--ca-muted);
  font-size: 12px;
  font-weight: 800;
  vertical-align: middle;
}
.ca-thread-meta{ display:flex; flex-wrap:wrap; align-items:center; gap: 8px; margin-top: 4px; color: var(--ca-muted); font-size: 12.5px; overflow: hidden; }
.ca-thread-authorline{ display:inline-flex; align-items:center; gap: 8px; white-space: nowrap; min-width: 0; overflow: hidden; max-width: 100%; }
.ca-thread-authorline .ca-thread-author{ white-space: nowrap; }
.ca-thread-authorline .ca-thread-role{ white-space: nowrap; }
.ca-thread-author{ color: var(--ca-text); font-weight: 600; }
.ca-thread-role{ display:inline-flex; align-items:center; }
.ca-thread-role .ca-statut-tag{ display:inline-flex; margin:0; }
.ca-thread-cat{ padding: 2px 8px; border: 1px solid var(--ca-border); border-radius: 999px; background: rgba(16,75,89,.03); }
.ca-thread-time{ opacity: .9; }

.ca-thread-stats{ text-align:center; color: var(--ca-muted); }
.ca-thread-stat strong{ display:block; font-size: 15px; color: var(--ca-text); }
.ca-thread-stat span{ display:block; font-size: 11px; }

.ca-thread-last{ display:flex; align-items:center; gap: 10px; justify-content:flex-start; }
.ca-thread-last-meta{ min-width:0; }
.ca-thread-last-user{ font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow:visible; text-overflow: ellipsis; }
.ca-thread-last-time{ font-size: 12px; color: var(--ca-muted); }

@media (max-width: 980px){
  /* Mobile : liste threads compacte & lisible */
  .ca-thread-row{
    grid-template-columns: 40px 1fr !important;
    grid-template-areas:
      "avatar main"
      "avatar last";
    gap: 10px;
    padding: 12px;
  }

  /* Sur mobile on retire les colonnes desktop */
  .ca-thread-votes,
  .ca-thread-icon,
  .ca-thread-stats{
    display:none !important;
  }

  /* Petit badge "rép." à côté du titre */
  .ca-thread-replies-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .ca-thread-main{
    grid-area:main;
  }

  .ca-thread-avatar{
    grid-area:avatar;
    width:40px;
    height:40px;
  }

  .ca-thread-last{
    grid-area:last;
    border-top: 1px dashed rgba(0,0,0,.10);
    padding-top: 8px;
    width: 100%;
    display:flex;
    align-items:flex-start;
    gap: 10px;
  }

  .ca-thread-last-avatar{
    flex: 0 0 auto;
  }
  .ca-thread-last-meta{
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  /* Evite le pseudo tronqué ("f.") et évite le wrap lettre-par-lettre */
  .ca-thread-last-user{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    word-break: keep-all;
    overflow-wrap: normal;
    line-height: 1.2;
  }

  .ca-thread-last-time{
    white-space: nowrap !important;
  }
}

/* ====== Indication visuelle "avatar cliquable" (thread + posts) ====== */
.ca-avatar-btn{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer}
.ca-avatar-btn:after{
  content:'i';
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:14px;
  height:14px;
  border-radius:999px;
  background:var(--ca-card);
  border:1px solid var(--ca-border);
  font-size:10px;
  line-height:14px;
  text-align:center;
  color:var(--ca-muted);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  opacity:.9;
}
.ca-avatar-btn:hover{transform:translateY(-1px)}
.ca-post-avatar{cursor:pointer;}

/* --- Messages (posts) --- */
.ca-messages-list{ display:flex; flex-direction:column; gap: 10px; }

.ca-post{
  display:grid;
  grid-template-columns: 220px 1fr;
  border: 1px solid var(--ca-border);
  background: var(--ca-card);
  border-radius: 10px;
  overflow: hidden;
}
.ca-post--op{ border-color: rgba(212,169,106,.55); }

.ca-post-user{
  padding: 14px;
  border-right: 1px solid var(--ca-border);
  background: rgba(16,75,89,.03);
}
.ca-post-avatar{ display:flex; justify-content:center; margin-bottom: 10px; }
.ca-post-user-name{ text-align:center; font-weight: 900; }
.ca-post-user-role{ display:flex; justify-content:center; margin-top: 6px; }
.ca-post-user-badges{ display:flex; justify-content:center; gap: 6px; margin-top: 10px; flex-wrap:wrap; }
.ca-post-user-stats{ margin-top: 12px; border-top: 1px dashed rgba(16,75,89,.18); padding-top: 10px; display:flex; justify-content:center; }
.ca-post-stat{ display:flex; gap: 8px; font-size: 12px; color: var(--ca-muted); }
.ca-post-stat .v{ color: var(--ca-text); font-weight: 800; }

.ca-post-body{ padding: 0; }
.ca-post-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ca-border);
  background: rgba(16,75,89,.02);
  gap: 12px;
}
.ca-post-date,.ca-post-edited{ font-size: 12px; color: var(--ca-muted); }
.ca-post-header-right{ display:flex; align-items:center; gap: 8px; }

.ca-post-content{ padding: 12px; line-height: 1.55; font-size: 18px; }
.ca-post-footer{ padding: 10px 12px; border-top: 1px solid var(--ca-border); display:flex; gap: 8px; align-items:center; }

@media (max-width: 980px){
  .ca-post{ grid-template-columns: 1fr; }
  /* Header utilisateur mobile : grille stable (évite les badges qui écrasent le bloc stats) */
  .ca-post-user{
    border-right:none;
    border-bottom: 1px solid var(--ca-border);
    padding: 12px;
    display:grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "avatar name badges"
      "avatar role badges"
      "avatar stats stats";
    column-gap: 12px;
    row-gap: 4px;
    align-items:center;
  }
  .ca-post-avatar{ grid-area: avatar; margin:0; justify-content:flex-start; }
  .ca-post-user-name{ grid-area: name; text-align:left; }
  .ca-post-user-role{ grid-area: role; justify-content:flex-start; margin-top: 0; }
  .ca-post-user-badges{
    grid-area: badges;
    justify-content:flex-end;
    margin-top: 0;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    max-width: 160px;
  }
  .ca-post-user-stats{
    grid-area: stats;
    /* Sur mobile, la ligne "Messages XX" prend trop de place */
    display:none !important;
  }
}





/* ===== Forum – 5 badges mobile ===== */
@media (max-width: 980px){

  .ca-post-user-badges{
    display:flex;
    flex-wrap:nowrap;
    gap:4px;
    align-items:center;
  }

.ca-post-user-badges img{
  max-width:32px;
  height:auto;
}

}
















/* ===== Badges forum – taille desktop ===== */

.ca-post-user-badges img{
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.ca-post-user-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}




/* ===== Popup badges – mobile ===== */
@media (max-width: 980px){

  .ca-popup-badge{
    width: 34px;          /* au lieu de 48 */
    padding: 4px 2px !important;
    gap: 2px;
    border-radius: 6px;
  }

  .ca-popup-badge img{
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  .ca-popup-badge span{
    font-size: 9px;       /* texte sous l’icône */
    line-height: 1.1;
  }

}


/* ===== Liste des sujets – mobile : cacher "dernier message" ===== */
@media (max-width: 980px){

  .ca-thread-last{
    display: none !important;
  }

}




/* Tags statuts inline */
.ca-statut-tag {
font-size: .72em !important;
    padding: 2px 8px !important; border-radius: 10px;
    margin-left: 5px; letter-spacing: .03em; vertical-align: middle;
}

/* Desktop : on remet le style "comme avant" (plus lisible) */
@media (min-width: 981px){
  .ca-statut-tag{
    font-size: .92em !important;
    padding: 3px 10px !important;
    border-radius: 14px;
    letter-spacing: .02em;
    margin-left: 6px;
  }
}





/* ===================================================
   Statut dans les messages (colonne profil)
   Version compacte PC + mobile
   =================================================== */

/* PC */
@media (min-width: 981px){
  .ca-post-user .ca-statut-tag{
    padding: 2px 8px !important;
    border-radius: 10px !important;
font-size: .62em !important;
    letter-spacing: .02em;
    margin-left: 0;
  }
}

/* Mobile */
@media (max-width: 980px){
  .ca-post-user .ca-statut-tag{
    font-size: .54em !important;
    padding: 1px 6px !important;
    border-radius: 8px !important;
    letter-spacing: .02em;
    margin-left: 0;
  }
}



/* Bouton Envoyer — alignement propre */
.ca-reply-send-btn {
    height: 40px;
    padding: 0 16px !important;
    border-radius: 20px;
    align-self: flex-start;
    background: var(--ca-primary);
    color: white !important;
    border: none;

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

    font-size: .9em !important;
    font-weight: 700 !important;
    line-height: 1;

    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .15s;
}

/* Mobile : cacher avatar + boutons desktop, montrer bouton + */
@media (max-width: 640px) {
    .ca-reply-bar-avatar--desktop { display: none !important; }
    .ca-reply-btn--desktop { display: none !important; }
    .ca-reply-btn--mobile { display: flex !important; }
    .ca-zone--desktop { display: none !important; }
}
/* Desktop : cacher bouton +, montrer boutons séparés */
@media (min-width: 641px) {
    .ca-reply-btn--mobile { display: none !important; }
    .ca-reply-btn--desktop { display: flex !important; }
    /* ca-media-panel supprimé */
}


/* Onglets médias inline (mobile) */
.ca-reply-media-tabs {
    display: flex;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    background: none;
}
.ca-media-tab {
    flex: 1;
    padding: 7px 6px;
    background: var(--ca-bg);
    border: 1.5px solid var(--ca-border);
    border-radius: 20px;
    font-size: 12px; font-weight: 700;
    color: var(--ca-muted);
    cursor: pointer;
    transition: all .15s;
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
.ca-media-tab.active {
    background: var(--ca-primary);
    border-color: var(--ca-primary);
    color: #fff;
}
.ca-media-tab-content {
    padding: 10px 0 0;
    overflow-y: auto;
    max-height: 220px;
}
.ca-media-tab-content[style*="display:none"],
.ca-media-tab-content[style*="display: none"] {
    display: none !important;
}

.ca-reply-send-btn:hover {
    opacity: .88;
}
/* Libellé bouton Envoyer/OK selon viewport */
.ca-send-mobile  { display: none; }
.ca-send-desktop { display: inline; }
@media (max-width: 640px) {
    .ca-send-mobile  { display: inline; }
    .ca-send-desktop { display: none; }
}

/* =====================================================
   AMÉLIORATIONS MODERNES 2025
   ===================================================== */

/* ============================
   1. EFFET SHINE SUR BADGES
   ============================ */
.ca-badge-card {
    position: relative;
    overflow: hidden;
}

.ca-badge-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.ca-badge-card:hover::before {
    transform: translateX(100%);
}

/* Animation pulse pour nouveaux badges */
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.ca-badge-card.new {
    animation: badgePulse 2s ease-in-out infinite;
}

/* ============================
   2. SKELETON LOADERS
   ============================ */
.ca-skeleton {
    background: linear-gradient(
        90deg,
        var(--ca-bg) 0%,
        #e2e8f0 50%,
        var(--ca-bg) 100%
    );
    background-size: 200% 100%;
    animation: skeleton 1.5s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton pour card quiz */
.ca-quiz-card-skeleton {
    height: 320px;
    background: var(--ca-card);
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius);
    padding: 0;
    overflow: hidden;
}

.ca-quiz-card-skeleton .ca-skeleton-img {
    height: 140px;
    margin-bottom: 16px;
}

.ca-quiz-card-skeleton .ca-skeleton-title {
    height: 20px;
    width: 70%;
    margin: 0 16px 8px;
}

.ca-quiz-card-skeleton .ca-skeleton-desc {
    height: 14px;
    width: 100%;
    margin: 0 16px 4px;
}

.ca-quiz-card-skeleton .ca-skeleton-desc:last-of-type {
    width: 85%;
}

/* ============================
   3. TOASTS NOTIFICATIONS
   ============================ */
.ca-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    pointer-events: none;
}

/* Mobile: afficher les toasts en bas (plus visible, surtout avec la barre de réponse) */
@media (max-width: 680px){
  .ca-toast-container{
    top: auto;
    right: 12px;
    left: 12px;
    bottom: 86px; /* au-dessus de la reply bar */
    max-width: none;
  }
  .ca-toast{ width: 100%; }
}

.ca-toast {
    background: var(--ca-card);
    border: 1px solid var(--ca-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    animation: toastSlideIn 0.3s ease;
    pointer-events: auto;
}

@keyframes toastSlideIn {
    from { 
        opacity: 0; 
        transform: translateX(100%); 
    }
}

@keyframes toastSlideOut {
    to { 
        opacity: 0; 
        transform: translateX(100%); 
    }
}

.ca-toast.removing {
    animation: toastSlideOut 0.3s ease forwards;
}

.ca-toast-icon {
    font-size: 1.5em;
    flex-shrink: 0;
    line-height: 1;
}

.ca-toast-content {
    flex: 1;
}

.ca-toast-title {
    font-weight: 700;
    font-size: 0.95em;
    margin-bottom: 4px;
    color: var(--ca-text);
}

.ca-toast-message {
    font-size: 0.85em;
    color: var(--ca-muted);
    line-height: 1.4;
    margin: 0;
}

.ca-toast-close {
    background: none;
    border: none;
    font-size: 1.2em;
    color: var(--ca-muted);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
}

.ca-toast-close:hover {
    background: var(--ca-bg);
    color: var(--ca-text);
}

/* Types de toast */
.ca-toast.success { 
    border-left: 4px solid #22c55e; 
}
.ca-toast.success .ca-toast-icon { color: #22c55e; }

.ca-toast.info { 
    border-left: 4px solid #3b82f6; 
}
.ca-toast.info .ca-toast-icon { color: #3b82f6; }

.ca-toast.warning { 
    border-left: 4px solid #f97316; 
}
.ca-toast.warning .ca-toast-icon { color: #f97316; }

.ca-toast.error { 
    border-left: 4px solid #ef4444; 
}
.ca-toast.error .ca-toast-icon { color: #ef4444; }

/* ============================
   4. PROGRESS BAR QUIZ
   ============================ */
.ca-quiz-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--ca-bg);
    z-index: 9999;
}

.ca-quiz-progress-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--ca-accent),
        var(--ca-primary)
    );
    transition: width 0.4s ease;
    position: relative;
    overflow: hidden;
}

.ca-quiz-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.3),
        transparent
    );
    animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100px); }
    100% { transform: translateX(calc(100vw + 100px)); }
}

/* ============================
   5. BOUTONS AMÉLIORÉS
   ============================ */
.ca-btn-primary {
    position: relative;
    overflow: hidden;
}

.ca-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(255,255,255,0.3) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s;
}

.ca-btn-primary:hover::before {
    opacity: 1;
}

.ca-btn-primary:active {
    transform: scale(0.98);
}

/* État loading */
.ca-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.ca-btn-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================
   6. AMÉLIORATION QUIZ CARDS
   ============================ */
.ca-quiz-card-img {
    position: relative;
}

/* Badge difficulté sur l'image */
.ca-quiz-difficulty {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 700;
    color: var(--ca-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ca-quiz-difficulty.facile { 
    color: #16a34a;
    background: rgba(220, 252, 231, 0.95);
}

.ca-quiz-difficulty.moyen { 
    color: #f97316;
    background: rgba(255, 237, 213, 0.95);
}

.ca-quiz-difficulty.difficile { 
    color: #dc2626;
    background: rgba(254, 226, 226, 0.95);
}

/* ============================
   7. EFFET PARALLAX HERO
   ============================ */
.ca-page-hero {
    overflow: hidden;
}

.ca-page-hero::before {
    transform-origin: center;
    transition: transform 0.3s ease-out;
}

.ca-page-hero:hover::before {
    transform: scale(1.05);
}

/* Particule flottante */
.ca-page-hero::after {
    content: '🐰';
    position: absolute;
    font-size: 4em;
    opacity: 0.08;
    right: 5%;
    bottom: -10%;
    transform: rotate(-15deg);
    animation: float 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-15deg); }
    50% { transform: translateY(-20px) rotate(-12deg); }
}

/* ============================
   8. RESPONSIVE MOBILE
   ============================ */
@media (max-width: 768px) {
    .ca-toast-container {
        top: 16px;
        right: 16px;
        left: 16px;
        max-width: none;
    }
    
    .ca-quiz-difficulty {
        font-size: 0.7em;
        padding: 3px 10px;
    }
}

/* ============================
   9. SMOOTH SCROLL
   ============================ */
html {
    scroll-behavior: smooth;
}

/* ============================
   10. FOCUS STATES (accessibilité)
   ============================ */
*:focus-visible {
    outline: 2px solid var(--ca-accent);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline-color: var(--ca-accent);
}

/* =====================================================
   HERO HEADER FORUM v2.0
   ===================================================== */

/* Hero avec boutons intégrés */
.ca-page-hero--forum {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 24px 24px 24px 72px !important; /* Espace pour le bouton menu */
}

/* Bouton menu hamburger dans le hero */
.ca-forum-menu-btn {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
    z-index: 10;
}

.ca-forum-menu-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.05);
}

.ca-forum-menu-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* Bouton retour (quand en discussion) */
.ca-forum-back-btn {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
    z-index: 10;
}

.ca-forum-back-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) translateX(-2px);
}

/* Contenu du hero (icône + texte) */
.ca-forum-hero-content {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 200px;
}

.ca-forum-hero-content .ca-hero-icon {
    font-size: 2.2em !important;
    margin-bottom: 0;
    line-height: 1;
}

.ca-forum-hero-content h1 {
    font-size: 1.5em;
    margin: 0 0 4px;
    font-weight: 800;
    color: white;
}

.ca-forum-hero-content p {
    font-size: 0.9em;
    margin: 0;
    opacity: 0.85;
    color: white;
}

/* Actions du hero (boutons ℹ️ 🐰) */
.ca-forum-hero-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ca-hero-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    color: white;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
    font-weight: 600;
    font-size: 0.9em;
}

.ca-hero-action-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.ca-hero-action-btn:active {
    transform: translateY(0);
}

.ca-hero-action-icon {
    font-size: 1.2em;
    line-height: 1;
}

.ca-hero-action-label {
    font-size: 0.95em;
    white-space: nowrap;
}

/* ============================
   RESPONSIVE MOBILE
   ============================ */
@media (max-width: 768px) {
    .ca-page-hero--forum {
        padding: 20px 16px 20px 64px !important;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ca-forum-menu-btn,
    .ca-forum-back-btn {
        left: 12px;
        width: 36px;
        height: 36px;
    }
    
    .ca-forum-hero-content {
        width: 100%;
    }
    
    .ca-forum-hero-content .ca-hero-icon {
        font-size: 1.8em !important;
    }
    
    .ca-forum-hero-content h1 {
        font-size: 1.3em;
    }
    
    .ca-forum-hero-content p {
        font-size: 0.85em;
    }
    
    .ca-forum-hero-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    /* Labels cachés sur très petit écran */
    .ca-hero-action-label {
        display: none;
    }
    
    .ca-hero-action-btn {
        padding: 10px 12px;
        min-width: 44px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .ca-page-hero--forum {
        padding: 16px 12px 16px 56px !important;
    }
    
    .ca-forum-hero-content h1 {
        font-size: 1.1em;
    }
    
    .ca-forum-hero-content p {
        font-size: 0.8em;
    }
    
    .ca-forum-hero-actions {
        gap: 8px;
    }
}

/* ============================
   SUPPRIMER L'ANCIENNE TOPBAR
   ============================ */
.ca-forum-topbar {
    display: none !important;
}

/* =====================================================
   FIX MOBILE BADGES & QUIZ v1.12.1
   ===================================================== */

/* Fix 1 : Barres de progression badges qui dépassent */
@media (max-width: 768px) {
    .ca-hero-niv {
        min-width: 0 !important;
        flex: 1 1 calc(50% - 4px); /* 2 colonnes sur mobile */
        max-width: calc(50% - 4px);
    }
    
    .ca-hero-niv-bar {
        min-width: 30px !important;
        max-width: 60px;
    }
    
    .ca-hero-niv-val {
        font-size: 0.7em !important;
    }
    
    /* Ajuster le padding pour éviter le débordement */
    .ca-hero-niv {
        padding: 6px 8px !important;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    /* Encore plus compact sur très petit écran */
    .ca-hero-niv {
        padding: 5px 6px !important;
        gap: 4px;
        font-size: 0.9em;
    }
    
    .ca-hero-niv-icon {
        font-size: 1em !important;
    }
    
    .ca-hero-niv-val {
        font-size: 0.65em !important;
    }
    
    .ca-hero-niv-bar {
        min-width: 25px !important;
        max-width: 50px;
        height: 3px;
    }
}

/* Fix 2 : Boutons filtres quiz qui passent sur 2 lignes */
@media (max-width: 480px) {
    .ca-quiz-filters {
        padding: 10px;
        gap: 6px;
        overflow-x: auto;
        flex-wrap: nowrap; /* Empêcher le wrap, forcer scroll horizontal */
        -webkit-overflow-scrolling: touch;
    }
    
    .ca-quiz-filter-btn {
        padding: 6px 10px;
        font-size: 0.75em;
        flex-shrink: 0; /* Empêcher la réduction */
        min-width: fit-content;
    }
    
    .ca-quiz-filter-btn .ca-qf-icon {
        font-size: 1.1em;
    }
    
    .ca-quiz-filter-btn .ca-qf-count {
        font-size: 0.8em;
        padding: 1px 5px;
        min-width: 18px;
    }
    
    /* Alternative : si on veut garder le wrap mais mieux géré */
    .ca-quiz-filters.wrap-mode {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Fix 3 : Badges hero - éviter débordement général */
@media (max-width: 768px) {
    .ca-badges-hero {
        overflow: hidden;
    }
    
    .ca-badges-hero-nivs {
        width: 100%;
        gap: 6px;
    }
}



/* emoji réaction pop */
.ca-reaction-pop{
position:fixed;
font-size:22px;
pointer-events:none;
animation:caPopFloat .9s ease-out forwards;
}

@keyframes caPopFloat{
0%{
transform:translate(-50%, -80%) scale(.7);
opacity:0;
}
20%{
transform:translate(-50%, -110%) scale(1);
opacity:1;
}
100%{
transform:translate(var(--ca-x), -170%) scale(1.1);
opacity:0;
}
}



/* === Forum categories blocks === */
.ca-cat-block{border:1px solid var(--ca-border);border-radius:14px;margin:14px 0;background:var(--ca-card);overflow:hidden}
.ca-cat-head{padding:10px 14px;background:var(--ca-bg);cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:700}
.ca-cat-toggle{margin-left:auto;transition:transform .25s ease}
.ca-cat-block.collapsed .ca-cat-toggle{transform:rotate(-90deg)}
.ca-cat-body{padding:0}
.ca-cat-block.collapsed .ca-cat-body{display:none}

/* icon image */
.ca-cat-icon-img{width:26px;height:26px;border-radius:6px;object-fit:cover}


/* =====================================================
   Forum index — Catégories style XenForo (blocs + collapse)
   ===================================================== */
.ca-cat-block{
  background: var(--ca-card);
  border: 1px solid var(--ca-border);
  border-radius: 16px;
  overflow: hidden;
  margin: 14px 0;
}
.ca-cat-head{
  display:block;
  padding: 12px 14px;
  background: var(--ca-bg);
  border-bottom: 1px solid var(--ca-border);
  cursor: pointer;
}
.ca-cat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ca-cat-stats{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;flex:0 0 auto;}
.ca-cat-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.ca-cat-icon{width:40px;height:40px;border-radius:12px;border:1px solid var(--ca-border);background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:visible;}
.ca-cat-icon-img{width:100%;height:100%;object-fit:cover;display:block;}
.ca-cat-icon-emoji{font-size:20px;line-height:1;}
.ca-cat-titles{min-width:0;flex:1;}
.ca-cat-title{font-weight:900;font-size:1.05em;white-space:nowrap;overflow:visible;text-overflow:ellipsis;}
.ca-cat-desc{opacity:.72;font-size:.92em;white-space:nowrap;overflow:visible;text-overflow:ellipsis;margin-top:2px;}
.ca-cat-actions{margin-top:8px;display:flex;justify-content:flex-start;}

/* Bouton "Voir tous les sujets" sur l'index du forum (style type XenForo) */
.ca-cat-viewall{
  background: transparent;
  color: var(--ca-primary);
  border: 1px solid rgba(0,0,0,.10);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease, background .15s ease;
  white-space: nowrap;
}
.ca-cat-viewall:hover{background: rgba(0,0,0,.04);filter:brightness(1);}
.ca-cat-viewall:active{transform:translateY(1px);}
.ca-cat-viewall:focus{outline:2px solid rgba(107,76,230,.25);outline-offset:2px;}

/* Bouton retour (liste "tous les sujets") */
.ca-forum-back{margin:0 0 14px 0;}
.ca-forum-back--disc{margin:0 0 10px 0;}
.ca-forum-back button{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.10);
  padding: 9px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  font-weight: 700;
  box-shadow:none;
    margin-top: 15px;
}
.ca-forum-back button:hover{background: rgba(0,0,0,.05);}
.ca-forum-back button:active{transform:translateY(1px);}
.ca-cat-stat{text-align:right;min-width:64px;}
.ca-cat-stat strong{display:block;font-weight:900;}
.ca-cat-stat span{display:block;font-size:.78em;opacity:.7;}

.ca-cat-arrow{display:inline-block;width:18px;transform:rotate(0deg);transition:transform .18s ease;opacity:.8;}
.ca-cat-arrow.open{transform:rotate(90deg);}

.ca-cat-body{padding: 0;}

/* node rows inside category */
.ca-node-row{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ca-border);
  cursor: pointer;
}
.ca-node-avatar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.ca-node-row:last-child{border-bottom:0;}
.ca-node-row:hover{background: var(--ca-bg);}
.ca-node-main{min-width:0;flex:1;}
.ca-node-title{font-weight:600;white-space:nowrap;overflow:visible;text-overflow:ellipsis;}
.ca-node-meta{opacity:.72;font-size:.86em;margin-top:2px;white-space:nowrap;overflow:visible;text-overflow:ellipsis;}
.ca-node-stats{flex:0 0 auto;display:flex;gap:10px;}
.ca-node-stat{text-align:right;min-width:54px;}
.ca-node-stat strong{display:block;font-weight:900;}
.ca-node-stat span{display:block;font-size:.78em;opacity:.7;}
.ca-node-last{width:240px;flex:0 0 auto;display:flex;gap:10px;align-items:center;}
.ca-node-last-meta{min-width:0;}
.ca-node-last-user{font-weight:500;white-space:nowrap;overflow:visible;text-overflow:ellipsis;}
.ca-node-last-time{opacity:.7;font-size:.85em;margin-top:2px;white-space:nowrap;overflow:visible;text-overflow:ellipsis;}

/* category icon in discussion list */
.ca-thread-catimg{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block;}

/* responsive */
@media (max-width: 900px){
  .ca-node-last{display:none;}
  .ca-cat-stat{min-width:auto;}
}
@media (max-width: 680px){
  .ca-cat-top{align-items:flex-start;}
  .ca-node-stats{display:none;}
  .ca-cat-desc{display:none;}
  .ca-cat-viewall{padding:7px 10px;font-size:12px;}
}






/* =========================
   Forum index — version compacte
   ========================= */

/* Header catégorie */
.ca-cat-head{ padding: 10px 12px; }
.ca-cat-title{ font-size: .95em; }
.ca-cat-desc{ font-size: .84em; }
.ca-cat-stat strong{ font-size: .95em; }
.ca-cat-stat span{ font-size: .72em; }
.ca-cat-viewall{ padding: 6px 10px; font-size: 12px; }

/* Lignes "5 derniers sujets" dans chaque catégorie */
.ca-node-row{ padding: 10px 12px; gap: 10px; }
.ca-node-title{ font-size: .92em; font-weight: 600; }
.ca-node-meta{ font-size: .78em; }
.ca-node-stat strong{ font-size: .95em; }
.ca-node-stat span{ font-size: .72em; }
.ca-node-last-user{ font-size: .9em; }
.ca-node-last-time{ font-size: .78em; }

/* Mobile : encore plus compact + évite l'effet "gros blocs" */
@media (max-width: 680px){
  .ca-cat-head{ padding: 10px 12px; }
  .ca-cat-actions{ margin-top: 6px; }
  .ca-cat-stats{ gap: 8px; }
  .ca-cat-title{ font-size: .9em; }
  .ca-cat-stat strong{ font-size: .85em; line-height: 1.05; }
  .ca-cat-stat span{ font-size: .64em; line-height: 1.05; }
  .ca-node-row{ padding: 9px 12px; }
  .ca-node-title{ font-size: .9em; }
  .ca-node-meta{ font-size: .76em; }
}

/* =====================================================
   Forum — détails "premium" + indicateur nouveaux messages
   ===================================================== */

/* 2 lignes qui font "premium" (cartes + ombre légère) */
.ca-cat-block{border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,0.05);overflow:hidden}

/* Hover doux sur les lignes de sujets */
.ca-node-row:hover{background:#f7f9fc;transition:background .15s}

/* Point bleu "nouveaux messages" (index + liste) */
.ca-new-dot{width:8px;height:8px;border-radius:50%;background:#3b82f6;display:inline-block;margin-right:6px;vertical-align:middle;transform:translateY(-1px)}

/* =========================
   Mobile — barre d’actions des messages (Solution / Citer / Réactions)
   ========================= */
@media (max-width: 680px){
  /* 2 lignes :
     L1: Réactions (gauche) + Citer (droite)
     L2: Solution (pleine largeur) */
  .ca-post-footer{
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 10px;
    align-items: center;
  }

  .ca-post-footer .ca-reactions{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    justify-self: start;
    min-width: 0;
  }

  /* Le bouton “Citer” est le ca-action-btn sans .ca-solution-btn */
  .ca-post-footer > .ca-action-btn:not(.ca-solution-btn){
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: end;
    white-space: nowrap;
  }

  .ca-post-footer > .ca-solution-btn{
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    width: 100%;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 14px;
    white-space: nowrap;
  }
}
/* Centrage niveau dans widget top adoptant */
.ca-topad-card .ca-level-pill{ margin-left:auto; margin-right:auto; justify-content:center; }

/* ============================================================
   VUE LES ADOPTANTS
   ============================================================ */

/* Toolbar */
.ca-adoptants-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 16px 0;
    align-items: center;
}
.ca-adoptants-search {
    flex: 1;
    min-width: 180px;
    padding: 9px 14px;
    border: 2px solid var(--ca-border, #ede9e4);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ca-text, #2d2d2d);
    background: white;
    outline: none;
    transition: border-color 0.2s;
}
.ca-adoptants-search:focus { border-color: var(--ca-green, #1C3F39); }
.ca-adoptants-sort {
    padding: 9px 12px;
    border: 2px solid var(--ca-border, #ede9e4);
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    background: white;
    cursor: pointer;
    outline: none;
}
.ca-adoptants-count {
    padding: 8px 16px 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ca-muted, #9ca3af);
}

/* Grille cards */
.ca-adoptants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    padding: 12px 16px 40px;
}

/* Card */
.ca-adoptant-card {
    background: #fff;
    border: 2px solid var(--ca-border, #ede9e4);
    border-radius: 18px;
    padding: 20px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s, border-color 0.2s;
    position: relative;
    text-align: center;
    animation: caCardIn 0.35s ease both;
}
@keyframes caCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ca-adoptant-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(28,63,57,0.11);
    border-color: var(--ca-green, #1C3F39);
}
.ca-adoptant-card.is-me {
    border-color: var(--ca-orange, #FF7D44);
    background: linear-gradient(160deg, #fff9f6, #fff);
}
.ca-adoptant-card.is-me::before {
    content: 'Moi';
    position: absolute;
    top: 9px; right: 9px;
    background: var(--ca-orange, #FF7D44);
    color: white;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 7px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.ca-adoptant-card-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1C3F39, #2e6b61);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: white; font-weight: 900;
    overflow: hidden;
    border: 3px solid var(--ca-border, #ede9e4);
    flex-shrink: 0;
}
.ca-adoptant-card.is-me .ca-adoptant-card-avatar { border-color: var(--ca-orange, #FF7D44); }
.ca-adoptant-card-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ca-adoptant-card-rang {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 20px;
    font-size: 10px; font-weight: 800; color: white;
    margin-top: -2px;
}
.ca-adoptant-card-name { font-size: 14px; font-weight: 900; color: var(--ca-green, #1C3F39); line-height: 1.2; }
.ca-adoptant-card-lapins { font-size: 11px; color: var(--ca-muted, #9ca3af); font-weight: 700; }

/* Modal overlay */
.ca-adoptant-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99998;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ca-adoptant-modal-overlay.active { display: flex; }

/* Modal profil */
.ca-adoptant-modal {
    background: #fff;
    border-radius: 22px;
    width: 100%;
    max-width: 580px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 28px 70px rgba(0,0,0,0.22);
    animation: caModalIn 0.32s cubic-bezier(.34,1.56,.64,1) both;
    scrollbar-width: thin;
}
@keyframes caModalIn {
    from { transform: scale(0.88); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.cam-hero {
    padding: 24px 20px 18px;
    background: linear-gradient(150deg, #e8f5f2, #f7f5f2);
    border-radius: 22px 22px 0 0;
    position: relative;
}
.cam-hero-row { display: flex; align-items: flex-start; gap: 16px; }
.cam-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, #1C3F39, #2e6b61);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: white; font-weight: 900;
    border: 4px solid white; box-shadow: 0 4px 16px rgba(28,63,57,0.18);
    overflow: hidden; flex-shrink: 0;
}
.cam-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cam-info { flex: 1; padding-top: 2px; }
.cam-name { font-size: 20px; font-weight: 900; color: #1C3F39; line-height: 1.1; }
.cam-rang {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 11px; border-radius: 20px;
    font-size: 11px; font-weight: 800; color: white; margin-top: 6px;
}
.cam-meta { font-size: 11px; color: #9ca3af; font-weight: 700; margin-top: 5px; display: flex; gap: 10px; flex-wrap: wrap; }
.cam-close {
    position: absolute; top: 12px; right: 12px;
    background: white; border: none; width: 30px; height: 30px;
    border-radius: 50%; font-size: 15px; cursor: pointer; color: #9ca3af;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: color 0.2s;
}
.cam-close:hover { color: #333; }

/* Barre stats rapides */
.cam-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 2px solid #ede9e4; border-bottom: 2px solid #ede9e4;
}
.cam-stat { padding: 14px 6px; text-align: center; border-right: 1px solid #ede9e4; }
.cam-stat:last-child { border-right: none; }
.cam-stat-val { font-size: 20px; font-weight: 900; color: #1C3F39; line-height: 1; }
.cam-stat-lbl { font-size: 9px; font-weight: 800; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 3px; }

/* Corps modal */
.cam-body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 18px; }
.cam-section-title {
    font-size: 10px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 1px; color: #9ca3af; margin-bottom: 9px;
    display: flex; align-items: center; gap: 6px;
}
.cam-section-title::after { content: ''; flex: 1; height: 1px; background: #ede9e4; }

/* Lapins */
.cam-lapins { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.cam-lapin {
    background: #f7f5f2; border-radius: 12px; padding: 10px 8px;
    text-align: center; border: 1.5px solid #ede9e4;
}
.cam-lapin-icon {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #fff3ee, #ffe8dc);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; margin: 0 auto 5px; overflow: hidden;
}
.cam-lapin-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cam-lapin-nom { font-size: 11px; font-weight: 800; color: #1C3F39; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-lapin-race { font-size: 9px; color: #9ca3af; font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Badges */
.cam-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.cam-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; color: white; }

/* Scores */
.cam-scores { display: flex; flex-direction: column; gap: 7px; }
.cam-score-row { display: flex; align-items: center; gap: 8px; background: #f7f5f2; border-radius: 10px; padding: 9px 12px; }
.cam-score-jeu { flex: 1; font-size: 12px; font-weight: 800; }
.cam-score-val { font-size: 15px; font-weight: 900; color: #FF7D44; }

/* Forum */
.cam-forum-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.cam-forum-item { background: #f7f5f2; border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.cam-forum-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.cam-forum-val { font-size: 18px; font-weight: 900; color: #1C3F39; line-height: 1; }
.cam-forum-lbl { font-size: 10px; color: #9ca3af; font-weight: 700; }

/* Streak */
.cam-streak {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #fff9f6, #fff3ee);
    border: 1.5px solid #ffe8dc; border-radius: 12px; padding: 12px 14px;
}
.cam-streak-val { font-size: 22px; font-weight: 900; color: #FF7D44; line-height: 1; }
.cam-streak-lbl { font-size: 11px; color: #9ca3af; font-weight: 700; }

@media (max-width: 600px) {
    .ca-adoptants-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 10px 10px 30px; }
    .cam-stats { grid-template-columns: repeat(2, 1fr); }
    .cam-stat:nth-child(2) { border-right: none; }
    .cam-stat:nth-child(3) { border-top: 1px solid #ede9e4; }
    .cam-forum-grid { grid-template-columns: 1fr; }
}

/* Stats 2 colonnes (modal adoptant) */
.cam-stats-2col {
    grid-template-columns: repeat(2, 1fr) !important;
}
.cam-stats-2col .cam-stat:nth-child(2) { border-right: none; }

/* Vue Règlement */
.ca-reglement-body {
    padding: 24px 20px 40px;
    max-width: 680px;
    margin: 0 auto;
}
.ca-reglement-intro {
    background: linear-gradient(135deg, #e8f5f2, #f7f5f2);
    border-radius: 14px;
    padding: 16px 20px;
    font-size: 14px;
    color: var(--ca-text, #2d2d2d);
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.6;
}
.ca-reglement-content h4 {
    font-size: 16px;
    font-weight: 900;
    color: var(--ca-green, #1C3F39);
    margin-bottom: 12px;
}
.ca-reglement-content .ca-forum-reglement-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ca-text, #2d2d2d);
}

/* ============================================================
   CARTE BIENVENUE — Message automatique nouveau adoptant
   ============================================================ */

/* Thread liste — style spécial bienvenue */
.ca-thread-bienvenue {
    background: linear-gradient(135deg, #fff9f5, #fff3ee) !important;
    border-left: 4px solid #FF7D44 !important;
}
.ca-bot-avatar {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, #FF7D44, #ffb347);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ca-bot-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(135deg, #FF7D44, #ffb347);
    color: white; font-size: 11px; font-weight: 800;
    padding: 3px 10px; border-radius: 20px;
}

/* Post body — côté gauche auteur bot */
.ca-post[data-bot="1"] .ca-post-user {
    background: linear-gradient(160deg, #fff9f5, #fff3ee);
    border-right: 2px solid #FF7D44;
}
.ca-post[data-bot="1"] .ca-post-user-name {
    color: #FF7D44 !important;
    font-weight: 900;
}

/* Carte bienvenue principale */
.ca-bienvenue-card {
    background: linear-gradient(135deg, #fff9f5 0%, #fff3ee 100%);
    border: 2px solid #ffd4b8;
    border-radius: 20px;
    overflow: hidden;
    max-width: 520px;
    margin: 0 auto;
    box-shadow: 0 4px 24px rgba(255,125,68,.12);
}

/* Header : avatar + nom + badge */
.ca-bv-header {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 20px 16px;
    background: linear-gradient(135deg, #FF7D44, #ffb347);
    color: white;
    position: relative;
}
.ca-bv-avatar { flex-shrink: 0; }
.ca-bv-avatar-img {
    width: 60px; height: 60px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.6);
    object-fit: cover;
}
.ca-bv-avatar-initials {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(255,255,255,.25);
    border: 3px solid rgba(255,255,255,.5);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 900; color: white;
}
.ca-bv-header-info { flex: 1; }
.ca-bv-nom { font-size: 20px; font-weight: 900; line-height: 1.2; }
.ca-bv-date { font-size: 12px; opacity: .85; margin-top: 3px; }
.ca-bv-rabbit {
    position: absolute; top: 10px; right: 14px;
    font-size: 28px; line-height: 1;
    animation: ca-bv-bounce 0.7s ease-in-out infinite alternate;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
@keyframes ca-bv-bounce {
    from { transform: translateY(0) rotate(-5deg); }
    to   { transform: translateY(-8px) rotate(5deg); }
}

/* Feux d'artifice */
.ca-bv-fireworks {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.ca-bv-fireworks span {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    animation: ca-bv-spark 1.4s ease-in-out infinite;
    opacity: 0;
}
.ca-bv-fireworks span:nth-child(1) { background:#fff; top:20%; left:10%; animation-delay:0s; }
.ca-bv-fireworks span:nth-child(2) { background:#ffe066; top:15%; left:80%; animation-delay:0.3s; }
.ca-bv-fireworks span:nth-child(3) { background:#ff9f7a; top:60%; left:20%; animation-delay:0.6s; }
.ca-bv-fireworks span:nth-child(4) { background:#fff; top:70%; left:75%; animation-delay:0.9s; }
.ca-bv-fireworks span:nth-child(5) { background:#ffe066; top:40%; left:50%; animation-delay:1.1s; }
@keyframes ca-bv-spark {
    0%   { opacity:0; transform: scale(0) translateY(0); }
    30%  { opacity:1; transform: scale(1.5) translateY(-10px); }
    70%  { opacity:.8; transform: scale(1) translateY(-20px); }
    100% { opacity:0; transform: scale(0) translateY(-30px); }
}

/* Texte de bienvenue */
.ca-bv-message {
    padding: 18px 20px 12px;
    font-size: 15px; line-height: 1.65;
    color: #2d2d2d;
}
.ca-bv-message p { margin: 0 0 8px; }
.ca-bv-message p:last-child { margin-bottom: 0; }

/* Section lapins */
.ca-bv-lapins { padding: 0 20px 16px; }
.ca-bv-lapins-title {
    font-size: 13px; font-weight: 800; color: #FF7D44;
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 10px;
}
.ca-bv-lapins-grid {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.ca-bv-lapin-card {
    display: flex; align-items: center; gap: 10px;
    background: white; border: 1.5px solid #ffd4b8;
    border-radius: 14px; padding: 10px 14px;
    flex: 1; min-width: 180px;
    box-shadow: 0 2px 8px rgba(255,125,68,.08);
}
.ca-bv-lapin-photo {
    width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; border: 2px solid #ffd4b8; flex-shrink: 0;
}
.ca-bv-lapin-emoji {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #fff3ee, #ffd4b8);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}
.ca-bv-lapin-info { display: flex; flex-direction: column; gap: 2px; }
.ca-bv-lapin-nom { font-weight: 900; font-size: 14px; color: #1C3F39; }
.ca-bv-lapin-race { font-size: 12px; color: #666; }
.ca-bv-lapin-sexe { font-size: 12px; color: #888; }

/* GIF bienvenue */
.ca-bv-gif {
    padding: 0 20px 20px;
    display: flex; justify-content: center;
}
.ca-bv-gif img {
    max-width: 100%; max-height: 200px;
    border-radius: 14px; object-fit: cover;
}

/* ============================================================
   GIFs — Bouton, picker, rendu message
   ============================================================ */

/* Bouton GIF (barre formulaire) */
.ca-btn-gif {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    color: white !important;
    border: none !important;
    font-weight: 700;
}
.ca-btn-gif:hover { opacity: .88; }

/* Bouton GIF reply bar */
.ca-reply-gif-btn { font-size: 16px; }

/* Zone picker GIF */
.ca-gif-zone {
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 12px !important;
}

/* Label catégorie */
.ca-gif-cat-label {
    font-size: 11px;
    font-weight: 800;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 6px 0 4px;
    border-bottom: 1px solid #ede9f8;
    margin-bottom: 6px;
}
.ca-gif-cat-label:not(:first-child) { margin-top: 12px; }

/* Rangée GIFs par catégorie */
.ca-gif-cat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

/* Vignette GIF */
.ca-gif-thumb {
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    background: #f3f0ff;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
    flex-shrink: 0;
}
.ca-gif-thumb img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}
.ca-gif-thumb:hover {
    border-color: #7c3aed;
    transform: scale(1.04);
}

/* GIF dans les messages */
.ca-gif-msg {
    max-width: 300px;
    max-height: 300px;
    border-radius: 10px;
    display: block;
    margin: 4px 0;
}

/* ── Mentions @Prénom N. ─────────────────────────────── */
.ca-mention {
    display: inline-block;
    background: var(--ca-primary);
    color: #fff !important;
    font-weight: 700 !important;
    font-size: .88em !important;
    padding: 1px 7px !important;
    border-radius: 20px;
    white-space: nowrap;
}
/* Dropdown autocomplete */
.ca-mention-dropdown {
    background: var(--ca-card);
    border: 1.5px solid var(--ca-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    overflow: hidden;
    min-width: 180px;
    max-width: 260px;
}
.ca-mention-item {
    display: block; width: 100%;
    text-align: left;
    padding: 9px 14px !important;
    background: none; border: none;
    font-size: .9em !important; font-weight: 600 !important;
    color: var(--ca-text) !important;
    cursor: pointer;
    transition: background .1s;
}
.ca-mention-item:hover,
.ca-mention-item.active {
    background: var(--ca-bg) !important;
    color: var(--ca-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   NOTIFICATIONS
   ══════════════════════════════════════════════════════════════ */

/* Badge compteur sur le bouton sidebar */
.ca-notif-btn { position: relative; }
.ca-notif-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: #ef4444; color: #fff;
    font-size: 11px !important; font-weight: 700 !important;
    min-width: 18px; height: 18px; border-radius: 20px;
    padding: 0 4px; margin-left: 6px;
    line-height: 1;
}

/* Header de la vue */
.ca-notifs-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ca-border);
    background: var(--ca-card);
}
.ca-notifs-header-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.ca-notifs-action-btn {
    padding: 6px 12px; border-radius: 20px;
    border: 1.5px solid var(--ca-border);
    background: var(--ca-bg); color: var(--ca-text);
    font-size: .82em !important; font-weight: 600 !important;
    cursor: pointer; transition: background .15s;
}
.ca-notifs-action-btn:hover { background: var(--ca-border); }
.ca-notifs-action-btn--danger { border-color: #fca5a5; color: #ef4444; }
.ca-notifs-action-btn--danger:hover { background: #fef2f2; }

/* Panneau préférences */
.ca-notif-prefs-panel {
    margin-top: 12px;
    padding: 12px;
    background: var(--ca-bg);
    border-radius: 10px;
    border: 1px solid var(--ca-border);
    display: flex; flex-direction: column; gap: 12px;
}
.ca-notif-pref-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .9em !important;
}

/* Toggle switch */
.ca-toggle-switch {
    position: relative; display: inline-block;
    width: 40px; height: 22px; flex-shrink: 0;
}
.ca-toggle-switch input { display: none; }
.ca-toggle-slider {
    position: absolute; inset: 0;
    background: var(--ca-border); border-radius: 20px;
    transition: background .2s; cursor: pointer;
}
.ca-toggle-slider::before {
    content: ''; position: absolute;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; top: 3px; left: 3px;
    transition: transform .2s;
}
.ca-toggle-switch input:checked + .ca-toggle-slider { background: var(--ca-primary); }
.ca-toggle-switch input:checked + .ca-toggle-slider::before { transform: translateX(18px); }

/* Liste des notifications */
.ca-notifs-list {
    display: flex; flex-direction: column;
}

/* Item notification */
.ca-notif-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ca-border);
    background: var(--ca-card);
    cursor: pointer;
    transition: background .12s;
    position: relative;
}
.ca-notif-item:hover { background: var(--ca-bg); }
.ca-notif-item--unread { background: color-mix(in srgb, var(--ca-primary) 6%, var(--ca-card)); }
.ca-notif-item--unread::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--ca-primary); border-radius: 0 2px 2px 0;
}

/* Icône type */
.ca-notif-icon {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px !important; font-weight: 700 !important;
}
.ca-notif-icon--mention  { background: #ede9fe; color: #7c3aed; }
.ca-notif-icon--reaction { background: #fef3c7; color: #d97706; }
.ca-notif-icon--reponse  { background: #dcfce7; color: #16a34a; }

/* Corps */
.ca-notif-body { flex: 1; min-width: 0; }
.ca-notif-text { font-size: .9em !important; line-height: 1.4; margin-bottom: 2px; }
.ca-notif-text strong { font-weight: 700 !important; }
.ca-notif-disc {
    font-size: .8em !important; color: var(--ca-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ca-notif-ago { font-size: .75em !important; color: var(--ca-muted); margin-top: 3px; }

/* Bouton supprimer */
.ca-notif-delete {
    width: 26px; height: 26px; border-radius: 50%;
    background: none; border: none;
    color: var(--ca-muted); font-size: 13px !important;
    cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s, background .15s;
}
.ca-notif-item:hover .ca-notif-delete { opacity: 1; }
.ca-notif-delete:hover { background: var(--ca-border); color: var(--ca-text); }

/* État vide */
.ca-notifs-empty {
    text-align: center; padding: 48px 16px;
    color: var(--ca-muted);
}
.ca-notifs-empty-icon { font-size: 2.5em !important; display: block; margin-bottom: 10px; }
.ca-notifs-empty p { font-size: .95em !important; margin: 0; }

/* ══ VUE MON ESPACE / JEUX intégrée dans le forum ══ */
.ca-forum-espace-view {
    padding: 0 !important;
    overflow: hidden;
}
.ca-forum-espace-view .mlea-app {
    width: 100%;
    max-width: 100%;
}
/* Sur desktop : scroll interne */
@media (min-width: 641px) {
    .ca-forum-espace-view {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}

/*
 * CRITIQUE : sidebar et overlay EA sont position:fixed/z-index:999
 * Ils s'échappent du display:none parent et restent visibles.
 * On les masque explicitement quand la vue espace est cachée.
 */
#ca-forum-espace[style*="display:none"] .mlea-sidebar,
#ca-forum-espace[style*="display: none"] .mlea-sidebar,
#ca-forum-jeux[style*="display:none"] .mlea-sidebar,
#ca-forum-jeux[style*="display: none"] .mlea-sidebar {
    display: none !important;
}
#ca-forum-espace[style*="display:none"] .mlea-sidebar-overlay,
#ca-forum-espace[style*="display: none"] .mlea-sidebar-overlay,
#ca-forum-jeux[style*="display:none"] .mlea-sidebar-overlay,
#ca-forum-jeux[style*="display: none"] .mlea-sidebar-overlay {
    display: none !important;
}

/* Quand la vue espace EST visible : contenir les fixed dans le flux */
#ca-forum-espace[style*="display:block"] {
    /* Crée un nouveau contexte de stacking pour contenir les z-index EA */
    isolation: isolate;
    position: relative;
}

/* ══ VUE JEUX — masquer éléments redondants en mode embed ══ */

/* Hero du plugin jeux (double avec le hero forum) */
#ca-forum-jeux .ca-page-hero,
#ca-forum-jeux .ca-page-hero--small,
#ca-forum-jeux .ca-page-hero--forum {
    display: none !important;
}

/* Barre "En direct" */
#ca-forum-jeux .ja-live-bar,
#ca-forum-jeux .ja-ticker,
#ca-forum-jeux [class*="live-bar"],
#ca-forum-jeux [class*="ticker"] {
    display: none !important;
}

/* Normaliser la grille jeux dans le conteneur forum */
#ca-forum-jeux .ja-app {
    padding: 16px;
}
#ca-forum-jeux .ja-game-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Padding/marge top de la sort-bar */
#ca-forum-jeux .ja-sort-bar {
    margin-top: 0;
    padding-top: 4px;
}

/* ══ FIX BURGER EA EN MODE EMBED FORUM ══
 * .mlea-burger est position:fixed z-index:1000 → s'échappe de tout conteneur.
 * Desktop : on cache le burger, sidebar sticky toujours visible.
 * Mobile  : on remet le burger en position:absolute dans le conteneur.
 */

/* Overlay toujours masqué en embed */
body.ca-forum-embed-active .mlea-sidebar-overlay {
    display: none !important;
}

/* Desktop : burger masqué, sidebar sticky */
@media (min-width: 769px) {
    body.ca-forum-embed-active .mlea-burger {
        display: none !important;
    }
    body.ca-forum-embed-active .mlea-sidebar {
        position: sticky !important;
        left: auto !important;
        top: 0 !important;
        bottom: auto !important;
        min-height: auto !important;
        max-height: none !important;
        width: var(--mlea-sidebar-w, 260px) !important;
        transform: none !important;
        border-radius: var(--mlea-radius, 12px) !important;
        transition: none !important;
        display: flex !important;
        flex-direction: column;
        overflow-y: auto;
    }
    body.ca-forum-embed-active .mlea-dashboard {
        flex-direction: row !important;
    }
}

/* Mobile : sidebar en overlay coulissant, burger visible et fonctionnel */
@media (max-width: 768px) {
    body.ca-forum-embed-active .mlea-burger {
        display: flex !important;
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        top: auto !important;
        right: auto !important;
        z-index: 1001 !important;
    }
    body.ca-forum-embed-active .mlea-sidebar {
        position: fixed !important;
        left: -280px !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        z-index: 999 !important;
        transition: left .3s ease !important;
        transform: none !important;
        border-radius: 0 16px 16px 0 !important;
    }
    body.ca-forum-embed-active .mlea-sidebar.open {
        left: 0 !important;
    }
    body.ca-forum-embed-active .mlea-sidebar-overlay {
        display: none;
    }
    body.ca-forum-embed-active .mlea-sidebar-overlay.open {
        display: block !important;
    }
    body.ca-forum-embed-active .mlea-dashboard {
        flex-direction: column !important;
    }
}

/* ══ FIX SIDEBAR EA EN MODE EMBED SECTION (carnet / quiz) ══
 * Quand caShowEspaceSection() est actif, on masque la sidebar EA entière
 * (desktop et mobile) pour afficher uniquement le contenu de la section.
 */

/* Sidebar + burger masqués partout en embed section */
body.ca-embed-section .mlea-sidebar,
body.ca-embed-section .mlea-burger {
    display: none !important;
}

/* Dashboard en colonne (pleine largeur) */
body.ca-embed-section .mlea-dashboard {
    flex-direction: column !important;
}