/* ─── trigonometrie.css — Thème : Onde harmonique, chaleur ambrée ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Nunito:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

:root {
  --sand:        #fdf8f0;
  --sand-2:      #f5eddb;
  --sand-3:      #ede0c4;
  --ink:         #1c1007;
  --ink-mid:     #5c3d1a;
  --ink-light:   #a07840;
  --amber:       #d97706;
  --amber-2:     #f59e0b;
  --amber-pale:  #fffbeb;
  --amber-mid:   #fde68a;
  --sienna:      #92400e;
  --sienna-pale: #fef3c7;
  --teal:        #0f766e;
  --teal-pale:   #f0fdfa;
  --rose:        #be185d;
  --rose-pale:   #fdf2f8;
  --border:      #e7d5b3;
  --font-display:'Libre Baskerville', Georgia, serif;
  --font-body:   'Nunito', sans-serif;
  --font-mono:   'Fira Code', monospace;
  --sidebar-w:   265px;
  --radius:      10px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body {
  font-family: var(--font-body);
  background: var(--sand);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.78;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 39px,
    rgba(217,119,6,.04) 39px, rgba(217,119,6,.04) 40px
  );
}

/* Sine wave header decoration (injected by JS) */
.wave-svg { position:absolute; right:0; bottom:0; opacity:.12; pointer-events:none; }

/* ─── Progress ───────────────────────────────────────────────────────────── */
.progress-bar {
  position:fixed; top:0; left:0; height:4px; width:0%;
  background: linear-gradient(90deg, var(--amber), var(--amber-2));
  z-index:200; transition:width .08s linear;
  border-radius:0 2px 2px 0;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.page-layout{display:flex;min-height:100vh;}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background: linear-gradient(180deg, #1c1007 0%, #2c1f08 100%);
  position:sticky; top:0; height:100vh;
  overflow-y:auto; display:flex; flex-direction:column;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
}

.sidebar-header {
  padding:30px 22px 22px;
  border-bottom:1px solid rgba(255,255,255,.07);
  position:relative; overflow:hidden;
}

/* Small circle decoration */
.sidebar-header::after {
  content:''; position:absolute; right:-30px; top:-30px;
  width:90px; height:90px; border-radius:50%;
  border:1px solid rgba(245,158,11,.2);
}

.sidebar-site-link {
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.15em;
  color:rgba(255,255,255,.3); text-decoration:none; display:block; margin-bottom:12px;
}

.sidebar-title {
  font-family:var(--font-display); font-size:1.5rem; font-weight:700;
  color:#fff; line-height:1.2; font-style:italic;
}

.sidebar-title em { color:var(--amber-2); font-style:normal; }

.toc-nav{padding:12px 0 16px;flex:1;}

.toc-section-label {
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.22); padding:10px 22px 4px;
}

.toc-link {
  display:block; padding:5px 22px 5px 26px;
  font-family:var(--font-body); font-size:.84rem; font-weight:400;
  color:rgba(255,255,255,.52); text-decoration:none;
  border-left:2px solid transparent; transition:all .18s;
}
.toc-link:hover,.toc-link.active{color:#fff;border-left-color:var(--amber);background:rgba(245,158,11,.08);}
.toc-link.active{color:var(--amber-2);}

.sidebar-subject-nav{padding:14px 22px;border-top:1px solid rgba(255,255,255,.07);}
.sidebar-subject-nav p{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:8px;}
.sidebar-subject-nav a{display:block;font-family:var(--font-body);font-size:.82rem;color:rgba(255,255,255,.42);text-decoration:none;padding:3px 0;transition:color .15s;}
.sidebar-subject-nav a:hover{color:var(--amber-2);}
.sidebar-subject-nav a.current{color:var(--amber-2);font-weight:700;}

/* ─── Main ───────────────────────────────────────────────────────────────── */
.main{flex:1;min-width:0;padding:0 62px 100px;max-width:840px;}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.page-header{
  padding:58px 0 42px; margin-bottom:52px;
  border-bottom:2px solid var(--border);
  position:relative; overflow:hidden;
}

.subject-tag{
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); margin-bottom:14px;
}

h1.page-title{
  font-family:var(--font-display); font-size:3.5rem; font-weight:700;
  color:var(--ink); line-height:1.0; font-style:italic; letter-spacing:-.01em;
}

.page-intro{
  margin-top:18px; font-size:1.02rem; color:var(--ink-mid);
  max-width:540px; line-height:1.7; font-weight:400;
}

/* ─── Sections ───────────────────────────────────────────────────────────── */
.section{margin-bottom:64px;scroll-margin-top:28px;}

