/* =========================================================
   BASE (repris de ton fichier)
   ========================================================= */

:root{
  --bg: #ffffff;
  --panel: #f3f5f7;
  --panel-2: #eef2f6;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #4b6181;
  --accent: #0386c4;     /* couleur claire (hover, accents secondaires) */
  --accent-2: #046fa0;   /* couleur principale (liens, foncee) */
  --accent-bg: rgba(4,111,160,0.06);  /* fond clair derive de #046fa0 (label + barre verticale) */
  --border-2:#e2e8f0;
}

body{
  margin:0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.5;
}

.panel{
  background: linear-gradient(145deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 18px;
  margin: 16px 0;
}

/* =========================================================
   TYPO
   ========================================================= */

h1{ font-size:22px; }
h2{ font-size:18px; margin-top:16px; }
h3{ font-size:15px; margin-top:12px; }

p{
  color: var(--muted);
  margin-bottom:12px;
}

a{
  color: var(--accent-2);
  text-decoration: none;
}
a:hover{
  color: var(--accent);
  text-decoration: underline;
}

/* Blocs editoriaux "Principes en jeu" / "Applications dans le projet" */
.principes-mod a, .applications a {
  color: var(--accent-2, #046fa0);
  text-decoration: none;
}
.principes-mod a:hover, .applications a:hover {
  color: var(--accent, #0386c4);
  text-decoration: underline;
}
.principes-mod li, .applications li { margin: 3px 0; }
.principes-mod li::marker, .applications li::marker {
  color: var(--accent-2, #046fa0);
}

/* =========================================================
   AMÉLIORATION GLOBALE LISTES / LECTURE
   ========================================================= */

#discord{
  max-width: 980px;
  margin: auto;
}

/* LISTE PRINCIPALE */
#discord > ol{
  list-style:none;
  padding:0;
}

#discord > ol > li{
  position:relative;
  padding:16px 16px 16px 60px;
  margin-bottom:16px;
  background:#fff;
  border-radius:14px;
  border:1px solid var(--border-2);
}

#discord > ol > li::before{
  counter-increment:item;
  content: counter(item);
  counter-reset:item;
  position:absolute;
  left:15px;
  top:15px;
  width:32px;
  height:32px;
  background:var(--accent);
  color:white;
  font-weight:bold;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* SOUS LISTES */
#discord ul{
  list-style:none;
  padding-left:0;
}

#discord ul li{
  padding-left:20px;
  position:relative;
  margin:6px 0;
}

#discord ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:8px;
  height:8px;
  background:var(--accent);
  border-radius:50%;
}

/* BLOCS TEXTE */
.text-block{
  background:#fff;
  padding:16px;
  border-radius:14px;
  border:1px solid var(--border-2);
  margin:14px 0;
}

/* MODULES */
.module-block{
  background:#fff;
  border-radius:14px;
  border:1px solid var(--border-2);
  padding:16px;
  margin:16px 0;
}

/* TEAMS */
.team-line{
  font-weight:bold;
  margin-top:10px;
  display:block;
  padding-left:16px;
  position:relative;
}

.team-line::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:6px;
  height:6px;
  background:var(--accent-2);
  border-radius:50%;
}

/* HR propre */
hr{
  border:none;
  height:1px;
  background:linear-gradient(to right, transparent, var(--accent), transparent);
  margin:24px 0;
}