/* ===== Base layout & tokens ===== */
:root {
  --bg: #ffffff;
  --fg: #1f2328;
  --muted2: #ffffff;
  --muted: #69717c;
  --line: #e6e8eb;
  --brand: #5a439e;
  --code-bg: #f6f8fa;
  --code-fg: #0f172a;
  --sidebar: #f8fafc;
  --accent: #e2e8f0;
  --radius: 12px;
}

/* Pastille "édité" */
.md .md-datedit{
  display: block;
  text-align: right;       /* aligné à droite */
  color: var(--muted);     /* gris clair de ton thème */
  font-size: .875rem;      /* un peu plus petit */
  margin: .25rem 0 .55rem; /* respiration verticale */
  white-space: nowrap;     /* garde la ligne compacte (optionnel) */
}


/* Bloc copier : s’adapte à la longueur du texte */
.md-copy{
  display: inline-flex;          /* au lieu de block/flex plein largeur */
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  border: 1px solid #2a2a2a;
  border-radius: .5rem;
  background: rgba(255,255,255,.03);
  width: fit-content;            /* shrink-to-content */
  max-width: 100%;               /* ne dépasse jamais le conteneur */
}

.md-copy code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem;
  white-space: nowrap;           /* pas de retour à la ligne dans la commande */
}

.md-copy-btn{
  /* surtout PAS de margin-left:auto ici, sinon ça étire à 100% */
  border: 1px solid #3a3a3a;
  border-radius: .4rem;
  padding: .35rem .6rem;
  background: #1f1f1f;
  color: #eee;
  cursor: pointer;
}

/* Confort mobile : si la commande est longue, autorise le scroll horizontal */
@media (max-width: 520px){
  .md-copy{ max-width: 95vw; }
  .md-copy code{ overflow-x: auto; display: block; }
}





