*{box-sizing:border-box;margin:0;padding:0}
:root{
  --noir:#080810;--gris-fonce:#10101e;--gris-moyen:#16213e;--bleu:#0f3460;
  --cyan:#00d4ff;--vert:#00ff88;--rouge:#ff4444;--or:#ffd700;--violet:#c800ff;
  --blanc:#f0f0f0;--gris-clair:#b0b0c0;--magenta:#ff00aa;
}
body{background:var(--noir);color:var(--blanc);font-family:'Segoe UI',Arial,sans-serif;font-size:15px;line-height:1.7}

/* HEADER */
header{
  background:linear-gradient(135deg,#080810 0%,#1a0030 40%,#0f3460 100%);
  border-bottom:3px solid var(--violet);padding:40px 20px 30px;text-align:center;position:relative;overflow:hidden;
}
header::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 20px,rgba(200,0,255,0.04) 20px,rgba(200,0,255,0.04) 21px),
  repeating-linear-gradient(90deg,transparent,transparent 20px,rgba(0,212,255,0.03) 20px,rgba(0,212,255,0.03) 21px);
}
.badge-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;position:relative}
.badge{display:inline-block;padding:4px 16px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.badge-violet{background:rgba(200,0,255,0.2);color:var(--violet);border:1px solid var(--violet)}
.badge-cyan{background:rgba(0,212,255,0.15);color:var(--cyan);border:1px solid var(--cyan)}
.badge-or{background:rgba(255,215,0,0.15);color:var(--or);border:1px solid var(--or)}
header h1{font-size:3em;font-weight:900;letter-spacing:3px;position:relative;text-shadow:0 0 40px rgba(200,0,255,0.6)}
header h1 .m{color:var(--violet)}
header h1 .f{color:var(--cyan)}
.subtitle{font-size:1em;color:var(--gris-clair);margin-top:10px;position:relative}
.header-stats{display:flex;justify-content:center;gap:20px;margin-top:24px;flex-wrap:wrap;position:relative}
.stat-box{text-align:center;border-radius:10px;padding:12px 20px;min-width:90px}
.stat-box.v{background:rgba(200,0,255,0.08);border:1px solid rgba(200,0,255,0.4)}
.stat-box.c{background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.3)}
.stat-box.o{background:rgba(255,215,0,0.08);border:1px solid rgba(255,215,0,0.3)}
.stat-box .val{font-size:1.5em;font-weight:900}
.stat-box.v .val{color:var(--violet)}
.stat-box.c .val{color:var(--cyan)}
.stat-box.o .val{color:var(--or)}
.stat-box .lbl{font-size:0.7em;color:var(--gris-clair);text-transform:uppercase;letter-spacing:1px}

/* NAV */
nav{background:var(--gris-fonce);border-bottom:1px solid rgba(200,0,255,0.2);padding:0 20px;display:flex;justify-content:center;flex-wrap:wrap;gap:0;position:sticky;top:0;z-index:100}
nav a{color:var(--gris-clair);text-decoration:none;padding:13px 15px;font-size:0.82em;font-weight:600;white-space:nowrap;border-bottom:3px solid transparent;transition:all 0.2s}
nav a:hover{color:var(--violet);border-bottom-color:var(--violet)}

