@font-face {
    font-family: "comfortaa";
    src: url("/static/fonts/Comfortaa.woff2") format(truetype);
}

@font-face {
    font-family: "fira-code";
    src: url("/static/fonts/FiraCode.woff2") format(truetype);
}

@font-face {
    font-family: "plus-jakarta-sans";
    src: url("/static/fonts/PlusJakartaSans.woff2") format(truetype);
}

.ft-comfortaa {
    font-family: 'comfortaa';
}

.ft-firacode {
    font-family: 'fira-code';
}

.ft-jakarta {
    font-family: 'plus-jakarta-sans';
}

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

body {
  font-family: 'plus-jakarta-sans';
  font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
      "wdth" 100,
      "YTLC" 500;
  }

html {
  overscroll-behavior: none;
}

/* ============================
   Styles pour le contenu CKEditor
   Appliqué uniquement aux <article>
   ============================ */

   article {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #222;
    margin: 2rem auto;
  }
  
  /* Titres */
  article h1,
  article h2,
  article h3,
  article h4 {
    font-weight: 600;
    line-height: 1.3;
    margin: 2rem 0 1rem;
  }
  
  article h1 {
    font-size: 2rem;
    border-bottom: 2px solid #e6e6e6;
    padding-bottom: 0.5rem;
  }
  
  article h2 {
    font-size: 1.6rem;
    margin-top: 1.5rem;
  }
  
  article h3 {
    font-size: 1.3rem;
    margin-top: 1.2rem;
  }
  
  article h4 {
    font-size: 1.1rem;
  }
  
  /* Paragraphes */
  article p {
    margin: 1rem 0;
  }
  
  /* Citations */
  article blockquote {
    border-left: 4px solid #005baa;
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    background: #f9f9f9;
    font-style: italic;
    color: #444;
  }
  
  /* Mise en forme inline */
  article strong,
  article b {
    font-weight: 600;
    color: #000;
  }
  
  article em,
  article i {
    font-style: italic;
    color: #333;
  }
  
  /* Liens */
  article a {
    color: #005baa;
    text-decoration: none;
    border-bottom: 1px dotted #005baa;
    transition: color 0.2s, border-color 0.2s;
  }
  article a:hover {
    color: #003d73;
    border-color: #003d73;
  }
  
  /* Images */
  article img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 4px;
  }
  
  /* Vidéos intégrées */
  article iframe {
    max-width: 100%;
    display: block;
    margin: 1.5rem auto;
    border: none;
    aspect-ratio: 16 / 9;
  }
  
  /* Listes */
  article ul,
  article ol {
    margin: 1rem 0 1rem 2rem;
  }
  
  article ul {
    list-style: disc;
  }
  
  article ol {
    list-style: decimal;
  }
  
  article li {
    margin: 0.4rem 0;
  }
  
  /* Tableaux */
  article table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
  }
  
  article th,
  article td {
    border: 1px solid #ddd;
    padding: 0.6rem 0.8rem;
    text-align: left;
  }
  
  article th {
    background: #f2f2f2;
    font-weight: 600;
  }
  
  article tr:nth-child(even) {
    background: #fafafa;
  }
  
  /* Alignement du texte */
  article .text-left {
    text-align: left;
  }
  article .text-right {
    text-align: right;
  }
  article .text-center {
    text-align: center;
  }
  article .text-justify {
    text-align: justify;
  }