/* v22 — company / « Start from a template. »
   Trois cartes App Store : cadrage optique des aquarelles, bordure et ombre très douces,
   soulèvement au survol, image qui respire, entrée en stagger, carrousel natif à 390 px.
   Tout est scopé sur #templates. */

#templates { padding: 56px 28px 84px; }

#templates .company-connect-copy { max-width: 640px; }
#templates h2 { text-wrap: balance; }
#templates .company-connect-copy > p { margin-top: 16px; text-wrap: balance; color: #66717d; }

/* ---------- Grille ---------- */
#templates .template-grid {
  list-style: none;
  margin: 48px auto 0;
  padding: 0;
  max-width: 936px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
#templates .template-grid:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; border-radius: 20px; }

/* ---------- Carte ---------- */
#templates .template-card {
  --card-lift: 0px;
  --zoom-boost: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(11, 18, 32, .085);
  border-radius: 18px;
  padding: 12px 12px 20px;
  box-shadow: 0 1px 1px rgba(11, 18, 32, .028), 0 8px 20px -14px rgba(11, 18, 32, .34);
  transform: translateY(var(--card-lift));
  transition:
    transform .42s cubic-bezier(.2, .7, .2, 1),
    box-shadow .42s cubic-bezier(.2, .7, .2, 1),
    border-color .42s cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Vignette ----------
   Tuile de papier teinté : l'aquarelle est en multiply, donc son blanc laisse passer
   la teinte. La vignette se détache de la carte blanche sans deuxième cadre. */
#templates .template-thumb {
  display: block;
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 11px;
  background: #f5f7fa;
  isolation: isolate;
}
#templates .template-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(11, 18, 32, .05);
  pointer-events: none;
}
#templates .template-thumb img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center var(--focus, 60%);
  mix-blend-mode: multiply;
  transform: scale(calc(var(--zoom, 1.045) * var(--zoom-boost, 1)));
  transform-origin: center 58%;
  transition: transform .62s cubic-bezier(.2, .7, .2, 1);
}
/* Recadrage : chaque scène est centrée sur son sujet, avec un peu d'air sous les pieds.
   La scène « service » est plus petite dans son carré d'origine, on la rapproche. */
#templates [data-template="agency"]    .template-thumb img { --focus: 55%; --zoom: 1.045; }
#templates [data-template="ecommerce"] .template-thumb img { --focus: 66%; --zoom: 1.09; }
#templates [data-template="service"]   .template-thumb img { --focus: 70%; --zoom: 1.10; }

/* ---------- Typographie ---------- */
#templates .template-name {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 20px 0 0;
  padding-left: 2px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.022em;
  color: var(--ink);
}
#templates .template-icon {
  flex: 0 0 20px;
  color: #8a97a5;
  transform: translateY(-.5px);
  transition: color .3s cubic-bezier(.2, .7, .2, 1), transform .42s cubic-bezier(.2, .7, .2, 1);
}
#templates .template-line {
  display: block;
  margin: 8px 0 0;
  padding-left: 31px; /* aligné sur le nom, pas sur l'icône */
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.006em;
  color: #66717d;
  text-wrap: pretty;
}

/* ---------- Survol / focus (les cartes ne sont pas des liens : styles prêts pour plus tard) ---------- */
@media (hover: hover) and (pointer: fine) {
  #templates .template-card:hover {
    --card-lift: -3px;
    --zoom-boost: 1.045;
    border-color: rgba(11, 18, 32, .13);
    box-shadow: 0 2px 3px rgba(11, 18, 32, .03), 0 22px 38px -24px rgba(11, 18, 32, .42);
  }
  #templates .template-card:hover .template-icon { color: var(--blue); transform: translateY(-1.5px); }
}
#templates .template-card:focus-within {
  --card-lift: -3px;
  --zoom-boost: 1.045;
  border-color: rgba(11, 18, 32, .13);
  box-shadow: 0 2px 3px rgba(11, 18, 32, .03), 0 22px 38px -24px rgba(11, 18, 32, .42);
}
#templates .template-card:focus-within .template-icon { color: var(--blue); }

/* ---------- Entrée en stagger ----------
   Animation (et non transition) pour que le décalage d'entrée ne retarde pas le survol. */
@keyframes tpl-card-in {
  from { opacity: 0; transform: translateY(18px) scale(.988); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.js #templates .template-card { opacity: 0; transform: translateY(18px) scale(.988); }
.js #templates .template-card.is-visible {
  opacity: 1;
  transform: translateY(var(--card-lift));
  animation: tpl-card-in .58s cubic-bezier(.2, .7, .2, 1) backwards;
}
.js #templates .template-card:nth-child(2).is-visible { animation-delay: 90ms; }
.js #templates .template-card:nth-child(3).is-visible { animation-delay: 180ms; }

/* ---------- ≤ 1000 px : la grille se resserre ---------- */
@media (max-width: 1000px) {
  #templates .template-grid { gap: 16px; max-width: 760px; }
  #templates .template-card { padding: 10px 10px 18px; border-radius: 16px; }
  #templates .template-name { font-size: 16px; margin-top: 16px; }
  /* la colonne se resserre : la ligne repasse à gauche pour tenir sur une seule ligne */
  #templates .template-line { font-size: 13.5px; padding-left: 2px; }
}

/* ---------- ≤ 760 px : carrousel horizontal natif, de bord à bord ---------- */
@media (max-width: 760px) {
  #templates { padding: 34px 0 48px; }
  #templates .company-connect-copy { padding: 0 24px; }

  #templates .template-grid {
    max-width: none;
    margin: 28px 0 -14px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(74vw, 290px);
    gap: 12px;
    padding: 8px 24px 26px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #templates .template-grid::-webkit-scrollbar { display: none; }

  #templates .template-card { scroll-snap-align: start; padding: 10px 10px 18px; }
  #templates .template-name { font-size: 16px; margin-top: 16px; }
  #templates .template-line { font-size: 14px; padding-left: 31px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .js #templates .template-card { opacity: 1; transform: none; }
  #templates .template-card { --card-lift: 0px; --zoom-boost: 1; }
  #templates .template-grid { scroll-snap-type: none; }
}