

    .page-header{padding:80px 0 48px;border-bottom:1px solid var(--border-color)}
    .page-header h1{font-family:var(--font-display);font-size:clamp(36px,5vw,64px);font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
    .page-header p{font-size:clamp(16px,1.2vw,20px);color:var(--muted-color);max-width:65ch}
    .back-link{font-family:var(--font-display);font-size:14px;margin-bottom:32px;display:inline-block}
    .stats-bar{display:flex;gap:48px;padding:32px 0;border-bottom:1px solid var(--border-color);font-family:var(--font-display)}
    .stat{display:flex;flex-direction:column}
    .stat-value{font-size:28px;font-weight:700;letter-spacing:-.02em}
    .stat-label{font-size:13px;color:var(--muted-color);text-transform:uppercase;letter-spacing:.05em}
    .category-tabs{display:flex;gap:0;padding-top:48px;font-family:var(--font-display);border-bottom:2px solid var(--border-color)}
    .category-tab{padding:16px 36px;font-size:15px;font-weight:700;background:none;border:none;border-bottom:3px solid transparent;color:var(--muted-color);cursor:pointer;transition:all .2s;letter-spacing:.04em;text-transform:uppercase;margin-bottom:-2px}
    .category-tab:hover{color:var(--text-color)}
    .category-tab.active{color:var(--text-color);border-bottom-color:var(--text-color)}
    .category-tab .cat-count{font-weight:400;font-size:12px;margin-left:6px;opacity:.6}
    .level-tabs{display:flex;gap:0;border-bottom:1px solid var(--border-color);font-family:var(--font-display)}
    .level-tab{padding:16px 28px;font-size:18px;font-weight:700;background:none;border:none;border-bottom:3px solid transparent;color:var(--muted-color);cursor:pointer;transition:all .2s;letter-spacing:-.01em}
    .level-tab:hover{color:var(--text-color)}
    .level-tab.active{color:var(--text-color);border-bottom-color:var(--text-color)}
    .empty-state{padding:64px 0;text-align:center;font-family:var(--font-display);color:var(--muted-color)}
    .empty-state p{font-size:16px;margin-bottom:8px}
    .empty-state .soon{font-size:13px;text-transform:uppercase;letter-spacing:.05em;opacity:.6}
    .download-bar{display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-bottom:1px solid var(--border-color)}
    .download-bar .info{font-size:15px;color:var(--muted-color);font-family:var(--font-display)}
    .download-btn{font-family:var(--font-display);font-size:14px;font-weight:600;padding:10px 24px;border:1px solid var(--text-color);background:var(--text-color);color:var(--bg-color);cursor:pointer;letter-spacing:.03em;transition:opacity .15s}
    .download-btn:hover{opacity:.8}
    .theme-section{border-bottom:1px solid var(--border-color)}
    .theme-header{display:flex;align-items:center;justify-content:space-between;padding:24px 0;cursor:pointer;font-family:var(--font-display);user-select:none}
    .theme-header h2{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0}
    .theme-header .count{font-size:14px;color:var(--muted-color);margin-left:12px;font-weight:400}
    .theme-header .arrow{font-size:20px;transition:transform .2s;color:var(--muted-color)}
    .theme-header.open .arrow{transform:rotate(90deg)}
    .theme-body{display:none;padding:0 0 24px}
    .theme-body.open{display:block}
    .chapter-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0 12px 24px;border-top:1px solid var(--border-color)}
    .chapter-row:first-child{border-top:none}
    .chapter-info{flex:1;min-width:0}
    .chapter-info h3{font-family:var(--font-display);font-size:15px;font-weight:600;margin:0}
    .chapter-info .ch-count{font-size:13px;color:var(--muted-color);font-family:var(--font-display)}
    .study-btn{font-family:var(--font-display);font-size:13px;font-weight:600;padding:8px 20px;border:1px solid var(--border-color);background:none;color:var(--text-color);cursor:pointer;white-space:nowrap;transition:all .15s}
    .study-btn:hover{border-color:var(--text-color);background:var(--text-color);color:var(--bg-color)}

    /* Modal */
    .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:500;align-items:center;justify-content:center}
    .modal-overlay.open{display:flex}
    .modal{background:var(--bg-color);width:90%;max-width:800px;max-height:90vh;overflow:auto;position:relative;padding:48px}
    .modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:24px;color:var(--muted-color);cursor:pointer;font-family:var(--font-display)}
    .modal-title{font-family:var(--font-display);font-size:18px;font-weight:700;margin-bottom:8px}
    .modal-subtitle{font-family:var(--font-display);font-size:13px;color:var(--muted-color);margin-bottom:32px}
    .card-container{perspective:800px;margin-bottom:16px}
    .flashcard{width:100%;cursor:pointer;transform-style:preserve-3d;transition:transform .5s;position:relative}
    .flashcard.flipped{transform:rotateY(180deg)}
    .flashcard.no-flip{transform:none!important;transform-style:flat}
    .card-face{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;padding:32px;border:1px solid var(--border-color);text-align:center;background:var(--bg-color);min-height:220px;width:100%}
    .card-front{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.01em}
    .card-back{transform:rotateY(180deg);font-size:16px;line-height:1.7;position:absolute;inset:0}
    /* No-flip mode: front/back stacked, back hidden */
    .flashcard.no-flip .card-face{backface-visibility:visible;position:relative;transform:none}
    .flashcard.no-flip .card-back{display:none;transform:none;position:relative}
    .flashcard.no-flip.flipped .card-front{display:none}
    .flashcard.no-flip.flipped .card-back{display:flex}
    .card-hint{font-size:13px;color:var(--muted-color);text-align:center;margin-bottom:16px;font-family:var(--font-display)}

    /* Image cards */
    .card-face img{max-width:100%;height:auto;object-fit:contain;margin:4px auto;display:block}
    .card-face .io-wrap{position:relative;display:inline-block;max-width:100%;line-height:0}
    .card-face .io-wrap>img{max-width:100%;max-height:60vh;height:auto;display:block}
    .card-face .io-mask{position:absolute;inset:0;pointer-events:none}
    .card-face .io-mask img{width:100%;height:100%;object-fit:fill}
    .card-io-header{font-family:var(--font-display);font-size:15px;font-weight:600;margin-bottom:8px;color:var(--text-color)}
    .card-io-footer{font-family:var(--font-display);font-size:13px;color:var(--muted-color);margin-top:8px}
    .card-face.card-visual{flex-direction:column;padding:16px;min-height:auto;overflow-y:auto;max-height:70vh}

    /* Card feedback buttons */
    .card-feedback{display:flex;justify-content:center;gap:12px;margin-bottom:24px;font-family:var(--font-display)}
    .card-feedback button{font-size:12px;font-weight:500;padding:6px 14px;border:1px solid var(--border-color);background:none;color:var(--muted-color);cursor:pointer;transition:all .15s;letter-spacing:.02em}
    .card-feedback button:hover{border-color:var(--text-color);color:var(--text-color)}
    .card-feedback button.flagged{border-color:var(--text-color);color:var(--text-color);opacity:.5;pointer-events:none}

    /* Inline correction form in modal */
    .card-correction{display:none;margin-bottom:24px;padding:20px;border:1px solid var(--border-color);font-family:var(--font-display)}
    .card-correction.open{display:block}
    .card-correction label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:6px;color:var(--muted-color)}
    .card-correction textarea{width:100%;padding:10px 14px;border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-color);font-family:var(--font-body);font-size:14px;resize:vertical;min-height:80px;margin-bottom:12px}
    .card-correction textarea:focus{outline:none;border-color:var(--text-color)}
    .card-correction-actions{display:flex;gap:8px}
    .card-correction-actions button{font-size:13px;font-weight:600;padding:8px 18px;cursor:pointer}
    .card-correction .btn-send{border:1px solid var(--text-color);background:var(--text-color);color:var(--bg-color)}
    .card-correction .btn-cancel{border:1px solid var(--border-color);background:none;color:var(--muted-color)}
    .card-correction .correction-ok{display:none;font-size:13px;color:var(--muted-color);padding:8px 0}

    .card-nav{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display)}
    .card-nav button{padding:10px 24px;border:1px solid var(--border-color);background:none;color:var(--text-color);font-size:14px;font-weight:500;cursor:pointer}
    .card-nav button:hover{border-color:var(--text-color)}
    .card-nav .progress{font-size:14px;color:var(--muted-color)}

    /* Suggest section */
    .suggest-section{padding:64px 0;border-top:1px solid var(--border-color)}
    .suggest-section h2{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
    .suggest-section>p{font-size:16px;color:var(--muted-color);margin-bottom:32px;max-width:65ch}
    .suggest-meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;max-width:800px;margin-bottom:24px}
    .suggest-meta label{font-family:var(--font-display);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:6px}
    .suggest-meta input,.suggest-meta select{width:100%;padding:12px 16px;border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-color);font-family:var(--font-body);font-size:15px;transition:border-color .15s}
    .suggest-meta input:focus,.suggest-meta select:focus{outline:none;border-color:var(--text-color)}
    .suggest-type-tabs{display:flex;gap:0;margin-bottom:24px;font-family:var(--font-display)}
    .suggest-type-tab{padding:10px 24px;font-size:14px;font-weight:600;border:1px solid var(--border-color);background:none;color:var(--muted-color);cursor:pointer;transition:all .15s}
    .suggest-type-tab:first-child{border-right:none}
    .suggest-type-tab.active{background:var(--text-color);color:var(--bg-color);border-color:var(--text-color)}
    .suggest-model{font-family:var(--font-display);font-size:13px;color:var(--muted-color);margin-bottom:16px;padding:16px;border:1px dashed var(--border-color);max-width:800px;line-height:1.7}
    .suggest-model span{color:var(--text-color);font-weight:600}
    .card-entries{max-width:800px}
    .card-entry{display:grid;grid-template-columns:1fr 2fr auto;gap:12px;align-items:start;margin-bottom:12px}
    .card-entry input,.card-entry textarea{width:100%;padding:10px 14px;border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-color);font-family:var(--font-body);font-size:14px;transition:border-color .15s}
    .card-entry input:focus,.card-entry textarea:focus{outline:none;border-color:var(--text-color)}
    .card-entry textarea{resize:vertical;min-height:60px}
    .card-entry .remove-entry{background:none;border:1px solid var(--border-color);color:var(--muted-color);font-size:18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--font-display);margin-top:1px}
    .card-entry .remove-entry:hover{border-color:var(--text-color);color:var(--text-color)}
    .card-entry-labels{display:grid;grid-template-columns:1fr 2fr auto;gap:12px;margin-bottom:8px;max-width:800px}
    .card-entry-labels label{font-family:var(--font-display);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-color)}
    .suggest-actions{display:flex;gap:12px;align-items:center;margin-top:16px}
    .btn-add-entry{font-family:var(--font-display);font-size:13px;font-weight:500;padding:8px 18px;border:1px solid var(--border-color);background:none;color:var(--text-color);cursor:pointer}
    .btn-add-entry:hover{border-color:var(--text-color)}
    .suggest-submit{font-family:var(--font-display);font-size:14px;font-weight:600;padding:10px 28px;border:1px solid var(--text-color);background:var(--text-color);color:var(--bg-color);cursor:pointer}
    .suggest-submit:hover{opacity:.8}
    .suggest-success{display:none;font-family:var(--font-display);font-size:15px;color:var(--muted-color);padding:16px 0}
    .suggest-counter{font-family:var(--font-display);font-size:13px;color:var(--muted-color);margin-left:auto}

    footer{border-top:1px solid var(--border-color);padding:48px 0}
    .footer-bottom{font-family:var(--font-display);font-size:13px;color:var(--muted-color)}

    @media(max-width:768px){
      .container{padding:0 24px}
      .page-header{padding:48px 0 32px}
      .stats-bar{flex-wrap:wrap;gap:24px}
      .category-tabs{overflow-x:auto}
      .category-tab{padding:12px 20px;font-size:13px}
      .level-tabs{overflow-x:auto}
      .level-tab{padding:14px 20px;font-size:17px}
      .download-bar{flex-direction:column;gap:12px;align-items:flex-start}
      .suggest-form{grid-template-columns:1fr}
      .modal{padding:32px 24px;width:95%}
      .card-front{font-size:20px}
      .nav-center{display:none}
      .suggest-meta{grid-template-columns:1fr}
      .card-entry{grid-template-columns:1fr}
      .card-entry .remove-entry{justify-self:end}
      .card-entry-labels{display:none}
    }

/* ===== Thème bilan-papier — référence visuelle /bilan/ (surcouche) ===== */
.card-face{background:var(--bg-paper,#FFFFF8);border:2px solid var(--text-main,#111);border-radius:12px;box-shadow:3px 3px 0 var(--text-main,#111)}
.card-front{font-family:var(--font-body,Georgia,serif)}
.download-btn{background:var(--signal,#f3cc3c);color:var(--signal-ink,#171714);border:2px solid var(--text-main,#111);border-radius:10px;box-shadow:3px 3px 0 var(--text-main,#111)}
.download-btn:hover{opacity:1;transform:translateY(-1px)}
.study-btn{border:2px solid var(--text-main,#111);border-radius:10px;font-weight:700}
.study-btn:hover{background:var(--signal,#f3cc3c);color:var(--signal-ink,#171714);border-color:var(--text-main,#111)}
.category-tab.active,.level-tab.active{border-bottom-color:var(--signal,#f3cc3c);color:var(--text-main,#111)}
