/* ── Confessions Anonymes — Frontend Styles ─────────────────── */

:root {
  --ca-purple:       #7c3aed;
  --ca-purple-light: #a855f7;
  --ca-purple-pale:  #f3f0ff;
  --ca-purple-border:#ddd6fe;
  --ca-text:         #1f2937;
  --ca-muted:        #6b7280;
  --ca-bg:           #ffffff;
  --ca-border:       #e5e7eb;
  --ca-radius:       14px;
  --ca-radius-sm:    8px;
  --ca-shadow:       0 4px 24px rgba(124,58,237,.10);
  --ca-shadow-hover: 0 8px 32px rgba(124,58,237,.18);
  --ca-success:      #059669;
  --ca-error:        #dc2626;
  --ca-warn:         #d97706;
  --ca-transition:   200ms ease;
}

/* ── Wrapper ── */
.ca-wrapper {
  max-width: 640px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ca-text);
}

/* ── Counter banner ── */
.ca-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ca-purple-pale);
  border: 1px solid var(--ca-purple-border);
  border-radius: var(--ca-radius);
  padding: 12px 20px;
  margin-bottom: 22px;
  animation: ca-fade-in .4s ease;
}
.ca-counter-number {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ca-purple);
  letter-spacing: -.5px;
}
.ca-counter-label {
  font-size: .85rem;
  color: var(--ca-muted);
}

/* ── Form ── */
#ca-form {
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  padding: 32px 28px;
  box-shadow: var(--ca-shadow);
  animation: ca-fade-in .4s ease;
}

.ca-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ca-text);
  margin-bottom: 12px;
}

.ca-field {
  margin-bottom: 24px;
}

/* ── Categories ── */
.ca-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.ca-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  border: 2px solid var(--ca-border);
  border-radius: var(--ca-radius-sm);
  padding: 14px 10px;
  cursor: pointer;
  transition: border-color var(--ca-transition), background var(--ca-transition), transform var(--ca-transition), box-shadow var(--ca-transition);
  user-select: none;
  position: relative;
  background: var(--ca-bg);
}

.ca-cat input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ca-cat:hover {
  border-color: var(--ca-purple-light);
  background: var(--ca-purple-pale);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124,58,237,.12);
}

.ca-cat.is-selected {
  border-color: var(--ca-purple);
  background: var(--ca-purple-pale);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

.ca-cat.is-selected .ca-cat__emoji {
  transform: scale(1.25) rotate(-5deg);
}

.ca-cat__emoji {
  font-size: 1.8rem;
  line-height: 1;
  transition: transform var(--ca-transition);
  display: block;
}

.ca-cat__label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ca-text);
}

.ca-cat__desc {
  font-size: .75rem;
  color: var(--ca-muted);
  line-height: 1.3;
}

/* ── Textarea ── */
.ca-textarea-wrap {
  position: relative;
}

#ca-content {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--ca-border);
  border-radius: var(--ca-radius-sm);
  padding: 14px 16px;
  font-size: .9375rem;
  font-family: inherit;
  color: var(--ca-text);
  resize: none;
  min-height: 130px;
  transition: border-color var(--ca-transition), box-shadow var(--ca-transition);
  line-height: 1.55;
  background: var(--ca-bg);
}

#ca-content:focus {
  outline: none;
  border-color: var(--ca-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

#ca-content::placeholder {
  color: #9ca3af;
  font-style: italic;
}

/* ── Char counter ── */
.ca-char-counter {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: .75rem;
  color: var(--ca-muted);
  pointer-events: none;
  transition: color var(--ca-transition);
}

.ca-char-counter--warn  { color: var(--ca-warn); }
.ca-char-counter--danger { color: var(--ca-error); font-weight: 600; }

/* ── Submit ── */
.ca-field--submit {
  margin-bottom: 0;
}

.ca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--ca-purple);
  color: #fff;
  border: none;
  border-radius: var(--ca-radius-sm);
  padding: 13px 28px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--ca-transition), transform var(--ca-transition), box-shadow var(--ca-transition);
  width: 100%;
}

.ca-btn:hover:not(:disabled) {
  background: var(--ca-purple-light);
  box-shadow: var(--ca-shadow-hover);
  transform: translateY(-1px);
}

