/* =========================================================
   OUTPUTS JUPYTER / QUARTO
   ========================================================= */


.cell-output,         /* sorties Jupyter / Quarto */
pre.output,           /* sortie HTML classique */
div.output {          /* fallback */
  /* background-color: #f9f9f9; */  /* gris très clair */
  /* background-color: #e6f4ea; */ /* vert pastel */
  /* background-color: #f0fbf5; */ /* vert très très clair */
  background-color: #f7fdf9;     /* vert pâle */
  /* background-color: #f3fdf7; */  /* vert pastel léger */
  /* background-color: #e6f0fa; */  /* bleu pastel */
  /* border: 1px solid #ddd; */     /* bordure subtile */
  border: 1px solid #ccc;
  border-radius: 6px;          /* coins arrondis */
  padding: 0.75em 1em;         /* espace intérieur confortable */
  margin: 0.75em 0;            /* marge verticale */
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);  /* légère ombre */
  overflow-x: auto;             /* scroll horizontal si nécessaire */
  font-family: monospace;      /* police uniforme */
  font-size: 0.9em;            /* légèrement plus petite que texte normal */
  line-height: 1.2;             /* lisibilité */
}

/* Style spécifique pour les formules mathématiques en display */

span.math.display {
  display: block;
  text-align: center;
  margin: 1.2em auto;
  font-size: 1.05em;
}


/* =========================================================
   NUMÉROTATION DES TITRES DANS UN BOOK QUARTO MIXTE
   =========================================================
   
   Contexte :
   - Les livres Quarto peuvent inclure à la fois des fichiers `.qmd` (Quarto Markdown)
     et des notebooks Jupyter `.ipynb`.
   - Les `.qmd` avec `number-sections: true` sont numérotés automatiquement par Pandoc.
     Dans le HTML final, ces titres contiennent :
       <section data-number="2.1">
         <h2>
           <span class="header-section-number">2.1</span>
           Titre
         </h2>
       </section>
   - Les `.ipynb` ne sont pas numérotés automatiquement :
       <section class="level2">
         <h2 class="anchored">Titre</h2>
       </section>
     Il n’y a ni `data-number` ni `<span>` de numéro.

   Objectifs de ce CSS :
   1. Numéroter automatiquement les titres des notebooks `.ipynb` via CSS.
   2. Ne **pas toucher aux titres `.qmd` déjà numérotés** pour éviter la double numérotation.
   3. Respecter la hiérarchie des titres (h2, h3, h4) et leurs sections parentes.
   4. Éviter toute réinitialisation incorrecte du compteur, qui faisait commencer
      les titres à 2 ou ne pas afficher les numéros.
   5. Ne pas tenter de numéroter la TOC, car celle-ci est générée par Pandoc et
      n’est pas modifiable proprement via CSS.

   Stratégie technique :
   - Le critère fiable pour distinguer `.qmd` / `.ipynb` est la présence de `data-number` :
       * sections avec `data-number` → déjà numérotées par Pandoc → ignorer CSS
       * sections sans `data-number` → notebook `.ipynb` → appliquer CSS
   - On applique les compteurs uniquement sur les sections `level2`, `level3`, `level4`.
   - Le compteur `h2` est global pour tout le document, et les compteurs `h3` et `h4`
     sont reset au bon niveau pour maintenir la hiérarchie.
   - Le CSS `::before` ajoute les numéros visuellement devant le titre.

   Résultat :
   - `.qmd` : numérotation Pandoc intacte, TOC correcte
   - `.ipynb` : numérotation CSS fonctionnelle
   - Aucun conflit, book cohérent, future-proof.
*/


/* Initialisation globale */
#quarto-document-content {
  counter-reset: h2;
}

/* h2 : uniquement si PAS data-number */
#quarto-document-content section.level2:not([data-number]) > h2::before {
  counter-increment: h2;
  content: counter(h2) ". ";
  margin-right: 0.3em;
}

/* hiérarchie */
#quarto-document-content section.level2 {
  counter-reset: h3;
}

#quarto-document-content section.level3:not([data-number]) > h3::before {
  counter-increment: h3;
  content: counter(h2) "." counter(h3) ". ";
  margin-right: 0.3em;
}

#quarto-document-content section.level3 {
  counter-reset: h4;
}

#quarto-document-content section.level4:not([data-number]) > h4::before {
  counter-increment: h4;
  content: counter(h2) "." counter(h3) "." counter(h4) ". ";
  margin-right: 0.3em;
}





/* =========================================================
   SIDEBAR / TOC COMPLET — THEME COSMO MODERNE
   Partie et Chapitres avec badges et fond plein largeur
   ========================================================= */

/* ---------------------------------------------------------
   PARTIES / SECTIONS PRINCIPALES
   --------------------------------------------------------- */
