/**
 * Pages légales publiques (/mentions-legales, /confidentialite).
 *
 * Elles n'ont ni JavaScript ni composant d'application : une feuille courte,
 * posée sur les tokens, suffit. Un seul point mérite de l'attention : les
 * tableaux de la politique de confidentialité comptent quatre colonnes de
 * prose et ne tiennent pas dans un téléphone. Ils défilent donc à l'intérieur
 * de leur cadre, jamais la page entière.
 */

.legal-body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-copy);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

.legal-skip{position:absolute;left:-9999px;}
.legal-skip:focus{
  left:16px;top:16px;z-index:10;
  padding:12px 16px;border-radius:12px;
  background:var(--color-text);color:var(--color-on-dark);
}

.legal-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px max(16px,env(safe-area-inset-left)) 16px max(16px,env(safe-area-inset-right));
  border-bottom:1px solid var(--color-border);
}
.legal-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;}
.legal-mascot{width:30px;height:30px;display:block;}
.legal-brand-name{font-weight:700;letter-spacing:-.01em;}
.legal-back{
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  color:var(--color-accent-strong);text-decoration:underline;text-underline-offset:3px;
}

.legal-main{max-width:760px;margin:0 auto;padding:32px 20px 64px;}

.legal-article h1{
  font-size:clamp(30px,7vw,44px);line-height:1.1;letter-spacing:-.02em;
  margin:0 0 8px;color:var(--color-text);
}
.legal-date{margin:0 0 32px;color:var(--color-accent-strong);font-size:15px;}

.legal-article h2{
  font-size:clamp(21px,4.4vw,26px);line-height:1.25;letter-spacing:-.01em;
  margin:40px 0 12px;color:var(--color-text);
}
.legal-article h3{font-size:19px;margin:28px 0 8px;color:var(--color-text);}
.legal-article p{margin:0 0 16px;}
.legal-article ul{margin:0 0 16px;padding-left:22px;}
.legal-article li{margin-bottom:8px;}
.legal-article strong{font-weight:700;color:var(--color-text);}
.legal-article a{color:var(--color-accent-strong);text-underline-offset:3px;}
.legal-article code{
  font-family:var(--font-mono,"IBM Plex Mono",monospace);font-size:.92em;
  background:var(--color-surface-high);padding:1px 5px;border-radius:6px;
}

/* Un tableau de prose ne se plie pas : il défile dans son cadre, et le cadre
   est atteignable au clavier pour qu'on puisse le faire défiler sans souris. */
.legal-table-scroll{
  overflow-x:auto;
  margin:0 0 24px;
  border:1px solid var(--color-border);
  border-radius:12px;
  background:var(--color-surface);
}
.legal-table-scroll:focus-visible{outline:2px solid var(--color-blue);outline-offset:2px;}
.legal-table-scroll table{border-collapse:collapse;min-width:620px;width:100%;font-size:15px;}
.legal-table-scroll th,.legal-table-scroll td{
  text-align:left;vertical-align:top;
  padding:12px 14px;border-bottom:1px solid var(--color-border-faint);
}
.legal-table-scroll th{
  background:var(--color-surface-high);color:var(--color-text);
  font-weight:600;white-space:nowrap;
}
.legal-table-scroll tr:last-child td{border-bottom:0;}

.legal-other{
  display:flex;flex-wrap:wrap;gap:8px 24px;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--color-border);
}
.legal-other a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--color-accent-strong);text-underline-offset:3px;
}

.legal-footer{
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid var(--color-border);
  color:var(--color-copy);font-size:14px;text-align:center;
}

@media (min-width:720px){
  .legal-header{padding-left:32px;padding-right:32px;}
  .legal-main{padding:56px 32px 80px;}
}