/* ==========================================================================
     1. FONDATIONS ET CONFIGURATION GÉNÉRALE
     ========================================================================== */
  * { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
  }
  
  body { 
    font-family: Georgia, serif; font-variant-numeric: lining-nums proportional-nums; 
    line-height: 1.4; 
    color: #333; 
    background: #cccccc; /* gris = couche 1 (ext) pour le grand fond extérieur sur PC */
  }
.nombres {
  font-variant-numeric: lining-nums tabular-nums;
}
  .base-zone { 
    max-width: 1200px; 
    margin: 0 auto; 
    background: #eafaff; /* bleu acier = couche 2 (milieu) pour le grand fond extérieur sur PC */
    padding: 20px 0; 
  }
  
  .page-container { 
    max-width: 800px; 
    margin: 0 auto; 
    background: #ffffff; /* BLANC : Votre conteneur principal redevient blanc sur PC */
    padding: 0px; 
    border: 1px solid #ebd7ec; /* La fine bordure d’origine que vous aimiez */
  }

  /* ==========================================================================
     2. EN-TÊTE DU SITE (HEADER)
     ========================================================================== */
  .site-header { 
    text-align: center; 
    margin-bottom: 20px;       /* Crée un espace propre sous la ligne grise */
    padding-bottom: 15px;      /* Crée un espace entre le texte et la ligne grise */
    border-bottom: 4px solid #808080; /* LA LIGNE ÉPAISSE GRISE */
  }
  
  .site-header-subtitle {
    color: #666;
    font-size: clamp(0.85rem, 2vw, 1.05rem);
    margin-top: 0px;
    margin-bottom: 0;          /* Supprime les marges par défaut qui font baver le fond bleu */
  }
  
  .site-header h1 { 
    font-size: 2.2rem; 
    margin-bottom: 5px; 
  } 
  
  .site-header p { 
    color: #666; 
    font-size: clamp(0.85rem, 2vw, 1.05rem); /* Le texte va se réduire proprement sur mobile */
    margin-top: 5px;                         /* Ajoute une petite respiration sous le logo */
  }

  /* ==========================================================================
     3. STRUCTURE DE L’ARTICLE ET DES PARAGRAPHES
     ========================================================================== */
  .article-container { 
    max-width: 750px; 
    margin: 0 auto; 
    background: #f8f9fa; 
    padding: 3px; 
    margin-bottom: 10px; 
  }
  
  .article-title { 
    font-size: clamp(1.8rem, 5vw, 2.8rem); 
    margin-bottom: 10px; 
    line-height: 1.2; 
  }
  
  .article-container h2 {
    font-size: clamp(1.4rem, 4vw, 2.2rem) !important;
    text-align: center;
    margin-bottom: 15px;
  }

  .para {
    text-align: justify;
    font-size: clamp(0.95rem, 1vw + 0.5rem, 1.1rem);
    line-height: 1.4;
  }
  
  /* mode para spécifique aux aside aparte */
 .para-aparte {
  text-align: left;
  font-size: clamp(0.95rem, 1vw + 0.5rem, 1rem);
  line-height: 1.3;
  margin-bottom: 10px;
}
  
  .para + .para {
    margin-top: 1em;
  }

  /* Données de l’auteur et de la date */
  .meta-infos {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    margin-bottom: 5px;
  }

  /* Conteneur du titre et des deux singes */
  .title-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 15px;
    width: 100%;
    background: #ffffff;
  }

  /* Style des blocs d’images */
  .title-side-img {
    flex: 1;
    max-width: 120px;
  }
  .title-side-img img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  .img-left { text-align: left; margin: 5px 0 5px 16px; }
  .img-right { text-align: right; margin: 5px 16px 5px 0; }

  /* Style du titre central */
  .title-center-text {
    flex: 2;
    text-align: center;
  }
  .title-center-text h1.article-title {
    margin: 0;
    color: #cc0000;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    word-wrap: break-word;
    font-family: Georgia, serif;
  }
  
  /* Style pour les sous-titres d’Histoire */
  .article-subtitle-text {
    font-family: Georgia, serif;
    color: #333333;
    font-size: 1.3rem;
    margin-top: 25px;
    margin-bottom: 10px;
  }

  /* Espacement propre pour vos listes à puces */
  .article-list {
    margin: 15px 0 15px 10px; /* Aligne proprement les puces vers la droite */
  }
  .article-list li {
    margin-bottom: 10px;
  }

  /* ==========================================================================
     4. BOUTONS ET ACTIONS (PDF, FACEBOOK)
     ========================================================================== */
  .actions-article {
    display: flex;
    justify-content: space-between;
    margin-top: 1px;
    padding-top: 1px;
  }

  .btn-action {
    font-size: 0.9em;
    color: #0066cc;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 5px 0;
    margin-bottom: 20px;
  }

  .btn-action:hover {
    text-decoration: underline;
    color: #004499;
  }

  /* ==========================================================================
     5. ENCADRÉS SPÉCIAUX (APARTÉS)
     ========================================================================== */
  .aparte-bonhomme h4, 
  .aparte-sombre h4, 
  .aparte-commentaire h4 {
    color: #c53030;
    margin-top: 0;
    text-transform: uppercase;
    font-size: 0.90rem;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }

  .aparte-bonhomme h5, 
  .aparte-sombre h5, 
  .aparte-commentaire h5 {
    font-size: 1.0rem;   
    line-height: 1.3;     
    margin-bottom: 8px; 
  }

  /* L’aparté Vert "Personnage" (Ex: Motta) */
  .aparte-bonhomme {
    background-color: #e8f8e8;
    border-left: 5px solid #309d30;
    padding: 10px 10px;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
  }

  /* L’aparté Rouge "Sombre Histoire" (Ex: Extroc) */
  .aparte-sombre {
    background-color: #f8e8e8;
    border-left: 5px solid #e53e3e;
    padding: 10px 10px;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
  }

  /* L’aparté Bleu "Commentaire" */
  .aparte-commentaire {
    background-color: #d9e6f3;
    border-left: 5px solid #30679d;
    padding: 10px 10px;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
  }
  
  .text-alert {
    color: #cc0000;
  }

  .text-alert-large {
    font-family: Georgia, serif;
    color: #cc0000;
    font-size: 1.4rem;
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 15px;
  }

  /* ==========================================================================
     6. IMAGES ET ALIGNEMENTS
     ========================================================================== */
  .wrap-img {
    float: right;
    margin: 5px 0 5px 16px;
  }
  
  .wrap-imgR {
    float: left;
    margin: 5px 16px 5px 0;
  }

  /* ==========================================================================
     7. GRILLE DES AUTRES ARTICLES (BAS DE PAGE)
     ========================================================================== */
  .articles-grid {
    display: grid;
	/* pour 1 colonnes  grid-template-columns: 1fr;*/
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 15px;
    margin-bottom: 30px;
  }
  .articles-grid1 {
    display: grid;
	  grid-template-columns: 1fr;
   
    gap: 20px;
    margin-top: 15px;
    margin-bottom: 30px;
  }

  .article-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
  }
	
  .article-card {
    background: #ffffff;
    padding: 15px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .article-card-link:hover .article-card { 
    transform: translateY(-4px); 
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    border-color: #b0b0b0;
  }

  /* Structure interne : sépare le texte à gauche et l’image à droite */
  .card-content-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .card-text {
    flex: 1; 
    text-align: left;
  }
  
  .article-card h3 { 
    margin-top: 0; 
    font-size: 1.2rem;
    color: #4b0082; /* Violet */
    margin-bottom: 6px;
    font-family: Georgia, serif;
    line-height: 1.4;
  }
  
  .article-card p { 
    color: black; 
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 6px;
  }
  
  /* La petite image vignette à droite */
  .card-thumb {
    width: 150px;
    height: 200px;
    object-fit: cover; 
    border-radius: 4px;
    flex-shrink: 0; 
  }
  
  .card-read-more { 
    display: inline-block; 
    color: #0066cc; 
    font-size: 0.85rem;
    font-weight: bold; 
    text-align: left;
  }
  
  .article-card-link:hover .card-read-more {
    text-decoration: underline;
  }
  
  .footer { 
    margin-top: 40px; 
    text-align: center; 
    font-size: 0.85rem; 
    color: #666; 
    padding-top: 20px; 
    border-top: 1px solid #ccc; 
  }

  /* ==========================================================================
     8. RESPONSIVE DESIGN (AFFICHAGE MOBILE UNIQUEMENT)
     ========================================================================= */
  
  /* --- TAILLES ORDINATEUR (PC) --- */
  h1 {
    font-size: 2.5rem;
  }

  /* --- ICI COMMENCE LE ZONE STRICTEMENT MOBILE --- */
  @media screen and (max-width: 768px) {
    
    html, body {
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      background: #ffffff !important;
    }

    .base-zone { 
      max-width: 100% !important; 
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      background: none !important;
    }
    
    .page-container { 
      max-width: 100% !important; 
      width: 100% !important;
      padding: 10px !important; 
      margin: 0 !important;
      border: none !important;
      background: #ffffff !important;
    }

    .para {
      text-align: left;
      font-size: clamp(0.95rem, 1vw + 0.5rem, 1.1rem);
      line-height: 1.4;
    }
  

  
    /* mode para spécifique aux abside aparte */
    .para-aparte {
      text-align: left;
      font-size: clamp(0.95rem, 1vw + 0.5rem, 1.rem);
      line-height: 1.3;
      margin-bottom: 10px;
    }

    /* Le correctif pour garder vos DEUX singes sur mobile sans écraser le titre */
    .title-header-container {
      gap: 8px !important;              /* Espace minimal pour gagner de la place */
      justify-content: center !important; /* Centre l’ensemble du bloc */
    }
    .img-right {
      display: block !important;        /* REVIENT : On réaffiche le singe de droite */
      text-align: right !important;
    }
    .title-side-img {
      max-width: 55px !important;       /* On réduit leur taille (55px au lieu de 70px) pour que les deux tiennent sur la largeur */
      flex: 0 0 55px !important;        /* Bloque la taille des singes pour qu’ils ne se déforment pas */
    }
    .title-center-text h1.article-title {
      font-size: clamp(1.4rem, 6vw, 1.8rem) !important; /* Ajustement automatique de la taille du texte */
      text-align: center !important;    /* On recentre le titre pour garder la symétrie */
    }

    .articles-grid { 
      grid-template-columns: 1fr !important; 
      gap: 15px !important;
    }
    
    .wrap-img, .wrap-imgR {
      float: none !important;
      display: block !important;
      margin: 15px auto !important;
      max-width: 95% !important;
    }
    
    h1 {
      font-size: 1.8rem !important;
    }
 
  } /* <--- Cette accolade ferme STRICTEMENT la zone mobile. */