.tutoriel-container-modern{background:#f8fafc;min-height:100vh;padding-bottom:4rem}.tutoriel-header-modern{background:linear-gradient(135deg,var(--platform-color,#10b981)0%,var(--platform-color,#10b981)100%);box-shadow:var(--shadow-lg);padding:2rem 0;position:relative;overflow:hidden}.tutoriel-header-modern:before{content:"";pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 100%);position:absolute;top:0;bottom:0;left:0;right:0}.tutoriel-header-top{z-index:1;align-items:center;gap:2rem;max-width:1400px;margin:0 auto;padding:0 2rem;display:flex;position:relative}.btn-back-tutoriel{color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.95rem;font-weight:600;display:inline-flex}.btn-back-tutoriel:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.5);transform:translate(-4px)}.tutoriel-header-title{flex:1;align-items:center;gap:1.5rem;display:flex}.tutoriel-icon-large-modern{border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.2);flex-shrink:0;justify-content:center;align-items:center;width:72px;height:72px;display:flex}.tutoriel-header-title-content h1{color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.1);margin:0;font-size:1.75rem;font-weight:700;line-height:1.2}.tutoriel-header-title-content p{color:rgba(255,255,255,.9);margin:.25rem 0 0;font-size:1rem;font-weight:400;line-height:1.4}.processus-badge{color:#fff;border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(255,255,255,.2);margin-top:.5rem;padding:.35rem .75rem;font-size:.85rem;font-weight:600;display:inline-block}.tutoriel-main-modern{max-width:1200px;margin:0 auto;padding:3rem 2rem}.content-wrapper-tutoriel,.tutoriel-content-modern{flex-direction:column;gap:2rem;display:flex}.tutoriel-validated-badge{background:var(--bg-primary);border:2px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);align-items:center;gap:.75rem;padding:1rem 1.25rem;display:flex}.tutoriel-validated-badge.referent-badge{border-color:var(--platform-color,#10b981);background:linear-gradient(135deg,rgba(var(--platform-color-rgb,16,185,129),.05),rgba(var(--platform-color-rgb,16,185,129),.02))}.tutoriel-validated-badge svg{color:var(--platform-color,#10b981);flex-shrink:0}.tutoriel-validated-badge span{color:var(--text-primary);font-size:.95rem}.validator-role{color:var(--text-muted);font-size:.9rem}.tutoriel-stats-modern{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;display:grid}.stat-item-modern{background:var(--bg-primary);border:2px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);align-items:center;gap:1rem;padding:1.25rem;display:flex}.stat-item-modern svg{color:var(--platform-color,#10b981);flex-shrink:0}.stat-value-modern{color:var(--text-primary);font-size:1.5rem;font-weight:700;line-height:1;display:block}.stat-label-modern{color:var(--text-secondary);margin-top:.25rem;font-size:.85rem;display:block}.tutoriel-rating-section{background:var(--bg-primary);border:2px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:2rem}.tutoriel-rating-section h3{color:var(--text-primary);text-align:center;margin:0 0 1.25rem;font-size:1.25rem;font-weight:700}.rating-buttons{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.rating-btn{background:var(--bg-secondary);color:var(--text-primary);border:2px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition);align-items:center;gap:.75rem;padding:.875rem 1.75rem;font-size:1rem;font-weight:600;display:inline-flex}.rating-btn:not(:disabled):hover{background:var(--bg-primary);border-color:var(--platform-color,#10b981);box-shadow:var(--shadow-md)}.rating-btn.active{background:var(--platform-color,#10b981);color:#fff;border-color:var(--platform-color,#10b981)}.rating-btn:disabled{opacity:.6;cursor:not-allowed}.rating-count{opacity:.8;font-size:.9rem}.usefulness-percentage{text-align:center;margin-top:1.5rem}.usefulness-bar{background:var(--bg-tertiary);border-radius:999px;width:100%;height:8px;margin-bottom:.75rem;overflow:hidden}.usefulness-fill{background:linear-gradient(90deg,var(--platform-color,#10b981),var(--platform-color,#10b981));border-radius:999px;height:100%;transition:width .5s}.usefulness-percentage span{color:var(--text-secondary);font-size:.9rem;font-weight:500}.content-section-modern{background:var(--bg-primary);border:3px solid var(--platform-color,#10b981);border-radius:var(--radius-lg);box-shadow:0 0 0 1px var(--platform-color,#10b981),0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);padding:2rem}.content-section-header{border-bottom:2px solid var(--platform-color,#10b981);justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.content-section-header h2{color:var(--platform-color,#10b981);align-items:center;gap:.75rem;margin:0;font-size:1.35rem;font-weight:700;display:flex}.content-actions{gap:.75rem;display:flex}.btn-action-modern{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition);align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;text-decoration:none;display:inline-flex;box-shadow:0 1px 3px rgba(0,0,0,.1)}.btn-view{color:var(--platform-color,#10b981);border:2px solid var(--platform-color,#10b981);background:#fff}.btn-view:hover{background:var(--platform-color,#10b981);color:#fff;transform:translateY(-2px);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.btn-download{background:var(--platform-color,#10b981);border:2px solid var(--platform-color,#10b981);color:#fff!important}.btn-download:hover{-webkit-filter:brightness(.85);filter:brightness(.85);transform:translateY(-2px);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);color:#fff!important}.pdf-viewer-modern{border-radius:var(--radius-md);background:var(--bg-tertiary);border:2px solid var(--platform-color,#10b981);overflow:hidden}.pdf-viewer-modern object{width:100%;min-height:800px}.video-player-modern{border-radius:var(--radius-md);border:2px solid var(--platform-color,#10b981);background:#000;overflow:hidden}.video-player-modern video{border-radius:var(--radius-md);width:100%;display:block}.empty-state-tutoriel{text-align:center;background:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:4rem 2rem}.empty-state-tutoriel svg{color:var(--text-muted);margin-bottom:1.5rem}.empty-state-tutoriel h3{color:var(--text-primary);margin:0 0 .75rem;font-size:1.25rem;font-weight:600}.empty-state-tutoriel p{color:var(--text-secondary);margin:0;font-size:1rem}.loading-state-tutoriel{text-align:center;padding:4rem 2rem}.loading-state-tutoriel .spinner{border:4px solid var(--border);border-top-color:var(--platform-color,#10b981);border-radius:50%;width:48px;height:48px;margin:0 auto 1rem;animation:1s linear infinite spin}.loading-state-tutoriel p{color:var(--text-secondary);margin:0;font-size:1rem}.error-state-tutoriel{text-align:center;border-radius:var(--radius-md);background:#fef2f2;border:2px solid #fecaca;padding:2rem}.error-state-tutoriel p{color:#dc2626;margin:0;font-weight:600}@media (max-width:1024px){.tutoriel-header-top{flex-direction:column;align-items:flex-start;gap:1.5rem}.tutoriel-header-title h1{font-size:1.5rem}.tutoriel-stats-modern{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}@media (max-width:768px){.tutoriel-header-modern{padding:1.5rem 0}.tutoriel-header-top{padding:0 1rem}.tutoriel-header-title{flex-direction:column;align-items:flex-start;gap:1rem}.tutoriel-icon-large-modern{width:56px;height:56px}.tutoriel-header-title h1{font-size:1.35rem}.tutoriel-main-modern{padding:2rem 1rem}.content-section-modern{padding:1.5rem}.content-section-header{flex-direction:column;align-items:flex-start;gap:1rem}.content-actions{flex-direction:column;width:100%}.btn-action-modern{justify-content:center}.rating-buttons{flex-direction:column}.rating-btn{justify-content:center;width:100%}.pdf-viewer-modern object{min-height:500px}}