/*
    site-templates.css — galerie publique des sites modèles (/{locale}/modeles), layout Nexsas.
    Chargé après home.css et platform-contents.css (même `_head`) : réutilise les variables
    `--cmw-*` (conteneur `.cmw-home`), les boutons `.cmw-btn` et les classes `pc-` de l'en-tête.
    Préfixe `tg-`. Comportement : public/js/site-templates-gallery.js.
*/

/* En-tête de page */
.tg-hero { padding-bottom: 0; }
.tg-title { max-width: 820px; }
.tg-promises { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 0; font-size: 15px; color: var(--cmw-ink-2); }
.tg-promises span { display: inline-flex; align-items: center; gap: 8px; }
.tg-promises i { color: var(--cmw-accent); font-size: 14px; }

/* Filtres par famille de métiers */
.tg-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }
.tg-filter { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--cmw-line); background: var(--cmw-paper); color: var(--cmw-ink); font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.tg-filter:hover { border-color: var(--cmw-accent-line); color: var(--cmw-accent); }
.tg-filter.is-active { background: var(--cmw-ink); border-color: var(--cmw-ink); color: var(--cmw-paper); }
.tg-filter-count { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--cmw-paper-3); color: var(--cmw-ink-2); }
.tg-filter.is-active .tg-filter-count { background: rgba(255, 255, 255, .18); color: var(--cmw-paper); }

/* Grille : 2 modèles comme 30. Peu de cartes = deux colonnes larges et centrées. */
.tg-list { padding-top: 32px; }
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px; }
.tg-grid--few { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); max-width: 1080px; margin: 0 auto; }
.tg-card { display: flex; flex-direction: column; background: var(--cmw-paper); border: 1px solid var(--cmw-line); border-radius: var(--cmw-radius-xl); box-shadow: var(--cmw-shadow); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.tg-card:hover { box-shadow: var(--cmw-shadow-lg); transform: translateY(-3px); }
.tg-card[hidden] { display: none; }

/* Vignette : barre de navigateur + capture qui défile au survol */
.tg-shot { position: relative; display: block; text-decoration: none; background: var(--cmw-paper-2); border-bottom: 1px solid var(--cmw-line); }
.tg-shot-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--cmw-paper-3); }
.tg-shot-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cmw-line); }
.tg-shot-url { margin-left: 10px; flex: 1; min-width: 0; padding: 4px 12px; border-radius: 999px; background: var(--cmw-paper); font-size: 12px; color: var(--cmw-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-shot-frame { --tg-scroll: 0px; --tg-scale: .3; position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--cmw-paper-2); }
.tg-shot-frame img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; transform: translateY(0); transition: transform 1.2s ease; will-change: transform; }
.tg-card:hover .tg-shot-frame.has-image img,
.tg-shot:focus-visible .tg-shot-frame.has-image img { transform: translateY(var(--tg-scroll)); transition-duration: var(--tg-duration, 6s); transition-timing-function: linear; }
.tg-shot-frame iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 990px; border: 0; transform: scale(var(--tg-scale)); transform-origin: top left; pointer-events: none; }
.tg-shot-hint { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--cmw-ink); color: var(--cmw-paper); font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.tg-card:hover .tg-shot-hint, .tg-shot:focus-visible .tg-shot-hint { opacity: 1; transform: none; }

/* Texte de la carte */
.tg-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; flex: 1; }
.tg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.tg-tag { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--cmw-paper-3); color: var(--cmw-ink-2); }
.tg-tag--accent { background: var(--cmw-accent-soft); color: var(--cmw-accent); }
.cmw-home .tg-card-title { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; margin: 4px 0 0; color: var(--cmw-ink); }
.cmw-home p.tg-card-name { font-size: 14px; color: var(--cmw-ink-3); margin: 0; opacity: 1; }
.cmw-home p.tg-card-text { font-size: 15px; line-height: 1.6; color: var(--cmw-ink-2); margin: 4px 0 0; opacity: 1; }
.tg-points { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; }
.cmw-home p.tg-point { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; line-height: 1.45; color: var(--cmw-ink); opacity: 1; }
.tg-point i { flex: none; margin-top: 3px; font-size: 12px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cmw-ok-soft); color: var(--cmw-ok); }
.tg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 14px; }
.tg-actions .cmw-btn { padding: 12px 20px; }
.tg-metier { margin: 4px 0 0; font-size: 14px; }
.tg-metier a { color: var(--cmw-accent); font-weight: 600; text-decoration: none; }
.tg-metier a:hover { text-decoration: underline; }

/* Section « Modèles » de la page d'accueil (nexsas/home/_templates) : même carte, grille fixe
   de 3 colonnes (2 sur tablette, 1 sur téléphone) pour que 6 démos tombent en deux rangées. */
.cmw-templates-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmw-templates-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 44px 0 0; text-align: center; }
.cmw-home .cmw-templates-more-hint { font-size: 14px; color: var(--cmw-ink-3); }

/* Comment ça marche */
.tg-how { margin: 64px 0 0; }
.cmw-home h2.tg-how-title { font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.01em; margin: 0 0 22px; color: var(--cmw-ink); }
.tg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tg-step { padding: 24px; border: 1px solid var(--cmw-line); border-radius: var(--cmw-radius-l); background: var(--cmw-paper-2); }
.tg-step-num { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--cmw-ink); color: var(--cmw-paper); font-weight: 600; margin-bottom: 14px; }
.cmw-home p.tg-step-title { font-size: 17px; font-weight: 600; margin: 0 0 6px; color: var(--cmw-ink); opacity: 1; }
.cmw-home p.tg-step-text { font-size: 15px; line-height: 1.6; margin: 0; color: var(--cmw-ink-2); opacity: 1; }
.tg-more { text-align: center; }
.cmw-home p.tg-footnote { text-align: center; font-size: 13px; color: var(--cmw-ink-3); margin: 18px 0 0; opacity: 1; }

/* Page de reprise d'un modèle : la capture au-dessus des formules */
.tg-claim-shot { display: block; max-width: 760px; margin: 0 auto 40px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(13, 15, 18, .08); box-shadow: 0 24px 60px rgba(13, 15, 18, .10); }
.tg-claim-shot img { display: block; width: 100%; height: 340px; object-fit: cover; object-position: top; }

@media (max-width: 1080px) {
    .cmw-templates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .tg-steps { grid-template-columns: 1fr; }
    .tg-grid, .tg-grid--few { gap: 20px; }
}
@media (max-width: 640px) {
    .cmw-templates-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .tg-body { padding: 18px 18px 22px; }
    .tg-actions .cmw-btn { flex: 1 1 100%; }
    .tg-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-right: -16px; scrollbar-width: none; }
    .tg-filter { flex: none; }
    .tg-claim-shot img { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
    .tg-card:hover .tg-shot-frame.has-image img { transform: none; }
    .tg-card, .tg-card:hover { transform: none; }
}