.ca-btn:active:not(:disabled) {
  transform: translateY(0);
}

.ca-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.ca-btn--ghost {
  background: transparent;
  color: var(--ca-purple);
  border: 2px solid var(--ca-purple-border);
  margin-top: 12px;
}

.ca-btn--ghost:hover {
  background: var(--ca-purple-pale);
  border-color: var(--ca-purple);
}

/* ── Spinner ── */
.ca-btn__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ca-spin .65s linear infinite;
  flex-shrink: 0;
}

.is-loading .ca-btn__spinner { display: inline-block; }

/* ── Privacy note ── */
.ca-privacy {
  margin: 10px 0 0;
  font-size: .78rem;
  color: var(--ca-muted);
  text-align: center;
}

/* ── Messages ── */
.ca-message {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--ca-radius-sm);
  font-size: .875rem;
  font-weight: 500;
  animation: ca-fade-in .25s ease;
}

.ca-message:empty,
.ca-message[hidden] { display: none; }

.ca-message--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--ca-error);
}

.ca-message--success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: var(--ca-success);
}

/* ── Success screen ── */
.ca-success {
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  padding: 48px 28px;
  box-shadow: var(--ca-shadow);
  text-align: center;
  animation: ca-pop-in .45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ca-success[hidden] { display: none; }

.ca-success__icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--ca-purple), var(--ca-purple-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #fff;
  margin: 0 auto 20px;
  animation: ca-pop-in .5s .1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ca-success__text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ca-text);
  margin: 0 0 4px;
}

/* ── Shake animation ── */
@keyframes ca-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.ca-shake { animation: ca-shake .4s ease; }

/* ── Keyframes ── */
@keyframes ca-spin {
  to { transform: rotate(360deg); }
}

@keyframes ca-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ca-pop-in {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  #ca-form { padding: 22px 16px; }
  .ca-categories { grid-template-columns: repeat(2, 1fr); }
  .ca-cat__emoji { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Confession List — [confession_list]
   ═══════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.ca-list-wrapper {
  max-width: 900px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ca-text);
}

/* ── Tabs ── */
.ca-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--ca-border);
  padding-bottom: 0;
}

.ca-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 16px;
  font-size: .9rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--ca-muted);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color var(--ca-transition), border-color var(--ca-transition), background var(--ca-transition);
  white-space: nowrap;
}

.ca-tab:hover {
  color: var(--ca-purple);
  background: var(--ca-purple-pale);
}

.ca-tab.is-active {
  color: var(--ca-purple);
  border-bottom-color: var(--ca-purple);
  font-weight: 700;
}

.ca-tab__emoji { font-size: 1.1rem; }

/* ── Grid ── */
.ca-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
  min-height: 80px;
}

/* ── Card ── */
.ca-card {
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--ca-shadow);
  transition: box-shadow var(--ca-transition), transform var(--ca-transition), border-color var(--ca-transition);
  will-change: transform;
}

.ca-card:hover {
  box-shadow: var(--ca-shadow-hover);
  transform: translateY(-3px);
  border-color: var(--ca-purple-border);
}

/* ── Card header ── */
.ca-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap; /* ← Permet retour à la ligne si besoin */
}

.ca-card__cat {
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;

  background: var(--ca-purple-pale);
  color: var(--ca-purple);
  white-space: nowrap;
  max-width: calc(100% - 40px); /* ← Limite largeur */
  overflow: hidden;
  text-overflow: ellipsis; /* ← Coupe le texte trop long */
  min-width: 0; /* ← Permet au flex item de rétrécir */
}