/* ============ CALLOUTS ============ */
.callout{
  /* Couleur par défaut + calculs automatiques */
  --callout-color: #94a3b8;
  --callout-bg: color-mix(in srgb, var(--callout-color) 14%, var(--bg, #0b0b0f));
  --callout-border: color-mix(in srgb, var(--callout-color) 55%, var(--line, #2a2a2a));

  border: 1px solid var(--callout-border);
  border-left-width: 4px;
  background: var(--callout-bg);
  border-radius: .75rem;
  padding: .75rem .9rem;
  margin: 1rem 0;
  color: var(--fg);
}

.callout__header{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
  line-height: 1.25;
}
.callout__icon{
  color: var(--callout-color);
  font-size: 1rem;
}
.callout__title{
  font-weight: 700;
  color: var(--callout-color);
}

/* Variantes prédéfinies : ne changent que la couleur,
   le fond/bordure sont recalculés automatiquement */
.callout-note    { --callout-color:#94a3b8; }
.callout-info    { --callout-color:#60a5fa; }
.callout-success { --callout-color:#22c55e; }
.callout-warning { --callout-color:#f59e0b; }
.callout-danger  { --callout-color:#ef4444; }

/* Variante pilotée par Markdown: ![embed-<couleur>](Titre)
   La couleur exacte est injectée en inline par le JS via --callout-color */

/* Contenu interne : laisser ton markdown gérer les marges */
.callout__body > :first-child { margin-top: 0; }
.callout__body > :last-child  { margin-bottom: 0; }

/* Fallback si color-mix() n'est pas supporté (navigateurs anciens) */
@supports not (background: color-mix(in srgb, #000 10%, #fff)) {
  .callout{
    background: var(--callout-bg, rgba(148,163,184,.10));
    border-color: var(--callout-border, rgba(148,163,184,.45));
  }
  .callout-note    { --callout-bg: rgba(148,163,184,.10); --callout-border: rgba(148,163,184,.45); }
  .callout-info    { --callout-bg: rgba(96,165,250,.10);  --callout-border: rgba(96,165,250,.45);  }
  .callout-success { --callout-bg: rgba(34,197,94,.10);   --callout-border: rgba(34,197,94,.45);   }
  .callout-warning { --callout-bg: rgba(245,158,11,.12);  --callout-border: rgba(245,158,11,.45);  }
  .callout-danger  { --callout-bg: rgba(239,68,68,.12);   --callout-border: rgba(239,68,68,.50);   }
}

/* Spécifique aux embeds : titre + icône en blanc */
.callout-embed .callout__title,
.callout-embed .callout__icon {
  color: var(--code-fg); /* toujours blanc */
}







/* ===================== */
/*  Images & centrages   */
/* ===================== */

.md-img{
  display: block;          /* utile pour la mise en page des images standards */
  max-width: 100%;
  height: auto;
}

/* Wrapper pour centrer une image rendue via <div class="md-img-center">… */
.md-img-center{
  display: block;
  width: fit-content;      /* shrink-wrap → le wrapper prend la largeur de l’image */
  margin-left: auto;       /* centré horizontalement */
  margin-right: auto;
}

/* Icônes/mini-images alignées au texte (override .md-img) */
.md-img.md-text-img{
  display: inline-block;   /* écrase le display:block de .md-img */
  vertical-align: middle;
  margin-left: .35em;
  margin-right: .35em;
  image-rendering: pixelated; /* optionnel pour le pixel-art */
}

/* (option) limite de logo sur grands écrans */
.md-logo{
  width: min(90vw, 480px);
}

/* ===================== */
/*  Lien interne: GOTO   */
/* ===================== */

.md a.md-goto{
  text-decoration: none;          /* pas de soulignement */
  color: #8ab4ff;                 /* même palette que tes liens */
  font-weight: 700;
  position: relative;
  transition: color .2s ease;
}

/* petite flèche avant le texte (discrète) */
.md a.md-goto::before{
  display: inline-block;
  margin-right: .35em;
  transform: translateX(-2px);
  opacity: .9;
  transition: transform .15s ease, opacity .2s ease;
}

/* hover: teinte un peu plus claire + flèche qui glisse */
.md a.md-goto:hover{
  color: #bfd6ff;
}
.md a.md-goto:hover::before{
  transform: translateX(0);
  opacity: 1;
}

/* focus accessible (clavier) */
.md a.md-goto:focus-visible{
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: .2rem;
}



/* ===================== */
/*     Listes natives    */
/* ===================== */

.md ul,
.md ol{
  list-style:revert;
  padding-left:1.25rem;
  margin:.75rem 0;
}
.md li{
  display:list-item;
  margin:.25rem 0;
}
/* Petites icônes propres dans les listes */
.md li > i,
.md li > img.md-text-img{
  vertical-align:middle;
  margin-right:.35em;
}

/* ===================== */
/*  Liens “Markdown”     */
/* ===================== */

.md a[href]:not([class]):not([role="button"]){
  text-decoration:none;
  color:#8ab4ff;
  font-family:"Poppins", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  font-weight:600;
  position:relative;
  display:inline-block;
  transition:color .2s ease, background-size .2s ease;
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
}
.md a[href]:not([class]):not([role="button"]):hover{
  color:#bfd6ff;
  background-size:100% 2px;
}
.md a[href]:not([class]):not([role="button"]):visited{
  color:#c09bff;
}
.md a[href]:not([class]):not([role="button"]):focus-visible{
  outline:2px solid #3b82f6;
  outline-offset:2px;
  border-radius:.25rem;
}

/* ===================== */
/*      Anti-spoil       */
/* ===================== */

.md-spoil{
  position:relative;
  display:inline-block;      /* par défaut : contenu à sa largeur */
  background:transparent;
  border:2px solid #ef4444;  /* bordure rouge autour de l’image spoilée */
  border-radius:10px;
  padding:0;
  overflow:hidden;
  cursor:pointer;
  isolation:isolate;         /* pour l’overlay */
}

/* survol (option) */
.md-spoil:hover{ border-color:#ff8fa3; }

/* Image floutée/assombrie tant que non révélée */
.md-spoil img{
  display:block;
  filter:blur(10px);
  opacity:.2;
  transition:filter .2s ease, opacity .2s ease, transform .15s ease;
  pointer-events:none;       /* ne bloque pas le clic sur le bouton */
}

/* Bandeau “Cliquez pour voir” */
.md-spoil .md-spoil-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  font-size:.95rem;
  padding:.35rem .6rem;
  color:#fff;
  background:rgba(1,0,10,.92);
  backdrop-filter:blur(1px);
  border-radius:.6rem;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}

/* État révélé (classe .open ajoutée par JS) */
.md-spoil.open img{
  filter:none;
  opacity:1;
}
.md-spoil.open .md-spoil-overlay{
  opacity:0;
  visibility:hidden;
}
/* (option) cacher la bordure une fois révélé */
/* .md-spoil.open{ border-color:transparent; } */

/* Accessibilité focus clavier */
.md-spoil:focus-visible{
  outline:2px solid #8ab4ff;
  outline-offset:2px;
}

/* Centrage fiable quand c’est à la fois anti-spoil ET centré */
.md-spoil.md-img-center{
  display:block;             /* remplace inline-block pour autoriser margin auto */
  width:fit-content;         /* shrink-wrap */
  margin-left:auto;
  margin-right:auto;
}








* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto;
  color: var(--fg);
  background: var(--bg);
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

.app {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr 280px;
  min-height: 100vh
}

/* Sidebar */
.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  position: fixed;
  inset: 0 auto 0 0;
  /* top:0; left:0; bottom:0 */
  width: 300px;
  height: 100vh;
  overflow-y: auto;
}



/* Scrollbar grise, compatible Chrome/Edge/Safari + Firefox, pour .sidebar seulement */
.toc {
  /* Firefox */
  scrollbar-width: thin;
  /* "auto" | "thin" */
  scrollbar-color: #b5b5b5 transparent;
  /* thumb | track */
}

/* Chromium/WebKit */
.toc::-webkit-scrollbar {
  width: 10px;
}

.toc::-webkit-scrollbar-track {
  background: transparent;
  /* neutre pour clair/sombre */
}

.toc::-webkit-scrollbar-thumb {
  background-color: #b5b5b5;
  /* gris */
  border-radius: 8px;
  border: 2px solid transparent;
  /* crée un peu d'espace */
  background-clip: content-box;
  /* garde le bord net */
}

.toc::-webkit-scrollbar-thumb:hover {
  background-color: #9a9a9a;
  /* gris un poil plus foncé au hover */
}




/* Scrollbar grise, compatible Chrome/Edge/Safari + Firefox, pour .sidebar seulement */
.sidebar {
  /* Firefox */
  scrollbar-width: thin;
  /* "auto" | "thin" */
  scrollbar-color: #b5b5b5 transparent;
  /* thumb | track */
}

/* Chromium/WebKit */
.sidebar::-webkit-scrollbar {
  width: 10px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
  /* neutre pour clair/sombre */
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #b5b5b5;
  /* gris */
  border-radius: 8px;
  border: 2px solid transparent;
  /* crée un peu d'espace */
  background-clip: content-box;
  /* garde le bord net */
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #9a9a9a;
  /* gris un poil plus foncé au hover */
}










/* Décaler le reste pour ne pas passer dessous */
.app {
  grid-template-columns: 1fr 280px;
  /* main + toc */
  margin-left: 300px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700
}

.logo {
  border-radius: 6px;
  padding: 4px
}

.title {
  font-weight: 800;
  font-size: 20px;
}

.filter {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg)
}

.nav {
  overflow: auto;
  padding-right: 6px;
  flex: 1
}

.nav a {
  display: block;
  padding: 2px 4px;
  border-radius: 6px;
  color: var(--fg);
  text-decoration: none
}

.nav a:hover {
  background: var(--accent)
}

.nav .group {
  margin: 10px 0 6px;
  font-weight: 200;
  color: var(--muted)
}

/* Catégories pliables */
.nav details.group {
  margin: 4px 0
}

.nav details.group>summary.group-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 4px 2px;
  border-radius: 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  color: var(--muted);
}

.nav details.group[open]>summary.group-summary {
  color: var(--fg);
}

.nav details.group>summary.group-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform .2s ease;
}

.nav details.group[open]>summary.group-summary::before {
  transform: rotate(90deg);
}

.nav .items a{
  display:flex;              /* <= clé */
  align-items:center;        /* centre l’icône verticalement */
  gap:8px;                   /* espace icône/texte */
  padding:3px 4px 3px 24px;
  border-radius:6px;
  color:var(--fg);
  margin-left:12px;
  text-decoration:none;
}


.nav .items a:hover {
  background: var(--accent)
}

/* Icônes des catégories principales */
.nav summary .nav-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  flex: 0 0 24px;
  vertical-align: -3px;
  border-radius: 3px;
}

/* Icônes des sous-catégories */
.nav .items .nav-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  vertical-align: middle;
  border-radius: 3px;
}

/* Lien des sous-catégories : alignement icône + texte */
.nav .items a {
  display: flex;
  align-items: center;
  gap: 8px;
}


.nav details.group > summary.group-summary{
  display:flex; align-items:center;
}


.aside-footer{
  display:flex;
  align-items:center;
  justify-content:space-between; /* lien totalement à gauche, bouton totalement à droite */
  gap:8px;
  width:100%;
  margin-top:auto;               /* optionnel : colle le bloc en bas de l’aside */
}

/* (optionnel) un peu de cohérence d'alignement interne */
.btn, .btn-retour-aside{
  display:inline-flex;
  align-items:center;
}

/* tes styles existants */
.btn{
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--fg);
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
}

.btn-retour-aside{
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--fg);
  font-weight:700;
  font-size:.90rem;
  padding:6px 8px;
  border-radius:8px;
  text-decoration:none;
  cursor:pointer;
}

.btn-retour-aside:hover{
  background: rgba(255, 255, 255, 0.05);
}



/* Main */
.main {
  min-height: 100%;
  display: flex;
  flex-direction: column
}

.topbar {
  position: sticky;
  top: 0;
  backdrop-filter: saturate(180%) blur(6px);
  background: color-mix(in oklab, var(--bg), transparent 8%);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  z-index: 1
}

.home-link {
  color: var(--brand);
  text-decoration: none
}

.home-link-title {
  color: var(--color-bg);
  text-decoration: none
}

.breadcrumb {
  color: var(--muted);
  font-size: 14px
}

.spacer {
  flex: 1
}

.content {
  padding: 24px 28px 30px;
  max-width: 1200px
}

.content h1,
.content h2,
.content h3 {
  scroll-margin-top: 80px
}

pre {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 14px;
  border-radius: 8px;
  overflow: auto;
  border: 1px solid var(--line)
}

code {
  background: var(--code-bg);
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid var(--line)
}

table {
  border-collapse: collapse;
  width: 100%
}

th,
td {
  border: 1px solid var(--line);
  padding: 8px
}

blockquote {
  border-left: 3px solid var(--brand);
  padding: 6px 12px;
  background: color-mix(in oklab, var(--brand), transparent 92%);
  border-radius: 6px
}

















/* TOC (colonne droite, sticky) */
.toc {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;

  /* nouveau : layout colonne */
  display: flex;
  flex-direction: column;

  background: var(--bg);
  border-left: 1px solid var(--line);
  padding: 14px;
}

/* zone scrollable des liens */
.toc-scroll {
  flex: 1;
  /* prend toute la hauteur dispo */
  overflow-y: auto;
  /* scroll interne uniquement pour la liste */
  padding-right: 6px;
}

/* Titre */
.toc .toc-title {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif, 'Times New Roman', Times, serif;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--muted);
}

/* Liens de sections uniquement */
.toc a.level-2,
.toc a.level-3 {
  display: block;
  padding: 4px 6px;
  color: var(--fg);
  text-decoration: none;
  border-radius: 6px;
}

.toc a.level-2 {
  padding-left: 6px;
}

.toc a.level-3 {
  padding-left: 18px;
}

.toc a.level-2:hover,
.toc a.level-3:hover {
  background: var(--accent);
}

/* (optionnel) scrollbar fine, joli */
.toc::-webkit-scrollbar {
  width: 8px;
}

.toc::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 8px;
}


