/* Palette reprise de l'application */
:root{
  --creme:#fdf6ea;
  --creme-fonce:#f6ebd8;
  --encre:#3b2f56;
  --violet:#7d6ab8;
  --violet-clair:#a495d8;
  --dore:#eeb43f;
  --sarcelle:#48998f;
  --trait:#e3d5bd;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--creme);
  color:var(--encre);
  font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.65;
}
.bandeau{
  background:linear-gradient(160deg,#8f7cc6,#6f5aa8);
  color:#fff;
  padding:2.6rem 1.5rem 2.2rem;
  position:relative;
  overflow:hidden;
}
.bandeau::after{
  content:"";position:absolute;inset:auto 0 0 0;height:74px;
  background:repeating-linear-gradient(to bottom,transparent 0 14px,rgba(255,255,255,.16) 14px 15px);
  pointer-events:none;
}
.bandeau-inner{max-width:44rem;margin:0 auto;position:relative;z-index:1;display:flex;gap:1.1rem;align-items:center}
.bandeau img{width:64px;height:64px;border-radius:15px;flex:none;display:block}
.bandeau h1{margin:0;font-size:1.6rem;line-height:1.2;letter-spacing:-.01em}
.bandeau p{margin:.3rem 0 0;opacity:.85;font-size:.95rem}
main{max-width:44rem;margin:0 auto;padding:2.4rem 1.5rem 4rem}
h2{font-size:1.3rem;margin:2.6rem 0 .7rem;line-height:1.25}
h2:first-child{margin-top:0}
h3{font-size:1.02rem;margin:1.7rem 0 .35rem;color:var(--violet)}
p,li{max-width:62ch}
a{color:var(--sarcelle);text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--dore);outline-offset:3px;border-radius:4px}
.chapo{font-size:1.08rem;border-left:4px solid var(--dore);padding-left:1rem;margin-bottom:2rem}
.encart{background:var(--creme-fonce);border-radius:14px;padding:1.1rem 1.3rem;margin:1.8rem 0}
.encart p:last-child{margin-bottom:0}
.encart p:first-child{margin-top:0}
ul{padding-left:1.15rem}
li{margin:.3rem 0}
.maj{font-size:.87rem;color:#7a6c8c;margin-top:.4rem}
.bascule{max-width:44rem;margin:0 auto;padding:.9rem 1.5rem;border-bottom:1px solid var(--trait);font-size:.92rem}
footer{border-top:1px solid var(--trait);margin-top:3rem;padding-top:1.4rem;font-size:.9rem;color:#7a6c8c}
footer a{color:#7a6c8c}
hr.sep{border:0;border-top:2px dashed var(--trait);margin:3.5rem 0}
.autres ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.7rem}
.autres li{margin:0;max-width:none}
.autres a{display:flex;gap:.9rem;align-items:center;background:var(--creme-fonce);border-radius:14px;padding:.8rem 1rem;color:var(--encre);text-decoration:none;font-size:.95rem;line-height:1.4}
.autres a:hover strong{text-decoration:underline}
.autres img{width:48px;height:48px;border-radius:11px;flex:none}
@media (max-width:520px){
  body{font-size:16px}
  .bandeau h1{font-size:1.32rem}
  .bandeau img{width:52px;height:52px}
}