#quarto-sidebar .sidebar-item-section > .sidebar-item-container > a > .menu-text strong {
    display: block;             /* occupe toute la largeur */
    width: 100%;
    /* background-color: #0275d8; */  /* bleu Cosmo */
    background-color: #2FA4E7;  /* bleu Cerulean */
    color: white;
    padding: 6px 12px;           /* padding généreux */
    border-radius: 4px;
    margin-bottom: 4px;          /* petit espace sous chaque Part */
    box-sizing: border-box;      /* inclut padding dans largeur */
}

/* Hover */
#quarto-sidebar .sidebar-item-section > .sidebar-item-container > a:hover > .menu-text strong {
    /* background-color: #025aa5; */   /* bleu plus foncé */
    background-color: #1C7EBB;  /* bleu foncé au survol */
    color: white;
}

/* Élément actif */
#quarto-sidebar .sidebar-item.active > .sidebar-item-container > a > .menu-text strong {
    background-color: #014c8c;   /* bleu très foncé */
    color: white;
}


/* ---------------------------------------------------------
   CHAPITRES / ITEMS NORMAUX
   --------------------------------------------------------- */
#quarto-sidebar .sidebar-item .sidebar-item-text .menu-text {
    display: block;
    width: 100%;
    padding: 4px 10px;
    color: #2c3e50;
    border-radius: 3px;
}

/* Numéro des chapitres */
#quarto-sidebar .sidebar-item .sidebar-item-text .chapter-number {
    font-weight: bold;
    margin-right: 4px;
    color: #0275d8;
}

/* Hover sur chapitre */
#quarto-sidebar .sidebar-item .sidebar-item-text:hover .menu-text {
    background-color: #d9edf7;
    color: #2c3e50;
}

/* Élément actif chapitre */
#quarto-sidebar .sidebar-item.active > .sidebar-item-container > .sidebar-item-text .menu-text {
    background-color: #025aa5;
    color: white;
}

/* ---------------------------------------------------------
   Sidebar globale
   --------------------------------------------------------- */
#quarto-sidebar {
    background-color: #f7f7f7; 
    padding: 0.5rem 0.75rem;
    overflow-x: hidden;
}

/* Scroll si nécessaire */
#quarto-sidebar.sidebar-navigation.docked.overflow-auto {
    overflow-y: auto;
    max-height: 100vh;
}

/* Divider */
#quarto-sidebar .sidebar-divider {
    border-color: #ddd;
    margin: 0.5rem 0;
}

/* Toggle icons */
#quarto-sidebar .sidebar-item-toggle {
    color: #0275d8;
}

#quarto-sidebar .sidebar-item-toggle:hover {
    color: #025aa5;
}










/* =========================================================
   NUMÉROTATION CSS MARGIN SIDEBAR
   Fonctionne pour IPYNB sans doublons pour QMD
   ========================================================= */

/* compteur global sur nav TOC */
#quarto-margin-sidebar nav#TOC {
    counter-reset: toc-h2;
}

/* ===== Niveau 1 ===== */
#quarto-margin-sidebar nav#TOC > ul > li:not(:has(a > .header-section-number)) {
    counter-increment: toc-h2;
}

#quarto-margin-sidebar nav#TOC > ul > li > a:not(:has(.header-section-number))::before {
    content: counter(toc-h2) ". ";
    margin-right: 0.3em;
}

/* ===== Niveau 2 ===== */
#quarto-margin-sidebar nav#TOC ul ul {
    counter-reset: toc-h3; /* reset sous-liste */
}

#quarto-margin-sidebar nav#TOC ul ul > li:not(:has(a > .header-section-number)) {
    counter-increment: toc-h3;
}

#quarto-margin-sidebar nav#TOC ul ul > li > a:not(:has(.header-section-number))::before {
    content: counter(toc-h2) "." counter(toc-h3) ". ";
    margin-right: 0.3em;
}

/* ===== Niveau 3 ===== */
#quarto-margin-sidebar nav#TOC ul ul ul {
    counter-reset: toc-h4;
}

#quarto-margin-sidebar nav#TOC ul ul ul > li:not(:has(a > .header-section-number)) {
    counter-increment: toc-h4;
}

#quarto-margin-sidebar nav#TOC ul ul ul > li > a:not(:has(.header-section-number))::before {
    content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4) ". ";
    margin-right: 0.3em;
}

/* ===== Niveau 4 si nécessaire ===== */
#quarto-margin-sidebar nav#TOC ul ul ul ul {
    counter-reset: toc-h5;
}

#quarto-margin-sidebar nav#TOC ul ul ul ul > li:not(:has(a > .header-section-number)) {
    counter-increment: toc-h5;
}

#quarto-margin-sidebar nav#TOC ul ul ul ul > li > a:not(:has(.header-section-number))::before {
    content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4) "." counter(toc-h5) ". ";
    margin-right: 0.3em;
}