/* Mandragore Learning Academy — Charte commune des guides Help
   V46 — base visuelle partagée
   Les pages conservent uniquement leurs styles spécifiques. */

:root{
  --navy:#102a44;
  --blue:#0c4f8a;
  --blue2:#2f80ed;
  --bg:#f4f7fa;
  --card:#fff;
  --border:#d9e1e8;
  --text:#172033;
  --muted:#627286;
  --soft:#eef4fa;
  --info-bg:#edf5ff;
  --info-b:#cfe2fa;
  --good-bg:#e9f8ef;
  --good-b:#bfe5ca;
  --warn-bg:#fff4d6;
  --warn-b:#efd788;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.58;
}
a{color:var(--blue2)}

/* Barre supérieure */
.bar{
  max-width:1180px;
  margin:10px auto 0;
  padding:0 18px;
  display:flex;
  gap:10px;
  justify-content:space-between;
  flex-wrap:wrap;
}
.back,.langs{display:flex;gap:8px;flex-wrap:wrap}
.btn,.btnx,.langs a{
  padding:8px 12px;
  border:1px solid #c8d6e5;
  border-radius:9px;
  background:#fff;
  color:#0d4f8b;
  text-decoration:none;
  font-weight:800;
  font-size:12px;
}
.langs{display:flex;gap:5px}
.langs a.active{background:#0d4f8b;color:#fff}

/* Hero */
.top{
  background:linear-gradient(135deg,#102a44,#153b5f);
  color:#fff;
  padding:34px 20px;
}
.topin{max-width:1180px;margin:auto}
.kick{
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#b8d9f5;
}
.top h1{margin:6px 0 8px;font-size:32px}
.top p{max-width:980px;margin:0;color:#d9e8f5}

/* Structure */
.shell{
  max-width:1180px;
  margin:22px auto 50px;
  padding:0 18px;
  display:grid;
  grid-template-columns:255px minmax(0,1fr);
  gap:20px;
}
.nav{
  position:sticky;
  top:12px;
  align-self:start;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}
.nav strong{display:block;margin:2px 6px 9px}
.nav a{
  display:block;
  padding:8px 10px;
  border-radius:9px;
  text-decoration:none;
  color:#30445a;
  font-size:13px;
  font-weight:700;
}

/* Cartes */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  margin-bottom:18px;
}
.card h2{margin:0 0 9px;font-size:22px;color:var(--navy)}
.card p{margin:7px 0;color:#394b60}

/* Encarts */
.note{
  padding:12px 14px;
  border-radius:11px;
  margin:12px 0;
  font-size:13px;
  background:var(--info-bg);
  border:1px solid var(--info-b);
}
.note.good{background:var(--good-bg);border-color:var(--good-b)}
.note.warn{background:var(--warn-bg);border-color:var(--warn-b)}
.note.soft{background:#f8fafc;border-color:#dde7f0}

/* Captures : 70 % standard, 60 % medium, 45 % small */
.shot{margin:16px 0 4px;text-align:center}
.shot img{
  display:block;
  width:70%;
  max-width:760px;
  height:auto;
  margin:0 auto;
  border:1px solid #d5dde5;
  border-radius:12px;
  cursor:zoom-in;
}
.shot.small img{width:45%;max-width:440px}
.shot.medium img{width:60%;max-width:620px}
.shot.large img,.shot.full img,.shot.wide img,.shot.strip img{width:70%;max-width:760px}
.shot figcaption{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
  text-align:left;
}

/* Listes et pied */
.list{padding-left:20px}
.list li{margin:8px 0}
.footer{font-size:12px;color:#6a7889;text-align:center;padding:10px}

/* Lightbox */
.lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(4,13,23,.86);
  padding:24px;
  align-items:center;
  justify-content:center;
}
.lightbox.open{display:flex}
.lightbox img{max-width:96vw;max-height:92vh;border-radius:10px}
.lightbox button{
  position:fixed;
  top:14px;
  right:18px;
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid #fff;
  background:#0008;
  color:#fff;
  font-size:28px;
}

/* Responsive */
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .nav{position:relative}
  .shot img,.shot.small img,.shot.medium img,.shot.large img,.shot.full img,.shot.wide img,.shot.strip img{
    width:100%;
    max-width:100%;
  }
}