/* ==========================================================
   🌿 CHENEYEN STYLES PARTAGÉS
   Name: kit graphique central
   Fichier : shared-styles.css
   Auteur  : Réseau Saïda Network (Hassen Ksantini)
   Dernière mise à jour : janvier 2026
   ----------------------------------------------------------
   Description: Ce fichier définit les styles globaux réutilisables pour
   tous les sites du réseau ksantini.net :
   - cheneyen.ksantini.net
   - pavd.ksantini.net
   - batsofalgeria.ksantini.net
   - cheneyen.ksantini.net/
   ----------------------------------------------------------
   Notes importantes :
   - Tous les CPT (flore_saida, faune_saida, stations_saida, naturadocs)
     sont en pleine largeur.
   - Seuls les articles normaux de Cheneyen ont une barre latérale et 
     une largeur maximale (max-width).
   ========================================================== */

/* ==========================================================
   IMPORTATION DE POLICE
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&display=swap');

/* ==========================================================
   BLOCS IMAGE + TEXTE
   ========================================================== */
.image-text-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #e7f3e4; /* vert pâle */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 30px auto;
  max-width: 1000px; /* large mais pas full screen */
  font-family: 'Open Sans Condensed', 'Open Sans', sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-text-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.image-text-card img {
  width: 45%;
  height: 100%;
  object-fit: cover;
}

.image-text-content {
  padding: 24px 32px;
  color: #234d1f; /* vert foncé */
  width: 55%;
}

.image-text-content h3 {
  font-size: 20px;
  color: #234d1f;
  margin-bottom: 8px;
  font-weight: 700;
}

.image-text-content h4 {
  font-size: 18px;
  color: #2f5c29;
  margin-bottom: 12px;
  font-weight: 600;
}

.image-text-content p {
  font-size: 16px;
  color: #2f5c29;
  line-height: 1.6;
}

/* Responsive mobile pour blocs image + texte */
@media (max-width: 768px) {
  .image-text-card {
    flex-direction: column;
  }
  .image-text-card img {
    width: 100%;
    height: auto;
  }
  .image-text-content {
    width: 100%;
    padding: 20px;
  }
}

/* ==========================================================
   BLOC "TOP CARD" (Introduction d’article)
   ========================================================== */
.top-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #f7fbf5;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 40px;
}

.layouts-wrap-mobile .top-card .top-card-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.layouts-wrap-mobile .top-card .top-card-content .top-card-content-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.top-card-content img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.top-card-content-title h1 {
  color: #2d5016;
  font-size: 2.2em;
  text-align: center;
  line-height: 1.3;
  font-weight: 700;
}

.top-card-content-title h2 {
  color: #3d6b1f;
  font-size: 1.4em;
  text-align: center;
  font-weight: 600;
  margin-top: 0.5em;
}

/* ==========================================================
   STYLES DE BASE POUR LES ARTICLES
   ========================================================== */

/* ✅ Articles normaux Cheneyen (avec sidebar) */
.cheneyen-article {
  max-width: 800px;
  margin: 0 auto; /* centré avec barre latérale */
  font-family: 'Open Sans', sans-serif;
  color: #2b2b2b;
  line-height: 1.6;
}

/* ✅ CPT full-width : flore_saida, faune_saida, stations_saida, naturadocs */
.flore_saida-article,
.faune_saida-article,
.stations_saida-article,
.naturadocs-article {
  width: 100%;
  margin: 0;
  padding: 0 16px; /* petit padding pour respirer sur mobile */
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  color: #2b2b2b;
  line-height: 1.6;
}

/* ==========================================================
   NOTES ET MAINTENANCE
   ========================================================== */

/*
- Les classes CPT (flore_saida-article, etc.) doivent être ajoutées
  dans les templates PHP correspondants.
- Les articles normaux conservent max-width pour la lisibilité.
- Tout changement de couleur ou typo doit être harmonisé ici.
- Responsive prêt pour mobile.
*/