/* -------------------------------
   Header responsive sur mobile
---------------------------------*/
@media screen and (max-width: 767px) {

  /* Colonne du titre : largeur maximale de 83% */
  .header .col.sml-6:first-child {
    width: 83%;             /* Laisse 17% pour le menu */
    display: flex;
    justify-content: flex-start;
  }

  /* Colonne du menu hamburger : utilise l'espace restant */
  .header .col.sml-6:last-child {
    width: 17%;             /* Prend 17% de la largeur */
    display: flex;
    justify-content: flex-end;
    align-items: center;    /* Aligne l'icône du menu verticalement */
    padding-left: 15px;      /* Espacement entre le menu et le titre */
  }

  /* Icône du hamburger : taille et alignement */
  .header .responsive-menu label {
    width: 40px;    /* Taille fixe pour l'icône */
    height: 40px;   /* Taille fixe pour l'icône */
  }

  /* Titre du site : limite la largeur à 83% et permet 2 lignes */
  .header .logo p {
    font-size: 1.7rem;
    line-height: 1.3;  /* Plus d'espace entre les lignes si nécessaire */
    margin: 0;
    white-space: normal; /* Permet au titre de passer sur 2 lignes si besoin */
    overflow: visible;   /* Évite de couper le texte */
    width: 100%;         /* Prend toute la largeur disponible dans son container */
  }

  /* Réduit l'espace entre le menu et le titre */
  .header .nav .menu {
    flex-direction: column;
  }

  /* -------------------------------
     Titre h2 dans les articles (sur mobile)
  ---------------------------------*/

  .article header h2, .article header h2 a {
    font-size: 2.9rem;  /* Taille du titre dans les articles */
    line-height: 1.2;   /* Hauteur de ligne pour le titre */
  }

  /* -------------------------------
     Taille de la police pour le body (sur mobile)
  ---------------------------------*/

 /* body {
    font-size: 14px; /* Taille de la police du texte */
  }*/
}