{"id":29,"date":"2026-10-17T18:38:40","date_gmt":"2026-10-17T18:38:40","guid":{"rendered":"https:\/\/simplifions.org\/?page_id=29"},"modified":"2026-10-17T18:38:40","modified_gmt":"2026-10-17T18:38:40","slug":"catalogue","status":"publish","type":"page","link":"https:\/\/simplifions.org\/index.php\/catalogue\/","title":{"rendered":"catalogue"},"content":{"rendered":"\n<!DOCTYPE html>\n                        <html lang=\"en\">\n                        <head>\n                            <meta charset=\"UTF-8\">\n                            <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n              <style>\n                body {\n                  background-color: white; \/* Ensure the iframe has a white background *\/\n                }\n\n                :root {\n    --primary: #5C6BC0;\n    --primary-light: #7986CB;\n    --primary-dark: #3F51B5;\n    --accent: #ff6f00;\n    --accent-light: #ffa040;\n    --danger: #EC407A;\n    --danger-light: #F48FB1;\n    --success: #2e7d32;\n    --purple: #AB47BC;\n    --purple-light: #CE93D8;\n    --dark: #455A64;\n    --dark-light: #607D8B;\n    --bg: #fafbff;\n    --text: #37474F;\n    --text-light: #5a5a7a;\n    --card-bg: #ffffff;\n    --shadow: 0 4px 24px rgba(92,107,192,0.12);\n    --shadow-hover: 0 8px 40px rgba(92,107,192,0.22);\n    --radius: 16px;\n}\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml { scroll-behavior: smooth; }\n\nbody {\n    font-family: 'Inter', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.7;\n    overflow-x: hidden;\n}\n\nh1, h2, h3, h4 { font-family: 'Playfair Display', serif; }\n\n\/* Navigation *\/\nnav {\n    position: fixed;\n    top: 0;\n    width: 100%;\n    background: rgba(255,255,255,0.95);\n    backdrop-filter: blur(20px);\n    z-index: 1000;\n    padding: 0 2rem;\n    box-shadow: 0 2px 20px rgba(0,0,0,0.06);\n}\n\nnav .nav-inner {\n    max-width: 1200px;\n    margin: 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 70px;\n}\n\nnav .logo {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.3rem;\n    font-weight: 700;\n    color: var(--primary);\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    text-decoration: none;\n}\n\nnav .logo svg { width: 32px; height: 32px; }\n\nnav ul {\n    display: flex;\n    list-style: none;\n    gap: 0.3rem;\n    flex-wrap: wrap;\n}\n\nnav ul li a {\n    text-decoration: none;\n    color: var(--text-light);\n    font-size: 0.82rem;\n    font-weight: 500;\n    padding: 0.5rem 0.8rem;\n    border-radius: 8px;\n    transition: all 0.3s ease;\n}\n\nnav ul li a:hover, nav ul li a.active {\n    color: var(--primary);\n    background: rgba(92,107,192,0.1);\n}\n\n.mobile-toggle {\n    display: none;\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0.5rem;\n}\n\n.mobile-toggle span {\n    display: block;\n    width: 24px;\n    height: 2px;\n    background: var(--text);\n    margin: 5px 0;\n    transition: 0.3s;\n}\n\n\/* Hero Section *\/\n.hero {\n    min-height: 70vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n    padding: 8rem 2rem 4rem;\n    background: linear-gradient(135deg, #7986CB 0%, #9FA8DA 50%, #C5CAE9 100%);\n}\n\n.hero::before {\n    content: '';\n    position: absolute;\n    top: 0; left: 0; right: 0; bottom: 0;\n    background: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\n}\n\n.hero-consequences { background: linear-gradient(135deg, #F48FB1 0%, #F06292 50%, #EC407A 100%); }\n.hero-depistage { background: linear-gradient(135deg, #90CAF9 0%, #64B5F6 50%, #42A5F5 100%); }\n.hero-traitements { background: linear-gradient(135deg, #A5D6A7 0%, #81C784 50%, #66BB6A 100%); }\n.hero-drogues { background: linear-gradient(135deg, #CE93D8 0%, #BA68C8 50%, #AB47BC 100%); }\n.hero-prevention { background: linear-gradient(135deg, #80CBC4 0%, #4DB6AC 50%, #26A69A 100%); }\n.hero-etudes { background: linear-gradient(135deg, #FFB74D 0%, #FFA726 50%, #FF9800 100%); }\n.hero-biblio { background: linear-gradient(135deg, #B39DDB 0%, #9575CD 50%, #7E57C2 100%); }\n\n.hero-content {\n    max-width: 1200px;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 4rem;\n    align-items: center;\n    position: relative;\n    z-index: 1;\n    width: 100%;\n}\n\n.hero-text { color: var(--dark); text-align: center; }\n\n.hero-text .badge {\n    display: inline-block;\n    background: rgba(255,255,255,0.5);\n    color: var(--dark);\n    padding: 0.5rem 1.2rem;\n    border-radius: 20px;\n    font-size: 0.85rem;\n    font-weight: 600;\n    margin-bottom: 1.5rem;\n    border: 1px solid rgba(255,255,255,0.7);\n    backdrop-filter: blur(10px);\n}\n\n.hero-text h1 {\n    font-size: 3.5rem;\n    line-height: 1.15;\n    margin-bottom: 1.5rem;\n    color: var(--dark);\n    text-shadow: 0 2px 20px rgba(255,255,255,0.3);\n}\n\n.hero-text h1 span { \n    color: #E65100;\n    text-shadow: 0 2px 15px rgba(230,81,0,0.2);\n}\n\n.hero-text p {\n    font-size: 1.15rem;\n    color: var(--dark);\n    margin-bottom: 2rem;\n    max-width: 700px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.hero-stats {\n    display: flex;\n    gap: 2rem;\n    margin-top: 2.5rem;\n    justify-content: center;\n    flex-wrap: wrap;\n}\n\n.hero-stat {\n    text-align: center;\n    background: rgba(255,255,255,0.4);\n    padding: 1rem 1.2rem;\n    border-radius: 12px;\n    backdrop-filter: blur(10px);\n    border: 1px solid rgba(255,255,255,0.6);\n}\n\n.hero-stat .number {\n    font-family: 'Playfair Display', serif;\n    font-size: 2.5rem;\n    font-weight: 700;\n    color: #E65100;\n}\n\n.hero-stat .label {\n    font-size: 0.85rem;\n    color: var(--dark);\n    margin-top: 0.3rem;\n    font-weight: 500;\n}\n\n.hero-illustration {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.hero-illustration svg {\n    width: 100%;\n    max-width: 500px;\n    height: auto;\n    filter: drop-shadow(0 20px 40px rgba(63,81,181,0.3));\n}\n\n.btn-primary {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    background: var(--accent);\n    color: white;\n    padding: 0.9rem 2rem;\n    border-radius: 12px;\n    text-decoration: none;\n    font-weight: 600;\n    font-size: 0.95rem;\n    transition: all 0.3s ease;\n    border: none;\n    cursor: pointer;\n}\n\n.btn-primary:hover {\n    background: var(--accent-light);\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(255,111,0,0.3);\n}\n\n.btn-outline {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    background: rgba(255,255,255,0.4);\n    color: var(--dark);\n    padding: 0.9rem 2rem;\n    border-radius: 12px;\n    text-decoration: none;\n    font-weight: 600;\n    font-size: 0.95rem;\n    transition: all 0.3s ease;\n    border: 2px solid rgba(69,90,100,0.3);\n    cursor: pointer;\n    backdrop-filter: blur(10px);\n}\n\n.btn-outline:hover {\n    border-color: var(--dark);\n    background: rgba(255,255,255,0.6);\n}\n\n\/* Sections *\/\nsection { padding: 6rem 2rem; }\n\n.section-header {\n    text-align: center;\n    max-width: 700px;\n    margin: 0 auto 4rem;\n}\n\n.section-header .tag {\n    display: inline-block;\n    background: rgba(92,107,192,0.12);\n    color: var(--primary);\n    padding: 0.3rem 1rem;\n    border-radius: 20px;\n    font-size: 0.8rem;\n    font-weight: 600;\n    margin-bottom: 1rem;\n}\n\n.section-header h2 {\n    font-size: 2.5rem;\n    color: var(--primary);\n    margin-bottom: 1rem;\n}\n\n.section-header p {\n    color: var(--text-light);\n    font-size: 1.05rem;\n}\n\n.container { max-width: 1200px; margin: 0 auto; }\n\n\/* ====== ILLUSTRATION GALLERY ====== *\/\n.illustration-gallery {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2rem;\n    margin: 3rem 0;\n}\n\n.illustration-card {\n    background: white;\n    border-radius: var(--radius);\n    overflow: hidden;\n    box-shadow: var(--shadow);\n    transition: all 0.3s ease;\n}\n\n.illustration-card:hover {\n    transform: translateY(-6px);\n    box-shadow: var(--shadow-hover);\n}\n\n.illustration-card svg {\n    width: 100%;\n    height: 240px;\n    display: block;\n}\n\n.illustration-card .caption {\n    padding: 1.2rem 1.5rem;\n}\n\n.illustration-card .caption h4 {\n    font-size: 1rem;\n    color: var(--primary);\n    margin-bottom: 0.4rem;\n    font-family: 'Inter', sans-serif;\n    font-weight: 600;\n}\n\n.illustration-card .caption p {\n    font-size: 0.85rem;\n    color: var(--text-light);\n    line-height: 1.5;\n}\n\n\/* Full width illustration *\/\n.full-illustration {\n    width: 100%;\n    max-width: 1000px;\n    margin: 2rem auto;\n    border-radius: var(--radius);\n    overflow: hidden;\n    box-shadow: var(--shadow);\n}\n\n.full-illustration svg {\n    width: 100%;\n    height: auto;\n    display: block;\n}\n\n\/* Causes *\/\n.causes-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 2rem;\n}\n\n.cause-card {\n    background: var(--bg);\n    border-radius: var(--radius);\n    padding: 2rem;\n    transition: all 0.3s ease;\n    border: 1px solid rgba(92,107,192,0.1);\n}\n\n.cause-card:hover {\n    transform: translateY(-4px);\n    box-shadow: var(--shadow-hover);\n}\n\n.cause-card .icon {\n    width: 56px;\n    height: 56px;\n    background: linear-gradient(135deg, var(--primary), var(--primary-light));\n    border-radius: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 1.2rem;\n}\n\n.cause-card .icon svg { width: 28px; height: 28px; fill: white; }\n.cause-card h3 { font-size: 1.2rem; margin-bottom: 0.8rem; color: var(--primary); }\n.cause-card p { color: var(--text-light); font-size: 0.9rem; }\n\n\/* Consequences *\/\n.consequences-layout {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 4rem;\n    align-items: center;\n}\n\n.consequences-image {\n    border-radius: var(--radius);\n    overflow: hidden;\n    box-shadow: var(--shadow);\n}\n\n.consequences-image svg { width: 100%; height: auto; display: block; }\n\n.consequence-list {\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n}\n\n.consequence-item {\n    display: flex;\n    gap: 1.2rem;\n    align-items: flex-start;\n    padding: 1.5rem;\n    background: white;\n    border-radius: var(--radius);\n    box-shadow: var(--shadow);\n    transition: all 0.3s ease;\n}\n\n.consequence-item:hover { transform: translateX(8px); }\n\n.consequence-item .num {\n    width: 40px;\n    height: 40px;\n    min-width: 40px;\n    background: var(--danger);\n    color: white;\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: 700;\n    font-size: 1.1rem;\n}\n\n.consequence-item h4 { font-size: 1rem; margin-bottom: 0.3rem; color: var(--text); }\n.consequence-item p { font-size: 0.85rem; color: var(--text-light); }\n\n\/* D\u00e9pistage *\/\n.tests-container {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 3rem;\n}\n\n.test-column h3 {\n    font-size: 1.5rem;\n    color: var(--primary);\n    margin-bottom: 0.5rem;\n    display: flex;\n    align-items: center;\n    gap: 0.8rem;\n}\n\n.test-column h3 .dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n}\n\n.test-column.hospital h3 .dot { background: var(--primary); }\n.test-column.public h3 .dot { background: var(--accent); }\n\n.test-column > p {\n    color: var(--text-light);\n    margin-bottom: 2rem;\n    font-size: 0.9rem;\n}\n\n.test-card {\n    background: var(--bg);\n    border-radius: var(--radius);\n    padding: 1.5rem;\n    margin-bottom: 1.2rem;\n    border-left: 4px solid var(--primary);\n    transition: all 0.3s ease;\n}\n\n.test-column.public .test-card { border-left-color: var(--accent); }\n\n.test-card:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--shadow);\n}\n\n.test-card h4 { font-size: 1rem; margin-bottom: 0.5rem; color: var(--text); }\n.test-card p { font-size: 0.85rem; color: var(--text-light); }\n\n.test-card .duration {\n    display: inline-block;\n    margin-top: 0.8rem;\n    background: rgba(92,107,192,0.12);\n    color: var(--primary);\n    padding: 0.2rem 0.8rem;\n    border-radius: 12px;\n    font-size: 0.75rem;\n    font-weight: 600;\n}\n\n.test-column.public .test-card .duration {\n    background: rgba(255,111,0,0.1);\n    color: var(--accent);\n}\n\n.test-card.new-test {\n    position: relative;\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);\n    border: 1px solid rgba(92,107,192,0.15);\n}\n\n.test-card.new-test::after {\n    content: 'NOUVEAU';\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    background: var(--accent);\n    color: white;\n    font-size: 0.6rem;\n    font-weight: 700;\n    padding: 0.2rem 0.6rem;\n    border-radius: 10px;\n    letter-spacing: 0.5px;\n}\n\n.test-card.new-test .test-badge {\n    display: inline-block;\n    background: rgba(171,71,188,0.12);\n    color: var(--purple);\n    font-size: 0.7rem;\n    font-weight: 600;\n    padding: 0.2rem 0.7rem;\n    border-radius: 10px;\n    margin-bottom: 0.6rem;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\/* Traitements *\/\n.treatments-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2rem;\n}\n\n.treatment-card {\n    background: white;\n    border-radius: var(--radius);\n    overflow: hidden;\n    box-shadow: var(--shadow);\n    transition: all 0.3s ease;\n}\n\n.treatment-card:hover {\n    transform: translateY(-6px);\n    box-shadow: var(--shadow-hover);\n}\n\n.treatment-card .card-img {\n    height: 220px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n\n.treatment-card .card-img svg { width: 100%; height: 100%; }\n.treatment-card .card-body { padding: 1.8rem; }\n.treatment-card h3 { font-size: 1.2rem; color: var(--primary); margin-bottom: 0.8rem; }\n.treatment-card p { font-size: 0.9rem; color: var(--text-light); margin-bottom: 1rem; }\n.treatment-card ul { list-style: none; padding: 0; }\n\n.treatment-card ul li {\n    font-size: 0.85rem;\n    color: var(--text-light);\n    padding: 0.3rem 0;\n    padding-left: 1.5rem;\n    position: relative;\n}\n\n.treatment-card ul li::before {\n    content: '\u2713';\n    position: absolute;\n    left: 0;\n    color: var(--success);\n    font-weight: 700;\n}\n\n\/* Drogues *\/\n.drogue-alert {\n    background: rgba(236,64,122,0.1);\n    border: 1px solid rgba(236,64,122,0.3);\n    border-radius: var(--radius);\n    padding: 1.5rem 2rem;\n    margin-bottom: 3rem;\n    display: flex;\n    gap: 1.2rem;\n    align-items: center;\n    backdrop-filter: blur(10px);\n}\n\n.drogue-alert .alert-icon {\n    width: 50px;\n    height: 50px;\n    min-width: 50px;\n    background: var(--danger);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.5rem;\n    color: white;\n}\n\n.drogue-alert h4 {\n    color: #C2185B;\n    font-size: 1.1rem;\n    margin-bottom: 0.3rem;\n    font-family: 'Inter', sans-serif;\n}\n\n.drogue-alert p { color: var(--text); font-size: 0.9rem; }\n\n.drogues-layout {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 3rem;\n    margin-bottom: 3rem;\n}\n\n.drogue-hero-card {\n    grid-column: 1 \/ -1;\n    background: linear-gradient(135deg, rgba(206,147,216,0.3), rgba(244,143,177,0.3));\n    border: 1px solid rgba(171,71,188,0.3);\n    border-radius: var(--radius);\n    padding: 2.5rem;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 2.5rem;\n    align-items: center;\n    backdrop-filter: blur(10px);\n}\n\n.drogue-hero-card .hero-text-block h3 {\n    font-size: 1.8rem;\n    color: #7B1FA2;\n    margin-bottom: 1rem;\n}\n\n.drogue-hero-card .hero-text-block .subtitle {\n    font-size: 0.9rem;\n    color: #C2185B;\n    font-weight: 600;\n    margin-bottom: 1rem;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n}\n\n.drogue-hero-card .hero-text-block p {\n    color: var(--text);\n    font-size: 0.95rem;\n    margin-bottom: 1rem;\n}\n\n.drogue-hero-card .hero-text-block .stats-row {\n    display: flex;\n    gap: 1.5rem;\n    margin-top: 1.5rem;\n    flex-wrap: wrap;\n}\n\n.drogue-hero-card .hero-text-block .stat-item {\n    background: rgba(255,255,255,0.6);\n    padding: 0.8rem 1.2rem;\n    border-radius: 10px;\n    border: 1px solid rgba(255,255,255,0.8);\n}\n\n.drogue-hero-card .hero-text-block .stat-item .val {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.6rem;\n    font-weight: 700;\n    color: #7B1FA2;\n}\n\n.drogue-hero-card .hero-text-block .stat-item .lbl {\n    font-size: 0.75rem;\n    color: var(--text-light);\n}\n\n.drogue-hero-card svg {\n    width: 100%;\n    max-width: 380px;\n    height: auto;\n    margin: 0 auto;\n    display: block;\n}\n\n.drogue-card {\n    background: rgba(255,255,255,0.7);\n    border: 1px solid rgba(92,107,192,0.15);\n    border-radius: var(--radius);\n    padding: 1.8rem;\n    transition: all 0.3s ease;\n    backdrop-filter: blur(10px);\n    position: relative;\n    overflow: hidden;\n}\n\n.drogue-card.cannabis { border-left: 4px solid #66BB6A; }\n.drogue-card.alcool { border-left: 4px solid #FFA726; }\n.drogue-card.cocaine { border-left: 4px solid #B0BEC5; }\n.drogue-card.opiaces { border-left: 4px solid var(--purple); }\n\n.drogue-card:hover {\n    transform: translateY(-4px);\n    background: rgba(255,255,255,0.9);\n    box-shadow: 0 10px 40px rgba(92,107,192,0.2);\n}\n\n.drogue-card .drogue-header {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    margin-bottom: 1rem;\n}\n\n.drogue-card .drogue-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.5rem;\n}\n\n.drogue-card.cannabis .drogue-icon { background: rgba(102,187,106,0.2); }\n.drogue-card.alcool .drogue-icon { background: rgba(255,167,38,0.2); }\n.drogue-card.cocaine .drogue-icon { background: rgba(176,190,197,0.3); }\n.drogue-card.opiaces .drogue-icon { background: rgba(171,71,188,0.15); }\n\n.drogue-card h3 { font-size: 1.15rem; color: var(--dark); }\n\n.drogue-card .drogue-subtitle {\n    font-size: 0.75rem;\n    color: var(--text-light);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.drogue-card p { color: var(--text); font-size: 0.88rem; margin-bottom: 1rem; }\n\n.drogue-card .effects-list { list-style: none; padding: 0; }\n\n.drogue-card .effects-list li {\n    font-size: 0.82rem;\n    color: var(--text);\n    padding: 0.3rem 0;\n    padding-left: 1.3rem;\n    position: relative;\n}\n\n.drogue-card .effects-list li::before {\n    content: '\u26a0';\n    position: absolute;\n    left: 0;\n    color: #E65100;\n    font-size: 0.75rem;\n}\n\n.drogue-card .risk-bar {\n    margin-top: 1rem;\n    background: rgba(92,107,192,0.08);\n    border-radius: 8px;\n    padding: 0.6rem 1rem;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.drogue-card .risk-bar .risk-label {\n    font-size: 0.75rem;\n    color: var(--text-light);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.drogue-card .risk-bar .risk-value { font-weight: 700; font-size: 0.85rem; }\n\n.risk-low { color: #66BB6A; }\n.risk-medium { color: #FFA726; }\n.risk-high { color: #FF7043; }\n.risk-extreme { color: #EC407A; }\n\n.drogues-legal {\n    background: rgba(255,255,255,0.7);\n    border: 1px solid rgba(92,107,192,0.2);\n    border-radius: var(--radius);\n    padding: 2rem;\n    backdrop-filter: blur(10px);\n}\n\n.drogues-legal h3 { color: var(--primary); font-size: 1.3rem; margin-bottom: 1rem; }\n.drogues-legal p { color: var(--text); font-size: 0.9rem; margin-bottom: 0.8rem; }\n\n.drogues-legal .legal-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n    gap: 1rem;\n    margin-top: 1.5rem;\n}\n\n.drogues-legal .legal-item {\n    background: rgba(255,255,255,0.8);\n    padding: 1rem;\n    border-radius: 10px;\n    border: 1px solid rgba(92,107,192,0.15);\n}\n\n.drogues-legal .legal-item h4 {\n    font-size: 0.9rem;\n    color: var(--dark);\n    margin-bottom: 0.3rem;\n    font-family: 'Inter', sans-serif;\n}\n\n.drogues-legal .legal-item p {\n    font-size: 0.8rem;\n    color: var(--text-light);\n    margin: 0;\n}\n\n\/* Pr\u00e9vention *\/\n.prevention-layout {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 4rem;\n    align-items: center;\n}\n\n.prevention-image svg { width: 100%; height: auto; border-radius: var(--radius); }\n\n.prevention-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 1.2rem;\n}\n\n.prevention-item {\n    display: flex;\n    gap: 1rem;\n    align-items: flex-start;\n    padding: 1.2rem;\n    background: var(--bg);\n    border-radius: 12px;\n    transition: all 0.3s ease;\n}\n\n.prevention-item:hover {\n    background: #EEF0FF;\n    transform: translateX(5px);\n}\n\n.prevention-item .check {\n    width: 36px;\n    height: 36px;\n    min-width: 36px;\n    background: var(--success);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.prevention-item .check svg { width: 18px; height: 18px; fill: white; }\n.prevention-item h4 { font-size: 0.95rem; margin-bottom: 0.2rem; }\n.prevention-item p { font-size: 0.82rem; color: var(--text-light); }\n\n\/* Publications *\/\n.pub-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));\n    gap: 2rem;\n}\n\n.pub-card {\n    background: white;\n    border-radius: var(--radius);\n    padding: 2rem;\n    box-shadow: var(--shadow);\n    transition: all 0.3s ease;\n    border-top: 4px solid var(--primary);\n}\n\n.pub-card:hover {\n    transform: translateY(-4px);\n    box-shadow: var(--shadow-hover);\n}\n\n.pub-card .pub-type {\n    display: inline-block;\n    font-size: 0.7rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    padding: 0.3rem 0.8rem;\n    border-radius: 6px;\n    margin-bottom: 1rem;\n}\n\n.pub-card .pub-type.etude { background: rgba(92,107,192,0.15); color: var(--primary); }\n.pub-card .pub-type.rapport { background: rgba(255,111,0,0.15); color: var(--accent); }\n.pub-card .pub-type.revue { background: rgba(46,125,50,0.15); color: var(--success); }\n\n.pub-card h3 { font-size: 1.1rem; margin-bottom: 0.8rem; color: var(--text); line-height: 1.4; }\n\n.pub-card .authors {\n    font-size: 0.8rem;\n    color: var(--text-light);\n    margin-bottom: 0.5rem;\n    font-style: italic;\n}\n\n.pub-card .journal {\n    font-size: 0.8rem;\n    color: var(--primary);\n    font-weight: 600;\n    margin-bottom: 0.8rem;\n}\n\n.pub-card .abstract { font-size: 0.85rem; color: var(--text-light); margin-bottom: 1rem; }\n.pub-card .year { font-size: 0.75rem; color: var(--text-light); opacity: 0.8; }\n\n\/* Bibliographie *\/\n.biblio-filters {\n    display: flex;\n    gap: 0.5rem;\n    justify-content: center;\n    flex-wrap: wrap;\n    margin-bottom: 3rem;\n}\n\n.biblio-filter {\n    padding: 0.5rem 1.2rem;\n    border-radius: 20px;\n    border: 1px solid rgba(92,107,192,0.25);\n    background: white;\n    color: var(--text-light);\n    font-size: 0.85rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.biblio-filter:hover, .biblio-filter.active {\n    background: var(--primary);\n    color: white;\n    border-color: var(--primary);\n}\n\n.biblio-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));\n    gap: 1.5rem;\n}\n\n.biblio-card {\n    background: white;\n    border-radius: var(--radius);\n    padding: 1.8rem;\n    box-shadow: var(--shadow);\n    transition: all 0.3s ease;\n    border-left: 4px solid var(--primary);\n    position: relative;\n}\n\n.biblio-card:hover {\n    transform: translateY(-3px);\n    box-shadow: var(--shadow-hover);\n}\n\n.biblio-card[data-category=\"somnolence\"] { border-left-color: var(--primary); }\n.biblio-card[data-category=\"drogues\"] { border-left-color: var(--purple); }\n.biblio-card[data-category=\"protoxyde\"] { border-left-color: var(--danger); }\n.biblio-card[data-category=\"prevention\"] { border-left-color: var(--success); }\n\n.biblio-card .biblio-type {\n    display: inline-block;\n    font-size: 0.68rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    padding: 0.25rem 0.7rem;\n    border-radius: 5px;\n    margin-bottom: 0.8rem;\n}\n\n.biblio-card .biblio-type.etude { background: rgba(92,107,192,0.15); color: var(--primary); }\n.biblio-card .biblio-type.rapport { background: rgba(255,111,0,0.15); color: var(--accent); }\n.biblio-card .biblio-type.revue { background: rgba(46,125,50,0.15); color: var(--success); }\n.biblio-card .biblio-type.these { background: rgba(171,71,188,0.15); color: var(--purple); }\n.biblio-card .biblio-type.alerte { background: rgba(236,64,122,0.15); color: var(--danger); }\n\n.biblio-card h3 {\n    font-size: 1rem;\n    margin-bottom: 0.6rem;\n    color: var(--text);\n    line-height: 1.4;\n    font-family: 'Inter', sans-serif;\n    font-weight: 600;\n}\n\n.biblio-card .authors {\n    font-size: 0.78rem;\n    color: var(--text-light);\n    margin-bottom: 0.4rem;\n    font-style: italic;\n}\n\n.biblio-card .journal {\n    font-size: 0.78rem;\n    color: var(--primary);\n    font-weight: 600;\n    margin-bottom: 0.6rem;\n}\n\n.biblio-card .abstract {\n    font-size: 0.82rem;\n    color: var(--text-light);\n    margin-bottom: 0.8rem;\n    line-height: 1.6;\n}\n\n.biblio-card .meta {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-top: 0.8rem;\n    border-top: 1px solid rgba(92,107,192,0.1);\n}\n\n.biblio-card .year {\n    font-size: 0.75rem;\n    color: var(--text-light);\n    font-weight: 600;\n}\n\n.biblio-card .doi {\n    font-size: 0.7rem;\n    color: var(--primary);\n    text-decoration: none;\n}\n\n.biblio-card .doi:hover { text-decoration: underline; }\n\n\/* Footer *\/\nfooter {\n    background: var(--primary);\n    color: white;\n    padding: 4rem 2rem 2rem;\n}\n\n.footer-content {\n    max-width: 1200px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 2fr 1fr 1fr;\n    gap: 3rem;\n    margin-bottom: 3rem;\n}\n\n.footer-about h3 { font-size: 1.3rem; margin-bottom: 1rem; }\n\n.footer-about p {\n    opacity: 0.95;\n    font-size: 0.9rem;\n    line-height: 1.8;\n}\n\n.footer-links h4 {\n    font-size: 1rem;\n    margin-bottom: 1rem;\n    font-family: 'Inter', sans-serif;\n}\n\n.footer-links ul { list-style: none; }\n.footer-links ul li { margin-bottom: 0.6rem; }\n\n.footer-links ul li a {\n    color: rgba(255,255,255,0.9);\n    text-decoration: none;\n    font-size: 0.85rem;\n    transition: 0.3s;\n}\n\n.footer-links ul li a:hover { color: white; }\n\n.footer-bottom {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding-top: 2rem;\n    border-top: 1px solid rgba(255,255,255,0.2);\n    text-align: center;\n    font-size: 0.8rem;\n    opacity: 0.85;\n}\n\n\/* Animations *\/\n.fade-in {\n    opacity: 0;\n    transform: translateY(30px);\n    transition: all 0.6s ease;\n}\n\n.fade-in.visible {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n.scroll-progress {\n    position: fixed;\n    top: 70px;\n    left: 0;\n    height: 3px;\n    background: linear-gradient(90deg, var(--accent), var(--accent-light));\n    z-index: 999;\n    transition: width 0.1s linear;\n}\n\n\/* Responsive *\/\n@media (max-width: 968px) {\n    .hero-content { grid-template-columns: 1fr; text-align: center; }\n    .hero-text p { margin: 0 auto 2rem; }\n    .hero-stats { justify-content: center; flex-wrap: wrap; }\n    .hero-illustration { display: none; }\n    .hero-text h1 { font-size: 2.5rem; }\n    .consequences-layout { grid-template-columns: 1fr; }\n    .prevention-layout { grid-template-columns: 1fr; }\n    .tests-container { grid-template-columns: 1fr; }\n    .drogues-layout { grid-template-columns: 1fr; }\n    .drogue-hero-card { grid-template-columns: 1fr; }\n    .footer-content { grid-template-columns: 1fr; }\n    .illustration-gallery { grid-template-columns: 1fr; }\n    nav ul { display: none; }\n    .mobile-toggle { display: block; }\n    nav ul.open {\n        display: flex;\n        flex-direction: column;\n        position: absolute;\n        top: 70px;\n        left: 0;\n        right: 0;\n        background: white;\n        padding: 1rem;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n        max-height: 70vh;\n        overflow-y: auto;\n    }\n}\n\n@media (max-width: 600px) {\n    .hero-text h1 { font-size: 2rem; }\n    .section-header h2 { font-size: 1.8rem; }\n    section { padding: 4rem 1.2rem; }\n    .pub-grid, .biblio-grid { grid-template-columns: 1fr; }\n}\n\n\n              <\/style>\n                        <\/head>\n                        <body>\n                            <!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Les causes de la somnolence au volant \u2014 SomnoVigilance<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/inter@5.0.8\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/playfair-display@5.0.12\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n<div class=\"scroll-progress\" id=\"scrollProgress\"><\/div>\n\n<nav>\n    <div class=\"nav-inner\">\n        <a href=\"index.html\" class=\"logo\">\n            <svg viewBox=\"0 0 32 32\" fill=\"none\">\n                <circle cx=\"16\" cy=\"16\" r=\"14\" stroke=\"#5C6BC0\" stroke-width=\"2.5\"\/>\n                <path d=\"M10 20c0-3.3 2.7-6 6-6s6 2.7 6 6\" stroke=\"#5C6BC0\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                <circle cx=\"12\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <circle cx=\"20\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <path d=\"M8 11c1-2 3-3 4-3M24 11c-1-2-3-3-4-3\" stroke=\"#ff6f00\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n            <\/svg>\n            SomnoVigilance\n        <\/a>\n        <ul id=\"navMenu\">\n            <li><a href=\"index.html\" class=\"active\">Causes<\/a><\/li>\n            <li><a href=\"consequences.html\">Cons\u00e9quences<\/a><\/li>\n            <li><a href=\"depistage.html\">D\u00e9pistage<\/a><\/li>\n            <li><a href=\"traitements.html\">Traitements<\/a><\/li>\n            <li><a href=\"drogues.html\">Drogues<\/a><\/li>\n            <li><a href=\"prevention.html\">Pr\u00e9vention<\/a><\/li>\n            <li><a href=\"etudes.html\">\u00c9tudes<\/a><\/li>\n            <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n        <\/ul>\n        <button class=\"mobile-toggle\" onclick=\"document.getElementById('navMenu').classList.toggle('open')\">\n            <span><\/span><span><\/span><span><\/span>\n        <\/button>\n    <\/div>\n<\/nav>\n\n<!-- Hero Section -->\n<section class=\"hero\">\n    <div class=\"hero-content\">\n        <div class=\"hero-text\">\n            <div class=\"badge\">\u26a0\ufe0f Sant\u00e9 Publique &#038; S\u00e9curit\u00e9 Routi\u00e8re<\/div>\n            <h1>La <span>Somnolence<\/span> au Volant<\/h1>\n            <p>Premi\u00e8re cause d&rsquo;accidentalit\u00e9 sur autoroute en France. Comprendre, d\u00e9pister et pr\u00e9venir pour sauver des vies.<\/p>\n            <div style=\"display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;\">\n                <a href=\"depistage.html\" class=\"btn-primary\">Se tester \u2192<\/a>\n                <a href=\"drogues.html\" class=\"btn-outline\">Drogues &#038; Conduite<\/a>\n            <\/div>\n            <div class=\"hero-stats\">\n                <div class=\"hero-stat\">\n                    <div class=\"number\">1\/3<\/div>\n                    <div class=\"label\">des conducteurs concern\u00e9s<\/div>\n                <\/div>\n                <div class=\"hero-stat\">\n                    <div class=\"number\">800+<\/div>\n                    <div class=\"label\">d\u00e9c\u00e8s par an en France<\/div>\n                <\/div>\n                <div class=\"hero-stat\">\n                    <div class=\"number\">20%<\/div>\n                    <div class=\"label\">des accidents mortels<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"hero-illustration\">\n            <!-- Illustration Hero : Conducteur somnolent de nuit -->\n            <svg viewBox=\"0 0 500 400\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <defs>\n                    <linearGradient id=\"skyGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop offset=\"0%\" stop-color=\"#1a237e\" stop-opacity=\"0.3\"\/>\n                        <stop offset=\"100%\" stop-color=\"#3949ab\" stop-opacity=\"0.1\"\/>\n                    <\/linearGradient>\n                    <linearGradient id=\"roadGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop offset=\"0%\" stop-color=\"#455A64\"\/>\n                        <stop offset=\"100%\" stop-color=\"#263238\"\/>\n                    <\/linearGradient>\n                <\/defs>\n                <!-- Sky -->\n                <rect width=\"500\" height=\"280\" fill=\"url(#skyGrad)\"\/>\n                <!-- Stars -->\n                <circle cx=\"50\" cy=\"40\" r=\"1.5\" fill=\"white\" opacity=\"0.8\"\/>\n                <circle cx=\"120\" cy=\"60\" r=\"1\" fill=\"white\" opacity=\"0.6\"\/>\n                <circle cx=\"200\" cy=\"30\" r=\"1.5\" fill=\"white\" opacity=\"0.7\"\/>\n                <circle cx=\"280\" cy=\"50\" r=\"1\" fill=\"white\" opacity=\"0.5\"\/>\n                <circle cx=\"350\" cy=\"25\" r=\"1.5\" fill=\"white\" opacity=\"0.8\"\/>\n                <circle cx=\"420\" cy=\"55\" r=\"1\" fill=\"white\" opacity=\"0.6\"\/>\n                <circle cx=\"470\" cy=\"35\" r=\"1.5\" fill=\"white\" opacity=\"0.7\"\/>\n                <circle cx=\"80\" cy=\"90\" r=\"1\" fill=\"white\" opacity=\"0.5\"\/>\n                <circle cx=\"380\" cy=\"80\" r=\"1\" fill=\"white\" opacity=\"0.6\"\/>\n                <!-- Moon -->\n                <circle cx=\"430\" cy=\"70\" r=\"28\" fill=\"#FFE082\" opacity=\"0.9\"\/>\n                <circle cx=\"440\" cy=\"65\" r=\"25\" fill=\"url(#skyGrad)\"\/>\n                <!-- Road -->\n                <rect x=\"0\" y=\"280\" width=\"500\" height=\"120\" fill=\"url(#roadGrad)\"\/>\n                <!-- Road markings -->\n                <rect x=\"30\" y=\"340\" width=\"50\" height=\"5\" rx=\"2\" fill=\"white\" opacity=\"0.9\"\/>\n                <rect x=\"130\" y=\"340\" width=\"50\" height=\"5\" rx=\"2\" fill=\"white\" opacity=\"0.9\"\/>\n                <rect x=\"230\" y=\"340\" width=\"50\" height=\"5\" rx=\"2\" fill=\"white\" opacity=\"0.9\"\/>\n                <rect x=\"330\" y=\"340\" width=\"50\" height=\"5\" rx=\"2\" fill=\"white\" opacity=\"0.9\"\/>\n                <rect x=\"430\" y=\"340\" width=\"50\" height=\"5\" rx=\"2\" fill=\"white\" opacity=\"0.9\"\/>\n                <!-- Car body -->\n                <rect x=\"100\" y=\"200\" width=\"300\" height=\"90\" rx=\"18\" fill=\"#5C6BC0\"\/>\n                <rect x=\"130\" y=\"160\" width=\"240\" height=\"60\" rx=\"12\" fill=\"#7986CB\"\/>\n                <!-- Windows -->\n                <rect x=\"145\" y=\"172\" width=\"90\" height=\"40\" rx=\"6\" fill=\"#E8EAF6\" opacity=\"0.85\"\/>\n                <rect x=\"250\" y=\"172\" width=\"90\" height=\"40\" rx=\"6\" fill=\"#E8EAF6\" opacity=\"0.85\"\/>\n                <!-- Driver -->\n                <circle cx=\"190\" cy=\"188\" r=\"18\" fill=\"#455A64\"\/>\n                <path d=\"M172 215c0-10 8-18 18-18s18 8 18 18\" fill=\"#455A64\"\/>\n                <!-- Closed eyes (sleeping) -->\n                <path d=\"M181 185c3-3 6-3 9 0\" stroke=\"white\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\n                <path d=\"M193 185c3-3 6-3 9 0\" stroke=\"white\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\n                <!-- Head nodding down -->\n                <ellipse cx=\"190\" cy=\"200\" rx=\"10\" ry=\"3\" fill=\"#455A64\" opacity=\"0.3\"\/>\n                <!-- Zzz -->\n                <text x=\"220\" y=\"170\" fill=\"#FFB74D\" font-size=\"20\" font-weight=\"bold\">Z<\/text>\n                <text x=\"238\" y=\"155\" fill=\"#FFB74D\" font-size=\"15\" font-weight=\"bold\" opacity=\"0.8\">z<\/text>\n                <text x=\"250\" y=\"143\" fill=\"#FFB74D\" font-size=\"11\" font-weight=\"bold\" opacity=\"0.6\">z<\/text>\n                <!-- Headlights -->\n                <ellipse cx=\"400\" cy=\"245\" rx=\"25\" ry=\"15\" fill=\"#FFE082\" opacity=\"0.6\"\/>\n                <ellipse cx=\"400\" cy=\"245\" rx=\"15\" ry=\"8\" fill=\"#FFF59D\" opacity=\"0.8\"\/>\n                <ellipse cx=\"100\" cy=\"245\" rx=\"25\" ry=\"15\" fill=\"#FFE082\" opacity=\"0.6\"\/>\n                <ellipse cx=\"100\" cy=\"245\" rx=\"15\" ry=\"8\" fill=\"#FFF59D\" opacity=\"0.8\"\/>\n                <!-- Wheels -->\n                <circle cx=\"160\" cy=\"290\" r=\"22\" fill=\"#263238\"\/>\n                <circle cx=\"160\" cy=\"290\" r=\"10\" fill=\"#5C6BC0\"\/>\n                <circle cx=\"340\" cy=\"290\" r=\"22\" fill=\"#263238\"\/>\n                <circle cx=\"340\" cy=\"290\" r=\"10\" fill=\"#5C6BC0\"\/>\n                <!-- Warning sign -->\n                <polygon points=\"60,130 85,175 35,175\" fill=\"#FFB74D\" stroke=\"#E65100\" stroke-width=\"2\"\/>\n                <text x=\"55\" y=\"165\" fill=\"#263238\" font-size=\"22\" font-weight=\"bold\">!<\/text>\n            <\/svg>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Causes Section -->\n<section id=\"causes\">\n    <div class=\"container\">\n        <div class=\"section-header fade-in\">\n            <span class=\"tag\">Facteurs de risque<\/span>\n            <h2>Les Causes de la Somnolence<\/h2>\n            <p>De multiples facteurs physiologiques, comportementaux et environnementaux contribuent \u00e0 l&rsquo;endormissement au volant.<\/p>\n        <\/div>\n\n        <!-- NOUVELLE GALERIE D'ILLUSTRATIONS -->\n        <div class=\"illustration-gallery fade-in\">\n            <!-- Illustration 1 : Dette de sommeil -->\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <defs>\n                        <linearGradient id=\"bedroom\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                            <stop offset=\"0%\" stop-color=\"#E8EAF6\"\/>\n                            <stop offset=\"100%\" stop-color=\"#C5CAE9\"\/>\n                        <\/linearGradient>\n                    <\/defs>\n                    <rect width=\"400\" height=\"240\" fill=\"url(#bedroom)\"\/>\n                    <!-- Window with moon -->\n                    <rect x=\"20\" y=\"30\" width=\"80\" height=\"80\" rx=\"5\" fill=\"#3949ab\" opacity=\"0.3\"\/>\n                    <rect x=\"25\" y=\"35\" width=\"70\" height=\"70\" rx=\"3\" fill=\"#1a237e\" opacity=\"0.5\"\/>\n                    <circle cx=\"70\" cy=\"60\" r=\"12\" fill=\"#FFE082\"\/>\n                    <circle cx=\"75\" cy=\"57\" r=\"10\" fill=\"#1a237e\" opacity=\"0.5\"\/>\n                    <!-- Clock showing 3am -->\n                    <circle cx=\"330\" cy=\"60\" r=\"30\" fill=\"white\" stroke=\"#5C6BC0\" stroke-width=\"3\"\/>\n                    <text x=\"330\" y=\"55\" text-anchor=\"middle\" font-size=\"10\" fill=\"#5C6BC0\" font-weight=\"bold\">3h<\/text>\n                    <line x1=\"330\" y1=\"60\" x2=\"330\" y2=\"45\" stroke=\"#5C6BC0\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                    <line x1=\"330\" y1=\"60\" x2=\"342\" y2=\"65\" stroke=\"#EC407A\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                    <!-- Bed -->\n                    <rect x=\"80\" y=\"140\" width=\"240\" height=\"70\" rx=\"8\" fill=\"#7986CB\"\/>\n                    <rect x=\"80\" y=\"130\" width=\"240\" height=\"20\" rx=\"5\" fill=\"#9FA8DA\"\/>\n                    <!-- Pillow -->\n                    <ellipse cx=\"120\" cy=\"140\" rx=\"30\" ry=\"12\" fill=\"white\"\/>\n                    <!-- Person sleeping restlessly -->\n                    <circle cx=\"140\" cy=\"155\" r=\"18\" fill=\"#FFCC80\"\/>\n                    <path d=\"M125 175 Q 140 185 155 175 L 155 195 L 125 195 Z\" fill=\"#5C6BC0\"\/>\n                    <!-- Messy hair -->\n                    <path d=\"M125 145 Q 140 130 155 145\" stroke=\"#455A64\" stroke-width=\"3\" fill=\"none\"\/>\n                    <!-- Dark circles -->\n                    <ellipse cx=\"133\" cy=\"158\" rx=\"3\" ry=\"2\" fill=\"#455A64\" opacity=\"0.5\"\/>\n                    <ellipse cx=\"147\" cy=\"158\" rx=\"3\" ry=\"2\" fill=\"#455A64\" opacity=\"0.5\"\/>\n                    <!-- Closed eyes -->\n                    <path d=\"M130 155 L 136 155\" stroke=\"#455A64\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n                    <path d=\"M144 155 L 150 155\" stroke=\"#455A64\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n                    <!-- Blanket -->\n                    <path d=\"M160 180 Q 200 170 240 180 Q 280 190 320 180 L 320 210 L 160 210 Z\" fill=\"#9FA8DA\"\/>\n                    <!-- Zzz -->\n                    <text x=\"170\" y=\"130\" fill=\"#5C6BC0\" font-size=\"14\" font-weight=\"bold\" opacity=\"0.7\">Z<\/text>\n                    <text x=\"185\" y=\"118\" fill=\"#5C6BC0\" font-size=\"11\" font-weight=\"bold\" opacity=\"0.5\">z<\/text>\n                    <text x=\"195\" y=\"108\" fill=\"#5C6BC0\" font-size=\"8\" font-weight=\"bold\" opacity=\"0.4\">z<\/text>\n                    <!-- Battery low icon -->\n                    <rect x=\"300\" y=\"180\" width=\"60\" height=\"30\" rx=\"4\" fill=\"white\" stroke=\"#EC407A\" stroke-width=\"2\"\/>\n                    <rect x=\"360\" y=\"188\" width=\"5\" height=\"14\" rx=\"1\" fill=\"#EC407A\"\/>\n                    <rect x=\"305\" y=\"185\" width=\"15\" height=\"20\" fill=\"#EC407A\" opacity=\"0.7\"\/>\n                    <text x=\"330\" y=\"200\" text-anchor=\"middle\" font-size=\"10\" fill=\"#EC407A\" font-weight=\"bold\">10%<\/text>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\ud83d\udca4 Dette de sommeil chronique<\/h4>\n                    <p>Moins de 7h de sommeil par nuit multiplie par 3 le risque d&rsquo;assoupissement au volant.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Illustration 2 : Apn\u00e9e du sommeil -->\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <defs>\n                        <linearGradient id=\"medical\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                            <stop offset=\"0%\" stop-color=\"#E3F2FD\"\/>\n                            <stop offset=\"100%\" stop-color=\"#BBDEFB\"\/>\n                        <\/linearGradient>\n                    <\/defs>\n                    <rect width=\"400\" height=\"240\" fill=\"url(#medical)\"\/>\n                    <!-- Airway diagram -->\n                    <g transform=\"translate(50, 40)\">\n                        <!-- Head profile -->\n                        <path d=\"M50 20 Q 30 20 25 40 Q 20 60 25 80 Q 30 100 50 110 Q 70 110 80 100 L 80 80 Q 85 70 80 60 L 80 40 Q 75 20 50 20 Z\" fill=\"#FFCC80\" stroke=\"#455A64\" stroke-width=\"1.5\"\/>\n                        <!-- Airway blocked -->\n                        <path d=\"M50 50 L 50 90\" stroke=\"#EC407A\" stroke-width=\"3\" stroke-dasharray=\"3,3\"\/>\n                        <!-- X mark -->\n                        <circle cx=\"50\" cy=\"70\" r=\"12\" fill=\"#EC407A\" opacity=\"0.3\"\/>\n                        <path d=\"M44 64 L 56 76 M 56 64 L 44 76\" stroke=\"#EC407A\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/>\n                        <!-- Tongue blocking -->\n                        <ellipse cx=\"55\" cy=\"75\" rx=\"8\" ry=\"5\" fill=\"#FF8A80\" opacity=\"0.7\"\/>\n                    <\/g>\n                    <!-- Waveform showing apnea -->\n                    <g transform=\"translate(180, 40)\">\n                        <rect width=\"180\" height=\"80\" rx=\"8\" fill=\"white\" opacity=\"0.8\"\/>\n                        <text x=\"90\" y=\"15\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\" font-weight=\"bold\">RESPIRATION<\/text>\n                        <!-- Normal breathing -->\n                        <path d=\"M10 35 Q 20 25 30 35 Q 40 45 50 35 Q 60 25 70 35\" stroke=\"#66BB6A\" stroke-width=\"2\" fill=\"none\"\/>\n                        <!-- Apnea flat line -->\n                        <path d=\"M80 35 L 130 35\" stroke=\"#EC407A\" stroke-width=\"2\"\/>\n                        <text x=\"105\" y=\"50\" text-anchor=\"middle\" font-size=\"8\" fill=\"#EC407A\" font-weight=\"bold\">APN\u00c9E<\/text>\n                        <!-- Recovery -->\n                        <path d=\"M140 35 Q 150 20 160 35 Q 170 50 175 35\" stroke=\"#66BB6A\" stroke-width=\"2\" fill=\"none\"\/>\n                        <!-- Time markers -->\n                        <line x1=\"10\" y1=\"65\" x2=\"170\" y2=\"65\" stroke=\"#455A64\" stroke-width=\"0.5\"\/>\n                        <text x=\"10\" y=\"75\" font-size=\"7\" fill=\"#455A64\">0s<\/text>\n                        <text x=\"100\" y=\"75\" font-size=\"7\" fill=\"#EC407A\">30s<\/text>\n                        <text x=\"160\" y=\"75\" font-size=\"7\" fill=\"#455A64\">60s<\/text>\n                    <\/g>\n                    <!-- Statistics -->\n                    <g transform=\"translate(50, 160)\">\n                        <rect width=\"300\" height=\"60\" rx=\"10\" fill=\"white\" opacity=\"0.9\"\/>\n                        <text x=\"20\" y=\"25\" font-size=\"11\" fill=\"#455A64\" font-weight=\"bold\">4 \u00e0 6% de la population<\/text>\n                        <text x=\"20\" y=\"45\" font-size=\"9\" fill=\"#5a5a7a\">souffrent d&rsquo;apn\u00e9e obstructive du sommeil<\/text>\n                        <circle cx=\"260\" cy=\"30\" r=\"18\" fill=\"#EC407A\" opacity=\"0.2\"\/>\n                        <text x=\"260\" y=\"35\" text-anchor=\"middle\" font-size=\"14\" font-weight=\"bold\" fill=\"#EC407A\">SAOS<\/text>\n                    <\/g>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\ud83e\udec1 Apn\u00e9e obstructive du sommeil<\/h4>\n                    <p>Les micro-arr\u00eats respiratoires fragmentent le sommeil et causent une somnolence diurne s\u00e9v\u00e8re.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Illustration 3 : Horaires d\u00e9cal\u00e9s -->\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <defs>\n                        <linearGradient id=\"dayNight\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n                            <stop offset=\"0%\" stop-color=\"#1a237e\"\/>\n                            <stop offset=\"50%\" stop-color=\"#FFB74D\"\/>\n                            <stop offset=\"100%\" stop-color=\"#FFE082\"\/>\n                        <\/linearGradient>\n                    <\/defs>\n                    <rect width=\"400\" height=\"240\" fill=\"url(#dayNight)\"\/>\n                    <!-- 24h clock -->\n                    <circle cx=\"200\" cy=\"120\" r=\"90\" fill=\"white\" opacity=\"0.95\" stroke=\"#5C6BC0\" stroke-width=\"3\"\/>\n                    <circle cx=\"200\" cy=\"120\" r=\"85\" fill=\"none\" stroke=\"#E8EAF6\" stroke-width=\"1\"\/>\n                    <!-- Hour markers -->\n                    <text x=\"200\" y=\"50\" text-anchor=\"middle\" font-size=\"10\" fill=\"#5C6BC0\" font-weight=\"bold\">0h<\/text>\n                    <text x=\"280\" y=\"125\" text-anchor=\"middle\" font-size=\"10\" fill=\"#5C6BC0\" font-weight=\"bold\">6h<\/text>\n                    <text x=\"200\" y=\"200\" text-anchor=\"middle\" font-size=\"10\" fill=\"#5C6BC0\" font-weight=\"bold\">12h<\/text>\n                    <text x=\"120\" y=\"125\" text-anchor=\"middle\" font-size=\"10\" fill=\"#5C6BC0\" font-weight=\"bold\">18h<\/text>\n                    <!-- Danger zone (2h-6h) -->\n                    <path d=\"M 200 120 L 200 35 A 85 85 0 0 1 275 90 Z\" fill=\"#EC407A\" opacity=\"0.3\"\/>\n                    <path d=\"M 200 120 L 275 90 A 85 85 0 0 1 285 120 Z\" fill=\"#EC407A\" opacity=\"0.3\"\/>\n                    <text x=\"245\" y=\"70\" font-size=\"8\" fill=\"#EC407A\" font-weight=\"bold\" transform=\"rotate(30, 245, 70)\">ZONE<\/text>\n                    <text x=\"250\" y=\"82\" font-size=\"8\" fill=\"#EC407A\" font-weight=\"bold\" transform=\"rotate(30, 250, 82)\">CRITIQUE<\/text>\n                    <!-- Clock hands -->\n                    <line x1=\"200\" y1=\"120\" x2=\"200\" y2=\"60\" stroke=\"#455A64\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                    <line x1=\"200\" y1=\"120\" x2=\"240\" y2=\"140\" stroke=\"#EC407A\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                    <circle cx=\"200\" cy=\"120\" r=\"5\" fill=\"#455A64\"\/>\n                    <!-- Sun and moon icons -->\n                    <circle cx=\"60\" cy=\"60\" r=\"15\" fill=\"#FFE082\"\/>\n                    <circle cx=\"60\" cy=\"60\" r=\"10\" fill=\"#FFB74D\"\/>\n                    <circle cx=\"340\" cy=\"180\" r=\"15\" fill=\"#C5CAE9\"\/>\n                    <circle cx=\"345\" cy=\"175\" r=\"12\" fill=\"#1a237e\" opacity=\"0.5\"\/>\n                    <!-- Legend -->\n                    <g transform=\"translate(20, 210)\">\n                        <rect width=\"360\" height=\"25\" rx=\"5\" fill=\"white\" opacity=\"0.8\"\/>\n                        <circle cx=\"15\" cy=\"12\" r=\"5\" fill=\"#EC407A\" opacity=\"0.5\"\/>\n                        <text x=\"25\" y=\"16\" font-size=\"9\" fill=\"#455A64\">Zone \u00e0 risque (2h-6h)<\/text>\n                        <circle cx=\"180\" cy=\"12\" r=\"5\" fill=\"#66BB6A\"\/>\n                        <text x=\"190\" y=\"16\" font-size=\"9\" fill=\"#455A64\">Rythme circadien perturb\u00e9<\/text>\n                    <\/g>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\ud83d\udd50 Horaires d\u00e9cal\u00e9s &#038; rythme circadien<\/h4>\n                    <p>Travail de nuit et trajets entre 2h et 6h du matin perturbent l&rsquo;horloge biologique.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Illustration 4 : M\u00e9dicaments -->\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <rect width=\"400\" height=\"240\" fill=\"#FFF3E0\"\/>\n                    <!-- Pill bottles -->\n                    <g transform=\"translate(40, 60)\">\n                        <rect x=\"0\" y=\"20\" width=\"50\" height=\"70\" rx=\"5\" fill=\"#EC407A\"\/>\n                        <rect x=\"0\" y=\"20\" width=\"50\" height=\"15\" rx=\"5\" fill=\"#C2185B\"\/>\n                        <rect x=\"10\" y=\"50\" width=\"30\" height=\"30\" rx=\"3\" fill=\"white\" opacity=\"0.9\"\/>\n                        <text x=\"25\" y=\"70\" text-anchor=\"middle\" font-size=\"8\" fill=\"#EC407A\" font-weight=\"bold\">Niv.3<\/text>\n                        <text x=\"25\" y=\"105\" text-anchor=\"middle\" font-size=\"8\" fill=\"#455A64\">Anxiolytiques<\/text>\n                    <\/g>\n                    <g transform=\"translate(120, 60)\">\n                        <rect x=\"0\" y=\"20\" width=\"50\" height=\"70\" rx=\"5\" fill=\"#FFA726\"\/>\n                        <rect x=\"0\" y=\"20\" width=\"50\" height=\"15\" rx=\"5\" fill=\"#E65100\"\/>\n                        <rect x=\"10\" y=\"50\" width=\"30\" height=\"30\" rx=\"3\" fill=\"white\" opacity=\"0.9\"\/>\n                        <text x=\"25\" y=\"70\" text-anchor=\"middle\" font-size=\"8\" fill=\"#FFA726\" font-weight=\"bold\">Niv.4<\/text>\n                        <text x=\"25\" y=\"105\" text-anchor=\"middle\" font-size=\"8\" fill=\"#455A64\">Opio\u00efdes<\/text>\n                    <\/g>\n                    <g transform=\"translate(200, 60)\">\n                        <rect x=\"0\" y=\"20\" width=\"50\" height=\"70\" rx=\"5\" fill=\"#AB47BC\"\/>\n                        <rect x=\"0\" y=\"20\" width=\"50\" height=\"15\" rx=\"5\" fill=\"#7B1FA2\"\/>\n                        <rect x=\"10\" y=\"50\" width=\"30\" height=\"30\" rx=\"3\" fill=\"white\" opacity=\"0.9\"\/>\n                        <text x=\"25\" y=\"70\" text-anchor=\"middle\" font-size=\"8\" fill=\"#AB47BC\" font-weight=\"bold\">Niv.3<\/text>\n                        <text x=\"25\" y=\"105\" text-anchor=\"middle\" font-size=\"8\" fill=\"#455A64\">Antihistam.<\/text>\n                    <\/g>\n                    <!-- Warning triangle -->\n                    <g transform=\"translate(290, 50)\">\n                        <polygon points=\"40,0 80,70 0,70\" fill=\"#FFB74D\" stroke=\"#E65100\" stroke-width=\"2\"\/>\n                        <text x=\"40\" y=\"55\" text-anchor=\"middle\" font-size=\"28\" font-weight=\"bold\" fill=\"#E65100\">!<\/text>\n                        <text x=\"40\" y=\"90\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\" font-weight=\"bold\">DANGER<\/text>\n                        <text x=\"40\" y=\"102\" text-anchor=\"middle\" font-size=\"8\" fill=\"#455A64\">Conduite<\/text>\n                    <\/g>\n                    <!-- Bottom info -->\n                    <g transform=\"translate(20, 180)\">\n                        <rect width=\"360\" height=\"50\" rx=\"8\" fill=\"white\" opacity=\"0.9\"\/>\n                        <text x=\"20\" y=\"22\" font-size=\"10\" fill=\"#455A64\" font-weight=\"bold\">\ud83d\ude97 V\u00e9rifiez toujours les pictogrammes<\/text>\n                        <text x=\"20\" y=\"38\" font-size=\"9\" fill=\"#5a5a7a\">Triangle orange = pr\u00e9caution \u2022 Triangle rouge = d\u00e9conseill\u00e9<\/text>\n                    <\/g>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\ud83d\udc8a M\u00e9dicaments s\u00e9datifs<\/h4>\n                    <p>Plus de 800 m\u00e9dicaments r\u00e9duisent la vigilance. V\u00e9rifiez les pictogrammes sur les bo\u00eetes.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Illustration 5 : Monotonie routi\u00e8re -->\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <defs>\n                        <linearGradient id=\"highway\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                            <stop offset=\"0%\" stop-color=\"#90CAF9\"\/>\n                            <stop offset=\"60%\" stop-color=\"#E3F2FD\"\/>\n                            <stop offset=\"100%\" stop-color=\"#455A64\"\/>\n                        <\/linearGradient>\n                    <\/defs>\n                    <rect width=\"400\" height=\"240\" fill=\"url(#highway)\"\/>\n                    <!-- Distant mountains -->\n                    <path d=\"M0 140 L 80 100 L 150 130 L 220 95 L 300 125 L 400 110 L 400 160 L 0 160 Z\" fill=\"#B0BEC5\" opacity=\"0.5\"\/>\n                    <!-- Highway perspective -->\n                    <path d=\"M 150 240 L 195 140 L 205 140 L 250 240 Z\" fill=\"#455A64\"\/>\n                    <!-- Road markings -->\n                    <path d=\"M 200 145 L 200 155\" stroke=\"white\" stroke-width=\"2\"\/>\n                    <path d=\"M 200 165 L 200 180\" stroke=\"white\" stroke-width=\"2\"\/>\n                    <path d=\"M 200 190 L 200 210\" stroke=\"white\" stroke-width=\"3\"\/>\n                    <path d=\"M 200 220 L 200 240\" stroke=\"white\" stroke-width=\"3\"\/>\n                    <!-- Side barriers -->\n                    <line x1=\"150\" y1=\"240\" x2=\"195\" y2=\"140\" stroke=\"#B0BEC5\" stroke-width=\"1\"\/>\n                    <line x1=\"250\" y1=\"240\" x2=\"205\" y2=\"140\" stroke=\"#B0BEC5\" stroke-width=\"1\"\/>\n                    <!-- Monotony waves -->\n                    <path d=\"M 30 180 Q 50 175 70 180 Q 90 185 110 180\" stroke=\"#5C6BC0\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.5\"\/>\n                    <path d=\"M 290 180 Q 310 175 330 180 Q 350 185 370 180\" stroke=\"#5C6BC0\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.5\"\/>\n                    <!-- Hypnosis symbol -->\n                    <g transform=\"translate(160, 30)\">\n                        <circle cx=\"40\" cy=\"40\" r=\"35\" fill=\"white\" opacity=\"0.9\"\/>\n                        <circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"none\" stroke=\"#5C6BC0\" stroke-width=\"1.5\"\/>\n                        <circle cx=\"40\" cy=\"40\" r=\"22\" fill=\"none\" stroke=\"#5C6BC0\" stroke-width=\"1.5\"\/>\n                        <circle cx=\"40\" cy=\"40\" r=\"14\" fill=\"none\" stroke=\"#5C6BC0\" stroke-width=\"1.5\"\/>\n                        <circle cx=\"40\" cy=\"40\" r=\"6\" fill=\"#5C6BC0\"\/>\n                        <text x=\"40\" y=\"95\" text-anchor=\"middle\" font-size=\"9\" fill=\"#5C6BC0\" font-weight=\"bold\">HYPOVIGILANCE<\/text>\n                    <\/g>\n                    <!-- Car on road -->\n                    <rect x=\"185\" y=\"200\" width=\"30\" height=\"20\" rx=\"3\" fill=\"#5C6BC0\"\/>\n                    <rect x=\"190\" y=\"195\" width=\"20\" height=\"10\" rx=\"2\" fill=\"#7986CB\"\/>\n                    <circle cx=\"190\" cy=\"220\" r=\"3\" fill=\"#263238\"\/>\n                    <circle cx=\"210\" cy=\"220\" r=\"3\" fill=\"#263238\"\/>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\ud83d\udee3\ufe0f Monotonie autorouti\u00e8re<\/h4>\n                    <p>Les trajets longs et monotones favorisent l&rsquo;hypovigilance et les micro-sommeils.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Illustration 6 : Alcool et repas -->\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <rect width=\"400\" height=\"240\" fill=\"#FBE9E7\"\/>\n                    <!-- Wine glass -->\n                    <g transform=\"translate(60, 50)\">\n                        <path d=\"M 30 20 Q 10 20 10 50 Q 10 80 30 90 Q 50 80 50 50 Q 50 20 30 20 Z\" fill=\"#EC407A\" opacity=\"0.6\" stroke=\"#C2185B\" stroke-width=\"1.5\"\/>\n                        <rect x=\"27\" y=\"90\" width=\"6\" height=\"30\" fill=\"#C2185B\"\/>\n                        <ellipse cx=\"30\" cy=\"125\" rx=\"20\" ry=\"5\" fill=\"#C2185B\"\/>\n                        <text x=\"30\" y=\"145\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\" font-weight=\"bold\">Alcool<\/text>\n                    <\/g>\n                    <!-- Burger\/meal -->\n                    <g transform=\"translate(160, 60)\">\n                        <ellipse cx=\"40\" cy=\"30\" rx=\"35\" ry=\"10\" fill=\"#8D6E63\"\/>\n                        <rect x=\"5\" y=\"30\" width=\"70\" height=\"15\" fill=\"#FFB74D\"\/>\n                        <rect x=\"5\" y=\"45\" width=\"70\" height=\"8\" fill=\"#66BB6A\"\/>\n                        <rect x=\"5\" y=\"53\" width=\"70\" height=\"12\" fill=\"#D84315\"\/>\n                        <ellipse cx=\"40\" cy=\"70\" rx=\"35\" ry=\"10\" fill=\"#8D6E63\"\/>\n                        <text x=\"40\" y=\"100\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\" font-weight=\"bold\">Repas copieux<\/text>\n                    <\/g>\n                    <!-- Arrow + equals -->\n                    <text x=\"270\" y=\"100\" font-size=\"24\" fill=\"#EC407A\" font-weight=\"bold\">+<\/text>\n                    <!-- Sleepy face -->\n                    <g transform=\"translate(290, 60)\">\n                        <circle cx=\"40\" cy=\"40\" r=\"35\" fill=\"#FFCC80\" stroke=\"#455A64\" stroke-width=\"1.5\"\/>\n                        <!-- Closed eyes -->\n                        <path d=\"M25 35 Q 30 32 35 35\" stroke=\"#455A64\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/>\n                        <path d=\"M45 35 Q 50 32 55 35\" stroke=\"#455A64\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/>\n                        <!-- Yawning mouth -->\n                        <ellipse cx=\"40\" cy=\"55\" rx=\"8\" ry=\"10\" fill=\"#455A64\"\/>\n                        <!-- Zzz -->\n                        <text x=\"80\" y=\"30\" fill=\"#EC407A\" font-size=\"12\" font-weight=\"bold\">Z<\/text>\n                        <text x=\"90\" y=\"20\" fill=\"#EC407A\" font-size=\"9\" font-weight=\"bold\" opacity=\"0.7\">z<\/text>\n                        <text x=\"40\" y=\"100\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\" font-weight=\"bold\">Somnolence<\/text>\n                    <\/g>\n                    <!-- Bottom warning -->\n                    <g transform=\"translate(20, 180)\">\n                        <rect width=\"360\" height=\"50\" rx=\"8\" fill=\"white\" opacity=\"0.9\"\/>\n                        <text x=\"20\" y=\"22\" font-size=\"10\" fill=\"#EC407A\" font-weight=\"bold\">\u26a0\ufe0f Effet synergique<\/text>\n                        <text x=\"20\" y=\"38\" font-size=\"9\" fill=\"#5a5a7a\">Alcool + repas copieux = risque de somnolence multipli\u00e9 par 4 entre 13h et 15h<\/text>\n                    <\/g>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\ud83c\udf7a Alcool &#038; repas copieux<\/h4>\n                    <p>L&rsquo;effet post-prandial majore le risque entre 13h et 15h, surtout avec de l&rsquo;alcool.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"causes-grid\">\n            <div class=\"cause-card fade-in\">\n                <div class=\"icon\">\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\n                <\/div>\n                <h3>Dette de sommeil<\/h3>\n                <p>Le manque chronique de sommeil (moins de 7h par nuit) est le facteur principal. Cumuler des nuits courtes augmente exponentiellement le risque d&rsquo;assoupissement.<\/p>\n            <\/div>\n            <div class=\"cause-card fade-in\">\n                <div class=\"icon\">\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z\"\/><\/svg>\n                <\/div>\n                <h3>Apn\u00e9e du sommeil<\/h3>\n                <p>Le syndrome d&rsquo;apn\u00e9es obstructives du sommeil (SAOS) touche 4-6% de la population. Les micro-arr\u00eats respiratoires fragmentent le sommeil et causent une somnolence diurne s\u00e9v\u00e8re.<\/p>\n            <\/div>\n            <div class=\"cause-card fade-in\">\n                <div class=\"icon\">\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\"\/><\/svg>\n                <\/div>\n                <h3>Horaires d\u00e9cal\u00e9s<\/h3>\n                <p>Travail de nuit, shifts rotatifs, trajets t\u00f4t le matin ou tard le soir perturbent le rythme circadien. La zone critique se situe entre 2h et 6h du matin.<\/p>\n            <\/div>\n            <div class=\"cause-card fade-in\">\n                <div class=\"icon\">\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z\"\/><\/svg>\n                <\/div>\n                <h3>M\u00e9dicaments s\u00e9datifs<\/h3>\n                <p>Anxiolytiques, antihistaminiques, certains antid\u00e9presseurs et antalgiques opio\u00efdes r\u00e9duisent la vigilance. Les m\u00e9dicaments de niveau 3 et 4 sont particuli\u00e8rement concern\u00e9s.<\/p>\n            <\/div>\n            <div class=\"cause-card fade-in\">\n                <div class=\"icon\">\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"\/><\/svg>\n                <\/div>\n                <h3>Monotonie routi\u00e8re<\/h3>\n                <p>Les trajets longs et monotones sur autoroute, la conduite de nuit, l&rsquo;hypoxie d&rsquo;altitude et les conditions m\u00e9t\u00e9orologiques favorisent l&rsquo;hypovigilance.<\/p>\n            <\/div>\n            <div class=\"cause-card fade-in\">\n                <div class=\"icon\">\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z\"\/><\/svg>\n                <\/div>\n                <h3>Repas copieux &#038; alcool<\/h3>\n                <p>Les repas riches en glucides et la consommation d&rsquo;alcool (m\u00eame en faible quantit\u00e9) potentialisent la somnolence. L&rsquo;effet post-prandial majore le risque entre 13h et 15h.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<footer>\n    <div class=\"footer-content\">\n        <div class=\"footer-about\">\n            <h3>SomnoVigilance<\/h3>\n            <p>Centre de ressources d\u00e9di\u00e9 \u00e0 la compr\u00e9hension, au d\u00e9pistage et \u00e0 la pr\u00e9vention de la somnolence au volant.<\/p>\n            <p style=\"margin-top:1rem;font-size:0.8rem;opacity:0.85;\">\u26a0\ufe0f Ce site est \u00e0 vis\u00e9e informative et ne remplace pas une consultation m\u00e9dicale.<\/p>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Navigation<\/h4>\n            <ul>\n                <li><a href=\"index.html\">Les causes<\/a><\/li>\n                <li><a href=\"consequences.html\">Les cons\u00e9quences<\/a><\/li>\n                <li><a href=\"depistage.html\">Le d\u00e9pistage<\/a><\/li>\n                <li><a href=\"traitements.html\">Les traitements<\/a><\/li>\n                <li><a href=\"drogues.html\">Drogues &#038; Conduite<\/a><\/li>\n                <li><a href=\"prevention.html\">La pr\u00e9vention<\/a><\/li>\n                <li><a href=\"etudes.html\">\u00c9tudes<\/a><\/li>\n                <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n            <\/ul>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Ressources utiles<\/h4>\n            <ul>\n                <li><a href=\"#\">S\u00e9curit\u00e9 Routi\u00e8re<\/a><\/li>\n                <li><a href=\"#\">INSERM<\/a><\/li>\n                <li><a href=\"#\">SFRMS<\/a><\/li>\n                <li><a href=\"#\">MILDECA<\/a><\/li>\n                <li><a href=\"#\">OFDT<\/a><\/li>\n                <li><a href=\"#\">Drogues Info Service<\/a><\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n    <div class=\"footer-bottom\">\n        <p>\u00a9 2026 SomnoVigilance \u2014 Derni\u00e8re mise \u00e0 jour : Octobre 2026<\/p>\n    <\/div>\n<\/footer>\n\n<script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Les cons\u00e9quences de la somnolence au volant \u2014 SomnoVigilance<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/inter@5.0.8\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/playfair-display@5.0.12\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n<div class=\"scroll-progress\" id=\"scrollProgress\"><\/div>\n\n<nav>\n    <div class=\"nav-inner\">\n        <a href=\"index.html\" class=\"logo\">\n            <svg viewBox=\"0 0 32 32\" fill=\"none\">\n                <circle cx=\"16\" cy=\"16\" r=\"14\" stroke=\"#5C6BC0\" stroke-width=\"2.5\"\/>\n                <path d=\"M10 20c0-3.3 2.7-6 6-6s6 2.7 6 6\" stroke=\"#5C6BC0\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                <circle cx=\"12\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <circle cx=\"20\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <path d=\"M8 11c1-2 3-3 4-3M24 11c-1-2-3-3-4-3\" stroke=\"#ff6f00\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n            <\/svg>\n            SomnoVigilance\n        <\/a>\n        <ul id=\"navMenu\">\n            <li><a href=\"index.html\">Causes<\/a><\/li>\n            <li><a href=\"consequences.html\" class=\"active\">Cons\u00e9quences<\/a><\/li>\n            <li><a href=\"depistage.html\">D\u00e9pistage<\/a><\/li>\n            <li><a href=\"traitements.html\">Traitements<\/a><\/li>\n            <li><a href=\"drogues.html\">Drogues<\/a><\/li>\n            <li><a href=\"prevention.html\">Pr\u00e9vention<\/a><\/li>\n            <li><a href=\"etudes.html\">\u00c9tudes<\/a><\/li>\n            <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n        <\/ul>\n        <button class=\"mobile-toggle\" onclick=\"document.getElementById('navMenu').classList.toggle('open')\">\n            <span><\/span><span><\/span><span><\/span>\n        <\/button>\n    <\/div>\n<\/nav>\n\n<section class=\"hero hero-consequences\">\n    <div class=\"hero-content\">\n        <div class=\"hero-text\">\n            <div class=\"badge\">\ud83d\udea8 Impact sanitaire &#038; social<\/div>\n            <h1>Les <span>Cons\u00e9quences<\/span><\/h1>\n            <p>La somnolence au volant est un tueur silencieux responsable d&rsquo;accidents graves aux cons\u00e9quences dramatiques.<\/p>\n            <div style=\"display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;\">\n                <a href=\"depistage.html\" class=\"btn-primary\">Se tester \u2192<\/a>\n                <a href=\"prevention.html\" class=\"btn-outline\">Pr\u00e9vention<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section id=\"consequences\">\n    <div class=\"container\">\n        <div class=\"section-header fade-in\">\n            <span class=\"tag\">Impact<\/span>\n            <h2>Un impact majeur sur la s\u00e9curit\u00e9 routi\u00e8re<\/h2>\n            <p>Les accidents li\u00e9s \u00e0 la somnolence sont particuli\u00e8rement graves : absence de freinage, vitesse \u00e9lev\u00e9e, trajectoire rectiligne.<\/p>\n        <\/div>\n\n        <!-- NOUVELLE ILLUSTRATION : Statistiques visuelles -->\n        <div class=\"full-illustration fade-in\">\n            <svg viewBox=\"0 0 1000 300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <defs>\n                    <linearGradient id=\"statBg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n                        <stop offset=\"0%\" stop-color=\"#FCE4EC\"\/>\n                        <stop offset=\"50%\" stop-color=\"#F8BBD0\"\/>\n                        <stop offset=\"100%\" stop-color=\"#F48FB1\"\/>\n                    <\/linearGradient>\n                <\/defs>\n                <rect width=\"1000\" height=\"300\" fill=\"url(#statBg)\"\/>\n                \n                <!-- Stat 1 : Deaths -->\n                <g transform=\"translate(50, 50)\">\n                    <rect width=\"200\" height=\"200\" rx=\"15\" fill=\"white\" opacity=\"0.9\"\/>\n                    <circle cx=\"100\" cy=\"80\" r=\"50\" fill=\"#EC407A\" opacity=\"0.2\"\/>\n                    <text x=\"100\" y=\"95\" text-anchor=\"middle\" font-size=\"36\" font-weight=\"bold\" fill=\"#EC407A\" font-family=\"Playfair Display\">800+<\/text>\n                    <text x=\"100\" y=\"130\" text-anchor=\"middle\" font-size=\"12\" fill=\"#455A64\" font-weight=\"bold\">D\u00c9C\u00c8S \/ AN<\/text>\n                    <text x=\"100\" y=\"150\" text-anchor=\"middle\" font-size=\"10\" fill=\"#5a5a7a\">en France<\/text>\n                    <!-- Cross icon -->\n                    <path d=\"M85 170 L 115 170 M 100 155 L 100 185\" stroke=\"#EC407A\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                <\/g>\n\n                <!-- Stat 2 : Percentage -->\n                <g transform=\"translate(280, 50)\">\n                    <rect width=\"200\" height=\"200\" rx=\"15\" fill=\"white\" opacity=\"0.9\"\/>\n                    <!-- Pie chart -->\n                    <circle cx=\"100\" cy=\"80\" r=\"50\" fill=\"#E0E0E0\"\/>\n                    <path d=\"M 100 80 L 100 30 A 50 50 0 0 1 148 95 Z\" fill=\"#EC407A\"\/>\n                    <text x=\"100\" y=\"95\" text-anchor=\"middle\" font-size=\"24\" font-weight=\"bold\" fill=\"white\">20%<\/text>\n                    <text x=\"100\" y=\"150\" text-anchor=\"middle\" font-size=\"12\" fill=\"#455A64\" font-weight=\"bold\">ACCIDENTS MORTELS<\/text>\n                    <text x=\"100\" y=\"170\" text-anchor=\"middle\" font-size=\"10\" fill=\"#5a5a7a\">li\u00e9s \u00e0 la somnolence<\/text>\n                <\/g>\n\n                <!-- Stat 3 : Highway -->\n                <g transform=\"translate(510, 50)\">\n                    <rect width=\"200\" height=\"200\" rx=\"15\" fill=\"white\" opacity=\"0.9\"\/>\n                    <circle cx=\"100\" cy=\"80\" r=\"50\" fill=\"#FFB74D\" opacity=\"0.2\"\/>\n                    <text x=\"100\" y=\"95\" text-anchor=\"middle\" font-size=\"36\" font-weight=\"bold\" fill=\"#E65100\" font-family=\"Playfair Display\">1\u00e8re<\/text>\n                    <text x=\"100\" y=\"130\" text-anchor=\"middle\" font-size=\"12\" fill=\"#455A64\" font-weight=\"bold\">CAUSE AUTOROUTE<\/text>\n                    <text x=\"100\" y=\"150\" text-anchor=\"middle\" font-size=\"10\" fill=\"#5a5a7a\">devant vitesse &#038; alcool<\/text>\n                    <!-- Road icon -->\n                    <path d=\"M70 170 L 100 160 L 130 170\" stroke=\"#E65100\" stroke-width=\"2\" fill=\"none\"\/>\n                    <path d=\"M75 180 L 100 172 L 125 180\" stroke=\"#E65100\" stroke-width=\"2\" fill=\"none\"\/>\n                <\/g>\n\n                <!-- Stat 4 : Cost -->\n                <g transform=\"translate(740, 50)\">\n                    <rect width=\"200\" height=\"200\" rx=\"15\" fill=\"white\" opacity=\"0.9\"\/>\n                    <circle cx=\"100\" cy=\"80\" r=\"50\" fill=\"#5C6BC0\" opacity=\"0.2\"\/>\n                    <text x=\"100\" y=\"95\" text-anchor=\"middle\" font-size=\"32\" font-weight=\"bold\" fill=\"#5C6BC0\" font-family=\"Playfair Display\">2 Mds\u20ac<\/text>\n                    <text x=\"100\" y=\"130\" text-anchor=\"middle\" font-size=\"12\" fill=\"#455A64\" font-weight=\"bold\">CO\u00dbT ANNUEL<\/text>\n                    <text x=\"100\" y=\"150\" text-anchor=\"middle\" font-size=\"10\" fill=\"#5a5a7a\">socio-\u00e9conomique<\/text>\n                    <!-- Euro icon -->\n                    <text x=\"100\" y=\"180\" text-anchor=\"middle\" font-size=\"20\" fill=\"#5C6BC0\" font-weight=\"bold\">\u20ac<\/text>\n                <\/g>\n            <\/svg>\n        <\/div>\n\n        <div class=\"consequences-layout\">\n            <div class=\"consequences-image fade-in\">\n                <!-- Illustration d\u00e9taill\u00e9e : Accident -->\n                <svg viewBox=\"0 0 500 500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <defs>\n                        <linearGradient id=\"skyAcc\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                            <stop offset=\"0%\" stop-color=\"#B0BEC5\"\/>\n                            <stop offset=\"100%\" stop-color=\"#ECEFF1\"\/>\n                        <\/linearGradient>\n                        <linearGradient id=\"roadAcc\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                            <stop offset=\"0%\" stop-color=\"#455A64\"\/>\n                            <stop offset=\"100%\" stop-color=\"#263238\"\/>\n                        <\/linearGradient>\n                    <\/defs>\n                    <rect width=\"500\" height=\"500\" rx=\"16\" fill=\"url(#skyAcc)\"\/>\n                    <!-- Clouds -->\n                    <ellipse cx=\"100\" cy=\"60\" rx=\"50\" ry=\"20\" fill=\"white\" opacity=\"0.7\"\/>\n                    <ellipse cx=\"350\" cy=\"40\" rx=\"60\" ry=\"22\" fill=\"white\" opacity=\"0.6\"\/>\n                    <ellipse cx=\"450\" cy=\"80\" rx=\"40\" ry=\"15\" fill=\"white\" opacity=\"0.5\"\/>\n                    <!-- Road -->\n                    <rect x=\"0\" y=\"250\" width=\"500\" height=\"250\" fill=\"url(#roadAcc)\"\/>\n                    <rect x=\"0\" y=\"250\" width=\"500\" height=\"4\" fill=\"#FFA726\"\/>\n                    <!-- Road markings -->\n                    <rect x=\"50\" y=\"370\" width=\"50\" height=\"5\" rx=\"2\" fill=\"white\" opacity=\"0.9\"\/>\n                    <rect x=\"150\" y=\"370\" width=\"50\" height=\"5\" rx=\"2\" fill=\"white\" opacity=\"0.9\"\/>\n                    <rect x=\"250\" y=\"370\" width=\"50\" height=\"5\" rx=\"2\" fill=\"white\" opacity=\"0.9\"\/>\n                    <rect x=\"350\" y=\"370\" width=\"50\" height=\"5\" rx=\"2\" fill=\"white\" opacity=\"0.9\"\/>\n                    <!-- Guardrail -->\n                    <rect x=\"350\" y=\"200\" width=\"8\" height=\"150\" fill=\"#90A4AE\"\/>\n                    <rect x=\"380\" y=\"200\" width=\"8\" height=\"150\" fill=\"#90A4AE\"\/>\n                    <rect x=\"410\" y=\"200\" width=\"8\" height=\"150\" fill=\"#90A4AE\"\/>\n                    <rect x=\"345\" y=\"220\" width=\"78\" height=\"10\" rx=\"3\" fill=\"#ECEFF1\"\/>\n                    <rect x=\"345\" y=\"260\" width=\"78\" height=\"10\" rx=\"3\" fill=\"#ECEFF1\"\/>\n                    <rect x=\"345\" y=\"300\" width=\"78\" height=\"10\" rx=\"3\" fill=\"#ECEFF1\"\/>\n                    <!-- Crashed car (tilted) -->\n                    <g transform=\"rotate(-18, 200, 320)\">\n                        <rect x=\"120\" y=\"280\" width=\"180\" height=\"70\" rx=\"12\" fill=\"#EC407A\"\/>\n                        <rect x=\"145\" y=\"250\" width=\"130\" height=\"50\" rx=\"10\" fill=\"#F06292\"\/>\n                        <rect x=\"155\" y=\"258\" width=\"45\" height=\"35\" rx=\"5\" fill=\"#FCE4EC\" opacity=\"0.7\"\/>\n                        <rect x=\"210\" y=\"258\" width=\"45\" height=\"35\" rx=\"5\" fill=\"#FCE4EC\" opacity=\"0.7\"\/>\n                        <!-- Broken window -->\n                        <path d=\"M215 265 L 230 280 L 245 265 L 240 280\" stroke=\"white\" stroke-width=\"1\" fill=\"none\"\/>\n                        <circle cx=\"155\" cy=\"350\" r=\"18\" fill=\"#263238\"\/>\n                        <circle cx=\"155\" cy=\"350\" r=\"8\" fill=\"#EC407A\"\/>\n                        <circle cx=\"265\" cy=\"350\" r=\"18\" fill=\"#263238\"\/>\n                        <circle cx=\"265\" cy=\"350\" r=\"8\" fill=\"#EC407A\"\/>\n                    <\/g>\n                    <!-- Impact marks -->\n                    <path d=\"M340 270l-20-10M340 290l-25 5M340 310l-18 15\" stroke=\"#FFA726\" stroke-width=\"2.5\" opacity=\"0.9\"\/>\n                    <!-- Debris -->\n                    <rect x=\"280\" y=\"380\" width=\"15\" height=\"8\" rx=\"2\" fill=\"#90A4AE\" transform=\"rotate(25,287,384)\"\/>\n                    <rect x=\"310\" y=\"400\" width=\"10\" height=\"6\" rx=\"2\" fill=\"#90A4AE\" transform=\"rotate(-15,315,403)\"\/>\n                    <circle cx=\"295\" cy=\"410\" r=\"4\" fill=\"#90A4AE\" opacity=\"0.7\"\/>\n                    <rect x=\"260\" y=\"395\" width=\"8\" height=\"5\" rx=\"1\" fill=\"#EC407A\" opacity=\"0.6\"\/>\n                    <!-- Warning triangle on road -->\n                    <polygon points=\"80,340 100,375 60,375\" fill=\"#FFB74D\" stroke=\"#E65100\" stroke-width=\"2\"\/>\n                    <text x=\"75\" y=\"368\" fill=\"#263238\" font-size=\"18\" font-weight=\"bold\">!<\/text>\n                    <!-- Skid marks -->\n                    <path d=\"M 180 400 Q 200 380 220 395 Q 240 410 260 395\" stroke=\"#263238\" stroke-width=\"3\" fill=\"none\" opacity=\"0.4\"\/>\n                    <path d=\"M 200 420 Q 220 400 240 415 Q 260 430 280 415\" stroke=\"#263238\" stroke-width=\"3\" fill=\"none\" opacity=\"0.4\"\/>\n                    <!-- Statistics overlay -->\n                    <rect x=\"20\" y=\"20\" width=\"200\" height=\"70\" rx=\"10\" fill=\"rgba(236,64,122,0.95)\"\/>\n                    <text x=\"35\" y=\"45\" fill=\"white\" font-size=\"12\" font-weight=\"bold\">75% des accidents<\/text>\n                    <text x=\"35\" y=\"65\" fill=\"white\" font-size=\"12\" font-weight=\"bold\">sans freinage<\/text>\n                    <text x=\"35\" y=\"82\" fill=\"white\" font-size=\"9\" opacity=\"0.9\">conducteur endormi<\/text>\n                <\/svg>\n            <\/div>\n            <div class=\"consequence-list fade-in\">\n                <div class=\"consequence-item\">\n                    <div class=\"num\">1<\/div>\n                    <div>\n                        <h4>Accidents corporels graves<\/h4>\n                        <p>Les accidents li\u00e9s \u00e0 la somnolence sont souvent plus s\u00e9v\u00e8res : pas de freinage, vitesse pleine, trajectoire rectiligne. La mortalit\u00e9 est 2 \u00e0 3 fois sup\u00e9rieure.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"consequence-item\">\n                    <div class=\"num\">2<\/div>\n                    <div>\n                        <h4>Sorties de route<\/h4>\n                        <p>75% des accidents de somnolence sont des sorties de route sans tentative d&rsquo;\u00e9vitement, le conducteur \u00e9tant endormi ou en hypovigilance.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"consequence-item\">\n                    <div class=\"num\">3<\/div>\n                    <div>\n                        <h4>Cons\u00e9quences l\u00e9gales<\/h4>\n                        <p>La somnolence au volant peut engager la responsabilit\u00e9 p\u00e9nale du conducteur. En cas d&rsquo;accident corporel, les peines peuvent aller jusqu&rsquo;\u00e0 10 ans de prison.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"consequence-item\">\n                    <div class=\"num\">4<\/div>\n                    <div>\n                        <h4>Impact psychologique<\/h4>\n                        <p>Trouble de stress post-traumatique, culpabilit\u00e9, anxi\u00e9t\u00e9 de conduite. Les victimes et conducteurs d\u00e9veloppent souvent une phobie de la route.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"consequence-item\">\n                    <div class=\"num\">5<\/div>\n                    <div>\n                        <h4>Co\u00fbt \u00e9conomique<\/h4>\n                        <p>Le co\u00fbt socio-\u00e9conomique est estim\u00e9 \u00e0 plus de 2 milliards d&rsquo;euros par an en France, incluant soins, invalidit\u00e9 et pertes de productivit\u00e9.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- NOUVELLE GALERIE : Types d'accidents -->\n        <div class=\"illustration-gallery fade-in\" style=\"margin-top: 4rem;\">\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <rect width=\"400\" height=\"240\" fill=\"#ECEFF1\"\/>\n                    <!-- Road -->\n                    <rect x=\"0\" y=\"120\" width=\"400\" height=\"120\" fill=\"#455A64\"\/>\n                    <rect x=\"0\" y=\"120\" width=\"400\" height=\"3\" fill=\"#FFA726\"\/>\n                    <!-- Car going off road -->\n                    <g transform=\"rotate(-25, 200, 180)\">\n                        <rect x=\"150\" y=\"160\" width=\"100\" height=\"40\" rx=\"8\" fill=\"#5C6BC0\"\/>\n                        <rect x=\"165\" y=\"145\" width=\"70\" height=\"25\" rx=\"5\" fill=\"#7986CB\"\/>\n                        <circle cx=\"170\" cy=\"200\" r=\"10\" fill=\"#263238\"\/>\n                        <circle cx=\"230\" cy=\"200\" r=\"10\" fill=\"#263238\"\/>\n                    <\/g>\n                    <!-- Arrow showing trajectory -->\n                    <path d=\"M 100 200 Q 150 180 200 160 Q 250 140 300 100\" stroke=\"#EC407A\" stroke-width=\"3\" fill=\"none\" stroke-dasharray=\"5,3\" marker-end=\"url(#arrow)\"\/>\n                    <defs>\n                        <marker id=\"arrow\" markerWidth=\"10\" markerHeight=\"10\" refX=\"5\" refY=\"5\" orient=\"auto\">\n                            <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#EC407A\"\/>\n                        <\/marker>\n                    <\/defs>\n                    <!-- Trees -->\n                    <circle cx=\"320\" cy=\"80\" r=\"20\" fill=\"#66BB6A\" opacity=\"0.7\"\/>\n                    <rect x=\"317\" y=\"95\" width=\"6\" height=\"25\" fill=\"#8D6E63\"\/>\n                    <circle cx=\"360\" cy=\"70\" r=\"15\" fill=\"#81C784\" opacity=\"0.7\"\/>\n                    <rect x=\"357\" y=\"82\" width=\"6\" height=\"20\" fill=\"#8D6E63\"\/>\n                    <!-- Label -->\n                    <rect x=\"20\" y=\"20\" width=\"180\" height=\"40\" rx=\"8\" fill=\"white\" opacity=\"0.9\"\/>\n                    <text x=\"30\" y=\"45\" font-size=\"11\" fill=\"#EC407A\" font-weight=\"bold\">\ud83d\ude97 Sortie de route<\/text>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\ud83d\udea7 Sortie de route<\/h4>\n                    <p>Type d&rsquo;accident le plus fr\u00e9quent, sans freinage ni tentative d&rsquo;\u00e9vitement.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <rect width=\"400\" height=\"240\" fill=\"#E3F2FD\"\/>\n                    <!-- Rear-end collision -->\n                    <rect x=\"0\" y=\"140\" width=\"400\" height=\"100\" fill=\"#455A64\"\/>\n                    <!-- Car 1 (stopped) -->\n                    <rect x=\"220\" y=\"150\" width=\"100\" height=\"40\" rx=\"8\" fill=\"#FFA726\"\/>\n                    <rect x=\"235\" y=\"135\" width=\"70\" height=\"25\" rx=\"5\" fill=\"#FFB74D\"\/>\n                    <circle cx=\"240\" cy=\"190\" r=\"10\" fill=\"#263238\"\/>\n                    <circle cx=\"300\" cy=\"190\" r=\"10\" fill=\"#263238\"\/>\n                    <!-- Stop lights -->\n                    <circle cx=\"225\" cy=\"165\" r=\"4\" fill=\"#EC407A\"\/>\n                    <circle cx=\"225\" cy=\"175\" r=\"4\" fill=\"#EC407A\"\/>\n                    <!-- Car 2 (crashing) -->\n                    <rect x=\"100\" y=\"150\" width=\"100\" height=\"40\" rx=\"8\" fill=\"#5C6BC0\"\/>\n                    <rect x=\"115\" y=\"135\" width=\"70\" height=\"25\" rx=\"5\" fill=\"#7986CB\"\/>\n                    <circle cx=\"120\" cy=\"190\" r=\"10\" fill=\"#263238\"\/>\n                    <circle cx=\"180\" cy=\"190\" r=\"10\" fill=\"#263238\"\/>\n                    <!-- Impact -->\n                    <g transform=\"translate(200, 155)\">\n                        <path d=\"M 0 0 L 10 -10 L 5 0 L 15 -5 L 8 5 L 18 2 L 10 10 L 20 15 L 5 15 L 10 25 L 0 18 L -5 25 L -3 15 L -12 18 L -5 8 L -15 10 L -8 0 L -15 -5 L -5 -3 Z\" fill=\"#FFB74D\"\/>\n                    <\/g>\n                    <!-- Speed lines -->\n                    <line x1=\"50\" y1=\"160\" x2=\"80\" y2=\"160\" stroke=\"#5C6BC0\" stroke-width=\"2\" opacity=\"0.6\"\/>\n                    <line x1=\"40\" y1=\"175\" x2=\"75\" y2=\"175\" stroke=\"#5C6BC0\" stroke-width=\"2\" opacity=\"0.6\"\/>\n                    <line x1=\"60\" y1=\"185\" x2=\"85\" y2=\"185\" stroke=\"#5C6BC0\" stroke-width=\"2\" opacity=\"0.6\"\/>\n                    <!-- Label -->\n                    <rect x=\"20\" y=\"20\" width=\"200\" height=\"40\" rx=\"8\" fill=\"white\" opacity=\"0.9\"\/>\n                    <text x=\"30\" y=\"45\" font-size=\"11\" fill=\"#EC407A\" font-weight=\"bold\">\ud83d\udca5 Collision arri\u00e8re<\/text>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\ud83d\udca5 Collision par l&rsquo;arri\u00e8re<\/h4>\n                    <p>Le conducteur endormi ne freine pas et percute le v\u00e9hicule pr\u00e9c\u00e9dent \u00e0 pleine vitesse.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <rect width=\"400\" height=\"240\" fill=\"#FFF3E0\"\/>\n                    <!-- Psychological impact -->\n                    <circle cx=\"200\" cy=\"120\" r=\"80\" fill=\"#FFCC80\" opacity=\"0.3\"\/>\n                    <!-- Head with stress -->\n                    <circle cx=\"200\" cy=\"120\" r=\"60\" fill=\"#FFCC80\"\/>\n                    <!-- Stressed eyes -->\n                    <circle cx=\"180\" cy=\"110\" r=\"8\" fill=\"white\"\/>\n                    <circle cx=\"220\" cy=\"110\" r=\"8\" fill=\"white\"\/>\n                    <circle cx=\"180\" cy=\"110\" r=\"4\" fill=\"#455A64\"\/>\n                    <circle cx=\"220\" cy=\"110\" r=\"4\" fill=\"#455A64\"\/>\n                    <!-- Worried eyebrows -->\n                    <path d=\"M 170 95 Q 180 90 190 95\" stroke=\"#455A64\" stroke-width=\"2\" fill=\"none\"\/>\n                    <path d=\"M 210 95 Q 220 90 230 95\" stroke=\"#455A64\" stroke-width=\"2\" fill=\"none\"\/>\n                    <!-- Worried mouth -->\n                    <path d=\"M 180 145 Q 200 135 220 145\" stroke=\"#455A64\" stroke-width=\"2\" fill=\"none\"\/>\n                    <!-- Stress lines -->\n                    <path d=\"M 130 80 L 115 70\" stroke=\"#EC407A\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                    <path d=\"M 125 100 L 105 100\" stroke=\"#EC407A\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                    <path d=\"M 270 80 L 285 70\" stroke=\"#EC407A\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                    <path d=\"M 275 100 L 295 100\" stroke=\"#EC407A\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                    <!-- PTSD symbols -->\n                    <text x=\"100\" y=\"200\" font-size=\"10\" fill=\"#EC407A\" font-weight=\"bold\">ANXI\u00c9T\u00c9<\/text>\n                    <text x=\"250\" y=\"200\" font-size=\"10\" fill=\"#EC407A\" font-weight=\"bold\">TRAUMATISME<\/text>\n                    <!-- Label -->\n                    <rect x=\"20\" y=\"20\" width=\"220\" height=\"40\" rx=\"8\" fill=\"white\" opacity=\"0.9\"\/>\n                    <text x=\"30\" y=\"45\" font-size=\"11\" fill=\"#EC407A\" font-weight=\"bold\">\ud83e\udde0 Impact psychologique<\/text>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\ud83e\udde0 S\u00e9quelles psychologiques<\/h4>\n                    <p>Stress post-traumatique, culpabilit\u00e9 et phobie de la conduite chez les victimes.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<footer>\n    <div class=\"footer-content\">\n        <div class=\"footer-about\">\n            <h3>SomnoVigilance<\/h3>\n            <p>Centre de ressources d\u00e9di\u00e9 \u00e0 la compr\u00e9hension, au d\u00e9pistage et \u00e0 la pr\u00e9vention de la somnolence au volant.<\/p>\n            <p style=\"margin-top:1rem;font-size:0.8rem;opacity:0.85;\">\u26a0\ufe0f Ce site est \u00e0 vis\u00e9e informative et ne remplace pas une consultation m\u00e9dicale.<\/p>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Navigation<\/h4>\n            <ul>\n                <li><a href=\"index.html\">Les causes<\/a><\/li>\n                <li><a href=\"consequences.html\">Les cons\u00e9quences<\/a><\/li>\n                <li><a href=\"depistage.html\">Le d\u00e9pistage<\/a><\/li>\n                <li><a href=\"traitements.html\">Les traitements<\/a><\/li>\n                <li><a href=\"drogues.html\">Drogues &#038; Conduite<\/a><\/li>\n                <li><a href=\"prevention.html\">La pr\u00e9vention<\/a><\/li>\n                <li><a href=\"etudes.html\">\u00c9tudes<\/a><\/li>\n                <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n            <\/ul>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Ressources utiles<\/h4>\n            <ul>\n                <li><a href=\"#\">S\u00e9curit\u00e9 Routi\u00e8re<\/a><\/li>\n                <li><a href=\"#\">INSERM<\/a><\/li>\n                <li><a href=\"#\">SFRMS<\/a><\/li>\n                <li><a href=\"#\">MILDECA<\/a><\/li>\n                <li><a href=\"#\">OFDT<\/a><\/li>\n                <li><a href=\"#\">Drogues Info Service<\/a><\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n    <div class=\"footer-bottom\">\n        <p>\u00a9 2026 SomnoVigilance \u2014 Derni\u00e8re mise \u00e0 jour : Octobre 2026<\/p>\n    <\/div>\n<\/footer>\n\n<script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Le d\u00e9pistage de la somnolence \u2014 SomnoVigilance<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/inter@5.0.8\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/playfair-display@5.0.12\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n<div class=\"scroll-progress\" id=\"scrollProgress\"><\/div>\n\n<nav>\n    <div class=\"nav-inner\">\n        <a href=\"index.html\" class=\"logo\">\n            <svg viewBox=\"0 0 32 32\" fill=\"none\">\n                <circle cx=\"16\" cy=\"16\" r=\"14\" stroke=\"#5C6BC0\" stroke-width=\"2.5\"\/>\n                <path d=\"M10 20c0-3.3 2.7-6 6-6s6 2.7 6 6\" stroke=\"#5C6BC0\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                <circle cx=\"12\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <circle cx=\"20\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <path d=\"M8 11c1-2 3-3 4-3M24 11c-1-2-3-3-4-3\" stroke=\"#ff6f00\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n            <\/svg>\n            SomnoVigilance\n        <\/a>\n        <ul id=\"navMenu\">\n            <li><a href=\"index.html\">Causes<\/a><\/li>\n            <li><a href=\"consequences.html\">Cons\u00e9quences<\/a><\/li>\n            <li><a href=\"depistage.html\" class=\"active\">D\u00e9pistage<\/a><\/li>\n            <li><a href=\"traitements.html\">Traitements<\/a><\/li>\n            <li><a href=\"drogues.html\">Drogues<\/a><\/li>\n            <li><a href=\"prevention.html\">Pr\u00e9vention<\/a><\/li>\n            <li><a href=\"etudes.html\">\u00c9tudes<\/a><\/li>\n            <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n        <\/ul>\n        <button class=\"mobile-toggle\" onclick=\"document.getElementById('navMenu').classList.toggle('open')\">\n            <span><\/span><span><\/span><span><\/span>\n        <\/button>\n    <\/div>\n<\/nav>\n\n<section class=\"hero hero-depistage\">\n    <div class=\"hero-content\">\n        <div class=\"hero-text\">\n            <div class=\"badge\">\ud83d\udd0d Diagnostic &#038; \u00c9valuation<\/div>\n            <h1>Le <span>D\u00e9pistage<\/span><\/h1>\n            <p>Des outils valid\u00e9s permettent d&rsquo;\u00e9valuer le risque de somnolence, du test grand public \u00e0 l&rsquo;exploration en laboratoire du sommeil.<\/p>\n            <div style=\"display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;\">\n                <a href=\"traitements.html\" class=\"btn-primary\">Voir les traitements \u2192<\/a>\n                <a href=\"etudes.html\" class=\"btn-outline\">\u00c9tudes scientifiques<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section id=\"depistage\">\n    <div class=\"container\">\n        <div class=\"section-header fade-in\">\n            <span class=\"tag\">Diagnostic<\/span>\n            <h2>Les outils d&rsquo;\u00e9valuation<\/h2>\n            <p>Plusieurs tests sp\u00e9cifiques \u00e9valuent la vigilance et les capacit\u00e9s cognitives li\u00e9es \u00e0 la conduite.<\/p>\n        <\/div>\n\n        <!-- NOUVELLE ILLUSTRATION : Laboratoire du sommeil -->\n        <div class=\"full-illustration fade-in\">\n            <svg viewBox=\"0 0 1000 350\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <defs>\n                    <linearGradient id=\"labBg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n                        <stop offset=\"0%\" stop-color=\"#E3F2FD\"\/>\n                        <stop offset=\"100%\" stop-color=\"#BBDEFB\"\/>\n                    <\/linearGradient>\n                <\/defs>\n                <rect width=\"1000\" height=\"350\" fill=\"url(#labBg)\"\/>\n                \n                <!-- Bedroom scene -->\n                <rect x=\"50\" y=\"50\" width=\"400\" height=\"250\" rx=\"10\" fill=\"white\" opacity=\"0.7\"\/>\n                <text x=\"250\" y=\"30\" text-anchor=\"middle\" font-size=\"14\" fill=\"#5C6BC0\" font-weight=\"bold\">\ud83c\udfe5 POLYSOMNOGRAPHIE (PSG)<\/text>\n                \n                <!-- Bed -->\n                <rect x=\"80\" y=\"180\" width=\"280\" height=\"90\" rx=\"8\" fill=\"#7986CB\"\/>\n                <rect x=\"80\" y=\"170\" width=\"280\" height=\"20\" rx=\"5\" fill=\"#9FA8DA\"\/>\n                <!-- Pillow -->\n                <ellipse cx=\"130\" cy=\"180\" rx=\"35\" ry=\"12\" fill=\"white\"\/>\n                <!-- Patient -->\n                <circle cx=\"140\" cy=\"195\" r=\"20\" fill=\"#FFCC80\"\/>\n                <path d=\"M120 220 Q 140 230 160 220 L 160 250 L 120 250 Z\" fill=\"#5C6BC0\"\/>\n                <!-- Closed eyes -->\n                <path d=\"M130 192 L 138 192\" stroke=\"#455A64\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n                <path d=\"M145 192 L 153 192\" stroke=\"#455A64\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n                <!-- EEG electrodes on head -->\n                <circle cx=\"125\" cy=\"180\" r=\"3\" fill=\"#EC407A\"\/>\n                <circle cx=\"140\" cy=\"175\" r=\"3\" fill=\"#EC407A\"\/>\n                <circle cx=\"155\" cy=\"180\" r=\"3\" fill=\"#EC407A\"\/>\n                <!-- Wires from electrodes -->\n                <path d=\"M 125 180 Q 200 150 350 150\" stroke=\"#EC407A\" stroke-width=\"1.5\" fill=\"none\" stroke-dasharray=\"3,2\"\/>\n                <path d=\"M 140 175 Q 210 140 350 140\" stroke=\"#EC407A\" stroke-width=\"1.5\" fill=\"none\" stroke-dasharray=\"3,2\"\/>\n                <path d=\"M 155 180 Q 220 160 350 160\" stroke=\"#EC407A\" stroke-width=\"1.5\" fill=\"none\" stroke-dasharray=\"3,2\"\/>\n                \n                <!-- Monitoring equipment -->\n                <rect x=\"350\" y=\"80\" width=\"90\" height=\"150\" rx=\"5\" fill=\"#455A64\"\/>\n                <rect x=\"355\" y=\"90\" width=\"80\" height=\"100\" rx=\"3\" fill=\"#263238\"\/>\n                <!-- Screen with waveforms -->\n                <!-- EEG -->\n                <path d=\"M 360 110 Q 370 100 380 110 Q 390 120 400 110 Q 410 100 420 110 Q 430 120 435 110\" stroke=\"#66BB6A\" stroke-width=\"1.5\" fill=\"none\"\/>\n                <text x=\"360\" y=\"105\" font-size=\"7\" fill=\"#66BB6A\">EEG<\/text>\n                <!-- EOG -->\n                <path d=\"M 360 135 Q 375 125 390 135 Q 405 145 420 135 Q 430 130 435 135\" stroke=\"#FFA726\" stroke-width=\"1.5\" fill=\"none\"\/>\n                <text x=\"360\" y=\"130\" font-size=\"7\" fill=\"#FFA726\">EOG<\/text>\n                <!-- Respiration -->\n                <path d=\"M 360 160 Q 380 145 400 160 Q 420 175 435 160\" stroke=\"#42A5F5\" stroke-width=\"1.5\" fill=\"none\"\/>\n                <text x=\"360\" y=\"155\" font-size=\"7\" fill=\"#42A5F5\">RESP<\/text>\n                <!-- SpO2 -->\n                <path d=\"M 360 180 L 380 180 L 385 175 L 390 185 L 395 180 L 435 180\" stroke=\"#EC407A\" stroke-width=\"1.5\" fill=\"none\"\/>\n                <text x=\"360\" y=\"175\" font-size=\"7\" fill=\"#EC407A\">SpO2<\/text>\n                <!-- Status lights -->\n                <circle cx=\"365\" cy=\"210\" r=\"4\" fill=\"#66BB6A\"\/>\n                <circle cx=\"380\" cy=\"210\" r=\"4\" fill=\"#66BB6A\"\/>\n                <circle cx=\"395\" cy=\"210\" r=\"4\" fill=\"#FFA726\"\/>\n                \n                <!-- Second scene : Questionnaire -->\n                <rect x=\"520\" y=\"50\" width=\"430\" height=\"250\" rx=\"10\" fill=\"white\" opacity=\"0.7\"\/>\n                <text x=\"735\" y=\"30\" text-anchor=\"middle\" font-size=\"14\" fill=\"#5C6BC0\" font-weight=\"bold\">\ud83d\udccb \u00c9CHELLE D&rsquo;EWORTH (ESS)<\/text>\n                \n                <!-- Tablet\/Questionnaire -->\n                <rect x=\"560\" y=\"80\" width=\"200\" height=\"200\" rx=\"10\" fill=\"white\" stroke=\"#5C6BC0\" stroke-width=\"2\"\/>\n                <rect x=\"560\" y=\"80\" width=\"200\" height=\"30\" rx=\"10\" fill=\"#5C6BC0\"\/>\n                <text x=\"660\" y=\"100\" text-anchor=\"middle\" font-size=\"11\" fill=\"white\" font-weight=\"bold\">Questionnaire ESS<\/text>\n                \n                <!-- Questions -->\n                <text x=\"575\" y=\"130\" font-size=\"9\" fill=\"#455A64\">1. En lisant :<\/text>\n                <rect x=\"575\" y=\"135\" width=\"170\" height=\"15\" rx=\"3\" fill=\"#E8EAF6\"\/>\n                <rect x=\"575\" y=\"135\" width=\"85\" height=\"15\" rx=\"3\" fill=\"#5C6BC0\" opacity=\"0.5\"\/>\n                \n                <text x=\"575\" y=\"165\" font-size=\"9\" fill=\"#455A64\">2. En regardant la TV :<\/text>\n                <rect x=\"575\" y=\"170\" width=\"170\" height=\"15\" rx=\"3\" fill=\"#E8EAF6\"\/>\n                <rect x=\"575\" y=\"170\" width=\"120\" height=\"15\" rx=\"3\" fill=\"#5C6BC0\" opacity=\"0.5\"\/>\n                \n                <text x=\"575\" y=\"200\" font-size=\"9\" fill=\"#455A64\">3. Assis, immobile :<\/text>\n                <rect x=\"575\" y=\"205\" width=\"170\" height=\"15\" rx=\"3\" fill=\"#E8EAF6\"\/>\n                <rect x=\"575\" y=\"205\" width=\"60\" height=\"15\" rx=\"3\" fill=\"#5C6BC0\" opacity=\"0.5\"\/>\n                \n                <text x=\"575\" y=\"235\" font-size=\"9\" fill=\"#455A64\">4. En voiture (passager) :<\/text>\n                <rect x=\"575\" y=\"240\" width=\"170\" height=\"15\" rx=\"3\" fill=\"#E8EAF6\"\/>\n                <rect x=\"575\" y=\"240\" width=\"140\" height=\"15\" rx=\"3\" fill=\"#EC407A\" opacity=\"0.5\"\/>\n                \n                <!-- Score display -->\n                <rect x=\"790\" y=\"100\" width=\"140\" height=\"160\" rx=\"10\" fill=\"#FFF3E0\" stroke=\"#FFA726\" stroke-width=\"2\"\/>\n                <text x=\"860\" y=\"125\" text-anchor=\"middle\" font-size=\"11\" fill=\"#E65100\" font-weight=\"bold\">SCORE<\/text>\n                <text x=\"860\" y=\"175\" text-anchor=\"middle\" font-size=\"40\" font-weight=\"bold\" fill=\"#EC407A\" font-family=\"Playfair Display\">12<\/text>\n                <text x=\"860\" y=\"195\" text-anchor=\"middle\" font-size=\"10\" fill=\"#455A64\">\/ 24<\/text>\n                <line x1=\"810\" y1=\"210\" x2=\"910\" y2=\"210\" stroke=\"#FFA726\" stroke-width=\"1\"\/>\n                <text x=\"860\" y=\"230\" text-anchor=\"middle\" font-size=\"9\" fill=\"#EC407A\" font-weight=\"bold\">\u26a0 Somnolence<\/text>\n                <text x=\"860\" y=\"245\" text-anchor=\"middle\" font-size=\"9\" fill=\"#EC407A\" font-weight=\"bold\">excessive<\/text>\n            <\/svg>\n        <\/div>\n\n        <div class=\"tests-container fade-in\">\n            <div class=\"test-column hospital\">\n                <h3><span class=\"dot\"><\/span>Tests Hospitaliers<\/h3>\n                <p>R\u00e9alis\u00e9s en centre du sommeil par des m\u00e9decins sp\u00e9cialistes.<\/p>\n                <div class=\"test-card\">\n                    <h4>Polysomnographie (PSG)<\/h4>\n                    <p>Examen de r\u00e9f\u00e9rence enregistrant EEG, EOG, EMG, respiration, saturation en O2 et mouvements des jambes pendant une nuit compl\u00e8te en laboratoire.<\/p>\n                    <span class=\"duration\">Dur\u00e9e : 1 nuit compl\u00e8te<\/span>\n                <\/div>\n                <div class=\"test-card\">\n                    <h4>Test It\u00e9ratif de Latence d&rsquo;Endormissement (TILE)<\/h4>\n                    <p>5 \u00e0 6 siestes programm\u00e9es toutes les 2 heures. Mesure la tendance \u00e0 l&rsquo;endormissement diurne. Une latence &lt; 8 min est pathologique.<\/p>\n                    <span class=\"duration\">Dur\u00e9e : 1 journ\u00e9e (8h-18h)<\/span>\n                <\/div>\n                <div class=\"test-card\">\n                    <h4>Test de Maintien d&rsquo;\u00c9veil (TME)<\/h4>\n                    <p>\u00c9value la capacit\u00e9 \u00e0 rester \u00e9veill\u00e9 dans des conditions monotones. Utilis\u00e9 pour l&rsquo;aptitude \u00e0 la conduite professionnelle.<\/p>\n                    <span class=\"duration\">Dur\u00e9e : 4 siestes de 40 min<\/span>\n                <\/div>\n                <div class=\"test-card\">\n                    <h4>Polygraphie ventilatoire<\/h4>\n                    <p>Enregistrement simplifi\u00e9 de la respiration nocturne pour d\u00e9pister le syndrome d&rsquo;apn\u00e9es du sommeil. R\u00e9alisable \u00e0 domicile.<\/p>\n                    <span class=\"duration\">Dur\u00e9e : 1 nuit \u00e0 domicile<\/span>\n                <\/div>\n                <div class=\"test-card new-test\">\n                    <span class=\"test-badge\">Test de vigilance<\/span>\n                    <h4>Test OSLER (Oxford Sleep Resistance Test)<\/h4>\n                    <p>Test comportemental de r\u00e9sistance au sommeil r\u00e9alis\u00e9 dans une pi\u00e8ce obscure. Le patient doit rester \u00e9veill\u00e9 en appuyant sur un bouton \u00e0 chaque signal lumineux (toutes les 2,75 secondes). Latence &lt; 18 min = somnolence pathologique.<\/p>\n                    <span class=\"duration\">Dur\u00e9e : 30 \u00e0 50 min<\/span>\n                <\/div>\n                <div class=\"test-card new-test\">\n                    <span class=\"test-badge\">Simulation de conduite<\/span>\n                    <h4>Test MURT (Mesure Utility R\u00e9actionnelle de Tracking)<\/h4>\n                    <p>Test informatis\u00e9 de poursuite visuelle et de temps de r\u00e9action sur simulateur. \u00c9value la coordination visuo-motrice et les r\u00e9actions \u00e0 des stimuli impr\u00e9vus.<\/p>\n                    <span class=\"duration\">Dur\u00e9e : 20 \u00e0 30 min<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"test-column public\">\n                <h3><span class=\"dot\"><\/span>Tests Grand Public<\/h3>\n                <p>Outils d&rsquo;auto-\u00e9valuation accessibles \u00e0 tous pour un premier d\u00e9pistage.<\/p>\n                <div class=\"test-card\">\n                    <h4>\u00c9chelle de Somnolence d&rsquo;Epworth (ESS)<\/h4>\n                    <p>Questionnaire valid\u00e9 \u00e9valuant la propension \u00e0 s&rsquo;endormir dans 8 situations quotidiennes. Score &gt; 10\/24 = somnolence excessive.<\/p>\n                    <span class=\"duration\">Dur\u00e9e : 3 minutes<\/span>\n                <\/div>\n                <div class=\"test-card\">\n                    <h4>\u00c9chelle de Fatigue de Karolinska<\/h4>\n                    <p>Auto-\u00e9valuation subjective de la fatigue sur une \u00e9chelle visuelle de 1 \u00e0 9. Simple et rapide, corr\u00e9l\u00e9e aux mesures objectives.<\/p>\n                    <span class=\"duration\">Dur\u00e9e : 1 minute<\/span>\n                <\/div>\n                <div class=\"test-card\">\n                    <h4>Test de temps de r\u00e9action<\/h4>\n                    <p>Applications mobiles et simulateurs mesurant les temps de r\u00e9action. Un temps &gt; 500ms ou des lapsus attentionnels r\u00e9p\u00e9t\u00e9s sont alarmants.<\/p>\n                    <span class=\"duration\">Dur\u00e9e : 5-10 minutes<\/span>\n                <\/div>\n                <div class=\"test-card\">\n                    <h4>Questionnaire de Berlin<\/h4>\n                    <p>D\u00e9pistage du risque d&rsquo;apn\u00e9e du sommeil bas\u00e9 sur les ronflements, la somnolence diurne, l&rsquo;IMC et l&rsquo;HTA.<\/p>\n                    <span class=\"duration\">Dur\u00e9e : 5 minutes<\/span>\n                <\/div>\n                <div class=\"test-card\">\n                    <h4>Agenda du sommeil<\/h4>\n                    <p>Journal sur 2 semaines notant heures de coucher\/lever, r\u00e9veils nocturnes, siestes, caf\u00e9ine.<\/p>\n                    <span class=\"duration\">Dur\u00e9e : 2 semaines de suivi<\/span>\n                <\/div>\n                <div class=\"test-card new-test\">\n                    <span class=\"test-badge\">\u00c9valuation cognitive<\/span>\n                    <h4>Test COGNIFIT<\/h4>\n                    <p>Batterie informatis\u00e9e \u00e9valuant les fonctions cognitives essentielles \u00e0 la conduite : attention, m\u00e9moire de travail, fonctions ex\u00e9cutives, vitesse de traitement.<\/p>\n                    <span class=\"duration\">Dur\u00e9e : 25 \u00e0 35 min<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<footer>\n    <div class=\"footer-content\">\n        <div class=\"footer-about\">\n            <h3>SomnoVigilance<\/h3>\n            <p>Centre de ressources d\u00e9di\u00e9 \u00e0 la compr\u00e9hension, au d\u00e9pistage et \u00e0 la pr\u00e9vention de la somnolence au volant.<\/p>\n            <p style=\"margin-top:1rem;font-size:0.8rem;opacity:0.85;\">\u26a0\ufe0f Ce site est \u00e0 vis\u00e9e informative et ne remplace pas une consultation m\u00e9dicale.<\/p>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Navigation<\/h4>\n            <ul>\n                <li><a href=\"index.html\">Les causes<\/a><\/li>\n                <li><a href=\"consequences.html\">Les cons\u00e9quences<\/a><\/li>\n                <li><a href=\"depistage.html\">Le d\u00e9pistage<\/a><\/li>\n                <li><a href=\"traitements.html\">Les traitements<\/a><\/li>\n                <li><a href=\"drogues.html\">Drogues &#038; Conduite<\/a><\/li>\n                <li><a href=\"prevention.html\">La pr\u00e9vention<\/a><\/li>\n                <li><a href=\"etudes.html\">\u00c9tudes<\/a><\/li>\n                <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n            <\/ul>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Ressources utiles<\/h4>\n            <ul>\n                <li><a href=\"#\">S\u00e9curit\u00e9 Routi\u00e8re<\/a><\/li>\n                <li><a href=\"#\">INSERM<\/a><\/li>\n                <li><a href=\"#\">SFRMS<\/a><\/li>\n                <li><a href=\"#\">MILDECA<\/a><\/li>\n                <li><a href=\"#\">OFDT<\/a><\/li>\n                <li><a href=\"#\">Drogues Info Service<\/a><\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n    <div class=\"footer-bottom\">\n        <p>\u00a9 2026 SomnoVigilance \u2014 Derni\u00e8re mise \u00e0 jour : Octobre 2026<\/p>\n    <\/div>\n<\/footer>\n\n<script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Les traitements de la somnolence \u2014 SomnoVigilance<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/inter@5.0.8\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/playfair-display@5.0.12\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n<div class=\"scroll-progress\" id=\"scrollProgress\"><\/div>\n\n<nav>\n    <div class=\"nav-inner\">\n        <a href=\"index.html\" class=\"logo\">\n            <svg viewBox=\"0 0 32 32\" fill=\"none\">\n                <circle cx=\"16\" cy=\"16\" r=\"14\" stroke=\"#5C6BC0\" stroke-width=\"2.5\"\/>\n                <path d=\"M10 20c0-3.3 2.7-6 6-6s6 2.7 6 6\" stroke=\"#5C6BC0\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                <circle cx=\"12\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <circle cx=\"20\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <path d=\"M8 11c1-2 3-3 4-3M24 11c-1-2-3-3-4-3\" stroke=\"#ff6f00\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n            <\/svg>\n            SomnoVigilance\n        <\/a>\n        <ul id=\"navMenu\">\n            <li><a href=\"index.html\">Causes<\/a><\/li>\n            <li><a href=\"consequences.html\">Cons\u00e9quences<\/a><\/li>\n            <li><a href=\"depistage.html\">D\u00e9pistage<\/a><\/li>\n            <li><a href=\"traitements.html\" class=\"active\">Traitements<\/a><\/li>\n            <li><a href=\"drogues.html\">Drogues<\/a><\/li>\n            <li><a href=\"prevention.html\">Pr\u00e9vention<\/a><\/li>\n            <li><a href=\"etudes.html\">\u00c9tudes<\/a><\/li>\n            <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n        <\/ul>\n        <button class=\"mobile-toggle\" onclick=\"document.getElementById('navMenu').classList.toggle('open')\">\n            <span><\/span><span><\/span><span><\/span>\n        <\/button>\n    <\/div>\n<\/nav>\n\n<section class=\"hero hero-traitements\">\n    <div class=\"hero-content\">\n        <div class=\"hero-text\">\n            <div class=\"badge\">\ud83d\udc8a Solutions th\u00e9rapeutiques<\/div>\n            <h1>Les <span>Traitements<\/span><\/h1>\n            <p>Plusieurs approches th\u00e9rapeutiques permettent de traiter les causes sous-jacentes de la somnolence et de r\u00e9duire le risque d&rsquo;accidents.<\/p>\n            <div style=\"display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;\">\n                <a href=\"prevention.html\" class=\"btn-primary\">Pr\u00e9vention \u2192<\/a>\n                <a href=\"depistage.html\" class=\"btn-outline\">Le d\u00e9pistage<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section id=\"traitements\">\n    <div class=\"container\">\n        <div class=\"section-header fade-in\">\n            <span class=\"tag\">Solutions<\/span>\n            <h2>Approches th\u00e9rapeutiques<\/h2>\n            <p>Du traitement m\u00e9dical \u00e0 l&rsquo;hygi\u00e8ne de vie, plusieurs leviers permettent de retrouver une vigilance normale.<\/p>\n        <\/div>\n\n        <!-- NOUVELLE ILLUSTRATION : Vue d'ensemble des traitements -->\n        <div class=\"full-illustration fade-in\">\n            <svg viewBox=\"0 0 1000 280\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <defs>\n                    <linearGradient id=\"treatBg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n                        <stop offset=\"0%\" stop-color=\"#E8F5E9\"\/>\n                        <stop offset=\"50%\" stop-color=\"#C8E6C9\"\/>\n                        <stop offset=\"100%\" stop-color=\"#A5D6A7\"\/>\n                    <\/linearGradient>\n                <\/defs>\n                <rect width=\"1000\" height=\"280\" fill=\"url(#treatBg)\"\/>\n                \n                <!-- Treatment 1 : PPC -->\n                <g transform=\"translate(50, 40)\">\n                    <rect width=\"250\" height=\"200\" rx=\"15\" fill=\"white\" opacity=\"0.95\"\/>\n                    <!-- CPAP machine illustration -->\n                    <rect x=\"30\" y=\"40\" width=\"80\" height=\"60\" rx=\"8\" fill=\"#5C6BC0\"\/>\n                    <rect x=\"35\" y=\"45\" width=\"70\" height=\"30\" rx=\"5\" fill=\"#7986CB\"\/>\n                    <circle cx=\"70\" cy=\"85\" r=\"8\" fill=\"#E8EAF6\"\/>\n                    <!-- Tube -->\n                    <path d=\"M 110 70 Q 140 70 150 50 Q 160 30 180 30\" stroke=\"#5C6BC0\" stroke-width=\"4\" fill=\"none\"\/>\n                    <!-- Mask -->\n                    <ellipse cx=\"195\" cy=\"30\" rx=\"25\" ry=\"15\" fill=\"#9FA8DA\"\/>\n                    <ellipse cx=\"195\" cy=\"30\" rx=\"15\" ry=\"8\" fill=\"#E8EAF6\"\/>\n                    <!-- Check mark -->\n                    <circle cx=\"210\" cy=\"150\" r=\"20\" fill=\"#66BB6A\"\/>\n                    <path d=\"M 200 150 L 207 157 L 220 143\" stroke=\"white\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\"\/>\n                    <text x=\"125\" y=\"180\" text-anchor=\"middle\" font-size=\"12\" fill=\"#2e7d32\" font-weight=\"bold\">PPC (CPAP)<\/text>\n                    <text x=\"125\" y=\"195\" text-anchor=\"middle\" font-size=\"9\" fill=\"#5a5a7a\">Efficacit\u00e9 &gt; 90%<\/text>\n                <\/g>\n\n                <!-- Treatment 2 : Hygi\u00e8ne du sommeil -->\n                <g transform=\"translate(375, 40)\">\n                    <rect width=\"250\" height=\"200\" rx=\"15\" fill=\"white\" opacity=\"0.95\"\/>\n                    <!-- Bed illustration -->\n                    <rect x=\"40\" y=\"80\" width=\"170\" height=\"50\" rx=\"8\" fill=\"#66BB6A\" opacity=\"0.3\"\/>\n                    <rect x=\"40\" y=\"70\" width=\"170\" height=\"15\" rx=\"5\" fill=\"#66BB6A\" opacity=\"0.5\"\/>\n                    <!-- Pillow -->\n                    <ellipse cx=\"70\" cy=\"75\" rx=\"20\" ry=\"8\" fill=\"white\"\/>\n                    <!-- Moon -->\n                    <circle cx=\"180\" cy=\"40\" r=\"15\" fill=\"#FFB74D\" opacity=\"0.6\"\/>\n                    <circle cx=\"185\" cy=\"37\" r=\"13\" fill=\"#E8F5E9\"\/>\n                    <!-- Clock -->\n                    <circle cx=\"60\" cy=\"40\" r=\"15\" fill=\"white\" stroke=\"#66BB6A\" stroke-width=\"2\"\/>\n                    <text x=\"60\" y=\"45\" text-anchor=\"middle\" font-size=\"8\" fill=\"#66BB6A\" font-weight=\"bold\">22h<\/text>\n                    <!-- Check mark -->\n                    <circle cx=\"210\" cy=\"150\" r=\"20\" fill=\"#66BB6A\"\/>\n                    <path d=\"M 200 150 L 207 157 L 220 143\" stroke=\"white\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\"\/>\n                    <text x=\"125\" y=\"180\" text-anchor=\"middle\" font-size=\"12\" fill=\"#2e7d32\" font-weight=\"bold\">Hygi\u00e8ne du sommeil<\/text>\n                    <text x=\"125\" y=\"195\" text-anchor=\"middle\" font-size=\"9\" fill=\"#5a5a7a\">TCC-I en 1\u00e8re intention<\/text>\n                <\/g>\n\n                <!-- Treatment 3 : Pharmacologie -->\n                <g transform=\"translate(700, 40)\">\n                    <rect width=\"250\" height=\"200\" rx=\"15\" fill=\"white\" opacity=\"0.95\"\/>\n                    <!-- Pills illustration -->\n                    <ellipse cx=\"80\" cy=\"70\" rx=\"25\" ry=\"12\" fill=\"#FFA726\"\/>\n                    <ellipse cx=\"80\" cy=\"70\" rx=\"25\" ry=\"12\" fill=\"white\" opacity=\"0.3\"\/>\n                    <ellipse cx=\"130\" cy=\"85\" rx=\"20\" ry=\"10\" fill=\"#EC407A\"\/>\n                    <ellipse cx=\"170\" cy=\"65\" rx=\"18\" ry=\"9\" fill=\"#AB47BC\"\/>\n                    <!-- Coffee cup -->\n                    <rect x=\"60\" y=\"110\" width=\"40\" height=\"40\" rx=\"5\" fill=\"#8D6E63\"\/>\n                    <path d=\"M 100 120 Q 115 125 115 135 Q 115 145 100 150\" stroke=\"#8D6E63\" stroke-width=\"2\" fill=\"none\"\/>\n                    <path d=\"M 70 105 Q 75 95 80 105\" stroke=\"#B0BEC5\" stroke-width=\"1.5\" fill=\"none\"\/>\n                    <path d=\"M 80 105 Q 85 95 90 105\" stroke=\"#B0BEC5\" stroke-width=\"1.5\" fill=\"none\"\/>\n                    <!-- Check mark -->\n                    <circle cx=\"210\" cy=\"150\" r=\"20\" fill=\"#66BB6A\"\/>\n                    <path d=\"M 200 150 L 207 157 L 220 143\" stroke=\"white\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\"\/>\n                    <text x=\"125\" y=\"180\" text-anchor=\"middle\" font-size=\"12\" fill=\"#2e7d32\" font-weight=\"bold\">Pharmacologie<\/text>\n                    <text x=\"125\" y=\"195\" text-anchor=\"middle\" font-size=\"9\" fill=\"#5a5a7a\">Modafinil, M\u00e9latonine<\/text>\n                <\/g>\n            <\/svg>\n        <\/div>\n\n        <div class=\"treatments-grid fade-in\">\n            <div class=\"treatment-card\">\n                <div class=\"card-img\">\n                    <svg viewBox=\"0 0 400 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <rect width=\"400\" height=\"220\" fill=\"#E8EAF6\"\/>\n                        <!-- Bedroom scene -->\n                        <rect x=\"0\" y=\"120\" width=\"400\" height=\"100\" fill=\"#C5CAE9\" opacity=\"0.5\"\/>\n                        <!-- Bed -->\n                        <rect x=\"50\" y=\"130\" width=\"200\" height=\"60\" rx=\"8\" fill=\"#7986CB\"\/>\n                        <rect x=\"50\" y=\"120\" width=\"200\" height=\"15\" rx=\"5\" fill=\"#9FA8DA\"\/>\n                        <!-- Pillow -->\n                        <ellipse cx=\"80\" cy=\"125\" rx=\"25\" ry=\"10\" fill=\"white\"\/>\n                        <!-- Patient with mask -->\n                        <circle cx=\"100\" cy=\"130\" r=\"18\" fill=\"#FFCC80\"\/>\n                        <!-- CPAP mask on face -->\n                        <ellipse cx=\"100\" cy=\"135\" rx=\"15\" ry=\"8\" fill=\"#5C6BC0\" opacity=\"0.8\"\/>\n                        <rect x=\"90\" y=\"130\" width=\"20\" height=\"10\" rx=\"3\" fill=\"#3949ab\"\/>\n                        <!-- Tube -->\n                        <path d=\"M 115 135 Q 150 135 170 110 Q 190 85 220 85\" stroke=\"#5C6BC0\" stroke-width=\"5\" fill=\"none\" stroke-linecap=\"round\"\/>\n                        <!-- CPAP Machine -->\n                        <rect x=\"220\" y=\"70\" width=\"100\" height=\"70\" rx=\"10\" fill=\"#5C6BC0\"\/>\n                        <rect x=\"230\" y=\"80\" width=\"80\" height=\"30\" rx=\"5\" fill=\"#7986CB\"\/>\n                        <circle cx=\"270\" cy=\"125\" r=\"10\" fill=\"#E8EAF6\"\/>\n                        <text x=\"270\" y=\"130\" text-anchor=\"middle\" font-size=\"10\" fill=\"#5C6BC0\" font-weight=\"bold\">PPC<\/text>\n                        <!-- Air flow indicators -->\n                        <circle cx=\"180\" cy=\"100\" r=\"3\" fill=\"#66BB6A\" opacity=\"0.8\"\/>\n                        <circle cx=\"195\" cy=\"95\" r=\"3\" fill=\"#66BB6A\" opacity=\"0.6\"\/>\n                        <circle cx=\"210\" cy=\"90\" r=\"3\" fill=\"#66BB6A\" opacity=\"0.4\"\/>\n                        <!-- Moon -->\n                        <circle cx=\"350\" cy=\"40\" r=\"20\" fill=\"#FFE082\" opacity=\"0.7\"\/>\n                        <circle cx=\"358\" cy=\"35\" r=\"18\" fill=\"#E8EAF6\"\/>\n                        <!-- Zzz (sleeping peacefully) -->\n                        <text x=\"130\" y=\"100\" fill=\"#66BB6A\" font-size=\"14\" font-weight=\"bold\">z<\/text>\n                        <text x=\"145\" y=\"88\" fill=\"#66BB6A\" font-size=\"11\" font-weight=\"bold\" opacity=\"0.7\">z<\/text>\n                        <text x=\"155\" y=\"78\" fill=\"#66BB6A\" font-size=\"8\" font-weight=\"bold\" opacity=\"0.5\">z<\/text>\n                        <!-- Success rate -->\n                        <rect x=\"20\" y=\"20\" width=\"100\" height=\"40\" rx=\"8\" fill=\"white\" opacity=\"0.9\"\/>\n                        <text x=\"70\" y=\"38\" text-anchor=\"middle\" font-size=\"16\" font-weight=\"bold\" fill=\"#66BB6A\">&gt;90%<\/text>\n                        <text x=\"70\" y=\"52\" text-anchor=\"middle\" font-size=\"8\" fill=\"#455A64\">d&rsquo;efficacit\u00e9<\/text>\n                    <\/svg>\n                <\/div>\n                <div class=\"card-body\">\n                    <h3>Traitement de l&rsquo;apn\u00e9e du sommeil<\/h3>\n                    <p>La PPC (Pression Positive Continue) est le traitement de r\u00e9f\u00e9rence du SAOS.<\/p>\n                    <ul>\n                        <li>PPC nocturne (efficacit\u00e9 &gt; 90%)<\/li>\n                        <li>Orth\u00e8ses d&rsquo;avanc\u00e9e mandibulaire<\/li>\n                        <li>Chirurgie ORL (cas s\u00e9lectionn\u00e9s)<\/li>\n                        <li>Perte de poids si surpoids<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n            <div class=\"treatment-card\">\n                <div class=\"card-img\">\n                    <svg viewBox=\"0 0 400 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <rect width=\"400\" height=\"220\" fill=\"#E8F5E9\"\/>\n                        <!-- Bedroom with good sleep hygiene -->\n                        <!-- Window with curtains -->\n                        <rect x=\"30\" y=\"30\" width=\"80\" height=\"100\" rx=\"5\" fill=\"#1a237e\" opacity=\"0.3\"\/>\n                        <rect x=\"35\" y=\"35\" width=\"70\" height=\"90\" fill=\"#263238\" opacity=\"0.5\"\/>\n                        <circle cx=\"70\" cy=\"70\" r=\"12\" fill=\"#FFE082\" opacity=\"0.8\"\/>\n                        <!-- Curtains -->\n                        <path d=\"M 30 30 L 30 130 L 45 130 L 45 30 Z\" fill=\"#66BB6A\" opacity=\"0.7\"\/>\n                        <path d=\"M 95 30 L 95 130 L 110 130 L 110 30 Z\" fill=\"#66BB6A\" opacity=\"0.7\"\/>\n                        <!-- Bed -->\n                        <rect x=\"130\" y=\"120\" width=\"220\" height=\"70\" rx=\"8\" fill=\"#81C784\" opacity=\"0.5\"\/>\n                        <rect x=\"130\" y=\"110\" width=\"220\" height=\"15\" rx=\"5\" fill=\"#66BB6A\" opacity=\"0.7\"\/>\n                        <!-- Pillow -->\n                        <ellipse cx=\"160\" cy=\"115\" rx=\"25\" ry=\"10\" fill=\"white\"\/>\n                        <!-- Person sleeping peacefully -->\n                        <circle cx=\"170\" cy=\"125\" r=\"18\" fill=\"#FFCC80\"\/>\n                        <path d=\"M155 145 Q 170 155 185 145 L 185 170 L 155 170 Z\" fill=\"#66BB6A\"\/>\n                        <!-- Smiling closed eyes -->\n                        <path d=\"M163 122 Q 166 120 169 122\" stroke=\"#455A64\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"\/>\n                        <path d=\"M174 122 Q 177 120 180 122\" stroke=\"#455A64\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"\/>\n                        <!-- Clock showing 22h -->\n                        <circle cx=\"330\" cy=\"50\" r=\"25\" fill=\"white\" stroke=\"#66BB6A\" stroke-width=\"2\"\/>\n                        <text x=\"330\" y=\"55\" text-anchor=\"middle\" font-size=\"12\" fill=\"#66BB6A\" font-weight=\"bold\">22h<\/text>\n                        <!-- Temperature icon -->\n                        <rect x=\"30\" y=\"150\" width=\"10\" height=\"40\" rx=\"5\" fill=\"#EC407A\"\/>\n                        <circle cx=\"35\" cy=\"195\" r=\"10\" fill=\"#EC407A\"\/>\n                        <text x=\"50\" y=\"175\" font-size=\"9\" fill=\"#455A64\">18-20\u00b0C<\/text>\n                        <!-- No screens symbol -->\n                        <g transform=\"translate(280, 140)\">\n                            <rect width=\"50\" height=\"35\" rx=\"3\" fill=\"#455A64\" opacity=\"0.3\"\/>\n                            <path d=\"M 0 0 L 50 35 M 50 0 L 0 35\" stroke=\"#EC407A\" stroke-width=\"2\"\/>\n                            <text x=\"25\" y=\"55\" text-anchor=\"middle\" font-size=\"8\" fill=\"#EC407A\" font-weight=\"bold\">1h avant<\/text>\n                        <\/g>\n                    <\/svg>\n                <\/div>\n                <div class=\"card-body\">\n                    <h3>Hygi\u00e8ne du sommeil<\/h3>\n                    <p>La th\u00e9rapie cognitivo-comportementale pour l&rsquo;insomnie (TCC-I) est le traitement de premi\u00e8re intention.<\/p>\n                    <ul>\n                        <li>Horaires r\u00e9guliers de coucher\/lever<\/li>\n                        <li>Environnement frais, sombre, silencieux<\/li>\n                        <li>Restriction de temps au lit<\/li>\n                        <li>\u00c9viter \u00e9crans 1h avant le coucher<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n            <div class=\"treatment-card\">\n                <div class=\"card-img\">\n                    <svg viewBox=\"0 0 400 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <rect width=\"400\" height=\"220\" fill=\"#FFF3E0\"\/>\n                        <!-- Pills -->\n                        <ellipse cx=\"100\" cy=\"80\" rx=\"35\" ry=\"18\" fill=\"#FFA726\"\/>\n                        <ellipse cx=\"100\" cy=\"80\" rx=\"35\" ry=\"18\" fill=\"white\" opacity=\"0.3\"\/>\n                        <text x=\"100\" y=\"85\" text-anchor=\"middle\" font-size=\"10\" fill=\"white\" font-weight=\"bold\">MODAFINIL<\/text>\n                        \n                        <ellipse cx=\"200\" cy=\"100\" rx=\"30\" ry=\"15\" fill=\"#EC407A\"\/>\n                        <text x=\"200\" y=\"105\" text-anchor=\"middle\" font-size=\"9\" fill=\"white\" font-weight=\"bold\">M\u00c9LATONINE<\/text>\n                        \n                        <ellipse cx=\"290\" cy=\"75\" rx=\"28\" ry=\"14\" fill=\"#AB47BC\"\/>\n                        <text x=\"290\" y=\"80\" text-anchor=\"middle\" font-size=\"8\" fill=\"white\" font-weight=\"bold\">MPH<\/text>\n                        \n                        <!-- Coffee cup -->\n                        <g transform=\"translate(150, 130)\">\n                            <rect x=\"0\" y=\"0\" width=\"50\" height=\"60\" rx=\"5\" fill=\"#8D6E63\"\/>\n                            <path d=\"M 50 10 Q 65 15 65 30 Q 65 45 50 50\" stroke=\"#8D6E63\" stroke-width=\"3\" fill=\"none\"\/>\n                            <ellipse cx=\"25\" cy=\"5\" rx=\"25\" ry=\"8\" fill=\"#5D4037\"\/>\n                            <!-- Steam -->\n                            <path d=\"M 15 -5 Q 20 -15 25 -5\" stroke=\"#B0BEC5\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.7\"\/>\n                            <path d=\"M 25 -5 Q 30 -15 35 -5\" stroke=\"#B0BEC5\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.7\"\/>\n                        <\/g>\n                        \n                        <!-- Warning -->\n                        <g transform=\"translate(280, 130)\">\n                            <polygon points=\"30,0 60,50 0,50\" fill=\"#FFB74D\" stroke=\"#E65100\" stroke-width=\"2\"\/>\n                            <text x=\"30\" y=\"40\" text-anchor=\"middle\" font-size=\"20\" font-weight=\"bold\" fill=\"#E65100\">!<\/text>\n                            <text x=\"30\" y=\"70\" text-anchor=\"middle\" font-size=\"8\" fill=\"#455A64\" font-weight=\"bold\">Sur ordonnance<\/text>\n                        <\/g>\n                        \n                        <!-- Prescription icon -->\n                        <g transform=\"translate(30, 140)\">\n                            <rect width=\"80\" height=\"60\" rx=\"5\" fill=\"white\" stroke=\"#5C6BC0\" stroke-width=\"1.5\"\/>\n                            <text x=\"40\" y=\"20\" text-anchor=\"middle\" font-size=\"14\" fill=\"#5C6BC0\" font-weight=\"bold\">\u211e<\/text>\n                            <line x1=\"10\" y1=\"30\" x2=\"70\" y2=\"30\" stroke=\"#B0BEC5\" stroke-width=\"1\"\/>\n                            <line x1=\"10\" y1=\"40\" x2=\"60\" y2=\"40\" stroke=\"#B0BEC5\" stroke-width=\"1\"\/>\n                            <line x1=\"10\" y1=\"50\" x2=\"65\" y2=\"50\" stroke=\"#B0BEC5\" stroke-width=\"1\"\/>\n                        <\/g>\n                    <\/svg>\n                <\/div>\n                <div class=\"card-body\">\n                    <h3>Traitements pharmacologiques<\/h3>\n                    <p>Des m\u00e9dicaments peuvent \u00eatre prescrits pour traiter la somnolence r\u00e9siduelle ou les narcolepsies.<\/p>\n                    <ul>\n                        <li>Modafinil (narcolepsie, somnolence r\u00e9siduelle)<\/li>\n                        <li>Methylph\u00e9nidate (hypersomnies)<\/li>\n                        <li>M\u00e9latonine (troubles du rythme)<\/li>\n                        <li>Revue des m\u00e9dicaments s\u00e9datifs<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<footer>\n    <div class=\"footer-content\">\n        <div class=\"footer-about\">\n            <h3>SomnoVigilance<\/h3>\n            <p>Centre de ressources d\u00e9di\u00e9 \u00e0 la compr\u00e9hension, au d\u00e9pistage et \u00e0 la pr\u00e9vention de la somnolence au volant.<\/p>\n            <p style=\"margin-top:1rem;font-size:0.8rem;opacity:0.85;\">\u26a0\ufe0f Ce site est \u00e0 vis\u00e9e informative et ne remplace pas une consultation m\u00e9dicale.<\/p>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Navigation<\/h4>\n            <ul>\n                <li><a href=\"index.html\">Les causes<\/a><\/li>\n                <li><a href=\"consequences.html\">Les cons\u00e9quences<\/a><\/li>\n                <li><a href=\"depistage.html\">Le d\u00e9pistage<\/a><\/li>\n                <li><a href=\"traitements.html\">Les traitements<\/a><\/li>\n                <li><a href=\"drogues.html\">Drogues &#038; Conduite<\/a><\/li>\n                <li><a href=\"prevention.html\">La pr\u00e9vention<\/a><\/li>\n                <li><a href=\"etudes.html\">\u00c9tudes<\/a><\/li>\n                <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n            <\/ul>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Ressources utiles<\/h4>\n            <ul>\n                <li><a href=\"#\">S\u00e9curit\u00e9 Routi\u00e8re<\/a><\/li>\n                <li><a href=\"#\">INSERM<\/a><\/li>\n                <li><a href=\"#\">SFRMS<\/a><\/li>\n                <li><a href=\"#\">MILDECA<\/a><\/li>\n                <li><a href=\"#\">OFDT<\/a><\/li>\n                <li><a href=\"#\">Drogues Info Service<\/a><\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n    <div class=\"footer-bottom\">\n        <p>\u00a9 2026 SomnoVigilance \u2014 Derni\u00e8re mise \u00e0 jour : Octobre 2026<\/p>\n    <\/div>\n<\/footer>\n\n<script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Drogues, alcool et conduite \u2014 SomnoVigilance<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/inter@5.0.8\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/playfair-display@5.0.12\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n<div class=\"scroll-progress\" id=\"scrollProgress\"><\/div>\n\n<nav>\n    <div class=\"nav-inner\">\n        <a href=\"index.html\" class=\"logo\">\n            <svg viewBox=\"0 0 32 32\" fill=\"none\">\n                <circle cx=\"16\" cy=\"16\" r=\"14\" stroke=\"#5C6BC0\" stroke-width=\"2.5\"\/>\n                <path d=\"M10 20c0-3.3 2.7-6 6-6s6 2.7 6 6\" stroke=\"#5C6BC0\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                <circle cx=\"12\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <circle cx=\"20\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <path d=\"M8 11c1-2 3-3 4-3M24 11c-1-2-3-3-4-3\" stroke=\"#ff6f00\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n            <\/svg>\n            SomnoVigilance\n        <\/a>\n        <ul id=\"navMenu\">\n            <li><a href=\"index.html\">Causes<\/a><\/li>\n            <li><a href=\"consequences.html\">Cons\u00e9quences<\/a><\/li>\n            <li><a href=\"depistage.html\">D\u00e9pistage<\/a><\/li>\n            <li><a href=\"traitements.html\">Traitements<\/a><\/li>\n            <li><a href=\"drogues.html\" class=\"active\">Drogues<\/a><\/li>\n            <li><a href=\"prevention.html\">Pr\u00e9vention<\/a><\/li>\n            <li><a href=\"etudes.html\">\u00c9tudes<\/a><\/li>\n            <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n        <\/ul>\n        <button class=\"mobile-toggle\" onclick=\"document.getElementById('navMenu').classList.toggle('open')\">\n            <span><\/span><span><\/span><span><\/span>\n        <\/button>\n    <\/div>\n<\/nav>\n\n<section class=\"hero hero-drogues\">\n    <div class=\"hero-content\">\n        <div class=\"hero-text\">\n            <div class=\"badge\">\u26a0\ufe0f Alerte Sant\u00e9 Publique<\/div>\n            <h1>Drogues, Alcool &#038; <span>Conduite<\/span><\/h1>\n            <p>Produits illicites, protoxyde d&rsquo;azote, alcool et m\u00e9dicaments d\u00e9tourn\u00e9s : tous alt\u00e8rent les capacit\u00e9s de conduite.<\/p>\n            <div style=\"display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;\">\n                <a href=\"prevention.html\" class=\"btn-primary\">Pr\u00e9vention \u2192<\/a>\n                <a href=\"bibliographie.html\" class=\"btn-outline\">Bibliographie<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section id=\"drogues\">\n    <div class=\"container\">\n        <div class=\"section-header fade-in\">\n            <span class=\"tag\">\u26a0 Alerte Sant\u00e9 Publique<\/span>\n            <h2>Substances psychoactives &#038; conduite<\/h2>\n            <p>Toutes les substances psychoactives alt\u00e8rent les capacit\u00e9s de conduite, souvent de mani\u00e8re insidieuse et sous-estim\u00e9e par les usagers.<\/p>\n        <\/div>\n\n        <!-- NOUVELLE ILLUSTRATION : Comparaison des risques -->\n        <div class=\"full-illustration fade-in\">\n            <svg viewBox=\"0 0 1000 320\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <defs>\n                    <linearGradient id=\"drugsBg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n                        <stop offset=\"0%\" stop-color=\"#F3E5F5\"\/>\n                        <stop offset=\"50%\" stop-color=\"#E1BEE7\"\/>\n                        <stop offset=\"100%\" stop-color=\"#CE93D8\"\/>\n                    <\/linearGradient>\n                <\/defs>\n                <rect width=\"1000\" height=\"320\" fill=\"url(#drugsBg)\"\/>\n                \n                <text x=\"500\" y=\"30\" text-anchor=\"middle\" font-size=\"16\" fill=\"#7B1FA2\" font-weight=\"bold\">\ud83d\udcca RISQUE D&rsquo;ACCIDENT PAR SUBSTANCE<\/text>\n                \n                <!-- Bar chart -->\n                <!-- Cannabis -->\n                <g transform=\"translate(50, 60)\">\n                    <text x=\"0\" y=\"15\" font-size=\"12\" fill=\"#455A64\" font-weight=\"bold\">\ud83c\udf3f Cannabis<\/text>\n                    <rect x=\"0\" y=\"25\" width=\"180\" height=\"30\" rx=\"5\" fill=\"#66BB6A\"\/>\n                    <text x=\"190\" y=\"47\" font-size=\"14\" fill=\"#455A64\" font-weight=\"bold\">\u00d72-3<\/text>\n                <\/g>\n                \n                <!-- Alcool -->\n                <g transform=\"translate(50, 115)\">\n                    <text x=\"0\" y=\"15\" font-size=\"12\" fill=\"#455A64\" font-weight=\"bold\">\ud83c\udf7a Alcool (&gt;0.8 g\/L)<\/text>\n                    <rect x=\"0\" y=\"25\" width=\"350\" height=\"30\" rx=\"5\" fill=\"#FFA726\"\/>\n                    <text x=\"360\" y=\"47\" font-size=\"14\" fill=\"#455A64\" font-weight=\"bold\">\u00d735<\/text>\n                <\/g>\n                \n                <!-- Coca\u00efne -->\n                <g transform=\"translate(50, 170)\">\n                    <text x=\"0\" y=\"15\" font-size=\"12\" fill=\"#455A64\" font-weight=\"bold\">\u26a1 Coca\u00efne<\/text>\n                    <rect x=\"0\" y=\"25\" width=\"250\" height=\"30\" rx=\"5\" fill=\"#B0BEC5\"\/>\n                    <text x=\"260\" y=\"47\" font-size=\"14\" fill=\"#455A64\" font-weight=\"bold\">\u00d73-6<\/text>\n                <\/g>\n                \n                <!-- Protoxyde -->\n                <g transform=\"translate(50, 225)\">\n                    <text x=\"0\" y=\"15\" font-size=\"12\" fill=\"#455A64\" font-weight=\"bold\">\ud83d\udca8 Protoxyde N\u2082O<\/text>\n                    <rect x=\"0\" y=\"25\" width=\"400\" height=\"30\" rx=\"5\" fill=\"#AB47BC\"\/>\n                    <text x=\"410\" y=\"47\" font-size=\"14\" fill=\"#C2185B\" font-weight=\"bold\">MAXIMAL<\/text>\n                <\/g>\n                \n                <!-- Association -->\n                <g transform=\"translate(550, 60)\">\n                    <rect width=\"400\" height=\"220\" rx=\"15\" fill=\"white\" opacity=\"0.9\"\/>\n                    <text x=\"200\" y=\"30\" text-anchor=\"middle\" font-size=\"13\" fill=\"#C2185B\" font-weight=\"bold\">\u26a0\ufe0f ASSOCIATIONS MORTELLES<\/text>\n                    \n                    <g transform=\"translate(20, 50)\">\n                        <text x=\"0\" y=\"15\" font-size=\"10\" fill=\"#455A64\">Alcool + Cannabis<\/text>\n                        <rect x=\"0\" y=\"25\" width=\"300\" height=\"20\" rx=\"3\" fill=\"#EC407A\"\/>\n                        <text x=\"310\" y=\"40\" font-size=\"12\" fill=\"#C2185B\" font-weight=\"bold\">\u00d720<\/text>\n                    <\/g>\n                    \n                    <g transform=\"translate(20, 100)\">\n                        <text x=\"0\" y=\"15\" font-size=\"10\" fill=\"#455A64\">Alcool + Coca\u00efne<\/text>\n                        <rect x=\"0\" y=\"25\" width=\"350\" height=\"20\" rx=\"3\" fill=\"#C2185B\"\/>\n                        <text x=\"360\" y=\"40\" font-size=\"12\" fill=\"#C2185B\" font-weight=\"bold\">\u00d750<\/text>\n                    <\/g>\n                    \n                    <g transform=\"translate(20, 150)\">\n                        <text x=\"0\" y=\"15\" font-size=\"10\" fill=\"#455A64\">Alcool + Opiac\u00e9s<\/text>\n                        <rect x=\"0\" y=\"25\" width=\"360\" height=\"20\" rx=\"3\" fill=\"#7B1FA2\"\/>\n                        <text x=\"370\" y=\"40\" font-size=\"12\" fill=\"#7B1FA2\" font-weight=\"bold\">L\u00c9THAL<\/text>\n                    <\/g>\n                <\/g>\n            <\/svg>\n        <\/div>\n\n        <div class=\"drogue-alert fade-in\">\n            <div class=\"alert-icon\">\u26a0<\/div>\n            <div>\n                <h4>Les stup\u00e9fiants sont impliqu\u00e9s dans 23% des accidents mortels<\/h4>\n                <p>En France, les produits psychoactifs (alcool, cannabis, coca\u00efne, protoxyde d&rsquo;azote\u2026) sont la premi\u00e8re cause d&rsquo;accidents mortels sur les routes.<\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"drogues-layout fade-in\">\n            <div class=\"drogue-hero-card\">\n                <div class=\"hero-text-block\">\n                    <div class=\"subtitle\">\ud83d\udea8 Epid\u00e9mie chez les jeunes<\/div>\n                    <h3>Le Protoxyde d&rsquo;Azote (N\u2082O)<\/h3>\n                    <p>Aussi appel\u00e9 \u00ab proto \u00bb, \u00ab gaz hilarant \u00bb ou \u00ab cr\u00e8me chantilly \u00bb, le protoxyde d&rsquo;azote est devenu <strong style=\"color:#7B1FA2;\">la 1\u00e8re drogue exp\u00e9riment\u00e9e chez les adolescents de 17 ans<\/strong> en France (OFDT, 2022).<\/p>\n                    <p>Inhal\u00e9 depuis des cartouches de siphon \u00e0 chantilly ou des ballons, il provoque une ivresse br\u00e8ve mais intense avec <strong style=\"color:#C2185B;\">hypoxie c\u00e9r\u00e9brale aigu\u00eb<\/strong>.<\/p>\n                    <p><strong>Ses effets sur la conduite sont catastrophiques :<\/strong> hypoxie c\u00e9r\u00e9brale, troubles visuels, perte de coordination, ralentissement majeur des r\u00e9flexes, confusion mentale, et dans les cas graves : paralysies, coma, d\u00e9c\u00e8s par anoxie.<\/p>\n                    <div class=\"stats-row\">\n                        <div class=\"stat-item\">\n                            <div class=\"val\">27%<\/div>\n                            <div class=\"lbl\">des 17 ans l&rsquo;ont essay\u00e9<\/div>\n                        <\/div>\n                        <div class=\"stat-item\">\n                            <div class=\"val\">\u00d78<\/div>\n                            <div class=\"lbl\">usage multipli\u00e9 depuis 2010<\/div>\n                        <\/div>\n                        <div class=\"stat-item\">\n                            <div class=\"val\">13 min<\/div>\n                            <div class=\"lbl\">dur\u00e9e moyenne des effets<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <svg viewBox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <circle cx=\"200\" cy=\"200\" r=\"180\" fill=\"#CE93D8\" opacity=\"0.3\"\/>\n                    <circle cx=\"200\" cy=\"200\" r=\"140\" fill=\"#F48FB1\" opacity=\"0.2\"\/>\n                    <ellipse cx=\"200\" cy=\"140\" rx=\"70\" ry=\"80\" fill=\"rgba(255,255,255,0.5)\" stroke=\"#AB47BC\" stroke-width=\"2\"\/>\n                    <ellipse cx=\"200\" cy=\"140\" rx=\"70\" ry=\"80\" fill=\"url(#balloonGrad)\" opacity=\"0.4\"\/>\n                    <path d=\"M190 218 L200 235 L210 218\" fill=\"rgba(255,255,255,0.5)\" stroke=\"#AB47BC\" stroke-width=\"1.5\"\/>\n                    <path d=\"M200 235 Q 200 280 180 320\" stroke=\"rgba(92,107,192,0.5)\" stroke-width=\"1.5\" fill=\"none\"\/>\n                    <text x=\"200\" y=\"135\" fill=\"#7B1FA2\" font-size=\"28\" font-weight=\"bold\" text-anchor=\"middle\">N\u2082O<\/text>\n                    <text x=\"200\" y=\"160\" fill=\"#455A64\" font-size=\"11\" text-anchor=\"middle\">Protoxyde d&rsquo;azote<\/text>\n                    <rect x=\"290\" y=\"240\" width=\"18\" height=\"60\" rx=\"4\" fill=\"#ECEFF1\" stroke=\"#90A4AE\" stroke-width=\"1\"\/>\n                    <rect x=\"290\" y=\"240\" width=\"18\" height=\"15\" rx=\"4\" fill=\"#B0BEC5\"\/>\n                    <g transform=\"translate(80, 260)\">\n                        <polygon points=\"20,0 40,35 0,35\" fill=\"#EC407A\" opacity=\"0.9\"\/>\n                        <text x=\"20\" y=\"28\" fill=\"white\" font-size=\"20\" font-weight=\"bold\" text-anchor=\"middle\">!<\/text>\n                    <\/g>\n                    <g transform=\"translate(140, 280)\">\n                        <path d=\"M30 10 Q 10 10 10 30 Q 10 50 30 50 Q 50 50 50 30 Q 50 10 30 10 Z\" fill=\"rgba(236,64,122,0.3)\" stroke=\"#EC407A\" stroke-width=\"1.5\"\/>\n                        <text x=\"30\" y=\"70\" fill=\"#C2185B\" font-size=\"9\" text-anchor=\"middle\" font-weight=\"bold\">HYPOXIE<\/text>\n                    <\/g>\n                    <defs>\n                        <radialGradient id=\"balloonGrad\">\n                            <stop offset=\"0%\" stop-color=\"#FFB74D\" stop-opacity=\"0.5\"\/>\n                            <stop offset=\"100%\" stop-color=\"#AB47BC\" stop-opacity=\"0.2\"\/>\n                        <\/radialGradient>\n                    <\/defs>\n                <\/svg>\n            <\/div>\n\n            <div class=\"drogue-card cannabis\">\n                <div class=\"drogue-header\">\n                    <div class=\"drogue-icon\">\ud83c\udf3f<\/div>\n                    <div>\n                        <h3>Cannabis (THC)<\/h3>\n                        <div class=\"drogue-subtitle\">1\u00e8re drogue illicite impliqu\u00e9e dans les accidents<\/div>\n                    <\/div>\n                <\/div>\n                <p>Le THC alt\u00e8re la perception du temps et des distances, ralentit les r\u00e9flexes et d\u00e9grade la coordination.<\/p>\n                <ul class=\"effects-list\">\n                    <li>Alt\u00e9ration de la perception des distances<\/li>\n                    <li>Ralentissement du temps de r\u00e9action (+30%)<\/li>\n                    <li>Troubles de l&rsquo;attention divis\u00e9e<\/li>\n                    <li>Somnolence et b\u00e2illements fr\u00e9quents<\/li>\n                    <li>Risque d&rsquo;accident multipli\u00e9 par 1,6 \u00e0 3<\/li>\n                <\/ul>\n                <div class=\"risk-bar\">\n                    <span class=\"risk-label\">Risque accident<\/span>\n                    <span class=\"risk-value risk-high\">\u00c9LEV\u00c9 \u00d72-3<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"drogue-card alcool\">\n                <div class=\"drogue-header\">\n                    <div class=\"drogue-icon\">\ud83c\udf7a<\/div>\n                    <div>\n                        <h3>Alcool<\/h3>\n                        <div class=\"drogue-subtitle\">Impliqu\u00e9 dans 29% des accidents mortels<\/div>\n                    <\/div>\n                <\/div>\n                <p>M\u00eame \u00e0 faible dose (0,2 g\/L), l&rsquo;alcool d\u00e9grade les capacit\u00e9s de conduite.<\/p>\n                <ul class=\"effects-list\">\n                    <li>R\u00e9tr\u00e9cissement du champ visuel (vision tunnel)<\/li>\n                    <li>Fausse sensation de confiance (prise de risque)<\/li>\n                    <li>Alt\u00e9ration de la coordination et des r\u00e9flexes<\/li>\n                    <li>Somnolence major\u00e9e (effet s\u00e9datif)<\/li>\n                    <li>Seuil l\u00e9gal : 0,5 g\/L (0,2 pour les jeunes conducteurs)<\/li>\n                <\/ul>\n                <div class=\"risk-bar\">\n                    <span class=\"risk-label\">Risque accident<\/span>\n                    <span class=\"risk-value risk-extreme\">TR\u00c8S \u00c9LEV\u00c9 \u00d735<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"drogue-card cocaine\">\n                <div class=\"drogue-header\">\n                    <div class=\"drogue-icon\">\u26a1<\/div>\n                    <div>\n                        <h3>Coca\u00efne &#038; Amph\u00e9tamines<\/h3>\n                        <div class=\"drogue-subtitle\">Fausse vigilance, vrais dangers<\/div>\n                    <\/div>\n                <\/div>\n                <p>Ces stimulants donnent une illusion de vigilance mais provoquent une prise de risque excessive.<\/p>\n                <ul class=\"effects-list\">\n                    <li>Prise de risque excessive et agressivit\u00e9<\/li>\n                    <li>Illusion de comp\u00e9tence (surconfiance)<\/li>\n                    <li>Crash de fatigue en fin d&rsquo;effet (somnolence brutale)<\/li>\n                    <li>Hallucinations visuelles possibles<\/li>\n                    <li>Risque d&rsquo;accident multipli\u00e9 par 3 \u00e0 6<\/li>\n                <\/ul>\n                <div class=\"risk-bar\">\n                    <span class=\"risk-label\">Risque accident<\/span>\n                    <span class=\"risk-value risk-extreme\">EXTR\u00caME \u00d73-6<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"drogue-card opiaces\">\n                <div class=\"drogue-header\">\n                    <div class=\"drogue-icon\">\ud83d\udc8a<\/div>\n                    <div>\n                        <h3>Opiac\u00e9s &#038; M\u00e9dicaments d\u00e9tourn\u00e9s<\/h3>\n                        <div class=\"drogue-subtitle\">H\u00e9ro\u00efne, fentanyl, benzodiaz\u00e9pines<\/div>\n                    <\/div>\n                <\/div>\n                <p>Les opiac\u00e9s et benzodiaz\u00e9pines provoquent une s\u00e9dation profonde et une somnolence irr\u00e9pressible.<\/p>\n                <ul class=\"effects-list\">\n                    <li>Somnolence irr\u00e9pressible et micro-sommeils<\/li>\n                    <li>Ralentissement cognitif s\u00e9v\u00e8re<\/li>\n                    <li>R\u00e9tr\u00e9cissement pupillaire (myosis)<\/li>\n                    <li>Risque de coma en cas de surdosage<\/li>\n                    <li>Association mortelle avec l&rsquo;alcool<\/li>\n                <\/ul>\n                <div class=\"risk-bar\">\n                    <span class=\"risk-label\">Risque accident<\/span>\n                    <span class=\"risk-value risk-extreme\">MAXIMAL<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- NOUVELLE ILLUSTRATION : Effets sur le cerveau -->\n        <div class=\"illustration-gallery fade-in\">\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <rect width=\"400\" height=\"240\" fill=\"#F3E5F5\"\/>\n                    <!-- Brain -->\n                    <g transform=\"translate(100, 30)\">\n                        <path d=\"M 100 20 Q 60 20 50 60 Q 40 100 70 130 Q 100 150 130 130 Q 160 100 150 60 Q 140 20 100 20 Z\" fill=\"#FFCC80\" stroke=\"#7B1FA2\" stroke-width=\"2\"\/>\n                        <!-- Brain folds -->\n                        <path d=\"M 70 50 Q 90 40 110 50 Q 130 60 140 50\" stroke=\"#7B1FA2\" stroke-width=\"1.5\" fill=\"none\"\/>\n                        <path d=\"M 65 80 Q 90 70 115 80 Q 135 90 145 80\" stroke=\"#7B1FA2\" stroke-width=\"1.5\" fill=\"none\"\/>\n                        <path d=\"M 75 110 Q 95 100 120 110\" stroke=\"#7B1FA2\" stroke-width=\"1.5\" fill=\"none\"\/>\n                        <!-- Hypoxia areas -->\n                        <circle cx=\"85\" cy=\"70\" r=\"12\" fill=\"#EC407A\" opacity=\"0.5\"\/>\n                        <circle cx=\"120\" cy=\"90\" r=\"10\" fill=\"#EC407A\" opacity=\"0.5\"\/>\n                        <circle cx=\"95\" cy=\"115\" r=\"8\" fill=\"#EC407A\" opacity=\"0.5\"\/>\n                    <\/g>\n                    <!-- Labels -->\n                    <text x=\"200\" y=\"200\" text-anchor=\"middle\" font-size=\"11\" fill=\"#7B1FA2\" font-weight=\"bold\">HYPOXIE C\u00c9R\u00c9BRALE<\/text>\n                    <text x=\"200\" y=\"218\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">Manque d&rsquo;oxyg\u00e8ne au cerveau<\/text>\n                    <!-- N2O balloon -->\n                    <ellipse cx=\"50\" cy=\"180\" rx=\"25\" ry=\"30\" fill=\"rgba(206,147,216,0.5)\" stroke=\"#AB47BC\" stroke-width=\"1.5\"\/>\n                    <text x=\"50\" y=\"185\" text-anchor=\"middle\" font-size=\"10\" fill=\"#7B1FA2\" font-weight=\"bold\">N\u2082O<\/text>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\ud83e\udde0 Hypoxie c\u00e9r\u00e9brale<\/h4>\n                    <p>Le protoxyde d&rsquo;azote prive le cerveau d&rsquo;oxyg\u00e8ne, causant des l\u00e9sions irr\u00e9versibles.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <rect width=\"400\" height=\"240\" fill=\"#FBE9E7\"\/>\n                    <!-- Reaction time comparison -->\n                    <text x=\"200\" y=\"30\" text-anchor=\"middle\" font-size=\"12\" fill=\"#E65100\" font-weight=\"bold\">\u23f1\ufe0f TEMPS DE R\u00c9ACTION<\/text>\n                    \n                    <!-- Sobriety -->\n                    <g transform=\"translate(30, 60)\">\n                        <text x=\"60\" y=\"15\" text-anchor=\"middle\" font-size=\"10\" fill=\"#2e7d32\" font-weight=\"bold\">SOBRE<\/text>\n                        <rect x=\"0\" y=\"25\" width=\"80\" height=\"20\" rx=\"3\" fill=\"#66BB6A\"\/>\n                        <text x=\"90\" y=\"40\" font-size=\"10\" fill=\"#455A64\">0.8s<\/text>\n                    <\/g>\n                    \n                    <!-- Alcohol -->\n                    <g transform=\"translate(30, 100)\">\n                        <text x=\"60\" y=\"15\" text-anchor=\"middle\" font-size=\"10\" fill=\"#E65100\" font-weight=\"bold\">ALCOOL 0.5g\/L<\/text>\n                        <rect x=\"0\" y=\"25\" width=\"130\" height=\"20\" rx=\"3\" fill=\"#FFA726\"\/>\n                        <text x=\"140\" y=\"40\" font-size=\"10\" fill=\"#455A64\">1.3s<\/text>\n                    <\/g>\n                    \n                    <!-- Cannabis -->\n                    <g transform=\"translate(30, 140)\">\n                        <text x=\"60\" y=\"15\" text-anchor=\"middle\" font-size=\"10\" fill=\"#2e7d32\" font-weight=\"bold\">CANNABIS<\/text>\n                        <rect x=\"0\" y=\"25\" width=\"150\" height=\"20\" rx=\"3\" fill=\"#66BB6A\"\/>\n                        <text x=\"160\" y=\"40\" font-size=\"10\" fill=\"#455A64\">1.5s<\/text>\n                    <\/g>\n                    \n                    <!-- Both -->\n                    <g transform=\"translate(30, 180)\">\n                        <text x=\"60\" y=\"15\" text-anchor=\"middle\" font-size=\"10\" fill=\"#EC407A\" font-weight=\"bold\">ALCOOL+CANNABIS<\/text>\n                        <rect x=\"0\" y=\"25\" width=\"280\" height=\"20\" rx=\"3\" fill=\"#EC407A\"\/>\n                        <text x=\"290\" y=\"40\" font-size=\"10\" fill=\"#C2185B\" font-weight=\"bold\">2.8s<\/text>\n                    <\/g>\n                    \n                    <!-- Car distance -->\n                    <g transform=\"translate(250, 60)\">\n                        <rect width=\"130\" height=\"140\" rx=\"8\" fill=\"white\" opacity=\"0.9\"\/>\n                        <text x=\"65\" y=\"25\" text-anchor=\"middle\" font-size=\"10\" fill=\"#455A64\" font-weight=\"bold\">\u00c0 130 km\/h<\/text>\n                        <text x=\"65\" y=\"55\" text-anchor=\"middle\" font-size=\"9\" fill=\"#2e7d32\">Sobre: 29m<\/text>\n                        <text x=\"65\" y=\"80\" text-anchor=\"middle\" font-size=\"9\" fill=\"#E65100\">Alcool: 47m<\/text>\n                        <text x=\"65\" y=\"105\" text-anchor=\"middle\" font-size=\"9\" fill=\"#2e7d32\">Cannabis: 54m<\/text>\n                        <text x=\"65\" y=\"130\" text-anchor=\"middle\" font-size=\"9\" fill=\"#EC407A\" font-weight=\"bold\">Mixte: 101m<\/text>\n                    <\/g>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\u23f1\ufe0f Temps de r\u00e9action<\/h4>\n                    <p>Les associations multiplient les distances d&rsquo;arr\u00eat par 3 \u00e0 4.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <rect width=\"400\" height=\"240\" fill=\"#E8EAF6\"\/>\n                    <!-- Legal sanctions -->\n                    <text x=\"200\" y=\"30\" text-anchor=\"middle\" font-size=\"12\" fill=\"#5C6BC0\" font-weight=\"bold\">\u2696\ufe0f SANCTIONS P\u00c9NALES<\/text>\n                    \n                    <!-- Gavel -->\n                    <g transform=\"translate(30, 60)\">\n                        <rect x=\"20\" y=\"40\" width=\"80\" height=\"15\" rx=\"3\" fill=\"#8D6E63\"\/>\n                        <rect x=\"50\" y=\"20\" width=\"20\" height=\"40\" rx=\"3\" fill=\"#6D4C41\"\/>\n                        <rect x=\"30\" y=\"60\" width=\"60\" height=\"8\" rx=\"2\" fill=\"#5D4037\"\/>\n                    <\/g>\n                    \n                    <!-- Sanctions list -->\n                    <g transform=\"translate(160, 50)\">\n                        <rect width=\"220\" height=\"170\" rx=\"10\" fill=\"white\" opacity=\"0.9\"\/>\n                        <text x=\"15\" y=\"25\" font-size=\"10\" fill=\"#EC407A\" font-weight=\"bold\">\ud83d\udeab Stup\u00e9fiants<\/text>\n                        <text x=\"15\" y=\"45\" font-size=\"9\" fill=\"#455A64\">2 ans prison<\/text>\n                        <text x=\"15\" y=\"60\" font-size=\"9\" fill=\"#455A64\">4 500\u20ac amende<\/text>\n                        <text x=\"15\" y=\"75\" font-size=\"9\" fill=\"#455A64\">6 points retir\u00e9s<\/text>\n                        \n                        <line x1=\"15\" y1=\"85\" x2=\"205\" y2=\"85\" stroke=\"#E0E0E0\" stroke-width=\"1\"\/>\n                        \n                        <text x=\"15\" y=\"105\" font-size=\"10\" fill=\"#EC407A\" font-weight=\"bold\">\ud83d\udc80 Homicide involontaire<\/text>\n                        <text x=\"15\" y=\"125\" font-size=\"9\" fill=\"#455A64\">10 ans prison<\/text>\n                        <text x=\"15\" y=\"140\" font-size=\"9\" fill=\"#455A64\">150 000\u20ac amende<\/text>\n                        <text x=\"15\" y=\"155\" font-size=\"9\" fill=\"#455A64\">Permis annul\u00e9<\/text>\n                    <\/g>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\u2696\ufe0f Sanctions p\u00e9nales<\/h4>\n                    <p>Jusqu&rsquo;\u00e0 10 ans de prison en cas d&rsquo;homicide involontaire sous influence.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"drogues-legal fade-in\">\n            <h3>\u2696\ufe0f Cadre L\u00e9gal &#038; Sanctions<\/h3>\n            <p>La conduite sous l&#8217;emprise de produits stup\u00e9fiants est un d\u00e9lit grave en France, passible de sanctions lourdes.<\/p>\n            <div class=\"legal-grid\">\n                <div class=\"legal-item\">\n                    <h4>\ud83d\udeab Conduite apr\u00e8s usage de stup\u00e9fiants<\/h4>\n                    <p>Jusqu&rsquo;\u00e0 2 ans de prison, 4 500\u20ac d&rsquo;amende, retrait de 6 points, suspension de permis jusqu&rsquo;\u00e0 3 ans.<\/p>\n                <\/div>\n                <div class=\"legal-item\">\n                    <h4>\ud83c\udf7a Conduite en \u00e9tat d&rsquo;ivresse<\/h4>\n                    <p>\u2265 0,8 g\/L : 4 500\u20ac d&rsquo;amende, jusqu&rsquo;\u00e0 2 ans de prison, suspension de permis jusqu&rsquo;\u00e0 3 ans.<\/p>\n                <\/div>\n                <div class=\"legal-item\">\n                    <h4>\ud83d\udc80 En cas d&rsquo;accident corporel<\/h4>\n                    <p>Jusqu&rsquo;\u00e0 10 ans de prison et 150 000\u20ac d&rsquo;amende en cas d&rsquo;homicide involontaire sous influence.<\/p>\n                <\/div>\n                <div class=\"legal-item\">\n                    <h4>\ud83e\uddea D\u00e9pistage syst\u00e9matique<\/h4>\n                    <p>Test salivaire obligatoire apr\u00e8s accident ou infraction. Confirmation par analyse sanguine.<\/p>\n                <\/div>\n                <div class=\"legal-item\">\n                    <h4>\ud83d\udc76 Jeunes conducteurs<\/h4>\n                    <p>Seuil alcool abaiss\u00e9 \u00e0 0,2 g\/L. Tol\u00e9rance z\u00e9ro pour les stup\u00e9fiants.<\/p>\n                <\/div>\n                <div class=\"legal-item\">\n                    <h4>\ud83d\ude97 Refus de d\u00e9pistage<\/h4>\n                    <p>M\u00eames peines que la conduite sous influence : 2 ans de prison, 4 500\u20ac d&rsquo;amende.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<footer>\n    <div class=\"footer-content\">\n        <div class=\"footer-about\">\n            <h3>SomnoVigilance<\/h3>\n            <p>Centre de ressources d\u00e9di\u00e9 \u00e0 la compr\u00e9hension, au d\u00e9pistage et \u00e0 la pr\u00e9vention de la somnolence au volant.<\/p>\n            <p style=\"margin-top:1rem;font-size:0.8rem;opacity:0.85;\">\u26a0\ufe0f Ce site est \u00e0 vis\u00e9e informative et ne remplace pas une consultation m\u00e9dicale.<\/p>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Navigation<\/h4>\n            <ul>\n                <li><a href=\"index.html\">Les causes<\/a><\/li>\n                <li><a href=\"consequences.html\">Les cons\u00e9quences<\/a><\/li>\n                <li><a href=\"depistage.html\">Le d\u00e9pistage<\/a><\/li>\n                <li><a href=\"traitements.html\">Les traitements<\/a><\/li>\n                <li><a href=\"drogues.html\">Drogues &#038; Conduite<\/a><\/li>\n                <li><a href=\"prevention.html\">La pr\u00e9vention<\/a><\/li>\n                <li><a href=\"etudes.html\">\u00c9tudes<\/a><\/li>\n                <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n            <\/ul>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Ressources utiles<\/h4>\n            <ul>\n                <li><a href=\"#\">S\u00e9curit\u00e9 Routi\u00e8re<\/a><\/li>\n                <li><a href=\"#\">INSERM<\/a><\/li>\n                <li><a href=\"#\">SFRMS<\/a><\/li>\n                <li><a href=\"#\">MILDECA<\/a><\/li>\n                <li><a href=\"#\">OFDT<\/a><\/li>\n                <li><a href=\"#\">Drogues Info Service<\/a><\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n    <div class=\"footer-bottom\">\n        <p>\u00a9 2026 SomnoVigilance \u2014 Derni\u00e8re mise \u00e0 jour : Octobre 2026<\/p>\n    <\/div>\n<\/footer>\n\n<script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>La pr\u00e9vention de la somnolence au volant \u2014 SomnoVigilance<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/inter@5.0.8\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/playfair-display@5.0.12\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n<div class=\"scroll-progress\" id=\"scrollProgress\"><\/div>\n\n<nav>\n    <div class=\"nav-inner\">\n        <a href=\"index.html\" class=\"logo\">\n            <svg viewBox=\"0 0 32 32\" fill=\"none\">\n                <circle cx=\"16\" cy=\"16\" r=\"14\" stroke=\"#5C6BC0\" stroke-width=\"2.5\"\/>\n                <path d=\"M10 20c0-3.3 2.7-6 6-6s6 2.7 6 6\" stroke=\"#5C6BC0\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                <circle cx=\"12\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <circle cx=\"20\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <path d=\"M8 11c1-2 3-3 4-3M24 11c-1-2-3-3-4-3\" stroke=\"#ff6f00\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n            <\/svg>\n            SomnoVigilance\n        <\/a>\n        <ul id=\"navMenu\">\n            <li><a href=\"index.html\">Causes<\/a><\/li>\n            <li><a href=\"consequences.html\">Cons\u00e9quences<\/a><\/li>\n            <li><a href=\"depistage.html\">D\u00e9pistage<\/a><\/li>\n            <li><a href=\"traitements.html\">Traitements<\/a><\/li>\n            <li><a href=\"drogues.html\">Drogues<\/a><\/li>\n            <li><a href=\"prevention.html\" class=\"active\">Pr\u00e9vention<\/a><\/li>\n            <li><a href=\"etudes.html\">\u00c9tudes<\/a><\/li>\n            <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n        <\/ul>\n        <button class=\"mobile-toggle\" onclick=\"document.getElementById('navMenu').classList.toggle('open')\">\n            <span><\/span><span><\/span><span><\/span>\n        <\/button>\n    <\/div>\n<\/nav>\n\n<section class=\"hero hero-prevention\">\n    <div class=\"hero-content\">\n        <div class=\"hero-text\">\n            <div class=\"badge\">\u2705 Agir au quotidien<\/div>\n            <h1>Actions de <span>Pr\u00e9vention<\/span><\/h1>\n            <p>Des gestes simples et des mesures collectives pour r\u00e9duire le risque d&rsquo;accidents li\u00e9s \u00e0 la somnolence.<\/p>\n            <div style=\"display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;\">\n                <a href=\"etudes.html\" class=\"btn-primary\">Voir les \u00e9tudes \u2192<\/a>\n                <a href=\"index.html\" class=\"btn-outline\">Les causes<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section id=\"prevention\">\n    <div class=\"container\">\n        <div class=\"section-header fade-in\">\n            <span class=\"tag\">Agir<\/span>\n            <h2>Les bons r\u00e9flexes<\/h2>\n            <p>La pr\u00e9vention repose sur des gestes simples, une bonne hygi\u00e8ne de vie et l&rsquo;utilisation des technologies embarqu\u00e9es.<\/p>\n        <\/div>\n\n        <!-- NOUVELLE ILLUSTRATION : Parcours de pr\u00e9vention -->\n        <div class=\"full-illustration fade-in\">\n            <svg viewBox=\"0 0 1000 300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <defs>\n                    <linearGradient id=\"prevBg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n                        <stop offset=\"0%\" stop-color=\"#E0F2F1\"\/>\n                        <stop offset=\"50%\" stop-color=\"#B2DFDB\"\/>\n                        <stop offset=\"100%\" stop-color=\"#80CBC4\"\/>\n                    <\/linearGradient>\n                <\/defs>\n                <rect width=\"1000\" height=\"300\" fill=\"url(#prevBg)\"\/>\n                \n                <text x=\"500\" y=\"30\" text-anchor=\"middle\" font-size=\"16\" fill=\"#00695C\" font-weight=\"bold\">\ud83d\udee3\ufe0f PARCOURS DE PR\u00c9VENTION<\/text>\n                \n                <!-- Step 1 : Before -->\n                <g transform=\"translate(30, 60)\">\n                    <rect width=\"200\" height=\"200\" rx=\"15\" fill=\"white\" opacity=\"0.95\"\/>\n                    <circle cx=\"100\" cy=\"50\" r=\"30\" fill=\"#26A69A\"\/>\n                    <text x=\"100\" y=\"58\" text-anchor=\"middle\" font-size=\"24\" fill=\"white\" font-weight=\"bold\">1<\/text>\n                    <text x=\"100\" y=\"100\" text-anchor=\"middle\" font-size=\"12\" fill=\"#00695C\" font-weight=\"bold\">AVANT LE TRAJET<\/text>\n                    <!-- Sleep icon -->\n                    <circle cx=\"60\" cy=\"140\" r=\"15\" fill=\"#FFE082\" opacity=\"0.5\"\/>\n                    <text x=\"60\" y=\"145\" text-anchor=\"middle\" font-size=\"12\">\ud83d\ude34<\/text>\n                    <text x=\"60\" y=\"170\" text-anchor=\"middle\" font-size=\"8\" fill=\"#455A64\">8h sommeil<\/text>\n                    <!-- Plan icon -->\n                    <rect x=\"120\" y=\"125\" width=\"30\" height=\"30\" rx=\"3\" fill=\"#26A69A\" opacity=\"0.3\"\/>\n                    <text x=\"135\" y=\"145\" text-anchor=\"middle\" font-size=\"14\">\ud83d\udccb<\/text>\n                    <text x=\"135\" y=\"170\" text-anchor=\"middle\" font-size=\"8\" fill=\"#455A64\">Planifier<\/text>\n                <\/g>\n                \n                <!-- Arrow -->\n                <path d=\"M 240 160 L 270 160\" stroke=\"#26A69A\" stroke-width=\"3\" fill=\"none\" marker-end=\"url(#arrowGreen)\"\/>\n                <defs>\n                    <marker id=\"arrowGreen\" markerWidth=\"10\" markerHeight=\"10\" refX=\"5\" refY=\"5\" orient=\"auto\">\n                        <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#26A69A\"\/>\n                    <\/marker>\n                <\/defs>\n                \n                <!-- Step 2 : During -->\n                <g transform=\"translate(280, 60)\">\n                    <rect width=\"200\" height=\"200\" rx=\"15\" fill=\"white\" opacity=\"0.95\"\/>\n                    <circle cx=\"100\" cy=\"50\" r=\"30\" fill=\"#26A69A\"\/>\n                    <text x=\"100\" y=\"58\" text-anchor=\"middle\" font-size=\"24\" fill=\"white\" font-weight=\"bold\">2<\/text>\n                    <text x=\"100\" y=\"100\" text-anchor=\"middle\" font-size=\"12\" fill=\"#00695C\" font-weight=\"bold\">PENDANT<\/text>\n                    <!-- Pause icon -->\n                    <circle cx=\"60\" cy=\"140\" r=\"15\" fill=\"#FFA726\" opacity=\"0.5\"\/>\n                    <text x=\"60\" y=\"145\" text-anchor=\"middle\" font-size=\"12\">\u2615<\/text>\n                    <text x=\"60\" y=\"170\" text-anchor=\"middle\" font-size=\"8\" fill=\"#455A64\">Pause 2h<\/text>\n                    <!-- Nap icon -->\n                    <rect x=\"120\" y=\"125\" width=\"30\" height=\"30\" rx=\"3\" fill=\"#26A69A\" opacity=\"0.3\"\/>\n                    <text x=\"135\" y=\"145\" text-anchor=\"middle\" font-size=\"14\">\ud83d\udca4<\/text>\n                    <text x=\"135\" y=\"170\" text-anchor=\"middle\" font-size=\"8\" fill=\"#455A64\">Sieste 20min<\/text>\n                <\/g>\n                \n                <!-- Arrow -->\n                <path d=\"M 490 160 L 520 160\" stroke=\"#26A69A\" stroke-width=\"3\" fill=\"none\" marker-end=\"url(#arrowGreen)\"\/>\n                \n                <!-- Step 3 : Avoid -->\n                <g transform=\"translate(530, 60)\">\n                    <rect width=\"200\" height=\"200\" rx=\"15\" fill=\"white\" opacity=\"0.95\"\/>\n                    <circle cx=\"100\" cy=\"50\" r=\"30\" fill=\"#EC407A\"\/>\n                    <text x=\"100\" y=\"58\" text-anchor=\"middle\" font-size=\"24\" fill=\"white\" font-weight=\"bold\">3<\/text>\n                    <text x=\"100\" y=\"100\" text-anchor=\"middle\" font-size=\"12\" fill=\"#C2185B\" font-weight=\"bold\">\u00c0 \u00c9VITER<\/text>\n                    <!-- Alcohol -->\n                    <circle cx=\"60\" cy=\"140\" r=\"15\" fill=\"#EC407A\" opacity=\"0.3\"\/>\n                    <text x=\"60\" y=\"145\" text-anchor=\"middle\" font-size=\"12\">\ud83c\udf7a<\/text>\n                    <text x=\"60\" y=\"170\" text-anchor=\"middle\" font-size=\"8\" fill=\"#EC407A\">Alcool<\/text>\n                    <!-- Drugs -->\n                    <rect x=\"120\" y=\"125\" width=\"30\" height=\"30\" rx=\"3\" fill=\"#EC407A\" opacity=\"0.3\"\/>\n                    <text x=\"135\" y=\"145\" text-anchor=\"middle\" font-size=\"14\">\ud83d\udeab<\/text>\n                    <text x=\"135\" y=\"170\" text-anchor=\"middle\" font-size=\"8\" fill=\"#EC407A\">Drogues<\/text>\n                <\/g>\n                \n                <!-- Arrow -->\n                <path d=\"M 740 160 L 770 160\" stroke=\"#26A69A\" stroke-width=\"3\" fill=\"none\" marker-end=\"url(#arrowGreen)\"\/>\n                \n                <!-- Step 4 : Technology -->\n                <g transform=\"translate(780, 60)\">\n                    <rect width=\"190\" height=\"200\" rx=\"15\" fill=\"white\" opacity=\"0.95\"\/>\n                    <circle cx=\"95\" cy=\"50\" r=\"30\" fill=\"#26A69A\"\/>\n                    <text x=\"95\" y=\"58\" text-anchor=\"middle\" font-size=\"24\" fill=\"white\" font-weight=\"bold\">4<\/text>\n                    <text x=\"95\" y=\"100\" text-anchor=\"middle\" font-size=\"12\" fill=\"#00695C\" font-weight=\"bold\">TECHNOLOGIE<\/text>\n                    <!-- AFIL -->\n                    <circle cx=\"55\" cy=\"140\" r=\"15\" fill=\"#5C6BC0\" opacity=\"0.3\"\/>\n                    <text x=\"55\" y=\"145\" text-anchor=\"middle\" font-size=\"12\">\ud83d\ude97<\/text>\n                    <text x=\"55\" y=\"170\" text-anchor=\"middle\" font-size=\"8\" fill=\"#455A64\">AFIL\/DAS<\/text>\n                    <!-- Apps -->\n                    <rect x=\"115\" y=\"125\" width=\"30\" height=\"30\" rx=\"3\" fill=\"#5C6BC0\" opacity=\"0.3\"\/>\n                    <text x=\"130\" y=\"145\" text-anchor=\"middle\" font-size=\"14\">\ud83d\udcf1<\/text>\n                    <text x=\"130\" y=\"170\" text-anchor=\"middle\" font-size=\"8\" fill=\"#455A64\">Apps<\/text>\n                <\/g>\n            <\/svg>\n        <\/div>\n\n        <div class=\"prevention-layout\">\n            <div class=\"prevention-image fade-in\">\n                <!-- Illustration d\u00e9taill\u00e9e : Aire de repos -->\n                <svg viewBox=\"0 0 500 450\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <defs>\n                        <linearGradient id=\"skyPrev\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                            <stop offset=\"0%\" stop-color=\"#81D4FA\"\/>\n                            <stop offset=\"100%\" stop-color=\"#E1F5FE\"\/>\n                        <\/linearGradient>\n                    <\/defs>\n                    <rect width=\"500\" height=\"450\" rx=\"16\" fill=\"url(#skyPrev)\"\/>\n                    <!-- Sun -->\n                    <circle cx=\"420\" cy=\"80\" r=\"35\" fill=\"#FFB74D\" opacity=\"0.5\"\/>\n                    <circle cx=\"420\" cy=\"80\" r=\"25\" fill=\"#FFB74D\" opacity=\"0.8\"\/>\n                    <!-- Clouds -->\n                    <ellipse cx=\"100\" cy=\"60\" rx=\"40\" ry=\"15\" fill=\"white\" opacity=\"0.8\"\/>\n                    <ellipse cx=\"250\" cy=\"40\" rx=\"50\" ry=\"18\" fill=\"white\" opacity=\"0.7\"\/>\n                    <!-- Trees -->\n                    <circle cx=\"50\" cy=\"200\" r=\"25\" fill=\"#66BB6A\" opacity=\"0.7\"\/>\n                    <rect x=\"47\" y=\"220\" width=\"6\" height=\"30\" fill=\"#8D6E63\"\/>\n                    <circle cx=\"450\" cy=\"190\" r=\"30\" fill=\"#81C784\" opacity=\"0.7\"\/>\n                    <rect x=\"447\" y=\"215\" width=\"6\" height=\"35\" fill=\"#8D6E63\"\/>\n                    <circle cx=\"400\" cy=\"210\" r=\"22\" fill=\"#66BB6A\" opacity=\"0.6\"\/>\n                    <rect x=\"397\" y=\"228\" width=\"6\" height=\"25\" fill=\"#8D6E63\"\/>\n                    <!-- Rest area sign -->\n                    <rect x=\"180\" y=\"200\" width=\"140\" height=\"50\" rx=\"8\" fill=\"#2e7d32\"\/>\n                    <rect x=\"185\" y=\"205\" width=\"130\" height=\"40\" rx=\"5\" fill=\"#66BB6A\"\/>\n                    <text x=\"250\" y=\"230\" text-anchor=\"middle\" font-size=\"14\" fill=\"white\" font-weight=\"bold\">AIRE DE REPOS<\/text>\n                    <rect x=\"245\" y=\"250\" width=\"10\" height=\"50\" fill=\"#757575\"\/>\n                    <!-- Road -->\n                    <rect x=\"0\" y=\"300\" width=\"500\" height=\"150\" fill=\"#455A64\"\/>\n                    <rect x=\"0\" y=\"300\" width=\"500\" height=\"3\" fill=\"#FFA726\"\/>\n                    <!-- Parked car -->\n                    <rect x=\"80\" y=\"320\" width=\"120\" height=\"50\" rx=\"10\" fill=\"#5C6BC0\"\/>\n                    <rect x=\"100\" y=\"300\" width=\"80\" height=\"30\" rx=\"8\" fill=\"#7986CB\"\/>\n                    <rect x=\"110\" y=\"308\" width=\"25\" height=\"18\" rx=\"3\" fill=\"#E8EAF6\" opacity=\"0.8\"\/>\n                    <rect x=\"145\" y=\"308\" width=\"25\" height=\"18\" rx=\"3\" fill=\"#E8EAF6\" opacity=\"0.8\"\/>\n                    <circle cx=\"100\" cy=\"370\" r=\"12\" fill=\"#263238\"\/>\n                    <circle cx=\"100\" cy=\"370\" r=\"5\" fill=\"#5C6BC0\"\/>\n                    <circle cx=\"180\" cy=\"370\" r=\"12\" fill=\"#263238\"\/>\n                    <circle cx=\"180\" cy=\"370\" r=\"5\" fill=\"#5C6BC0\"\/>\n                    <!-- Person stretching -->\n                    <circle cx=\"230\" cy=\"330\" r=\"12\" fill=\"#FFCC80\"\/>\n                    <path d=\"M220 345 L 220 380 M 240 345 L 240 380\" stroke=\"#5C6BC0\" stroke-width=\"3\"\/>\n                    <path d=\"M215 355 L 245 355\" stroke=\"#5C6BC0\" stroke-width=\"3\"\/>\n                    <path d=\"M210 340 L 250 340\" stroke=\"#5C6BC0\" stroke-width=\"3\"\/>\n                    <!-- Coffee cup -->\n                    <rect x=\"260\" y=\"355\" width=\"20\" height=\"25\" rx=\"3\" fill=\"#8D6E63\"\/>\n                    <path d=\"M280 360 Q 290 365 290 372 Q 290 380 280 380\" stroke=\"#8D6E63\" stroke-width=\"2\" fill=\"none\"\/>\n                    <path d=\"M265 350 Q 268 342 271 350\" stroke=\"#B0BEC5\" stroke-width=\"1.5\" fill=\"none\"\/>\n                    <path d=\"M271 350 Q 274 342 277 350\" stroke=\"#B0BEC5\" stroke-width=\"1.5\" fill=\"none\"\/>\n                    <!-- Checklist overlay -->\n                    <rect x=\"20\" y=\"20\" width=\"200\" height=\"150\" rx=\"10\" fill=\"white\" opacity=\"0.95\"\/>\n                    <text x=\"35\" y=\"45\" fill=\"#2e7d32\" font-size=\"12\" font-weight=\"bold\">\u2713 CHECKLIST PR\u00c9VENTION<\/text>\n                    <text x=\"35\" y=\"65\" fill=\"#455A64\" font-size=\"10\">\u2022 8h de sommeil<\/text>\n                    <text x=\"35\" y=\"82\" fill=\"#455A64\" font-size=\"10\">\u2022 Pause toutes les 2h<\/text>\n                    <text x=\"35\" y=\"99\" fill=\"#455A64\" font-size=\"10\">\u2022 \u00c9viter 2h-6h &#038; 13h-15h<\/text>\n                    <text x=\"35\" y=\"116\" fill=\"#455A64\" font-size=\"10\">\u2022 Pas d&rsquo;alcool\/drogues<\/text>\n                    <text x=\"35\" y=\"133\" fill=\"#455A64\" font-size=\"10\">\u2022 V\u00e9rifier m\u00e9dicaments<\/text>\n                    <text x=\"35\" y=\"150\" fill=\"#455A64\" font-size=\"10\">\u2022 Partager la conduite<\/text>\n                    <!-- Other cars -->\n                    <rect x=\"320\" y=\"340\" width=\"80\" height=\"35\" rx=\"6\" fill=\"#EC407A\" opacity=\"0.8\"\/>\n                    <rect x=\"330\" y=\"328\" width=\"55\" height=\"18\" rx=\"5\" fill=\"#F06292\" opacity=\"0.8\"\/>\n                    <circle cx=\"335\" cy=\"375\" r=\"10\" fill=\"#263238\"\/>\n                    <circle cx=\"385\" cy=\"375\" r=\"10\" fill=\"#263238\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"prevention-actions fade-in\">\n                <div class=\"prevention-item\">\n                    <div class=\"check\">\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>\n                    <\/div>\n                    <div>\n                        <h4>Pauses r\u00e9guli\u00e8res toutes les 2h<\/h4>\n                        <p>S&rsquo;arr\u00eater toutes les 2 heures ou 200 km. Marcher, s&rsquo;\u00e9tirer, boire de l&rsquo;eau.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"prevention-item\">\n                    <div class=\"check\">\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>\n                    <\/div>\n                    <div>\n                        <h4>Sieste de 15-20 minutes<\/h4>\n                        <p>En cas de signes de somnolence, s&rsquo;arr\u00eater imm\u00e9diatement et faire une micro-sieste.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"prevention-item\">\n                    <div class=\"check\">\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>\n                    <\/div>\n                    <div>\n                        <h4>Z\u00e9ro alcool, z\u00e9ro drogue<\/h4>\n                        <p>Ne jamais prendre le volant apr\u00e8s consommation. D\u00e9signer un conducteur sobre.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"prevention-item\">\n                    <div class=\"check\">\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>\n                    <\/div>\n                    <div>\n                        <h4>\u00c9viter les heures \u00e0 risque<\/h4>\n                        <p>Ne pas conduire entre 2h et 6h du matin ni entre 13h et 15h.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"prevention-item\">\n                    <div class=\"check\">\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>\n                    <\/div>\n                    <div>\n                        <h4>Syst\u00e8mes d&rsquo;alerte embarqu\u00e9s<\/h4>\n                        <p>Utiliser les syst\u00e8mes AFIL et DAS qui analysent la trajectoire et alertent le conducteur.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"prevention-item\">\n                    <div class=\"check\">\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>\n                    <\/div>\n                    <div>\n                        <h4>Formation et sensibilisation<\/h4>\n                        <p>Campagnes de sensibilisation, formation des conducteurs professionnels.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- NOUVELLE GALERIE : Signes d'alerte -->\n        <div class=\"illustration-gallery fade-in\" style=\"margin-top: 4rem;\">\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <rect width=\"400\" height=\"240\" fill=\"#FFF3E0\"\/>\n                    <text x=\"200\" y=\"25\" text-anchor=\"middle\" font-size=\"12\" fill=\"#E65100\" font-weight=\"bold\">\ud83d\udea8 SIGNES D&rsquo;ALERTE<\/text>\n                    <!-- Face with signs -->\n                    <circle cx=\"200\" cy=\"120\" r=\"70\" fill=\"#FFCC80\"\/>\n                    <!-- Yawning -->\n                    <ellipse cx=\"200\" cy=\"145\" rx=\"15\" ry=\"20\" fill=\"#455A64\"\/>\n                    <!-- Heavy eyelids -->\n                    <path d=\"M160 100 Q 175 90 190 100\" stroke=\"#455A64\" stroke-width=\"3\" fill=\"none\"\/>\n                    <path d=\"M210 100 Q 225 90 240 100\" stroke=\"#455A64\" stroke-width=\"3\" fill=\"none\"\/>\n                    <!-- Eyes barely open -->\n                    <ellipse cx=\"175\" cy=\"105\" rx=\"8\" ry=\"2\" fill=\"white\"\/>\n                    <ellipse cx=\"225\" cy=\"105\" rx=\"8\" ry=\"2\" fill=\"white\"\/>\n                    <!-- Zzz -->\n                    <text x=\"280\" y=\"80\" fill=\"#E65100\" font-size=\"18\" font-weight=\"bold\">Z<\/text>\n                    <text x=\"295\" y=\"65\" fill=\"#E65100\" font-size=\"14\" font-weight=\"bold\" opacity=\"0.7\">z<\/text>\n                    <text x=\"305\" y=\"55\" fill=\"#E65100\" font-size=\"10\" font-weight=\"bold\" opacity=\"0.5\">z<\/text>\n                    <!-- Labels -->\n                    <text x=\"200\" y=\"215\" text-anchor=\"middle\" font-size=\"10\" fill=\"#455A64\" font-weight=\"bold\">B\u00e2illements \u2022 Paupi\u00e8res lourdes<\/text>\n                    <text x=\"200\" y=\"230\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">\u2192 S&rsquo;ARR\u00caTER IMM\u00c9DIATEMENT<\/text>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\ud83d\udea8 Signes avant-coureurs<\/h4>\n                    <p>B\u00e2illements, paupi\u00e8res lourdes, b\u00e2illements : arr\u00eatez-vous imm\u00e9diatement.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <rect width=\"400\" height=\"240\" fill=\"#E8F5E9\"\/>\n                    <text x=\"200\" y=\"25\" text-anchor=\"middle\" font-size=\"12\" fill=\"#2e7d32\" font-weight=\"bold\">\ud83d\udca4 SIESTE \u00c9CLAIR<\/text>\n                    <!-- Car parked -->\n                    <rect x=\"50\" y=\"140\" width=\"120\" height=\"40\" rx=\"8\" fill=\"#5C6BC0\"\/>\n                    <rect x=\"70\" y=\"125\" width=\"80\" height=\"25\" rx=\"6\" fill=\"#7986CB\"\/>\n                    <circle cx=\"70\" cy=\"180\" r=\"10\" fill=\"#263238\"\/>\n                    <circle cx=\"150\" cy=\"180\" r=\"10\" fill=\"#263238\"\/>\n                    <!-- Person napping -->\n                    <circle cx=\"250\" cy=\"130\" r=\"20\" fill=\"#FFCC80\"\/>\n                    <path d=\"M235 150 Q 250 160 265 150 L 265 180 L 235 180 Z\" fill=\"#66BB6A\"\/>\n                    <!-- Closed eyes (peaceful) -->\n                    <path d=\"M240 128 Q 245 126 250 128\" stroke=\"#455A64\" stroke-width=\"1.5\" fill=\"none\"\/>\n                    <path d=\"M255 128 Q 260 126 265 128\" stroke=\"#455A64\" stroke-width=\"1.5\" fill=\"none\"\/>\n                    <!-- Zzz -->\n                    <text x=\"280\" y=\"115\" fill=\"#66BB6A\" font-size=\"14\" font-weight=\"bold\">z<\/text>\n                    <text x=\"295\" y=\"103\" fill=\"#66BB6A\" font-size=\"11\" font-weight=\"bold\" opacity=\"0.7\">z<\/text>\n                    <!-- Timer -->\n                    <circle cx=\"330\" cy=\"80\" r=\"30\" fill=\"white\" stroke=\"#66BB6A\" stroke-width=\"3\"\/>\n                    <text x=\"330\" y=\"75\" text-anchor=\"middle\" font-size=\"16\" fill=\"#66BB6A\" font-weight=\"bold\">20<\/text>\n                    <text x=\"330\" y=\"92\" text-anchor=\"middle\" font-size=\"10\" fill=\"#455A64\">min<\/text>\n                    <!-- Info -->\n                    <text x=\"200\" y=\"215\" text-anchor=\"middle\" font-size=\"10\" fill=\"#2e7d32\" font-weight=\"bold\">15-20 minutes maximum<\/text>\n                    <text x=\"200\" y=\"230\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">R\u00e9cup\u00e9ration optimale de vigilance<\/text>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\ud83d\udca4 La sieste \u00e9clair<\/h4>\n                    <p>15-20 minutes maximum pour r\u00e9cup\u00e9rer une vigilance optimale.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"illustration-card\">\n                <svg viewBox=\"0 0 400 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <rect width=\"400\" height=\"240\" fill=\"#E3F2FD\"\/>\n                    <text x=\"200\" y=\"25\" text-anchor=\"middle\" font-size=\"12\" fill=\"#1565C0\" font-weight=\"bold\">\ud83d\ude97 SYST\u00c8MES D&rsquo;ALERTE<\/text>\n                    <!-- Car with sensors -->\n                    <rect x=\"100\" y=\"100\" width=\"200\" height=\"60\" rx=\"10\" fill=\"#5C6BC0\"\/>\n                    <rect x=\"130\" y=\"75\" width=\"140\" height=\"35\" rx=\"8\" fill=\"#7986CB\"\/>\n                    <rect x=\"140\" y=\"82\" width=\"45\" height=\"22\" rx=\"3\" fill=\"#E8EAF6\" opacity=\"0.8\"\/>\n                    <rect x=\"215\" y=\"82\" width=\"45\" height=\"22\" rx=\"3\" fill=\"#E8EAF6\" opacity=\"0.8\"\/>\n                    <circle cx=\"130\" cy=\"160\" r=\"15\" fill=\"#263238\"\/>\n                    <circle cx=\"130\" cy=\"160\" r=\"7\" fill=\"#5C6BC0\"\/>\n                    <circle cx=\"270\" cy=\"160\" r=\"15\" fill=\"#263238\"\/>\n                    <circle cx=\"270\" cy=\"160\" r=\"7\" fill=\"#5C6BC0\"\/>\n                    <!-- Sensors waves -->\n                    <path d=\"M 100 130 Q 70 130 50 120\" stroke=\"#42A5F5\" stroke-width=\"2\" fill=\"none\" opacity=\"0.8\"\/>\n                    <path d=\"M 100 130 Q 60 130 30 125\" stroke=\"#42A5F5\" stroke-width=\"2\" fill=\"none\" opacity=\"0.6\"\/>\n                    <path d=\"M 300 130 Q 330 130 350 120\" stroke=\"#42A5F5\" stroke-width=\"2\" fill=\"none\" opacity=\"0.8\"\/>\n                    <path d=\"M 300 130 Q 340 130 370 125\" stroke=\"#42A5F5\" stroke-width=\"2\" fill=\"none\" opacity=\"0.6\"\/>\n                    <!-- Camera icon -->\n                    <circle cx=\"200\" cy=\"50\" r=\"15\" fill=\"#42A5F5\"\/>\n                    <circle cx=\"200\" cy=\"50\" r=\"8\" fill=\"white\"\/>\n                    <circle cx=\"200\" cy=\"50\" r=\"4\" fill=\"#42A5F5\"\/>\n                    <!-- Alert symbol -->\n                    <g transform=\"translate(180, 180)\">\n                        <polygon points=\"20,0 40,35 0,35\" fill=\"#FFB74D\" stroke=\"#E65100\" stroke-width=\"2\"\/>\n                        <text x=\"20\" y=\"28\" text-anchor=\"middle\" font-size=\"18\" font-weight=\"bold\" fill=\"#E65100\">!<\/text>\n                    <\/g>\n                    <text x=\"200\" y=\"230\" text-anchor=\"middle\" font-size=\"9\" fill=\"#1565C0\" font-weight=\"bold\">AFIL \/ DAS \/ Camera embarqu\u00e9e<\/text>\n                <\/svg>\n                <div class=\"caption\">\n                    <h4>\ud83d\ude97 Technologies embarqu\u00e9es<\/h4>\n                    <p>AFIL, DAS et cam\u00e9ras d\u00e9tectent les signes d&rsquo;hypovigilance.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<footer>\n    <div class=\"footer-content\">\n        <div class=\"footer-about\">\n            <h3>SomnoVigilance<\/h3>\n            <p>Centre de ressources d\u00e9di\u00e9 \u00e0 la compr\u00e9hension, au d\u00e9pistage et \u00e0 la pr\u00e9vention de la somnolence au volant.<\/p>\n            <p style=\"margin-top:1rem;font-size:0.8rem;opacity:0.85;\">\u26a0\ufe0f Ce site est \u00e0 vis\u00e9e informative et ne remplace pas une consultation m\u00e9dicale.<\/p>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Navigation<\/h4>\n            <ul>\n                <li><a href=\"index.html\">Les causes<\/a><\/li>\n                <li><a href=\"consequences.html\">Les cons\u00e9quences<\/a><\/li>\n                <li><a href=\"depistage.html\">Le d\u00e9pistage<\/a><\/li>\n                <li><a href=\"traitements.html\">Les traitements<\/a><\/li>\n                <li><a href=\"drogues.html\">Drogues &#038; Conduite<\/a><\/li>\n                <li><a href=\"prevention.html\">La pr\u00e9vention<\/a><\/li>\n                <li><a href=\"etudes.html\">\u00c9tudes<\/a><\/li>\n                <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n            <\/ul>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Ressources utiles<\/h4>\n            <ul>\n                <li><a href=\"#\">S\u00e9curit\u00e9 Routi\u00e8re<\/a><\/li>\n                <li><a href=\"#\">INSERM<\/a><\/li>\n                <li><a href=\"#\">SFRMS<\/a><\/li>\n                <li><a href=\"#\">MILDECA<\/a><\/li>\n                <li><a href=\"#\">OFDT<\/a><\/li>\n                <li><a href=\"#\">Drogues Info Service<\/a><\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n    <div class=\"footer-bottom\">\n        <p>\u00a9 2026 SomnoVigilance \u2014 Derni\u00e8re mise \u00e0 jour : Octobre 2026<\/p>\n    <\/div>\n<\/footer>\n\n<script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u00c9tudes scientifiques sur la somnolence \u2014 SomnoVigilance<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/inter@5.0.8\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/playfair-display@5.0.12\/index.min.css\">\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n<div class=\"scroll-progress\" id=\"scrollProgress\"><\/div>\n\n<nav>\n    <div class=\"nav-inner\">\n        <a href=\"index.html\" class=\"logo\">\n            <svg viewBox=\"0 0 32 32\" fill=\"none\">\n                <circle cx=\"16\" cy=\"16\" r=\"14\" stroke=\"#5C6BC0\" stroke-width=\"2.5\"\/>\n                <path d=\"M10 20c0-3.3 2.7-6 6-6s6 2.7 6 6\" stroke=\"#5C6BC0\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                <circle cx=\"12\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <circle cx=\"20\" cy=\"13\" r=\"1.5\" fill=\"#5C6BC0\"\/>\n                <path d=\"M8 11c1-2 3-3 4-3M24 11c-1-2-3-3-4-3\" stroke=\"#ff6f00\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n            <\/svg>\n            SomnoVigilance\n        <\/a>\n        <ul id=\"navMenu\">\n            <li><a href=\"index.html\">Causes<\/a><\/li>\n            <li><a href=\"consequences.html\">Cons\u00e9quences<\/a><\/li>\n            <li><a href=\"depistage.html\">D\u00e9pistage<\/a><\/li>\n            <li><a href=\"traitements.html\">Traitements<\/a><\/li>\n            <li><a href=\"drogues.html\">Drogues<\/a><\/li>\n            <li><a href=\"prevention.html\">Pr\u00e9vention<\/a><\/li>\n            <li><a href=\"etudes.html\" class=\"active\">\u00c9tudes<\/a><\/li>\n            <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n        <\/ul>\n        <button class=\"mobile-toggle\" onclick=\"document.getElementById('navMenu').classList.toggle('open')\">\n            <span><\/span><span><\/span><span><\/span>\n        <\/button>\n    <\/div>\n<\/nav>\n\n<section class=\"hero hero-etudes\">\n    <div class=\"hero-content\">\n        <div class=\"hero-text\">\n            <div class=\"badge\">\ud83d\udd2c Recherche scientifique<\/div>\n            <h1>Publications <span>Scientifiques<\/span><\/h1>\n            <p>S\u00e9lection des \u00e9tudes et rapports de r\u00e9f\u00e9rence sur la somnolence au volant.<\/p>\n            <div style=\"display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;\">\n                <a href=\"bibliographie.html\" class=\"btn-primary\">Bibliographie compl\u00e8te \u2192<\/a>\n                <a href=\"drogues.html\" class=\"btn-outline\">Drogues &#038; Conduite<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section id=\"publications\">\n    <div class=\"container\">\n        <div class=\"section-header fade-in\">\n            <span class=\"tag\">Recherche<\/span>\n            <h2>\u00c9tudes de r\u00e9f\u00e9rence<\/h2>\n            <p>Les publications majeures qui ont fait avancer la connaissance sur la somnolence au volant.<\/p>\n        <\/div>\n\n        <!-- NOUVELLE ILLUSTRATION : M\u00e9thodologie scientifique -->\n        <div class=\"full-illustration fade-in\">\n            <svg viewBox=\"0 0 1000 280\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <defs>\n                    <linearGradient id=\"studyBg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n                        <stop offset=\"0%\" stop-color=\"#FFF8E1\"\/>\n                        <stop offset=\"50%\" stop-color=\"#FFECB3\"\/>\n                        <stop offset=\"100%\" stop-color=\"#FFE082\"\/>\n                    <\/linearGradient>\n                <\/defs>\n                <rect width=\"1000\" height=\"280\" fill=\"url(#studyBg)\"\/>\n                \n                <text x=\"500\" y=\"30\" text-anchor=\"middle\" font-size=\"16\" fill=\"#E65100\" font-weight=\"bold\">\ud83d\udd2c M\u00c9THODOLOGIE DES \u00c9TUDES<\/text>\n                \n                <!-- Epidemiology -->\n                <g transform=\"translate(30, 60)\">\n                    <rect width=\"200\" height=\"180\" rx=\"15\" fill=\"white\" opacity=\"0.95\"\/>\n                    <circle cx=\"100\" cy=\"45\" r=\"25\" fill=\"#FFA726\"\/>\n                    <text x=\"100\" y=\"52\" text-anchor=\"middle\" font-size=\"20\" fill=\"white\" font-weight=\"bold\">\ud83d\udc65<\/text>\n                    <text x=\"100\" y=\"90\" text-anchor=\"middle\" font-size=\"11\" fill=\"#E65100\" font-weight=\"bold\">\u00c9PID\u00c9MIOLOGIE<\/text>\n                    <text x=\"100\" y=\"115\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">Grandes cohortes<\/text>\n                    <text x=\"100\" y=\"130\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">N = 4 888 \u00e0 60 000<\/text>\n                    <text x=\"100\" y=\"150\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">Population g\u00e9n\u00e9rale<\/text>\n                    <text x=\"100\" y=\"170\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">Facteurs de risque<\/text>\n                <\/g>\n                \n                <!-- Clinical -->\n                <g transform=\"translate(270, 60)\">\n                    <rect width=\"200\" height=\"180\" rx=\"15\" fill=\"white\" opacity=\"0.95\"\/>\n                    <circle cx=\"100\" cy=\"45\" r=\"25\" fill=\"#5C6BC0\"\/>\n                    <text x=\"100\" y=\"52\" text-anchor=\"middle\" font-size=\"20\" fill=\"white\" font-weight=\"bold\">\ud83c\udfe5<\/text>\n                    <text x=\"100\" y=\"90\" text-anchor=\"middle\" font-size=\"11\" fill=\"#5C6BC0\" font-weight=\"bold\">ESSAIS CLINIQUES<\/text>\n                    <text x=\"100\" y=\"115\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">Simulateur valid\u00e9<\/text>\n                    <text x=\"100\" y=\"130\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">Mesures objectives<\/text>\n                    <text x=\"100\" y=\"150\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">TILE, TME, OSLER<\/text>\n                    <text x=\"100\" y=\"170\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">Randomis\u00e9s contr\u00f4l\u00e9s<\/text>\n                <\/g>\n                \n                <!-- Meta-analysis -->\n                <g transform=\"translate(510, 60)\">\n                    <rect width=\"200\" height=\"180\" rx=\"15\" fill=\"white\" opacity=\"0.95\"\/>\n                    <circle cx=\"100\" cy=\"45\" r=\"25\" fill=\"#66BB6A\"\/>\n                    <text x=\"100\" y=\"52\" text-anchor=\"middle\" font-size=\"20\" fill=\"white\" font-weight=\"bold\">\ud83d\udcca<\/text>\n                    <text x=\"100\" y=\"90\" text-anchor=\"middle\" font-size=\"11\" fill=\"#2e7d32\" font-weight=\"bold\">M\u00c9TA-ANALYSES<\/text>\n                    <text x=\"100\" y=\"115\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">Synth\u00e8se des preuves<\/text>\n                    <text x=\"100\" y=\"130\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">12 \u00e0 35 \u00e9tudes<\/text>\n                    <text x=\"100\" y=\"150\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">Niveau de preuve<\/text>\n                    <text x=\"100\" y=\"170\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">\u00e9lev\u00e9 (grade A)<\/text>\n                <\/g>\n                \n                <!-- Official reports -->\n                <g transform=\"translate(750, 60)\">\n                    <rect width=\"220\" height=\"180\" rx=\"15\" fill=\"white\" opacity=\"0.95\"\/>\n                    <circle cx=\"110\" cy=\"45\" r=\"25\" fill=\"#EC407A\"\/>\n                    <text x=\"110\" y=\"52\" text-anchor=\"middle\" font-size=\"20\" fill=\"white\" font-weight=\"bold\">\ud83d\udccb<\/text>\n                    <text x=\"110\" y=\"90\" text-anchor=\"middle\" font-size=\"11\" fill=\"#C2185B\" font-weight=\"bold\">RAPPORTS OFFICIELS<\/text>\n                    <text x=\"110\" y=\"115\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">INSERM, ONISR<\/text>\n                    <text x=\"110\" y=\"130\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">ANSM, OFDT<\/text>\n                    <text x=\"110\" y=\"150\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">Recommandations<\/text>\n                    <text x=\"110\" y=\"170\" text-anchor=\"middle\" font-size=\"9\" fill=\"#455A64\">politiques publiques<\/text>\n                <\/g>\n            <\/svg>\n        <\/div>\n\n        <div class=\"pub-grid fade-in\">\n            <div class=\"pub-card\">\n                <span class=\"pub-type etude\">\u00c9tude \u00e9pid\u00e9miologique<\/span>\n                <h3>Pr\u00e9valence de la somnolence au volant dans la population fran\u00e7aise adulte<\/h3>\n                <p class=\"authors\">Philip P., Sagaspe P., Moore N., et al.<\/p>\n                <p class=\"journal\">BMJ &#8211; British Medical Journal, 278(7199)<\/p>\n                <p class=\"abstract\">\u00c9tude montrant que 31,5% des conducteurs ont d\u00e9j\u00e0 somnol\u00e9 au volant au moins une fois dans l&rsquo;ann\u00e9e.<\/p>\n                <span class=\"year\">2001 \u2022 N=4 888 conducteurs<\/span>\n            <\/div>\n            <div class=\"pub-card\">\n                <span class=\"pub-type rapport\">Rapport officiel<\/span>\n                <h3>Sommeil et conduite automobile \u2014 Rapport INSERM<\/h3>\n                <p class=\"authors\">Expertise collective INSERM<\/p>\n                <p class=\"journal\">Les \u00e9ditions INSERM, Paris<\/p>\n                <p class=\"abstract\">Rapport complet analysant les m\u00e9canismes physiopathologiques et les recommandations pour le d\u00e9pistage.<\/p>\n                <span class=\"year\">2019 \u2022 Synth\u00e8se de 250+ \u00e9tudes<\/span>\n            <\/div>\n            <div class=\"pub-card\">\n                <span class=\"pub-type revue\">Revue syst\u00e9matique<\/span>\n                <h3>Obstructive Sleep Apnea and Motor Vehicle Accidents: Meta-Analysis<\/h3>\n                <p class=\"authors\">Sassani A., Findley L.J., Kryger M.H., et al.<\/p>\n                <p class=\"journal\">Sleep, 26(3), 281-284<\/p>\n                <p class=\"abstract\">M\u00e9ta-analyse d\u00e9montrant que les patients SAOS ont un risque multipli\u00e9 par 2 \u00e0 7 d&rsquo;accident.<\/p>\n                <span class=\"year\">2003 \u2022 12 \u00e9tudes incluses<\/span>\n            <\/div>\n            <div class=\"pub-card\">\n                <span class=\"pub-type etude\">\u00c9tude clinique<\/span>\n                <h3>Efficacit\u00e9 de la PPC sur le risque d&rsquo;accidents chez les conducteurs avec SAOS<\/h3>\n                <p class=\"authors\">Tregear S., Reston J., Schoelles K., Phillips B.<\/p>\n                <p class=\"journal\">Journal of Clinical Sleep Medicine, 5(6)<\/p>\n                <p class=\"abstract\">Le traitement par PPC r\u00e9duit significativement le taux d&rsquo;accidents chez les patients apn\u00e9iques.<\/p>\n                <span class=\"year\">2009 \u2022 5 \u00e9tudes, n=1 507 patients<\/span>\n            <\/div>\n            <div class=\"pub-card\">\n                <span class=\"pub-type etude\">\u00c9tude exp\u00e9rimentale<\/span>\n                <h3>Effets de la privation de sommeil sur la performance de conduite simul\u00e9e<\/h3>\n                <p class=\"authors\">Philip P., Sagaspe P., Lagarde E., et al.<\/p>\n                <p class=\"journal\">Sleep, 35(6), 851-856<\/p>\n                <p class=\"abstract\">Apr\u00e8s 24h de veille, performances \u00e9quivalentes \u00e0 0,8-1,0 g\/L d&rsquo;alcool\u00e9mie.<\/p>\n                <span class=\"year\">2012 \u2022 n=69 sujets<\/span>\n            <\/div>\n            <div class=\"pub-card\">\n                <span class=\"pub-type rapport\">Rapport S\u00e9curit\u00e9 Routi\u00e8re<\/span>\n                <h3>Fatigue et somnolence au volant \u2014 Analyse des accidents<\/h3>\n                <p class=\"authors\">Observatoire National Interminist\u00e9riel de la S\u00e9curit\u00e9 Routi\u00e8re<\/p>\n                <p class=\"journal\">Rapport annuel, Minist\u00e8re de l&rsquo;Int\u00e9rieur<\/p>\n                <p class=\"abstract\">La somnolence est impliqu\u00e9e dans 20% des accidents mortels sur autoroute.<\/p>\n                <span class=\"year\">2023 \u2022 Donn\u00e9es nationales<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<footer>\n    <div class=\"footer-content\">\n        <div class=\"footer-about\">\n            <h3>SomnoVigilance<\/h3>\n            <p>Centre de ressources d\u00e9di\u00e9 \u00e0 la compr\u00e9hension, au d\u00e9pistage et \u00e0 la pr\u00e9vention de la somnolence au volant.<\/p>\n            <p style=\"margin-top:1rem;font-size:0.8rem;opacity:0.85;\">\u26a0\ufe0f Ce site est \u00e0 vis\u00e9e informative et ne remplace pas une consultation m\u00e9dicale.<\/p>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Navigation<\/h4>\n            <ul>\n                <li><a href=\"index.html\">Les causes<\/a><\/li>\n                <li><a href=\"consequences.html\">Les cons\u00e9quences<\/a><\/li>\n                <li><a href=\"depistage.html\">Le d\u00e9pistage<\/a><\/li>\n                <li><a href=\"traitements.html\">Les traitements<\/a><\/li>\n                <li><a href=\"drogues.html\">Drogues &#038; Conduite<\/a><\/li>\n                <li><a href=\"prevention.html\">La pr\u00e9vention<\/a><\/li>\n                <li><a href=\"etudes.html\">\u00c9tudes<\/a><\/li>\n                <li><a href=\"bibliographie.html\">Bibliographie<\/a><\/li>\n            <\/ul>\n        <\/div>\n        <div class=\"footer-links\">\n            <h4>Ressources utiles<\/h4>\n            <ul>\n                <li><a href=\"#\">S\u00e9curit\u00e9 Routi\u00e8re<\/a><\/li>\n                <li><a href=\"#\">INSERM<\/a><\/li>\n                <li><a href=\"#\">SFRMS<\/a><\/li>\n                <li><a href=\"#\">MILDECA<\/a><\/li>\n                <li><a href=\"#\">OFDT<\/a><\/li>\n                <li><a href=\"#\">Drogues Info Service<\/a><\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n    <div class=\"footer-bottom\">\n        <p>\u00a9 2026 SomnoVigilance \u2014 Derni\u00e8re mise \u00e0 jour : Octobre 2026<\/p>\n    <\/div>\n<\/footer>\n\n<script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n\n\n              <script>\n                              \n              <\/script>\n                        <\/body>\n                        <\/html>\n","protected":false},"excerpt":{"rendered":"<p>Les causes de la somnolence au volant \u2014 SomnoVigilance SomnoVigilance Causes Cons\u00e9quences D\u00e9pistage Traitements Drogues Pr\u00e9vention \u00c9tudes Bibliographie \u26a0\ufe0f Sant\u00e9 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/simplifions.org\/index.php\/wp-json\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simplifions.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/simplifions.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/simplifions.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simplifions.org\/index.php\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":1,"href":"https:\/\/simplifions.org\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":30,"href":"https:\/\/simplifions.org\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions\/30"}],"wp:attachment":[{"href":"https:\/\/simplifions.org\/index.php\/wp-json\/wp\/v2\/media?parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}