/* ----------------------------- */
/* Responsive Design for Code Blocks and Tables on Mobile */
/* ----------------------------- */
 
/* Responsive Code Blocks */
pre, code, .syntaxhighlight {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    max-width: 100% !important; /* Ensures blocks do not exceed screen width */
}
 
/* Responsive Tables */
table {
    width: 100% !important;
    table-layout: auto !important; /* Allows columns to adjust automatically */
    word-wrap: break-word !important; /* Forces line breaks within tables */
}
 
/* Specific Styles for Small Screens */
@media only screen and (max-width: 600px) {
    table {
        display: block; /* Allow horizontal scrolling for tables */
        overflow-x: auto;
    }
 
    pre, code, .syntaxhighlight {
        font-size: 12px !important; /* Reduce font size in code blocks for small screens */
    }
}
 
/* Flexible Layout for Code Tables */
.code-table {
    width: 100% !important;
    table-layout: auto !important; /* Ensures tables with code blocks are flexible */
}
 
/* Retirer le gras par défaut des éléments de liste */
ul, ol {
    font-weight: normal; /* Définit le poids de police normal pour toutes les listes */
}
 
/* Appliquer le gras uniquement aux éléments entourés de ''' */
strong, b {
    font-weight: bold; /* Définit le poids de police en gras pour les éléments spécifiés */
}
 
/*Transition douce pour l'affichage du contenu
#monContenu {
    display: none;
    transition: all 0.5s ease;  /* Transition douce pour l'affichage du contenu */
}
 
a {
    color: #1e90ff;
    text-decoration: underline;
    cursor: pointer;
}
 
a:hover {
    color: #4169e1;
}
 
/* 
Ce bloc de styles ajuste l'alignement du lien "Expand/Collapse" des éléments repliables. 
Il s'assure que le lien est correctement aligné à gauche, plutôt qu'à droite, 
tout en conservant un comportement de ligne pour qu'il suive le flux du texte environnant. 
*/
 
.mw-collapsible-toggle {
    float: none !important; /* Enlève le flottement à droite pour que le lien ne soit plus aligné à droite. */
    text-align: left !important; /* Force l'alignement du texte du lien "Expand/Collapse" à gauche. */
    display: inline-block; /* Assure que le lien se comporte comme un élément de ligne et suit le flux du texte. */
}
 
/* 
   Ajustements de style pour les petits écrans (moins de 600px de large) 
   - Les tableaux (.wikitable) prennent toute la largeur de l'écran disponible.
   - Les images s'ajustent à 100% de la largeur de leur conteneur, tout en conservant leurs proportions.
*/
@media only screen and (max-width: 600px) {
    .wikitable {
        width: 100% !important;
    }
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}
/* ----------------------------- */
/* Styling for Inline Code and C# Syntax Highlighting */
/* ----------------------------- */
 
/* Style the backtick text */
.backtick-style {
    font-family: monospace;
    background-color: #f8f9fa;
    padding: 0.2em 0.4em;
    border: 1px solid #d1d5da;
    border-radius: 3px;
}
 
/* Style parentheses (like () in C#) */
.csharp.source-csharp .br0 {
    color: hsl(32, 93%, 66%) !important;  /* Orange for parentheses */
}
 
/* Style comments in C# syntax */
.csharp.source-csharp .co1 {
    color: hsl(221, 12%, 69%) !important;  /* Light blue for comments */
}
 
/* Style keywords in C# syntax */
.csharp.source-csharp .kw1 {
    color: hsl(357, 75%, 77%) !important;  /* Light red for main keywords */
}
 
.csharp.source-csharp .kw3, .csharp.source-csharp .kw4 {
    color: hsl(300, 30%, 68%) !important;  /* Pink for additional keywords */
}
 
/* Style methods in C# syntax */
.csharp.source-csharp .me1 {
    color: hsl(210, 50%, 60%) !important;  /* Light blue for methods */
}
 
/* Style numbers in C# syntax */
.csharp.source-csharp .nu0 {
    color: hsl(32, 93%, 66%) !important;  /* Orange for numbers */
}
 
/* Style symbols in C# syntax */
.csharp.source-csharp .sy0 {
    color: hsl(116, 73%, 51%) !important;  /* Green for symbols */
}
 
/* Style strings in C# syntax */
.csharp.source-csharp .st0 {
    color: hsl(114, 31%, 68%) !important;  /* Light green for strings */
}
 
/* General background and text color for code blocks */
.syntaxhighlight {
    background-color: hsl(210, 15%, 22%) !important;  /* Background */
    color: hsl(219, 28%, 88%) !important;  /* General text color */
}
 
/* ----------------------------- */
/* Styles for Card Template */
/* This section contains styles for the card layout, ensuring that the 
   image and table are displayed correctly on both large and small screens. 
   It uses Flexbox for a responsive design. */
/* ----------------------------- */
 
/* Container for the card image and table */
.card-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}
 
/* Style for the card image */
.card-image {
    flex: 0 0 300px;
}
 
/* Style for the card information (table) */
.card-info {
    flex: 1;
    min-width: 200px;
}
 
/* Responsive adjustments for small screens */
@media (max-width: 600px) {
    .card-container {
        display: block;
    }
 
    .card-image, .card-info {
        width: 100%;
        margin: 0;
    }
 
    .card-image img {
        width: 100% !important;
        height: auto;
    }
}