/* ============================================================================
   Doc content + Markdown styling (GitHub-ish)
   ============================================================================ */

.article.markdown {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text);
}

.article.markdown h1 {
  font-size: 48px;
  font-weight: 800;
  margin: 4px 0 10px;
  letter-spacing: -0.02em;
}

.article.markdown h2 {
  font-size: 36px;
  font-weight: 800;
  margin: 38px 0 10px;
  letter-spacing: -0.01em;
}

.article.markdown h1,
.article.markdown h2 {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}

.article.markdown p {
  color: var(--text);
  margin: 14px 0;
}

.article.markdown ul {
  margin: 14px 0 18px 22px;
}

.article.markdown li {
  margin: 10px 0;
}

.article.markdown hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}

.article.markdown a { color: var(--link); }

/* Code */
.article.markdown code {
  font-family: var(--font-mono);
  background: rgba(110, 118, 129, 0.18);
  border: 1px solid rgba(110, 118, 129, 0.25);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9em;
}

.article.markdown pre {
  background: rgba(110, 118, 129, 0.12);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  overflow: auto;
}

.article.markdown pre code {
  background: transparent;
  border: 0;
  padding: 0;
}

/* Tables */
.article.markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
}

.article.markdown th,
.article.markdown td {
  border: 1px solid var(--border);
  padding: 10px 12px;
}

.article.markdown th {
  background: var(--surface-2);
  text-align: left;
}

.article.markdown .lead { color: var(--muted); font-size: 22px; margin-top: 10px; }


.table.tabcenter {
  display: table;
  margin-left: auto;
  margin-right: auto;
  width: auto; /* 🔑 indispensable */
}
   
.row {
  display: table-row;
}

.cell {
 display: table-cell;
}

/* ============================================================================
   Doc shell
   ============================================================================ */

.doc-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  margin: 18px auto 0;
  max-width: var(--page-max);
}

/* Sidebar */
.sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  padding: 12px;
}

.navfilter {
  width: 100%;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
  outline: none;
  margin-bottom: 10px;
}

/* Tree navigation */
.tree,
.tree-children {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tree-root {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--text);
  font-weight: 700;
}

.tree-item {
  margin: 0;
}

.tree-folder summary,
.tree-leaf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.tree-folder summary:hover,
.tree-leaf:hover {
  background: rgba(110, 118, 129, 0.12);
}

.tree-leaf.is-active {
  outline: 1px solid rgba(240, 173, 35, 0.65);
  background: rgba(240, 173, 35, 0.12);
}

.tree-folder .twisty {
  width: 14px;
  color: var(--muted);
  display: inline-block;
}

.tree-leaf .twisty {
  width: 14px;
  display: inline-block;
}

.tree-folder .icon,
.tree-leaf .icon,
.tree-root .icon {
  width: 18px;
  display: inline-flex;
  justify-content: center;
  opacity: 0.9;
}

.tree-children {
  padding-left: 18px;
}

/* ============================================================================
   Doc content
   ============================================================================ */

.doc-content {
  background: var(--surface);
}

.article {
  padding: 18px 20px 12px;
}

