/* ============================================================
   blocs.css — Présentation en blocs narratifs aérés
   À ajouter aux pages converties via :
     <link rel="stylesheet" href="blocs.css" />
   Ne touche pas au fond de page ni aux CSS partagés.
   ============================================================ */

.variable {
   background-color: #ffffff !important;
   padding: 8px 10px !important;
}

/* ── Carte narrative ─────────────────────────────────────── */
.recit-section {
   border-radius: 10px;
   padding: 18px 22px;
   margin: 50px 0;
   box-shadow:
      0 3px 14px rgba(0, 0, 0, 0.13),
      0 1px  4px rgba(0, 0, 0, 0.07);
   border-left: 4px solid rgba(80, 60, 20, 0.18);
}

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

/* ── 4 couleurs cycliques ────────────────────────────────── */
/* L'#agrandissement est enfant n°1 de .variable ;
   les recit-sections commencent à l'enfant n°2.            */

.variable > div:nth-child(4n+2).recit-section {
   background: rgba(253, 248, 211, 0.80);   /* ivoire chaud    */
}
.variable > div:nth-child(4n+3).recit-section {
   background: rgba(229, 255, 216, 0.80);   /* vert pâle       */
}
.variable > div:nth-child(4n+0).recit-section {
   background: rgba(209, 234, 255, 0.80);   /* bleu ciel pâle  */
}
.variable > div:nth-child(4n+1).recit-section {
   background: rgba(240, 231, 253, 0.80);   /* lavande pâle    */
}

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

/* ── Tablette (≤ 1200px) : fond variable original, blocs discrets ── */
@media screen and (max-width: 1200px) {
   .variable {
      background-color: #ffffff !important;
      padding: 8px !important;
   }
   .recit-section {
      border-radius: 6px;
      padding: 14px 16px;
      margin: 16px 0;
   }
}

/* ── Mobile portrait (≤ 768px) ───────────────────────────── */
@media screen and (max-width: 768px) and (orientation: portrait) {
   .variable {
      padding: 8px !important;
   }
   .recit-section {
      margin: 10px 0;
   }
}