/* ===== RESET DE BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
}

/* ===== POLICES DE CARACTÈRE ===== */
/* Définition des polices par défaut pour le corps du texte et les éléments */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif; /* Police sans empattement moderne */
    line-height: 1.6; /* Espacement entre les lignes */
    color: #333; /* Couleur de texte par défaut */
    font-size: 16px; /* Taille de base */
}

/* Polices pour les titres */
h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, "Times New Roman", Times, serif; /* Police avec empattement pour les titres */
    font-weight: 600; /* Épaisseur du texte */
    line-height: 1.2; /* Espacement réduit pour les titres */
    margin-bottom: 0.5em; /* Marge en bas */
    margin-top: 2.0em; /* Marge en bas */
}

/* Style spécifique pour h1 */
h1 {
    font-size: 2.5em; /* Taille relative */
    color: #0066cc; /* Bleu pour h1 */
}

/* Style spécifique pour h2 */
h2 {
    font-size: 2em;
    color: #0066cc; /* Bleu pour h2 */
}

/* Style spécifique pour h3 */
h3 {
    font-size: 1.75em;
    color: #0066cc; /* Bleu pour h3 */
}

/* Style spécifique pour h4 */
h4 {
    font-size: 1.5em;
    text-decoration: underline; /* Soulignement ajouté */
}

/* Style spécifique pour h5 */
h5 {
    font-size: 1.25em;
    text-decoration: underline; /* Soulignement ajouté */
}

/* Style spécifique pour h6 */
h6 {
    font-size: 1.00em;
    text-decoration: underline; /* Soulignement ajouté */
}


/* Polices pour le code et les éléments techniques */
code, pre, kbd, samp {
    font-family: "Courier New", Courier, monospace; /* Police monospace pour le code */
    font-size: 0.9em; /* Légèrement plus petit */
}

/* ===== STYLES DE BASE ===== */
/* Paragraphes */
p {
    margin-bottom: 1em; /* Espacement entre les paragraphes */
}

/* Liens */
a {
    color: #0066cc; /* Bleu standard pour les liens */
    text-decoration: none; /* Supprime le soulignement par défaut */
    transition: color 0.2s; /* Animation pour le survol */
}

a:hover {
    color: #004499; /* Couleur plus foncée au survol */
    text-decoration: underline; /* Soulignement au survol */
}

/* Listes */
ul, ol {
    margin-bottom: 1em;
    padding-left: 2em; /* Indentation des listes */
}

li {
    margin-bottom: 0.5em;
}

/* ===== AUTRES ÉLÉMENTS ===== */
/* Images */
img {
    max-width: 100%; /* Les images ne dépassent pas de leur conteneur */
    height: auto; /* Conserve les proportions */
}

/* Conteneurs */
.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto; /* Centre le conteneur */
    padding: 1em;
}


/* ===== STYLE POUR LE TABLEAU D'IMAGES ===== */
.image-table {
    width: 100%; /* Largeur du tableau à 100% du conteneur parent */
    margin: 2em auto; /* Marge verticale et centrage horizontal */
    border-collapse: collapse; /* Supprime les espaces entre les cellules */
    table-layout: fixed; /* Permet de contrôler la largeur des colonnes */
}

.image-table tr {
    text-align: center; /* Centre le contenu des cellules horizontalement */
}

.image-table td {
    width: 33.33%; /* Chaque colonne occupe 1/3 de la largeur du tableau */
    padding: 10px; /* Espacement autour des images */
    vertical-align: middle; /* Alignement vertical au milieu */
    border: 5px solid #eee; /* Bordure légère pour séparer les cellules */
}

.image-table img {
    max-width: 100%; /* L'image remplit la cellule sans dépasser */
    height: auto; /* Conserve les proportions */
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


/* ===== STYLE POUR LES REMARQUES ===== */
.remarque {
    background-color: #fffde7; /* Fond jaune clair */
    border-left: 4px solid #ffc107; /* Bordure gauche orange pour attirer l'attention */
    padding: 0.75em 1em; /* Espacement interne */
    margin: 1em 0; /* Espacement externe vertical */
    font-style: italic; /* Texte en italique */
    color: #5d4037; /* Texte légèrement plus foncé */
    border-radius: 0 4px 4px 0; /* Coins arrondis à droite */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Ombre légère */
    font-size: 0.95em; /* Taille légèrement réduite */
}

/* Variantes de remarques */
.remarque.importante {
    background-color: #ffebee;
    border-left-color: #f44336;
    color: #c62828;
    font-weight: bold
}

.remarque.info {
    background-color: #e3f2fd;
    border-left-color: #2196f3;
    color: #0d47a1;
}

.remarque.discrete {
    background-color: #f5f5f5;
    border-left-color: #9e9e9e;
    color: #616161;
    font-style: normal;
}

.remarque.todo {
    background-color: #e8f5e9;
    border-left-color: #4caf50;
    color: #2e7d32;
}


/* ===== STYLE PARTICULIERS (stabilo) ===== */
strong {
  color: #808080;   /* Gris standard */
}

.strong-gris {
  font-weight: bold; /* Garde le style gras */
  color: #808080;   /* Gris standard */
}

.strong-bleu {
  font-weight: bold; /* Conserve le style gras */
  color: blue;      /* Couleur bleue */
}