/* Inspirations */
#inspirations{
  min-height:72svh;
}

#inspirations .inspirationsHead{
  display:block;
}

#inspirations .inspirationsTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

#inspirations .inspirationsTitleRow h2{
  margin:0;
  min-width:0;
  flex:1 1 auto;
}
#inspirations .inspirationsNav{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

#inspirations .inspirationsSections{
  display:block;
  touch-action:pan-y;
}
#inspirations .inspirationsSections.is-carousel .inspirationBlock{
  display:none;
}
#inspirations .inspirationsSections.is-carousel .inspirationBlock.is-active{
  display:block;
}

#inspirations .inspirationBlock{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(213,115,75,.08) 0%, rgba(172,73,40,.04) 100%);
  padding:18px;
  box-shadow:0 10px 20px rgba(0,0,0,.06);
}

#inspirations .inspirationSubtitle{
  margin:10px 0 10px;
  color:var(--accent);
  font-weight:500;
}

#inspirations .inspirationGallery{
  margin-top:14px;
  max-width:none;
  width:100%;
  display:grid;
  grid-template-columns:repeat(10, minmax(0, 1fr));
  grid-template-rows:repeat(5, minmax(0, 1fr));
  gap:14px;
  height:min(68vh, 620px);
  max-height:calc(100vh - 260px);
}
#inspirations .inspirationGallery .main{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  grid-column:1 / span 6;
  grid-row:1 / span 3;
  min-height:0;
}
#inspirations .inspirationGallery .tile{
  border-radius:var(--radius-sm);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  min-height:0;
}
#inspirations .inspirationGallery .main img,
#inspirations .inspirationGallery .tile img{
  width:100%;
  height:100%;
  object-fit:cover;
}
#inspirations .inspirationGallery .tile img{opacity:.96}
#inspirations .inspirationGallery .tile.is-active{
  border-color:color-mix(in srgb, var(--accent2) 44%, transparent);
  box-shadow:0 12px 22px rgba(0,0,0,.10);
}
#inspirations .inspirationGallery .tile.is-active img{
  opacity:1;
}

#inspirations .inspirationGallery .t1{
  grid-column:1 / span 3;
  grid-row:4 / span 2;
}
#inspirations .inspirationGallery .t2{
  grid-column:7 / span 4;
  grid-row:1 / span 3;
}
#inspirations .inspirationGallery .t3{
  grid-column:4 / span 3;
  grid-row:4;
}
#inspirations .inspirationGallery .t3.is-tall{
  grid-row:4 / span 2;
}
#inspirations .inspirationGallery .t4{
  grid-column:4 / span 3;
  grid-row:5;
}
#inspirations .inspirationGallery .trendCard{
  grid-column:7 / span 4;
  grid-row:4 / span 2;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg, rgba(213,115,75,.10) 0%, rgba(172,73,40,.06) 100%);
  padding:18px;
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  overflow:visible;
}
#inspirations .inspirationGallery .trendCard .trendText{
  margin:0;
  color:var(--accent2);
  font-size:clamp(1.0rem, 1.05vw + .7rem, 1.25rem);
  line-height:1.2;
  white-space:pre-line;
  max-width:100%;
  overflow-wrap:anywhere;
}

/* Épure Sereine layout (spécifique) */
#inspirations #inspiration-epure-sereine .inspirationGallery{
  grid-template-columns:repeat(12, minmax(0, 1fr));
  grid-template-rows:1fr 1fr 1fr 1fr .5fr .5fr;
}
#inspirations #inspiration-epure-sereine .inspirationGallery .main{
  grid-column:1 / span 5;
  grid-row:1 / span 6;
}
#inspirations #inspiration-epure-sereine .inspirationGallery .e-mid-top{
  grid-column:6 / span 3;
  grid-row:1 / span 3;
}
#inspirations #inspiration-epure-sereine .inspirationGallery .e-mid-bottom{
  grid-column:6 / span 3;
  grid-row:4 / span 3;
}
#inspirations #inspiration-epure-sereine .inspirationGallery .e-wide{
  grid-column:9 / span 4;
  grid-row:1 / span 2;
}
#inspirations #inspiration-epure-sereine .inspirationGallery .e-thumb-row{
  grid-column:9 / span 4;
  grid-row:3;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
#inspirations #inspiration-epure-sereine .inspirationGallery .e-thumb-row .tile{
  min-height:0;
}
#inspirations #inspiration-epure-sereine .inspirationGallery .trendCard{
  grid-column:9 / span 4;
  grid-row:4 / span 3;
}

