/* FormationCertifIT — styles du lecteur de cours + atelier.
 * Extraits de formation-platform/css/main.css (variables, contenu, lecteur, lab).
 * Charge APRES css/style.css, uniquement sur les pages de cours et l'atelier.
 */

/* --- Variables du thème contenu --- */

:root {
  --bg: #070b14;
  --bg2: #0d1526;
  --card: #121c32;
  --card2: #182744;
  --border: #2a3f66;
  --text: #f1f5ff;
  --muted: #8fa3c8;
  --cyan: #22d3ee;
  --blue: #38bdf8;
  --indigo: #818cf8;
  --violet: #a78bfa;
  --purple: #c084fc;
  --pink: #f472b6;
  --rose: #fb7185;
  --orange: #fb923c;
  --amber: #fbbf24;
  --green: #34d399;
  --emerald: #10b981;
  --red: #f87171;
  --grad-main: linear-gradient(135deg, #22d3ee 0%, #818cf8 45%, #f472b6 100%);
  --grad-warm: linear-gradient(135deg, #fb923c, #f472b6);
  --grad-cool: linear-gradient(135deg, #22d3ee, #34d399);
  --grad-cyber: linear-gradient(135deg, #34d399, #22d3ee);
  --radius: 16px;
  --shadow: 0 12px 40px rgba(0,0,0,.4);
  --shadow-color: 0 8px 32px rgba(34,211,238,.12);
}

/* --- Base contenu (code, pre, tableaux) --- */

code {
  background: rgba(34,211,238,.12);
  color: var(--cyan);
  padding: .12rem .4rem;
  border-radius: 6px;
  font-size: .88em;
}
pre {
  background: #0a101c;
  border: 1px solid #1e3a5f;
  border-left: 3px solid var(--cyan);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  margin: 1rem 0;
  font-size: .86rem;
  line-height: 1.5;
  color: #cbd5e1;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .9rem;
}
th, td {
  border: 1px solid var(--border);
  padding: .55rem .75rem;
  text-align: left;
}
th {
  background: linear-gradient(90deg, rgba(34,211,238,.15), rgba(167,139,250,.12));
  color: var(--cyan);
}
tr:nth-child(even) td { background: rgba(255,255,255,.02); }

/* --- Coquille page + cartes + progression --- */

.main-dash { max-width: 1100px; margin: 0 auto; padding: 1.75rem 1.4rem 3rem; }
.main-dash h1 {
  font-size: 1.6rem;
  margin-bottom: .3rem;
  background: var(--grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}
.dash-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.4rem;
  margin-top: 1.4rem;
}
@media (max-width: 750px) { .dash-layout { grid-template-columns: 1fr; } }
.side {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  height: fit-content;
}
.side-link {
  display: block;
  padding: .65rem .85rem;
  border-radius: 10px;
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: .25rem;
  transition: .15s;
}
.side-link:hover, .side-link.active {
  background: rgba(34,211,238,.1);
  color: var(--cyan);
}
.side-link.accent-lab {
  background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(244,114,182,.1));
  border: 1px solid rgba(34,211,238,.25);
  color: var(--text);
  margin-bottom: .6rem;
}
.dash-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.dash-card:nth-child(odd) { border-left: 3px solid var(--cyan); }
.dash-card:nth-child(even) { border-left: 3px solid var(--violet); }
.dash-card h3 { margin-bottom: .5rem; font-size: 1.05rem; }
.progress-bar {
  height: 10px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
  margin: .6rem 0;
}
.progress-bar > div {
  height: 100%;
  background: var(--grad-main);
  border-radius: 999px;
  transition: width .3s;
}


/* --- Lecteur de cours --- */

/* Course player */
.course-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.2rem;
}
@media (max-width: 800px) { .course-layout { grid-template-columns: 1fr; } }
.course-nav {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem;
  max-height: 75vh;
  overflow-y: auto;
}
.course-nav button, .course-nav a.mod-link {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: .55rem .7rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: .86rem;
  margin-bottom: .2rem;
  transition: .15s;
}
.course-nav button:hover, .course-nav button.active,
.course-nav a.mod-link:hover {
  background: rgba(34,211,238,.12);
  color: var(--cyan);
}
.course-content {
  background: linear-gradient(165deg, rgba(24,39,68,.55), rgba(18,28,50,.9));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
  box-shadow: var(--shadow);
  border-top: 3px solid transparent;
  border-image: var(--grad-main) 1;
  min-height: 60vh;
}
.course-content h2 {
  font-size: 1.25rem;
  margin: 1.6rem 0 .7rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(34,211,238,.2);
  color: var(--cyan);
}
.course-content h2:first-child { margin-top: 0; }
.course-content p { margin-bottom: .85rem; color: #d4def0; }
.course-content ul, .course-content ol { margin: .5rem 0 1rem 1.3rem; color: #d4def0; }
.course-content li { margin-bottom: .35rem; }
.tip {
  background: linear-gradient(90deg, rgba(52,211,153,.12), rgba(34,211,238,.08));
  border-left: 3px solid var(--green);
  border-radius: 0 12px 12px 0;
  padding: .9rem 1.1rem;
  margin: 1.2rem 0;
  font-size: .92rem;
}
.warn {
  background: rgba(251,191,36,.1);
  border: 1px solid var(--amber);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  margin-bottom: 1.1rem;
  font-size: .9rem;
}


/* --- Quiz / examen blanc --- */

/* Quiz */
.quiz-box {
  background: rgba(7,11,20,.5);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.2rem;
  margin-top: 1.2rem;
}
.quiz-box h3 { color: var(--violet); margin-bottom: .8rem; }
.q-item { margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(42,63,102,.5); }
.q-item:last-child { border-bottom: none; }
.q-options label {
  display: block;
  padding: .45rem .7rem;
  margin: .3rem 0;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: .15s;
}
.q-options label:hover {
  background: rgba(34,211,238,.08);
  border-color: rgba(34,211,238,.25);
}


/* --- Atelier : onglets, terminal, topo, OSI, paquet, messages --- */

/* Tools / lab */
.tools-tabs { display: flex; gap: .45rem; margin-bottom: 1.15rem; flex-wrap: wrap; }
.tab {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: .5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 600;
  transition: .15s;
}
.tab:hover { color: var(--text); border-color: var(--cyan); }
.tab.active {
  background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(167,139,250,.22));
  border-color: var(--cyan);
  color: var(--text);
  box-shadow: 0 0 20px rgba(34,211,238,.12);
}
.tool-panel { display: none; }
.tool-panel.active { display: block; }
.desc { color: var(--muted); margin-bottom: .9rem; font-size: .92rem; }

/* Terminal */
.term {
  background: #050a12;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #1a3358;
  box-shadow: 0 0 30px rgba(34,211,238,.08);
}
.term-bar {
  background: linear-gradient(90deg, #0f172a, #1e1b4b);
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot.r { background: #ff5f56; }
.dot.y { background: #ffbd2e; }
.dot.g { background: #27c93f; }
.term-title { margin-left: .5rem; font-size: .76rem; color: #64748b; }
.term-body {
  height: 280px;
  overflow-y: auto;
  padding: .7rem 1rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .84rem;
  color: #cbd5e1;
}
.tline { margin-bottom: .08rem; white-space: pre-wrap; }
.tline.cmd { color: #4ade80; }
.tline.err { color: #fb7185; }
.term-input {
  display: flex;
  align-items: center;
  padding: .45rem 1rem;
  border-top: 1px solid #1e293b;
  background: #080e18;
}
#tprompt { color: #4ade80; margin-right: .4rem; font-family: monospace; font-size: .84rem; }
#tinput {
  flex: 1;
  background: 0;
  border: 0;
  color: #e2e8f0;
  font-family: monospace;
  font-size: .84rem;
  outline: 0;
}

/* Topology */
.topo-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .9rem;
}
.palette { display: flex; gap: .4rem; flex-wrap: wrap; }
.pal-item {
  background: linear-gradient(145deg, var(--card2), var(--card));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .85rem;
  cursor: grab;
  user-select: none;
  font-size: .88rem;
  transition: .15s;
}
.pal-item:hover { border-color: var(--cyan); }
.pal-item:active { cursor: grabbing; }
.canvas {
  position: relative;
  min-height: 340px;
  background:
    radial-gradient(circle at 20% 30%, rgba(34,211,238,.06), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(167,139,250,.06), transparent 40%),
    linear-gradient(180deg, #0a1220, #0f1a2e);
  border: 2px dashed #334155;
  border-radius: 14px;
  overflow: hidden;
}
.hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: var(--muted);
  pointer-events: none;
}
#links {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.dev {
  position: absolute;
  width: 84px;
  text-align: center;
  cursor: move;
  z-index: 5;
  user-select: none;
}
.dev .ic { font-size: 1.8rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.dev .lb {
  font-size: .72rem;
  background: rgba(15,23,42,.9);
  padding: .15rem .4rem;
  border-radius: 6px;
  margin-top: 2px;
  border: 1px solid var(--border);
}
.dev.sel { outline: 2px solid var(--cyan); border-radius: 8px; }

/* OSI */
.osi-drag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1rem;
}
@media (max-width: 600px) { .osi-drag { grid-template-columns: 1fr; } }
.osi-col {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .9rem;
  min-height: 300px;
}
.osi-item {
  background: linear-gradient(90deg, rgba(34,211,238,.15), rgba(167,139,250,.12));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .55rem .85rem;
  margin-bottom: .45rem;
  cursor: grab;
}
.slot {
  background: var(--bg);
  border: 2px dashed #334155;
  border-radius: 8px;
  padding: .55rem .85rem;
  margin-bottom: .45rem;
  min-height: 40px;
  color: var(--muted);
  font-size: .88rem;
}
.slot.filled {
  border-style: solid;
  border-color: var(--cyan);
  color: var(--text);
  background: rgba(34,211,238,.1);
}

/* Packet */
.packet-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.3rem;
  text-align: center;
}
.packet-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.pnode {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: .65rem .95rem;
  font-size: 1rem;
  transition: .25s;
}
.pnode.on {
  border-color: var(--cyan);
  background: rgba(34,211,238,.12);
  transform: scale(1.06);
  box-shadow: 0 0 20px rgba(34,211,238,.2);
}
.pinfo {
  background: var(--bg);
  border-radius: 10px;
  padding: .85rem;
  margin-bottom: .9rem;
  font-size: .9rem;
  min-height: 54px;
  border: 1px solid var(--border);
}
.msg { margin-top: .9rem; padding: .85rem; border-radius: 10px; font-size: .88rem; }
.msg.ok { background: rgba(52,211,153,.12); border-left: 3px solid var(--green); }
.msg.ko { background: rgba(248,113,113,.12); border-left: 3px solid var(--red); }
.msg.hidden { display: none; }


/* --- Coach (bulle d'aide) --- */

/* Coach */
.coach {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  max-width: 300px;
  animation: coachIn .3s ease;
}
.coach.hidden { display: none; }
.coach-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0e7490, #6d28d9);
  border: 2px solid var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 8px 28px rgba(34,211,238,.25);
}
.coach-bubble {
  background: linear-gradient(145deg, var(--card2), var(--card));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .75rem .95rem;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.coach-bubble p { font-size: .86rem; margin: 0; line-height: 1.45; }
.coach-bubble button {
  position: absolute;
  top: 4px;
  right: 8px;
  background: 0;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
}
@keyframes coachIn {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: none; opacity: 1; }
}


/* --- Ajouts FormationCertifIT --- */
.hidden { display: none !important; }
.section-sub { text-align: center; color: var(--muted); margin-bottom: 1.4rem; }
.btn-ghost { background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-green { background: var(--grad-cool); color: #06281f; border: none; }
.btn-purple { background: linear-gradient(135deg, #a78bfa, #f472b6); color: #1a1033; border: none; }
.btn-lg { padding: .8rem 1.4rem; font-size: .95rem; }

/* En-tête de page de cours (fil d'ariane + progression) */
.cours-crumb { font-size: .82rem; color: var(--muted); margin-bottom: .5rem; }
.cours-crumb a { color: var(--blue); }
.cours-crumb a:hover { text-decoration: underline; }
.cours-head h1 { color: #fff; font-size: clamp(1.5rem, 3.5vw, 2.2rem); line-height: 1.25; margin: 0 0 .4rem; }
.cours-desc { color: var(--muted); max-width: 760px; margin: 0 0 1.1rem; font-size: .97rem; }
.cours-prog { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.cours-prog .bar { flex: 1; min-width: 180px; max-width: 420px; height: 10px; background: rgba(255,255,255,.07); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.cours-prog .bar > span { display: block; height: 100%; width: 0; background: var(--grad-cool); border-radius: 999px; transition: width .4s; }
.cours-prog .pct { font-size: .84rem; color: var(--cyan); font-weight: 600; }

/* Nav des modules (marqueur ✓ / n°) */
.course-nav .mod-btn { font-family: inherit; }
.course-nav .mod-btn .mod-num { display: inline-block; min-width: 1.35em; color: var(--cyan); font-weight: 700; margin-right: .45rem; }
.course-nav .mod-btn.active { background: rgba(34,211,238,.14); color: var(--cyan); font-weight: 600; }

/* Pied de module : précédent / terminer / suivant */
.course-content h1 { color: #fff; font-size: 1.55rem; margin: 0 0 .9rem; line-height: 1.3; }
.mod-footer { display: flex; justify-content: space-between; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.08); }
.mod-footer .btn { font-size: .87rem; }