/* User Provided Stylesheet */

/* ============================================================
   JUPYTER BOOK 2.1.6 / MyST
   THÈME CLAIR + THÈME SOMBRE
   CSS GLOBAL
   ============================================================ */


/* ============================================================
   1. VARIABLES — MODE CLAIR
   ============================================================ */

:root {
  color-scheme: light;

  /* Fond général */
  --fond: #f7f1e5;
  --fond-secondaire: #eee3cc;
  --fond-surface: #fffaf0;
  --fond-hover: #eee6d5;

  /* Texte */
  --texte: #222222;
  --texte-secondaire: #555555;

  /* Titres / liens */
  --bleu-titre: #243b7a;
  --bleu-lien: #244f9b;

  /* Tableaux */
  --table-fond: #fffaf0;
  --table-fond-alt: #f3eee3;
  --table-hover: #e8e1d2;

  --table-header-1: #aab6d5;
  --table-header-2: #c4cce0;
  --table-header-texte: #24356d;

  /* Bordures */
  --bordure: #b7a98c;

  /* Icônes */
  --icone: #243b7a;

  /* Champs */
  --input-fond: #fffaf0;
  --input-texte: #222222;
  --input-bordure: #b7a98c;

  /* Infobulles */
  --tooltip-fond: #333333;
  --tooltip-texte: #ffffff;
}


/* ============================================================
   2. VARIABLES — MODE SOMBRE
   MyST utilise html.dark
   ============================================================ */

html.dark {
  color-scheme: dark;

  /* Fond général */
  --fond: #151922;
  --fond-secondaire: #1d222c;
  --fond-surface: #222833;
  --fond-hover: #2c3441;

  /* Texte */
  --texte: #e7e9ee;
  --texte-secondaire: #b8bec9;

  /* Titres / liens */
  --bleu-titre: #b8c7f2;
  --bleu-lien: #91b5ff;

  /* Tableaux */
  --table-fond: #202630;
  --table-fond-alt: #252c37;
  --table-hover: #303947;

  --table-header-1: #354566;
  --table-header-2: #435273;
  --table-header-texte: #f0f3ff;

  /* Bordures */
  --bordure: #4d5868;

  /* Icônes */
  --icone: #d9e2ff;

  /* Champs */
  --input-fond: #252b35;
  --input-texte: #e7e9ee;
  --input-bordure: #596577;

  /* Infobulles */
  --tooltip-fond: #e8ebf2;
  --tooltip-texte: #151922;
}


/* ============================================================
   3. FOND GÉNÉRAL
   ============================================================ */

html,
body {
  background-color: var(--fond) !important;
  color: var(--texte) !important;
}


/* ============================================================
   4. HEADER PRINCIPAL
   ============================================================ */

.myst-top-nav {
  background-color: var(--fond-secondaire) !important;

  backdrop-filter: blur(8px);

  box-shadow:
    0 2px 8px rgba(0, 0, 0, .12);

  min-height: 80px !important;
}


/* ============================================================
   5. LOGO
   ============================================================ */

.myst-home-link-logo {
  display: flex;
  align-items: center;
}

.myst-home-link-logo img {
  height: 70px !important;
  width: auto !important;
  max-height: none !important;
  opacity: .95;
}


/* ============================================================
   6. TITRES
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
.myst-fm-block-title {
  color: var(--bleu-titre) !important;
}


/* ============================================================
   7. LIENS GÉNÉRAUX
   ============================================================ */

a {
  color: var(--bleu-lien) !important;
}

a:hover {
  color: var(--bleu-titre) !important;
}


/* ============================================================
   8. COLONNE GAUCHE / TABLE DES MATIÈRES
   ============================================================ */

.myst-primary-sidebar {
  width: 230px !important;
}

.myst-primary-sidebar-toc {
  background: transparent;
}

.myst-toc-item {
  color: var(--texte) !important;
}

.myst-toc-item-exact {
  background-color: var(--fond-hover) !important;
  color: var(--bleu-titre) !important;
}


