/* ===== static/legal.css ===== */
/* ===== Desktop / ≥981px (par défaut, fidèle à l’original clair) ===== */
:root{
  --brand:#4a6cf7; --accent:#44c8f7a8;
  --bg:#fafafa; --card:#ffffff; --line:#e5e7eb;
  --wrap:clamp(720px,92vw,1100px);
  --fg:#111111; --muted:#444444;
  --radius:12px; --shadow:0 4px 16px rgba(0,0,0,.06);
}

/* 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%;
}
img,svg,video{max-width:100%;height:auto}

/* Focus visible accessibilité */
:is(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}

/* Carte unique qui encadre le contenu légal */
main.wrap{
  width:var(--wrap);
  margin:32px auto;
  padding:24px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Titres */
h1{font-size:2rem; margin:0 0 12px; color:var(--fg)}
h2{font-size:1.3rem; margin:18px 0 8px; color:var(--fg)}
h3{font-size:1.05rem; margin:14px 0 6px; color:var(--fg)}
:target{scroll-margin-top:18px}

/* Texte */
p{margin:0 0 12px}
ul{margin:8px 0 8px 20px}
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:var(--brand); text-decoration:none; border-bottom:1px dashed transparent}
a:hover{text-decoration:none; border-bottom-color:var(--brand)}

/* Tableaux génériques */
table{width:100%; border-collapse:collapse; margin:10px 0}
th,td{border:1px solid var(--line); padding:8px 10px; vertical-align:top}
th{background:#f7f9ff; text-align:left}

/* Blocs optionnels si présents dans le HTML */
.card{
  background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:16px 18px; margin:14px 0;
}
.card h2,.card h3{margin-top:0}

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

/* Réduction des animations si demandé par l’utilisateur */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

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

  /* Safe-areas iOS */
  body{
    padding-left:max(0px,env(safe-area-inset-left));
    padding-right:max(0px,env(safe-area-inset-right));
    padding-bottom:max(0px,env(safe-area-inset-bottom));
    font-size:clamp(14px,1.6vw + .2rem,16px);
  }

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

  /* Typo fluide */
  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}

  /* Lisibilité et césure sur petits écrans */
  p,li,td,th{hyphens:auto; overflow-wrap:anywhere; word-break:break-word}

  /* Tables scrollables sans changer le HTML */
  table{
    display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
    white-space:nowrap; border-spacing:0; max-width:100%;
  }
  thead,tbody,tr{display:table; width:100%; table-layout:fixed}
  /* Conserve les contrastes d’origine (fonds inchangés) */

  /* Bouton type "retour" pleine largeur si présent */
  .back-home{width:100%; text-align:center}

  /* Footer compact */
  footer{padding:14px; font-size:.92rem}
}

/* Safe-area complément pour le padding bas de la carte */
@supports(padding:max(0px)){
  main.wrap{padding-bottom:max(clamp(16px,3.2vw,22px), env(safe-area-inset-bottom))}
}