/* v/00 — Référence : maquette Figma actuelle */

/* Grille de templates logo → logo */
.tpl-wrap { position: relative; }
.tpl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 18px; }
.tpl {
  padding: 16px 16px 18px;
  border: 1px solid var(--ag-line); border-radius: 24px;
  background: #fff;
  transition: box-shadow .2s, transform .2s;
}
.tpl:hover { box-shadow: var(--ag-shadow-md); transform: translateY(-1px); }
.tpl__vis {
  height: 88px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; gap: 0;
  background: linear-gradient(120deg, var(--t1), var(--t2));
}
.tpl__vis i { width: 52px; height: 1px; margin: 0 12px; background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.25), rgba(0,0,0,.08)); }
.tpl__time {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px; font-size: 12px; color: var(--ag-muted);
}
.tpl__time::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: #8a8a8a;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 100%) ;
  box-shadow: inset 0 0 0 0 #fff;
  background-image: linear-gradient(#fff,#fff), linear-gradient(#fff,#fff);
  background-size: 1.6px 4px, 3px 1.6px;
  background-position: 5.2px 2.6px, 5.6px 5.6px;
  background-repeat: no-repeat;
}
.tpl h3 { margin-top: 6px; font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -.005em; }
.tpl__desc { margin-top: 8px; font-size: 12.5px; line-height: 20px; color: var(--ag-muted); }

.tpl.is-faded { max-height: 168px; overflow: hidden; }
.tpl-more {
  position: absolute; left: -8px; right: -8px; bottom: -2px; height: 200px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  background: linear-gradient(180deg, rgba(250,250,250,0) 0%, rgba(250,250,250,.75) 35%, var(--ag-bg) 85%);
  pointer-events: none;
}
.tpl-more__btn {
  pointer-events: auto;
  height: 30px; padding: 0 12px;
  border: 1px solid var(--ag-line-2); border-radius: 10px;
  background: #fff; font-size: 14px; color: var(--ag-ink);
  box-shadow: var(--ag-shadow-sm);
}