.ca-card__cat[data-slug="genant"]  { background:#fff7ed; color:#c2410c; }
.ca-card__cat[data-slug="opinions"]{ background:#f0fdf4; color:#166534; }
.ca-card__cat[data-slug="pensees"] { background:#eff6ff; color:#1d4ed8; }

.ca-card__date {
  font-size: .75rem;
  color: var(--ca-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Card body ── */
.ca-card__body { flex: 1; }

.ca-card__text {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ca-text);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Card footer / reactions ── */
.ca-card__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--ca-border);
  padding-top: 12px;
  margin-top: auto;
}

/* ── Reaction button ── */
.ca-reaction {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ca-purple-pale);
  border: 1.5px solid var(--ca-purple-border);
  border-radius: 99px;
  padding: 5px 12px;
  font-size: .85rem;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--ca-transition), border-color var(--ca-transition), transform var(--ca-transition), box-shadow var(--ca-transition);
  position: relative;
  user-select: none;
  min-width: 56px;
  justify-content: center;
}

.ca-reaction:hover:not(:disabled) {
  background: var(--ca-purple-border);
  border-color: var(--ca-purple);
  transform: scale(1.06);
}

.ca-reaction:active:not(:disabled) {
  transform: scale(0.96);
}

.ca-reaction.is-reacted {
  background: var(--ca-purple);
  border-color: var(--ca-purple);
  color: #fff;
  box-shadow: 0 2px 8px rgba(124,58,237,.30);
}

.ca-reaction.is-reacted .ca-reaction__count {
  color: #fff;
}

.ca-reaction:disabled {
  opacity: .7;
  cursor: wait;
}

.ca-reaction__emoji { font-size: 1rem; line-height: 1; }

.ca-reaction__count {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ca-purple);
  min-width: 14px;
  text-align: center;
}

/* Bump animation on count update */
@keyframes ca-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.ca-reaction__count--bump { animation: ca-bump .35s ease; }

/* Shake on already-reacted attempt */
@keyframes ca-reaction-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}
.ca-reaction--shake { animation: ca-reaction-shake .3s ease; }

/* ── Tooltip ── */
.ca-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1f2937;
  color: #fff;
  font-size: .75rem;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
}
.ca-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
}
.ca-tooltip.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Skeleton loader ── */
.ca-list-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
  grid-column: 1 / -1;
}
.ca-skeleton-card {
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 180px;
}
.ca-skel {
  border-radius: 6px;
  background: linear-gradient(90deg, #f3f4f6 25%, #e9d5ff 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: ca-skel-shimmer 1.4s infinite;
}
.ca-skel--line    { height: 14px; }
.ca-skel--block   { height: 72px; }
.ca-skel--short   { width: 40%; }
.ca-skel--medium  { width: 65%; }

@keyframes ca-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Empty state ── */
.ca-list-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ca-muted);
  font-size: 1rem;
  padding: 40px 20px;
}

/* ── Load more footer ── */
.ca-list-footer {
  text-align: center;
  margin-top: 28px;
}
.ca-btn--load-more {
  width: auto;
  display: inline-flex;
  padding: 11px 32px;
}

/* ── Responsive ── */
@media (max-width: 560px) {
  .ca-list-grid { grid-template-columns: 1fr; }
  .ca-list-skeleton { grid-template-columns: 1fr; }
  .ca-tab { padding: 8px 10px; font-size: .8rem; }
  .ca-card__footer { gap: 4px; }
  .ca-reaction { padding: 4px 8px; min-width: 48px; }
}

/* ═══════════════════════════════════════════════════════════════
   L'un ou l'autre — [lunoutre_form] / [lunoutre_list]
   ═══════════════════════════════════════════════════════════════ */

/* ── Formulaire ── */
.ca-luo-wrapper #ca-luo-form {
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  padding: 32px 28px;
  box-shadow: var(--ca-shadow);
}