/* Meta + mini-actions */
.doc-footerline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.doc-meta {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-mini-actions {
  display: inline-flex;
  gap: 8px;
}



/* ============================================================================
   Doc shell — grille 2 colonnes, largeur max 1150px
   ============================================================================ */

.doc-shell{
  width: min(1150px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr; /* TOC large, contenu pas trop large */
  gap: 18px;
  align-items: start;
}

/* ============================================================================
   TOC — pas de boîte, pas de bordure, fond = fond du site
   ============================================================================ */

.doc-toc{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Si ton composant de TOC utilise un conteneur interne "card"/"panel" */
.doc-toc *{
  box-shadow: none;
}

/* ============================================================================
   Colonne contenu — boîte à droite en --color03
   ============================================================================ */

.doc-content{
  min-width: 0; /* évite débordements */
}

.doc-card{
  background: var(--color03);
  border: 1px solid var(--color04);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  overflow: hidden;
}

/* espace intérieur du contenu */
.doc-card-body{
  padding: 28px 28px 22px;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 980px){
  .doc-shell{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}


/* ============================================================================
   Layout Doc — 1150px, TOC sans boîte, contenu dans une boîte --color03
   ============================================================================ */

/* Le conteneur global TOC + contenu : pas de boîte, max 1150px */
.site-main .doc-shell{
  max-width: 1150px !important;
  width: min(1150px, calc(100% - 32px)) !important;
  margin: 5px auto 0 !important;         /* réduit l’espace sous la navbar-tabs */
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: 18px !important;
  align-items: start !important;
  
/* IMPORTANT: une ancienne règle .doc-shell définit overflow:hidden.
   Cela casse/limite position: sticky dans la colonne TOC. */
  overflow: visible !important;
}

/* TOC (gauche) : fond du site, aucune boîte */
.site-main .doc-shell > .doc-toc{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Si un wrapper interne “fait une boîte” dans la TOC, on le neutralise */
.site-main .doc-toc *{
  box-shadow: none !important;
}

/* Colonne contenu (droite) : pas de boîte sur le conteneur */
.site-main .doc-shell > .doc-content{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

/* La boîte doit être UNIQUEMENT sur doc-card */
.site-main .doc-content > .doc-card{
  background: var(--color03) !important;
  border: 1px solid var(--color04) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25) !important;
  overflow: hidden !important;
}

/* Mobile */
@media (max-width: 980px){
  .site-main .doc-shell{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}












/* ============================================================================
   CdR / Doc — layout central (1150px, TOC à gauche, card à droite)
   ============================================================================ */

.doc-shell{
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 10px;

  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: start;
}

/* TOC : pas de boîte */
.doc-toc{
  background: transparent;
  border: 0;
  padding: 0;
  min-width: 0;
}

/* Contenu colonne droite */
.doc-content{
  min-width: 0;
  background: transparent;
}

/* Card contenu */
.doc-card{
  background: var(--color03);
  border: 1px solid var(--color04);
  border-radius: 6px;
  position: relative;

  /* réserve bas pour les boutons sociaux */
  padding-bottom: 46px;
}

/* Barre d’actions sticky en haut de la card */
.doc-card-topbar{
  position: sticky;
  top: 10px;
  z-index: 5;

  display: flex;
  justify-content: flex-end;

  background: linear-gradient(to bottom, var(--color03), rgba(0,0,0,0));
  padding: 10px 10px 6px;

  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.doc-card-actions{
  display: inline-flex;
  gap: 8px;
}

/* Corps */
.doc-card-body{
  padding: 14px 16px 10px;
}

/* Boutons sociaux (bas-droite, non flottants) */
.doc-card-social{
  position: absolute;
  right: 10px;
  bottom: 10px;

  display: inline-flex;
  gap: 8px;
}

/* Ligne meta (tout en bas) */
.doc-footerline{
  border-top: 1px solid var(--color04);
  padding: 10px 16px;
  font-size: 0.95rem;
  opacity: 0.92;
}

.doc-meta{
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
   Markdown — images centrées + liens color01
   ============================================================================ */

.markdown img,
.article img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

.site-main .article.markdown a,
.site-main .doc-card-body.article.markdown a{
  color: var(--color01);
  text-decoration-color: var(--color01);
}

.site-main .article.markdown a:hover,
.site-main .article.markdown a:focus-visible,
.site-main .doc-card-body.article.markdown a:hover,
.site-main .doc-card-body.article.markdown a:focus-visible{
  color: var(--color01);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.markdown a img,
.article a img{
  border: none;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 980px){
  .doc-shell{
    grid-template-columns: 1fr;
  }
  .doc-card-topbar{
    top: 6px;
  }
}


/* =========================
   Sticky TOC — desktop + mobile overlay (COMPLET + stylage TOC)
   ========================= */

/* 1) Sticky peut casser si overflow/transform sur ancêtres */
.site-main,
.doc-shell{
  overflow: visible !important;
}
.site-main,
.doc-shell,
.doc-toc{
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* 2) Desktop: colonne TOC sticky + hauteur viewport */
.site-main .doc-shell > aside.doc-toc{
  position: sticky;
  top: 16px;
  align-self: start !important;
  height: calc(100vh - 32px);
  overflow: hidden;   /* empêche la colonne de faire scroller la page */
  min-height: 0;
}

/* 3) Desktop: panel visible (pas modal) */
.cdr-toc-panel{
  display: block;
  height: 100%;
}

/* 4) Wrapper interne: outils en haut + nav scrollable */
.cdr-toc-wrap{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.cdr-toc{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}

/* Mobile controls (hidden on desktop) */
.cdr-toc-mobilebar{ display: none; }
.cdr-toc-overlay{ display: none; }
.cdr-toc-panel-head{ display: none; }

/* Empêche scroll de page quand le panneau mobile est ouvert */
html.toc-modal-open,
html.toc-modal-open body{
  overflow: hidden;
}

/* ========================================================================
   Mobile: bouton menu + panneau overlay
   ======================================================================== */
@media (max-width: 980px){

  /* colonne TOC redevient “dans le flux” */
  .site-main .doc-shell > aside.doc-toc{
    position: static;
    top: auto;
    height: auto;
    overflow: visible;
    min-height: auto;
  }

  /* barre mobile visible en mobile */
  .cdr-toc-mobilebar{
    display: flex;
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 10px 0;
    background: var(--bg);
  }

  /* Variante flottante (JS ajoute .is-floating) */
  .cdr-toc-mobilebar.is-floating{
    position: fixed;
    top: auto;
    left: auto;
    right: 16px;
    bottom: 16px;
    z-index: 110;
    padding: 0;
    background: transparent;
    pointer-events: none;
  }
  .cdr-toc-mobilebar.is-floating .toc-mobilebtn{
    pointer-events: auto;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
  }

  /* bouton menu */
  .toc-mobilebtn{
    appearance:none;
    border: 1px solid var(--color05);
    background: var(--color01) !important;
    color: #fff;
    width: 44px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .toc-mobilebtn:hover{
    background: var(--color05);
    color: var(--color01);
  }

  /* overlay */
  .cdr-toc-overlay{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 90;
  }
  .cdr-toc-overlay.is-open{ display: block; }

  /* panel modal (fermé par défaut) */
  .cdr-toc-panel{
    display: none;
    position: fixed;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    z-index: 100;

    background: var(--bg);
    border: 1px solid var(--color05);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);

    overflow: hidden;
    height: auto;
  }
  .cdr-toc-panel.is-open{ display: block; }

  /* head du panel (bouton X) */
  .cdr-toc-panel-head{
    display:flex;
    justify-content:flex-end;
    padding: 8px 8px 0 8px;
  }

  /* wrap prend le reste, nav scrolle */
  .cdr-toc-panel .cdr-toc-wrap{
    height: calc(100% - 44px);
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
  }
  .cdr-toc-panel .cdr-toc{
    flex: 1 1 auto;
    min-height:0;
    overflow:auto;
    padding-right: 6px;
  }
}

/* =========================
   CdR TOC (SidebarNav)
   ========================= */

/* base: la taille actuelle correspond à ### */
.cdr-toc{ font-size: 15px; }

/* -------------------------------------------------------------------------
   Outils (filtre + boutons ouvrir/fermer) — couleurs validées
   ------------------------------------------------------------------------- */
.cdr-toc-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
  margin: 0 0 10px 0;
}

/* Bouton X (toc-close) : caché en desktop */
.cdr-toc-tools .toc-tool.toc-close{
  display: none !important;
}

@media (max-width: 980px){
  /* Bouton X visible en mobile, dans la rangée d'outils */
  .cdr-toc-tools .toc-tool.toc-close{
    display: inline-flex !important;
  }
}

.toc-filter{
  flex: 1 1 auto;
  min-width: 120px;

  appearance:none;
  border: 1px solid var(--color05);
  background: var(--color04);
  color: inherit;

  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  outline: none;
}

.toc-filter::placeholder{
  color: var(--color12);
  opacity: .9;
}

.toc-filter:focus{
  border-color: var(--color05);
  background: var(--color05);
}

/* boutons ouvrir/fermer */
.toc-tool{
  appearance:none;
  border: 1px solid var(--color05);
  background: var(--color04);
  color: inherit;
  width: 34px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.toc-tool:hover{
  background: var(--color05);
  color: var(--color01);
}

.toc-tool-ico{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* -------------------------------------------------------------------------
   Nodes
   ------------------------------------------------------------------------- */
.toc-node{ margin: 2px 0; }

.toc-head{
  position: relative;
  padding: 2px 0;
}

.toc-row{
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.25;
  position:relative;
  padding-left: var(--toc-indent, 0px);
  padding-top: 3px;
  padding-bottom: 3px;
}

/* toggle / spacer */
.toc-toggle, .toc-spacer{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 18px;
}
.toc-toggle{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  opacity:.9;
}
.toc-toggle::before{
  content:"▸";
  display:inline-block;
  transition: transform .12s ease;
  transform-origin: 50% 50%;
}
.toc-toggle[aria-expanded="true"]::before{ transform: rotate(90deg); }

/* icônes FA4 */
.toc-ico-spacer{
  width:18px;
  display:inline-block;
  flex: 0 0 18px;
}

/* fallback indentation */
.toc-node[data-level="1"]{ --toc-indent: 0px; }
.toc-node[data-level="2"]{ --toc-indent: 12px; }
.toc-node[data-level="3"]{ --toc-indent: 22px; }
.toc-node[data-level="4"]{ --toc-indent: 34px; }
.toc-node[data-level="5"]{ --toc-indent: 46px; }

/* tailles */
.toc-node[data-level="1"] .toc-link{ font-size: 19px; font-weight: 700; }
.toc-node[data-level="2"] .toc-link{ font-size: 17px; font-weight: 650; }
.toc-node[data-level="3"] .toc-link{ font-size: 15px; font-weight: 600; }
.toc-node[data-level="4"] .toc-link{ font-size: 13px; font-weight: 550; }
.toc-node[data-level="5"] .toc-link{ font-size: 11px; font-weight: 500; }

/* liens */
.cdr-toc a.toc-link{
  text-decoration:none !important;
  color: var(--color12) !important;
}
.cdr-toc a.toc-link:hover{
  color: var(--color01) !important;
}
.cdr-toc a.toc-link.is-active{
  color: var(--color11) !important;
  font-weight:700;
}

/* marqueur actif */
:root{ --toc-active: #f59e0b; }

.toc-node{ position: relative; }
.toc-node.is-active-node::before{
  content:"";
  position:absolute;
  left: 2px;
  top: -2px;
  bottom: -2px;
  width: 4px;
  border-radius: 3px;
  background: var(--toc-active);
}

/* enfants */
.toc-children{ display:none; margin: 2px 0 6px 0; }
.toc-children.is-open{ display:block; }

/* pastilles */
.toc-badges{
  margin-top: 4px;
  margin-bottom: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-left: calc(var(--toc-indent, 0px) + 52px);
}

.toc-badge{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--color01);
  color: #fff !important;
  font-size: 12px;
  text-decoration: none !important;
  line-height: 1.4;
}
.toc-badge:hover{ filter: brightness(1.06); }

/* -------------------------------------------------------------------------
   Filtre — logique pastilles
   ------------------------------------------------------------------------- */
.toc-node.is-filtered-out{ display:none !important; }

.toc-badges.is-filtering .toc-badge{
  background: var(--color04) !important;
  color: var(--color12) !important;
  filter: none !important;
  opacity: .85;
}

.toc-badges.is-filtering .toc-badge.is-filter-hit{
  background: var(--color01) !important;
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
}

.toc-badges.is-filtering .toc-badge.is-filter-hit:hover{
  filter: brightness(1.06) !important;
}

/* utilitaire existant */
.toc-node.is-hidden{ display:none !important; }




/* ============================================================================
   Doc actions — Print / Copy buttons
   ========================================================================== */

.doc-card-actions .iconbtn.mini {
  background: var(--color02);
  border: 1px solid var(--color03);
  color: var(--color01);
  border-radius: 6px;
  padding: 6px 8px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

/* Icône */
.doc-card-actions .iconbtn.mini .icon {
  color: var(--color01);
}

/* Hover / focus */
.doc-card-actions .iconbtn.mini:hover,
.doc-card-actions .iconbtn.mini:focus-visible {
  border-color: var(--color04);
}

/* Icône au hover */
.doc-card-actions .iconbtn.mini:hover .icon,
.doc-card-actions .iconbtn.mini:focus-visible .icon {
  color: var(--color11);
}

/* Active (clic) — optionnel mais agréable */
.doc-card-actions .iconbtn.mini:active {
  transform: translateY(1px);
}



/* ============================================================================
   Print — Doc pages (Astro)
   ========================================================================== */
@media print {
  /* Masquer UI (site + doc) */
  #page-header,
  header.site-header,
  header[role="banner"],
  .crumbbar,
  .doc-toc,
  .doc-card-actions,
  .doc-card-social {
    display: none !important;
  }

  /* Page "papier" propre */
  html, body {
    background: #fff !important;
    color: #111 !important;
  }

  .doc-shell {
    display: block !important;
  }

  .doc-content {
    width: 100% !important;
    max-width: none !important;
  }
  
  /* Impression : ne jamais inverser les images "-I" */
  img[src*="-I." i]{
    filter: none !important;
  }

  /* Important : ne pas laisser d'UI-card inutile en print */
  .doc-card {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  /* Titres */
  .article.markdown h1 {
    text-align: center !important;
    margin: 24px 0 16px !important;
  }

  /* Images */
  .article.markdown img {
    max-width: 70% !important;
    height: auto !important;
    display: block !important;
    margin: 16px auto !important;
  }

  /* Afficher l’URL après liens externes */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 11px;
    color: #666;
  }
  a[href^="#"]::after,
  a[href^="/"]::after {
    content: "";
  }
}

/* Copy URL — feedback */
.iconbtn.is-copied {
  border-color: var(--color04) !important;
}

.iconbtn.is-copied .icon {
  color: var(--color11) !important;
}


/* ============================================================================
   TOC mobile: panel slide-in + overlay
   ========================================================================== */
/* Bouton TOC sur la carte */
.doc-card { position: relative; }

.toc-mobilebtn{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 50;
}

/* Desktop: pas de bouton mobile */
@media (min-width: 981px){
  .toc-mobilebtn{ display:none !important; }
}

/* Overlay + panel TOC en mobile */
@media (max-width: 980px){
  .cdr-toc-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 1900;
  }
  html.toc-open .cdr-toc-overlay{
    opacity: 1;
    pointer-events: auto;
  }

  /* le panel = aside.doc-toc */
  .doc-toc{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(88vw, 420px);
    background: var(--color02);
    border-right: 1px solid var(--color04);
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index: 2000;
    overflow: auto;
    padding: 12px;
  }
  html.toc-open .doc-toc{
    transform: translateX(0);
  }
}



@media (max-width: 980px){
  aside.doc-toc{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(88vw, 420px);
    background: var(--color02);
    border-right: 1px solid var(--color04);
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index: 2000;
    overflow: auto;
    padding: 12px;
  }
  html.toc-open aside.doc-toc{
    transform: translateX(0);
  }

  .cdr-toc-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 1900;
  }
  html.toc-open .cdr-toc-overlay{
    opacity: 1;
    pointer-events: auto;
  }
}


/* =========================================================
   MOBILE — DOC LAYOUT CLEAN (source of truth)
   (selectors robustes: ne dépend pas de .site-main)
   ========================================================= */
@media (max-width: 980px){

  /* 0) Gutter unique */
  :root{ --doc-mobile-gutter: 8px; }

  /* 1bis) Si un wrapper ajoute du padding sur mobile */
  .site-main{
    padding: 0 !important;
  }

  /* 1) Le shell occupe toute la largeur, sans “cadre” */
  .doc-shell,
  .site-main .doc-shell{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: var(--doc-mobile-gutter) !important;
    gap: var(--doc-mobile-gutter) !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* 2) La colonne contenu ne rajoute rien */
  .doc-content,
  .site-main .doc-shell > .doc-content{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* 3) La carte: flat, pleine largeur, aucune ombre */
  .doc-content > .doc-card,
  .site-main .doc-content > .doc-card,
  .doc-card{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    border-radius: 10px !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* Au cas où une ombre viendrait d’un pseudo-élément */
  .doc-card::before,
  .doc-card::after,
  .doc-content > .doc-card::before,
  .doc-content > .doc-card::after,
  .site-main .doc-content > .doc-card::before,
  .site-main .doc-content > .doc-card::after{
    box-shadow: none !important;
    filter: none !important;
    content: none !important;
  }

  /* 4) Topbar compacte et cohérente */
  .doc-card-topbar{
    padding: 8px 8px 4px !important;
    margin: 0 0 8px 0 !important;
    top: 0 !important; /* évite l’impression de “gros vide” au-dessus */
  }

  /* 5) Contenu interne cohérent */
  .doc-card-body{
    padding: 16px 16px 14px !important;
  }

  /* 6) Footer compact */
  .doc-footerline{
    padding: 8px 12px !important;
  }
}


/* =========================================================
   MOBILE — GOUTTIÈRE UNIFIÉE (header + crumbbar + doc)
   ========================================================= */
@media (max-width: 980px){

  /* Gouttière mobile unique */
  :root{
    --mobile-gutter: 8px;
  }

  /* Header principal */
  #page-header,
  .site-header{
    margin-left: var(--mobile-gutter) !important;
    margin-right: var(--mobile-gutter) !important;
  }

  /* Fil d’Ariane / crumbbar */
  .crumbbar-wrap{
    margin-left: var(--mobile-gutter) !important;
    margin-right: var(--mobile-gutter) !important;
  }

  /* Carte doc (déjà ok, mais on aligne la logique) */
  .doc-shell{
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }
}

/* =========================================================
   MOBILE — aligner HEADER + CRUMBBAR sur le gutter de la carte
   (corrige: trop de gauche sur header, pas assez de droite sur crumbbar)
   ========================================================= */
@media (max-width: 980px){

  :root{ --gutter-mobile: 8px; }

  /* -------------------------
     1) CRUMBBAR: manque à droite
     ------------------------- */

  /* La wrap doit avoir une marge droite réelle ET rester dans le viewport */
  .crumbbar-wrap{
    box-sizing: border-box !important;
    margin-left:  var(--gutter-mobile) !important;
    margin-right: var(--gutter-mobile) !important;

    /* empêche un "100%" + margin qui écrase à droite selon le box model */
    width: auto !important;
    max-width: calc(100% - (2 * var(--gutter-mobile))) !important;
  }

}

/* =========================================================
   MOBILE — HEADER: gutter externe + interne cohérents
   Corrige:
   - trop de vide avant le header (gauche)
   - logo collé au bord gauche du header
   - plus de marge à droite
   ========================================================= */
@media (max-width: 980px){

  :root{ --gutter-mobile: 8px; }

  /* 1) Le header comme "boîte" doit avoir la même marge que la carte */
  #page-header{
    box-sizing: border-box !important;
    margin-left:  var(--gutter-mobile) !important;
    margin-right: var(--gutter-mobile) !important;

    /* important: ne pas ajouter de padding ici (évite double gutter) */
    padding-left: 0 !important;
    padding-right: 0 !important;

    width: auto !important;
    max-width: calc(100% - (2 * var(--gutter-mobile))) !important;
  }

  /* 2) Le contenu du header doit avoir un padding interne symétrique */
  #page-header .headerbar > .inner,
  #page-header .navbar-tabs > .inner,
  #page-header .inner{
    box-sizing: border-box !important;
    padding-left:  var(--gutter-mobile) !important;
    padding-right: var(--gutter-mobile) !important;
  }
}

/* =========================================================
   MOBILE — bouton TOC flottant au scroll
   (le JS ajoute/retire .is-floating)
   ========================================================= */
@media (max-width: 980px){

  /* état normal: dans la topbar */
  .toc-mobilebtn{
    position: static;
  }

  /* état flottant */
  .toc-mobilebtn.is-floating{
    position: fixed !important;
    left: 16px !important;   /* adapte si tu veux coller au gutter */
    top: 120px !important;   /* sous le header + fil d'ariane */
    z-index: 10050 !important;

    /* garder l’aspect bouton */
    box-shadow: 0 6px 18px rgba(0,0,0,.25) !important;
  }
}


@media (max-width: 980px){
  .doc-card-topbar{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* gauche: toc | droite: actions */
    gap: 10px !important;
  }

  /* TOC à gauche */
  .toc-mobilebtn{
    order: 0 !important;
    margin-right: auto !important;
  }

  /* actions à droite */
  .doc-card-actions{
    order: 1 !important;
    margin-left: auto !important;
    display: inline-flex !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
}


@media (max-width: 980px){

  /* état flottant: INATTAQUABLE */
  .toc-mobilebtn.is-floating{
    position: fixed !important;
    left: 16px !important;
    top: 10px !important;          /* plus haut, cohérent avec tes barres */
    z-index: 10050 !important;

    /* empêcher tout héritage de layout */
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
}



/* =========================
   Share dialog (CdR)
   ========================= */

.share-pick-dialog{
  border: 1px solid var(--color05);
  border-radius: 16px;
  padding: 0;
  background: var(--color04);
  color: var(--fg);
  max-width: min(560px, calc(100vw - 24px));
  width: 560px;
}

.share-pick-dialog::backdrop{
  background: rgba(0,0,0,.55);
}

.share-pick-inner{ padding: 14px; }

.share-pick-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color05);
  margin-bottom: 12px;
}

.share-pick-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 600;
}

.share-pick-title-icon .icon{
  font-size: 1.05rem;
}

/* Bouton X (fermer) : blanc sur rouge */
.share-pick-close{
  background: #d1242f;
  border: 1px solid #d1242f;
  color: #fff;
}
.share-pick-close:hover{
  filter: brightness(1.05);
}

.share-pick-label{
  margin-bottom: 8px;
  opacity: .9;
}

/* Boutons choix : vert GitHub */
.share-pick-choices{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.share-pick-choice{
  background: #238636;          /* GitHub green */
  border: 1px solid #2ea043;
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}

.share-pick-choice:hover{
  background: #2ea043;
}

.share-pick-choice.is-active{
  outline: 2px solid rgba(46,160,67,.45);
  outline-offset: 2px;
}

.share-pick-hint{
  margin-top: 10px;
  font-size: 0.9rem;
  opacity: .8;
}

.share-pick-actions{
  display:flex;
  justify-content:flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--color05);
  margin-top: 12px;
}

/* Annuler : blanc sur rouge (cohérent avec X) */
.share-pick-cancel{
  background: #d1242f;
  border: 1px solid #d1242f;
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
}
.share-pick-cancel:hover{
  filter: brightness(1.05);
}



/* ============================================
   Markdown CdR — réduction des espacements de listes
   (le vrai coupable = marges des <ul>)
   ============================================ */

/* Listes principales */
.doc-card .markdown ul,
.doc-card .markdown ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Listes imbriquées (clé !) */
.doc-card .markdown ul ul,
.doc-card .markdown ul ol,
.doc-card .markdown ol ul,
.doc-card .markdown ol ol {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}


/* =====================================================
   Markdown CdR — réduction des retraits horizontaux
   (50 % de moins que le default navigateur)
   ===================================================== */

/* Niveau principal */
.doc-card .doc-card-body.markdown ul,
.doc-card .doc-card-body.markdown ol {
  padding-left: 1.25em !important;   /* ~50 % du default (~2.5em) */
}

/* Listes imbriquées */
.doc-card .doc-card-body.markdown ul ul,
.doc-card .doc-card-body.markdown ul ol,
.doc-card .doc-card-body.markdown ol ul,
.doc-card .doc-card-body.markdown ol ol {
  padding-left: 1em !important;      /* encore plus compact */
}

@media (max-width: 700px) {
  .doc-card .doc-card-body.markdown ul,
  .doc-card .doc-card-body.markdown ol {
    padding-left: 0.5em !important;
  }

  .doc-card .doc-card-body.markdown ul ul,
  .doc-card .doc-card-body.markdown ul ol,
  .doc-card .doc-card-body.markdown ol ul,
  .doc-card .doc-card-body.markdown ol ol {
    padding-left: 0.25em !important;
  }
}



/* 1) Le conteneur flex doit centrer son contenu */
main .doc-content .doc-footerline{
  display: flex !important;
  justify-content: center !important;
}

/* 2) Le groupe meta devient une colonne centrée */
main .doc-content .doc-footerline .doc-meta{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: auto !important;
}

/* 3) Les 2 lignes centrées */
main .doc-content .doc-footerline .doc-meta-line,
main .doc-content .doc-footerline .doc-meta-origin{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

/* 4) La ligne “Translated…” : même style, italique */
main .doc-content .doc-footerline .doc-meta-origin{
  margin-top: 0.25rem !important;
  font-style: italic !important;
  font-size: inherit !important;
  color: inherit !important;
}



/* ============================================================================
   PRINT — DocLayout (ne pas imprimer la "carte" ni les boutons)
   ============================================================================ */

@media print {

  /* 1) UI non imprimable */
  .page-header,
  .crumbbar-wrap,
  .doc-toc,
  .cdr-toc-overlay,
  .doc-card-topbar,
  .doc-card-social,
  .doc-meta-social,
  #sharePickDialog,
  footer.site-footer {
    display: none !important;
  }

  /* 2) LA CLE : supprimer la carte */
  .doc-card {
    display: contents !important;
  }

  /*
    display: contents :
    - enlève le wrapper visuellement
    - conserve ses enfants dans le flux
    - AUCUNE bordure possible
    - pagination parfaite
  */

  /* 3) Nettoyage résiduel */
  .doc-card-body,
  .doc-card-body.article,
  .doc-card-body.article.markdown {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 2mm !important; /* confortable */
  }

  /* 4) Layout simple */
  .doc-shell,
  .doc-content {
    display: block !important;
    width: auto !important;
    max-width: none !important;
  }

  /* 5) Pagination propre */
  img, svg, figure {
    max-width: 100% !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  h1, h2, h3 {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  html, body {
    background: #fff !important;
  }

  @page {
    margin: 14mm;
  }
}


/* ============================================================================
   Page TOC (h2..h5) — active / dim like viewer
   ============================================================================ */
.page-toc { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color04); }
.page-toc-head { font-size: 12px; opacity: .75; margin: 0 0 8px; }
.page-toc-list { list-style: none; margin: 0; padding: 0; }
.page-toc-link { display:block; padding: 6px 8px; border-radius: 10px; text-decoration:none; color: var(--color11); }

.page-toc-item.level-2 > .page-toc-link { padding-left: 8px; }
.page-toc-item.level-3 > .page-toc-link { padding-left: 18px; }
.page-toc-item.level-4 > .page-toc-link { padding-left: 28px; }
.page-toc-item.level-5 > .page-toc-link { padding-left: 38px; }

.page-toc-link.is-active { color: var(--color01); background: var(--color04); font-weight: 600; }



/* Offset d'ancre : évite que les titres se retrouvent collés en haut (UI mobile) */
.article.markdown :is(h1,h2,h3,h4,h5,h6)[id]{
  scroll-margin-top: 35px;
}

@media (max-width: 980px){
  .article.markdown :is(h1,h2,h3,h4,h5,h6)[id]{
    scroll-margin-top: 50px;
  }
}



/* =========================
   CdR — Prev/Next pager
   ========================= */

.cdr-pager{
  margin-top: 18px;
}

.cdr-pager-hr{
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0 0 14px 0;
}

.cdr-pager-row{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cdr-pager-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--color01);
  color: #ffffff;
  text-decoration: none;
  max-width: 48%;
}

.cdr-pager-link:hover{
  border-color: var(--color05);
  background: var(--color04);
}

.cdr-pager-text{
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cdr-pager-arrow{
  color: #ffffff;
  font-weight: 800;
}

.cdr-pager-prev{ justify-content:flex-start; }
.cdr-pager-next{ justify-content:flex-end; }

.cdr-pager-spacer{
  flex: 1 1 auto;
}

@media (max-width: 700px){
  .cdr-pager-row{
    flex-direction: column;
    align-items: stretch;
  }
  .cdr-pager-link{
    max-width: none;
    justify-content: space-between;
  }
  .cdr-pager-spacer{ display:none; }
}