h2.section-title{
  font-family:var(--font-display); font-size:1.9rem; font-weight:700;
  color:var(--ink); margin-bottom:22px; padding-bottom:10px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:baseline; gap:14px; font-style:italic;
}

h2.section-title .num{
  font-family:var(--font-mono); font-size:.72rem; font-weight:400; font-style:normal;
  color:var(--amber); background:var(--amber-pale);
  border:1px solid var(--amber-mid); padding:2px 9px; border-radius:20px;
}

h3.sub-title{
  font-family:var(--font-display); font-size:1.25rem; font-weight:700;
  color:var(--sienna); margin:30px 0 12px; font-style:italic;
}

p{margin-bottom:.9em;}
ul,ol{padding-left:1.5em;margin-bottom:.9em;}
li{margin-bottom:.3em;}

/* ─── Boxes ──────────────────────────────────────────────────────────────── */
.box{padding:17px 21px 15px;margin:20px 0;border-radius:var(--radius);}
.box-label{
  font-family:var(--font-display); font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:8px;
  font-style:normal;
}

.box.def{background:var(--amber-pale);border:1px solid var(--amber-mid);border-left:5px solid var(--amber);}
.box.def .box-label{color:var(--sienna);}

.box.theorem{background:var(--sienna-pale);border:1px solid #fcd34d;border-left:5px solid var(--amber-2);}
.box.theorem .box-label{color:var(--sienna);}

.box.prop{background:var(--teal-pale);border:1px solid #99f6e4;border-left:5px solid var(--teal);}
.box.prop .box-label{color:var(--teal);}

.box.corollary{background:#fefce8;border:1px solid #fde047;border-left:5px solid #ca8a04;}
.box.corollary .box-label{color:#713f12;}

.box.example{background:var(--rose-pale);border:1px solid #f9a8d4;border-left:5px solid var(--rose);}
.box.example .box-label{color:var(--rose);}

.box.remark{background:var(--sand-2);border:1px solid var(--border);}
.box.remark .box-label{color:var(--ink-light);}

/* ─── Proof ──────────────────────────────────────────────────────────────── */
.proof-toggle{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-style:italic;font-size:.88rem;
  color:var(--sienna);border:1px solid var(--amber);
  padding:4px 14px;border-radius:20px;cursor:pointer;
  background:transparent;margin-top:8px;transition:all .18s;user-select:none;
}
.proof-toggle:hover{background:var(--amber);color:#fff;border-color:var(--amber);}
.proof-toggle .arrow{transition:transform .2s;font-style:normal;}
.proof-toggle.open .arrow{transform:rotate(90deg);}
.proof-content{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.proof-content.open{max-height:900px;}
.proof-inner{margin-top:12px;padding:14px 18px;background:var(--sand-2);border:1px dashed var(--border);border-radius:8px;color:var(--ink-mid);font-size:.95rem;}
.qed{float:right;color:var(--amber);font-family:var(--font-display);font-size:1rem;font-style:italic;}

/* ─── Formula ────────────────────────────────────────────────────────────── */
.formula-block{
  text-align:center;padding:20px 16px;margin:18px 0;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow-x:auto;box-shadow:0 2px 8px rgba(217,119,6,.07);
}

/* ─── Table ──────────────────────────────────────────────────────────────── */
.math-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.92rem;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.math-table th{background:var(--ink);color:var(--sand-3);padding:10px 16px;text-align:left;font-family:var(--font-display);font-size:.95rem;font-style:italic;}
.math-table td{padding:9px 16px;border-bottom:1px solid var(--border);vertical-align:top;}
.math-table tr:nth-child(even) td{background:var(--sand-2);}
.math-table td:first-child{font-family:var(--font-mono);font-size:.82rem;color:var(--amber);}

code{font-family:var(--font-mono);font-size:.82em;background:var(--sand-3);color:var(--sienna);padding:2px 6px;border-radius:4px;}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0;}
.two-col .box{margin:0;}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
.mobile-header{display:none;position:sticky;top:0;z-index:50;background:var(--ink);padding:12px 18px;align-items:center;justify-content:space-between;}
.mobile-menu-btn{background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;}
.mobile-title{font-family:var(--font-display);font-size:1.1rem;color:var(--amber-2);font-style:italic;}
.mobile-drawer{display:none;position:fixed;inset:0;z-index:100;}
.mobile-drawer.open{display:flex;}
.drawer-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);}
.drawer-panel{position:relative;z-index:1;width:265px;background:linear-gradient(180deg,#1c1007,#2c1f08);height:100%;overflow-y:auto;padding:16px 0;}

@media(max-width:960px){
  .sidebar{display:none;}.mobile-header{display:flex;}
  .main{padding:0 22px 70px;}h1.page-title{font-size:2.5rem;}
  .two-col{grid-template-columns:1fr;}
}