/* ====== COURSE CONTAINER ====== */
.course-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
    padding-top: 70px;
    background: var(--darker-bg);
}

/* ====== SIDEBAR ====== */
.course-sidebar {
    background: var(--dark-bg);
    border-right: 1px solid rgba(0, 102, 255, 0.1);
    padding: 30px 20px;
    position: sticky;
    top: 70px;
    height: calc(100vh - 70px);
    overflow-y: auto;
}

.sidebar-header {
    margin-bottom: 30px;
}

.back-link {
    display: inline-block;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.back-link:hover {
    transform: translateX(-5px);
}

.sidebar-header h3 {
    color: var(--text-primary);
    font-size: 18px;
    margin-bottom: 15px;
}

.course-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.course-nav .nav-item {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.course-nav .nav-item:hover {
    background: rgba(0, 102, 255, 0.05);
    color: var(--primary-color);
}

.course-nav .nav-item.active {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

/* ====== PROGRESS BAR ====== */
.progress-container {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.progress-label {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background: var(--accent-gradient);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 10px;
}

.progress-text {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}

/* ====== MAIN CONTENT ====== */
.course-content {
    padding: 40px;
    max-width: 900px;
    margin: 0 auto;
}

/* ====== COURSE HEADER ====== */
.course-header {
    margin-bottom: 50px;
}

.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.course-header .course-badge,
.course-duration,
.course-level {
    background: rgba(0, 102, 255, 0.1);
    color: var(--secondary-color);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.course-header h1 {
    font-size: 42px;
    line-height: 1.3;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.course-intro {
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* ====== COURSE SECTIONS ====== */
.course-section {
    margin-bottom: 60px;
    scroll-margin-top: 90px;
}

.course-section h2 {
    font-size: 32px;
    margin-bottom: 25px;
    color: var(--text-primary);
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(0, 102, 255, 0.2);
}

.course-section h3 {
    font-size: 24px;
    margin: 30px 0 15px;
    color: var(--text-primary);
}

.course-section h4 {
    font-size: 18px;
    margin: 20px 0 10px;
    color: var(--text-primary);
}

.section-intro {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 30px;
}

/* ====== CONTENT BLOCKS ====== */
.content-block {
    margin-bottom: 30px;
}

.content-block p {
    color: var(--text-secondary);
    line-height: 1.9;
    margin-bottom: 15px;
}

/* ====== STYLED LISTS ====== */
.styled-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.styled-list li {
    color: var(--text-secondary);
    padding: 10px 0 10px 35px;
    position: relative;
    line-height: 1.8;
}

.styled-list li::before {
    content: '▹';
    position: absolute;
    left: 0;
    top: 10px;
    color: var(--primary-color);
    font-size: 20px;
}

/* ====== HIGHLIGHT BOX ====== */
.highlight-box {
    background: rgba(0, 102, 255, 0.05);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    padding: 25px;
    margin: 30px 0;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.highlight-icon {
    font-size: 32px;
    flex-shrink: 0;
    line-height: 1;
}

.highlight-content h4 {
    color: var(--primary-color);
    margin: 0 0 10px;
}

.highlight-content p {
    margin: 0;
    color: var(--text-secondary);
}

/* ====== INFO BOX ====== */
.info-box {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin: 25px 0;
    color: var(--text-secondary);
    line-height: 1.8;
}

.info-box strong {
    color: var(--primary-color);
}

/* ====== WARNING BOX ====== */
.warning-box {
    background: rgba(255, 193, 7, 0.05);
    border-left: 4px solid #ffc107;
    border-radius: 8px;
    padding: 25px;
    margin: 30px 0;
}

.warning-box strong {
    color: #ffc107;
    display: block;
    margin-bottom: 15px;
}

.warning-box ul {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary);
}

.warning-box li {
    margin: 8px 0;
    line-height: 1.7;
}

/* ====== TIMELINE SIMPLE ====== */
.timeline-simple {
    margin: 30px 0;
}

.timeline-item-simple {
    display: flex;
    gap: 20px;
    padding: 15px 0;
    border-left: 3px solid rgba(0, 102, 255, 0.2);
    padding-left: 25px;
    position: relative;
}

.timeline-item-simple::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 20px;
    width: 11px;
    height: 11px;
    background: var(--card-bg);
    border: 3px solid rgba(0, 102, 255, 0.5);
    border-radius: 50%;
}

.timeline-item-simple.active::before {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.timeline-item-simple.future {
    opacity: 0.7;
}

.timeline-item-simple.future::before {
    background: transparent;
    border-color: #ffc107;
    border-style: dashed;
}

.timeline-item-simple .year {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 18px;
    min-width: 60px;
}

.timeline-item-simple .event {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ====== PRINCIPLES GRID ====== */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.principle-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
}

.principle-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.principle-number {
    background: var(--accent-gradient);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.principle-card h4 {
    font-size: 18px;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.principle-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ====== CHAPTERS LIST ====== */
.chapters-list {
    margin: 30px 0;
}

.chapter-item {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    align-items: flex-start;
}

.chapter-item:hover {
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.chapter-item.intro-chapter {
    opacity: 0.7;
}

.chapter-number {
    background: var(--accent-gradient);
    color: white;
    min-width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.chapter-content h4 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--text-primary);
}

.chapter-content p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ====== PDCA ====== */
.pdca-container {
    margin: 40px 0;
}

.pdca-cycle {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.pdca-item {
    background: var(--card-bg);
    border: 2px solid rgba(0, 102, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.3s ease;
}

.pdca-item:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.2);
}

.pdca-item.plan { border-color: #0066FF; }
.pdca-item.do { border-color: #00D4FF; }
.pdca-item.check { border-color: #00FF88; }
.pdca-item.act { border-color: #FF6B00; }

.pdca-letter {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.plan .pdca-letter { background: #0066FF; }
.do .pdca-letter { background: #00D4FF; }
.check .pdca-letter { background: #00FF88; }
.act .pdca-letter { background: #FF6B00; }

.pdca-item h4 {
    margin: 0 0 15px;
    font-size: 20px;
}

.pdca-item p {
    margin: 0 0 15px;
    line-height: 1.8;
}

.pdca-chapters {
    color: var(--text-secondary);
    font-size: 13px;
    font-style: italic;
}

/* ====== TWO COLUMNS ====== */
.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 30px 0;
}

.column h4 {
    font-size: 18px;
    margin-bottom: 15px;
}

/* ====== STAKEHOLDERS GRID ====== */
.stakeholders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

.stakeholder-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.stakeholder-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.stakeholder-icon {
    font-size: 36px;
    margin-bottom: 10px;
    display: block;
}

.stakeholder-card h5 {
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
}

/* ====== DOC LIST ====== */
.doc-list {
    margin: 30px 0;
}

.doc-item {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.doc-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
}

.doc-item strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.doc-item p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ====== STEPS CONTAINER ====== */
.steps-container {
    margin: 30px 0;
}

.step-item {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    align-items: flex-start;
}

.step-item:hover {
    border-color: var(--primary-color);
    transform: translateX(10px);
}

.step-number {
    background: var(--accent-gradient);
    color: white;
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.step-content h4 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--text-primary);
}

.step-content p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ====== CERTIFICATION PROCESS ====== */
.certification-process {
    margin: 30px 0;
}

.cert-phase {
    background: var(--card-bg);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.phase-header {
    padding: 20px;
    color: white;
    font-weight: 600;
}

.phase-header.phase-1 { background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%); }
.phase-header.phase-2 { background: linear-gradient(135deg, #00D4FF 0%, #00A8CC 100%); }
.phase-header.phase-3 { background: linear-gradient(135deg, #00FF88 0%, #00CC6E 100%); }

.phase-header h4 {
    margin: 0;
    font-size: 20px;
}

.phase-content {
    padding: 25px;
}

.phase-content p {
    margin: 0 0 15px;
    color: var(--text-secondary);
}

.phase-content ul {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary);
}

.phase-content li {
    margin: 8px 0;
    line-height: 1.7;
}

/* ====== KEY TAKEAWAYS ====== */
.key-takeaways {
    background: var(--card-bg);
    border: 2px solid rgba(0, 102, 255, 0.2);
    border-radius: 16px;
    padding: 40px;
    margin: 40px 0;
}

.key-takeaways h3 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 30px;
    color: var(--text-primary);
}

.takeaway-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.takeaway-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.takeaway-icon {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
}

.takeaway-item p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 15px;
}

/* ====== COURSE COMPLETE ====== */
.course-complete {
    text-align: center;
    padding: 50px 20px;
    background: var(--card-bg);
    border-radius: 16px;
    margin-top: 50px;
}

.complete-icon {
    font-size: 64px;
    margin-bottom: 20px;
    display: block;
}

.course-complete h3 {
    font-size: 32px;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.course-complete p {
    color: var(--text-secondary);
    margin-bottom: 30px;
}

/* ====== AUDIT TYPES GRID ====== */
.audit-types-grid {
    display: grid;
    gap: 30px;
    margin: 30px 0;
}

.audit-type-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
}

.type-header {
    padding: 25px;
    color: white;
}

.type-header.type-1 { background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%); }
.type-header.type-2 { background: linear-gradient(135deg, #00D4FF 0%, #00A8CC 100%); }
.type-header.type-3 { background: linear-gradient(135deg, #00FF88 0%, #00CC6E 100%); }

.type-header h3 {
    margin: 0;
    font-size: 20px;
}

.type-content {
    padding: 25px;
}

.type-content p {
    margin: 0 0 15px;
    color: var(--text-secondary);
}

.type-content h4 {
    margin: 15px 0 10px;
    font-size: 16px;
    color: var(--primary-color);
}

.type-badge {
    display: inline-block;
    background: rgba(0, 102, 255, 0.1);
    color: var(--secondary-color);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 15px;
}

/* ====== AUDIT PHASES ====== */
.audit-phases {
    display: grid;
    gap: 25px;
    margin: 30px 0;
}

.audit-phase {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
}

.phase-icon {
    font-size: 36px;
    margin-bottom: 15px;
    display: block;
}

.audit-phase h4 {
    margin: 0 0 15px;
    color: var(--text-primary);
}

/* ====== TECHNIQUES GRID ====== */
.techniques-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.technique-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
}

.technique-icon {
    font-size: 48px;
    margin-bottom: 20px;
    display: block;
}

.technique-card h4 {
    margin: 0 0 15px;
    font-size: 20px;
}

.technique-desc {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.8;
}

.technique-tips {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    margin-top: 20px;
}

.technique-tips h5 {
    color: var(--primary-color);
    font-size: 14px;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.technique-tips ul {
    margin: 0;
    padding-left: 20px;
}

.technique-tips li {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
    margin: 8px 0;
}

/* ====== QUESTION EXAMPLES ====== */
.question-examples {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
}

.question-item {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
}

.question-examples.good .question-item {
    background: rgba(0, 255, 136, 0.05);
    border-left: 3px solid #00FF88;
}

.question-examples.bad .question-item {
    background: rgba(255, 87, 87, 0.05);
    border-left: 3px solid #ff5757;
}

.question-item p {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-style: italic;
}

.question-type {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ====== ÉCARTS GRID ====== */
.ecarts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.ecart-card {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid;
}

.ecart-card.majeur { border-color: #ff5757; }
.ecart-card.mineur { border-color: #ffc107; }
.ecart-card.amelioration { border-color: #00FF88; }

.ecart-header {
    padding: 20px;
    color: white;
}

.ecart-card.majeur .ecart-header { background: #ff5757; }
.ecart-card.mineur .ecart-header { background: #ffc107; color: #333; }
.ecart-card.amelioration .ecart-header { background: #00FF88; color: #333; }

.ecart-header h4 {
    margin: 0;
    font-size: 18px;
}

.ecart-content {
    padding: 25px;
}

.ecart-content p {
    margin: 0 0 15px;
    color: var(--text-secondary);
}

.ecart-content h5 {
    margin: 20px 0 10px;
    color: var(--primary-color);
    font-size: 14px;
}

.ecart-content ul {
    margin: 0 0 20px;
    padding-left: 20px;
}

.ecart-content li {
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.7;
}

.ecart-action {
    background: rgba(0, 102, 255, 0.1);
    padding: 10px 15px;
    border-radius: 8px;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    margin-top: 15px;
}

/* ====== COMPETENCES GRID ====== */
.competences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.competence-category {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
}

.competence-category h4 {
    margin: 0 0 20px;
    font-size: 18px;
    color: var(--text-primary);
}

/* ====== ENJEUX GRID ====== */
.enjeux-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.enjeu-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.enjeu-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.enjeu-icon {
    font-size: 48px;
    margin-bottom: 15px;
    display: block;
}

.enjeu-card h4 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 18px;
}

.enjeu-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* ====== DOC TYPES GRID ====== */
.doc-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

.doc-type-card {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 102, 255, 0.1);
}

.doc-type-header {
    padding: 20px;
    text-align: center;
}

.doc-type-header.documents {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%);
    color: white;
}

.doc-type-header.enregistrements {
    background: linear-gradient(135deg, #00D4FF 0%, #00A8CC 100%);
    color: white;
}

.doc-type-header h4 {
    margin: 0 0 10px;
    font-size: 20px;
}

.doc-type-label {
    font-size: 13px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.doc-type-content {
    padding: 25px;
}

.doc-type-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-type-content li {
    padding: 8px 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.doc-type-content li strong {
    color: var(--primary-color);
}

/* ====== PYRAMIDE DOCUMENTAIRE ====== */
.pyramide-container {
    margin: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pyramide-level {
    position: relative;
    margin: 0 auto;
    background: var(--card-bg);
    border: 2px solid rgba(0, 102, 255, 0.2);
    border-radius: 8px;
    padding: 25px;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.pyramide-level:hover {
    transform: scale(1.02);
    border-color: var(--primary-color);
}

.pyramide-level.level-1 {
    width: 90%;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.15) 0%, rgba(0, 82, 204, 0.1) 100%);
}

.pyramide-level.level-2 {
    width: 85%;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.12) 0%, rgba(0, 168, 204, 0.08) 100%);
}

.pyramide-level.level-3 {
    width: 80%;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 204, 110, 0.06) 100%);
}

.pyramide-level.level-4 {
    width: 75%;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.08) 0%, rgba(204, 85, 0, 0.04) 100%);
}

.pyramide-content {
    text-align: center;
}

.pyramide-content h4 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 18px;
}

.pyramide-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.pyramide-label {
    display: inline-block;
    background: rgba(0, 102, 255, 0.1);
    color: var(--secondary-color);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 15px;
}

/* ====== NIVEAU DETAILS ====== */
.niveau-details {
    margin: 30px 0;
}

.niveau-item {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.niveau-numero {
    background: var(--accent-gradient);
    color: white;
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.niveau-info h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.niveau-info p {
    margin: 5px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.niveau-info p strong {
    color: var(--primary-color);
}

/* ====== CYCLE DE VIE ====== */
.cycle-vie {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 30px 0;
    overflow-x: auto;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 12px;
}

.cycle-step {
    text-align: center;
    min-width: 120px;
}

.cycle-icon {
    font-size: 36px;
    margin-bottom: 10px;
    display: block;
}

.cycle-step h4 {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--text-primary);
}

.cycle-step p {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.cycle-arrow {
    font-size: 24px;
    color: var(--primary-color);
    flex-shrink: 0;
}

/* ====== RULES GRID ====== */
.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.rule-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.rule-icon {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
}

.rule-card h5 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 16px;
}

.rule-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* ====== PROCESSUS SCHEMA ====== */
.processus-schema {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
    padding: 30px;
    background: var(--card-bg);
    border-radius: 12px;
    overflow-x: auto;
}

.processus-element {
    min-width: 180px;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.processus-element.entree {
    background: rgba(0, 102, 255, 0.1);
    border: 2px solid var(--primary-color);
}

.processus-element.activite {
    background: rgba(0, 212, 255, 0.1);
    border: 2px solid #00D4FF;
}

.processus-element.sortie {
    background: rgba(0, 255, 136, 0.1);
    border: 2px solid #00FF88;
}

.element-label {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 16px;
}

.processus-element ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.processus-element li {
    color: var(--text-secondary);
    font-size: 14px;
    padding: 5px 0;
}

.activite-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activite-content p {
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
}

.activite-content span {
    color: var(--text-secondary);
    font-size: 13px;
}

.processus-arrow {
    font-size: 28px;
    color: var(--primary-color);
    flex-shrink: 0;
}

/* ====== PROCESS TYPES ====== */
.process-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.process-type-card {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 102, 255, 0.1);
}

.process-type-header {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.process-type-card.management .process-type-header {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%);
}

.process-type-card.realisation .process-type-header {
    background: linear-gradient(135deg, #00D4FF 0%, #00A8CC 100%);
}

.process-type-card.support .process-type-header {
    background: linear-gradient(135deg, #00FF88 0%, #00CC6E 100%);
}

.process-type-icon {
    font-size: 40px;
}

.process-type-header h4 {
    margin: 0;
    color: white;
    font-size: 18px;
}

.process-type-content {
    padding: 25px;
}

.process-type-content p {
    margin: 0 0 15px;
    color: var(--text-secondary);
}

.process-type-content h5 {
    margin: 15px 0 10px;
    color: var(--primary-color);
    font-size: 14px;
}

.process-type-content ul {
    margin: 0;
    padding-left: 20px;
}

.process-type-content li {
    color: var(--text-secondary);
    margin: 6px 0;
    line-height: 1.6;
}

/* ====== CARTOGRAPHIE EXAMPLE ====== */
.carto-example {
    background: var(--card-bg);
    border: 2px solid rgba(0, 102, 255, 0.2);
    border-radius: 16px;
    padding: 30px;
    margin: 30px 0;
}

.carto-section {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.carto-section h5 {
    margin: 0 0 15px;
    text-align: center;
    color: var(--text-primary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.carto-management {
    background: rgba(0, 102, 255, 0.08);
    border: 1px solid rgba(0, 102, 255, 0.2);
}

.carto-realisation {
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.carto-support {
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.carto-processes {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.carto-processes span {
    background: var(--card-bg);
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    border: 1px solid rgba(0, 102, 255, 0.1);
}

.carto-middle {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 15px 0;
}

.carto-client {
    text-align: center;
    min-width: 80px;
}

.client-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.carto-client span {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}

.carto-client small {
    color: var(--text-secondary);
    font-size: 11px;
}

.carto-flow {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.carto-flow span:not(.arrow) {
    background: white;
    color: #333;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid rgba(0, 212, 255, 0.3);
}

.carto-flow .arrow {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: bold;
}

/* ====== FICHE PROCESSUS ====== */
.fiche-processus {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    margin: 30px 0;
}

.fiche-item {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.fiche-item:last-child {
    border-bottom: none;
}

.fiche-label {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 14px;
}

.fiche-value {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ====== SMART GRID ====== */
.smart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.smart-item {
    display: flex;
    gap: 15px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    align-items: flex-start;
}

.smart-letter {
    background: var(--accent-gradient);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.smart-content h5 {
    margin: 0 0 5px;
    color: var(--text-primary);
    font-size: 15px;
}

.smart-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ====== INDICATEURS EXEMPLES ====== */
.indicateurs-exemples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.indic-category {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
}

.indic-category h5 {
    margin: 0 0 15px;
    color: var(--text-primary);
    font-size: 16px;
    text-align: center;
}

.indic-category ul {
    margin: 0;
    padding-left: 20px;
}

.indic-category li {
    color: var(--text-secondary);
    margin: 10px 0;
    line-height: 1.6;
}

/* ====== DIGITAL BENEFITS ====== */
.digital-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.benefit-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.benefit-icon {
    font-size: 40px;
    margin-bottom: 12px;
    display: block;
}

.benefit-card h5 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 15px;
}

.benefit-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ====== TOOLS LIST ====== */
.tools-list {
    margin: 30px 0;
}

.tool-item {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
}

.tool-item h5 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 16px;
}

.tool-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ====== RESPONSIVE ADDITIONS ====== */
@media (max-width: 768px) {
    .enjeux-grid,
    .doc-types-grid,
    .process-types,
    .smart-grid,
    .indicateurs-exemples,
    .digital-benefits {
        grid-template-columns: 1fr;
    }

    .pyramide-level {
        width: 100% !important;
    }

    .niveau-item {
        flex-direction: column;
        text-align: center;
    }

    .niveau-numero {
        margin: 0 auto 15px;
    }

    .cycle-vie {
        flex-direction: column;
        align-items: center;
    }

    .cycle-arrow {
        transform: rotate(90deg);
    }

    .processus-schema {
        flex-direction: column;
    }

    .processus-arrow {
        transform: rotate(90deg);
    }

    .carto-middle {
        flex-direction: column;
    }

    .carto-flow {
        flex-direction: column;
    }

    .carto-flow .arrow {
        transform: rotate(90deg);
    }

    .fiche-item {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 10px;
    }
}

/* ====== STYLES ISO 45001 - SÉCURITÉ ====== */

/* Réglementaire Grid */
.reglementaire-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.reglem-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.reglem-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.reglem-icon {
    font-size: 40px;
    margin-bottom: 15px;
    display: block;
}

.reglem-card h4 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 18px;
}

.reglem-card p {
    margin: 5px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.reglem-card p strong {
    color: var(--primary-color);
}

/* Principes de prévention */
.principes-prevention {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

.principe-item {
    display: flex;
    gap: 15px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    align-items: center;
}

.principe-num {
    background: var(--accent-gradient);
    color: white;
    min-width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.principe-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* Leadership Grid */
.leadership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.leadership-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.leadership-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.leadership-icon {
    font-size: 36px;
    margin-bottom: 12px;
    display: block;
}

.leadership-card h4 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.leadership-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

/* Politique Example */
.politique-example {
    background: var(--card-bg);
    border: 2px solid rgba(0, 102, 255, 0.2);
    border-radius: 12px;
    padding: 30px;
    margin: 30px 0;
}

.politique-example h5 {
    margin: 0 0 15px;
    color: var(--primary-color);
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.politique-example p {
    margin: 15px 0;
    color: var(--text-secondary);
    line-height: 1.8;
}

.politique-example ul {
    margin: 10px 0;
    padding-left: 30px;
}

.politique-example li {
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.7;
}

/* Évaluation Risques Steps */
.eval-risques-steps {
    margin: 30px 0;
}

.eval-step {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.eval-number {
    background: var(--accent-gradient);
    color: white;
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.eval-content h4 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 16px;
}

.eval-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* Hiérarchie des mesures */
.hierarchie-mesures {
    margin: 30px 0;
}

.mesure-level {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.mesure-level:hover {
    transform: translateX(10px);
}

.mesure-level.level-1 { border-left-color: #00FF88; }
.mesure-level.level-2 { border-left-color: #00D4FF; }
.mesure-level.level-3 { border-left-color: #0066FF; }
.mesure-level.level-4 { border-left-color: #ffc107; }
.mesure-level.level-5 { border-left-color: #ff5757; }

.mesure-level {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mesure-icon {
    font-size: 28px;
}

.mesure-level h5 {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
}

.mesure-level p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.mesure-exemple {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
    background: rgba(0, 102, 255, 0.05);
    padding: 10px;
    border-radius: 6px;
}

/* Consultation Grid */
.consultation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.consultation-item {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.consult-icon {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
}

.consultation-item h5 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 15px;
}

.consultation-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* Objectifs Grid */
.objectifs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.objectif-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.objectif-card h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 16px;
}

.objectif-card p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.objectif-card p strong {
    color: var(--primary-color);
}

/* Plan Action Example */
.plan-action-example {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.2);
    border-radius: 12px;
    margin: 30px 0;
    overflow: hidden;
}

.plan-header {
    background: var(--accent-gradient);
    color: white;
    padding: 15px 20px;
}

.plan-header h5 {
    margin: 0;
    font-size: 16px;
}

.plan-content {
    padding: 20px;
}

.plan-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.plan-row:last-child {
    border-bottom: none;
}

.plan-label {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 14px;
}

.plan-value {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

/* Indicateurs List */
.indicateurs-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.indic-item {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
}

.indic-item strong {
    display: block;
    color: var(--primary-color);
    margin-bottom: 5px;
    font-size: 15px;
}

.indic-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Revue Items */
.revue-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

.revue-item {
    display: flex;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    align-items: center;
}

.revue-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.revue-item span:not(.revue-icon) {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* Incident Process */
.incident-process {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 30px 0;
    overflow-x: auto;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 12px;
}

.incident-step {
    text-align: center;
    min-width: 140px;
}

.incident-icon {
    font-size: 32px;
    margin-bottom: 10px;
    display: block;
}

.incident-step h5 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.incident-step p {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.process-arrow {
    font-size: 24px;
    color: var(--primary-color);
    flex-shrink: 0;
}

/* Arbre des causes */
.arbre-causes {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    margin: 30px 0;
}

.arbre-level {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.arbre-links {
    text-align: center;
    color: var(--primary-color);
    font-size: 24px;
    margin: 10px 0;
}

.cause-box {
    border-radius: 8px;
    padding: 20px;
    max-width: 500px;
    text-align: center;
}

.cause-box.accident {
    background: rgba(255, 87, 87, 0.1);
    border: 2px solid #ff5757;
}

.cause-box.direct {
    background: rgba(255, 193, 7, 0.1);
    border: 2px solid #ffc107;
}

.cause-box.underlying {
    background: rgba(0, 212, 255, 0.1);
    border: 2px solid #00D4FF;
}

.cause-box.root {
    background: rgba(0, 102, 255, 0.1);
    border: 2px solid #0066FF;
}

.cause-box strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 15px;
    text-transform: uppercase;
}

.cause-box p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

/* Bénéfices Grid */
.benefices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.benefice-item {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.benefice-item h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.benefice-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* Responsive pour ISO 45001 */
@media (max-width: 768px) {
    .reglementaire-grid,
    .leadership-grid,
    .consultation-grid,
    .objectifs-grid,
    .benefices-grid,
    .revue-items {
        grid-template-columns: 1fr;
    }

    .principes-prevention {
        grid-template-columns: 1fr;
    }

    .eval-step {
        flex-direction: column;
        text-align: center;
    }

    .eval-number {
        margin: 0 auto 15px;
    }

    .incident-process {
        flex-direction: column;
    }

    .process-arrow {
        transform: rotate(90deg);
    }

    .plan-row {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* ====== STYLES ANALYSE DES RISQUES ====== */

/* Familles de méthodes */
.familles-methodes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.famille-card {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid;
}

.famille-card.a-priori { border-color: #00D4FF; }
.famille-card.a-posteriori { border-color: #FF6B00; }

.famille-icon {
    font-size: 48px;
    text-align: center;
    padding: 20px;
    background: rgba(0, 102, 255, 0.05);
}

.famille-card h4 {
    text-align: center;
    margin: 0;
    padding: 15px 20px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1) 0%, rgba(0, 82, 204, 0.05) 100%);
    color: var(--primary-color);
    font-size: 20px;
}

.famille-desc {
    text-align: center;
    padding: 15px 20px;
    color: var(--text-secondary);
    font-size: 15px;
    font-style: italic;
}

.famille-card ul {
    margin: 0 0 20px;
    padding: 0 30px 0 40px;
}

.famille-card li {
    color: var(--text-secondary);
    margin: 12px 0;
    line-height: 1.7;
}

.famille-card li strong {
    color: var(--text-primary);
}

.famille-usage {
    background: rgba(0, 102, 255, 0.08);
    padding: 15px 20px;
    margin: 0;
    border-top: 1px solid rgba(0, 102, 255, 0.2);
    font-size: 14px;
    color: var(--text-secondary);
}

.famille-usage strong {
    color: var(--primary-color);
}

/* Étapes analyse */
.etapes-analyse {
    margin: 30px 0;
}

.etape-analyse {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.etape-num {
    background: var(--accent-gradient);
    color: white;
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.etape-content h4 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 17px;
}

.etape-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

/* Règles d'or */
.regles-or {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.regle-item {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.regle-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.regle-icon {
    font-size: 36px;
    margin-bottom: 12px;
    display: block;
}

.regle-item h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.regle-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

/* Méthode Cards */
.methode-card {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(0, 102, 255, 0.2);
    margin: 30px 0;
}

.methode-header {
    background: var(--accent-gradient);
    color: white;
    padding: 15px 25px;
    text-align: center;
}

.methode-header h4 {
    margin: 0;
    font-size: 19px;
}

.methode-body {
    padding: 25px;
}

.carac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.carac-item {
    text-align: center;
}

.carac-item strong {
    display: block;
    color: var(--primary-color);
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.carac-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* Cotation AMDEC */
.cotation-amdec {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.cot-box {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.cot-box h5 {
    margin: 0 0 15px;
    color: var(--primary-color);
    font-size: 17px;
    text-align: center;
}

.cot-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cot-level {
    background: rgba(0, 102, 255, 0.05);
    padding: 12px 15px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* Formule Box */
.formule-box {
    text-align: center;
    background: var(--card-bg);
    border: 2px solid rgba(0, 102, 255, 0.2);
    border-radius: 12px;
    padding: 25px;
    margin: 20px 0;
}

.formule-box h5 {
    margin: 0 0 10px;
    color: var(--primary-color);
    font-size: 22px;
}

.formule-box p {
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Exemple AMDEC */
.exemple-amdec {
    margin: 30px 0;
}

.exemple-amdec table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
}

.exemple-amdec th,
.exemple-amdec td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.exemple-amdec th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

.exemple-amdec td {
    color: var(--text-secondary);
    font-size: 13px;
}

.exemple-amdec td:nth-child(6),
.exemple-amdec td:nth-child(7),
.exemple-amdec td:nth-child(8),
.exemple-amdec td:nth-child(9) {
    text-align: center;
    font-weight: 600;
}

.actions-amdec {
    background: rgba(0, 102, 255, 0.05);
    padding: 20px;
    margin-top: 15px;
    border-radius: 8px;
}

.actions-amdec h5 {
    margin: 0 0 12px;
    color: var(--primary-color);
    font-size: 16px;
}

.actions-amdec ul {
    margin: 0;
    padding-left: 20px;
}

.actions-amdec li {
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.7;
}

.actions-amdec strong {
    color: var(--primary-color);
}

/* Principes arbre */
.principes-arbre {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.principe-arbre {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.principe-icon {
    font-size: 40px;
    margin-bottom: 15px;
    display: block;
}

.principe-arbre h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 16px;
}

.principe-arbre p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

/* Liaisons logiques */
.liaisons-logiques {
    margin: 30px 0;
}

.liaison-item {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.liaison-symbole {
    min-width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.liaison-symbole.et { background: linear-gradient(135deg, #00FF88 0%, #00CC6E 100%); }
.liaison-symbole.ou { background: linear-gradient(135deg, #ffc107 0%, #D68910 100%); }
.liaison-symbole.chain { background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%); }

.liaison-content h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 17px;
}

.liaison-content p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

.liaison-content u {
    color: var(--primary-color);
    font-weight: 600;
}

.liaison-note {
    font-style: italic;
    color: var(--primary-color) !important;
    font-size: 13px !important;
}

/* Arbre exemple */
.arbre-exemple {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    margin: 30px 0;
}

.arbre-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.fait-box {
    background: rgba(0, 102, 255, 0.1);
    border: 2px solid rgba(0, 102, 255, 0.3);
    border-radius: 10px;
    padding: 15px 20px;
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
    max-width: 400px;
}

.fait-box.accident {
    background: rgba(255, 87, 87, 0.15);
    border-color: #ff5757;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 15px;
}

.fait-box.direct {
    background: rgba(255, 193, 7, 0.15);
    border-color: #ffc107;
}

.fait-box.root {
    background: rgba(0, 255, 136, 0.15);
    border-color: #00FF88;
}

.arbre-arrow {
    font-size: 32px;
    color: var(--primary-color);
}

.et-box {
    background: var(--accent-gradient);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 16px;
}

.arbre-level.multi {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.arbre-level.multi .fait-box {
    flex: 1;
    min-width: 200px;
    max-width: 250px;
}

.actions-arbre {
    background: rgba(0, 102, 255, 0.05);
    padding: 20px;
    margin-top: 30px;
    border-radius: 8px;
}

.actions-arbre h5 {
    margin: 0 0 12px;
    color: var(--primary-color);
    font-size: 16px;
}

.actions-arbre ul {
    margin: 0;
    padding-left: 20px;
}

.actions-arbre li {
    color: var(--text-secondary);
    margin: 10px 0;
    line-height: 1.7;
}

.actions-arbre strong {
    color: var(--primary-color);
}

/* 5M Familles */
.cinq-m-familles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.m-famille {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.m-famille.optionnel {
    opacity: 0.7;
    border-style: dashed;
}

.m-icon {
    font-size: 36px;
    text-align: center;
    margin-bottom: 12px;
    display: block;
}

.m-famille h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 16px;
    text-align: center;
}

.m-famille ul {
    margin: 0;
    padding-left: 20px;
}

.m-famille li {
    color: var(--text-secondary);
    margin: 8px 0;
    font-size: 13px;
    line-height: 1.6;
}

/* Étapes 5M */
.etapes-5m {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 30px 0;
}

.etape-5m {
    display: flex;
    gap: 15px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    align-items: center;
}

.etape-num-5m {
    background: var(--accent-gradient);
    color: white;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.etape-5m p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* Poisson diagram (Ishikawa) */
.exemple-5m {
    margin: 30px 0;
}

.poisson-diagram {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 40px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    overflow-x: auto;
}

.aretes-gauche,
.aretes-droite {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 1;
}

.arete {
    position: relative;
}

.arete-titre {
    background: var(--accent-gradient);
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
}

.arete-causes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cause {
    background: rgba(0, 102, 255, 0.08);
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    border-left: 3px solid var(--primary-color);
}

.tete-poisson {
    min-width: 180px;
    flex-shrink: 0;
}

.probleme {
    background: linear-gradient(135deg, #ff5757 0%, #ff3838 100%);
    color: white;
    padding: 25px;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}

.actions-5m {
    background: rgba(0, 102, 255, 0.05);
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
}

.actions-5m h5 {
    margin: 0 0 12px;
    color: var(--primary-color);
    font-size: 16px;
}

.actions-5m ul {
    margin: 0;
    padding-left: 20px;
}

.actions-5m li {
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.7;
}

.actions-5m strong {
    color: var(--primary-color);
}

/* Mots-clés HAZOP */
.mots-cles-hazop {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.mot-cle {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.mot {
    background: var(--accent-gradient);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 12px;
    display: inline-block;
}

.mot-cle p {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 14px;
}

.mot-cle .exemple {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
    background: rgba(0, 102, 255, 0.05);
    padding: 8px;
    border-radius: 6px;
    margin-top: 10px;
}

/* Exemple HAZOP */
.exemple-hazop {
    margin: 30px 0;
    overflow-x: auto;
}

.exemple-hazop table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
}

.exemple-hazop th,
.exemple-hazop td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.exemple-hazop th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

.exemple-hazop td {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* What If */
.exemple-whatif {
    margin: 30px 0;
    overflow-x: auto;
}

.exemple-whatif table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
}

.exemple-whatif th,
.exemple-whatif td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.exemple-whatif th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

.exemple-whatif td {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

/* Structure Bow Tie */
.structure-bowtie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.bowtie-element {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.bowtie-element.central {
    border-color: #ff5757;
    border-width: 2px;
}

.bowtie-icon {
    font-size: 36px;
    margin-bottom: 12px;
    display: block;
}

.bowtie-element h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.bowtie-element p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

/* Exemple Bow Tie */
.exemple-bowtie {
    margin: 30px 0;
}

.bowtie-visual {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow-x: auto;
}

.bowtie-left,
.bowtie-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

.bowtie-causes,
.bowtie-consequences {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cause-box,
.consequence-box {
    background: rgba(255, 193, 7, 0.15);
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 12px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

.consequence-box {
    background: rgba(255, 87, 87, 0.15);
    border-color: #ff5757;
}

.barrieres {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.barriere {
    background: rgba(0, 255, 136, 0.15);
    border: 2px solid #00FF88;
    border-radius: 8px;
    padding: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
    font-weight: 600;
}

.bowtie-center {
    min-width: 150px;
    flex-shrink: 0;
}

.event-redoute {
    background: linear-gradient(135deg, #ff5757 0%, #ff3838 100%);
    color: white;
    padding: 20px;
    border-radius: 50%;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}

.analyse-bowtie {
    background: rgba(0, 102, 255, 0.05);
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
}

.analyse-bowtie h5 {
    margin: 0 0 12px;
    color: var(--primary-color);
    font-size: 16px;
}

.analyse-bowtie ul {
    margin: 0;
    padding-left: 20px;
}

.analyse-bowtie li {
    color: var(--text-secondary);
    margin: 10px 0;
    line-height: 1.7;
}

.analyse-bowtie strong {
    color: var(--primary-color);
}

/* Tableau comparatif */
.tableau-comparatif {
    margin: 30px 0;
    overflow-x: auto;
}

.tableau-comparatif table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
}

.tableau-comparatif th,
.tableau-comparatif td {
    padding: 15px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tableau-comparatif th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
}

.tableau-comparatif td {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.tableau-comparatif td:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

/* Arbre de décision */
.arbre-decision {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    margin: 30px 0;
}

.decision-start {
    background: var(--accent-gradient);
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
    font-size: 17px;
    margin: 0 auto;
    max-width: 400px;
}

.decision-arrow {
    text-align: center;
    font-size: 32px;
    color: var(--primary-color);
    margin: 15px 0;
}

.decision-question {
    background: rgba(0, 102, 255, 0.1);
    padding: 15px 20px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 auto;
    max-width: 400px;
}

.decision-branches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.branch {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.branch-label {
    background: var(--accent-gradient);
    color: white;
    padding: 10px 30px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 16px;
}

.branch-arrow {
    font-size: 32px;
    color: var(--primary-color);
    margin: 10px 0;
}

.decision-result {
    background: rgba(0, 255, 136, 0.15);
    border: 2px solid #00FF88;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.decision-result h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 17px;
}

.decision-result p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.secteur-branches {
    display: grid;
    gap: 12px;
    margin-top: 15px;
}

.secteur-item {
    background: rgba(0, 102, 255, 0.08);
    border-left: 3px solid var(--primary-color);
    padding: 12px 15px;
    border-radius: 6px;
}

.secteur-item strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 5px;
    font-size: 14px;
}

.secteur-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Responsive Analyse Risques */
@media (max-width: 768px) {
    .familles-methodes,
    .regles-or,
    .carac-grid,
    .principes-arbre,
    .cinq-m-familles,
    .mots-cles-hazop,
    .structure-bowtie {
        grid-template-columns: 1fr;
    }

    .etape-analyse,
    .liaison-item {
        flex-direction: column;
        text-align: center;
    }

    .etape-num,
    .liaison-symbole {
        margin: 0 auto 15px;
    }

    .poisson-diagram {
        flex-direction: column;
    }

    .aretes-gauche,
    .aretes-droite {
        width: 100%;
    }

    .bowtie-visual {
        flex-direction: column;
    }

    .bowtie-left,
    .bowtie-right {
        width: 100%;
    }

    .decision-branches {
        grid-template-columns: 1fr;
    }
}

/* ====== STYLES DUERP ====== */

/* Objectifs DUERP */
.objectifs-duerp {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.objectif-duerp {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.objectif-duerp:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.obj-icon {
    font-size: 36px;
    margin-bottom: 12px;
    display: block;
}

.objectif-duerp h5 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 16px;
}

.objectif-duerp p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* Textes Légaux */
.textes-legaux {
    margin: 30px 0;
}

.texte-item {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.texte-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.texte-content h5 {
    margin: 0 0 8px;
    color: var(--primary-color);
    font-size: 16px;
}

.texte-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

/* Concernés Grid */
.concernes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.concerne-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
}

.concerne-icon {
    font-size: 40px;
    margin-bottom: 12px;
    display: block;
}

.concerne-card h5 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 16px;
}

.concerne-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Sanctions Box */
.sanctions-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.sanction-item {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 25px;
    border-left: 4px solid;
}

.sanction-item.penal { border-left-color: #ff5757; }
.sanction-item.civil { border-left-color: #ffc107; }
.sanction-item.admin { border-left-color: #0066FF; }

.sanction-item h5 {
    margin: 0 0 15px;
    color: var(--text-primary);
    font-size: 17px;
}

.sanction-item ul {
    margin: 0;
    padding-left: 20px;
}

.sanction-item li {
    color: var(--text-secondary);
    margin: 10px 0;
    line-height: 1.7;
}

.sanction-item li strong {
    color: var(--primary-color);
}

/* Structure DUERP */
.structure-duerp {
    margin: 30px 0;
}

.struct-section {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.struct-header {
    padding: 15px 20px;
    color: white;
}

.struct-header.header-1 { background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%); }
.struct-header.header-2 { background: linear-gradient(135deg, #00D4FF 0%, #00A8CC 100%); }
.struct-header.header-3 { background: linear-gradient(135deg, #00FF88 0%, #00CC6E 100%); }
.struct-header.header-4 { background: linear-gradient(135deg, #FF6B00 0%, #CC5500 100%); }
.struct-header.header-5 { background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%); }
.struct-header.header-6 { background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%); }
.struct-header.header-7 { background: linear-gradient(135deg, #F39C12 0%, #D68910 100%); }

.struct-header h4 {
    margin: 0;
    font-size: 17px;
}

.struct-content {
    padding: 20px;
}

.struct-content ul {
    margin: 0;
    padding-left: 20px;
}

.struct-content li {
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.6;
}

/* Méthodologie Steps */
.methodo-steps {
    margin: 30px 0;
}

.methodo-step {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.methodo-number {
    background: var(--accent-gradient);
    color: white;
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.methodo-content h4 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 18px;
}

.methodo-content ul {
    margin: 0;
    padding-left: 20px;
}

.methodo-content li {
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.7;
}

/* Découpage Options */
.decoupage-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.decoupage-option {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.decoupage-option h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 16px;
}

.decoupage-option p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.decoupage-option p strong {
    color: var(--primary-color);
}

/* Risques Familles */
.risques-familles {
    margin: 30px 0;
}

.risque-famille {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.famille-header {
    padding: 15px 20px;
    color: white;
    display: flex;
    align-items: center;
    gap: 15px;
}

.famille-header.meca { background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%); }
.famille-header.phys { background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%); }
.famille-header.chim { background: linear-gradient(135deg, #F39C12 0%, #D68910 100%); }
.famille-header.bio { background: linear-gradient(135deg, #27AE60 0%, #229954 100%); }
.famille-header.ergo { background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%); }
.famille-header.psy { background: linear-gradient(135deg, #E67E22 0%, #CA6F1E 100%); }
.famille-header.org { background: linear-gradient(135deg, #16A085 0%, #138D75 100%); }
.famille-header.incendie { background: linear-gradient(135deg, #C0392B 0%, #A93226 100%); }

.famille-icon {
    font-size: 28px;
}

.famille-header h4 {
    margin: 0;
    font-size: 17px;
}

.famille-content {
    padding: 20px;
}

.famille-content ul {
    margin: 0;
    padding-left: 20px;
}

.famille-content li {
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.6;
}

/* Échelles de cotation */
.echelles-cotation {
    display: grid;
    gap: 25px;
    margin: 30px 0;
}

.echelle-box {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
}

.echelle-box h4 {
    margin: 0 0 20px;
    color: var(--text-primary);
    text-align: center;
    font-size: 18px;
}

.echelle-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.echelle-item {
    display: flex;
    gap: 15px;
    background: rgba(0, 102, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    align-items: center;
}

.echelle-note {
    background: var(--accent-gradient);
    color: white;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.echelle-desc strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 5px;
    font-size: 15px;
}

.echelle-desc p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* Formule Criticité */
.formule-criticite {
    text-align: center;
    margin: 30px 0;
}

.formule-box {
    background: var(--card-bg);
    border: 2px solid rgba(0, 102, 255, 0.2);
    border-radius: 12px;
    padding: 30px;
    display: inline-block;
}

.formule-box h4 {
    margin: 0 0 10px;
    color: var(--primary-color);
    font-size: 24px;
}

.formule-box p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Seuils Criticité */
.seuils-criticite {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.seuil {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    align-items: center;
    border-left: 4px solid;
}

.seuil.acceptable { border-left-color: #00FF88; }
.seuil.tolerable { border-left-color: #ffc107; }
.seuil.inacceptable { border-left-color: #ff5757; }

.seuil-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.seuil-content h5 {
    margin: 0 0 5px;
    color: var(--text-secondary);
    font-size: 14px;
}

.seuil-content strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 18px;
}

.seuil-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Exemple Évaluation */
.exemple-eval {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    margin: 30px 0;
}

.exemple-header {
    background: rgba(0, 102, 255, 0.1);
    padding: 15px 20px;
}

.exemple-header h5 {
    margin: 0 0 5px;
    color: var(--text-primary);
    font-size: 16px;
}

.exemple-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.exemple-header span {
    color: var(--primary-color);
    font-weight: 600;
}

.exemple-table {
    padding: 20px;
    overflow-x: auto;
}

.exemple-table table {
    width: 100%;
    border-collapse: collapse;
}

.exemple-table th,
.exemple-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.exemple-table th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
}

.exemple-table td {
    color: var(--text-secondary);
    font-size: 14px;
}

.niveau-vert { color: #00FF88; }
.niveau-orange { color: #ffc107; }
.niveau-rouge { color: #ff5757; }

.exemple-actions {
    padding: 0 20px 20px;
}

.exemple-actions h5 {
    margin: 0 0 10px;
    color: var(--primary-color);
    font-size: 15px;
}

.exemple-actions ul {
    margin: 0;
    padding-left: 20px;
}

.exemple-actions li {
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.7;
}

/* Hiérarchie Prévention */
.hierarchie-prevention {
    margin: 30px 0;
}

.prev-level {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    border-left: 4px solid;
    align-items: flex-start;
}

.prev-level.prev-1 { border-left-color: #00FF88; }
.prev-level.prev-2 { border-left-color: #00D4FF; }
.prev-level.prev-3 { border-left-color: #ffc107; }
.prev-level.prev-4 { border-left-color: #0066FF; }

.prev-num {
    background: var(--accent-gradient);
    color: white;
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.prev-level > div:last-child {
    flex: 1;
}

.prev-level h5 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 16px;
}

.prev-level p {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.prev-ex {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
    background: rgba(0, 102, 255, 0.05);
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 10px;
    line-height: 1.5;
}

/* Plan Structure */
.plan-structure {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.plan-item {
    display: flex;
    gap: 15px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    align-items: flex-start;
}

.plan-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.plan-detail h5 {
    margin: 0 0 5px;
    color: var(--text-primary);
    font-size: 15px;
}

.plan-detail p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Exemple Plan Action */
.exemple-plan-action {
    margin: 30px 0;
    border-radius: 12px;
}

.exemple-plan-action table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 102, 255, 0.1);
    table-layout: auto;
}

.exemple-plan-action thead {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.15) 0%, rgba(0, 82, 204, 0.1) 100%);
}

.exemple-plan-action th {
    padding: 12px 10px;
    text-align: left;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(0, 102, 255, 0.2);
    white-space: nowrap;
}

.exemple-plan-action tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.exemple-plan-action tbody tr:hover {
    background: rgba(0, 102, 255, 0.03);
}

.exemple-plan-action tbody tr:last-child {
    border-bottom: none;
}

.exemple-plan-action td {
    padding: 14px 10px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    vertical-align: middle;
}

.exemple-plan-action td:first-child {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
}

.exemple-plan-action td:nth-child(2) {
    font-size: 13px;
}

.exemple-plan-action td:nth-child(3) {
    font-size: 13px;
}

.exemple-plan-action td:nth-child(4) {
    white-space: nowrap;
    font-size: 13px;
}

.exemple-plan-action td:nth-child(5) {
    white-space: nowrap;
    font-size: 13px;
    text-align: right;
}

.exemple-plan-action td:nth-child(6) {
    text-align: center;
    white-space: nowrap;
}

.statut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    text-transform: capitalize;
}

.statut.realise {
    background: rgba(0, 255, 136, 0.15);
    color: #00FF88;
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.statut.encours {
    background: rgba(0, 212, 255, 0.15);
    color: #00D4FF;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.statut.planifie {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* Périodicité MAJ */
.periodicite-maj {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.maj-type {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    border: 2px solid;
}

.maj-type.annuelle { border-color: #0066FF; }
.maj-type.evenementielle { border-color: #ff5757; }

.maj-icon {
    font-size: 48px;
    margin-bottom: 15px;
    display: block;
}

.maj-type h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 18px;
}

.maj-type p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Accès DUERP */
.acces-duerp {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.acces-item {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.acces-icon {
    font-size: 36px;
    margin-bottom: 12px;
    display: block;
}

.acces-item h5 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 15px;
}

.acces-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

/* Outils Grid */
.outils-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.outil-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
}

.outil-card h5 {
    margin: 0 0 15px;
    color: var(--text-primary);
    font-size: 17px;
}

.outil-card ul {
    margin: 0;
    padding-left: 20px;
}

.outil-card li {
    color: var(--text-secondary);
    margin: 10px 0;
    line-height: 1.7;
}

.outil-card li strong {
    color: var(--primary-color);
}

/* Modèle Fiche */
.modele-fiche {
    margin: 30px 0;
}

.fiche-exemple {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.fiche-exemple h5 {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    padding: 15px 20px;
    margin: 0;
    font-size: 16px;
    text-align: center;
}

.fiche-exemple table {
    width: 100%;
    border-collapse: collapse;
}

.fiche-exemple th,
.fiche-exemple td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.fiche-exemple th {
    background: rgba(0, 102, 255, 0.05);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 13px;
}

.fiche-exemple td {
    color: var(--text-secondary);
    font-size: 14px;
}

.fiche-exemple span {
    color: var(--primary-color);
    font-weight: 600;
}

.crit-vert { color: #00FF88; font-weight: 700; }
.crit-orange { color: #ffc107; font-weight: 700; }
.crit-rouge { color: #ff5757; font-weight: 700; }

.fiche-actions {
    padding: 20px;
    background: rgba(0, 102, 255, 0.05);
}

.fiche-actions strong {
    display: block;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 15px;
}

.fiche-actions ul {
    margin: 0;
    padding-left: 20px;
}

.fiche-actions li {
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.7;
}

/* Checklist DUERP */
.checklist-duerp {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    margin: 30px 0;
}

.check-item {
    display: flex;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    align-items: center;
}

.check-item:last-child {
    border-bottom: none;
}

.check-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.check-item span:not(.check-icon) {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

/* Responsive DUERP */
@media (max-width: 768px) {
    .objectifs-duerp,
    .concernes-grid,
    .sanctions-box,
    .outils-grid,
    .acces-duerp {
        grid-template-columns: 1fr;
    }

    .texte-item,
    .methodo-step,
    .prev-level,
    .plan-item {
        flex-direction: column;
        text-align: center;
    }

    .texte-icon,
    .methodo-number,
    .prev-num,
    .plan-icon {
        margin: 0 auto 15px;
    }

    .exemple-eval table,
    .exemple-plan-action table,
    .fiche-exemple table {
        font-size: 12px;
    }

    .exemple-eval th,
    .exemple-eval td,
    .exemple-plan-action th,
    .exemple-plan-action td,
    .fiche-exemple th,
    .fiche-exemple td {
        padding: 8px;
    }

    /* Mode cartes pour les tableaux sur mobile */
    @media (max-width: 600px) {
        .exemple-plan-action table,
        .exemple-plan-action thead,
        .exemple-plan-action tbody,
        .exemple-plan-action th,
        .exemple-plan-action td,
        .exemple-plan-action tr {
            display: block;
        }

        .exemple-plan-action thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .exemple-plan-action tr {
            margin-bottom: 20px;
            background: var(--card-bg);
            border: 1px solid rgba(0, 102, 255, 0.1);
            border-radius: 12px;
            padding: 15px;
        }

        .exemple-plan-action td {
            border: none;
            position: relative;
            padding: 10px 10px 10px 45%;
            text-align: right;
        }

        .exemple-plan-action td::before {
            content: attr(data-label);
            position: absolute;
            left: 10px;
            width: 40%;
            padding-right: 10px;
            text-align: left;
            font-weight: 700;
            color: var(--primary-color);
        }

        .exemple-plan-action td:nth-child(6) {
            text-align: right;
        }
    }
}

/* ====== MOBILE MENU BUTTON ====== */
.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 80px;
    left: 15px;
    z-index: 1001;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.4);
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.mobile-menu-btn:hover,
.mobile-menu-btn.active {
    background: var(--secondary-color);
    transform: scale(1.05);
}

/* ====== SIDEBAR OVERLAY ====== */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.open {
    opacity: 1;
}

/* ====== RESPONSIVE - TABLET ====== */
@media (max-width: 968px) {
    .mobile-menu-btn {
        display: block;
    }
    
    .sidebar-overlay {
        display: block;
    }
    
    .course-container {
        grid-template-columns: 1fr;
    }

    .course-sidebar {
        position: fixed;
        left: -300px;
        top: 70px;
        width: 280px;
        height: calc(100vh - 70px);
        z-index: 1000;
        transition: left 0.3s ease;
        box-shadow: 5px 0 30px rgba(0, 0, 0, 0.5);
    }

    .course-sidebar.open {
        left: 0;
    }

    .course-content {
        padding: 30px 20px;
        padding-top: 70px;
    }

    .course-header h1 {
        font-size: 32px;
    }

    .pdca-cycle {
        grid-template-columns: 1fr;
    }

    .two-columns {
        grid-template-columns: 1fr;
    }
}

/* ====== RESPONSIVE - MOBILE ====== */
@media (max-width: 600px) {
    .course-content {
        padding: 20px 15px;
        padding-top: 70px;
    }

    .course-header h1 {
        font-size: 26px;
    }

    .course-section h2 {
        font-size: 22px;
    }

    .course-section h3 {
        font-size: 18px;
    }

    .course-meta {
        flex-direction: column;
        gap: 10px;
    }

    .course-meta span {
        display: block;
        text-align: center;
    }

    .principles-grid,
    .techniques-grid,
    .ecarts-grid,
    .competences-grid,
    .takeaway-grid,
    .stakeholders-grid {
        grid-template-columns: 1fr;
    }

    .highlight-box {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .highlight-icon {
        margin: 0 auto 15px;
    }

    .doc-item,
    .step-item,
    .chapter-item {
        flex-direction: column;
        text-align: center;
    }

    .doc-icon,
    .step-number,
    .chapter-number {
        margin: 0 auto 15px;
    }

    .step-content,
    .chapter-content {
        text-align: center;
    }

    .takeaway-item {
        flex-direction: column;
        text-align: center;
    }

    .takeaway-icon {
        margin: 0 auto 10px;
    }

    .key-takeaways {
        padding: 25px 20px;
    }

    .key-takeaways h3 {
        font-size: 22px;
    }

    .pdca-item {
        padding: 20px;
    }

    .pdca-letter {
        width: 50px;
        height: 50px;
        font-size: 26px;
    }

    .mobile-menu-btn {
        top: 75px;
        left: 10px;
        padding: 10px 14px;
        font-size: 13px;
    }

    .type-header h3 {
        font-size: 18px;
    }

    .technique-icon {
        font-size: 36px;
        text-align: center;
    }

    .technique-card {
        text-align: center;
        padding: 20px;
    }
}
/* ====== STYLES COURS ANALYSE DES RISQUES ====== */
/* À AJOUTER À LA FIN DU FICHIER cours-styles.css */

/* Approches analyse (a priori / a posteriori) */
.approches-analyse {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.approche-card {
    background: var(--card-bg);
    border: 2px solid;
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
}

.approche-card.preventive {
    border-color: #00D4FF;
}

.approche-card.reactive {
    border-color: #FF6B00;
}

.approche-card:hover {
    transform: translateY(-5px);
}

.approche-icon {
    font-size: 48px;
    text-align: center;
    margin-bottom: 15px;
    display: block;
}

.approche-card h4 {
    margin: 0 0 15px;
    color: var(--text-primary);
    text-align: center;
    font-size: 18px;
}

.approche-card p {
    margin: 10px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

.approche-card p strong {
    color: var(--primary-color);
}

/* Démarche prévention */
.demarche-prevention {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 30px 0;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 12px;
}

.etape-prev {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    background: rgba(0, 102, 255, 0.1);
    border-radius: 8px;
    min-width: 120px;
}

.etape-prev.highlight-etape {
    background: var(--accent-gradient);
}

.etape-prev.highlight-etape .etape-num,
.etape-prev.highlight-etape .etape-text {
    color: white;
}

.etape-num {
    background: var(--primary-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.etape-text {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}

.etape-arrow {
    font-size: 24px;
    color: var(--primary-color);
}

/* Tableau méthodes */
.methodes-tableau {
    margin: 30px 0;
    overflow-x: auto;
}

.methodes-tableau table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
}

.methodes-tableau th,
.methodes-tableau td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.methodes-tableau th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
}

.methodes-tableau td {
    color: var(--text-secondary);
    font-size: 14px;
}

.methodes-tableau td strong {
    color: var(--text-primary);
    font-size: 15px;
}

.methodes-tableau small {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 3px;
}

.badge-type {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.badge-type.priori {
    background: rgba(0, 212, 255, 0.2);
    color: #00D4FF;
}

.badge-type.posteriori {
    background: rgba(255, 107, 0, 0.2);
    color: #FF6B00;
}

.badge-type.both {
    background: rgba(155, 89, 182, 0.2);
    color: #9B59B6;
}

.complex-level {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

.complex-level.low {
    background: rgba(0, 255, 136, 0.2);
    color: #00FF88;
}

.complex-level.medium {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.complex-level.high {
    background: rgba(255, 87, 87, 0.2);
    color: #ff5757;
}

/* Types AMDEC */
.types-amdec {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.amdec-type {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.amdec-type h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.amdec-type p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Grilles AMDEC */
.amdec-grilles {
    display: grid;
    gap: 25px;
    margin: 30px 0;
}

.grille-amdec {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.grille-amdec h5 {
    margin: 0 0 15px;
    color: var(--primary-color);
    text-align: center;
    font-size: 16px;
}

.grille-amdec table {
    width: 100%;
}

.grille-amdec td {
    padding: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.grille-amdec td:first-child {
    font-weight: 700;
    color: var(--primary-color);
    width: 60px;
}

/* Formule AMDEC */
.formule-amdec {
    background: var(--card-bg);
    border: 2px solid rgba(0, 102, 255, 0.2);
    border-radius: 12px;
    padding: 25px;
    margin: 30px 0;
    text-align: center;
}

.formule-amdec h5 {
    margin: 0 0 15px;
    color: var(--text-primary);
    font-size: 17px;
}

.formule {
    background: var(--accent-gradient);
    color: white;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 700;
    display: inline-block;
    margin: 15px 0;
}

.formule-amdec p {
    margin: 15px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.seuils-amdec {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.seuil-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.seuil-badge {
    padding: 6px 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.seuil-badge.vert {
    background: rgba(0, 255, 136, 0.2);
    color: #00FF88;
}

.seuil-badge.orange {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.seuil-badge.rouge {
    background: rgba(255, 87, 87, 0.2);
    color: #ff5757;
}

/* Exemple AMDEC */
.exemple-amdec {
    margin: 30px 0;
    overflow-x: auto;
}

.exemple-amdec table {
    width: 100%;
    min-width: 1000px;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
}

.exemple-amdec th,
.exemple-amdec td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.exemple-amdec th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 12px;
}

.exemple-amdec td {
    color: var(--text-secondary);
}

.crit-vert { color: #00FF88; font-weight: 700; }
.crit-orange { color: #ffc107; font-weight: 700; }
.crit-rouge { color: #ff5757; font-weight: 700; }

/* Étapes arbre des causes */
.etapes-arbre {
    margin: 30px 0;
}

.etape-arbre {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.etape-arbre-num {
    background: var(--accent-gradient);
    color: white;
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.etape-arbre-content h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.etape-arbre-content p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

.etape-arbre-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.etape-arbre-content li {
    color: var(--text-secondary);
    margin: 5px 0;
}

/* Exemple arbre des causes */
.exemple-arbre-detail {
    margin: 30px 0;
}

.arbre-scenario {
    background: var(--card-bg);
    border-left: 4px solid #FF6B00;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.arbre-scenario h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 17px;
}

.arbre-scenario p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.arbre-visuel {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 20px;
}

.arbre-level-box {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 15px 0;
}

.arbre-level-box.multi {
    flex-wrap: wrap;
}

.arbre-node {
    background: var(--card-bg);
    border: 2px solid;
    border-radius: 12px;
    padding: 15px 20px;
    text-align: center;
    max-width: 250px;
}

.arbre-node.accident-node {
    border-color: #ff5757;
    background: rgba(255, 87, 87, 0.1);
}

.arbre-node.cause-directe {
    border-color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
}

.arbre-node.cause-sous {
    border-color: #00D4FF;
    background: rgba(0, 212, 255, 0.1);
}

.arbre-node.cause-racine {
    border-color: #0066FF;
    background: rgba(0, 102, 255, 0.1);
}

.arbre-node strong {
    display: block;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 5px;
}

.arbre-node p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.arbre-connector {
    text-align: center;
    font-size: 24px;
    color: var(--primary-color);
    margin: 10px 0;
}

.arbre-connector-small {
    text-align: center;
    font-size: 20px;
    color: var(--primary-color);
    margin: 8px 0;
}

.arbre-et {
    background: var(--primary-color);
    color: white;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    align-self: center;
}

.arbre-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arbre-actions {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 12px;
    padding: 20px;
}

.arbre-actions h5 {
    margin: 0 0 15px;
    color: var(--text-primary);
    font-size: 16px;
}

.arbre-actions ul {
    margin: 0;
    padding-left: 20px;
}

.arbre-actions li {
    color: var(--text-secondary);
    margin: 10px 0;
    line-height: 1.7;
}

.arbre-actions li strong {
    color: var(--primary-color);
}

/* Familles 5M */
.familles-5m {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.famille-5m {
    background: var(--card-bg);
    border: 2px solid;
    border-radius: 12px;
    padding: 20px;
}

.famille-5m.matiere { border-color: #3498DB; }
.famille-5m.materiel { border-color: #E74C3C; }
.famille-5m.methode { border-color: #F39C12; }
.famille-5m.main-oeuvre { border-color: #27AE60; }
.famille-5m.milieu { border-color: #9B59B6; }

.famille-icon {
    font-size: 36px;
    text-align: center;
    margin-bottom: 10px;
    display: block;
}

.famille-5m h5 {
    margin: 0 0 8px;
    color: var(--text-primary);
    text-align: center;
    font-size: 16px;
}

.famille-5m > p {
    margin: 0 0 15px;
    color: var(--text-secondary);
    text-align: center;
    font-size: 13px;
}

.famille-5m ul {
    margin: 0;
    padding-left: 20px;
}

.famille-5m li {
    color: var(--text-secondary);
    margin: 5px 0;
    font-size: 13px;
}

/* Ishikawa diagram */
.ishikawa-diagram {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    margin: 30px 0;
}

.ishikawa-title {
    text-align: center;
    margin-bottom: 30px;
}

.ishikawa-title h5 {
    margin: 0;
    color: var(--text-primary);
    font-size: 17px;
}

.ishikawa-visual {
    position: relative;
}

.ishikawa-spine {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ishikawa-branches-top,
.ishikawa-branches-bottom {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

.ishi-branch {
    background: rgba(0, 102, 255, 0.05);
    border-left: 3px solid var(--primary-color);
    padding: 10px 15px;
    border-radius: 8px;
}

.branch-label {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 14px;
    margin-bottom: 8px;
}

.branch-causes {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.branch-causes span {
    color: var(--text-secondary);
    font-size: 12px;
}

.spine-arrow {
    font-size: 48px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.probleme-box {
    background: var(--accent-gradient);
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    min-width: 200px;
    flex-shrink: 0;
}

.probleme-box strong {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
}

.probleme-box p {
    margin: 0;
    font-size: 14px;
}

/* Utilisation 5M */
.utilisation-5m {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.usage-5m {
    background: var(--card-bg);
    border: 2px solid;
    border-radius: 12px;
    padding: 20px;
}

.usage-5m.priori-5m {
    border-color: #00D4FF;
}

.usage-5m.posteriori-5m {
    border-color: #FF6B00;
}

.usage-5m h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.usage-5m p {
    margin: 0 0 15px;
    color: var(--text-secondary);
    font-size: 14px;
}

.usage-5m ul {
    margin: 0;
    padding-left: 20px;
}

.usage-5m li {
    color: var(--text-secondary);
    margin: 5px 0;
    font-size: 13px;
}

/* What-If */
.demarche-whatif {
    margin: 30px 0;
}

.step-whatif {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.step-num-whatif {
    background: var(--accent-gradient);
    color: white;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.step-content-whatif h5 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 15px;
}

.step-content-whatif p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Exemples What-If */
.exemples-whatif {
    display: grid;
    gap: 15px;
    margin: 30px 0;
}

.question-whatif {
    display: flex;
    gap: 15px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    align-items: center;
}

.q-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.question-whatif p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Mots-clés HAZOP */
.mots-cles-hazop {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.mot-cle {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.mot-cle strong {
    display: block;
    color: var(--primary-color);
    font-size: 15px;
    margin-bottom: 10px;
}

.mot-cle p {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 13px;
}

.mot-cle .ex {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
    background: rgba(0, 102, 255, 0.05);
    padding: 8px 10px;
    border-radius: 6px;
}

/* Exemple HAZOP */
.exemple-hazop {
    margin: 30px 0;
    overflow-x: auto;
}

.exemple-hazop table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    background: var(--card-bg);
}

.exemple-hazop th,
.exemple-hazop td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.exemple-hazop th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 12px;
}

.exemple-hazop td {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Bow-Tie / Nœud Papillon */
.bowtie-structure,
.exemple-bowtie {
    margin: 30px 0;
}

.bowtie-visual {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
}

.bowtie-left,
.bowtie-right {
    flex: 1;
}

.bowtie-center {
    flex-shrink: 0;
}

.bowtie-left h5,
.bowtie-right h5 {
    text-align: center;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 15px;
}

.bowtie-causes,
.bowtie-consequences {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cause-bowtie,
.consequence-bowtie {
    background: rgba(0, 102, 255, 0.1);
    border-left: 3px solid var(--primary-color);
    padding: 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.barrieres-prev,
.barrieres-prot {
    margin: 15px 0;
    text-align: center;
}

.barriere {
    background: var(--accent-gradient);
    color: white;
    padding: 8px 15px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}

.erc-box {
    background: var(--accent-gradient);
    color: white;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    min-width: 250px;
}

.erc-box strong {
    display: block;
    font-size: 14px;
    margin-bottom: 10px;
}

.erc-box p {
    margin: 0;
    font-size: 12px;
}

/* Exemple Bow-Tie détaillé */
.bowtie-exemple-visual {
    display: flex;
    gap: 20px;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
}

.bowtie-section {
    flex: 1;
}

.bowtie-section.center-section {
    flex: 0 0 auto;
}

.causes-list,
.consequences-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cause-item-bt,
.consequence-item-bt {
    background: rgba(0, 102, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
}

.cause-item-bt strong,
.consequence-item-bt strong {
    display: block;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 10px;
}

.consequence-item-bt p {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 12px;
}

.consequence-item-bt.minor {
    border-left: 4px solid #00FF88;
}

.consequence-item-bt.moderate {
    border-left: 4px solid #ffc107;
}

.consequence-item-bt.severe {
    border-left: 4px solid #ff5757;
}

.barr-prev,
.barr-prot {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 3px 0;
    padding-left: 15px;
}

.erc-central {
    background: var(--accent-gradient);
    color: white;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    min-width: 200px;
}

.erc-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 10px;
}

.erc-central h5 {
    margin: 0 0 8px;
    font-size: 16px;
}

.erc-central p {
    margin: 0;
    font-size: 13px;
}

/* Types barrières */
.types-barrieres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.barriere-type {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.barriere-type h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 15px;
}

.barriere-type p {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 13px;
}

.barriere-type .ex {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
    background: rgba(0, 102, 255, 0.05);
    padding: 8px;
    border-radius: 6px;
}

/* Critères de choix */
.criteres-choix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.critere-box {
    background: var(--card-bg);
    border: 2px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
}

.critere-icon {
    font-size: 40px;
    text-align: center;
    display: block;
    margin-bottom: 15px;
}

.critere-box h5 {
    margin: 0 0 15px;
    color: var(--text-primary);
    text-align: center;
    font-size: 16px;
}

.critere-box ul {
    margin: 0;
    padding-left: 20px;
}

.critere-box li {
    color: var(--text-secondary);
    margin: 8px 0;
    font-size: 13px;
    line-height: 1.6;
}

/* Synthèse méthodes */
.synthese-methodes {
    margin: 30px 0;
    overflow-x: auto;
}

.synthese-methodes table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    background: var(--card-bg);
}

.synthese-methodes th,
.synthese-methodes td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.synthese-methodes th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 12px;
}

.synthese-methodes td {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Étapes mise en œuvre */
.etapes-mise-oeuvre {
    margin: 30px 0;
}

.etape-mo {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.etape-mo-num {
    background: var(--accent-gradient);
    color: white;
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

.etape-mo-content h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 17px;
}

.etape-mo-content ul {
    margin: 0;
    padding-left: 20px;
}

.etape-mo-content li {
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.7;
}

.etape-mo-content strong {
    color: var(--primary-color);
}

/* Facteurs clés succès */
.fcs-analyse {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.fcs-item {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.fcs-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 12px;
}

.fcs-item h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 15px;
}

.fcs-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

/* Récap méthodes */
.recap-methodes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.methode-recap {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.methode-recap h5 {
    margin: 0 0 10px;
    color: var(--primary-color);
    font-size: 16px;
}

.methode-recap p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

/* Responsive Analyse Risques */
@media (max-width: 768px) {
    .approches-analyse,
    .familles-5m,
    .utilisation-5m,
    .mots-cles-hazop,
    .criteres-choix,
    .recap-methodes {
        grid-template-columns: 1fr;
    }

    .demarche-prevention {
        flex-direction: column;
    }

    .etape-arrow {
        transform: rotate(90deg);
    }

    .bowtie-visual,
    .bowtie-exemple-visual {
        flex-direction: column;
    }

    .ishikawa-spine {
        flex-direction: column;
    }

    .spine-arrow {
        transform: rotate(90deg);
    }

    .etape-arbre,
    .step-whatif,
    .etape-mo {
        flex-direction: column;
        text-align: center;
    }

    .etape-arbre-num,
    .step-num-whatif,
    .etape-mo-num {
        margin: 0 auto 15px;
    }
}

/* ====== FIN STYLES ANALYSE DES RISQUES ====== */
/* ====== STYLES COURS ISO 14001 ====== */
/* À AJOUTER À LA FIN DU FICHIER cours-styles.css */

/* Principes environnementaux */
.principes-env {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.principe-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.principe-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 200, 83, 0.4);
}

.principe-num {
    background: linear-gradient(135deg, #00C853 0%, #009624 100%);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto 15px;
}

.principe-card h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    text-align: center;
    font-size: 16px;
}

.principe-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
}

/* Bénéfices grid */
.benefices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.benefice-item {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
}

.benefice-icon {
    font-size: 40px;
    text-align: center;
    display: block;
    margin-bottom: 15px;
}

.benefice-item h5 {
    margin: 0 0 15px;
    color: var(--text-primary);
    text-align: center;
    font-size: 16px;
}

.benefice-item ul {
    margin: 0;
    padding-left: 20px;
}

.benefice-item li {
    color: var(--text-secondary);
    margin: 8px 0;
    font-size: 13px;
}

/* Timeline environnement */
.timeline-env {
    position: relative;
    margin: 30px 0;
    padding-left: 50px;
}

.timeline-env::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #00C853 0%, #009624 100%);
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
    padding-left: 30px;
}

.timeline-year {
    position: absolute;
    left: -30px;
    top: 0;
    background: linear-gradient(135deg, #00C853 0%, #009624 100%);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
}

.timeline-content {
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.timeline-content h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.timeline-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* Stats ISO 14001 */
.stats-iso14001 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.stat-card {
    background: var(--card-bg);
    border: 2px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(135deg, #00C853 0%, #009624 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* Nouveautés 2015 */
.nouveautes-2015 {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.nouveaute-item {
    background: var(--card-bg);
    border-left: 4px solid #00C853;
    border-radius: 8px;
    padding: 20px;
}

.nouveaute-item h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.nouveaute-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

/* Chapitres HLS */
.chapitres-hls {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.chapitre-hls {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.chapitre-hls.intro {
    border-color: rgba(155, 155, 155, 0.2);
}

.chapitre-hls.exigence {
    border-color: rgba(0, 200, 83, 0.3);
}

.chap-num {
    background: linear-gradient(135deg, #00C853 0%, #009624 100%);
    color: white;
    min-width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.chapitre-hls.intro .chap-num {
    background: linear-gradient(135deg, #777 0%, #555 100%);
}

.chapitre-hls h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 17px;
}

.chapitre-hls ul {
    margin: 0;
    padding-left: 20px;
}

.chapitre-hls li {
    color: var(--text-secondary);
    margin: 6px 0;
    font-size: 14px;
}

/* PDCA Environnement */
.pdca-environnement {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.pdca-section {
    background: var(--card-bg);
    border: 2px solid;
    border-radius: 12px;
    padding: 25px;
}

.pdca-section.plan { border-color: #3498DB; }
.pdca-section.do { border-color: #00C853; }
.pdca-section.check { border-color: #FFC107; }
.pdca-section.act { border-color: #E74C3C; }

.pdca-letter {
    background: currentColor;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    margin: 0 auto 15px;
}

.pdca-section.plan .pdca-letter { background: #3498DB; }
.pdca-section.do .pdca-letter { background: #00C853; }
.pdca-section.check .pdca-letter { background: #FFC107; }
.pdca-section.act .pdca-letter { background: #E74C3C; }

.pdca-section h5 {
    margin: 0 0 8px;
    color: var(--text-primary);
    text-align: center;
    font-size: 16px;
}

.pdca-section p {
    margin: 0 0 12px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.pdca-section ul {
    margin: 0;
    padding-left: 20px;
}

.pdca-section li {
    color: var(--text-secondary);
    margin: 6px 0;
    font-size: 13px;
}

/* Intégration QSE */
.integration-qse {
    margin: 30px 0;
    overflow-x: auto;
}

.integration-qse table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    background: var(--card-bg);
}

.integration-qse th,
.integration-qse td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.integration-qse th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
}

.integration-qse td {
    color: var(--text-secondary);
}

/* Définitions environnement */
.definitions-env {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.definition-item {
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.definition-item h5 {
    margin: 0 0 12px;
    color: #00C853;
    font-size: 16px;
}

.definition-item p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

/* Exemple aspect-impact */
.exemple-aspect-impact {
    margin: 30px 0;
}

.exemple-aspect-impact h5 {
    margin: 0 0 15px;
    color: var(--text-primary);
    font-size: 16px;
}

.exemple-aspect-impact table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
}

.exemple-aspect-impact th,
.exemple-aspect-impact td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.exemple-aspect-impact th {
    background: rgba(0, 200, 83, 0.1);
    color: #00C853;
    font-weight: 600;
    font-size: 13px;
}

.exemple-aspect-impact td {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Méthodologie aspects */
.methodo-aspects {
    margin: 30px 0;
}

.step-aspect {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.step-aspect-num {
    background: linear-gradient(135deg, #00C853 0%, #009624 100%);
    color: white;
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.step-aspect-content h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.step-aspect-content p {
    margin: 0 0 8px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.step-aspect-content .exemple-txt {
    font-size: 13px;
    font-style: italic;
    color: #00C853;
    margin: 5px 0 0;
}

/* Grilles significativité */
.grilles-significativite {
    display: grid;
    gap: 25px;
    margin: 30px 0;
}

.grille-sig {
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.grille-sig h5 {
    margin: 0 0 15px;
    color: #00C853;
    text-align: center;
    font-size: 16px;
}

.grille-sig table {
    width: 100%;
}

.grille-sig td {
    padding: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.grille-sig td:first-child {
    font-weight: 700;
    color: #00C853;
    width: 40px;
    text-align: center;
}

/* Formule significativité */
.formule-significativite {
    background: var(--card-bg);
    border: 2px solid rgba(0, 200, 83, 0.3);
    border-radius: 12px;
    padding: 25px;
    margin: 30px 0;
    text-align: center;
}

.seuils-sig {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Exemple analyse environnementale */
.exemple-analyse-env {
    margin: 30px 0;
    overflow-x: auto;
}

.exemple-analyse-env table {
    width: 100%;
    min-width: 1000px;
    border-collapse: collapse;
    background: var(--card-bg);
}

.exemple-analyse-env th,
.exemple-analyse-env td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.exemple-analyse-env th {
    background: rgba(0, 200, 83, 0.1);
    color: #00C853;
    font-weight: 600;
    font-size: 12px;
}

.exemple-analyse-env td {
    color: var(--text-secondary);
}

.score-vert { color: #00FF88; font-weight: 700; }
.score-orange { color: #FFC107; font-weight: 700; }
.score-rouge { color: #ff5757; font-weight: 700; }

.aes-oui { color: #00FF88; font-weight: 700; }
.aes-non { color: var(--text-secondary); }

/* Résultats analyse */
.resultats-analyse {
    background: rgba(0, 200, 83, 0.1);
    border: 1px solid rgba(0, 200, 83, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.resultats-analyse h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 16px;
}

.resultats-analyse ul {
    margin: 0;
    padding-left: 20px;
}

.resultats-analyse li {
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.7;
}

/* Règles environnement grid */
.regles-env-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.regle-env-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.regle-env-card h5 {
    margin: 0 0 10px;
    color: #00C853;
    font-size: 16px;
}

.regle-env-card p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.regle-env-card .ex-regle {
    font-size: 12px;
    font-style: italic;
    background: rgba(0, 200, 83, 0.05);
    padding: 8px;
    border-radius: 6px;
}

/* Outils veille */
.outils-veille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.outil-veille {
    background: var(--card-bg);
    border: 2px solid;
    border-radius: 12px;
    padding: 25px;
}

.outil-veille.gratuit {
    border-color: #00C853;
}

.outil-veille.payant {
    border-color: #FFC107;
}

.outil-veille h5 {
    margin: 0 0 15px;
    color: var(--text-primary);
    font-size: 16px;
}

.outil-veille ul {
    margin: 0;
    padding-left: 20px;
}

.outil-veille li {
    color: var(--text-secondary);
    margin: 8px 0;
    font-size: 14px;
}

/* Tableau veille réglementaire */
.tableau-veille-reg {
    margin: 30px 0;
    overflow-x: auto;
}

.tableau-veille-reg table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    background: var(--card-bg);
}

.tableau-veille-reg th,
.tableau-veille-reg td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.tableau-veille-reg th {
    background: rgba(0, 200, 83, 0.1);
    color: #00C853;
    font-weight: 600;
}

.tableau-veille-reg td {
    color: var(--text-secondary);
}

.conforme {
    color: #00FF88;
    font-weight: 700;
}

.en-cours {
    color: #FFC107;
    font-weight: 700;
}

.non-conforme {
    color: #ff5757;
    font-weight: 700;
}

/* SMART Objectifs */
.smart-objectifs {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 30px 0;
}

.smart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 15px 20px;
    min-width: 180px;
}

.smart-letter {
    background: linear-gradient(135deg, #00C853 0%, #009624 100%);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.smart-content h5 {
    margin: 0 0 3px;
    color: var(--text-primary);
    font-size: 14px;
}

.smart-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
}

/* Exemples objectifs */
.exemples-objectifs {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.objectif-exemple {
    border-left: 4px solid;
    border-radius: 8px;
    padding: 20px;
}

.objectif-exemple.bon {
    background: rgba(0, 200, 83, 0.1);
    border-color: #00C853;
}

.objectif-exemple.mauvais {
    background: rgba(255, 87, 87, 0.1);
    border-color: #ff5757;
}

.objectif-label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 10px;
}

.objectif-exemple.bon .objectif-label {
    background: rgba(0, 200, 83, 0.2);
    color: #00C853;
}

.objectif-exemple.mauvais .objectif-label {
    background: rgba(255, 87, 87, 0.2);
    color: #ff5757;
}

.objectif-exemple p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

.objectif-exemple .justif {
    font-size: 13px;
    font-style: italic;
    margin-top: 8px;
}

/* Programme environnemental */
.exemple-programme-env {
    margin: 30px 0;
    overflow-x: auto;
}

.exemple-programme-env table {
    width: 100%;
    min-width: 1000px;
    border-collapse: collapse;
    background: var(--card-bg);
}

.exemple-programme-env th,
.exemple-programme-env td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.exemple-programme-env th {
    background: rgba(0, 200, 83, 0.1);
    color: #00C853;
    font-weight: 600;
}

.exemple-programme-env td {
    color: var(--text-secondary);
}

/* Exemples maîtrise */
.exemples-maitrise {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.maitrise-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.maitrise-card h5 {
    margin: 0 0 12px;
    color: #00C853;
    font-size: 16px;
}

.maitrise-card ul {
    margin: 0;
    padding-left: 20px;
}

.maitrise-card li {
    color: var(--text-secondary);
    margin: 6px 0;
    font-size: 13px;
}

/* Situations urgence */
.situations-urgence {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.urgence-item {
    background: var(--card-bg);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.urgence-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 12px;
}

.urgence-item h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.urgence-item p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

/* Exercice urgence */
.exercice-urgence {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.exercice-urgence h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 16px;
}

.exercice-urgence ul {
    margin: 0;
    padding-left: 20px;
}

.exercice-urgence li {
    color: var(--text-secondary);
    margin: 8px 0;
}

/* Types indicateurs */
.types-indicateurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.type-indic {
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.type-indic h5 {
    margin: 0 0 10px;
    color: #00C853;
    font-size: 16px;
}

.type-indic p {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 14px;
}

.type-indic .ex-indic {
    font-size: 12px;
    font-style: italic;
    background: rgba(0, 200, 83, 0.05);
    padding: 8px;
    border-radius: 6px;
}

/* Indicateurs grid */
.indicateurs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.indic-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.indic-icon {
    font-size: 32px;
    text-align: center;
    display: block;
    margin-bottom: 12px;
}

.indic-card h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
    text-align: center;
    font-size: 16px;
}

.indic-card ul {
    margin: 0;
    padding-left: 20px;
}

.indic-card li {
    color: var(--text-secondary);
    margin: 6px 0;
    font-size: 13px;
}

/* Dashboard environnemental */
.dashboard-env {
    margin: 30px 0;
    overflow-x: auto;
}

.dashboard-env table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    background: var(--card-bg);
}

.dashboard-env th,
.dashboard-env td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.dashboard-env th {
    background: rgba(0, 200, 83, 0.1);
    color: #00C853;
    font-weight: 600;
}

.dashboard-env td {
    color: var(--text-secondary);
}

.evolution-bon { color: #00FF88; font-weight: 700; }
.evolution-moyen { color: #FFC107; font-weight: 700; }
.evolution-mauvais { color: #ff5757; font-weight: 700; }

.tendance-bon { color: #00FF88; }
.tendance-moyen { color: #FFC107; }
.tendance-mauvais { color: #ff5757; }

/* Démarche audit env */
.demarche-audit-env {
    margin: 30px 0;
}

.audit-step {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.audit-step-num {
    background: linear-gradient(135deg, #00C853 0%, #009624 100%);
    color: white;
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.audit-step-content h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.audit-step-content ul {
    margin: 0;
    padding-left: 20px;
}

.audit-step-content li {
    color: var(--text-secondary);
    margin: 6px 0;
    font-size: 14px;
}

/* Processus certification */
.processus-certif {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 30px 0;
}

.certif-phase {
    flex: 1;
    min-width: 150px;
    background: var(--card-bg);
    border: 2px solid rgba(0, 200, 83, 0.3);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.phase-num {
    background: linear-gradient(135deg, #00C853 0%, #009624 100%);
    color: white;
    padding: 6px 15px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 12px;
}

.certif-phase h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 15px;
}

.certif-phase p {
    margin: 6px 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.certif-arrow {
    font-size: 24px;
    color: #00C853;
    flex-shrink: 0;
}

/* Coûts certification */
.couts-certif {
    margin: 30px 0;
    overflow-x: auto;
}

.couts-certif table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
}

.couts-certif th,
.couts-certif td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.couts-certif th {
    background: rgba(0, 200, 83, 0.1);
    color: #00C853;
    font-weight: 600;
}

.couts-certif td {
    color: var(--text-secondary);
}

.note-couts {
    margin-top: 15px;
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Roadmap ISO 14001 */
.roadmap-iso14001 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

.roadmap-step {
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.roadmap-num {
    background: linear-gradient(135deg, #00C853 0%, #009624 100%);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    margin: 0 auto 12px;
}

.roadmap-step h5 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 15px;
}

.roadmap-step p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

/* Responsive ISO 14001 */
@media (max-width: 768px) {
    .principes-env,
    .benefices-grid,
    .stats-iso14001,
    .regles-env-grid,
    .outils-veille,
    .indicateurs-grid {
        grid-template-columns: 1fr;
    }

    .pdca-environnement,
    .smart-objectifs {
        flex-direction: column;
    }

    .processus-certif {
        flex-direction: column;
    }

    .certif-arrow {
        transform: rotate(90deg);
    }

    .timeline-env {
        padding-left: 30px;
    }

    .timeline-year {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* ====== FIN STYLES ISO 14001 ====== */
/* ====== STYLES COURS BILAN CARBONE ====== */

/* Définitions Bilan */
.definitions-bilan {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.definition-item {
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.definition-item h5 {
    margin: 0 0 12px;
    color: #00C853;
    font-size: 16px;
}

.definition-item p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

.definition-item .exemple-def {
    font-size: 13px;
    background: rgba(0, 200, 83, 0.05);
    padding: 8px;
    border-radius: 6px;
    margin-top: 10px;
}

/* Bénéfices Bilan */
.benefices-bilan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.benefice-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.benefice-card .benefice-icon {
    font-size: 40px;
    text-align: center;
    display: block;
    margin-bottom: 12px;
}

.benefice-card h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
    text-align: center;
    font-size: 16px;
}

.benefice-card ul {
    margin: 0;
    padding-left: 20px;
}

.benefice-card li {
    color: var(--text-secondary);
    margin: 6px 0;
    font-size: 13px;
}

/* Réglementation grid */
.reglementation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.regle-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.regle-card h5 {
    margin: 0 0 12px;
    color: var(--primary-color);
    font-size: 16px;
}

.regle-card p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* Fréquence BEGES */
.frequence-beges {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.freq-item {
    background: var(--card-bg);
    border-left: 4px solid #00C853;
    border-radius: 8px;
    padding: 20px;
}

.freq-item h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.freq-item p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

/* Contenu BEGES */
.contenu-beges {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.contenu-item {
    background: var(--card-bg);
    border: 2px solid;
    border-radius: 12px;
    padding: 20px;
}

.contenu-item.obligatoire {
    border-color: #ff5757;
}

.contenu-item.recommande {
    border-color: #00C853;
}

.contenu-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 10px;
}

.contenu-item.obligatoire .contenu-badge {
    background: rgba(255, 87, 87, 0.2);
    color: #ff5757;
}

.contenu-item.recommande .contenu-badge {
    background: rgba(0, 200, 83, 0.2);
    color: #00C853;
}

.contenu-item h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 16px;
}

.contenu-item ul {
    margin: 0;
    padding-left: 20px;
}

.contenu-item li {
    color: var(--text-secondary);
    margin: 6px 0;
    font-size: 14px;
}

/* Éléments BEGES */
.elements-beges {
    background: rgba(0, 102, 255, 0.05);
    border: 1px solid rgba(0, 102, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.elements-beges h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 16px;
}

/* Évolutions règles */
.evolutions-regles {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.evolution-item {
    background: var(--card-bg);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.evolution-item h5 {
    margin: 0 0 10px;
    color: #FFC107;
    font-size: 16px;
}

.evolution-item p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

/* Scopes container */
.scopes-container {
    display: grid;
    gap: 30px;
    margin: 30px 0;
}

.scope-card {
    background: var(--card-bg);
    border: 2px solid;
    border-radius: 16px;
    padding: 25px;
    transition: all 0.3s ease;
}

.scope-card.scope1 {
    border-color: #ff5757;
}

.scope-card.scope2 {
    border-color: #FFC107;
}

.scope-card.scope3 {
    border-color: #00C853;
}

.scope-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.2);
}

.scope-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.scope-num {
    background: linear-gradient(135deg, currentColor 0%, currentColor 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.scope-card.scope1 .scope-num {
    background: linear-gradient(135deg, #ff5757 0%, #ff3333 100%);
}

.scope-card.scope2 .scope-num {
    background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
}

.scope-card.scope3 .scope-num {
    background: linear-gradient(135deg, #00C853 0%, #009624 100%);
}

.scope-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
}

.scope-description {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.scope-categories h5,
.scope-categories h6 {
    margin: 20px 0 12px;
    color: var(--text-primary);
    font-size: 15px;
}

.categorie-scope {
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid currentColor;
    padding: 12px;
    margin: 10px 0;
    border-radius: 6px;
}

.scope-card.scope1 .categorie-scope {
    border-color: #ff5757;
}

.scope-card.scope2 .categorie-scope {
    border-color: #FFC107;
}

.scope-card.scope3 .categorie-scope {
    border-color: #00C853;
}

.categorie-scope strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 6px;
}

.categorie-scope p {
    margin: 4px 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.categorie-scope .exemple {
    font-size: 12px;
    font-style: italic;
    color: #00C853;
}

.scope-amont,
.scope-aval {
    margin-top: 20px;
}

.scope-amont h6 {
    color: #ff5757;
}

.scope-aval h6 {
    color: #00C853;
}

.scope-methodes {
    background: rgba(255, 193, 7, 0.1);
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
}

.scope-methodes h5 {
    margin: 0 0 10px;
    font-size: 14px;
}

.scope-methodes p {
    margin: 6px 0;
    font-size: 13px;
}

.scope-part {
    background: rgba(0, 102, 255, 0.1);
    padding: 12px;
    border-radius: 8px;
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
}

.scope-part-important {
    background: rgba(255, 87, 87, 0.1);
    border: 2px solid rgba(255, 87, 87, 0.3);
}

/* Répartition scopes */
.repartition-scopes {
    margin: 30px 0;
    overflow-x: auto;
}

.repartition-scopes table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
}

.repartition-scopes th,
.repartition-scopes td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.repartition-scopes th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
}

.repartition-scopes td {
    color: var(--text-secondary);
}

/* Méthodologie steps */
.methodologie-steps {
    margin: 30px 0;
}

.method-step {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.method-num {
    background: linear-gradient(135deg, #00C853 0%, #009624 100%);
    color: white;
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.method-content h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.method-content p {
    margin: 6px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.method-content .exemple-method {
    font-size: 13px;
    font-style: italic;
    color: #00C853;
    margin-top: 8px;
}

/* Approches consolidation */
.approches-consolidation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.approche-card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.approche-card h5 {
    margin: 0 0 12px;
    color: var(--primary-color);
    font-size: 16px;
}

.approche-card p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.approche-card .exemple-approche {
    font-size: 13px;
    background: rgba(0, 102, 255, 0.05);
    padding: 8px;
    border-radius: 6px;
    margin-top: 10px;
}

/* Niveaux données */
.niveaux-donnees {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.niveau-card {
    background: var(--card-bg);
    border: 2px solid;
    border-radius: 12px;
    padding: 20px;
}

.niveau-card.niveau1 {
    border-color: #00FF88;
}

.niveau-card.niveau2 {
    border-color: #FFC107;
}

.niveau-card.niveau3 {
    border-color: #ff5757;
}

.niveau-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
    background: currentColor;
    color: white;
}

.niveau-card.niveau1 .niveau-badge {
    background: #00FF88;
    color: #0A0A0A;
}

.niveau-card.niveau2 .niveau-badge {
    background: #FFC107;
    color: #0A0A0A;
}

.niveau-card.niveau3 .niveau-badge {
    background: #ff5757;
}

.niveau-card h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.niveau-card p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.niveau-card ul {
    margin: 10px 0;
    padding-left: 20px;
}

.niveau-card li {
    color: var(--text-secondary);
    margin: 6px 0;
    font-size: 13px;
}

.qualite-note {
    margin-top: 15px !important;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    font-weight: 600;
}

/* Sources données */
.sources-donnees {
    margin: 30px 0;
    overflow-x: auto;
}

.sources-donnees table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    background: var(--card-bg);
}

.sources-donnees th,
.sources-donnees td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.sources-donnees th {
    background: rgba(0, 200, 83, 0.1);
    color: #00C853;
    font-weight: 600;
}

.sources-donnees td {
    color: var(--text-secondary);
}

.scope-1-row,
.scope-2-row,
.scope-3-row {
    background: rgba(0, 102, 255, 0.05);
}

.scope-1-row td {
    color: #ff5757 !important;
    font-weight: 700;
}

.scope-2-row td {
    color: #FFC107 !important;
    font-weight: 700;
}

.scope-3-row td {
    color: #00C853 !important;
    font-weight: 700;
}

/* Outils collecte */
.outils-collecte {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.outil-item {
    background: var(--card-bg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.outil-item h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 16px;
}

.outil-item p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.outil-avantage {
    color: #00FF88 !important;
}

.outil-limite {
    color: #ff5757 !important;
}

/* Formule FE */
.formule-fe {
    background: var(--card-bg);
    border: 2px solid rgba(0, 200, 83, 0.3);
    border-radius: 12px;
    padding: 25px;
    margin: 30px 0;
    text-align: center;
}

/* Facteurs exemples */
.facteurs-exemples {
    margin: 30px 0;
    overflow-x: auto;
}

.facteurs-exemples table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    background: var(--card-bg);
}

.facteurs-exemples th,
.facteurs-exemples td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.facteurs-exemples th {
    background: rgba(0, 200, 83, 0.1);
    color: #00C853;
    font-weight: 600;
}

.facteurs-exemples td {
    color: var(--text-secondary);
}

.categorie-energie,
.categorie-mobilite,
.categorie-autres {
    font-weight: 700;
}

/* Ratios monétaires */
.ratios-monetaires {
    margin: 30px 0;
    overflow-x: auto;
}

.ratios-monetaires table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
}

.ratios-monetaires th,
.ratios-monetaires td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.ratios-monetaires th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
}

.ratios-monetaires td {
    color: var(--text-secondary);
}

.note-ratio {
    margin-top: 15px;
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Exemple calcul */
.exemple-calcul {
    margin: 30px 0;
}

.exemple-calcul h4 {
    margin: 25px 0 15px;
    color: var(--text-primary);
    font-size: 18px;
}

.calcul-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    margin-bottom: 20px;
}

.calcul-table th,
.calcul-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.calcul-table th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
}

.calcul-table td {
    color: var(--text-secondary);
}

.total-scope {
    background: rgba(0, 200, 83, 0.1);
    font-weight: 700;
}

.total-scope td {
    color: #00C853 !important;
}

.total-general {
    background: rgba(0, 102, 255, 0.05);
    border: 2px solid rgba(0, 102, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
}

.total-general h4 {
    margin: 0 0 15px;
    color: var(--text-primary);
}

.total-general-row {
    background: rgba(0, 102, 255, 0.2);
}

.total-general-row td {
    color: var(--primary-color) !important;
    font-weight: 700;
    font-size: 16px;
}

.indicateur-intensite {
    margin-top: 15px;
    text-align: center;
    font-size: 16px;
    color: var(--text-secondary);
}

/* Pareto */
.pareto-exemple {
    margin: 30px 0;
}

.pareto-exemple h5 {
    margin: 0 0 15px;
    color: var(--text-primary);
    font-size: 16px;
}

.pareto-exemple table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
}

.pareto-exemple th,
.pareto-exemple td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.pareto-exemple th {
    background: rgba(0, 200, 83, 0.1);
    color: #00C853;
    font-weight: 600;
}

.pareto-exemple td {
    color: var(--text-secondary);
}

.autres-row {
    background: rgba(255, 255, 255, 0.02);
}

.analyse-pareto {
    background: rgba(0, 200, 83, 0.1);
    border: 1px solid rgba(0, 200, 83, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.analyse-pareto h5 {
    margin: 0 0 10px;
    color: #00C853;
    font-size: 16px;
}

.analyse-pareto p {
    margin: 0;
    color: var(--text-secondary);
}

/* Benchmark */
.benchmark-table {
    margin: 30px 0;
    overflow-x: auto;
}

.benchmark-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
}

.benchmark-table th,
.benchmark-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.benchmark-table th {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
}

.benchmark-table td {
    color: var(--text-secondary);
}

.ecart-negatif {
    color: #ff5757 !important;
    font-weight: 700;
}

.analyse-benchmark {
    margin-top: 15px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Matrice actions */
.matrice-actions {
    margin: 30px 0;
}

.matrice-grid {
    display: grid;
    grid-template-columns: 50px 1fr 1fr;
    grid-template-rows: 1fr 1fr 50px;
    gap: 15px;
    min-height: 500px;
}

.matrice-axe {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
}

.matrice-axe-y {
    grid-column: 1;
    grid-row: 1 / 3;
    flex-direction: column;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.matrice-axe-x {
    grid-column: 2 / 4;
    grid-row: 3;
    flex-direction: row;
    gap: 20px;
}

.matrice-quadrant {
    background: var(--card-bg);
    border: 2px solid;
    border-radius: 12px;
    padding: 20px;
}

.matrice-quadrant h6 {
    margin: 0 0 10px;
    font-size: 15px;
}

.matrice-quadrant p {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.matrice-quadrant ul {
    margin: 0;
    padding-left: 20px;
}

.matrice-quadrant li {
    font-size: 13px;
    margin: 6px 0;
    color: var(--text-secondary);
}

.quick-wins {
    grid-column: 2;
    grid-row: 1;
    border-color: #00FF88;
}

.quick-wins h6 {
    color: #00FF88;
}

.projets-majeurs {
    grid-column: 3;
    grid-row: 1;
    border-color: #FFC107;
}

.projets-majeurs h6 {
    color: #FFC107;
}

.gains-faciles {
    grid-column: 2;
    grid-row: 2;
    border-color: #00C853;
}

.gains-faciles h6 {
    color: #00C853;
}

.reporter {
    grid-column: 3;
    grid-row: 2;
    border-color: #777;
}

.reporter h6 {
    color: #777;
}

/* Trajectoire carbone */
.trajectoire-carbone {
    margin: 30px 0;
}

.trajectoire-carbone h5 {
    margin: 0 0 15px;
    color: var(--text-primary);
}

.trajectoire-carbone table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
}

.trajectoire-carbone th,
.trajectoire-carbone td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.trajectoire-carbone th {
    background: rgba(0, 200, 83, 0.1);
    color: #00C853;
    font-weight: 600;
}

.trajectoire-carbone td {
    color: var(--text-secondary);
}

/* Leviers réduction */
.leviers-reduction {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.levier-card {
    background: var(--card-bg);
    border: 2px solid rgba(0, 102, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.levier-num {
    background: linear-gradient(135deg, #00C853 0%, #009624 100%);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    margin: 0 auto 15px;
}

.levier-card h5 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 18px;
}

.levier-card > p {
    margin: 0 0 15px;
    color: var(--text-secondary);
    font-size: 14px;
}

.levier-card ul {
    margin: 0 0 15px;
    padding-left: 20px;
    text-align: left;
}

.levier-card li {
    color: var(--text-secondary);
    margin: 6px 0;
    font-size: 13px;
}

.levier-impact {
    font-size: 13px;
    font-weight: 600;
}

/* Plan action détaillé */
.plan-action-detaille {
    margin: 30px 0;
    overflow-x: auto;
}

.plan-action-detaille table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    background: var(--card-bg);
}

.plan-action-detaille th,
.plan-action-detaille td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.plan-action-detaille th {
    background: rgba(0, 200, 83, 0.1);
    color: #00C853;
    font-weight: 600;
}

.plan-action-detaille td {
    color: var(--text-secondary);
}

.total-plan {
    background: rgba(0, 200, 83, 0.2);
    font-weight: 700;
}

.total-plan td {
    color: #00C853 !important;
    font-size: 15px;
}

.resultat-plan {
    background: rgba(0, 200, 83, 0.1);
    border: 2px solid rgba(0, 200, 83, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.resultat-plan p {
    margin: 0;
    font-size: 16px;
    color: var(--text-secondary);
}

/* Types compensation */
.types-compensation {
    background: rgba(255, 193, 7, 0.05);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.types-compensation h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
}

.note-compensation {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Indicateurs suivi */
.indicateurs-suivi {
    background: rgba(0, 102, 255, 0.05);
    border: 1px solid rgba(0, 102, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.indicateurs-suivi h5 {
    margin: 0 0 12px;
    color: var(--text-primary);
}

/* Gouvernance carbone */
.gouvernance-carbone {
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.gouvernance-carbone h5 {
    margin: 0 0 12px;
    color: #00C853;
}

/* Roadmap bilan */
.roadmap-bilan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

.roadmap-step {
    background: var(--card-bg);
    border: 1px solid rgba(0, 200, 83, 0.2);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.roadmap-num {
    background: linear-gradient(135deg, #00C853 0%, #009624 100%);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    margin: 0 auto 12px;
}

.roadmap-step h5 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 15px;
}

.roadmap-step p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

/* Responsive Bilan Carbone */
@media (max-width: 768px) {
    .benefices-bilan,
    .reglementation-grid,
    .scopes-container,
    .approches-consolidation,
    .niveaux-donnees,
    .leviers-reduction {
        grid-template-columns: 1fr;
    }

    .matrice-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: auto;
    }

    .matrice-axe {
        display: none;
    }

    .matrice-quadrant {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .roadmap-bilan {
        grid-template-columns: 1fr;
    }
}

/* ====== FIN STYLES BILAN CARBONE ====== */