:root{
  --bg:#ffffff;       /* slate-50 */
  --ink:#0f172a;      /* slate-900 */
  --muted:#475569;    /* slate-600 */
  --blue:#eb7425;     /* blue-600 */
  --blue-2:#ff861d;   /* indigo-800 */
  --accent:#14b8a6;   /* teal-500 */
  --panel:#2563eb;
  --panel-bg:#2563eb;
  --panel-ink:#ffffff;
  --chip:#eef2ff;     /* indigo-50 */
  --chip-ink:#0b3a6b;
  --arrpl1:#ffffff69;       /* slate-50 */
  --arrpl2:#f0f4f474;       /* slate-50 */
  --blanc1:#f0f9ef;
  --blanc2:#eaeef8;
  --curve:22px;
  

}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55;scroll-behavior:smooth}
a{color:var(--blue-2);text-decoration:none}
a:hover{text-decoration:underline;color:var(--accent)}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header{display:flex;align-items:center;justify-content:space-between;margin:6px 0 12px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px;border-radius:12px;background: linear-gradient(135deg, var(--blue), var(--accent));display:grid;place-items:center;color:#002b36;font-weight:900}
.brand h1{font-size:24px;margin:0}
.nav a{margin-left:14px}
.hero{margin:8px 0 18px 0;padding:18px;border:2px solid #dce9f8;border-radius:var(--curve);background: linear-gradient(180deg, rgba(30,136,229,0.09), rgba(0,188,212,0.04));box-shadow: 0 8px 20px rgba(10, 45, 90, 0.05)}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}
.card{background:#ffffff;border:2px solid #e6eef9;border-radius:var(--curve);padding:16px;box-shadow:0 8px 18px rgba(13,27,45,0.05);transition: transform .15s ease, box-shadow .15s ease}
.card:hover{ transform: translateY(-2px); box-shadow:0 12px 24px rgba(13,27,45,0.08) }
.pill{display:inline-block;background: linear-gradient(135deg, var(--blue), var(--blue-2));color:white;border:0;padding:10px 14px;border-radius:999px;font-weight:700;transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;box-shadow:0 8px 16px rgba(13,27,45,0.10)}
.pill:hover{ filter:brightness(1.06); transform: translateY(-2px) scale(1.03); box-shadow:0 12px 22px rgba(13,27,45,0.18) }
.tabs{display:flex;gap:10px;margin:10px 0 16px 0}
.tab{background:#e6f0ff;border:2px solid #d2e2ff;color:#0e3a6b;border-radius:999px;padding:8px 12px;font-weight:700}
.panel{background:#ffffff;border:2px solid #e6eef9;border-radius:22px;padding:18px;box-shadow:0 10px 24px rgba(13,27,45,0.08)}
.panel h3{margin-top:0}
.list{margin:8px 0 0 0;padding-left:18px}
.list li{margin:10px 0}
.columns{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media(max-width:900px){.columns{grid-template-columns:1fr}}
.column h2{margin:6px 0 8px 0;font-size:22px;color:#0b3a6a;border-left:6px solid var(--accent);padding-left:10px}
/* Always-visible action links (PDF/Vidéos) with aesthetic pills */
.action-pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#ffffff;color:#0d1b2a;border:2px solid #dbe7f7;font-weight:700;text-decoration:none;box-shadow:0 3px 8px rgba(13,27,45,0.06);transition: transform .15s ease, box-shadow .15s ease, background .15s ease
}
.action-pill:hover{ transform: translateY(-1px); box-shadow:0 6px 14px rgba(13,27,45,0.10); background: var(--accent) }
.action-pill.pdf::before{ content: "📄" }
.action-pill.video::before{ content: "🎥" }
/* Lesson page viewer + list */
.layout{display:grid;gap:16px;grid-template-columns:280px 1fr}
@media(max-width:900px){.layout{grid-template-columns:1fr}}
.pdf-list a{display:block;padding:10px 12px;margin-bottom:8px;background:#ffffff;border:2px solid #e6eef9;border-radius:12px;position:relative;text-decoration:none;color:#0d1b2a}
.pdf-list a.active{background:#f1fbff;border-color:var(--accent);color:#083a6b;font-weight:800}
.pdf-list a.active::after{content:"En lecture";position:absolute;right:10px;top:8px;font-size:12px;font-weight:800;color:#0b3a6a;background:#d8f6ff;border:1px solid #b3ecff;padding:2px 6px;border-radius:999px}
.viewer{min-height:70vh;background:#fff;border:2px solid #e6eef9;border-radius:12px;display:grid;place-items:center}
.viewer iframe{width:100%;height:70vh;border:0;border-radius:12px}
#current-title{margin:4px 0 8px 0;padding:10px 12px;border-radius:12px;background: linear-gradient(180deg, rgba(0,188,212,.10), rgba(30,136,229,.06));border:2px solid #dbe7f7;font-weight:800;color:#0b2b47}
.grid-videos{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.grid-videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.grid-videos{grid-template-columns:1fr}}
.video-card{background:#fff;border:2px solid #e6eef9;border-radius:12px;padding:10px}
.video-card iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:8px}
.breadcrumbs{font-size:14px;color:#5b677a;margin:8px 0 10px}
footer{margin-top:26px;padding-top:12px;border-top:1px solid #e5effa;color:#5b677a}

/* V14 palette tuning */
.logo{ background: linear-gradient(135deg, var(--blanc1), var(--blanc2)); color:#dbe3e6; }
.panel{background:#ffffff;border:2px solid #e6eef9;border-radius:22px;padding:18px;box-shadow:0 10px 24px rgba(13,27,45,0.08)}
.action-pill:hover{ background: var(--accent); color:#062629 }
.pill{ background: linear-gradient(135deg, var(--blue), var(--blue-2)); }
.column h2{ border-left-color: var(--accent); }
a:hover{ color: var(--accent); }

/* V15: visual logo using SVG without changing markup */
.logo{ position:relative; overflow:hidden }
.logo::after{
  content:"";
  position:absolute; inset:0;
  background-image:url('logo.svg');
  background-size: 34px 34px;
  background-position:center;
  background-repeat:no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}
/* Visually hide fallback text "PC" inside the logo box */
.logo{ color:transparent; font-size:0; }

/* V20: domain-specific panel palettes for better harmony */
#physique .panel{ color:var(--ink); }
#chimie .panel{ color:var(--ink); }
/* Keep text highly legible */
#physique .panel{ color:var(--ink); }
#physique .panel{ color:var(--ink); }
/* Buttons hover still uses accent, but keep contrast */
#physique .panel{ color:var(--ink); }

/* Light colored band for chapter titles inside panels */
.panel h3{
  background: linear-gradient(180deg, #f0f9ff, #e0f2fe);
  padding:10px 14px;
  margin:-18px -18px 12px -18px;
  border-top-left-radius:22px;
  border-top-right-radius:22px;
  border-bottom:2px solid #dbeafe;
  font-size:20px;
}


/* Non-destructive base mobile safety rules */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
img { display:block; }


/* === Mobile text scaling (added 2025-09-08) === */
@media (max-width: 640px) {
  h1 { font-size: clamp(20px, 7vw, 28px); }
  h2 { font-size: clamp(18px, 6vw, 24px); }
  h3 { font-size: clamp(16px, 5.5vw, 22px); }
  h4, h5, h6 { font-size: clamp(15px, 5vw, 20px); }
  p, li, a, span, label, input, select, textarea, button {
    font-size: clamp(14px, 4.2vw, 18px);
  }
}


/* === THEME VARIANT: scilya-jaune-bleu-plus (refined) === */
:root {
  --bg: #FFF9E8;
  --surface: #FFFFFF;
  --surface-2: #FFF4C7;
  --brand: #0A6EB8;
  --brand-600: #085E9C;
  --brand-700: #00436A;
  --text: #0C2340;
  --text-soft: #274060;
  --muted: #4B5E77;
  --accent: #B30000;
  --accent1: #B30000;
  --accent-2: #FFD54A;
  --border: #E0E6EE;
  --Jaune1:#ff9900;
  --ring: rgba(10, 110, 184, 0.45);
}
/* Petites améliorations non-invasives */
a { color: var(--brand); }
a:hover { color: var(--brand-600); }
button, .btn {
  outline-color: var(--ring);
}
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* === Adoucissement du survol des boutons === */
button:hover,
.btn:hover,
.tab-button:hover {
  background-color: var(--brand-600);
  color: #ffffff;
  filter: brightness(1.1);
  transition: all 0.2s ease-in-out;
}

/* État actif ou sélectionné */
button.active,
.btn.active,
.tab-button.active {
  background-color: var(--brand);
  color: #ffffff;
}

/* === Correction forcée : hover toujours bleu, jamais rouge === */
button:hover,
.btn:hover,
.tab-button:hover {
  background-color: var(--brand) !important;
  color: #ffffff !important;
  filter: brightness(1.1);
  border-color: var(--accent1) !important;
  transition: all 0.2s ease-in-out;
}

button.active,
.btn.active,
.tab-button.active {
  background-color: var(--brand-700) !important;
  color: #ffffff !important;
}


/* === Correction spécifique : action-pill en bleu sur hover === */
.action-pill:hover,
.action-pill:focus-visible {
  background: var(--Jaune1) !important;
  color: #ffffff !important;
  border-color: var(--accent1) !important;
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(13,27,45,0.10);
}

.action-pill.pdf::before,
.action-pill.video::before {
  /* icônes conservées; pas de changement */
}

/* === Compact level cards (buttons-like) === */
.card.clickable{
  padding: 8px 14px !important;   /* reduce vertical padding */
  min-height: 44px !important;    /* accessible button height */
  display: flex;
  align-items: center;
  justify-content: center;
}
.card.clickable h3{
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-size: 1.05rem;             /* readable but compact */
  line-height: 1.2;
}
@media (max-width: 640px){
  .card.clickable{ min-height: 40px !important; padding: 8px 12px !important; }
  .card.clickable h3{ font-size: 1rem; }
}