/* Footer du TOC sans espacement extérieur */
.toc-footer{
  margin: 0;                 /* pas de marge externe */
  padding: 10px 0;           /* un peu de padding interne seulement en haut/bas */
  border-top: 1px solid var(--line);
  background: transparent;   /* pas de fond qui crée un effet de carte */
}

/* Liste verticale compacte */
.contact-list{
  list-style: none;
  margin: 0;                 /* aucune marge extérieure */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;                  /* espace interne entre lignes (modifiable) */
}

/* Lien d’une ligne (icône + label + valeur) */
.contact-link{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;            /* pas de padding latéral pour coller aux bords du TOC */
  border-radius: 0;          /* pas d arrondi = pas d’effet carte */
  text-decoration: none;
  color: var(--fg);
  font-size: 13px;
  transition: color .2s ease, transform .15s ease;
}

.contact-link:hover{ transform: translateY(-1px); }

.contact-link i{
  font-size: 16px;
  width: 18px;
  text-align: center;
}

.contact-link .label{ opacity: .8; }
.contact-link .value{ font-weight: 600; }

/* Couleurs de marque (inchangé) */
.contact-discord i{ color:#5865F2; }
.contact-website i{ color:#8ab4ff; }
.contact-youtube i{ color:#ff0033; }
.contact-tiktok i{ color:#25F4EE; }

/* Mobile : un poil plus serré */
@media (max-width: 420px){
  .contact-link{ padding: 5px 0; font-size: 12px; }
  .contact-link i{ font-size: 15px; width: 16px; }
}























/* -------------------------------------------------
   BOUTON "RETOUR SUR AZURIA-PVP"
   ------------------------------------------------- */
.btn-retour{
  display:inline-block;
  background-color:#463298;     /* violet principal */
  color:#fff;
  font-weight:700;
  font-size:.90rem;
  padding:.65rem .7rem;
  border-radius:.9rem;
  text-decoration:none;
  transition:background-color .2s ease, transform .15s ease;
  /* qu'il puisse se réduire */
  flex:0 1 auto;
  max-width:35vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.btn-retour:hover{ background-color:#6848d1; }

/* -------------------------------------------------
   TOPBAR / LAYOUT DE LA LIGNE
   ------------------------------------------------- */
.topbar{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;              /* permet à brand-top d'aller sur la ligne au-dessus */
  z-index:1100;
}
.topbar > *{ flex:0 0 auto; }  /* par défaut, pas d'étirement */
.topbar .breadcrumb{
  flex:1 1 auto;               /* prend l'espace restant */
  min-width:0;                 /* autorise l’ellipsis */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.spacer{ flex:1 1 auto; }      /* pousse le bouton retour et le TOC à droite */

/* Bouton TOC compact (reste sur la même ligne) */
.toc-toggle{
  display:none;                /* desktop par défaut (réactivé en mobile) */
  width:36px; height:36px;
  align-items:center; justify-content:center;
  background:none; border:none; padding:0;
  font-size:20px; cursor:pointer; color:var(--fg);
}

/* Bouton hamburger (desktop: caché) */
.hamburger{
  display:none;
  background:none; border:none;
  font-size:24px; cursor:pointer; color:var(--fg);
}

/* -------------------------------------------------
   BRAND MOBILE (logo + Azuria-PvP) AU-DESSUS
   ------------------------------------------------- */
.topbar .brand-top{
  display:none;                /* caché sur grand écran */
  align-items:center;
  justify-content:center;
  gap:.4rem;
  text-decoration:none;
  color:var(--fg);
  font-weight:800;
  font-size:2.2rem;
}

/* -------------------------------------------------
   BREAKPOINT PRINCIPAL (≤ 1020px)
   ------------------------------------------------- */
@media (max-width:1020px){

  /* brand au-dessus */
  .topbar{ gap:.4rem; }
  .topbar .brand-top{
    display:flex;
    order:-1;                  /* passe en 1ère ligne */
    width:100%;
    margin-top:.25rem;
  }

  /* boutons visibles en mobile */
  .hamburger,
  .toc-toggle{ display:inline-flex; }

  /* animation légère (option) */
  .hamburger,
  .toc-toggle{
    animation:glow 3.5s infinite alternate;
  }
  @keyframes glow{
    0%{   text-shadow:0 0 1px #d1d1d1, 0 0 1px #fff4ff, 0 0 30px #fff; }
    100%{ text-shadow:0 0 1px #fff, 0 0 2px #fff0ff, 0 0 30px #cacaca; }
  }

  /* breadcrumb un peu plus petit */
  .breadcrumb{ color:var(--muted); font-size:.85rem; }

  /* bouton retour plus compact en mobile */
  .btn-retour{
    font-size:.85rem;
    padding:.35rem .55rem;
    max-width:40vw;
    border-radius:.55rem;
  }

  /* Sidebar overlay */
  .sidebar{
    position:fixed; left:-300px; top:0;
    height:100%; width:300px;
    transition:left .3s ease;
    z-index:1000;
    background:var(--sidebar);
    padding-top:124px;         /* évite le chevauchement sous la topbar */
  }
  .sidebar.open{ left:0; }

  /* TOC overlay */
  .toc{
    position:fixed; right:-280px; top:0;
    height:100%; width:280px;
    transition:right .3s ease;
    z-index:1000;
    padding-top:124px;         /* évite le chevauchement sous la topbar */
    background:var(--sidebar);
  }
  .toc.open{ right:0; }

  /* layout global mobile */
  .app{ margin-left:0; grid-template-columns:1fr; }
}

/* -------------------------------------------------
   PALIERS SUPPLÉMENTAIRES : affiner la taille du bouton
   ------------------------------------------------- */
@media (max-width:720px){
  .btn-retour{
    display:none;
    font-size:.80rem;
    padding:.32rem .50rem;
    max-width:38vw;
  }
  .topbar{ gap:.35rem; }
}

@media (min-width:720px){
  .btn-retour-aside{ display:none; }  /* cachés en desktop */
}

/* -------------------------------------------------
   DESKTOP UNIQUEMENT (≥ 1021px)
   ------------------------------------------------- */
@media (min-width:1021px){
  .hamburger, .btn-retour-aside,
  .toc-toggle{ display:none; }  /* cachés en desktop */
}























.site-footer{
  margin-top: 2rem;
  padding: .9rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--fg);
  font-size: .9rem;
}
.site-footer__inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* Bloc logo */
.site-footer__brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .6rem;
  text-decoration: none;
}
.site-footer__logo{
  /* responsive : 64px mini, jusqu'à 140px max, sinon 50% de la largeur */
  width: clamp(254px, 50vw, 256px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Texte */
.site-footer__text{ margin: 0; }

/* Liens */
.site-footer a{
  color: #8ab4ff;
  text-decoration: none;
  font-weight: 600;
}
.site-footer a:hover{ text-decoration: underline; }