/* Manufacture créative layout (spécifique) */
#inspirations #inspiration-manufacture-creative .inspirationGallery{
  grid-template-rows:repeat(6, minmax(0, 1fr));
}
#inspirations #inspiration-manufacture-creative .inspirationGallery .main{
  grid-column:1 / span 6;
  grid-row:1 / span 4;
}
#inspirations #inspiration-manufacture-creative .inspirationGallery .m-right{
  grid-column:7 / span 4;
  grid-row:1 / span 3;
}
#inspirations #inspiration-manufacture-creative .inspirationGallery .m-swatches{
  grid-column:7 / span 4;
  grid-row:4 / span 3;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:repeat(2, minmax(0, 1fr));
  gap:14px;
  min-height:0;
}
#inspirations #inspiration-manufacture-creative .inspirationGallery .m-swatches .tile{
  min-height:0;
}
#inspirations #inspiration-manufacture-creative .inspirationGallery .trendCard{
  grid-column:1 / span 6;
  grid-row:5 / span 2;
}

@media (max-width: 1040px){
  #inspirations .inspirationGallery{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-rows:none;
    grid-auto-rows:auto;
    align-content:start;
    height:auto;
    max-height:none;
  }
  #inspirations .inspirationGallery .main{
    grid-column:1 / -1;
    grid-row:auto;
    order:0;
    min-height:220px;
    aspect-ratio:16/10;
  }
    #inspirations .inspirationGallery .t1,
    #inspirations .inspirationGallery .t2,
    #inspirations .inspirationGallery .t3,
    #inspirations .inspirationGallery .t4{
      grid-column:auto;
      grid-row:auto;
      order:2;
      min-height:110px;
    }
    #inspirations .inspirationGallery .tile{
      aspect-ratio:16/10;
    }
    #inspirations .inspirationGallery .t3.is-tall{
      grid-row:auto;
    }
  #inspirations .inspirationGallery .trendCard{
    grid-column:1 / -1;
    grid-row:auto;
    order:1;
    min-height:120px;
    padding:14px;
  }
  #inspirations .inspirationGallery .trendCard .trendText{
    font-size:1.15rem;
  }
  #inspirations #inspiration-epure-sereine .inspirationGallery .e-mid-top,
  #inspirations #inspiration-epure-sereine .inspirationGallery .e-mid-bottom,
  #inspirations #inspiration-epure-sereine .inspirationGallery .e-wide{
    grid-column:1 / -1;
    grid-row:auto;
    order:2;
    min-height:110px;
  }
  #inspirations #inspiration-epure-sereine .inspirationGallery{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-auto-rows:auto;
    grid-template-rows:none;
    height:auto;
    max-height:none;
  }
  #inspirations #inspiration-epure-sereine .inspirationGallery .main{
    grid-column:1 / -1;
    grid-row:auto;
    order:0;
  }
  #inspirations #inspiration-epure-sereine .inspirationGallery .e-mid-top{ order:3; }
  #inspirations #inspiration-epure-sereine .inspirationGallery .e-mid-bottom{ order:4; }
    #inspirations #inspiration-epure-sereine .inspirationGallery .e-thumb-row{ grid-column:1 / -1; grid-row:auto; order:5; }
    #inspirations #inspiration-epure-sereine .inspirationGallery .trendCard{ grid-column:1 / -1; grid-row:auto; order:1; }
    #inspirations #inspiration-manufacture-creative .inspirationGallery .main{
      grid-column:1 / -1;
      grid-row:auto;
      order:0;
    }
    #inspirations #inspiration-manufacture-creative .inspirationGallery .m-right{
      grid-column:1;
      grid-row:auto;
      order:2;
      min-height:110px;
      aspect-ratio:16/10;
    }
    #inspirations #inspiration-manufacture-creative .inspirationGallery{ grid-template-rows:none; }
    #inspirations #inspiration-manufacture-creative .inspirationGallery .m-swatches{
      grid-column:2;
      grid-row:auto;
      order:2;
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      grid-template-rows:repeat(2, minmax(0, 1fr));
      gap:12px;
    }
    #inspirations #inspiration-manufacture-creative .inspirationGallery .trendCard{ grid-column:1 / -1; grid-row:auto; order:1; }
  #inspirations #inspiration-manufacture-creative .inspirationGallery .m-swatches .tile{
    min-height:0;
    aspect-ratio:1/1;
  }
  #inspirations .inspirationBlock{ padding:14px; }

  /* Vigne & Patrimoine: 1 visuel secondaire + swatches (comme Manufacture) */
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery{
    grid-template-columns:1.2fr .8fr;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .main{
    grid-row:1;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .trendCard{
    grid-row:2;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t2{
    grid-column:1;
    grid-row:3 / span 3;
    aspect-ratio:auto;
    min-height:0;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t1{
    grid-column:2;
    grid-row:3;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t3{
    grid-column:2;
    grid-row:4;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t4{
    grid-column:2;
    grid-row:5;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t1,
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t3,
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t4{
    aspect-ratio:1/1;
    min-height:92px;
  }
}

@media (min-width: 681px) and (max-width: 1040px){
  /* Tablette: on garde une lecture "desktop" (image + texte côte à côte),
     mais on évite que les vignettes soient écrasées par une colonne étroite. */
  #inspirations .inspirationBlock:not(.is-epure):not(.is-manufacture) .inspirationGallery{
    display:flex;
    flex-wrap:wrap;
    height:auto;
    gap:16px;
  }

  #inspirations .inspirationBlock:not(.is-epure):not(.is-manufacture) .inspirationGallery .main{
    order:0;
    flex:1 1 calc(64% - 8px);
    aspect-ratio:16/10;
    min-height:320px;
  }

  #inspirations .inspirationBlock:not(.is-epure):not(.is-manufacture) .inspirationGallery .trendCard{
    order:1;
    flex:1 1 calc(36% - 8px);
    min-height:320px;
    padding:18px;
  }

  #inspirations .inspirationBlock:not(.is-epure):not(.is-manufacture) .inspirationGallery .trendCard .trendText{
    font-size:1.12rem;
    line-height:1.3;
  }

  #inspirations .inspirationBlock:not(.is-epure):not(.is-manufacture) .inspirationGallery .tile{
    order:2;
    flex:1 1 calc(50% - 8px);
    aspect-ratio:4/3;
    min-height:130px;
  }

  /* Vigne & Patrimoine: variante "photo + swatches" au lieu du flex tablette */
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery{
    display:grid;
    grid-template-columns:1.35fr .65fr;
    grid-auto-rows:auto;
    height:auto;
    gap:16px;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .main{
    grid-column:1;
    grid-row:1;
    aspect-ratio:16/10;
    min-height:320px;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .trendCard{
    grid-column:2;
    grid-row:1;
    min-height:320px;
    padding:18px;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t2{
    grid-column:1;
    grid-row:2 / span 3;
    aspect-ratio:auto;
    min-height:0;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t1,
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t3,
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t4{
    grid-column:2;
    aspect-ratio:1/1;
    min-height:0;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t1{ grid-row:2; }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t3{ grid-row:3; }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t4{ grid-row:4; }
}

@media (min-width: 481px) and (max-width: 680px){
  #inspirations .inspirationGallery{
    gap:12px;
  }

  #inspirations .inspirationGallery .main{
    min-height:230px;
    aspect-ratio:16/10;
  }

  #inspirations .inspirationGallery .t1,
  #inspirations .inspirationGallery .t2,
  #inspirations .inspirationGallery .t3,
  #inspirations .inspirationGallery .t4{
    min-height:110px;
  }

  #inspirations #inspiration-epure-sereine .inspirationGallery .e-mid-top,
  #inspirations #inspiration-epure-sereine .inspirationGallery .e-mid-bottom,
  #inspirations #inspiration-epure-sereine .inspirationGallery .e-wide{
    min-height:110px;
  }

  #inspirations #inspiration-manufacture-creative .inspirationGallery .m-right{
    min-height:110px;
  }

  #inspirations #inspiration-manufacture-creative .inspirationGallery .m-swatches .tile{
    min-height:110px;
  }

  #inspirations .inspirationGallery .trendCard{
    padding:14px;
  }

  #inspirations .inspirationGallery .trendCard .trendText{
    font-size:1.06rem;
    line-height:1.3;
  }
}

