/* =============================================================================
 * PerfShop — Surcharges CSS pour MkDocs Material
 * -----------------------------------------------------------------------------
 * Objectifs :
 *   1. Élargir la zone de contenu sur grands écrans (> 1440px) pour que les
 *      schémas Mermaid et les copies d'écran respirent.
 *   2. Forcer les diagrammes Mermaid et les images à prendre toute la largeur
 *      disponible du contenu, en conservant leur ratio.
 *   3. Offrir un curseur `zoom-in` sur les images cliquables (couplé avec le
 *      plugin mkdocs-glightbox lorsqu'il est activé).
 * =============================================================================
 */

/* --- 1. Largeur du contenu sur grands écrans ------------------------------ */
@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 1400px;
  }
}

@media screen and (min-width: 100em) {
  .md-grid {
    max-width: 1600px;
  }
}

/* --- 2. Diagrammes Mermaid : pleine largeur ------------------------------- */
.md-typeset .mermaid {
  text-align: center;
  margin: 1.5em 0;
}

.md-typeset .mermaid svg {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* --- 3. Images : pleine largeur par défaut -------------------------------- */
.md-typeset img,
.md-typeset figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Image seule dans un paragraphe : occupe toute la largeur de contenu */
.md-typeset p > img:only-child {
  width: 100%;
}

/* --- 4. Zoom cliquable (fallback sans glightbox) -------------------------- */
.md-typeset a img {
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.md-typeset a img:hover {
  transform: scale(1.01);
}

/* --- 5. Blocs de code : légère amélioration lisibilité -------------------- */
.md-typeset pre > code {
  font-size: 0.85em;
  line-height: 1.55;
}

/* --- 6. Tableaux : scroll horizontal propre sur mobile -------------------- */
.md-typeset .md-typeset__table {
  width: 100%;
}

.md-typeset table:not([class]) {
  font-size: 0.8rem;
}