/* Page BLOG - Conteneur des articles */
#blog {
  display: block;
  margin: 0 18px;
}

/* Carte de chaque article */
.article-card-blog {
  background-color: #ffffff; /*#ddead8*/
  border-radius: 9px; /* 12px * 0.75 */
  box-shadow: 0 3px 11.25px rgba(0, 0, 0, 0.1); /* 4px * 0.75 et 15px * 0.75 */
  margin-bottom: 22.5px; /* 30px * 0.75 */
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
}

/* Contenu de la carte */
.card-inner-blog {
  display: flex;
}

/* Image de l'article */
.articleblog-img {
  width: 262.5px; /* 350px * 0.75 */
  display: block; /* Corrige le comportement des images inline */
}

.article-content-blog {
  margin: 22.5px; /* 30px * 0.75 */
}

/* Titre de l'article */
.article-content-blog h3 {
  font-size: 1.2em; /* 1.4em * 0.75 */
  color: #406145;
  margin-bottom: 7.5px; /* 10px * 0.75 */
  font-weight: 600;
  text-align: center;
}

/* Résumé de l'article */
.article-content-blog p {
  font-size: 1em; /* 1em * 0.75 */
  color: #333;
  line-height: 1.2; /* 1.5 * 0.75 */
  margin: 11.25px 0 26.25px; /* 15px et 35px * 0.75 */
}

/* Lien "Lire plus" */
.blog-read-more {
  font-size: 0.9em; /* 1rem * 0.75 */
  font-weight: bold;
  color: #905f48;
  text-decoration: none;
  padding: 6px 11.25px; /* 8px et 15px * 0.75 */
  margin: 37.5px auto; /* 50px * 0.75 */
  background-color: #f2f2f2;
  border-radius: 3.75px; /* 5px * 0.75 */
  transition: background-color 0.3s ease;
}

/* Effet au survol du lien */
.blog-read-more:hover {
  background-color: #905f48;
  color: white;
  text-decoration: none;
}

/* Ajouter une bordure et un espacement entre les articles */
.article-card + .article-card {
  margin-top: 30px; /* 40px * 0.75 */
}

/* Date sur le blog */
.article-datetime {
  display: block;
  text-align: right;
  font-size: 0.8em; /* 0.9rem * 0.75 */
  color: #8a5c3d; /* Un marron plus doux et subtil */
  font-family: 'Georgia', serif; /* Une police raffinée et intemporelle */
  font-style: italic; /* Un léger italique pour ajouter du caractère */
  letter-spacing: 0.6px; /* 0.8px * 0.75 */
  margin-bottom: 11.25px; /* 15px * 0.75 */
  background: none; /* Pas de fond pour garder l'aspect aéré */
  border: none; /* Pas de bordure pour plus de légèreté */
  box-shadow: none; /* Pas d'ombre pour un aspect plus épuré */
  text-transform: capitalize; /* La première lettre de chaque mot en majuscule */
}


/* Responsive pour tablettes et téléphones */
@media (max-width: 768px) {
  .card-inner-blog {
    flex-direction: column; /* Passe en colonne sur tablettes */
  }

  .articleblog-img {
    width: 100%; /* Image occupe toute la largeur */
    height: auto; /* Ajuste la hauteur automatiquement */
    margin-bottom: 15px;
  }

  .article-content-blog h3 {
    font-size: 1.1rem; /* Réduit légèrement la taille du titre */
  }
  .article-datetime {
    font-size: 1em; /* Réduit la taille de la date */
    text-align: center; /* Centre la date */
  }

  .article-content-blog p {
    font-size: 0.95rem; /* Réduit légèrement la taille du texte */
  }

  .article-content-blog .blog-read-more {
    font-size: 0.85rem; /* Réduit légèrement le bouton */
  }
}

/* Responsive pour les petits écrans (mobiles) */
@media (max-width: 480px) {

  .article-card-blog {
    margin: 10px 0 30px;/* Réduit l'espacement vertical */
  }

  .card-inner-blog {
    padding: 10px;
    align-items: center;
  }
  .articleblog-img {
    width: 80%;
    height: auto;
    margin: 10px 0 20px;
  }

  .article-content-blog h3 {
    font-size: 1.15em;
    margin: -24px -24px 15px;
  }

  .article-content-blog p {
    font-size: 1em; /* Réduction supplémentaire pour le texte */
  }

  .article-content-blog .blog-read-more {
    font-size: 0.8rem; /* Réduction pour le bouton */
    padding: 6px 12px;
  }
  .article-datetime {
    font-size: 0.9em; /* Réduit la taille de la date */
    text-align: right; /* Centre la date */
  }

}





