## Configuration des titres automatiques
Configuration personnelle dans répertoire snippets du coffre obsidian fichier : title_colors.css

| Couleur      | Code HEX  | Aperçu                                                                         |
| ------------ | --------- | ------------------------------------------------------------------------------ |
| Rouge        | `#FF0000` | <span style="background-color:#FF0000;color:#fff;padding:2px 8px;">    </span> |
| Vert         | `#00FF00` | <span style="background-color:#00FF00;">    </span>                            |
| Bleu         | `#0000FF` | <span style="background-color:#0000FF;color:#fff;padding:2px 8px;">    </span> |
| Jaune        | `#FFFF00` | <span style="background-color:#FFFF00;">    </span>                            |
| Cyan         | `#00FFFF` | <span style="background-color:#00FFFF;">    </span>                            |
| Magenta      | `#FF00FF` | <span style="background-color:#FF00FF;">    </span>                            |
| Noir         | `#000000` | <span style="background-color:#000000;color:#fff;padding:2px 8px;">    </span> |
| Blanc        | `#FFFFFF` | <span style="background-color:#FFFFFF;border:1px solid #ccc;">    </span>      |
| Gris clair   | `#D3D3D3` | <span style="background-color:#D3D3D3;">    </span>                            |
| Gris foncé   | `#A9A9A9` | <span style="background-color:#A9A9A9;">    </span>                            |
| Rouge foncé  | `#8B0000` | <span style="background-color:#8B0000;color:#fff;padding:2px 8px;">    </span> |
| Vert foncé   | `#006400` | <span style="background-color:#006400;color:#fff;padding:2px 8px;">    </span> |
| Bleu foncé   | `#00008B` | <span style="background-color:#00008B;color:#fff;padding:2px 8px;">    </span> |
| Orange       | `#FFA500` | <span style="background-color:#FFA500;">    </span>                            |
| Or           | `#FFD700` | <span style="background-color:#FFD700;">    </span>                            |
| Rose         | `#FFC0CB` | <span style="background-color:#FFC0CB;">    </span>                            |
| Lavande      | `#E6E6FA` | <span style="background-color:#E6E6FA;">    </span>                            |
| Turquoise    | `#40E0D0` | <span style="background-color:#40E0D0;">    </span>                            |
| Indigo       | `#4B0082` | <span style="background-color:#4B0082;color:#fff;padding:2px 8px;">    </span> |
| Violet       | `#800080` | <span style="background-color:#800080;color:#fff;padding:2px 8px;">    </span> |
| Bleu ciel    | `#87CEEB` | <span style="background-color:#87CEEB;">    </span>                            |
| Vert citron  | `#ADFF2F` | <span style="background-color:#ADFF2F;">    </span>                            |
| Rouge corail | `#FF7F50` | <span style="background-color:#FF7F50;">    </span>                            |
| Menthe       | `#98FF98` | <span style="background-color:#98FF98;">    </span>                            |
| Bleu pétrole | `#2F4F4F` | <span style="background-color:#2F4F4F;color:#fff;padding:2px 8px;">    </span> |
| Sable        | `#F4A460` | <span style="background-color:#F4A460;">    </span>                            |
| Chocolat     | `#D2691E` | <span style="background-color:#D2691E;color:#fff;padding:2px 8px;">    </span> |
| Bronze       | `#CD7F32` | <span style="background-color:#CD7F32;">    </span>                            |
| Vert forêt   | `#228B22` | <span style="background-color:#228B22;color:#fff;padding:2px 8px;">    </span> |
Exemple de code du fichier :
```markdown
.markdown-preview-view h1 {
  color: #e74c3c; /* Rouge */
  background-color: #ffeaea;
}

.markdown-preview-view h2 {
  color: #2980b9; /* Bleu */
  background-color: #eaf4ff;
}

.markdown-preview-view h3 {
  color: #27ae60; /* Vert */
  background-color: #eafff3;
}

.markdown-preview-view h4 {
  color: #e67e22; /* Orange */
  background-color: #fff3e6;
}
```

```css
/* =========================================
   PERSONNALISATION DES TITRES MARKDOWN
   ========================================= */

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  /* === Apparence du texte === */

  /* Couleur du texte */
  color: #333; /* ➤ Changer la couleur du titre — ex: #e74c3c pour rouge vif */
  /* Pour désactiver : commenter ou supprimer la ligne */

  /* Police en gras */
  font-weight: bold; /* ➤ Force du gras — "normal", "bold", ou 100 à 900 */

  /* Style de police */
  font-style: normal; /* ➤ "italic" pour pencher les titres */

  /* Transformation du texte */
  text-transform: none; /* ➤ "uppercase", "lowercase", ou "capitalize" */

  /* Soulignement, surlignement */
  text-decoration: none; /* ➤ "underline", "line-through", etc. */

  /* Ombre sur le texte */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* ➤ Effet d'ombre douce */

  /* === Fond et encadrement === */

  /* Couleur de fond */
  background-color: transparent; /* ➤ Changer pour mettre en valeur (ex: #f0f0f0) */

  /* Bordure gauche (style bloc-notes) */
  border-left: 4px solid transparent; /* ➤ Couleur & épaisseur personnalisables */

  /* Bordure globale (si besoin) */
  border: none;

  /* Rayon des coins */
  border-radius: 4px; /* ➤ Arrondi des bords */

  /* === Espacement === */

  /* Espace intérieur (entre le texte et le bord) */
  padding: 6px 10px; /* ➤ Haut/Bas 6px, Gauche/Droite 10px */

  /* Marge extérieure (espacement entre éléments) */
  margin-top: 20px;
  margin-bottom: 10px;

  /* === Taille du texte (ajustable par niveau) === */
  /* Décommenter si tu veux des tailles fixes */

  /*
  font-size: 2em;    // h1
  font-size: 1.75em; // h2
  font-size: 1.5em;  // h3
  font-size: 1.25em; // h4
  font-size: 1em;    // h5
  font-size: 0.875em;// h6
  */

  /* === Police personnalisée === */
  /* font-family: 'Fira Code', 'Arial', sans-serif; */
}

```

