/* Palette basée sur ton AppBackground + logo (violet ➜ cyan) */
:root{
  /* fond sombre type AppBackground */
  --bg-1:#0d0e14; /* ~ 0.05,0.05,0.08 */
  --bg-2:#141826; /* ~ 0.08,0.08,0.12 */
  --text:#e9ecf4;
  --muted:#a0a8be;

  /* dégradé marque (logo) */
  --brand-start:#7b2cf6;  /* violet */
  --brand-end:#00c9ff;    /* cyan */

  /* UI */
  --card:#171b2a;
  --line:#252b40;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 20px 50px rgba(0,0,0,.35);
  --container:980px;
}

/* reset léger */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: radial-gradient(1200px 700px at 80% -10%, rgba(123,44,246,.15), transparent 60%),
              radial-gradient(1000px 700px at -10% 120%, rgba(0,201,255,.12), transparent 60%),
              linear-gradient(180deg,var(--bg-1),var(--bg-2));
  line-height:1.65;
}

/* containers */
.container{max-width:var(--container); margin-inline:auto; padding:24px 20px}

/* HEADER */
.header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(1.1) blur(10px);
  background:linear-gradient(180deg, rgba(13,14,20,.85), rgba(20,24,38,.65));
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
/* BRAND / LOGO */
.brand{
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:var(--text);
}

.brand__logo{
  position:relative;
  width:48px; height:48px; /* taille par défaut */
  display:grid; place-items:center;
  border-radius:14px; /* uniquement pour la bordure halo, pas de fond plein */
  overflow:visible; /* pour le halo autour */
}

/* version XL dans le header */
.brand__logo--xl{ width:56px; height:56px; border-radius:16px; }

/* le logo : on respecte sa transparence */
.brand__logo img{
  width:100%; height:100%;
  object-fit:contain; /* pas de recadrage */
  display:block;
}

/* Halo dégradé fin autour du logo (baguette gradient) */
.brand__logo::before{
  content:"";
  position:absolute; inset:-3px; border-radius:inherit;
  background:conic-gradient(from 20deg, var(--brand-start), var(--brand-end));
  filter:blur(10px) saturate(120%);
  opacity:.55; z-index:-1;
}

/* Bordure dégradée très fine (sans masquer la transparence du logo) */
.brand__logo::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  padding:2px;
  background:linear-gradient(135deg, var(--brand-start), var(--brand-end));
  -webkit-mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; /* Safari/WebKit */
  mask-composite: exclude;      /* autres */
  opacity:.5;
}
.header__inner{ padding-block:8px; }

/* Nom de marque un peu plus présent pour équilibrer le logo plus grand */
.brand__name{ font-weight:800; letter-spacing:.2px; font-size:18px; }
@media (max-width:640px){ .brand__name{ font-size:16px; } }


.nav a{
  color:var(--text); text-decoration:none; opacity:.85; margin-left:14px;
  padding:8px 10px; border-radius:10px; transition:opacity .2s, background .2s;
}
.nav a:hover{opacity:1; background:rgba(255,255,255,.05)}
.nav a[aria-current="page"]{
  background:linear-gradient(135deg, rgba(123,44,246,.25), rgba(0,201,255,.25));
  border:1px solid rgba(255,255,255,.08);
}

/* HERO */
.hero{padding-block:34px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; font-size:12px; font-weight:700; letter-spacing:.3px;
  background:rgba(0,201,255,.12); color:#bfefff;
  border:1px solid rgba(0,201,255,.28); border-radius:999px;
}
.badge--ok::before{
  content:"●"; width:6px; height:6px; display:inline-block; border-radius:50%;
  background:linear-gradient(135deg, #00dfa8, #31c48d);
}
.hero__title{
  font-size:36px; line-height:1.15; margin:14px 0 6px;
  background:linear-gradient(90deg,var(--brand-start),var(--brand-end));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 1px rgba(0,0,0,.15);
}
.hero__subtitle{max-width:780px; color:var(--muted); margin:0}

/* CONTENT */
.content{padding-bottom:48px}
.card{
  background:linear-gradient(180deg, rgba(23,27,42,.85), rgba(23,27,42,.65));
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:26px 22px;
}
.card h2{margin:18px 0 8px; font-size:22px}
.card p, .card li{color:#d7def3}
.card ul, .card ol{padding-left:20px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* LINKS */
a{color:#88d6ff; text-decoration:none}
a:hover{opacity:.95; text-decoration:underline}

/* FOOTER */
.footer{border-top:1px solid var(--line); background:rgba(10,12,20,.5)}
.footer__inner{display:flex; align-items:center; justify-content:center; padding:20px}

/* RESPONSIVE */
@media (max-width:640px){
  .hero__title{font-size:28px}
  .nav a{margin-left:8px}
}