/* ============================
   Mise en page élargie Penscratch 2
   ============================ */
/* Plus d'espace au-dessus du logo de l'en-tête */
.site-header {
  padding-top: 60px;   /* augmente ou diminue selon ton besoin */
}

.site-branding .custom-logo {
  margin-top: 20px;    /* espace supplémentaire juste pour le logo */
}

/* Conteneur principal */
#page {
  max-width: 1400px;   /* élargir la zone totale */
  margin: 0 auto;
  padding: 0 30px;     /* marges latérales respirantes */
}
/* ============================
   Mise en page avec sidebar à droite
   ============================ */
#page {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 24px;
}

.site-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
}

.content-area {
  flex: 1 1 auto;
  max-width: calc(100% - 240px - 32px);
}

.widget-area {
  flex: 0 0 240px;
  margin-left: auto;
}

/* Contenu + sidebar en flex */
.site-content {
  display: flex;
  gap: 10px;           /* espace entre contenu et sidebar */
}

/* Zone principale (articles) */
.content-area {
  flex: 1 1 75%;       /* prend 75% de la largeur */
  max-width: 1900px;   /* limite le texte pour lisibilité */
}

/* Sidebar */
.widget-area {
  flex: 1 1 25%;
  max-width: 320px;
}

/* Titres */
.entry-title, 
.page-title {
  font-size: 2.9em;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Texte de l'article */
.entry-content {
  font-size: 1.1em;
  line-height: 1.7;
}

/* Images dans le contenu */
.entry-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 6px;
  margin: 5px 0;
}

/* Widgets sidebar */
.widget {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.widget:last-child {
  border-bottom: none;
}

/* Footer centré */
.site-footer {
  text-align: center;
  font-size: 0.9em;
  opacity: 0.8;
  margin-top: 40px;
}

/* Responsive : tablette */
@media (max-width: 1024px) {
  .site-content {
    flex-direction: column;
  }
  .widget-area {
    max-width: 100%;
    margin-top: 40px;
  }