/*
  skybg_cleaned.css – version nettoyée et aérée
  */

/* Sky Background - palettes et transitions */
/* Conteneur plein écran (injecté quand shortcode présent) */
#sky-host { position: relative; z-index: 0; }
/* base commune */

#sky-host #sky-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  transition: filter .8s, opacity .8s;
}

#sky-bg {
  filter: brightness(var(--pv-brightness, 1)) saturate(1.05);
  transition: filter 1.5s ease-in-out;
}
/* Phase diurne : teintes globales */
.sky--day #sky-bg      { filter: brightness(1)    saturate(1.05); }
.sky--twilight #sky-bg { filter: brightness(.45)  hue-rotate(-10deg) saturate(1.1); }
.sky--night #sky-bg    { filter: brightness(.25)  saturate(.6); }

/* Palettes météo (adapte les couleurs à ta charte) */
/* .sky--clear    #sky-bg { background: radial-gradient(120% 80% at 50% 10%, #cfe9ff, #8ec5ff 45%, #4f86f7 100%), */
.sky--clear    #sky-bg { background: linear-gradient(#00000000, #00000000),
	url("/wp-content/uploads/2025/10/clear.png"); }
.sky--partly   #sky-bg { background: linear-gradient(#00000000, #00000000),
	url("/wp-content/uploads/2025/10/skyscape.jpg"); }
.sky--overcast #sky-bg { background: linear-gradient(#00000000, #00000000),
	/*url("/wp-content/uploads/2025/10/overcast.jpg"); }*/
	url("/wp-content/uploads/2025/11/overcast5.jpg"); }
.sky--fog      #sky-bg { background: linear-gradient(#00000000, #00000000),
	url("/wp-content/uploads/2025/10/Sky-overcast.png"); }
.sky--drizzle  #sky-bg { background: linear-gradient(#00000000, #00000000),
	url("/wp-content/uploads/2025/10/overcast-drizzi.png"); }
.sky--rain     #sky-bg { background: linear-gradient(#00000000, #00000000),
	url("/wp-content/uploads/2025/10/rain.png"); }
.sky--snow     #sky-bg { background: linear-gradient(#00000000, #00000000),
	url("/wp-content/uploads/2025/10/Sky-snow.png"); }
.sky--rainshower     #sky-bg { background: linear-gradient(#00000044, #00000000), 
	url("/wp-content/uploads/2025/10/rainshower-scaled.jpg"); }
.sky--snowshower     #sky-bg { background: linear-gradient(#ffffffff, #00000022),
	url("/wp-content/uploads/2025/10/Sky-snow.png"); }
.sky--thunder  #sky-bg { background: linear-gradient(#00000000, #00000000),
	url("/wp-content/uploads/2025/10/Sky-thunder.png"); }

.blank-canvas .wrap {
    padding: 0px !important;
}
/* Texture légère (optionnelle) */
#sky-bg::after {
  content: ""; position: absolute; inset: 0; opacity: .06;
  background-image:
    radial-gradient(#000 1px, transparent 1px),
    radial-gradient(#000 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 1px;
  mix-blend-mode: multiply; pointer-events: none;
}
*/
/* S'assure que le fond couvre bien la fenêtre */
html, body { min-height: 100%; }

/* Bannière décision */
#solar-hint {
	/*display:none;*/
	position: fixed;
	left: 50%;
	bottom: 128px;
	/*top:125px;*/
	transform: translateX(-50%); 
	background: rgba(0,0,0,.55);
	color:#fff;
	padding:0px 0px;
	border-radius:10px;
	font: 18px/1.3 system-ui, sans-serif;
	z-index: 9998;
	backdrop-filter: blur(4px);
	box-shadow: 0 6px 18px rgba(0,0,0,.25);

}

@media (max-width: 768px) {
  #solar-hint {
 bottom: auto;
	  top:101px;
	  font: 12px/1.3 system-ui, sans-serif;
  }
}

/* Message de clignotement */
#solar-flash {
  position: fixed;
  left: 50%;
  bottom: 80px;                /* au-dessus des barres (bottom:60px) */
  transform: translateX(-50%);
  color: #ffd54a;               /* jaune doux */
  font: 24px/1.2 "Segoe UI", sans-serif;
  background: rgba(0,0,0,0.55);
  padding: 6px 12px;
  border-radius: 8px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
}
/*
/* Timeline */
/* Conteneur commun */
#solar-timeline{
  position: fixed;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  z-index: 9998;
  background: rgba(0,0,0,.15);
  padding: 5px 5px 3px;
  border-radius: 12px;
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
  display: flex;                     /* ⬅️ forcer l’horizontal dès le 1er paint */
  gap: 18px;
  overflow: hidden;
}