### 1. Structures de base dans obsidian (éléments ciblages en CSS)

| Élément Obsidian          | Sélecteur CSS                | Description                     |
| ------------------------- | ---------------------------- | ------------------------------- |
| Vue lecture (Preview)     | `.markdown-preview-view`     | Affiche la note en mode lecture |
| Vue édition (Editor)      | `.cm-s-obsidian`             | Contenu en mode édition         |
| Titre de niveau 1 (`#`)   | `h1`                         | Titre principal                 |
| Titre de niveau 2 (`##`)  | `h2`                         | Sous-titre                      |
| Titre de niveau 3 (`###`) | `h3`                         | Sous-sous-titre                 |
| Citation (`>`)            | `blockquote`                 | Bloc de citation                |
| Liste à puces             | `ul`, `li`                   | Liste non ordonnée              |
| Liste numérotée           | `ol`, `li`                   | Liste ordonnée                  |
| Case à cocher             | `input[type="checkbox"]`     | Checkbox dans les tâches        |
| Tâche cochée              | `.task-list-item.is-checked` | Tâche marquée comme faite       |
| Lien interne              | `a.internal-link`            | Lien vers une autre note        |
| Lien externe              | `a.external-link`            | Lien vers un site web           |
| Tableau Markdown          | `table`, `thead`, `td`, `th` | Tableau classique               |
| Bloc de code              | `pre code`, `code`           | Code sur plusieurs lignes       |
| Code inline               | `code`                       | Code en ligne                   |
| Image                     | `img`                        | Image insérée                   |
| Tags (en bas des notes)   | `.tag`                       | Balises de tags Markdown        |
### 2. Propriétés CSS utiles (et exemples pour obsidian)
| Propriété CSS       | Exemple                        | Utilité                                                    |
|---------------------|--------------------------------|-------------------------------------------------------------|
| `color`             | `color: #ff0000;`              | Couleur du texte                                            |
| `background-color`  | `background-color: #f0f0f0;`   | Couleur de fond                                             |
| `font-size`         | `font-size: 1.2em;`            | Taille du texte                                             |
| `font-family`       | `font-family: 'Fira Code';`    | Police du texte                                             |
| `font-weight`       | `font-weight: bold;`           | Gras ou fin                                                 |
| `text-align`        | `text-align: center;`          | Alignement du texte (left, right, center, justify)         |
| `text-decoration`   | `text-decoration: underline;`  | Souligné, barré, etc.                                       |
| `text-transform`    | `text-transform: uppercase;`   | Majuscules, minuscules                                      |
| `padding`           | `padding: 10px;`               | Espace intérieur                                            |
| `margin`            | `margin: 20px;`                | Espace extérieur                                            |
| `border`            | `border: 1px solid #ccc;`      | Bordure autour d’un élément                                 |
| `border-radius`     | `border-radius: 8px;`          | Coins arrondis                                              |
| `box-shadow`        | `box-shadow: 2px 2px 5px #aaa;`| Ombre portée                                                |
| `line-height`       | `line-height: 1.5;`            | Espacement entre les lignes                                 |
| `display`           | `display: block;`              | Type d'affichage (inline, block, flex...)                   |
| `max-width`         | `max-width: 800px;`            | Limiter la largeur d’un élément                             |
| `overflow`          | `overflow: auto;`              | Gérer le débordement (utile pour blocs de code/tables)      |
### 3. Tableau spécial : personnalisation des tableaux et blocs de code
| Élément            | Sélecteur CSS                     | Propriétés utiles                                                   | Exemple                                                             |
|--------------------|-----------------------------------|----------------------------------------------------------------------|---------------------------------------------------------------------|
| Tableau            | `table`                           | `border`, `width`, `border-collapse`, `margin`, `background-color` | `table { border: 1px solid #ccc; border-collapse: collapse; }`     |
| Ligne de tableau   | `tr`                              | `background-color`, `border-bottom`, `hover` effects                | `tr:hover { background-color: #f5f5f5; }`                           |
| Cellule            | `td`, `th`                        | `padding`, `text-align`, `color`                                    | `td { padding: 8px; text-align: left; }`                           |
| Tête de tableau    | `thead th`                        | `font-weight`, `background-color`                                   | `thead th { background-color: #eee; font-weight: bold; }`          |
| Bloc de code       | `pre code`                        | `background-color`, `padding`, `font-family`, `border-radius`       | `pre code { background-color: #f4f4f4; padding: 12px; }`            |
| Code inline        | `code`                            | `background`, `padding`, `font-family`, `border-radius`             | `code { background: #eee; padding: 2px 4px; }`                      |
| Scroll horizontal  | `pre`                             | `overflow-x`, `max-width`                                           | `pre { overflow-x: auto; max-width: 100%; }`                       |