/* =====================================================
   test.congo.css — Thème Congo pour test.html
   ===================================================== */

/* ── Fond de page ─────────────────────────────────── */
body {
   background-image: url('images/1970_12/fond_congo.webp') !important;
   background-attachment: fixed !important;
   background-size: cover !important;
   background-position: center top !important;
   background-repeat: no-repeat !important;
   background-color: #2a4a20 !important;
}

.Page {
   background: transparent !important;
}

/* En-tête opaque */
.en-tete {
   background: rgba(255, 255, 255, 0.97) !important;
   border-bottom: 2px solid rgba(44, 100, 30, 0.2);
}

.variable {
   background: transparent !important;
   padding: 8px 10px !important;
}

/* ── Blocs narratifs : base ─────────────────────────── */
.recit-section {
   border-radius: 12px;
   padding: 20px 24px;
   margin: 28px 0;             /* espacem. doublé */
   box-shadow:
      0 4px 22px rgba(0, 0, 0, 0.20),
      0 1px 5px  rgba(0, 0, 0, 0.10);
   border-left: 4px solid rgba(0, 0, 0, 0.15);
}

/* Clearfix pour colonnes flottantes */
.recit-section::after {
   content: '';
   display: table;
   clear: both;
}

/* ── 4 couleurs cycliques (transparentes) ─────────── */
/* #agrandissement est enfant n°1 → recit-sections à partir de n°2 */

.variable > div:nth-child(4n+2).recit-section {
   background: rgba(255, 252, 238, 0.84);   /* crème ivoire */
}
.variable > div:nth-child(4n+3).recit-section {
   background: rgba(232, 248, 224, 0.84);   /* vert pâle tropical */
}
.variable > div:nth-child(4n+0).recit-section {
   background: rgba(222, 238, 252, 0.84);   /* bleu ciel / fleuve */
}
.variable > div:nth-child(4n+1).recit-section {
   background: rgba(252, 242, 216, 0.84);   /* sable / ocre chaud */
}

/* .style_date dans un bloc */
.recit-section .style_date {
   display: inline-block;
   background: rgba(210, 255, 195, 0.80) !important;
   border-radius: 4px;
   padding: 2px 8px;
}

/* ── Tablette / mobile ───────────────────────────── */
@media screen and (max-width: 1200px) {
   body {
      background-image: none !important;
      background-color: #f0ede0 !important;
   }
   .recit-section {
      border-radius: 8px;
      padding: 14px 16px;
      margin: 16px 0;
   }
}