@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;900&display=swap');
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: #f8fafc; overflow-x: hidden; color: #334155; }
.glass-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; }
.glass-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }
.level-btn { transition: all 0.3s ease; }
.level-btn:hover { background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: white; transform: scale(1.05); }
.page-transition { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.perspective-1000 { perspective: 1000px; -webkit-perspective: 1000px; }
.flip-card-inner { position: relative; transition: transform 0.6s; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; cursor: pointer; display: grid; }
.flip-card-inner.is-flipped { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.25rem 1.5rem; text-align: center; border-radius: 1rem; box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.1); }
.flip-card-back { background: #2563eb; color: white; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }

/* Badges navbar : taille et espacement s'adaptent à la place disponible */
#nav-badges { font-size: clamp(0.65rem, 2.2vw, 0.875rem); gap: clamp(0.25rem, 1vw, 0.5rem); }
#nav-student-code { padding: 0.3em 0.65em; }
#badge-level, #badge-chapter { padding: 0.3em 0.75em; }

#scroll-progress-container { position: fixed; top: 64px; left: 0; width: 100%; height: 6px; background: transparent; z-index: 50; pointer-events: none; }
#scroll-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #3b82f6, #8b5cf6); border-radius: 0 4px 4px 0; transition: width 0.1s ease-out; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.4); }

section { scroll-margin-top: 100px; transition: all 0.4s ease; }

/* CORRECTIONS CALCULS POSÉS */
.op-grid { display: grid; justify-items: center; align-items: center; font-family: 'Courier New', Courier, monospace; font-weight: bold; }
.digit-cell { width: 30px; height: 35px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.carry-cell { font-size: 0.85rem; color: #ef4444; height: 20px; display: flex; align-items: end; font-weight: 800; justify-content: center; }
.comma-cell { color: #3b82f6; }

/* STYLES RANGEMENT */
.sort-slot { width: 70px; height: 45px; border: 2px dashed #cbd5e1; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-weight: 900; background: #f8fafc; cursor: pointer; transition: all 0.2s; font-size: 1.1rem; }
.sort-slot.filled { border-style: solid; border-color: #3b82f6; background: #eff6ff; color: #1e40af; }
.number-pill { cursor: pointer; transition: all 0.2s; border: 2px solid #e2e8f0; font-weight: bold; background: white; border-radius: 0.5rem; padding: 0.4rem 0.75rem; font-size: 1rem; }
.number-pill:hover:not(.used) { border-color: #3b82f6; transform: translateY(-2px); box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.1); }
.number-pill.used { opacity: 0.15; cursor: default; background: #f1f5f9; }
.comp-btn { transition: all 0.2s; font-weight: 900; }
.comp-btn.selected { background: #2563eb; color: white; transform: scale(1.1); }

/* HIDE SPINNERS FOR INPUT NUMBER */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* PATRON CORRECTION */
@keyframes patron-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    50% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
}
.patron-svg-pulse { animation: patron-pulse 1.5s ease-in-out infinite; }