/* ============================================================
   9. PAGE LIENS
   Classes générées par liens.py
   ============================================================ */

.liens-categorie {
  color: var(--bleu-titre) !important;

  margin-top: 30px;
  margin-bottom: 10px;

  padding-bottom: 5px;

  border-bottom: 2px solid var(--bleu-titre) !important;
}

.liens-liste {
  color: var(--texte) !important;
}

.liens-item {
  margin-bottom: 8px;
  color: var(--texte) !important;
}

.liens-url {
  color: var(--bleu-lien) !important;

  font-weight: 500;

  text-decoration: none;
}

.liens-url:hover {
  color: var(--bleu-titre) !important;

  text-decoration: underline;
}


/* ============================================================
   10. DATATABLES — CONTENEUR
   ============================================================ */

.dataTables_wrapper {
  width: 100% !important;
  color: var(--texte) !important;
}


/* ============================================================
   11. DATATABLES — TABLE
   ============================================================ */

table.dataTable {
  width: 100% !important;
  margin: auto !important;

  border-collapse: collapse !important;

  background-color: var(--table-fond) !important;
  color: var(--texte) !important;
}


/* ============================================================
   12. DATATABLES — CELLULES
   ============================================================ */

table.dataTable th,
table.dataTable td {
  border-color: var(--bordure) !important;
}

table.dataTable tbody td {
  text-align: center !important;
  vertical-align: middle !important;

  color: var(--texte) !important;

  background-color: var(--table-fond) !important;
}


/* Première colonne */

table.dataTable tbody td:first-child {
  text-align: center !important;
}


/* ============================================================
   13. DATATABLES — LIGNES ALTERNÉES
   ============================================================ */

table.dataTable tbody tr:nth-child(even) td {
  background-color: var(--table-fond-alt) !important;
}


/* ============================================================
   14. DATATABLES — SURVOL
   ============================================================ */

table.dataTable tbody tr:hover td {
  background-color: var(--table-hover) !important;
}


/* ============================================================
   15. DATATABLES — LIENS
   ============================================================ */

table.dataTable tbody a,
table.dataTable tbody td a {
  color: var(--bleu-lien) !important;

  font-weight: 600;
}

table.dataTable tbody a:hover {
  color: var(--bleu-titre) !important;
}


/* ============================================================
   16. DATATABLES — HEADER
   ============================================================ */

table.dataTable thead tr {
  background-color: var(--table-header-1) !important;
}


/* Première ligne */

table.dataTable thead tr:first-child th {
  background-color: var(--table-header-1) !important;

  color: var(--table-header-texte) !important;

  text-align: center !important;

  font-weight: 700;
}


/* Deuxième ligne */

table.dataTable thead tr:nth-child(2) th {
  background-color: var(--table-header-2) !important;

  color: var(--table-header-texte) !important;

  text-align: center !important;

  font-weight: 700;
}


/* Cellules header */

table.dataTable thead th {
  position: relative;

  padding: 14px 12px !important;

  font-size: .8rem !important;

  text-align: center !important;

  border-color: var(--bordure) !important;
}


/* ============================================================
   17. DATATABLES — ICÔNES DE TRI
   ============================================================ */

table.dataTable thead .dt-column-order,
table.dataTable thead .dt-column-order::before,
table.dataTable thead .dt-column-order::after {
  opacity: 1 !important;

  color: var(--icone) !important;
}

table.dataTable thead .dt-column-order::before,
table.dataTable thead .dt-column-order::after {
  font-size: 1.1rem !important;
}


/* ============================================================
   18. DATATABLES — BOUTONS
   ============================================================ */

.dt-button {
  background-color: var(--fond-surface) !important;

  color: var(--texte) !important;

  border: 1px solid var(--bordure) !important;

  opacity: 1 !important;
}

.dt-button:hover {
  background-color: var(--fond-hover) !important;

  color: var(--texte) !important;
}


/* Texte / icônes */

.dt-button span,
.dt-button i {
  color: var(--icone) !important;

  font-size: 1.1rem !important;
}


