/* CSS Colordaze v.1.0 ********************** David Bihanic (c)2025 */

  @font-face {
    font-family: "Founders Regular";
    src:
        local("Founders Regular"),
        url("fonts/FoundersGroteskWeb-Regular.otf") format("opentype"),
        url("fonts/FoundersGroteskWeb-Regular.woff") format("woff"),
        url("fonts/FoundersGroteskWeb-Regular.woff2") format("woff2");
  }

  @font-face {
    font-family: "Founders Semibold";
    src:
        local("Founders Semibold"),
        url("fonts/FoundersGroteskWeb-Semibold.otf") format("opentype"),
        url("fonts/FoundersGroteskWeb-Semibold.woff") format("woff"),
        url("fonts/FoundersGroteskWeb-Semibold.woff2") format("woff2");
  }

  body {
    font-family: "Founders Regular";
    margin: 0;
    background-color: #1E1E1E;
    transition: all 1s ease-out;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--box-size, 400px));
    gap: 0;
    justify-content: left;
    margin-top: 53px;
    transition: all 1s ease-out;
  }

  .city-box {
    width: var(--box-size, 400px);
    height: var(--box-size, 400px);
    transition: background 1s ease;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    color: white;
    font-size: 12px;
    text-align: left;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 0;
    z-index: 2;
    box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, .2);
    transition: all 1s ease-out;
    background-color: black;
  }

  .city-box::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 0;
    opacity: var(--grain-opacity, 0.7); /* Contrôle dynamique par AQI */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'%3E%3Cfilter id='noise-filter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3CfeColorMatrix type='saturate' values='0'%3E%3C/feColorMatrix%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.31'%3E%3C/feFuncR%3E%3CfeFuncG type='linear' slope='0.31'%3E%3C/feFuncG%3E%3CfeFuncB type='linear' slope='0.31'%3E%3C/feFuncB%3E%3CfeFuncA type='linear' slope='1'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.1' intercept='-0.55'/%3E%3CfeFuncG type='linear' slope='2.1' intercept='-0.55'/%3E%3CfeFuncB type='linear' slope='2.1' intercept='-0.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise-filter)'/%3E%3C/svg%3E");
    background-size: cover;
    transition: all 1s ease-out;
  }

  .city-name {
    font-size: 17px;
    font-weight: normal;
    margin-bottom: 5px;
    z-index: 3;
  }

  .city-temp, .city-aqi, .city-error {
    font-size: 17px;
    z-index: 3;
  }

  .city-error {
    color: red;
    font-size: 17px;
    margin-top: 5px;
  }

	.loader {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  width: 48px;
	  height: 48px;
	  border-radius: 50%;
	  display: inline-block;
	  border-top: 3px solid #555;
	  border-right: 3px solid transparent;
	  box-sizing: border-box;
	  animation: rotation 1s linear infinite;
	  transition: all 1s ease-out;
	}

	@keyframes rotation {
	  0% {
	    transform: rotate(0deg);
	  }
	  100% {
	    transform: rotate(360deg);
	  }
	} 

  .loading {
	  font-family: "Founders Regular";
	  font-size: 17px;
	  color: #555;
	  text-align: left;
	  transition: all 1s ease-out;
	  display:block;
	  float:left;
	  margin-left: 20px;
	}

  .logo {
    position: fixed;
    font-family: "Founders Regular";
    font-size: 17px;
    color: white;
    background-color: #1E1E1E;
    text-align: left;
    width: 100%;
    height: 40px;
    padding-left: 10px;
    padding-top: 15px;
    top:0px;
    display:block;
    float:left;
    transition: all 1s ease-out;
    z-index: 999999;
  }

  .logo a {
    text-decoration: underline;
    color: white;
  }

  .logo select, .logo button {
    background-color: #333;
    color: white;
    border: none;
    padding: 5px 10px;
    fnt-family: "Founders Regular";
      cursor: pointer;
  }

  .name {
    font-family: "Founders Semibold";
    font-size: 17px;
    color: white;
    text-align: left;
    transition: all 1s ease-out;
    display:block;
    float:left;
    margin-top: -1px;
  }

  .filter {
    display:block;
    float:left;
    margin-top: -3px;
    margin-left: 50px;
    color:white;
  }

  .bt {
    display:block;
    float:left;
    margin-top: -2px;
    margin-left: 20px;
    color:white;
  }

  .sort {
    margin-left: 20px;
    color:white;
    display:block;
    float:left;
    margin-top: -2px;
  }

   .city-count {
    display:block;
    float:left;
    margin-top: -1px;
    margin-left: 20px;
    color:white;
  }

  .creds{
    font-family: "Founders Regular";
    font-size: 17px;
    color:white;
    position: relative;
    bottom:0px;
    background-color: #1E1E1E;
    text-align: left;
    width: 100%;
    height: 40px;
    padding-left: 10px;
    padding-top: 15px;
    display:block;
  }

  .creds a {
    text-decoration: underline;
    color: white;
  }

  .reg {
    font-family: "Founders Regular";
  }