/* ── FLASHCARD ── */
.card-container {
  perspective: 1200px;
  height: 560px;
}
@media (min-width: 480px)  { .card-container { height: 540px; } }
@media (min-width: 640px)  { .card-container { height: 520px; } }
@media (min-width: 1024px) { .card-container { height: 500px; } }
.card-inner {
  position:relative; width:100%; height:100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4,0.2,0.2,1);
}
.card-inner.flipped { transform: rotateY(180deg); }
.card-face {
  position:absolute; inset:0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 24px;
  overflow: hidden;
}
.card-back { transform: rotateY(180deg); pointer-events: none; }
/* Swap pointer-events when flipped */
.card-inner.flipped .card-back  { pointer-events: auto; }
.card-inner.flipped .card-face:not(.card-back) { pointer-events: none; }

/* ── CARD FRONT COLORS ── */
.card-front-bg-blue   { background:linear-gradient(135deg,#003F87 0%,#0052b3 60%,#001d5e 100%); }
.card-front-bg-red    { background:linear-gradient(135deg,#9c0f1e 0%,#CE1126 60%,#7a0010 100%); }
.card-front-bg-gold   { background:linear-gradient(135deg,#8b7200 0%,#c4a000 50%,#5a4900 100%); }
.card-front-bg-teal   { background:linear-gradient(135deg,#0f5e5e 0%,#1a7a7a 60%,#083333 100%); }
.card-front-bg-purple { background:linear-gradient(135deg,#4a1a7a 0%,#6b2fa0 60%,#2a0d4a 100%); }

/* ── CARD PATTERN ── */
.card-pattern {
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 30px);
  pointer-events:none;
}

/* ── CHAPTER TABS ── */
.chapter-tab { cursor:pointer; transition:all 0.25s; white-space:nowrap; }
.chapter-tab.active { background:var(--drc-blue)!important; color:white!important; }
.chapter-tab:not(.active):hover { background:rgba(0,63,135,0.08); }

/* ── PROGRESS ── */
.progress-bar { height:4px; background:rgba(0,63,135,0.12); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,#003F87,#F7D117); border-radius:2px; transition:width 0.4s ease; }

/* ── SIDEBAR ── */
.sidebar { position:sticky; top:80px; max-height:calc(100vh - 100px); overflow-y:auto; }
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(0,63,135,0.2); border-radius:2px; }

/* ── KBD ── */
kbd { background:rgba(0,63,135,0.08); color:#003F87; border:1px solid rgba(0,63,135,0.2); border-radius:6px; padding:2px 8px; font-family:monospace; font-size:12px; }

/* ── ANIMATIONS ── */
@keyframes cardIn { from{opacity:0;transform:scale(0.95) translateY(10px);} to{opacity:1;transform:scale(1) translateY(0);} }
@keyframes swipeHint { 0%,100%{transform:translateX(0);} 30%{transform:translateX(-12px);} 70%{transform:translateX(12px);} }
.animate-card-in { animation:cardIn 0.4s cubic-bezier(0.4,0,0.2,1) both; }
.swipe-hint { animation:swipeHint 2.5s ease-in-out 1s 2; }

/* ── CHAPTER TAB COUNT BADGE ── */
.tab-count-badge {
  background: rgba(0,63,135,0.12);
  color: #003F87;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
  line-height: 1.4;
}
.chapter-tab.active .tab-count-badge {
  background: rgba(0,63,135,0.2);
}

/* ── CARD BACK SCROLL ── */
.card-face.card-back {
  overflow: hidden;
}
#backScrollZone::-webkit-scrollbar { width: 5px; }
#backScrollZone::-webkit-scrollbar-track { background: transparent; }
#backScrollZone::-webkit-scrollbar-thumb { background: rgba(0,63,135,0.22); border-radius: 4px; }

/* ── TEXTE OFFICIEL : truncate + expand ── */
.texte-preview {
  position: relative;
  max-height: 200px;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1);
}
.texte-preview.expanded {
  max-height: 2400px;
}
.texte-preview-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.96));
  pointer-events: none;
  transition: opacity 0.3s;
}
.texte-preview.expanded .texte-preview-fade {
  opacity: 0;
}
.texte-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #003F87;
  background: rgba(0,63,135,0.07);
  border: 1px solid rgba(0,63,135,0.15);
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.texte-expand-btn:hover { background: rgba(0,63,135,0.13); }