/* ================================================
   PAGES DE CONTENU — texte long avec images
   Commun à lecot-christophe, lchan, elcea
   ================================================ */

/* Texte justifié avec indentation — votre .general d'origine */
.general {
  text-align: justify;
  text-indent: 5%;
  margin-bottom: var(--espace-m);
}

/* Citation en italique centrée */
.citation {
  text-align: center;
  font-style: italic;
  color: var(--blanc-doux);
  margin-bottom: var(--espace-m);
  font-size: 15px;
}

/* Bloc d'images flottantes */
.images-portrait {
  margin-bottom: var(--espace-m);
}

/* Deux images empilées verticalement — flottent à gauche */
.images-vertical {
  float: left;
  margin: 0 var(--espace-l) var(--espace-m) 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 250px;
}

/* Deux images côte à côte horizontalement */
.images-horizontal {
  float: left;
  margin: 0 var(--espace-l) var(--espace-m) 0;
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.images-portrait img {
  border: 3px solid var(--blanc);
  display: block;
  width: 100%;
}

/* Nettoie le float après chaque section */
.section::after {
  content: '';
  display: table;
  clear: both;
}

/* Mobile — images pleine largeur sans float */
@media (max-width: 768px) {
  .images-vertical,
  .images-horizontal {
    float: none;
    width: 100%;
    margin: 0 0 var(--espace-m) 0;
  }
}