/* ===== Desktop / ≥981px ===== */
:root{
  --brand:#4a6cf7; --accent:#44c8f7a8;
  --bg:#fafafa; --wrap:clamp(720px,92vw,1100px);
  --card:#ffffff; --subcard:rgba(0,0,0,.02);
  --line:#e5e7eb; --fg:#111111; --muted:#444444;
  --radius:14px;
}

/* reset + base */
*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:15px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--brand);text-decoration:none;border-bottom:1px dashed transparent}
a:hover{border-bottom-color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Carte principale */
main.wrap{
  width:var(--wrap);
  margin:32px auto;
  padding:28px 24px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}

/* Titres */
h1{
  margin:0 0 14px;
  font-size:2rem;
  background:linear-gradient(90deg,#111,var(--brand) 40%,#111);
  -webkit-background-clip:text; background-clip:text; color:transparent
}
h2{margin:22px 0 10px;font-size:1.35rem;color:var(--fg)}
h3{margin:18px 0 8px;font-size:1.1rem;color:var(--fg)}

/* Sous-cartes */
.card{
  background:var(--subcard);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
  margin:14px 0;
}
.card h2,.card h3{margin-top:0}

/* Texte */
p{margin:0 0 12px}
ul,ol{margin:8px 0 8px 22px}
small,.note{color:var(--muted)}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* Tableaux */
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;margin:10px 0;min-width:600px}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left}
th{background:rgba(0,0,0,.03)}

/* Bouton retour */
.back-home{
  display:inline-block;margin-top:18px;padding:10px 16px;
  border:1px solid var(--line);background:#fff;color:var(--fg);
  border-radius:10px;text-align:center
}
.back-home:hover{border-color:var(--brand);color:var(--brand)}

/* Pied de page */
footer{text-align:center;color:var(--muted);padding:18px 0 26px;font-size:.95rem}
footer a{color:var(--brand);margin:0 6px}

/* ===== Mobile / ≤980px ===== */
@media (max-width:980px){
  :root{--wrap:clamp(320px,94vw,1100px)}

  body{font-size:clamp(14px,1.6vw,16px)}

  main.wrap{
    margin:clamp(16px,3.2vw,24px) auto;
    padding:clamp(16px,3.2vw,22px);
    border-radius:12px;
  }

  h1{font-size:clamp(1.5rem,6.2vw,2rem);margin-bottom:12px}
  h2{font-size:clamp(1.05rem,4.2vw,1.25rem);margin:18px 0 8px}
  h3{font-size:clamp(.98rem,3.8vw,1.1rem);margin:14px 0 6px}

  .card{
    padding:clamp(14px,3vw,18px);
    margin:12px 0;
    border-radius:12px;
  }

  ul,ol{margin:8px 0 8px 18px}

  .table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
  table{min-width:500px;margin:8px 0}
  th,td{font-size:clamp(13px,3.6vw,14px)}

  .back-home{width:100%;text-align:center;padding:12px}

  footer{padding:14px 0 20px;font-size:.92rem}
}

/* Safe-areas iOS */
@supports(padding:max(0px)){
  main.wrap{padding-bottom:max(clamp(16px,3.2vw,22px),env(safe-area-inset-bottom))}
}