/*==========================================
  Variables globales
==========================================*/
:root {
  --wf-bg: var(--ast-global-color-0);
  --wf-card-bg: #ffffff;
  --wf-border: #e0e0e0;
  --wf-primary: #147;
  --wf-text: #333333;
  --wf-font: "Arial", sans-serif;
  --wf-radius: 6px;
  --wf-gap: 8px;
}

/*==========================================
  Conteneur principal
==========================================*/
.wp-forecast {
  font-family: var(--wf-font);
  color: var(--wf-text);
  display: flex;
  flex-direction: column;
  gap: var(--wf-gap);
  background: var(--wf-bg);
  padding: var(--wf-gap);
  border-radius: var(--wf-radius);
  flex: 0 0 auto;
  width: 100%;
  max-width: 350px;
}

/*==========================================
  Météo actuelle
==========================================*/
.wp-forecast-curr {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 2;
    background: var(--wf-card-bg);
    padding: 8px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius);

}
.wp-forecast-curr-block {
  display: flex;
  align-items: center;        /* centre verticalement */
  justify-content: space-between;
  padding: 0;                 /* plus de padding inutile */
  margin: 0 0 4px;            /* un petit écart en bas */
  height: auto !important;    /* ne force plus une hauteur fixe */
  line-height: 1.2;           /* réduis légèrement l’interligne */
}

/* 2) Ajuste aussi les sous-blocs gauche/droite si besoin */
.wp-forecast-curr-left,
.wp-forecast-curr-right {
  padding: 2px 4px;           /* plus compact */
  font-size: 13px;            /* ou 12px selon la place */
}

/* 3) Si tu veux encore plus dense, tu peux faire : */
.wp-forecast-curr-block * {
  margin: 0;
  padding: 0;
}


/* 3) Détail courant : toujours visible, en block sous le résumé */
.wp-forecast-curr-details {
  display: block !important;
  position: static !important;
  width: 100%;
  margin: 0;
  padding: 8px;
  background: var(--wf-card-bg);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  box-shadow: none;
  font-size: 11px;
  line-height: 1.4;
}

/* 4) Si vous préférez détail à côté du résumé : layout row */
.wp-forecast-curr.horizontal {
  flex-direction: row;
  align-items: flex-start;
}
.wp-forecast-curr.horizontal .wp-forecast-curr-details {
  margin-left: var(--wf-gap);
  flex: 1;
}
/*==========================================
  Prévisions multi-jours
==========================================*/
.wp-forecast-fc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--wf-gap);
}

.wp-forecast-fc-oneday {
  background: var(--wf-card-bg);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  padding: 6px 4px;
  text-align: center;
  font-size: 11px;
  /* autorise la boîte à se réduire, évite le scroll */
  min-width: 0;
  white-space: normal;
}

.wp-forecast-fc-left img {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
}

.wp-forecast-fc-oneday .wp-forecast-fc-label {
  font-weight: bold;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wp-forecast-fc-label {
  font-weight: bold;
  margin-bottom: 2px;
}

/*==========================================
  Navigation AJAX et sélecteur
==========================================*/
.wpff_nav {
  text-align: center;
  font-size: 11px;
  margin-top: 4px;
  cursor: pointer;
}

.wpff_nav:hover {
  color: var(--wf-primary);
  text-decoration: underline;
}

.wpf-selector {
  font-size: 11px;
  padding: 4px;
  background: var(--wf-card-bg);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
}

/*==========================================
  Iframe intégré
==========================================*/
iframe.wpf-iframe {
  width: 100%;
  height: auto;
  border: none;
  border-radius: var(--wf-radius);
}

/* Centrage de cellules si nécessaire */
td.td-center {
  text-align: center;
}

/*==========================================
  Sprite d’icônes AccuWeather
==========================================*/
/* charge le sprite et définit la taille */
div[class*="wpfico"] {
  display: inline-block;
  width: 64px;
  height: 40px;
  background-image: url("icons/wsprites.png");
  background-repeat: no-repeat;
}

/* positions individuelles (toutes à recopier) */
div.wpfico01 { background-position: -10px  -10px; }
div.wpfico02 { background-position: -10px  -70px; }
div.wpfico03 { background-position: -10px -130px; }
div.wpfico04 { background-position: -10px -190px; }
div.wpfico05 { background-position: -10px -250px; }
div.wpfico06 { background-position: -10px -310px; }
div.wpfico07 { background-position: -10px -370px; }
div.wpfico08 { background-position: -10px -430px; }
div.wpfico11 { background-position: -10px -490px; }
div.wpfico11_de { background-position: -10px -550px; }
div.wpfico12 { background-position: -10px -610px; }
div.wpfico13 { background-position: -10px -670px; }
div.wpfico14 { background-position: -10px -730px; }
div.wpfico15 { background-position: -10px -790px; }
div.wpfico16 { background-position: -10px -850px; }
div.wpfico17 { background-position: -10px -910px; }
div.wpfico18 { background-position: -10px -970px; }
div.wpfico19 { background-position: -10px -1030px; }
div.wpfico20 { background-position: -10px -1090px; }
div.wpfico21 { background-position: -10px -1150px; }
div.wpfico22 { background-position: -10px -1210px; }
div.wpfico23 { background-position: -10px -1270px; }
div.wpfico24 { background-position: -10px -1330px; }
div.wpfico25 { background-position: -10px -1390px; }
div.wpfico26 { background-position: -10px -1450px; }
div.wpfico29 { background-position: -10px -1510px; }
div.wpfico30 { background-position: -10px -1570px; }
div.wpfico31 { background-position: -10px -1630px; }
div.wpfico32 { background-position: -10px -1690px; }
div.wpfico33 { background-position: -10px -1750px; }
div.wpfico34 { background-position: -10px -1810px; }
div.wpfico35 { background-position: -10px -1870px; }
div.wpfico36 { background-position: -10px -1930px; }
div.wpfico37 { background-position: -10px -1990px; }
div.wpfico38 { background-position: -10px -2050px; }
div.wpfico39 { background-position: -10px -2110px; }
div.wpfico40 { background-position: -10px -2170px; }
div.wpfico41 { background-position: -10px -2230px; }
div.wpfico42 { background-position: -10px -2290px; }
div.wpfico43 { background-position: -10px -2350px; }
div.wpficoswa { background-position: -10px -2410px; }

/*==========================================
  Icônes font-size (wpf-wi-icon)
==========================================*/
.wpf-wi-icon {
  font-size: 36px;
  line-height: 1;
}