/* FIXE (pas de scroll/drag) */
#solar-timeline.timeline--fixed{
  display: flex;
  gap: 18px;
  justify-content: center;
  overflow: hidden;
}

/* SCROLL (drag horizontal) */
 #solar-timeline.timeline--scroll{
   display: flex;
   gap: 18px;
   overflow-x: auto;           /* ⬅️ défilement horizontal réel */
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;  /* inertie iOS */
   scrollbar-width: none;               /* masque la barre FF */
   cursor: grab;
   user-select: none;
   -webkit-user-select: none;
   touch-action: pan-x;                 /* glisser horizontal sur tablette */
}
 #solar-timeline.timeline--scroll::-webkit-scrollbar{ display:none; }

/* Barres (rappel largeur fixe) */
/* .sol-hour{ flex: 0 0 70px; } */
.sol-hour {
/*  flex: 0 0 85px; /* flex 1 1 auto;      peut s’agrandir et se réduire */
  min-width: 90px;     /* jamais plus petit que 80px était à 85 !*/ 
  container-type: inline-size;
}

.sol-hour{
 /* width: 170px;*/
  height: auto;               /* ↑ un peu plus haut pour loger icône + heure */
  border-radius: 6px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;   /* on empile vers le bas */
  padding-bottom: 4px;         /* petit air sous le texte */
  color: #000000;                 /* texte noir demandé */
}

.sol-hour[data-best="1"]{

	outline: 3px solid #FF0000;
}
/* Conteneur de l'icône météo */
.sol-hour .wx {
  position: relative;
  display: inline-block;
  line-height: 1;
}

/* Icône de base (soleil, nuage, pluie, etc.) */
.sol-hour .wx .base {
  display: inline-block;
  /* garder ton text-shadow existant ici si tu veux */
  text-shadow: 2px 6px 8px rgba(128,128,128,.75);
  font-size: clamp(30px, 2vw + 1rem, 30px);
}

/* Calque brouillard, centré et superposé */
.sol-hour .wx .fog {
  position: absolute;
  inset: 0;                /* top/right/bottom/left: 0 */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;    /* clics passent à travers */
  opacity: var(--fog, 0);  /* piloté en JS (0..1) */
  /* Optionnel : un brin de flou pour l’aspect vaporeux */
  filter: blur(0.3px);
  /* Optionnel : teinte grise douce */
  color: rgba(120, 120, 120, 1);
  font-size: clamp(30px, 2vw + 1rem, 30px);
}

/*  brouillard réel → on garde 🌫️ centré + flou léger */
.sol-hour .wx.state-fog .fog {
  align-items: center;
  justify-content: center;
  filter: blur(0.3px);
}

.sol-hour .wx.state-underDeck .fog {
  white-space: pre;    
  position: absolute;
  top: 100%;          /* 80% zone dans le bas de l’emoji */
  bottom: 0;         /* la zone s’étend jusqu'en bas */
  left: 0;
  right: 0;

  display: flex;
  align-items: flex-start;  /* vaguelettes en haut de la zone → sous le nuage */
  justify-content: center;

  font-size: clamp(16px, 1.4vw + 0.6rem, 16px); 
  /* font-size: clamp(18px, 1.4vw + 0.6rem, 26px); */
  line-height: 0.2;         /* espace vertical entre les lignes */
  filter: none;
  color: rgba(255,255,255,1);
  text-shadow:
    0 1px 1px rgba(0,0,0,0.9),
    0 0 2px rgba(0,0,0,.5);
}

/* On prévoit que l'overlay nuage soit positionné en relatif par rapport au container */
.sol-hour .wx.has-clouds {
  position: relative;

}

/* Petits nuages superposés (lune) sans toucher au brouillard */
.sol-hour .wx.has-clouds .clouds {
  opacity: var(--cloud, 0.0);
  position: absolute;
  top: 70%;          /* bas de l'icône, ajustable */
  bottom: 0;
  left: 0;
  right: -3px;

  display: flex;
  align-items: flex-start;   /* nuages en haut de la "bande" du bas */
  justify-content: right;

  white-space: pre;
  font-size: clamp(22px, 1.4vw + 0.6rem, 22px);
  line-height: 0.2;
  filter: none;
  color: rgba(60,60,60,1);
  text-shadow:
    0 1px 1px rgba(255,255,255,0.8),
    0 0 2px rgba(0,0,0,.4);
}