/* TEMPLATE - Conteneur principal de l'article */
.article-blog {
  max-width: 850px; /* 800px * 0.75 */
  margin: 30px auto; /* 40px * 0.75 */
  padding: 20px 40px; /* 30px * 0.75 */
  border: 0.75px solid #d8c3a5; /* 1px * 0.75 */
  font-family: 'Merriweather', serif;
  background-color: #fcf6ed;
  border-radius: 7.5px; /* 10px * 0.75 */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* 4px et 8px * 0.75 */
}

.article-blog h2 {
  font-size: 1.4em; /* 1.6em * 0.75 */
  color: #7b4d35;
  text-align: center;
  font-weight: bold;
  margin-bottom: 15px; /* 20px * 0.75 */
}

/* Date de l'article */
.article-date {
  display: block;
  text-align: center;
  font-size: 0.9em; /* 1.2em * 0.75 */
  color: #5a3725;
  margin-bottom: 26.25px; /* 35px * 0.75 */
  font-family: 'Garamond', serif;
  font-style: normal;
  letter-spacing: 0.375px; /* 0.5px * 0.75 */
}

.article-date::after {
  content: '';
  display: block;
  margin: 3.75px auto 0; /* 5px * 0.75 */
  width: 37.5%; /* 50% * 0.75 */
  height: 0.75px; /* 1px * 0.75 */
  background-color: #ccc;
}

.article-img {
  max-width: 300px; /* 350px * 0.75 */
  height: auto;
  margin: 0 auto;
  display: block;
}

.article-content h3 {
  font-size: 1.2em; /* 1.4em * 0.75 */
  color: #406145;
  border-bottom: 1.5px solid #adcea0; /* 2px * 0.75 */
  padding-bottom: 6px; /* 8px * 0.75 */
  margin: 50px 0 0; /* 40px, 10px * 0.75 */
}

.article-content p {
  margin: 15px 0; /* 20px * 0.75 */
  text-align: justify;
  font-size: 1em; /* 1em * 0.75 */
  line-height: 1.3; /* 1.3 * 0.75 */
}

.article-content ul {
  margin: 0.75rem 0; /* 1rem * 0.75 */
  padding-left: 1.2rem; /* 1.5rem * 0.75 */
}

.article-content ul li {
  margin: 0.5em 0; /* 0.5rem * 0.75 */
}


/* Sous-titre */
.subsection-title {
  font-size: 1em; /* 1em * 0.75 */
  color: #5a3725;
  margin: 37.5px 0 0 18.75px; /* 50px et 25px * 0.75 */
  border-left: 1.5px solid #bc7b50; /* 2px * 0.75 */
  padding: 3.75px 3.75px 3.75px 3.75px; /* 5px * 0.75 */
}

.article-content h5 {
  font-size: 1.1em; /* 1em * 0.75 */
  color: #bc7b50;
  font-style: italic; /* Un léger italique pour ajouter du caractère */
  margin: 30px 0 0 0; /* 25px et -12px * 0.75 */
}

.solutions {
  font-size: 1em; /* 1em * 0.75 */
  color: #5a3725;
  margin: 45px 0 -7.5px 0; /* 60px et -10px * 0.75 */
}


/* Adaptation pour les petits écrans (tablettes et téléphones) */
@media (max-width: 768px) {
  .article-blog {
    padding: 20px; /* Réduit le padding */
    margin: 20px auto; /* Réduit la marge */
  }

  .article-blog h2 {
    font-size: 1.4em; /* Réduit la taille du titre */
  }

  .article-date {
    font-size: 1em; /* Réduit la taille de la date */
  }

  .article-content h3 {
    font-size: 1.2em; /* Réduit la taille des sous-titres */
  }

  .article-content p {
    font-size: 1em; /* Réduit la taille du texte */
  }

  .subsection-title {
    font-size: 1em; /* Réduit la taille du sous-titre */
    margin: 30px 0 0 20px; /* Réduit les marges */
  }

  .article-content h5 {
    font-size: 0.9em; /* Réduit la taille de la section h5 */
  }

 

  .solutions {
    font-size: 0.95em; /* Réduit la taille du texte */
    margin: 40px 0 -5px 0;
  }
}

