/* Petits ajustements visuels pour la documentation Zappy. */

:root {
  --md-primary-fg-color: #00897b;
  --md-primary-fg-color--light: #4ebaaa;
  --md-primary-fg-color--dark: #005b4f;
}

/* Tables de protocole : plus lisibles, code en évidence. */
.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color);
  color: #fff;
}

.md-typeset table:not([class]) code {
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 *  Responsive / mobile
 *  Material est déjà responsive (menu hamburger, mise en page fluide).
 *  Ici on s'assure surtout que les éléments larges (tables de protocole,
 *  diagrammes Mermaid, blocs de code) DÉFILENT au lieu de déborder.
 * ------------------------------------------------------------------ */

/* Le conteneur de table de Material défile horizontalement si besoin. */
.md-typeset .md-typeset__table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Filet de sécurité : toute table reste dans la largeur de l'écran. */
.md-typeset table:not([class]) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Diagrammes Mermaid : centrés sur desktop, défilables si trop larges. */
.mermaid {
  text-align: center;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Les images ne débordent jamais. */
.md-typeset img {
  max-width: 100%;
  height: auto;
}

/* Sur petits écrans : tables un peu plus compactes pour gagner de la place. */
@media screen and (max-width: 44.9375em) {
  .md-typeset table:not([class]) {
    font-size: 0.68rem;
  }

  .md-typeset table:not([class]) th,
  .md-typeset table:not([class]) td {
    padding: 0.4em 0.6em;
  }

  /* Les blocs de code défilent plutôt que de forcer un zoom arrière. */
  .md-typeset pre > code {
    -webkit-overflow-scrolling: touch;
  }
}