/* Ton style existant pour l’emplacement sous l’heure */
.sol-hour .rain{
  order: 2;
  font-size: clamp(30px, 2vw + 1rem, 30px);
  line-height: 1;
  margin-bottom: 2px;     
  margin-top: 2px; 
  text-shadow: 2px 6px 8px rgba(128,128,128,.75);
}


/* parapluie au-dessous de l'heure fonte-size: 24px
.sol-hour .rain{
  order: 2;

	font-size:clamp(30px, 2vw + 1rem, 30px);
  line-height: 1;
  margin-bottom: 2px;     
	margin-top: 2px; 
	text-shadow: 2px 6px 8px rgba(128,128,128,.75);
}
*/

/* heure en noir 21 */
.sol-hour .label{
  order: 1;

font-size:clamp(14px, 2vw + 1rem, 24px);	
  line-height: 1;
  color: #000;                 /* texte noir */
  opacity: .95;
	margin-top: 6px;   
}

@keyframes flashFade {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Heures sous le seuil SW_MIN  if (isNaN(swMin)) swMin = 120; */
.sol-hour.low {
filter: grayscale(0%) brightness(.9);
  opacity: 1;
}

/* Heures de nuit (hors sunrise/sunset) */
.sol-hour.night {
  background: linear-gradient(to top, #808b96 0%, #a3aab2 100%) !important;
  opacity: 0.8;
}
/* 11 */
.sol-hour .mini {
	order:3;
	/*font-size:11px;*/
	font-size:clamp(4px, 18cqw, 24px);	
	line-height:1;
	color:#000;
	opacity:.90;
	margin-top:3px
		; }

.sol-hour .mini2 { 
	order:4;
	/*font-size:11px;*/
	font-size:clamp(4px, 18cqw, 24px);	
	line-height:1;
	color:#000;
	opacity:.90;
	margin-top:3px;
}

.sol-hour .mini3 { 
	order:5;
	/*font-size:11px;*/
	font-size:clamp(4px, 18cqw, 24px);	
	line-height:1;
	color:#000;
	opacity:.90;
	margin-top:3px;
}
#solar-timeline{
  transition: background 1.2s linear; /* fondu lors des changements */
}

/* CSS tooltip */
.tooltip {
  position: fixed;
	z-index: 9999;
  max-width: min(320px, 90vw);
  padding: 8px 10px; border-radius: 8px;
  background: rgba(0,0,0,.85); color:#fff; font: 12px/1.3 system-ui;
  pointer-events: none; transform: translate(-50%, -100%); /* au-dessus */
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
	white-space: pre-line; /* Interprète \n comme des retours à la ligne */
}
/* Logo top-left – visible seulement sur grands écrans */
/* Logo dans le SVG : on gère x/y/width/height en JS, pas avec top/left */
.svg-logo {
  opacity: .25;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.80));
	
}

/* cacher le logo sous 1200px */

/* Crédit Open-Meteo */
#openmeteo-credit {
  position: fixed;
	margin-top:-4px;
  top: 0px;
  right: 3px;
  font-size: 10px;
  font-family: system-ui, sans-serif;
  z-index: 9999;
  pointer-events: auto;
  opacity: 0.8;
  transition: color 0.5s ease, opacity 0.5s ease;
}
/* lien sans déco, adaptatif */
#openmeteo-credit a {
  text-decoration: none;
  font-weight: 500;
  transition: color 0.5s ease;
}


/* mode jour : texte foncé */
body.sky--day #openmeteo-credit a {
  color: rgba(20, 20, 20, 0.8);
}
body.sky--day #openmeteo-credit a:hover {
  color: rgba(20, 20, 20, 1);
}

/* mode nuit : texte clair */
body.sky--night #openmeteo-credit a,
body.sky--twilight #openmeteo-credit a {
  color: rgba(255, 255, 255, 0.8);
}
body.sky--night #openmeteo-credit a:hover,
body.sky--twilight #openmeteo-credit a:hover {
  color: rgba(255, 255, 255, 1);