/* Page canicule.html : mise en page des cartes (graphes côte à côte).
   Toutes les règles sont limitées à .page-comparaison pour ne pas toucher aux autres pages. */

.page-comparaison { width: 100%; margin: 0 auto; }

.page-comparaison .titre-page { text-align: center; color: #3156C0; margin: 25px 0; }

.page-comparaison .comparaison { display: flex; gap: 30px; align-items: flex-start; margin-bottom: 20px; }

.page-comparaison .carte { flex: 1; min-width: 0; position: relative; }

/* séparation verticale entre les deux cartes */
.page-comparaison .carte:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: -15px;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #3156C0, transparent);
}

.page-comparaison .carte h4 { text-align: center; margin: 0 0 12px; color: #666666; }

.page-comparaison .carte a[onclick] { cursor: pointer; }

.page-comparaison .carte img { width: 100%; height: auto; display: block; }

/* les images dont la hauteur est imposée (style="height:370px") gardent leurs proportions */
.page-comparaison .carte img[style] { width: auto; max-width: 100%; margin: 0 auto; }

.page-comparaison .cadre-img { border: 1px solid #999; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }

.page-comparaison .description {
  margin-top: 15px;
  padding: 12px;
  text-align: justify;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* liste de liens en bas de page */
.page-comparaison .liens-evnt { margin: 30px 0 20px; text-align: left; }
.page-comparaison .bloc-lien { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.page-comparaison .bloc-lien img { display: block; }