/* Réglages de la galerie d'inspirations (taille des vignettes, espacement, détails).
   Fichier autonome : le reste du site passe par scss/ -> css/main.css, qui demande
   un `sass` que l'on n'a pas toujours sous la main. */

/* Valeurs par défaut = le rendu historique (4 colonnes en grand écran, mb-5). */
:root {
  --twm-thumb: 500px;
  --twm-gap: 67px;
}

/* --- La barre de réglages ------------------------------------------------ */

/* Un panneau d'outils centré, à la largeur de son contenu. Au défilement, il se colle
   au bord haut du navigateur et change d'allure (classe .is-stuck posée par
   gallery-controls.js) : plus compact, translucide, liseré aux couleurs de WDI, et les
   libellés s'effacent au profit des icônes (infobulles par `title`). */
.c-gallery-controls {
  --gc-ink: #2f3a3d;
  --gc-muted: #7a8689;
  --gc-line: #e3eaec;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
  padding: 0.6rem 0.75rem 0.6rem 1.4rem;
  border: 1px solid var(--gc-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 40, 45, 0.04), 0 6px 18px -12px rgba(20, 40, 45, 0.25);
  color: var(--gc-ink);
  transition: padding 0.2s ease, border-radius 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.c-gallery-controls.is-stuck {
  padding: 0.35rem 0.6rem 0.35rem 1rem;
  border-color: transparent;
  border-radius: 0 0 14px 14px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 10px 24px -14px rgba(20, 40, 45, 0.45);
}

/* Le liseré n'apparaît qu'une fois collé : il signale que la barre suit le défilement. */
.c-gallery-controls::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--wdi-green, #57cfb0), var(--wdi-blue, #2ab5d3));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.c-gallery-controls.is-stuck::before { opacity: 1; }

.c-gallery-controls__sep {
  width: 1px;
  height: 22px;
  background: var(--gc-line);
}

.c-gallery-control {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gc-ink);
  white-space: nowrap;
  cursor: pointer;
}

.c-gallery-control > .bi {
  font-size: 1rem;
  color: var(--wdi-blue, #2ab5d3);
}

.c-gallery-control__label {
  transition: opacity 0.15s ease;
}

.c-gallery-control__value {
  min-width: 3.4em;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  background: #f1f6f7;
  color: var(--gc-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.c-gallery-control__value::after { content: " px"; }

/* Curseur : piste fine, remplie en dégradé WDI jusqu'au pouce (--fill, en %, écrit par
   gallery-controls.js). */
.c-gallery-range {
  --fill: 30%;
  width: 120px;
  height: 18px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.c-gallery-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--wdi-green, #57cfb0), var(--wdi-blue, #2ab5d3)) 0 / var(--fill) 100% no-repeat, var(--gc-line);
}
.c-gallery-range::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--wdi-green, #57cfb0), var(--wdi-blue, #2ab5d3)) 0 / var(--fill) 100% no-repeat, var(--gc-line);
}
.c-gallery-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 2px solid var(--wdi-blue, #2ab5d3);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}
.c-gallery-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--wdi-blue, #2ab5d3);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.c-gallery-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.c-gallery-range:focus-visible { outline: none; }
.c-gallery-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(42, 181, 211, 0.3); }
.c-gallery-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(42, 181, 211, 0.3); }

/* Interrupteur des détails : la vraie case reste dans le flux (clavier, lecteurs d'écran),
   rendue invisible par-dessus la piste dessinée. */
.c-gallery-switch { position: relative; }
.c-gallery-switch input {
  position: absolute;
  right: 0;
  width: 34px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.c-gallery-switch__track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 20px;
  background: #cfd8da;
  transition: background-color 0.2s ease;
}
.c-gallery-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.c-gallery-switch input:checked + .c-gallery-switch__track {
  background: linear-gradient(90deg, var(--wdi-green, #57cfb0), var(--wdi-blue, #2ab5d3));
}
.c-gallery-switch input:checked + .c-gallery-switch__track::after { transform: translateX(14px); }
.c-gallery-switch input:focus-visible + .c-gallery-switch__track { box-shadow: 0 0 0 4px rgba(42, 181, 211, 0.3); }

.c-gallery-reset {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gc-muted);
  font-size: 1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.c-gallery-reset:hover { background: #f1f6f7; color: var(--wdi-blue, #2ab5d3); }
.c-gallery-reset:focus-visible { outline: 2px solid var(--wdi-blue, #2ab5d3); outline-offset: 1px; }

/* Collée : icônes seules, la barre tient sur une ligne fine. */
.c-gallery-controls.is-stuck .c-gallery-control__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Sous md, la grille retombe à une colonne : plus rien à régler. */
@media (max-width: 767.98px) {
  .c-gallery-controls {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-gallery-controls,
  .c-gallery-controls::before,
  .c-gallery-switch__track,
  .c-gallery-switch__track::after { transition: none; }
}

/* --- La grille ----------------------------------------------------------- */

.c-designs-grid {
  display: grid;
  /* Colonnes de largeur FIXE, pas de 1fr : une piste `1fr` s'étire pour
     remplir la ligne, ce qui upscalait les vignettes bien au-delà des 600px
     du fichier source — et faisait sauter la taille par paliers au lieu de
     suivre le slider. min(..., 100%) évite le débordement horizontal quand
     la largeur demandée dépasse celle de l'écran. */
  grid-template-columns: repeat(auto-fill, min(var(--twm-thumb), 100%));
  gap: var(--twm-gap);
  justify-content: center;
  transition: grid-template-columns 120ms ease-out, gap 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .c-designs-grid {
    transition: none;
  }
}

/* --- La ligne titre / date ----------------------------------------------- */

/* Les colonnes peuvent maintenant descendre à 180px : sans ça, un nom de
   domaine long pousse la date à la ligne et décale la vignette d'une demi-
   hauteur par rapport à ses voisines. */
.c-design-meta {
  gap: 0.75rem;
}

.c-design-meta h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-design-meta p {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* --- Masquage des détails ------------------------------------------------ */

/* Pas de display:none : le titre porte le .stretched-link qui rend toute la
   vignette cliquable. On replie la ligne, l'ancre reste dans le flux et son
   ::after reste calé sur .position-relative (le conteneur ci-dessous n'est pas
   positionné, il ne devient donc pas le nouveau bloc conteneur). Le texte
   reste lisible par les lecteurs d'écran et les crawlers.

   Le repli passe par une piste de grille 1fr -> 0fr : c'est le seul moyen
   largement supporté d'animer vers une hauteur « automatique », que
   `height: auto` ne sait pas interpoler. */
.c-design-meta-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 260ms ease, opacity 180ms ease;
}

.c-design-meta {
  min-height: 0;
  overflow: hidden;
}

/* L'écart sous la ligne est porté par les enfants, pas par .c-design-meta :
   ni une marge ni un padding posés sur elle ne se replient à zéro — une marge
   échappe à `overflow: hidden`, et `min-height: 0` ne comprime pas un padding.
   Dans les deux cas il restait 8px de vide au-dessus de chaque image une fois
   les détails masqués. */
.c-design-meta > * {
  padding-bottom: 0.5rem;
}

[data-twm-details="off"] .c-design-meta-wrap {
  grid-template-rows: 0fr;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .c-design-meta-wrap {
    transition: none;
  }
}