/* Pages légales — même identité que l'app, servie depuis le même domaine. */
:root{
  color-scheme:dark;
  --bg:#0d0c0a;
  --panel:#171512;
  --line:#35312b;
  --ink:#f0ece2;
  --dim:#9a9184;
  --orange:#ff5c38;
  --yellow:#ffd23f;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;
  src:url('fonts/bricolage-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:'Bricolage Grotesque';
  font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;
  src:url('fonts/bricolage-latin-ext.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;
}
*{box-sizing:border-box;}
html,body{background:var(--bg);}
body{
  margin:0;padding:0 18px 60px;
  color:var(--ink);
  font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:620px;margin:0 auto;}

/* Retour a l'app. Bouton borde plutot que lien texte : sur telephone,
   une cible de 46 px se vise, un lien de 12 px se manque. */
.home-btn{
  display:inline-flex;align-items:center;gap:9px;
  margin:26px 0 24px;padding:0 16px;min-height:46px;
  background:var(--orange);border:2.5px solid var(--orange);
  box-shadow:4px 4px 0 var(--ink);
  color:#0d0c0a;font-size:13px;font-weight:800;letter-spacing:.05em;
  text-decoration:none;
}
.home-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}
.home-btn svg{flex:none;}

h1{
  font-size:clamp(26px,6vw,36px);font-weight:800;line-height:1.05;
  letter-spacing:-.01em;margin:0 0 6px;text-wrap:balance;
  text-transform:uppercase;
}
.maj{
  font-size:11px;color:var(--dim);letter-spacing:.05em;
  margin:0 0 26px;text-transform:uppercase;
}

section{
  border:2px solid var(--line);background:var(--panel);
  padding:18px;margin-bottom:14px;
}
h2{
  font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--orange);margin:0 0 10px;
}
p{font-size:15px;line-height:1.62;color:var(--ink);margin:0 0 12px;}
p:last-child,ul:last-child{margin-bottom:0;}
ul{margin:0 0 12px;padding-left:20px;}
li{font-size:15px;line-height:1.62;color:var(--ink);margin-bottom:7px;}
li:last-child{margin-bottom:0;}
strong{font-weight:800;}
a{color:var(--orange);}
.dim{color:var(--dim);font-size:13px;line-height:1.6;}

.footer{
  display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;padding:26px 0 0;margin-top:20px;
  border-top:2px solid var(--line);
}
/* 44 px de haut : un lien de pied de page doit rester tappable. */
.footer a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  color:var(--dim);font-size:11px;text-decoration:none;letter-spacing:.03em;
}
.footer a:hover,.footer a:focus-visible{color:var(--ink);text-decoration:underline;}
.footer .sep{color:var(--line);font-size:11px;}

/* ---------------------------------------------------------------- guide */
/* Les etapes sont numerotees parce qu'il y a un vrai ordre : on ne coche
   pas une serie avant de l'avoir creee. Ailleurs, pas de numeros. */
.etape{display:flex;gap:14px;margin-bottom:18px;}
.etape:last-child{margin-bottom:0;}
.etape .num{
  flex:none;width:30px;height:30px;
  background:var(--orange);color:#0d0c0a;
  font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.etape .corps{flex:1;min-width:0;}
.etape h3{font-size:15px;font-weight:800;margin:4px 0 6px;color:var(--ink);}
.etape p{margin:0 0 6px;}

/* Un bouton de l'app, cite dans le texte. */
.touche{
  display:inline-block;padding:2px 7px;
  border:2px solid var(--ink);background:var(--bg);
  font-size:12px;font-weight:800;letter-spacing:.03em;
  white-space:nowrap;
}
.touche.orange{background:var(--orange);border-color:var(--orange);color:#0d0c0a;}

.note{
  border-left:3px solid var(--orange);
  padding:2px 0 2px 13px;margin:14px 0 0;
}
.note p{margin:0;}

/* Echelle RPE : deux colonnes qui s'alignent. */
.echelle{width:100%;border-collapse:collapse;font-size:14px;}
.echelle td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.echelle tr:last-child td{border-bottom:none;}
.echelle .v{
  width:52px;font-weight:800;color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.echelle .d{color:var(--ink);line-height:1.45;}