.ca-input {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--ca-border);
  border-radius: var(--ca-radius-sm);
  padding: 13px 16px;
  font-size: .9375rem;
  font-family: inherit;
  color: var(--ca-text);
  transition: border-color var(--ca-transition), box-shadow var(--ca-transition);
  background: var(--ca-bg);
}
.ca-input:focus {
  outline: none;
  border-color: var(--ca-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

.ca-luo-input--a:focus { border-color: #5170ff; box-shadow: 0 0 0 3px rgba(81,112,255,.15); }
.ca-luo-input--b:focus { border-color: #ff3131; box-shadow: 0 0 0 3px rgba(255,49,49,.15); }

/* VS separator in form */
.ca-luo-vs {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ca-muted);
  margin: 4px 0;
  letter-spacing: .1em;
}

/* Bouton L'un ou l'autre */
.ca-btn--luo {
  /*background: linear-gradient(135deg, #5170ff, #8c52ff);*/
}
.ca-btn--luo:hover:not(:disabled) {
  /*background: linear-gradient(135deg, #3d5aed, #7c3aed);*/
}

/* ── Compteur ── */
.ca-luo-counter { border-color: rgba(81,112,255,.3); background: rgba(81,112,255,.06); margin-bottom: 22px; }
.ca-luo-counter .ca-counter-number { color: #5170ff; }

/* ── Grille ── */
.ca-luo-list-wrapper { max-width: 900px; margin: 0 auto; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }

.ca-luo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ── Card sondage ── */
.ca-luo-card {
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  padding: 22px 20px;
  box-shadow: var(--ca-shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow var(--ca-transition), transform var(--ca-transition);
}
.ca-luo-card:hover {
  box-shadow: var(--ca-shadow-hover);
  transform: translateY(-2px);
}

/* Badge */
.ca-luo-badge {
  font-size: .75rem;
  font-weight: 700;
  color: #5170ff;
  background: rgba(81,112,255,.1);
  border-radius: 99px;
  padding: 4px 12px;
  align-self: flex-start;
  letter-spacing: .02em;
}

/* Options */
.ca-luo-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ca-luo-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--ca-border);
  border-radius: var(--ca-radius-sm);
  padding: 14px 16px;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ca-transition), border-color var(--ca-transition), transform var(--ca-transition), box-shadow var(--ca-transition);
  background: var(--ca-bg);
  color: var(--ca-text);
  text-align: left;
  width: 100%;
}
.ca-luo-opt:hover:not(:disabled) {
  transform: translateX(4px);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.ca-luo-opt:disabled { cursor: default; }

.ca-luo-opt--a { border-color: rgba(81,112,255,.3); }
.ca-luo-opt--a:hover:not(:disabled) { background: rgba(81,112,255,.06); border-color: #5170ff; }
.ca-luo-opt--a.is-chosen { background: rgba(81,112,255,.12); border-color: #5170ff; color: #5170ff; }

.ca-luo-opt--b { border-color: rgba(255,49,49,.3); }
.ca-luo-opt--b:hover:not(:disabled) { background: rgba(255,49,49,.06); border-color: #ff3131; }
.ca-luo-opt--b.is-chosen { background: rgba(255,49,49,.12); border-color: #ff3131; color: #ff3131; }

.ca-luo-opt__letter {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: currentColor;
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ca-luo-opt--a .ca-luo-opt__letter { background: #5170ff; color: #fff; }
.ca-luo-opt--b .ca-luo-opt__letter { background: #ff3131; color: #fff; }
.ca-luo-opt.is-chosen .ca-luo-opt__letter { box-shadow: 0 0 0 3px rgba(255,255,255,.8), 0 0 0 5px currentColor; }

.ca-luo-opt__text { flex: 1; line-height: 1.3; }

/* VS badge in card */
.ca-luo-vs-badge {
  text-align: center;
  font-size: .85rem;
  font-weight: 900;
  color: var(--ca-muted);
  letter-spacing: .15em;
}

/* ── Résultats / barres ── */
.ca-luo-results {
  display: none;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--ca-border);
  padding-top: 16px;
  animation: ca-fade-in .3s ease;
}
.ca-luo-results.is-visible { display: flex; }

.ca-luo-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}
.ca-luo-bar-label {
  font-size: .78rem;
  color: var(--ca-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-luo-bar-pct {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ca-text);
  flex-shrink: 0;
}

.ca-luo-bar {
  height: 10px;
  background: var(--ca-border);
  border-radius: 99px;
  overflow: hidden;
}
.ca-luo-bar__fill {
  height: 100%;
  border-radius: 99px;
  width: 0;
  transition: width .7s cubic-bezier(.4,0,.2,1);
}
.ca-luo-bar__fill--a { background: linear-gradient(90deg, #5170ff, #8c52ff); }
.ca-luo-bar__fill--b { background: linear-gradient(90deg, #ff3131, #ff7070); }

.ca-luo-total {
  font-size: .75rem;
  color: var(--ca-muted);
  text-align: center;
  margin: 0;
}

.ca-luo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  justify-items: center;  /* ← Ajout pour centrer toutes les cartes */
}

.ca-top-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px}

a.ca-cat {
  text-decoration: none!important;
}