/* ===== Desktop / ≥981px (identique à l'origine) ===== */
:root{
  --brand:#4a6cf7; --accent:#44c8f7a8;
  --bg:#0f172a; --wrap:clamp(720px,92vw,1100px);
  --card:#0b1222; --subcard:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.12); --text:#e5e7eb; --muted:#a3b1d1;
  --radius:14px;
}

/* reset + base */
*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),#0b1222);
  color:var(--text);
  font:15px/1.65 Inter,system-ui,Segoe UI,Roboto,sans-serif
}

/* carte unique qui encadre tout le contenu légal */
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 6px 22px rgba(0,0,0,.28);
  backdrop-filter:blur(6px);
}

/* titres */
h1{
  margin:0 0 14px;
  font-size:2rem;
  background:linear-gradient(90deg,#d7ffe8,#ffffff,var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent
}
h2{margin:22px 0 10px; font-size:1.35rem; color:#fff}
h3{margin:18px 0 8px;  font-size:1.1rem;  color:#fff}

/* sous-cartes pour sections */
.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}

/* liens */
a{color:#cfe3ff; text-decoration:none; border-bottom:1px dashed transparent}
a:hover{border-bottom-color:#cfe3ff}

/* tableaux (si besoin) */
table{width:100%; border-collapse:collapse; margin:10px 0}
th,td{border:1px solid var(--line); padding:8px 10px}
th{background:rgba(255,255,255,.03); text-align:left}

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

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

/* ===== Mobile / ≤980px (adaptatif) ===== */
@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;
  }

  /* Listes respirantes sur petits écrans */
  ul,ol{margin:8px 0 8px 18px}

  /* Tables scrollables horizontalement */
  .table-wrap{overflow:auto; -webkit-overflow-scrolling:touch}
  table{min-width:600px; margin:8px 0}

  /* Boutons pleine largeur si seul */
  .back-home{width:100%; text-align:center}

  /* Footer compact */
  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))}
}