/* MAIN */
main{max-width:1100px;margin:0 auto;padding:30px 20px 60px}
section{margin-bottom:50px}
.section-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid rgba(200,0,255,0.2)}
.section-num{font-weight:900;font-size:0.9em;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sn-v{background:var(--violet);color:#fff}
.sn-c{background:var(--cyan);color:var(--noir)}
.sn-o{background:var(--or);color:var(--noir)}
.section-header h2{font-size:1.5em;font-weight:800}
.section-header h2 .v{color:var(--violet)}
.section-header h2 .c{color:var(--cyan)}
.section-header h2 .o{color:var(--or)}

/* CARDS */
.card{background:var(--gris-fonce);border-radius:12px;padding:22px 26px;margin-bottom:18px}
.card-v{border:1px solid rgba(200,0,255,0.25)}
.card-c{border:1px solid rgba(0,212,255,0.2)}
.card-o{border:1px solid rgba(255,215,0,0.2)}
.card h3{font-size:1.05em;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card-v h3{color:var(--violet)}
.card-c h3{color:var(--cyan)}
.card-o h3{color:var(--or)}

/* GRIDS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  main{padding:20px 14px 50px}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  header{padding:28px 14px 22px}
  header h1{font-size:1.9em;letter-spacing:1px}
  .subtitle{font-size:0.88em}
  .header-stats{gap:10px}
  .stat-box{padding:9px 13px;min-width:75px}
  .stat-box .val{font-size:1.2em}
  nav a{padding:10px 10px;font-size:0.78em}
  .section-header h2{font-size:1.2em}
  .card{padding:16px 14px}
  table{font-size:0.78em}
  th,td{padding:6px 8px}
  .layer{flex-wrap:wrap;gap:8px}
  .magneto-hero .big{font-size:2.2em}
  .magneto-hero h2{font-size:1.2em}
}
@media(max-width:480px){
  header h1{font-size:1.4em}
  .header-stats{gap:7px}
  .stat-box{min-width:60px;padding:7px 10px}
  .stat-box .val{font-size:1em}
  .stat-box .lbl{font-size:0.62em}
  .badge{font-size:9px;padding:3px 10px}
  .section-header h2{font-size:1.05em}
  .spec-bar .lbl{font-size:0.72em;flex-direction:column;gap:0}
  .phase-badge{display:block;margin-bottom:4px}
  nav a{padding:9px 8px;font-size:0.72em}
  svg{max-width:100%}
}

/* TABLE */
table{width:100%;border-collapse:collapse;font-size:0.88em}
th{padding:9px 13px;text-align:left;font-weight:700;letter-spacing:0.5px}
th.v{background:rgba(200,0,255,0.15);color:var(--violet)}
th.c{background:rgba(0,212,255,0.12);color:var(--cyan)}
th.o{background:rgba(255,215,0,0.12);color:var(--or)}
td{padding:8px 13px;border-bottom:1px solid rgba(255,255,255,0.05);color:var(--gris-clair)}
tr:nth-child(even) td{background:rgba(255,255,255,0.02)}
tr:hover td{background:rgba(200,0,255,0.05)}

/* BOXES */
.alerte{border-left:4px solid var(--or);background:rgba(255,215,0,0.07);border-radius:0 8px 8px 0;padding:14px 18px;margin:14px 0;color:var(--or);font-size:0.9em}
.alerte strong{display:block;margin-bottom:4px}
.info-v{border-left:4px solid var(--violet);background:rgba(200,0,255,0.06);border-radius:0 8px 8px 0;padding:14px 18px;margin:14px 0;color:var(--gris-clair);font-size:0.9em}
.info-v strong{color:var(--violet);display:block;margin-bottom:4px}
.info-c{border-left:4px solid var(--cyan);background:rgba(0,212,255,0.06);border-radius:0 8px 8px 0;padding:14px 18px;margin:14px 0;color:var(--gris-clair);font-size:0.9em}
.info-c strong{color:var(--cyan);display:block;margin-bottom:4px}

/* SCHEMA */
.schema{background:#050508;border:1px solid rgba(200,0,255,0.2);border-radius:10px;padding:20px;font-family:'Courier New',monospace;font-size:0.78em;color:var(--cyan);overflow-x:auto;white-space:pre;line-height:1.45}
.schema.v{color:var(--violet);border-color:rgba(200,0,255,0.3)}
.schema.mix{color:#e0e0ff;border-color:rgba(200,0,255,0.3)}

/* STEPS */
.steps{list-style:none;counter-reset:step}
.steps li{counter-increment:step;display:flex;gap:14px;margin-bottom:14px;align-items:flex-start}
.steps li::before{content:counter(step);background:var(--bleu);color:var(--cyan);border:1px solid var(--cyan);font-weight:800;font-size:0.82em;min-width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px}
.steps.v li::before{background:rgba(200,0,255,0.2);color:var(--violet);border-color:var(--violet)}
.steps li .sc strong{color:var(--blanc);display:block;margin-bottom:2px}
.steps li .sc{color:var(--gris-clair)}

/* LISTS */
ul.check{list-style:none;padding:0}
ul.check li{padding:3px 0;color:var(--gris-clair)}
ul.check li::before{content:'✓ ';color:var(--vert);font-weight:700}
ul.cross li{padding:3px 0;color:var(--gris-clair)}
ul.cross li::before{content:'⚠ ';color:var(--or)}
ul.cross{list-style:none;padding:0}

/* TAGS */
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:0.75em;font-weight:700;margin:2px}
.tv{background:rgba(200,0,255,0.15);color:var(--violet);border:1px solid rgba(200,0,255,0.4)}
.tc{background:rgba(0,212,255,0.12);color:var(--cyan);border:1px solid rgba(0,212,255,0.35)}
.to{background:rgba(255,215,0,0.12);color:var(--or);border:1px solid rgba(255,215,0,0.35)}
.tg{background:rgba(0,255,136,0.1);color:var(--vert);border:1px solid rgba(0,255,136,0.35)}

/* SPEC BAR */
.spec-bar{margin:8px 0}
.spec-bar .lbl{font-size:0.8em;color:var(--gris-clair);margin-bottom:3px;display:flex;justify-content:space-between}
.spec-bar .bar{height:7px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden}
.spec-bar .fill-v{height:100%;border-radius:4px;background:linear-gradient(90deg,#5500aa,var(--violet))}
.spec-bar .fill-c{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--bleu),var(--cyan))}
.spec-bar .fill-h{height:100%;border-radius:4px;background:linear-gradient(90deg,#5500aa,var(--violet),var(--cyan))}

/* LAYER STACK */
.layer{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:8px;margin-bottom:8px}
.layer-num{font-weight:900;font-size:1.1em;min-width:28px;text-align:center}
.layer-bar{width:6px;border-radius:3px;align-self:stretch;min-height:40px}
.layer-info strong{display:block;font-size:0.95em;color:var(--blanc)}
.layer-info span{font-size:0.82em;color:var(--gris-clair)}

/* MAGNETO HERO */
.magneto-hero{
  background:linear-gradient(135deg,rgba(200,0,255,0.1),rgba(0,212,255,0.05));
  border:2px solid rgba(200,0,255,0.4);border-radius:16px;padding:28px;margin-bottom:24px;text-align:center;
}
.magneto-hero .big{font-size:3em;margin-bottom:8px}
.magneto-hero h2{font-size:1.6em;font-weight:900;color:var(--violet);margin-bottom:8px}
.magneto-hero p{color:var(--gris-clair);max-width:700px;margin:0 auto}

/* PHASE */
.phase-badge{display:inline-block;background:var(--bleu);color:var(--cyan);border:1px solid var(--cyan);border-radius:6px;padding:2px 10px;font-size:0.75em;font-weight:700;margin-right:8px}
.phase-badge.v{background:rgba(200,0,255,0.2);color:var(--violet);border-color:var(--violet)}

/* FOOTER */
footer{background:var(--gris-fonce);border-top:2px solid rgba(200,0,255,0.25);text-align:center;padding:30px 20px;color:var(--gris-clair);font-size:0.85em}
footer .logo{font-size:1.5em;font-weight:900;margin-bottom:8px}
footer .logo .m{color:var(--violet)}
footer .logo .f{color:var(--cyan)}

hr.div{border:none;border-top:1px solid rgba(200,0,255,0.1);margin:24px 0}