/* ============================================================
   19. DATATABLES — CONTRÔLES
   ============================================================ */

.dt-column-order,
.dt-column-search,
.dt-column-visibility,
.dt-button {
  font-size: 1rem !important;

  color: var(--icone) !important;

  fill: var(--icone) !important;

  opacity: 1 !important;
}


/* ============================================================
   20. DATATABLES — RECHERCHE
   ============================================================ */

.dt-search input,
.dt-input {
  background-color: var(--input-fond) !important;

  color: var(--input-texte) !important;

  border: 1px solid var(--input-bordure) !important;
}

.dt-search input::placeholder {
  color: var(--texte-secondaire) !important;
}


/* ============================================================
   21. DATATABLES — PAGINATION
   ============================================================ */

.dataTables_wrapper .dt-paging button {
  background-color: var(--fond-surface) !important;

  color: var(--texte) !important;

  border-color: var(--bordure) !important;
}

.dataTables_wrapper .dt-paging button:hover {
  background-color: var(--fond-hover) !important;

  color: var(--texte) !important;
}

.dataTables_wrapper .dt-paging button.current {
  background-color: var(--table-header-1) !important;

  color: var(--table-header-texte) !important;
}


/* ============================================================
   22. COLUMN CONTROL — ITABLES
   ============================================================ */

.dtcc-button,
.dtcc-button-icon {
  color: var(--icone) !important;

  opacity: 1 !important;
}


/* Bouton */

.dtcc-button {
  background-color: transparent !important;
}


/* Survol */

.dtcc-button:hover {
  background-color: var(--fond-hover) !important;
}


/* SVG */

.dtcc-button-icon svg,
table.dataTable span.dtcc button.dtcc-button svg {
  color: currentColor !important;

  stroke: currentColor !important;

  fill: currentColor !important;
}


/* ============================================================
   23. COLUMN CONTROL — TAILLE DES ICÔNES
   ============================================================ */

table.dataTable span.dtcc-button-icon svg {
  width: 14px !important;
  height: 14px !important;
}

table.dataTable span.dtcc button.dtcc-button {
  min-width: 26px !important;
  min-height: 26px !important;

  padding: 4px !important;
}


/* ============================================================
   24. COLUMN CONTROL — ICÔNE TRI
   ============================================================ */

.dtcc-button_order .dtcc-button-icon svg {
  display: none !important;
}

.dtcc-button_order .dtcc-button-icon::after {
  content: "⇅";

  font-size: 1.4rem;

  font-weight: bold;

  color: inherit;
}


/* Masquer l'indicateur natif DataTables */

table.dataTable span.dt-column-order {
  display: none !important;
}


/* ============================================================
   25. COLUMN CONTROL — INFOBULLES
   ============================================================ */

.dtcc-button {
  position: relative;
}

.dtcc-button:hover::after {
  position: absolute;

  top: 35px;
  left: 50%;

  transform: translateX(-50%);

  background-color: var(--tooltip-fond);

  color: var(--tooltip-texte);

  padding: 5px 8px;

  border-radius: 4px;

  font-size: .75rem;

  white-space: nowrap;

  z-index: 9999;
}


/* Tri */

.dtcc-button_order:hover::after {
  content: "Tri de la colonne";
}


/* Recherche */

.dtcc-button_dropdown[aria-label="Search"]:hover::after {
  content: "Recherche dans la colonne";
}


/* Visibilité */

.dtcc-button_dropdown[aria-label="Column visibility"]:hover::after {
  content: "Afficher / masquer les colonnes";
}


/* ============================================================
   26. SORTIES JUPYTER / MyST
   ============================================================ */

.myst-jp-nb-block .myst-outputs,
.myst-jp-nb-block [data-name="outputs-container"] {
  width: 100%;
  max-width: none;
}

.myst-jp-nb-block [data-name="outputs-container"] > div {
  width: 100%;
}


/* ============================================================
   27. ÉLARGISSEMENT DES SORTIES
   ============================================================ */

