:root{--bg:#0b1220;--nav:#0f172a;--card:#111827;--line:#263449;--txt:#e5e7eb;--muted:#9ca3af;--blue:#38bdf8;--green:#34d399;--yellow:#fbbf24}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{min-height:100%;margin:0}body{background:var(--bg);color:var(--txt);font:16px/1.62 "Segoe UI",Arial,sans-serif}
.shell{display:grid;grid-template-columns:325px minmax(0,1fr);height:100vh}
aside{overflow:auto;background:var(--nav);border-right:1px solid var(--line);padding:22px 16px}
main.frame{min-width:0;height:100vh}.brand{font-size:1.28rem;font-weight:800}.sub{color:var(--muted);font-size:.88rem;margin:3px 0 18px}
nav a{display:block;color:#cbd5e1;text-decoration:none;padding:5px 9px;border-radius:6px}nav a:hover,nav a.active{background:#172033;color:white}
nav .chapter{font-weight:800;color:white;margin-top:10px}.l2{padding-left:22px;font-size:.91rem}.l3{padding-left:40px;font-size:.85rem}
#viewer{width:100%;height:100%;border:0;background:var(--bg)}
.page,.wrap{max-width:1050px;margin:auto;padding:38px 50px 90px}.hero{background:#101d30;border-bottom:1px solid var(--line);padding:38px 0 12px}.hero .wrap{padding-top:0;padding-bottom:0}.hero h1{margin:5px 0 10px}.hero p{color:#cbd5e1;max-width:800px}.tag,.k{color:var(--blue);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
body> .wrap main, .wrap>main{background:transparent;border:0;box-shadow:none;padding:0;margin:0}
h1{font-size:2.3rem;line-height:1.15}h2{margin-top:48px;border-bottom:1px solid var(--line);padding-bottom:7px;color:#e5e7eb}h3{margin-top:32px;color:#dbeafe}h4{margin-top:24px;color:#cbd5e1}
p,li{max-width:90ch}a{color:#7dd3fc}
.box,.note,.warn,.correction{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 17px;margin:17px 0}.note{border-left:4px solid var(--green)}.warn,.correction{border-left:4px solid var(--yellow)}
pre{background:#070d18;border:1px solid var(--line);border-radius:9px;padding:15px;overflow:auto;color:#d1fae5}code{font-family:Consolas,monospace}:not(pre)>code{background:#172033;color:#bae6fd;padding:2px 5px;border-radius:4px}
table{border-collapse:collapse;width:100%;margin:18px 0;background:var(--card)}th,td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}th{background:#172033}
.diagram{display:flex;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0}.diagram .box{margin:0}.arrow{color:#7dd3fc;font-size:1.3em}
.page .diagram{background:#070d18;border:1px solid var(--line);border-radius:9px;padding:15px;color:#dbeafe}
body> .wrap>main>nav{background:#101827;border:1px solid var(--line);border-radius:10px;padding:18px 22px}body> .wrap>main>nav h2{margin-top:0;border:0}body> .wrap>main>nav ol{padding-left:1.4em}
footer{color:var(--muted);padding:30px 0;font-size:.9em}
@media(max-width:850px){.shell{grid-template-columns:250px minmax(0,1fr)}.page,.wrap{padding:28px 24px}}

/* Architecture locale sans serveur */
.local-shell{display:grid;grid-template-columns:325px minmax(0,1fr);height:calc(100vh - 76px);overflow:hidden}
.local-shell .toc-frame,.local-shell .content-frame{width:100%;height:100%;border:0}
.local-shell .toc-frame{background:var(--nav);border-right:1px solid var(--line)}
.local-shell .content-frame{background:var(--bg)}
.toc-page nav a{display:block;color:#cbd5e1;text-decoration:none;padding:5px 9px;border-radius:6px}
.toc-page nav a:hover,.toc-page nav a.active{background:#172033;color:white}
.toc-page nav .chapter{font-weight:800;color:white;margin-top:10px}
.toc-page nav .l2{padding-left:22px;font-size:.91rem}
.toc-page nav .l3{padding-left:40px;font-size:.85rem}
@media(max-width:850px){.local-shell{grid-template-columns:250px minmax(0,1fr)}}


/* Illustrations du cours
   Les images ne dépassent jamais la largeur de leur conteneur
   et conservent automatiquement leurs proportions. */
img,
.illustration img {
  max-width: 100%;
  height: auto;
}

.illustration {
  max-width: 100%;
  margin: 24px auto;
  text-align: center;
}

.illustration img {
  display: block;
  margin: 0 auto;
}

/* Accueil des modules */
.modules-frame{display:block;width:100%;height:100vh;border:0}
.modules-home{max-width:880px;margin:0 auto;padding:64px 28px}
.modules-home h1{margin:8px 0}.modules-home .sub{font-size:1rem;margin-bottom:32px}
.module-list{display:grid;gap:14px}.module-card{display:flex;gap:20px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;color:var(--txt);text-decoration:none}
.module-card:hover,.module-card:focus-visible{border-color:var(--blue);background:#172033}
.module-card strong,.module-card small{display:block}.module-card small{color:var(--muted);margin-top:4px}
.module-card>span:last-child{margin-left:auto;color:var(--blue)}.module-number{font-weight:800;color:var(--blue);font-size:1.3rem}
.all-modules{display:inline-block;margin-bottom:18px;color:var(--blue);text-decoration:none}
.back-modules{position:absolute;right:16px;top:10px;z-index:1;font-size:.8rem;color:var(--blue);text-decoration:none}

/* En-tête du module */
.module-header{height:76px;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--nav);border-bottom:1px solid var(--line)}
.module-identity{display:flex;align-items:center;gap:13px;min-width:0}.module-logo{width:48px;height:48px;flex:none}
.module-eyebrow{display:block;color:var(--blue);font-size:.75rem;font-weight:700;line-height:1.3}
.module-header h1{font-size:1.25rem;line-height:1.25;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modules-button{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:9px 15px;border:1px solid var(--line);border-radius:8px;color:var(--txt);text-decoration:none;font-size:.9rem;font-weight:600}
.modules-button:hover,.modules-button:focus-visible{border-color:var(--blue);background:#172033}
@media(max-width:600px){.module-header{padding:10px 12px}.module-logo{width:38px;height:38px}.module-header h1{font-size:1rem}.modules-button{font-size:.8rem;padding:8px}.local-shell{grid-template-columns:180px minmax(0,1fr)}}

.osi-figure{max-width:760px;margin:20px 0}.osi-figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px}.osi-figure figcaption{color:var(--muted);font-size:.85rem;margin-top:8px}

/* Sommaire visuel sur l’accueil des modules */
.module-summary a{color:var(--blue);text-decoration:none}.module-summary a:hover,.module-summary a:focus-visible{text-decoration:underline}.module-summary td:first-child{width:38%}.module-summary tbody tr:hover{background:#172033}


/* Navigation accordéon harmonisée */
.toc-page{padding:14px 10px!important;overflow-y:auto}
.toc-page #nav{display:flex;flex-direction:column;gap:6px}
.toc-page .toc-module-title{display:block!important;font-weight:800!important;color:#fff!important;padding:9px 10px!important;margin:0 0 4px!important;border-radius:8px;background:rgba(255,255,255,.06)}
.toc-page details{margin:0}
.toc-page summary{cursor:pointer;list-style:none;user-select:none}
.toc-page summary::-webkit-details-marker{display:none}
.toc-page .toc-section>summary{position:relative;font-weight:800;color:#fff;padding:9px 30px 9px 10px;border-radius:8px;background:rgba(255,255,255,.045)}
.toc-page .toc-section>summary::after,.toc-page .toc-chapter>summary::after{content:"›";position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:transform .15s ease;color:#94a3b8}
.toc-page .toc-section[open]>summary::after,.toc-page .toc-chapter[open]>summary::after{transform:translateY(-50%) rotate(90deg)}
.toc-page .toc-items{padding:4px 0 5px 8px}
.toc-page .toc-item{font-size:.91rem}
.toc-page .toc-chapter{margin:3px 0}
.toc-page .toc-chapter>summary{position:relative;padding-right:28px;border-radius:7px}
.toc-page .toc-chapter>summary:hover{background:#172033}
.toc-page .toc-chapter-link{font-weight:700!important;color:#e2e8f0!important;margin:0!important;padding:7px 9px!important}
.toc-page .toc-chapter-items{padding:2px 0 5px}
.toc-page .toc-chapter-items .l2{padding-left:22px}
.toc-page .toc-chapter-items .l3{padding-left:38px}
.toc-page nav a.active{background:#263449!important;color:#fff!important;box-shadow:inset 3px 0 0 #38bdf8}
.toc-page .toc-section:has(a.active)>summary,.toc-page .toc-chapter:has(a.active)>summary{background:#172033;color:#fff}

/* Recherche globale et organisation par sprint */
.search-box{position:relative;margin:22px 0 30px;max-width:900px}
.search-controls{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:10px}
.search-controls input,.search-controls select{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;font:inherit;color:#0f172a}
.search-controls input:focus,.search-controls select:focus{outline:2px solid #38bdf8;outline-offset:1px}
.search-results{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.16);max-height:430px;overflow:auto}
.search-result{display:block;padding:10px 14px;text-decoration:none;color:#0f172a;border-bottom:1px solid #e2e8f0}
.search-result:last-child{border-bottom:0}.search-result:hover{background:#f1f5f9}.search-result strong{display:block}.search-result small{display:block;margin-top:3px;color:#64748b}.search-empty{padding:12px 14px;color:#64748b}
.sprint-section{margin:12px 0 34px}.sprint-section>h2{margin-bottom:12px}
@media(max-width:650px){.search-controls{grid-template-columns:1fr}}

/* Repère permanent : page/chapitre actuellement affiché */
.current-page{min-width:0;flex:1;padding-left:18px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.current-page-label{color:var(--muted);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.current-page-title{display:block;max-width:52vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.95rem;color:var(--text)}
@media(max-width:760px){.current-page{padding-left:10px}.current-page-label{display:none}.current-page-title{max-width:35vw;font-size:.82rem}}