/* Adaptation pour les très petits écrans (mobiles) */
@media (max-width: 480px) {
  .article-blog {
    padding: 15px 20px; /* Réduit encore le padding */
    margin: 15px 10px; /* Réduit les marges */
  }

  .article-blog h2 {
    font-size: 1.3em; /* Réduit la taille du titre */
  }

  .article-date {
    font-size: 0.85em; /* Réduit la taille de la date */
  }

  .article-content h3 {
    font-size: 1.1em; /* Réduit la taille des sous-titres */
    margin: 30px 0 10px;
  }

  .article-content p {
    font-size: 0.9em; /* Réduit la taille du texte */
    
  }
  .article-content ul li {
    font-size: 0.9em; 
   }

  .subsection-title {
    font-size: 1.1em; /* Réduit la taille du sous-titre */
    margin: 30px 5px 10px;
  }

  .article-content h5 {
    font-size: 1.1em; /* Réduit la taille de la section h5 */
    margin: 30px 5px 10px;
  }



  .solutions {
    font-size: 1em; /* Réduit la taille du texte */
    margin: 30px 0 10px;
  }
}



/* Liste des conseils */
.support-list {
  margin: 0.75rem 0; /* 1rem * 0.75 */
  padding: 0;
  list-style: none; /* Supprime les puces */
}

/* Style des éléments de la liste */
.support-list li {
  display: flex; /* Crée une disposition en ligne */
  gap: 0.75rem; /* 1rem * 0.75 */
  align-items: flex-start; /* Aligne les items au début */
  margin-bottom: 0.75rem; /* 1rem * 0.75 */
}

/* Contenu de chaque élément */
.supportarticle-content {
  display: flex;
  flex-direction: column; /* Positionne le strong et le texte en colonne */
}

/* Texte en gras */
.supportarticle-content strong {
  font-size: 1em; 
  color: #bc7b50;
  margin: 15px 0 3.75px; /* 20px et 5px * 0.75 */
}

/* Texte normal */
.supportarticle-content span {
  font-size: 1em; /* 1em * 0.75 */
  line-height: 1.3; /* 1.3 * 0.75 */
  color: #333;
}



/* Bouton retour au blog */
.back-to-blog {
  display: block;
  background-color: #905f48; /* Couleur de fond */
  padding: 5px 0;
  margin: 115px 0 0px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet de profondeur */
}

.back-to-blog-nav {
  text-align: center;
  margin: 5px;
}

.boutonblog { /* Bouton "page suivante" */
  display: inline-block;
  padding: 12px 25px;
  background: #bc7b50; /* Couleur du bouton */
  color: #fff; /* Texte blanc */
  text-decoration: none; /* Supprime le soulignement */
  border-radius: 25px; /* Bouton arrondi */
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Légère ombre */
}

/* Adaptation pour les petits écrans (tablettes et téléphones) */
@media (max-width: 768px) {
  .support-list li {
    flex-direction: column; /* En mode colonne sur petits écrans */
    align-items: flex-start;
  }

  .supportarticle-content {
    align-items: flex-start;
  }

  .supportarticle-content strong {
    font-size: 1em; /* Réduit la taille du texte en gras */
  }

  .supportarticle-content span {
    font-size: 1em; /* Réduit la taille du texte normal */
  }

  .back-to-blog {
    margin: 80px 0 20px; /* Réduit l'espacement du bouton retour */
  }

  .boutonblog {
    padding: 10px 20px; /* Réduit la taille du bouton */
    font-size: 0.9rem; /* Réduit la taille du texte */
  }
}

/* Adaptation pour les très petits écrans (mobiles) */
@media (max-width: 480px) {
  .support-list li {
    flex-direction: column; /* Disposition en colonne sur mobiles */
    align-items: flex-start;
  }

  .supportarticle-content {
    align-items: flex-start;
  }

  .supportarticle-content strong {
    font-size: 1em; /* Réduit la taille du texte en gras */
    margin-bottom: 5px;
  }

  .supportarticle-content span {
    font-size: 1em; /* Réduit la taille du texte normal */
  }

  .back-to-blog {
    margin: 80px 0 20px; /* Réduit l'espacement du bouton retour */
  }

  .boutonblog {
    padding: 8px 15px; /* Réduit la taille du bouton */
    font-size: 0.9em; /* Réduit la taille du texte */
    font-family: Georgia;
  }
}