/* ============================================================
   STYLE.CSS — Maîtrisez le Cloud Native & autres cours
   Réutilisable : PHP, Python, React, etc.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg:            #fafaf8;
  --bg-sidebar:    #ffffff;
  --bg-header:     #ffffff;
  --bg-code:       #f6f8fa;
  --bg-code-bar:   #1e2329;
  --bg-hover:      #f3f4f6;
  --bg-active:     #eff6ff;
  --text-main:     #181715;
  --text-sec:      #46443f;
  --text-ter:      #88857d;
  --text-inv:      #ffffff;
  --text-muted:    #9ca3af;
  --accent:        #1d3557;
  --accent2:       #2667b0;
  --accent-light:  #e8f0fb;
  --accent-hover:  #1a4a8a;
  --border:        #dddbd4;
  --border-light:  #eeecea;
  --info-bg:       #eff6ff;
  --info-border:   #2667b0;
  --info-text:     #1e40af;
  --warn-bg:       #fffbeb;
  --warn-border:   #d97706;
  --warn-text:     #92400e;
  --danger-bg:     #fff1f2;
  --danger-border: #dc2626;
  --danger-text:   #991b1b;
  --success-bg:    #f0fdf4;
  --success-border:#16a34a;
  --success-text:  #14532d;
  --exercise-bg:   #fffbeb;
  --exercise-border:#d97706;
  --projet-bg:     #f0fdf4;
  --projet-border: #16a34a;
  --font-body:     'DM Sans', sans-serif;
  --font-title:    'Lora', serif;
  --font-code:     'JetBrains Mono', monospace;
  --sidebar-w:     280px;
  --header-h:      58px;
  --menu-tech-h:   50px;
  --toc-w:         220px;
  --radius:        6px;
  --radius-sm:     4px;
  --shadow:        0 1px 3px rgba(0,0,0,.08);
  --shadow-md:     0 4px 6px rgba(0,0,0,.07);
  --transition:    all .2s ease;
  --font-size-base:15px;
  --progress-h:    3px;
}

[data-theme="dark"] {
  --bg:            #18181b;
  --bg-sidebar:    #1f1f23;
  --bg-header:     #1f1f23;
  --bg-code:       #27272a;
  --bg-code-bar:   #111113;
  --bg-hover:      #27272a;
  --bg-active:     #1e3a5f;
  --text-main:     #f4f4f5;
  --text-sec:      #a1a1aa;
  --text-ter:      #71717a;
  --text-muted:    #52525b;
  --accent:        #60a5fa;
  --accent2:       #3b82f6;
  --accent-light:  #1e3a5f;
  --accent-hover:  #2563eb;
  --border:        #3f3f46;
  --border-light:  #27272a;
  --info-bg:       #172554;
  --info-border:   #3b82f6;
  --info-text:     #93c5fd;
  --warn-bg:       #422006;
  --warn-border:   #f59e0b;
  --warn-text:     #fcd34d;
  --danger-bg:     #450a0a;
  --danger-border: #ef4444;
  --danger-text:   #fca5a5;
  --success-bg:    #052e16;
  --success-border:#22c55e;
  --success-text:  #86efac;
  --exercise-bg:   #422006;
  --exercise-border:#f59e0b;
  --projet-bg:     #052e16;
  --projet-border: #22c55e;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--font-size-base);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--bg);color:var(--text-main);line-height:1.7;overflow-x:hidden;transition:background .25s,color .25s}

#progress-bar{position:fixed;top:var(--menu-tech-h);left:0;height:var(--progress-h);background:var(--accent2);z-index:2000;transition:width .3s ease;border-radius:0 2px 2px 0}

#header{position:fixed;top:calc(var(--menu-tech-h) + var(--progress-h));left:0;right:0;height:var(--header-h);background:var(--bg-header);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 18px 0 14px;z-index:1000;box-shadow:var(--shadow);transition:background .25s,border-color .25s}
#hamburger{background:none;border:none;cursor:pointer;padding:6px;border-radius:var(--radius-sm);color:var(--text-sec);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition)}
#hamburger:hover{background:var(--bg-hover);color:var(--accent)}
#hamburger svg{width:20px;height:20px}
.header-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.header-badge{background:var(--accent);color:#fff;font-size:0.733rem;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:var(--radius-sm);white-space:nowrap}
[data-theme="dark"] .header-badge{background:var(--accent2)}
.header-titles{display:flex;flex-direction:column;line-height:1.2}
.header-title{font-size:0.9rem;font-weight:700;color:var(--text-main);white-space:nowrap}
.header-subtitle{font-size:0.733rem;color:var(--text-ter);white-space:nowrap}
#breadcrumb{display:flex;align-items:center;gap:6px;font-size:0.8rem;color:var(--text-ter);margin-left:4px;flex-shrink:0}
#breadcrumb strong{color:var(--text-sec);font-weight:500}
.breadcrumb-sep{opacity:.4}
.header-pills{display:flex;gap:6px;flex-wrap:wrap;margin-left:2px}
.pill{font-size:0.733rem;font-weight:500;padding:2px 8px;border-radius:20px;border:1px solid var(--border);color:var(--text-sec);background:var(--bg);white-space:nowrap}
.header-spacer{flex:1}
.header-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
.font-size-controls{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.font-size-btn{background:none;border:none;cursor:pointer;padding:5px 10px;font-size:0.867rem;font-weight:700;color:var(--text-sec);font-family:var(--font-body);transition:var(--transition);line-height:1}
.font-size-btn:hover{background:var(--bg-hover);color:var(--accent)}
.font-size-sep{width:1px;height:16px;background:var(--border)}
.font-select{font-size:0.733rem;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 6px;color:var(--text-sec);background:var(--bg);cursor:pointer;font-family:var(--font-body);transition:var(--transition)}
.icon-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:6px 8px;color:var(--text-sec);display:flex;align-items:center;justify-content:center;transition:var(--transition);font-size:0.933rem;line-height:1}
.icon-btn:hover{background:var(--bg-hover);color:var(--text-main)}
.icon-btn.active{background:var(--accent-light);color:var(--accent);border-color:var(--accent2)}
.btn-export{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:7px 14px;font-size:0.833rem;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:var(--transition);white-space:nowrap;display:flex;align-items:center;gap:6px}
.btn-export:hover{background:var(--accent-hover)}
[data-theme="dark"] .btn-export{background:var(--accent2)}

#layout{display:flex;margin-top:calc(var(--menu-tech-h) + var(--progress-h) + var(--header-h));min-height:calc(100vh - var(--header-h) - var(--progress-h))}

#sidebar{width:var(--sidebar-w);background:var(--bg-sidebar);border-right:1px solid var(--border);position:fixed;top:calc(var(--menu-tech-h) + var(--progress-h) + var(--header-h));left:0;bottom:0;overflow-y:auto;overflow-x:hidden;z-index:900;transition:transform .25s ease,background .25s,border-color .25s;display:flex;flex-direction:column}
#sidebar.closed{transform:translateX(calc(-1 * var(--sidebar-w)))}
#sidebar::-webkit-scrollbar{width:4px}
#sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.sidebar-search{padding:12px 14px;border-bottom:1px solid var(--border-light);position:sticky;top:0;background:var(--bg-sidebar);z-index:10}
.sidebar-search input{width:100%;padding:7px 10px 7px 32px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:0.833rem;font-family:var(--font-body);color:var(--text-main);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2388857d' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 9px center;transition:var(--transition)}
.sidebar-search input:focus{outline:none;border-color:var(--accent2)}
.sidebar-progress{padding:8px 14px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;gap:8px;position:sticky;top:48px;background:var(--bg-sidebar);z-index:9}
.sidebar-progress-bar{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.sidebar-progress-fill{height:100%;background:var(--accent2);border-radius:2px;transition:width .4s ease}
.sidebar-progress-text{font-size:0.733rem;color:var(--text-ter);white-space:nowrap;font-weight:500}
.sidebar-nav{padding:6px 0 32px;flex:1}
.chapter-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;cursor:pointer;font-size:0.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-ter);transition:var(--transition);user-select:none}
.chapter-header:hover{color:var(--accent);background:var(--bg-hover)}
.chapter-arrow{font-size:0.667rem;transition:transform .2s ease}
.chapter-header.open .chapter-arrow{transform:rotate(180deg)}
.chapter-items{display:none;padding:2px 0}
.chapter-items.open{display:block}
.nav-item{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 18px;cursor:pointer;font-size:0.833rem;color:var(--text-sec);transition:var(--transition);border-left:2px solid transparent;text-decoration:none;line-height:1.4}
.nav-item:hover{background:var(--bg-hover);color:var(--text-main)}
.nav-item.active{background:var(--bg-active);color:var(--accent);border-left-color:var(--accent2);font-weight:600}
.nav-item.active .nav-badge{background:var(--accent);color:#fff}
.nav-badge{font-size:0.633rem;font-weight:700;padding:1px 5px;border-radius:3px;background:var(--border-light);color:var(--text-ter);flex-shrink:0;font-family:var(--font-code)}
.nav-label{flex:1;line-height:1.35}
.nav-check{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.533rem;transition:var(--transition)}
.nav-item.done .nav-check{background:var(--success-border);border-color:var(--success-border);color:#fff}
.nav-time{font-size:0.667rem;color:var(--text-muted);flex-shrink:0}
.nav-item.hidden{display:none}

#overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:850;backdrop-filter:blur(2px)}
#overlay.visible{display:block}

#main{flex:1;margin-left:var(--sidebar-w);transition:margin-left .25s ease;min-width:0;display:flex}
#main.sidebar-closed{margin-left:0}

body.focus-mode #sidebar,body.focus-mode #header{display:none}
body.focus-mode #main{margin-left:0;margin-top:0}
body.focus-mode #layout{margin-top:0}
body.focus-mode .section{max-width:780px;margin:0 auto}
body.focus-mode #progress-bar{display:none}
body.focus-mode .focus-exit{position:fixed;top:16px;right:16px;z-index:999;display:flex!important}
.focus-exit{display:none;background:var(--bg-header);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;font-size:0.8rem;font-weight:600;color:var(--text-sec);cursor:pointer;align-items:center;gap:6px;box-shadow:var(--shadow-md);font-family:var(--font-body)}

.section-wrap{flex:1;min-width:0}
.section{display:none;padding:20px 48px 80px;min-height:calc(100vh - var(--header-h) - var(--progress-h))}
.section.active{display:block}

#toc-float{width:var(--toc-w);flex-shrink:0;position:sticky;top:calc(var(--menu-tech-h) + var(--header-h) + var(--progress-h) + 24px);height:fit-content;max-height:calc(100vh - var(--header-h) - 60px);overflow-y:auto;padding:16px 16px 16px 8px;display:none}
#toc-float.visible{display:block}
.toc-title{font-size:0.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-ter);margin-bottom:10px}
.toc-list{list-style:none}
.toc-item{font-size:0.8rem;color:var(--text-ter);padding:4px 8px;border-left:2px solid var(--border-light);cursor:pointer;transition:var(--transition);line-height:1.4;margin-bottom:2px}
.toc-item:hover{color:var(--text-main);border-left-color:var(--accent2)}
.toc-item.active{color:var(--accent);border-left-color:var(--accent);font-weight:600}

.section-header{padding-bottom:24px;border-bottom:2px solid var(--border);margin-bottom:36px}
.section-header-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px;flex-wrap:wrap}
.section-badges{display:flex;gap:8px;flex-wrap:wrap}
.section-header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.read-time{font-size:0.8rem;color:var(--text-ter);display:flex;align-items:center;gap:4px}
.badge{font-size:0.733rem;font-weight:600;padding:3px 9px;border-radius:20px;border:1px solid var(--border);color:var(--text-sec);background:var(--bg);letter-spacing:.03em}
.badge.accent{background:var(--accent-light);border-color:var(--accent2);color:var(--accent)}
.badge.tech{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text);font-family:var(--font-code);font-size:0.7rem}
.section-title{font-family:var(--font-title);font-size:1.733rem;font-weight:700;color:var(--text-main);line-height:1.3;margin-bottom:10px}
.section-desc{font-size:1rem;color:var(--text-sec);line-height:1.7;max-width:720px}
.btn-mark-done{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:none;font-size:0.833rem;font-weight:600;color:var(--text-sec);cursor:pointer;font-family:var(--font-body);transition:var(--transition);flex-shrink:0}
.btn-mark-done:hover{border-color:var(--success-border);color:var(--success-text);background:var(--success-bg)}
.btn-mark-done.done{border-color:var(--success-border);color:var(--success-text);background:var(--success-bg)}

.subsection{margin:36px 0}
.subsection-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.subsection-num{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:0.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
[data-theme="dark"] .subsection-num{background:var(--accent2)}
.subsection-title-wrap{border-left:3.5px solid var(--accent2);padding-left:14px;flex:1}
.subsection-title{font-size:1.133rem;font-weight:700;color:var(--text-main);line-height:1.3}
.subsection-meta{font-size:0.8rem;color:var(--text-ter);margin-top:3px}

.prose p{margin-bottom:14px;font-size:1rem;color:var(--text-sec);line-height:1.75}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:600;color:var(--text-main)}
.prose em{font-style:italic}
.prose ul,.prose ol{margin:10px 0 14px 20px}
.prose li{font-size:1rem;color:var(--text-sec);line-height:1.7;margin-bottom:6px}
.prose li::marker{color:var(--accent2)}
.prose h3{font-size:1.067rem;font-weight:700;color:var(--text-main);margin:24px 0 10px}
.prose h4{font-size:0.933rem;font-weight:600;color:var(--text-sec);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.05em}
.prose code{font-family:var(--font-code);font-size:0.833rem;background:var(--bg-code);border:1px solid var(--border);padding:1px 5px;border-radius:3px;color:var(--accent2)}
[data-theme="dark"] .prose code{color:#7dd3fc}
.prose a{color:var(--accent2);text-decoration:underline;text-underline-offset:3px}

.callout{padding:14px 18px;border-radius:var(--radius);border-left:3px solid;margin:18px 0;font-size:0.933rem;line-height:1.7}
.callout-header{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:8px;font-size:0.833rem;letter-spacing:.03em}
.callout-icon{font-size:0.933rem;line-height:1}
.callout p{margin:0 0 6px;color:inherit}
.callout p:last-child{margin-bottom:0}
.callout ul{margin:6px 0 0 18px}
.callout li{margin-bottom:4px;color:inherit}
.callout strong{color:inherit;font-weight:700}
.callout code{font-family:var(--font-code);font-size:0.767rem;background:rgba(0,0,0,.08);padding:1px 4px;border-radius:3px}
[data-theme="dark"] .callout code{background:rgba(255,255,255,.1)}
.callout.info{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text)}
.callout.danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-text)}
.callout.success{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}
.callout-copy{float:right;background:none;border:1px solid currentColor;border-radius:3px;padding:2px 8px;font-size:0.7rem;font-family:var(--font-body);cursor:pointer;opacity:.6;transition:var(--transition);color:inherit;margin-left:8px}
.callout-copy:hover{opacity:1}

.code-block{margin:20px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.code-bar{background:var(--bg-code-bar);display:flex;align-items:center;justify-content:space-between;padding:8px 14px}
.code-lang{font-family:var(--font-code);font-size:0.733rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8b949e}
.code-copy{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#8b949e;font-size:0.767rem;font-family:var(--font-body);padding:3px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:5px}
.code-copy:hover{background:rgba(255,255,255,.15);color:#e6edf3}
.code-copy.copied{background:rgba(22,163,74,.2);border-color:rgba(22,163,74,.4);color:#4ade80}
.code-block pre{background:var(--bg-code);margin:0;padding:18px 20px;overflow-x:auto;font-family:var(--font-code);font-size:0.833rem;line-height:1.72;white-space:pre;tab-size:2}
.code-block pre::-webkit-scrollbar{height:4px}
.code-block pre::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.code-block code{font-family:var(--font-code);font-size:0.833rem;background:none;border:none;padding:0;border-radius:0;color:inherit}

.table-wrap{overflow-x:auto;margin:20px 0;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:0.9rem;min-width:400px}
thead{background:var(--accent)}
[data-theme="dark"] thead{background:var(--accent2)}
thead th{padding:10px 14px;font-weight:600;text-align:left;font-size:0.8rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;color:#fff}
tbody tr{border-bottom:1px solid var(--border-light);transition:background .15s}
tbody tr:last-child{border-bottom:none}
tbody tr:nth-child(even){background:var(--bg)}
tbody tr:hover{background:var(--bg-hover)}
tbody td{padding:9px 14px;color:var(--text-sec);vertical-align:top;line-height:1.6}
tbody td code{font-family:var(--font-code);font-size:0.767rem;background:var(--bg-code);border:1px solid var(--border);padding:1px 5px;border-radius:3px;color:var(--accent2)}
tbody td strong{font-weight:600;color:var(--text-main)}

.qcm{margin:20px 0}
.qcm-question{margin-bottom:28px}
.qcm-text{font-size:0.967rem;font-weight:600;color:var(--text-main);margin-bottom:12px;line-height:1.5}
.qcm-options{display:flex;flex-direction:column;gap:8px}
.qcm-option{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:var(--transition);font-size:0.933rem;color:var(--text-sec);background:var(--bg);text-align:left;width:100%;font-family:var(--font-body);line-height:1.5}
.qcm-option:hover:not(.answered){border-color:var(--accent2);background:var(--accent-light);color:var(--text-main)}
.qcm-option.correct{border-color:var(--success-border);background:var(--success-bg);color:var(--success-text);font-weight:600}
.qcm-option.wrong{border-color:var(--danger-border);background:var(--danger-bg);color:var(--danger-text)}
.qcm-option.answered{cursor:default}
.qcm-letter{font-weight:700;font-size:0.8rem;width:20px;height:20px;border-radius:50%;background:var(--border);color:var(--text-ter);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-family:var(--font-code);transition:var(--transition)}
.qcm-option.correct .qcm-letter{background:var(--success-border);color:#fff}
.qcm-option.wrong .qcm-letter{background:var(--danger-border);color:#fff}
.qcm-feedback{display:none;margin-top:10px;font-size:0.9rem;padding:10px 14px;border-radius:var(--radius-sm);line-height:1.6}
.qcm-feedback.show{display:block}
.qcm-feedback.correct{background:var(--success-bg);color:var(--success-text);border-left:3px solid var(--success-border)}
.qcm-feedback.wrong{background:var(--danger-bg);color:var(--danger-text);border-left:3px solid var(--danger-border)}
.qcm-reset{margin-top:16px;background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 14px;font-size:0.833rem;font-family:var(--font-body);color:var(--text-sec);cursor:pointer;transition:var(--transition)}
.qcm-reset:hover{border-color:var(--accent2);color:var(--accent)}

.exercise{background:var(--exercise-bg);border-left:4px solid var(--exercise-border);border-radius:var(--radius);padding:20px 24px;margin:28px 0}
.exercise-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.exercise-icon{font-size:1.067rem}
.exercise-title{font-size:0.967rem;font-weight:700;color:var(--warn-text)}
.exercise-desc{font-size:0.933rem;color:var(--text-sec);margin-bottom:14px;line-height:1.7}
.exercise ol{margin:0;padding:0;list-style:none;counter-reset:ex-counter}
.exercise ol li{counter-increment:ex-counter;font-size:0.933rem;color:var(--text-sec);line-height:1.7;margin-bottom:12px;display:flex;gap:12px;align-items:flex-start}
.exercise ol li::before{content:counter(ex-counter);min-width:22px;height:22px;background:var(--accent2);color:#fff;border-radius:50%;font-size:0.733rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}

.miniprojet{background:var(--projet-bg);border-left:4px solid var(--projet-border);border-radius:var(--radius);padding:20px 24px;margin:28px 0}
.miniprojet-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.miniprojet-icon{font-size:1.067rem}
.miniprojet-title{font-size:0.967rem;font-weight:700;color:var(--success-text)}
.miniprojet-desc{font-size:0.933rem;color:var(--text-sec);line-height:1.7}
.miniprojet ul{margin:10px 0 0 18px}
.miniprojet li{font-size:0.933rem;color:var(--text-sec);margin-bottom:6px;line-height:1.65}

.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.compare-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.compare-card-header{padding:10px 14px;font-size:0.833rem;font-weight:700;letter-spacing:.03em}
.compare-card-header.good{background:var(--success-bg);color:var(--success-text);border-bottom:1px solid var(--success-border)}
.compare-card-header.neutral{background:var(--bg-hover);color:var(--text-sec);border-bottom:1px solid var(--border)}
.compare-card-body{padding:14px;font-size:0.9rem;color:var(--text-sec);background:var(--bg-sidebar);line-height:1.7}
.compare-card-body ul{margin:0 0 0 16px;padding:0}
.compare-card-body li{margin-bottom:6px}

.section-nav{display:flex;justify-content:space-between;align-items:center;margin-top:56px;padding-top:24px;border-top:1px solid var(--border-light);gap:12px}
.nav-btn{display:flex;align-items:center;gap:8px;padding:10px 18px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg-sidebar);color:var(--text-sec);font-size:0.9rem;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:var(--transition);text-decoration:none;max-width:45%}
.nav-btn:hover{border-color:var(--accent2);color:var(--accent);background:var(--accent-light)}
.nav-btn.next{flex-direction:row-reverse;margin-left:auto}
.nav-btn-label{font-size:0.733rem;font-weight:400;color:var(--text-ter);display:block}
.nav-btn-title{display:block}

.steps{margin:20px 0}
.step{display:flex;gap:16px;margin-bottom:20px;align-items:flex-start}
.step-num{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-size:0.867rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
[data-theme="dark"] .step-num{background:var(--accent2)}
.step-content{flex:1;padding-top:4px}
.step-title{font-size:0.967rem;font-weight:700;color:var(--text-main);margin-bottom:6px}
.step-body{font-size:0.933rem;color:var(--text-sec);line-height:1.7}

.divider{border:none;border-top:1px solid var(--border-light);margin:36px 0}
.tech-tags{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tech-tag{font-family:var(--font-code);font-size:0.767rem;padding:3px 9px;border-radius:4px;background:var(--bg-code);border:1px solid var(--border);color:var(--accent2)}
.arch-diagram{background:var(--bg-code);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin:20px 0;font-family:var(--font-code);font-size:0.833rem;line-height:1.8;color:var(--text-sec);overflow-x:auto}

@media print {
  @page{size:A4 landscape;margin:13mm 14mm 11mm 14mm}
  #header,#sidebar,#overlay,#progress-bar,.btn-mark-done,.section-nav,.focus-exit,#toc-float,.code-copy,.callout-copy,.qcm-reset{display:none!important}
  #main{margin-left:0!important}
  #layout{margin-top:0!important}
  .section{display:block!important;padding:0!important;min-height:auto!important;page-break-after:always;break-after:page}
  .section:last-child{page-break-after:avoid;break-after:avoid}
  .section::before{content:"Maîtrisez le Cloud Native   |   " attr(data-formateur);display:block;font-size:0.6rem;color:var(--text-ter);border-bottom:1px solid var(--border);padding-bottom:6px;margin-bottom:18px;font-family:var(--font-body)}
  .callout,.exercise,.miniprojet,.code-block,table,.compare-grid{break-inside:avoid}
  .code-block pre{white-space:pre-wrap;overflow:visible}
  .code-bar{background:#333!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  h2,h3,h4{break-after:avoid}
  .qcm-option.correct{background:var(--success-bg)!important;border-color:var(--success-border)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@media(max-width:1200px){#toc-float{display:none!important}}
@media(max-width:900px){
  #sidebar{transform:translateX(calc(-1 * var(--sidebar-w)))}
  #sidebar:not(.closed){transform:translateX(0)}
  #main{margin-left:0!important}
  .section{padding:24px 20px 60px}
  .header-pills,.header-subtitle,.font-select,#breadcrumb{display:none!important}
  .font-size-controls{display:none!important}
  .compare-grid{grid-template-columns:1fr}
  .section-title{font-size:1.467rem}
}
@media(max-width:600px){
  .section{padding:16px 14px 60px}
  .section-title{font-size:1.267rem}
  .subsection-title{font-size:1rem}
  .nav-btn{padding:8px 12px;font-size:0.8rem}
}

/* ── MENU PRINCIPAL TECHNOLOGIES ─────────────────────────── */
#tech-menu{
  position:fixed;top:0;left:0;right:0;z-index:1100;
  background:var(--bg-sidebar);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.tech-menu-inner{
  display:flex;align-items:center;gap:1.2rem;
  max-width:100%;padding:0 1rem;height:var(--menu-tech-h);overflow-x:auto;
  scrollbar-width:none;
}
.tech-menu-inner::-webkit-scrollbar{display:none}
.tech-menu-brand{
  font-family:var(--font-body);font-weight:800;font-size:1.35rem;letter-spacing:.03em;
  color:var(--accent);white-space:nowrap;margin-right:.6rem;flex-shrink:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
}
.tech-menu-slogan{
  font-size:.52rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);line-height:1;
}
.tech-menu-nav{display:flex;gap:.15rem;align-items:center}
.tech-item{
  padding:.3rem .9rem;border-radius:5px;font-size:.92rem;
  color:#1e293b;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background .15s,color .15s;cursor:pointer;
}
.tech-sep{color:#cbd5e1;font-weight:300;font-size:.85rem;user-select:none;}
.tech-item:hover{background:var(--bg-hover);color:var(--text)}
.tech-item.active{
  background:var(--accent);color:#fff;font-weight:600;
}
/* Décaler le header sous le menu tech */
#header{top:calc(var(--menu-tech-h) + var(--progress-h))}



/* ── BOUTON SHARE ÉTAT COPIÉ ─────────────────────────────── */
.btn-export.copied{background:var(--success-bg);border-color:var(--success-border);color:var(--success)}

@media(max-width:600px){
  .tech-menu-brand{font-size:1.15rem}
  .tech-item{padding:.24rem .6rem;font-size:.82rem}
}
@media(max-width:480px){
  .btn-export{padding:6px 8px;font-size:0;gap:0}
  .btn-export svg{width:16px;height:16px}
  #header{gap:6px;padding:0 10px}
}