@media (max-width: 680px){
  #inspirations .inspirationsTitleRow{ gap:10px; }
  #inspirations .inspirationsTitleRow h2{
    font-size:clamp(1.35rem, 5.2vw, 1.9rem);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (max-width: 480px){
  #inspirations .inspirationGallery{
    gap:12px;
  }
  #inspirations #inspiration-manufacture-creative .inspirationGallery .m-right,
  #inspirations #inspiration-manufacture-creative .inspirationGallery .m-swatches{
    grid-column:1 / -1;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t2{
    grid-column:1 / -1;
    grid-row:auto;
    aspect-ratio:16/10;
    min-height:150px;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t4{
    grid-column:1 / -1;
    grid-row:auto;
    aspect-ratio:16/10;
    min-height:140px;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t1,
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t3{
    grid-column:auto;
    grid-row:auto;
  }
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t1,
  #inspirations #inspiration-vigne-patrimoine .inspirationGallery .t3{
    aspect-ratio:1/1;
    min-height:96px;
  }

  /* Terre & Lumière: 3 vignettes -> la dernière passe en pleine largeur */
  #inspirations #inspiration-terre-lumiere .inspirationGallery .t2,
  #inspirations #inspiration-terre-lumiere .inspirationGallery .t1{
    aspect-ratio:1/1;
    min-height:96px;
  }
  #inspirations #inspiration-terre-lumiere .inspirationGallery .t3{
    grid-column:1 / -1;
    aspect-ratio:16/10;
    min-height:140px;
  }
  #inspirations .inspirationsTitleRow h2{
    font-size:clamp(1.22rem, 6.2vw, 1.7rem);
  }
  #inspirations .inspirationGallery .main{
    min-height:200px;
  }
  #inspirations .inspirationGallery .trendCard .trendText{
    font-size:1.05rem;
    line-height:1.25;
  }
}