/* Masquer les colonnes latérales */
#navigation, #extra {
    display: none;
}

/* Forcer la largeur du contenu central */
#contenu {
    width: 98% !important;
    float: none !important;
    margin: 0 !important;
}

/* Forcer le conteneur principal à s'étendre */
#page {
    width: 98% !important;
    max-width: 98% !important;
    margin: 0 auto;
}

/* Parfois, Escal utilise un conteneur intermédiaire 
#conteneur {
    width: 98% !important;
    max-width: 98% !important;
}

.row {
  display: flex !important;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-md-6 {
  flex: 0 0 auto;
  width: 45% !important;
  padding-left: 15px;
  padding-right: 15px;
}
*/
.laune .titre-autres {
  font-size: 2.1rem;
  font-weight: bold;
  margin-left: 5px;
  color: #f1c50e;
}
.rubrique-autres {
  font-size: 2.1rem;
  font-weight: bold;
  margin-left: 5px;
  color: #ffffff;
}
.laune .descriptif-autres {
  font-size: 1.5rem;
  font-style: normal;
}

/* Style existant pour les colonnes (à conserver) */
.article-colonne {
  flex: 1 1 30%;
  background: #f0f0f0;
  padding: 10px;
  border-radius: 6px;
  text-align: justify;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.article-colonne img {
  float: none !important;
  width: auto;
  max-height: 190px;
  display: block;
  margin: 0 auto !important;
}

/* NOUVEAU : Empile les colonnes en mobile */
@media (max-width: 767px) {
  /* 1. Le conteneur parent des colonnes passe en colonne */
  .conteneur-articles {  /* Remplace par la classe/ID du conteneur parent des .article-colonne */
    display: flex !important;
    flex-direction: column !important;
  }
  /* 2. Chaque colonne prend toute la largeur */
  .article-colonne {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }
}


/* Style de base pour tous les écrans */
.article-colonne-unique {
  flex: 1 1 100%;
  background: #f0f0f0;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  text-align: justify;
}

/* Style des images (commun à tous les écrans) */
.article-colonne-unique img {
  float: none !important;
  max-height: 200px;
  width: auto;
  display: block;
  margin: 0 auto;
}

/* Conteneur flexible pour desktop */
.article-colonne-unique .contenu-article {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* Alternance gauche/droite sur desktop */
.article-colonne-unique.gauche .contenu-article {
  flex-direction: row;
}
.article-colonne-unique.droite .contenu-article {
  flex-direction: row-reverse;
}

/* Texte flexible sur desktop */
.article-colonne-unique .texte-article {
  flex: 1;
  text-align: justify;
}

/* Empilement sur mobile (texte AU-DESSUS de l'image) */
@media (max-width: 767px) {
  .article-colonne-unique .contenu-article {
    flex-direction: column !important;
  }
  /* On inverse l'ordre : texte d'abord, puis image */
  .article-colonne-unique .texte-article {
    order: -1 !important; /* Le texte passe avant */
    width: 100% !important;
    margin-bottom: 15px !important; /* Espace sous le texte */
  }
  .article-colonne-unique img {
    margin: 0 auto; /* Centre l'image */
    width: 100% !important;
    max-width: 300px; /* Limite la largeur de l'image */
  }
}



.bouton {
  color: #ffffff !important;
   font-size: 0.875rem;
  letter-spacing: 1px;
  background-image: none;
  border-style: none;
  text-transform: uppercase;
  font-weight: 600;
  margin: 20px auto 0 45px;
  background-color: #2d549a !important;
  border-width: 0;
}
.bouton:hover {
  color: #ffffff !important;
  background-color: #2d549a !important;
}

ul, ul li {
  text-align: left !important;
  direction: ltr !important;
}
#cadre-article {
  border-width: 0px;
  border-style: none;
}

.spip_document_64 figure img {
	max-height:200px;
	width:auto;
}
.spip_document_66 figure img {
	max-height:150px;
	width:auto;
}


/* Sur mobile, on empile chaque conteneur flex en colonne */
@media (max-width: 767px) {
  div[style*="display: flex"] {
    flex-direction: column !important;
  }
  /* On force chaque enfant à prendre toute la largeur */
  div[style*="display: flex"] > div {
    width: 100% !important;
    flex: none !important;
    margin-bottom: 15px !important;
  }
 div[style*="display: flex"]:not(:has(> div:first-child h1)) 
  > div:nth-child(2):has(h1) {
    order: -1;
}
}