.article-grid .myst-jp-nb-block {
  width: calc(100% + 300px);
  max-width: none;
}

.article-grid [data-name="outputs-container"] {
  width: 100%;
  max-width: none;
}


/* ============================================================
   28. TABLEAUX GÉNÉRÉS PAR PANDAS
   ============================================================ */

.article-grid table {
  width: 100% !important;
}


/* ============================================================
   29. LARGEUR GÉNÉRALE DE LA PAGE
   ============================================================ */

.bd-container {
  max-width: 99% !important;
}

.bd-container__inner {
  max-width: 99% !important;
}

.bd-main .bd-content .bd-article-container {
  max-width: 100em !important;
}


/* ============================================================
   30. PAGE "WIDE-PAGE"
   ============================================================ */

.article:has(.wide-page) {
  max-width: 100% !important;

  grid-column: 1 / -1;
}


/* Masquer la colonne de droite */

.article:has(.wide-page) .block {
  display: none !important;
}


/* ============================================================
   31. TABLEAU LARGE
   ============================================================ */

.wide-table {
  width: 100vw;

  margin-left: calc(-1 * var(--myst-margin-left));
}


/* ============================================================
   32. CATALOGUE
   ============================================================ */

.catalogue-wrapper {
  width: 100vw;
  max-width: none;

  margin-left: calc(50% - 50vw);
}

.catalogue-table {
  width: 100%;
}


/* ============================================================
   33. SORTIES PYTHON — PLEINE LARGEUR
   ============================================================ */

.article-grid .myst-jp-nb-block {
  width: calc(100% + 300px);

  max-width: none;
}

.article-grid [data-name="outputs-container"] {
  width: 100%;

  max-width: none;
}


/* ============================================================
   34. MASQUER "MADE WITH MYST"
   ============================================================ */

a[href*="mystmd.org"] {
  display: none !important;
}


/* ============================================================
   35. BOUTON DE CHANGEMENT DE THÈME
   ============================================================

   NE PAS ACTIVER POUR LE MOMENT.
   Laisser MyST gérer le changement clair/sombre.

   ============================================================ */

/*
button[aria-label*="theme"],
button[aria-label*="Theme"],
button[title*="theme"],
button[title*="Theme"] {
  display: none !important;
}
*/

/* ============================================================
   36. POPOVER AUTEUR MyST
   ============================================================ */

/* Nom de l'auteur */
.myst-fm-author-popover-name {
  color: var(--bleu-titre) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
}

/* Description / affiliation de l'auteur */
.myst-fm-author-popover-affiliations {
  color: var(--texte) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* Conteneur du popover */
.myst-fm-author-popover {
  background-color: var(--fond-surface) !important;
  color: var(--texte) !important;
  border-color: var(--bordure) !important;
}

/* Éléments internes */
.myst-fm-author-popover * {
  color: var(--texte) !important;
}

/* On remet le titre dans sa couleur */
.myst-fm-author-popover .myst-fm-author-popover-name {
  color: var(--bleu-titre) !important;
}

/* ============================================================
   37. POPOVER AUTEUR MyST — MODE SOMBRE
   ============================================================ */

/* Fond du rectangle */
html.dark .myst-fm-author-popover-content {
  background-color: #222833 !important;
  color: #e7e9ee !important;
}

/* Nom Georges Taconet */
html.dark .myst-fm-author-popover-content .myst-fm-author-popover-name {
  color: #b8c7f2 !important;
}

/* Description */
html.dark .myst-fm-author-popover-content .myst-fm-author-popover-affiliations {
  color: #e7e9ee !important;
  font-weight: 400 !important;
}

/* Petite flèche */
html.dark .myst-fm-author-popover-content svg.fill-white {
  fill: #222833 !important;
}
/* ============================================================
   MASQUER LE POPOVER AUTEUR MyST
   ============================================================ */

.myst-fm-author-popover-content {
  display: none !important;
}



/* ============================================================
   FIN DU CSS
   ============================================================ */