/* =====================================================================
   Feuille de style des PAGES LÉGALES — confidentialité, mentions légales,
   conditions d'utilisation, suppression de compte, en français et en anglais.

   POURQUOI UN FICHIER À PART

   Ces quatre pages existent en deux langues : huit fichiers. Le style était
   jusqu'ici recopié dans chacun, et il avait silencieusement vieilli — les
   pages portaient encore la palette turquoise d'avant la refonte du
   3 septembre 2026, alors que le site est passé au vert de feutrine. Une
   seule feuille pour les huit : le décalage ne peut plus revenir.

   ⚠️ LES CHEMINS SONT ABSOLUS (`/fonts/…`), et ce n'est pas un détail : les
   pages anglaises vivent dans `/en/`. En relatif, elles cherchaient leurs
   polices dans `/en/fonts/`, qui n'existe pas — elles s'affichaient depuis
   des mois dans la police du système. Le site n'est servi que depuis la
   racine de theyamsapp.com (invariant 11 d'ARCHITECTURE.md), l'absolu est
   donc sans risque ici.

   Les variables de couleur sont celles d'index.html : toute évolution de la
   palette du site doit être reportée ici. C'est le seul lien à tenir.
   ===================================================================== */

@font-face{font-family:'Outfit';font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/outfit-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/outfit-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/plusjakarta-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/plusjakarta-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- La palette du site (copie de celle d'index.html) ---------- */
:root{
  --paper:#F1EFE7; --card:#ffffff; --ink:#16211C; --muted:#5E6A63;
  --line:#E3E0D5; --line-strong:#CFCBBD;
  --accent:#1F5B44; --accent-fill:#1F5B44; --accent-soft:#E3EDE7; --accent-ink:#123A2B;
  --danger:#e11d48;
  --radius:20px;
  --shadow:0 1px 2px rgba(22,33,28,.05), 0 8px 24px -14px rgba(22,33,28,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1310; --card:#161F1A; --ink:#EEF2EE; --muted:#95A19A;
    --line:#232E28; --line-strong:#354339;
    --accent:#6FBF9B; --accent-fill:#256A4F; --accent-soft:#1A2A22; --accent-ink:#9BD3B8;
    --danger:#fb7185;
    --shadow:0 8px 30px -6px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --paper:#0D1310; --card:#161F1A; --ink:#EEF2EE; --muted:#95A19A;
  --line:#232E28; --line-strong:#354339;
  --accent:#6FBF9B; --accent-fill:#256A4F; --accent-soft:#1A2A22; --accent-ink:#9BD3B8;
  --danger:#fb7185;
  --shadow:0 8px 30px -6px rgba(0,0,0,.45);
}

/* Les pages légales suivent le thème clair/sombre comme le jeu : sans
   `color-scheme`, un navigateur repeint lui-même les surfaces natives. */
:root{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 40px) env(safe-area-inset-left);
}
.wrap{max-width:760px; margin:0 auto; padding:16px 16px 0}

/* ---------- L'en-tête, identique à celui du jeu ---------- */
header{display:flex; align-items:center; gap:8px; margin-bottom:18px; padding:0 2px}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0;
  text-decoration:none; color:var(--ink)}
.logo{
  width:38px; height:38px; border-radius:12px; background:var(--accent-fill);
  display:grid; place-items:center; flex:none; box-shadow:var(--shadow);
  transition:transform .2s ease
}
.brand:hover .logo{transform:rotate(-4deg) scale(1.05)}
.logo img{width:22px; height:22px; display:block}
.bname{font-family:'Outfit',sans-serif; font-size:21px; font-weight:700; letter-spacing:-.02em;
  display:block; line-height:1.1; white-space:nowrap}
.bsub{font-size:12px; color:var(--muted); display:block; font-weight:500}
.icon-btn{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--line); color:var(--muted);
  box-shadow:var(--shadow); flex:none; text-decoration:none;
  transition:all .15s cubic-bezier(.4,0,.2,1)
}
.icon-btn:hover{color:var(--ink); border-color:var(--line-strong)}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:19px; height:19px; display:block}

/* ---------- Titres et chapeau ---------- */
h1{font-family:'Outfit',sans-serif; font-weight:800; font-size:1.9rem; line-height:1.15;
  letter-spacing:-.02em; margin:0 0 6px}
h2{font-family:'Outfit',sans-serif; font-weight:700; font-size:1.15rem; margin:0 0 8px;
  letter-spacing:-.01em; color:var(--accent-ink)}
h3{font-family:'Outfit',sans-serif; font-weight:700; font-size:1rem; margin:18px 0 4px}
.lead{color:var(--muted); margin:0 0 8px}
.updated{color:var(--muted); font-size:13px; margin:0 0 18px}

/* ---------- La barre des quatre pages légales ----------
   Sans elle, chaque page était une impasse : il fallait revenir au jeu pour
   atteindre la suivante. */
.legal-nav{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px}
.legal-nav a{
  font-size:13.5px; font-weight:600; text-decoration:none; padding:7px 13px;
  border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--muted)
}
.legal-nav a:hover{color:var(--ink); border-color:var(--line-strong)}
.legal-nav a[aria-current="page"]{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink)}

/* ---------- Les cartes ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px 22px; margin-bottom:16px}
p{margin:8px 0}
a{color:var(--accent)}
ul,ol{margin:8px 0; padding-left:20px}
li{margin:6px 0}
.muted{color:var(--muted)}
strong.k{color:var(--accent-ink)}

/* Encadré d'appel : sert surtout à la marche à suivre pour supprimer un compte. */
.note{background:var(--accent-soft); border-radius:14px; padding:14px 16px; margin:12px 0}
.note p:first-child{margin-top:0}
.note p:last-child{margin-bottom:0}
.note.warn{background:transparent; border:1px solid var(--danger)}

/* Le bouton plein du jeu, repris pour « Retour au jeu » en bas de page. */
.btn{
  display:inline-grid; place-items:center; height:48px; padding:0 22px; border-radius:14px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:15.5px; font-weight:700;
  text-decoration:none; background:var(--accent-fill); color:#fff; border:0;
  transition:all .15s cubic-bezier(.4,0,.2,1)
}
.btn:active{transform:scale(.96)}
.btn.ghost{background:var(--card); border:1px solid var(--line); color:var(--muted)}
.btn.ghost:hover{color:var(--ink); border-color:var(--line-strong)}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 8px}

footer{max-width:760px; margin:10px auto 0; padding:0 16px; color:var(--muted); font-size:13px}
footer a{color:var(--muted)}

/* L'anneau de focus du jeu : même repère au clavier d'un bout à l'autre du site. */
:where(a,button,summary,[tabindex]):focus-visible{outline:2.5px solid var(--accent); outline-offset:2px}

@media (max-width:430px){
  .wrap{padding:12px 14px 0}
  h1{font-size:1.6rem}
  .card{padding:18px 16px; border-radius:16px}
}