/* invit.evnt.tn - Mini card previews for the gallery */
/* Each template has a unique CSS-rendered preview (no images needed) */

.tpl-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .3s;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  position: relative;
  cursor: pointer;
}
.tpl-card[hidden] { display: none; }
/* Lien natif plein-carte (navigation fiable sur mobile). Sous la pastille ♡
 * (z-index 4) qui doit rester cliquable, au-dessus du reste de la carte. */
.tpl-card-link {
  position: absolute; inset: 0;
  z-index: 3;
  text-indent: -9999px; overflow: hidden;
  touch-action: manipulation;
}
.tpl-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 var(--gold);
  pointer-events: none;
  transition: box-shadow .3s;
}
.tpl-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(26,43,74,.18), 0 6px 20px rgba(26,43,74,.06);
  border-color: var(--ink);
}
.tpl-card:hover::after { box-shadow: inset 0 0 0 1px var(--ink); }
.tpl-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Toolbar épurée : barre unique avec search + 2 selects + ♡ */
.template-toolbar {
  display: flex;
  gap: 10px;
  margin: 0 0 22px;
  flex-wrap: wrap;
  align-items: center;
}
.tt-search {
  flex: 1 1 240px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 0 18px;
  font: inherit;
  color: var(--ink);
  min-width: 0;
}
.tt-search:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.tt-select {
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 0 32px 0 16px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.tt-select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
@media (max-width: 600px) {
  .template-toolbar { gap: 8px; }
  .tt-search { flex-basis: 100%; }
  .tt-select { flex: 1 1 calc(50% - 24px); }
  .fav-filter { flex: 0 0 42px; padding: 0 !important; }
}
.fav-filter,
.tpl-fav {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  transition: transform .2s, border-color .2s, background .2s, color .2s;
}
.fav-filter {
  min-height: 44px;
  border-radius: 999px;
  padding: 0 18px;
  font-weight: 700;
}
.fav-filter[aria-pressed="true"],
.tpl-fav[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.tpl-fav {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(26,43,74,.12);
  font-size: 1.15rem;
  line-height: 1;
}
.tpl-fav:hover,
.fav-filter:hover { transform: translateY(-1px); border-color: var(--gold); }

.tpl-card .preview {
  aspect-ratio: 4/5;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  /* Stage gradient that mimics a tabletop */
  background: radial-gradient(ellipse at 50% 105%, rgba(0,0,0,.10) 0%, transparent 55%),
              linear-gradient(180deg, #FAFAF8 0%, var(--cream-dark) 100%);
  perspective: 1000px;
}

/* Envelope shelf : gros rectangle sombre en bas qui simule l'enveloppe ouverte d'où sort la card */
.tpl-card .preview::before {
  content: '';
  position: absolute;
  left: 6%; right: 6%;
  bottom: -22%;
  height: 56%;
  background: linear-gradient(180deg, var(--c-env, #C9A961) 0%, var(--c-env-dark, #9F8240) 100%);
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 14px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
  z-index: 1;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), bottom .5s ease;
}

/* Image-backed preview (when designcards/{slug}.jpg exists) */
.tpl-card .preview-img {
  background-size: cover;
  background-position: center;
  background-color: var(--cream-dark);
}
.tpl-card .preview-img .preview-img-tag {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  position: relative; z-index: 3;
}
.tpl-card .preview-img::before {
  /* Image preview ne montre pas l'enveloppe shelf */
  display: none;
}
.tpl-card:hover .preview-img-tag { transform: scale(1.04); }

.tpl-preview-card {
  width: 76%; aspect-ratio: 3/4;
  background: var(--c-bg, #FAF7F2);
  background-image:
    radial-gradient(ellipse at 30% 18%, rgba(255,255,255,.55) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 82%, rgba(0,0,0,.03) 0%, transparent 60%);
  color: var(--c-fg, #1A2B4A);
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 22px 16px;
  box-shadow:
    0 18px 40px rgba(0,0,0,.20),
    0 6px 14px rgba(0,0,0,.10),
    inset 0 0 0 1px rgba(255,255,255,.55);
  border: 1px solid var(--c-border, transparent);
  border-radius: 3px;
  transform: translateY(-6%) rotate(-1.5deg);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
/* Inner double-border frame (real invitation look) */
.tpl-preview-card::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid var(--c-accent, #C9A961);
  opacity: .35;
  pointer-events: none;
}
/* Corner ornaments */
.tpl-preview-card::after {
  content: '';
  position: absolute; inset: 4px;
  border-top: 1px solid var(--c-accent, #C9A961);
  border-bottom: 1px solid var(--c-accent, #C9A961);
  border-left: 0; border-right: 0;
  opacity: .18;
  pointer-events: none;
}
/* Hover : la carte sort plus de l'enveloppe et se redresse */
.tpl-card:hover .tpl-preview-card {
  transform: translateY(-12%) rotate(0deg) scale(1.04);
  box-shadow: 0 26px 54px rgba(0,0,0,.22), 0 10px 20px rgba(0,0,0,.10);
}
.tpl-card:hover .preview::before {
  bottom: -26%;
}

/* Quick-action overlay au hover : "Personnaliser" */
.tpl-card .preview .quick-action {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%) translateY(8px);
  z-index: 4;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: var(--navy);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  white-space: nowrap;
}
.tpl-card:hover .quick-action { opacity: 1; transform: translateX(-50%) translateY(0); }

.tpl-preview-card .ornament {
  width: 40px; height: 1px;
  background: var(--c-accent, #C9A961);
  margin: 6px auto;
  position: relative;
}
.tpl-preview-card .ornament::before,
.tpl-preview-card .ornament::after {
  content: ''; position: absolute; top: 50%;
  width: 3px; height: 3px;
  background: var(--c-accent, #C9A961);
  border-radius: 50%;
  transform: translateY(-50%);
}
.tpl-preview-card .ornament::before { left: -7px; }
.tpl-preview-card .ornament::after  { right: -7px; }

.tpl-preview-card .small {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-accent, #C9A961);
  margin-bottom: 4px;
  font-weight: 500;
}
.tpl-preview-card .names {
  font-family: 'Playfair Display', serif;
  font-size: 17px; line-height: 1.1; font-weight: 500;
  margin: 6px 0;
  letter-spacing: .01em;
}
.tpl-preview-card .amp {
  font-family: 'Great Vibes', 'Cormorant Garamond', cursive;
  font-style: normal; font-size: 22px;
  color: var(--c-accent, #C9A961);
  display: block; margin: -2px 0;
  line-height: 1;
}
.tpl-preview-card .date {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 10px; margin-top: 6px; opacity: .85;
  letter-spacing: .05em;
}

/* === BACKGROUNDS PER TEMPLATE === */

/* WEDDING */
.preview[data-tpl="elegant-wedding"] { background: linear-gradient(135deg, #F5E6E0, #E5D4A1); }
.preview[data-tpl="elegant-wedding"] .tpl-preview-card { --c-bg: #FAF7F2; --c-fg: #1A2B4A; --c-accent: #C9A961; }

.preview[data-tpl="floral-wedding"] {
  background:
    radial-gradient(circle at 18% 22%, rgba(120,166,111,.5) 0 12%, transparent 13%),
    radial-gradient(circle at 82% 30%, rgba(74,124,78,.36) 0 10%, transparent 11%),
    radial-gradient(circle at 30% 80%, rgba(198,219,188,.62) 0 14%, transparent 15%),
    radial-gradient(circle at 75% 75%, rgba(146,177,126,.46) 0 11%, transparent 12%),
    linear-gradient(135deg, #FBFFF7, #E8F2DF);
}
.preview[data-tpl="floral-wedding"] .tpl-preview-card { --c-bg: #F0F4E8; --c-fg: #2A4A1A; --c-accent: #6B8C50; }

.preview[data-tpl="modern-wedding"] { background: linear-gradient(180deg, #ECEAE3, #D4D1C4); }
.preview[data-tpl="modern-wedding"] .tpl-preview-card { --c-bg: #F5F2EB; --c-fg: #2C2825; --c-accent: #8A8378; --c-border: #E0DCD0; }
.preview[data-tpl="modern-wedding"] .tpl-preview-card .names { font-family: 'Inter', sans-serif; font-weight: 300; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }

.preview[data-tpl="vintage-wedding"] { background: linear-gradient(135deg, #E8D4B8, #C9A678); }
.preview[data-tpl="vintage-wedding"] .tpl-preview-card { --c-bg: #FAF1E0; --c-fg: #5C3A20; --c-accent: #A87838; }
.preview[data-tpl="vintage-wedding"] .tpl-preview-card::before,
.preview[data-tpl="vintage-wedding"] .tpl-preview-card::after {
  content: '❦'; position: absolute; color: var(--c-accent); font-size: 14px;
}
.preview[data-tpl="vintage-wedding"] .tpl-preview-card::before { top: 12px; left: 12px; }
.preview[data-tpl="vintage-wedding"] .tpl-preview-card::after { bottom: 12px; right: 12px; transform: rotate(180deg); }

.preview[data-tpl="tropical-wedding"] {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(74,128,96,.48) 0 15%, transparent 16%),
    radial-gradient(ellipse at 80% 70%, rgba(61,107,80,.42) 0 18%, transparent 19%),
    linear-gradient(135deg, #FBFFF7, #E8F2DF);
}
.preview[data-tpl="tropical-wedding"] .tpl-preview-card { --c-bg: #F0F4E8; --c-fg: #2A4A1A; --c-accent: #6B8C50; }

.preview[data-tpl="bohemian-wedding"] {
  background:
    radial-gradient(circle at 18% 24%, rgba(120,166,111,.32) 0 12%, transparent 13%),
    radial-gradient(circle at 82% 72%, rgba(122,85,68,.24) 0 11%, transparent 12%),
    linear-gradient(135deg, #FBFFF7, #EFE7DA);
}
.preview[data-tpl="bohemian-wedding"] .tpl-preview-card { --c-bg: #F7F0E4; --c-fg: #3E3428; --c-accent: #9A7B52; }
.preview[data-tpl="bohemian-wedding"] .tpl-preview-card .small { font-family: 'Playfair Display', serif; font-style: italic; }

.preview[data-tpl="noir-wedding"] { background: linear-gradient(135deg, #1A1A1A, #2C2C2C); }
.preview[data-tpl="noir-wedding"] .tpl-preview-card { --c-bg: #0E0E0E; --c-fg: #F5E8C8; --c-accent: #D4AF37; }

/* ENGAGEMENT */
.preview[data-tpl="engagement-classic"] { background: linear-gradient(135deg, #FFFFFF, #F4EFE7); }
.preview[data-tpl="engagement-classic"] .tpl-preview-card { --c-bg: #FAF7F2; --c-fg: #1A2B4A; --c-accent: #B53D6B; }

/* ANNIVERSARY */
.preview[data-tpl="anniversary-elegant"] { background: linear-gradient(135deg, #F5E6C5, #D4AF37); }
.preview[data-tpl="anniversary-elegant"] .tpl-preview-card { --c-bg: #FFF9E5; --c-fg: #4A3818; --c-accent: #C99B2D; }

/* BABY SHOWER */
.preview[data-tpl="baby-shower"] {
  background:
    radial-gradient(ellipse at 26% 34%, rgba(255,255,255,.95) 0 16%, transparent 17%),
    radial-gradient(ellipse at 72% 60%, rgba(255,255,255,.95) 0 14%, transparent 15%),
    linear-gradient(135deg, #E0F2FE, #FFE4F0);
}
.preview[data-tpl="baby-shower"] .tpl-preview-card { --c-bg: #FAF7F2; --c-fg: #1A2B4A; --c-accent: #6B8C50; }
.preview[data-tpl="baby-shower"] .tpl-preview-card::before {
  content: '☁'; position: absolute; top: 8px; font-size: 16px; opacity: .4;
}

.preview[data-tpl="baby-shower-pink"] { background: linear-gradient(135deg, #FFE0EC, #FFB5D0); }
.preview[data-tpl="baby-shower-pink"] .tpl-preview-card { --c-bg: #FFF5F8; --c-fg: #B53D6B; --c-accent: #E08AAA; }

.preview[data-tpl="baby-shower-blue"] { background: linear-gradient(135deg, #DDEEFF, #A8C8E8); }
.preview[data-tpl="baby-shower-blue"] .tpl-preview-card { --c-bg: #F5FAFF; --c-fg: #1A4778; --c-accent: #5A8AB8; }

.preview[data-tpl="baby-shower-jungle"] {
  background:
    radial-gradient(circle at 25% 25%, #5A8050 0 14%, transparent 15%),
    radial-gradient(circle at 75% 70%, #4A7040 0 16%, transparent 17%),
    linear-gradient(135deg, #E8F6DA, #8ECF72);
}
.preview[data-tpl="baby-shower-jungle"] .tpl-preview-card { --c-bg: #F0F4E8; --c-fg: #2A4A1A; --c-accent: #6B8C50; }

/* BIRTHDAY GIRL */
.preview[data-tpl="birthday-girl"] { background: linear-gradient(135deg, #FFD6E5, #FF8FAE); }
.preview[data-tpl="birthday-girl"] .tpl-preview-card { --c-bg: #FFF5F8; --c-fg: #B53D6B; --c-accent: #FF8FAE; }
.preview[data-tpl="birthday-girl"] .tpl-preview-card::before {
  content: '♕'; position: absolute; top: 6px; font-size: 14px; color: var(--c-accent);
}

.preview[data-tpl="birthday-girl-unicorn"] {
  background: linear-gradient(135deg, #FFE5F5 0%, #E5D5FF 50%, #D5E5FF 100%);
}
.preview[data-tpl="birthday-girl-unicorn"] .tpl-preview-card { --c-bg: #FFFAFF; --c-fg: #6B4B8C; --c-accent: #C58FE0; }

.preview[data-tpl="birthday-girl-floral"] {
  background:
    radial-gradient(circle at 18% 22%, #F5C0D0 0 11%, transparent 11%),
    radial-gradient(circle at 82% 78%, #F5D0C0 0 11%, transparent 11%),
    linear-gradient(135deg, #FFF0F5, #FFE0F0);
}
.preview[data-tpl="birthday-girl-floral"] .tpl-preview-card { --c-bg: #FFF8FA; --c-fg: #8C3E5A; --c-accent: #D58FA8; }

/* BIRTHDAY BOY */
.preview[data-tpl="birthday-boy"] { background: linear-gradient(135deg, #BDE0FE, #4D9DE0); }
.preview[data-tpl="birthday-boy"] .tpl-preview-card { --c-bg: #F0F8FF; --c-fg: #1A4778; --c-accent: #4D9DE0; }
.preview[data-tpl="birthday-boy"] .tpl-preview-card::before {
  content: '★'; position: absolute; top: 6px; font-size: 14px; color: var(--c-accent);
}

.preview[data-tpl="birthday-boy-space"] {
  background:
    radial-gradient(circle at 80% 20%, #FFE5A0 0 4%, transparent 4%),
    radial-gradient(circle at 20% 70%, #C8E0FF 0 3%, transparent 3%),
    radial-gradient(circle at 65% 60%, #FFF 0 2%, transparent 2%),
    linear-gradient(135deg, #1A1B3A, #0E0E2A);
}
.preview[data-tpl="birthday-boy-space"] .tpl-preview-card { --c-bg: #14152C; --c-fg: #F5F5F8; --c-accent: #FFD088; }

.preview[data-tpl="birthday-boy-dino"] { background: linear-gradient(135deg, #C5E0B4, #6FA34E); }
.preview[data-tpl="birthday-boy-dino"] .tpl-preview-card { --c-bg: #F8FCEF; --c-fg: #2A4A1A; --c-accent: #6FA34E; }

/* CORPORATE */
.preview[data-tpl="corporate"] { background: linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px) 0 0/22px 22px, #F8FAFC; }
.preview[data-tpl="corporate"] .tpl-preview-card { --c-bg: #1A2B4A; --c-fg: #F5E8C8; --c-accent: #C9A961; --c-border: rgba(201,169,97,.3); }

.preview[data-tpl="corporate-gala"] { background: linear-gradient(135deg, #0E0E0E, #2C2C2C); }
.preview[data-tpl="corporate-gala"] .tpl-preview-card { --c-bg: #0E0E0E; --c-fg: #FFE5A0; --c-accent: #D4AF37; --c-border: rgba(212,175,55,.3); }

.preview[data-tpl="corporate-launch"] { background: linear-gradient(135deg, #F0F0F2, #D8D8DC); }
.preview[data-tpl="corporate-launch"] .tpl-preview-card { --c-bg: #FFFFFF; --c-fg: #1A1A1A; --c-accent: #FF6B35; --c-border: #E5E5E8; }
.preview[data-tpl="corporate-launch"] .tpl-preview-card .names { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em; }

/* HENNA */
.preview[data-tpl="henna-night"] { background: linear-gradient(135deg, #6B1F2C, #2C1015); }
.preview[data-tpl="henna-night"] .tpl-preview-card { --c-bg: #FAF1E0; --c-fg: #5C1A24; --c-accent: #9E4B35; }

.preview[data-tpl="henna-minimal"] {
  background:
    radial-gradient(circle at 0 0, transparent 0 16px, rgba(17,17,17,.1) 17px 18px, transparent 19px) 0 0/46px 46px,
    linear-gradient(135deg, #FFFDF8, #F5F1EA);
}
.preview[data-tpl="henna-minimal"] .tpl-preview-card { --c-bg: #FFFFFF; --c-fg: #111111; --c-accent: #111111; }

/* GRADUATION */
.preview[data-tpl="graduation-classic"] { background: linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px) 0 0/22px 22px, #F8FAFC; }
.preview[data-tpl="graduation-classic"] .tpl-preview-card { --c-bg: #FFFFFF; --c-fg: #1A2B4A; --c-accent: #C9A961; --c-border: #E5E5E8; }

.preview[data-tpl="graduation-modern"] { background: linear-gradient(135deg, #F1F1EF, #D8D8DC); }
.preview[data-tpl="graduation-modern"] .tpl-preview-card { --c-bg: #FFFFFF; --c-fg: #111111; --c-accent: #555555; --c-border: #E5E5E8; }

/* THOUR (Circoncision) */
.preview[data-tpl="thour-classic"] {
  background:
    radial-gradient(circle at 0 0, transparent 0 16px, rgba(17,17,17,.08) 17px 18px, transparent 19px) 0 0/46px 46px,
    linear-gradient(135deg, #FFFDF8, #F5F1EA);
}
.preview[data-tpl="thour-classic"] .tpl-preview-card { --c-bg: #FAF7F2; --c-fg: #1A2B4A; --c-accent: #C9A961; }

.preview[data-tpl="thour-modern"] { background: linear-gradient(135deg, #FFFFFF, #F4F4F4); }
.preview[data-tpl="thour-modern"] .tpl-preview-card { --c-bg: #FFFFFF; --c-fg: #111111; --c-accent: #111111; }

/* EVJF */
.preview[data-tpl="evjf-chic"] { background: linear-gradient(135deg, #FFFFFF, #F3EFFB); }
.preview[data-tpl="evjf-chic"] .tpl-preview-card { --c-bg: #FFFFFF; --c-fg: #111111; --c-accent: #7B61A8; }

.preview[data-tpl="evjf-party"] { background: linear-gradient(135deg, #F3EFFB, #FFD0E0); }
.preview[data-tpl="evjf-party"] .tpl-preview-card { --c-bg: #FFFFFF; --c-fg: #35294A; --c-accent: #B53D6B; }

/* DINNER */
.preview[data-tpl="dinner-party"] { background: linear-gradient(135deg, #FFFFFF, #F4F4F4); }
.preview[data-tpl="dinner-party"] .tpl-preview-card { --c-bg: #FFFFFF; --c-fg: #111111; --c-accent: #111111; }

.preview[data-tpl="private-soiree"] { background: linear-gradient(135deg, #0E0E0E, #1A1A1A); }
.preview[data-tpl="private-soiree"] .tpl-preview-card { --c-bg: #0E0E0E; --c-fg: #F5E8C8; --c-accent: #D4AF37; --c-border: rgba(212,175,55,.3); }

/* FLYERS */
.preview[data-tpl="flyer-event-launch"] { background: linear-gradient(135deg, #FF6B35, #C04F20); }
.preview[data-tpl="flyer-event-launch"] .tpl-preview-card { --c-bg: #FFFFFF; --c-fg: #1A1A1A; --c-accent: #FF6B35; }

.preview[data-tpl="flyer-event-classic"] { background: linear-gradient(135deg, #1A2B4A, #2D4068); }
.preview[data-tpl="flyer-event-classic"] .tpl-preview-card { --c-bg: #FAF7F2; --c-fg: #1A2B4A; --c-accent: #C9A961; }

/* === Card body - Paperless Post style : juste titre + style + prix === */
.tpl-card {
  border: 0;
  background: transparent;
  border-radius: 0;
}
.tpl-card:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
.tpl-card:hover::after { box-shadow: none; }
.tpl-card .preview-flatlay { border-radius: 4px; }
.tpl-card .body {
  padding: 10px 4px 6px;
  position: relative;
  background: transparent;
  text-align: center;
}
.tpl-card .body::before { display: none; }
.tpl-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: .98rem; font-weight: 500;
  margin: 0 0 2px; line-height: 1.25;
  color: var(--navy);
}
.tpl-card .style-tag {
  display: block;
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--muted);
  margin: 0 0 4px;
  font-weight: 400;
}
.tpl-card .price {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  color: var(--ink);
  font-weight: 600;
}
.tpl-card .price-free { color: #15803D; text-transform: uppercase; letter-spacing: .04em; }

/* === Filter pills === */
.filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 16px 0; margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.filter-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filter-group .label {
  font-size: .8rem; color: var(--muted); margin-inline-end: 4px;
  text-transform: uppercase; letter-spacing: .1em;
}
.filter-pill {
  padding: 6px 14px; border-radius: 999px;
  font-size: .85rem; font-weight: 500;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink); cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.filter-pill:hover { border-color: var(--gold); color: var(--gold-dark); }
.filter-pill.active { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.filter-pill .count { opacity: .6; font-size: .75rem; margin-inline-start: 4px; }

/* === Result count === */
.results-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; font-size: .9rem; color: var(--muted);
}

/* === Empty state === */
.empty-state {
  text-align: center; padding: 80px 24px;
  color: var(--muted);
}
.empty-state .icon { font-size: 3rem; opacity: .4; margin-bottom: 16px; }

/* === Featured banner on landing === */
.featured-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.featured-cards .tpl-card .preview { aspect-ratio: 4/5; }

/* Mobile */
@media (max-width: 600px) {
  .template-toolbar { grid-template-columns: 1fr; }
  .fav-filter { width: 100%; }
  .tpl-preview-card { width: 82%; padding: 10px 8px; }
  .tpl-preview-card .names { font-size: 14px; }
  .filter-group .label { display: none; }
}

/* Note : un ancien override "minimal monochrome skin" forçait toutes les
 * vignettes en grayscale + #fff !important - il est supprimé pour que
 * chaque template retrouve sa palette distinctive (rose pour floral,
 * sauge pour boho, navy pour corporate, etc.). */
.tpl-card,
.template-search input,
.template-sort select,
.fav-filter,
.tpl-fav,
.filter-pill {
  border-radius: 8px;
}

/* Tier badge sur les vignettes : ⚡ Rapide / ✨ Personnalisable */
.tpl-tier-badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.tpl-tier-basic {
  background: rgba(255, 248, 232, .92);
  color: #8C5A1A;
  border: 1px solid rgba(140, 90, 26, .25);
}
.tpl-tier-premium {
  background: rgba(26, 43, 74, .88);
  color: #F5E8C8;
  border: 1px solid rgba(245, 232, 200, .3);
}
.tpl-tier-cinematic {
  background: linear-gradient(135deg, rgba(14,14,14,.92), rgba(26,43,74,.92));
  color: #D4AF37;
  border: 1px solid rgba(212, 175, 55, .4);
}
.tpl-tier-animated {
  background: linear-gradient(135deg, rgba(236, 72, 153, .92), rgba(217, 70, 239, .92));
  color: #FDF2F8;
  border: 1px solid rgba(253, 242, 248, .35);
}

/* Page Cinématique */
.tpl-section-cinematic {
  background:
    linear-gradient(180deg, #11100E 0, #19140F 620px, #F7F2EA 621px, #F7F2EA 100%) !important;
}
.tpl-head-cinematic {
  margin-bottom: 18px;
}
.tpl-head-cinematic h2,
.tpl-head-cinematic p {
  display: none;
}
.cinematic-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
  min-height: min(440px, calc(100vh - 180px));
  margin: 0 0 20px;
  padding: clamp(30px, 5vw, 62px) 0 clamp(24px, 4vw, 46px);
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
.cinematic-kicker {
  display: inline-flex;
  margin-bottom: 14px;
  color: #D8B86B;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cinematic-hero h1 {
  max-width: 680px;
  margin: 0;
  font-family: var(--serif-display, 'Playfair Display', serif);
  font-size: clamp(2.45rem, 5.4vw, 5.4rem);
  line-height: .9;
  color: #FFF8E8;
}
.cinematic-hero p {
  max-width: 580px;
  margin: 18px 0 0;
  color: rgba(255,248,232,.76);
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
  line-height: 1.55;
}
.cinematic-benefits,
.cinematic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}
.cinematic-benefits span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid rgba(216,184,107,.3);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,248,232,.88);
  font-size: .78rem;
  font-weight: 750;
}
.cinematic-actions {
  margin-top: 24px;
}
.cinematic-actions .btn {
  border-radius: 8px;
}
.cinematic-actions .btn-outline {
  border-color: rgba(255,248,232,.34);
  color: #FFF8E8;
}
.cinematic-hero-visual {
  position: relative;
  min-height: 310px;
  display: grid;
  place-items: center;
  min-width: 0;
}
.cinematic-stage {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 16 / 11;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 20%, rgba(212,175,55,.24), transparent 30%),
    linear-gradient(145deg, #191512, #4A3928 46%, #EEE4D4 47%, #FCF8F0 100%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .36);
  overflow: hidden;
}
.cinematic-envelope-back,
.cinematic-envelope-front {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 15%;
  height: 48%;
  border-radius: 4px;
}
.cinematic-envelope-back {
  background: linear-gradient(135deg, #F8F0E2, #D8BA82);
  clip-path: polygon(0 0, 100% 0, 50% 55%);
  transform: translateY(-50px) rotate(-2deg);
  opacity: .95;
}
.cinematic-envelope-front {
  background:
    linear-gradient(145deg, transparent 49%, rgba(82,54,25,.15) 50%, transparent 51%),
    linear-gradient(215deg, transparent 49%, rgba(82,54,25,.13) 50%, transparent 51%),
    linear-gradient(180deg, #FFF8EA, #E3C98F);
  box-shadow: 0 12px 20px rgba(0,0,0,.16);
}
.cinematic-card-demo {
  position: absolute;
  left: 50%;
  top: 11%;
  width: 42%;
  aspect-ratio: 5 / 7;
  transform: translateX(-50%) rotate(-1deg);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 22px 14px;
  border: 1px solid rgba(164,118,42,.36);
  background: #FFFDF8;
  color: #111111;
  text-align: center;
  box-shadow: 0 16px 24px rgba(0,0,0,.16);
}
.cinematic-card-demo span,
.cinematic-card-demo small {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A06F2B;
}
.cinematic-card-demo strong {
  font-family: var(--serif-display, 'Playfair Display', serif);
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  line-height: .95;
}
.cinematic-seal {
  position: absolute;
  left: 50%;
  bottom: 26%;
  z-index: 3;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 35% 30%, #FFF0B8, transparent 24%),
    radial-gradient(circle, #C99B2D 0 42%, #8B5A1D 43% 100%);
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}
/* Aperçu vidéo réel du hero cinématique (remplace la maquette CSS statique) */
.cinematic-stage--video {
  background: #0E0E0E;
}
.cinematic-stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.cinematic-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: #F7ECD2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(0,0,0,.06), rgba(0,0,0,.42) 80%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.18) 38%, rgba(0,0,0,.48));
}
.cinematic-card-overlay span,
.cinematic-card-overlay small {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .92;
}
.cinematic-card-overlay strong {
  font-family: var(--serif-display, 'Playfair Display', serif);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1;
  font-weight: 600;
}
.cinematic-phone-demo {
  position: absolute;
  right: -6px;
  bottom: -10px;
  width: 118px;
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  border: 7px solid #111111;
  border-radius: 24px;
  background: #FFFDF8;
  text-align: center;
  box-shadow: 0 18px 36px rgba(0,0,0,.32);
}
.cinematic-phone-demo span {
  color: #A06F2B;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.cinematic-phone-demo strong {
  font-size: .86rem;
  line-height: 1.15;
}
.cinematic-intro-strip {
  display: none;
}
.cinematic-intro-strip div {
  padding: 17px 18px;
  border: 1px solid #E8E1D7;
  border-radius: 8px;
  background: #FFFFFF;
}
.cinematic-intro-strip strong,
.cinematic-intro-strip span {
  display: block;
}
.cinematic-intro-strip strong {
  margin-bottom: 5px;
  color: #111111;
}
.cinematic-intro-strip span {
  color: #667085;
  line-height: 1.45;
}
.tpl-layout-cinematic {
  display: block;
}
.tpl-layout-cinematic .tpl-sidebar-cinematic,
.tpl-layout-cinematic .tpl-mobile-toolbar-cinematic {
  display: none;
}
.results-bar-cinematic {
  padding: 0 0 12px;
  margin: 0 0 18px;
  border: 0;
  border-bottom: 1px solid rgba(35,28,18,.12);
  background: transparent;
  color: #17130F;
  font-weight: 800;
}
.templates-grid-cinematic {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 22px;
}
.tpl-card-cinematic {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(44,35,25,.12);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 16px 34px rgba(35, 28, 18, .08);
}
.tpl-card-cinematic:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 42px rgba(35, 28, 18, .13);
}
.tpl-card-cinematic .preview-flatlay {
  border-radius: 0;
  aspect-ratio: 16 / 10;
  background: #100D0A;
}
.tpl-card-cinematic .fl-card {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.tpl-card-cinematic .fl-envelope,
.tpl-card-cinematic .fl-tampon {
  display: none !important;
}
.tpl-card-cinematic .fl-card-overlay {
  justify-content: flex-end;
  align-items: flex-start;
  padding: 22px;
  color: #FFF8E8;
  text-align: left;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.08) 42%, rgba(0,0,0,.72));
}
.tpl-card-cinematic .fl-card.has-image .fl-card-overlay,
.tpl-card-cinematic .fl-card.has-video .fl-card-overlay {
  color: #FFF8E8;
}
.tpl-card-cinematic .fl-eyebrow {
  color: #D8B86B !important;
  font-size: .6rem;
  letter-spacing: .18em;
  margin-bottom: 8px;
}
.tpl-card-cinematic .fl-line {
  width: 42px;
  margin: 4px 0;
  background: rgba(216,184,107,.75) !important;
  box-shadow: none !important;
}
.tpl-card-cinematic .fl-names {
  font-size: clamp(1.25rem, 3.2vw, 1.8rem);
  line-height: 1;
  max-width: 11ch;
}
.tpl-card-cinematic .fl-date {
  font-size: .62rem;
  color: rgba(255,248,232,.78);
}
.tpl-card-cinematic .body {
  z-index: 4;
  padding: 15px 16px 16px;
  background: #FFFFFF;
  text-align: left;
}
.tpl-card-cinematic h3 {
  font-size: 1.08rem;
  margin-bottom: 5px;
}
.tpl-card-cinematic .style-tag {
  color: #A06F2B;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tpl-card-cinematic .price {
  display: inline-flex;
  margin-top: 3px;
  color: #111111;
  font-size: .95rem;
}
.cinematic-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
.cinematic-card-pills span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #F8F3EA;
  color: #5F4A2B;
  font-size: .68rem;
  font-weight: 750;
}
.cinematic-card-actions {
  position: relative;
  z-index: 5;
  margin-top: 12px;
}
.cinematic-card-primary {
  display: inline-flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #111111;
  color: #FFFFFF;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 850;
}
.cinematic-card-primary:hover {
  background: #2B2117;
}
.cinematic-compare {
  margin: 34px 0 0;
  padding: 28px;
  border: 1px solid #E8E1D7;
  border-radius: 8px;
  background: #FBFAF7;
}
.cinematic-compare h2 {
  margin: 0 0 18px;
  font-family: var(--serif-display, 'Playfair Display', serif);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}
.cinematic-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.cinematic-compare-grid div {
  padding: 18px;
  border: 1px solid #E8E1D7;
  border-radius: 8px;
  background: #FFFFFF;
}
.cinematic-compare-grid div.is-featured {
  border-color: #C9A961;
  background: #111111;
  color: #FFFFFF;
}
.cinematic-compare-grid strong,
.cinematic-compare-grid span {
  display: block;
}
.cinematic-compare-grid strong {
  margin-bottom: 6px;
}
.cinematic-compare-grid span {
  color: inherit;
  opacity: .76;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .cinematic-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: 0;
  }
  .cinematic-hero-visual {
    min-height: 280px;
  }
  .cinematic-stage {
    width: min(560px, 100%);
  }
  .cinematic-intro-strip,
  .cinematic-compare-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .tpl-section-cinematic {
    padding-top: 12px !important;
    background:
      linear-gradient(180deg, #11100E 0, #19140F 560px, #F7F2EA 561px, #F7F2EA 100%) !important;
  }
  .cinematic-hero {
    margin-top: 0;
    padding: 18px 0 24px;
    gap: 18px;
  }
  .cinematic-kicker {
    margin-bottom: 9px;
    font-size: .66rem;
    letter-spacing: .13em;
  }
  .cinematic-hero h1 {
    max-width: 12ch;
    font-size: clamp(2rem, 10vw, 3.2rem);
    line-height: .98;
  }
  .cinematic-hero p {
    margin-top: 14px;
    font-size: .95rem;
    line-height: 1.5;
  }
  .cinematic-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
  }
  .cinematic-benefits span {
    min-height: 32px;
    justify-content: center;
    padding: 7px 9px;
    text-align: center;
    font-size: .75rem;
  }
  .cinematic-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 18px;
  }
  .cinematic-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .cinematic-hero-visual {
    min-height: 235px;
  }
  .cinematic-stage {
    width: min(100%, 390px);
    aspect-ratio: 16 / 10;
  }
  .cinematic-phone-demo {
    display: none;
  }
  .cinematic-card-overlay strong {
    font-size: clamp(1.45rem, 7vw, 2.1rem);
  }
  .results-bar-cinematic {
    margin-bottom: 12px;
    font-size: .9rem;
  }
  .templates-grid-cinematic {
    gap: 16px;
  }
  .tpl-card-cinematic .preview-flatlay {
    aspect-ratio: 16 / 10.8;
  }
  .tpl-card-cinematic .body {
    padding: 14px;
  }
}

@media (max-width: 560px) {
  .cinematic-hero {
    padding: 16px 0 22px;
  }
  .cinematic-hero h1 {
    font-size: clamp(2.05rem, 11vw, 3.05rem);
  }
  .cinematic-hero p {
    font-size: .92rem;
  }
  .cinematic-benefits {
    grid-template-columns: 1fr 1fr;
  }
  .cinematic-hero-visual {
    min-height: 208px;
  }
  .cinematic-stage {
    width: 100%;
    max-width: 360px;
  }
  .cinematic-card-demo {
    width: 48%;
  }
  .cinematic-seal {
    width: 58px;
    height: 58px;
  }
  .templates-grid-cinematic {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .tpl-card-cinematic .fl-card-overlay {
    padding: 18px;
  }
  .cinematic-compare {
    padding: 22px 18px;
  }
}

@media (max-width: 380px) {
  .cinematic-benefits {
    grid-template-columns: 1fr;
  }
  .cinematic-stage {
    max-width: 310px;
  }
}

/* ============================================================
   LAYOUT SIDEBAR + GRID (templates.php)
   Desktop : sidebar gauche sticky 260px + grid (page wider)
   Mobile  : sidebar = drawer qui slide depuis la gauche
   ============================================================ */
.tpl-container-wide { max-width: 1500px !important; }

/* Réduction du blanc en haut (titre plus compact) */
.tpl-section .tpl-head { margin-bottom: 14px; }
.tpl-section .tpl-head h2 { margin-bottom: 4px; font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.tpl-section .tpl-head p { font-size: .92rem; margin: 0; opacity: .75; }

.tpl-layout {
  display: grid;
  grid-template-columns: 282px 1fr;
  gap: 24px;
  align-items: flex-start;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .tpl-layout { grid-template-columns: 1fr; gap: 0; }
}

.tpl-sidebar-fav {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  padding: 7px 0;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 400;
  color: #444;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .15s;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0;
}
.tpl-sidebar-fav:hover { color: #111; }
.tpl-sidebar-fav .fav-icon { flex-shrink: 0; font-size: 1rem; line-height: 1; }
.tpl-sidebar-fav .fav-label { flex: 1; }
.tpl-sidebar-fav .fav-count {
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #DC2626;
  color: #fff;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
  align-items: center;
  justify-content: center;
}
.tpl-sidebar-fav .fav-count[hidden] { display: none; }
.tpl-sidebar-fav[aria-pressed="true"] {
  color: #111;
  font-weight: 600;
  background: none !important;
  border-color: #E8E8E8 !important;
  box-shadow: none !important;
}

/* ===== SIDEBAR e-commerce style (Woodmart-inspired) ===== */
.tpl-sidebar {
  position: sticky;
  top: 90px;
  width: 220px;
  flex-shrink: 0;
  height: calc(100vh - 110px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 24px 24px 0;
  box-sizing: border-box;
  font-size: .9rem;
  scrollbar-width: none;
}
.tpl-sidebar::-webkit-scrollbar { display: none; }

.tpl-sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 0;
  border-bottom: none;
}
.tpl-sidebar-head h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: #111;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans, Inter, system-ui, sans-serif);
}
.tpl-sidebar-head h3::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none'%3E%3Cline x1='0' y1='2' x2='16' y2='2' stroke='%23111' stroke-width='1.5'/%3E%3Cline x1='0' y1='6' x2='16' y2='6' stroke='%23111' stroke-width='1.5'/%3E%3Cline x1='0' y1='10' x2='16' y2='10' stroke='%23111' stroke-width='1.5'/%3E%3Ccircle cx='4' cy='2' r='2' fill='%23fff' stroke='%23111' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='6' r='2' fill='%23fff' stroke='%23111' stroke-width='1.5'/%3E%3Ccircle cx='6' cy='10' r='2' fill='%23fff' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center;
}
.tpl-sidebar-head span { display: none; }

.tpl-sidebar-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: #555;
  padding: 0;
  line-height: 1;
  width: 28px; height: 28px;
  display: none;
  align-items: center; justify-content: center;
}
.tpl-sidebar-close:hover { color: #111; }

/* Chips filtres actifs */
.tpl-filter-summary {
  margin: 0 0 20px;
  padding: 0;
  border: none;
  background: none;
}
.tpl-filter-summary p { display: none; }
.tpl-active-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  border: none;
  text-decoration: none;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.tpl-active-chip b {
  font-size: .8rem;
  line-height: 1;
  opacity: .7;
}
.tpl-active-chip:hover { background: #333; color: #fff; }

.tpl-reset-link {
  display: inline-block;
  margin-top: 8px;
  font-size: .75rem;
  color: #888;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .04em;
}
.tpl-reset-link:hover { color: #111; text-decoration: underline; }

/* Groupes de filtres — style Paperless Post : accordion minimal */
.tpl-filter-group {
  border: none;
  border-radius: 0;
  background: none;
  overflow: visible;
  border-bottom: 1px solid #E8E8E8;
}
.tpl-filter-group:first-of-type { border-top: 1px solid #E8E8E8; }

/* summary = title cliquable avec chevron */
.tpl-filter-group-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  font-size: .9rem;
  font-weight: 600;
  color: #111;
  cursor: pointer;
  user-select: none;
  list-style: none;
  gap: 8px;
}
.tpl-filter-group-title::-webkit-details-marker { display: none; }
.tpl-filter-group-title::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #555;
  border-bottom: 1.5px solid #555;
  transform: rotate(45deg) translateY(-3px);
  flex-shrink: 0;
  transition: transform .2s;
}
details.tpl-filter-group[open] .tpl-filter-group-title::after {
  transform: rotate(-135deg) translateY(-3px);
}

.tpl-filter-group ul {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tpl-filter-group li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  color: #444;
  text-decoration: none;
  font-size: .875rem;
  line-height: 1.4;
  transition: color .15s;
}
.tpl-filter-group li a:hover { color: #111; }
.tpl-filter-group li a.active {
  color: #111;
  font-weight: 600;
}
.tpl-filter-group li a .count {
  font-size: .78rem;
  color: #999;
  background: none;
  padding: 0;
  border-radius: 0;
  flex: 0 0 auto;
}
.tpl-filter-group li a.active .count { color: #666; }

/* Toolbar e-commerce : count gauche + search+sort droite */
.tpl-top-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #E8E8E8;
  flex-wrap: wrap;
}
.tpl-top-toolbar .tpl-result-count {
  font-size: .82rem;
  color: #888;
  white-space: nowrap;
}
.tpl-top-toolbar .tpl-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
/* Label "Trier :" devant le select */
.tpl-top-toolbar .tt-sort-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tpl-top-toolbar .tt-sort-label {
  font-size: .78rem;
  color: #888;
  white-space: nowrap;
}
.tpl-top-toolbar .tt-search {
  height: 34px;
  padding: 0 10px 0 30px;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  font-size: .83rem;
  color: #111;
  width: 160px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 9px center;
  outline: none;
  transition: border-color .15s;
}
.tpl-top-toolbar .tt-search:focus { border-color: #111; }
.tpl-top-toolbar .tt-select {
  height: 34px;
  padding: 0 26px 0 9px;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  font-size: .83rem;
  color: #111;
  background: #fff;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  transition: border-color .15s;
}
.tpl-top-toolbar .tt-select:focus { border-color: #111; }

@media (max-width: 900px) {
  .tpl-top-toolbar .tt-search { width: 120px; }
}
@media (max-width: 600px) {
  .tpl-top-toolbar .tt-search { display: none; }
  .tpl-top-toolbar .tt-sort-label { display: none; }
}

.tpl-filter-btn {
  display: none;
  padding: 10px 14px; border-radius: 8px;
  background: var(--navy); color: var(--cream);
  border: 0; cursor: pointer; font-weight: 750; font-size: .88rem;
  white-space: nowrap;
  position: relative;
}
.tpl-filter-btn:hover { background: var(--navy-light); }
.tpl-filter-btn .tpl-active-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  display: inline-block; margin-left: 6px;
  box-shadow: 0 0 0 2px var(--navy);
}

.tpl-sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 998;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
  display: none;
}
body.tpl-sidebar-open { overflow: hidden; }

@media (max-width: 900px) {
  .tpl-filter-btn { display: inline-flex; align-items: center; }
  .tpl-sidebar-close { display: flex; }
  .tpl-sidebar {
    position: fixed;
    top: 8px; left: 8px; bottom: 8px;
    width: min(320px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    height: auto;
    padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
    border-radius: 18px;
    border: 1px solid #E8E8E8;
    background: #fff;
    z-index: 999;
    transform: translateX(calc(-100% - 24px));
    transition: transform .25s ease;
    box-shadow: 8px 0 30px rgba(26,43,74,.16);
    overflow-y: auto;
  }
  .tpl-sidebar.is-open { transform: translateX(0); }
  .tpl-sidebar-backdrop { display: block; }
  .tpl-sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; }
}

@media (max-width: 600px) {
  .tpl-sidebar {
    left: max(8px, env(safe-area-inset-left));
    width: min(380px, calc(100vw - max(16px, env(safe-area-inset-left)) - 8px));
    max-width: calc(100vw - max(16px, env(safe-area-inset-left)) - 8px);
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Toolbar : ajuster l'ordre pour que le bouton Filtres reste à gauche */
.template-toolbar { margin-bottom: 14px; }
.template-toolbar .tpl-filter-btn { order: -1; }

/* ============================================================
   VIGNETTE FLAT-LAY - Carte + Enveloppe + Tampon (style référence)
   Tout homogène : lit les uploads admin OU CSS fallback élégant.
   ============================================================ */
/* === Composition Paperless Post : carte centrée + enveloppe GRANDE derrière === */
.preview-flatlay {
  position: relative;
  aspect-ratio: 1/1;
  background: #F1ECE3; /* cream / off-white neutre comme Paperless Post */
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-flatlay::before { display: none !important; }

/* Carte centrée (format vertical) - image en background + sample text overlay TOUJOURS */
.fl-card {
  position: relative;
  width: 48%; aspect-ratio: 5/7;
  background: var(--c-bg, #FAF7F2);
  background-size: cover;
  background-position: center;
  border-radius: 1px;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.08);
  border: 1px solid color-mix(in srgb, var(--c-fg, #1A2B4A) 6%, transparent);
  overflow: hidden;
  z-index: 2;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.fl-card-overlay {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 14% 12%;
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--c-fg, #1A2B4A);
  position: relative;
  z-index: 2;
}
/* Vidéo de fond (templates animés) : remplit la card, joue en boucle muette */
.fl-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.fl-card.has-video .fl-card-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.5) 100%);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.fl-card.has-video .fl-line { background: rgba(255,255,255,.7); }
.fl-card.has-video .fl-eyebrow,
.fl-card.has-video .fl-amp { color: #fff; }
/* Quand image uploadée : ombre subtile sur le texte pour lisibilité,
   et voile blanc léger derrière pour matcher tout fond (clair OU foncé) */
.fl-card.has-image .fl-card-overlay {
  color: #1A2B4A;
  text-shadow: 0 1px 2px rgba(255,255,255,.85), 0 0 8px rgba(255,255,255,.4);
}
.fl-card.has-image .fl-line {
  background: rgba(26,43,74,.65);
  box-shadow: 0 0 4px rgba(255,255,255,.6);
}
.fl-card.has-image .fl-eyebrow,
.fl-card.has-image .fl-amp {
  color: #1A2B4A;
  text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.5);
}

/* Direction artistique par univers : chaque catégorie doit se lire avant même le titre. */
.tpl-card-type-wedding .preview-flatlay,
.tpl-card-type-engagement .preview-flatlay,
.tpl-card-type-anniversary .preview-flatlay {
  background:
    radial-gradient(circle at 16% 20%, rgba(255,255,255,.9) 0 7%, transparent 8%),
    radial-gradient(circle at 86% 75%, rgba(210,183,128,.24) 0 12%, transparent 13%),
    linear-gradient(135deg, #FBF7EF 0%, #EFE4D3 100%);
}
.tpl-card-type-wedding .fl-card,
.tpl-card-type-engagement .fl-card,
.tpl-card-type-anniversary .fl-card {
  width: 50%;
  border-color: rgba(185,143,70,.18);
}
.tpl-card-type-wedding .fl-card-overlay,
.tpl-card-type-engagement .fl-card-overlay,
.tpl-card-type-anniversary .fl-card-overlay {
  font-family: 'Playfair Display', Georgia, serif;
}

.tpl-card-type-henna .preview-flatlay,
.tpl-card-type-oriental .preview-flatlay,
.tpl-card-type-thour .preview-flatlay {
  background:
    radial-gradient(circle at 0 0, transparent 0 18px, rgba(120,61,35,.12) 19px 20px, transparent 21px) 0 0/46px 46px,
    linear-gradient(135deg, #FFF7EA 0%, #E8C7A0 52%, #7B3227 100%);
}
.tpl-card-type-henna .fl-card,
.tpl-card-type-oriental .fl-card,
.tpl-card-type-thour .fl-card {
  width: 49%;
  background-color: #FFF6E8;
  border-color: rgba(127,48,39,.2);
}
.tpl-card-type-henna .fl-eyebrow,
.tpl-card-type-oriental .fl-eyebrow,
.tpl-card-type-thour .fl-eyebrow,
.tpl-card-type-henna .fl-amp,
.tpl-card-type-oriental .fl-amp,
.tpl-card-type-thour .fl-amp {
  color: #9B4D28;
}

.tpl-card-type-baby_shower .preview-flatlay {
  background:
    radial-gradient(ellipse at 24% 26%, rgba(255,255,255,.88) 0 12%, transparent 13%),
    radial-gradient(ellipse at 76% 62%, rgba(255,255,255,.78) 0 15%, transparent 16%),
    linear-gradient(135deg, #FDECF4 0%, #EAF7FF 100%);
}
.tpl-card-type-baby_shower .fl-card {
  width: 47%;
  border-radius: 8px;
  background-color: #FFFDFB;
}
.tpl-card-type-baby_shower .fl-card-overlay {
  font-family: 'Inter', sans-serif;
}
.tpl-card-type-baby_shower .fl-names {
  font-style: normal;
  font-weight: 750;
}

.tpl-card-type-birthday_girl .preview-flatlay,
.tpl-card-type-evjf .preview-flatlay {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,185,215,.55) 0 7%, transparent 8%),
    radial-gradient(circle at 78% 72%, rgba(196,156,236,.42) 0 8%, transparent 9%),
    linear-gradient(135deg, #FFF0F7 0%, #F1E6FF 100%);
}
.tpl-card-type-birthday_boy .preview-flatlay {
  background:
    radial-gradient(circle at 80% 18%, rgba(255,213,120,.72) 0 5%, transparent 6%),
    radial-gradient(circle at 22% 68%, rgba(144,203,255,.6) 0 7%, transparent 8%),
    linear-gradient(135deg, #E7F1FF 0%, #1A3D73 100%);
}
.tpl-card-type-birthday_girl .fl-card,
.tpl-card-type-birthday_boy .fl-card,
.tpl-card-type-evjf .fl-card {
  width: 46%;
  border-radius: 10px;
  transform: rotate(-2deg);
}
.tpl-card-type-birthday_girl .fl-card-overlay,
.tpl-card-type-birthday_boy .fl-card-overlay,
.tpl-card-type-evjf .fl-card-overlay {
  font-family: 'Inter', sans-serif;
}
.tpl-card-type-birthday_girl .fl-names,
.tpl-card-type-birthday_boy .fl-names,
.tpl-card-type-evjf .fl-names {
  font-style: normal;
  font-weight: 850;
}
.tpl-card-type-birthday_boy .fl-card:not(.has-image) {
  background: #F7FBFF;
}

.tpl-card-type-corporate .preview-flatlay,
.tpl-card-type-graduation .preview-flatlay {
  background:
    linear-gradient(90deg, rgba(20,32,54,.06) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(180deg, #FFFFFF 0%, #EEF1F5 100%);
}
.tpl-card-type-corporate .fl-card,
.tpl-card-type-graduation .fl-card {
  width: 56%;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  background: #FFFFFF;
  box-shadow: 0 12px 26px rgba(19, 28, 45, .12);
}
.tpl-card-type-corporate .fl-card-overlay,
.tpl-card-type-graduation .fl-card-overlay {
  align-items: flex-start;
  text-align: left;
  font-family: 'Inter', sans-serif;
  padding: 15%;
}
.tpl-card-type-corporate .fl-line,
.tpl-card-type-graduation .fl-line {
  margin-left: 0;
  margin-right: 0;
  background: #111827;
}
.tpl-card-type-corporate .fl-names,
.tpl-card-type-graduation .fl-names {
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.tpl-card-type-dinner_party .preview-flatlay {
  background:
    radial-gradient(circle at 78% 22%, rgba(212,175,55,.25) 0 11%, transparent 12%),
    linear-gradient(135deg, #111111 0%, #302A25 100%);
}
.tpl-card-type-dinner_party .fl-card:not(.has-image) {
  background: #FFF9EC;
}

.tpl-card-type-lifestyle .preview-flatlay,
.tpl-card[data-type^="flyer_"] .preview-flatlay {
  background:
    linear-gradient(90deg, rgba(17,17,17,.045) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(180deg, #F8F7F4 0%, #EEEAE3 100%);
}
.tpl-card[data-type^="flyer_"] .fl-card {
  width: 70%;
  aspect-ratio: 4 / 5.15;
  border-radius: 10px;
  transform: rotate(0deg);
  background: #FFFFFF;
  box-shadow: 0 18px 42px rgba(24, 24, 24, .14);
}
.tpl-card[data-type^="flyer_"] .fl-card-overlay {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 14%;
  color: #111111;
  font-family: 'Inter', sans-serif;
  text-shadow: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02));
}
.tpl-card[data-type^="flyer_"] .fl-eyebrow,
.tpl-card[data-type^="flyer_"] .fl-date,
.tpl-card[data-type^="flyer_"] .fl-amp {
  color: #111111;
}
.tpl-card[data-type^="flyer_"] .fl-line {
  margin-left: auto;
  margin-right: auto;
  width: 38px;
  background: #111111;
}
.tpl-card[data-type^="flyer_"] .fl-names {
  font-style: normal;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}
/* Les VRAIS flyers n'ont pas d'enveloppe — MAIS flyer_greetings (carte de vœux) si :
   on l'exclut donc du masquage (sinon cette règle, plus spécifique, gagnait sur
   la règle d'affichage flyer_greetings → enveloppe invisible). */
.tpl-card[data-type^="flyer_"]:not([data-type="flyer_greetings"]) .fl-envelope,
.tpl-card[data-type^="flyer_"]:not([data-type="flyer_greetings"]) .fl-tampon {
  display: none;
}
.tpl-card-type-flyer_greetings .preview-flatlay {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.72) 0 9%, transparent 10%),
    linear-gradient(135deg, #FAF8F3 0%, #EFE8DE 100%);
}
/* Même composition que les autres vignettes : carte portrait ~48% AU-DESSUS,
   enveloppe paysage 82% centrée DERRIÈRE (elle dépasse tout autour de la carte). */
.tpl-card-type-flyer_greetings .fl-card {
  width: 48%;
  border-radius: 2px;
  background: #FFFFFF;
}
.tpl-card-type-flyer_greetings .fl-envelope,
.tpl-card-type-flyer_greetings .fl-tampon {
  display: block;
}
.tpl-card-type-flyer_greetings .fl-envelope {
  width: 82%;
  top: 50%;
}
.tpl-card-type-flyer_greetings .fl-tampon {
  top: 65%;
  width: 16%;
}
.tpl-card-type-flyer_greetings .fl-card.has-image {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #FFFFFF;
}
.tpl-card-type-flyer_greetings .fl-card-overlay {
  padding: 16%;
}
.tpl-card-type-flyer_greetings .fl-card.has-image .fl-card-overlay {
  display: none;
}
.tpl-card-type-flyer_greetings .fl-eyebrow {
  color: #8A7A64;
  letter-spacing: .18em;
}
.tpl-card-type-flyer_greetings .fl-names,
.tpl-card-type-flyer_greetings .fl-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.32rem);
  font-weight: 780;
  line-height: 1.12;
  color: #111111;
}
.tpl-card-type-flyer_greetings .fl-date {
  color: #766B5B;
}

/* Tier Standard : rendu volontairement simple mais soigné, différent du premium. */
.tpl-section-basic {
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F7F5F1 100%) !important;
}
.tpl-section-basic .tpl-head {
  max-width: 760px;
}
.tpl-section-basic .tpl-head h2 {
  color: #111111;
}
.tpl-section-basic .tpl-head p {
  max-width: 620px;
  color: #625A4C;
}
.tpl-card-tier-basic {
  overflow: hidden;
  border: 1px solid #E7E2DA;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 8px 22px rgba(30, 30, 30, .045);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tpl-card-tier-basic:hover {
  transform: translateY(-3px);
  border-color: #D8D2C8;
  box-shadow: 0 14px 32px rgba(30, 30, 30, .08);
}
.tpl-card-tier-basic .tpl-tier-badge {
  top: 10px;
  left: 10px;
  padding: 5px 9px;
  background: rgba(255,255,255,.9);
  color: #2B241A;
  border: 1px solid rgba(43,36,26,.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.tpl-card-tier-basic .preview-flatlay {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(17,17,17,.04) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(180deg, #FAF9F6 0%, #F0ECE5 100%);
}
.tpl-card-tier-basic .fl-card {
  width: 66%;
  aspect-ratio: 4 / 5.25;
  border-radius: 8px;
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 14px 32px rgba(28, 24, 20, .11);
  transform: none;
}
.tpl-card-tier-basic:hover .fl-card {
  transform: translateY(-3px);
}
.tpl-card-tier-basic:not([data-type="flyer_greetings"]) .fl-envelope,
.tpl-card-tier-basic:not([data-type="flyer_greetings"]) .fl-tampon {
  display: none !important;
}
/* flyer_greetings (carte de vœux) garde son enveloppe quel que soit le tier. */
.tpl-card-type-flyer_greetings .fl-envelope {
  display: block !important;
}
.tpl-card-tier-basic .fl-card-overlay {
  padding: 17% 14%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.02));
}
.tpl-card-tier-basic .fl-eyebrow {
  font-size: .58rem;
  letter-spacing: .2em;
  margin-bottom: 10px;
}
.tpl-card-tier-basic .fl-line {
  width: 34px;
  margin: 7px auto;
}
.tpl-card-tier-basic .fl-names {
  font-size: clamp(1rem, 2.25vw, 1.28rem);
  line-height: 1.08;
}
.tpl-card-tier-basic .fl-title {
  white-space: normal;
  font-size: clamp(.9rem, 2vw, 1.18rem);
  line-height: 1.12;
}
.tpl-card-tier-basic .fl-date {
  font-size: .58rem;
  letter-spacing: .13em;
}
.tpl-card-tier-basic .tpl-swatches {
  padding-top: 11px;
}
.tpl-card-tier-basic .body {
  padding: 13px 14px 15px;
  text-align: left;
}
.tpl-card-tier-basic h3 {
  font-family: 'Inter', sans-serif;
  font-size: .98rem;
  font-weight: 800;
  color: #17130F;
}
.tpl-card-tier-basic .style-tag {
  display: inline-flex;
  margin: 2px 0 5px;
  color: #7A6D5C;
  font-size: .72rem;
  letter-spacing: 0;
  text-transform: none;
}
.tpl-card-tier-basic .price {
  color: #111111;
  font-size: .92rem;
}
.tpl-card-tier-basic.tpl-card-type-birthday_girl .preview-flatlay {
  background:
    linear-gradient(180deg, #FFF8FB 0%, #F4EEF2 100%);
}
.tpl-card-tier-basic.tpl-card-type-birthday_girl .fl-card:not(.has-image) {
  background: #FFF8FC;
}
.tpl-card-tier-basic.tpl-card-type-birthday_girl .fl-eyebrow,
.tpl-card-tier-basic.tpl-card-type-birthday_girl .fl-amp {
  color: #B83E73;
}
.tpl-card-tier-basic.tpl-card-type-baby_shower .preview-flatlay {
  background:
    linear-gradient(180deg, #F8FCFF 0%, #EEF5FA 100%);
}
.tpl-card-tier-basic.tpl-card-type-baby_shower .fl-card:not(.has-image) {
  background: #F7FCFF;
}
.tpl-card-tier-basic.tpl-card-type-baby_shower .fl-eyebrow,
.tpl-card-tier-basic.tpl-card-type-baby_shower .fl-amp {
  color: #3576A8;
}
.tpl-card-tier-basic.tpl-card-type-corporate .preview-flatlay {
  background:
    linear-gradient(90deg, rgba(15,23,42,.08) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(180deg, #F8FAFC 0%, #E8EDF5 100%);
}
.tpl-card-tier-basic.tpl-card-type-corporate .fl-card {
  width: 72%;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
}
.tpl-card-tier-basic.tpl-card-type-corporate .fl-card:not(.has-image) {
  background: #FFFFFF;
}
.tpl-card-tier-basic.tpl-card-type-corporate .fl-card-overlay {
  align-items: flex-start;
  text-align: left;
  padding: 18%;
}
.tpl-card-tier-basic.tpl-card-type-corporate .fl-line {
  margin-left: 0;
  margin-right: 0;
  background: #1E3A5F;
}
.tpl-card-tier-basic.tpl-card-type-corporate .fl-eyebrow,
.tpl-card-tier-basic.tpl-card-type-corporate .fl-amp {
  color: #1E3A5F;
}

.fl-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: .55rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--c-accent, #C9A961); font-weight: 600;
  margin-bottom: 8px;
}
.fl-line {
  width: 26px; height: 1px;
  background: var(--c-accent, #C9A961);
  margin: 6px auto;
  opacity: .55;
}
.fl-names {
  font-size: clamp(.75rem, 1.9vw, .98rem);
  line-height: 1.18;
  font-style: italic;
}
/* Variante : titre unique (corporate, graduation, dîner, thour, etc.) - taille ajustée.
   Passe sur 2 lignes plutôt que de tronquer au milieu d'un mot (ex: "Alice In Wonde…"). */
.fl-title {
  font-size: clamp(.7rem, 1.7vw, .9rem);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  max-width: 100%;
  padding: 0 4px;
}
.tpl-card-type-flyer_greetings .fl-title {
  font-size: clamp(.78rem, 1.65vw, 1rem);
  line-height: 1.1;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.fl-amp { color: var(--c-accent, #C9A961); margin: 3px 0; font-style: normal; font-size: .8em; }
.fl-date {
  font-family: 'Inter', sans-serif;
  font-size: .55rem; letter-spacing: .12em;
  opacity: .7; margin-top: 6px;
}

/* Enveloppe GRANDE, derrière la carte, centrée - bords visibles tout autour
 * Format paysage 7:5 (proportion réelle d'enveloppe) */
.fl-envelope {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
  aspect-ratio: 7/5;
  z-index: 1;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.18));
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.fl-env-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 3px;
}
/* Fallback CSS si pas d'image enveloppe - back + V-flap visible */
.fl-env-back {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-env, #C9A961) 95%, #fff) 0%, var(--c-env, #C9A961) 100%);
  border-radius: 3px;
}
.fl-env-liner {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(180deg, var(--c-env-flap, color-mix(in srgb, var(--c-env, #C9A961) 80%, #000)) 0%, color-mix(in srgb, var(--c-env, #C9A961) 70%, #000) 100%);
  clip-path: polygon(0 0, 100% 0, 50% 50%);
}

/* Tampon : posé sous le centre de l'enveloppe (au-dessus de la carte) */
.fl-tampon {
  position: absolute;
  left: 50%; top: 65%;
  transform: translate(-50%, -50%);
  width: 16%; aspect-ratio: 1;
  z-index: 4;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.22));
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  pointer-events: none; /* décoratif : laisse passer le tap vers le lien de la carte */
}
.fl-tampon img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Hover : la carte se soulève légèrement, le tampon pulse */
.tpl-card:hover .fl-card     { transform: translateY(-4px) scale(1.01); }
.tpl-card:hover .fl-envelope { transform: translate(-50%, -50%) scale(1.02); }
.tpl-card:hover .fl-tampon   { transform: translate(-50%, -50%) scale(1.08); }

/* Dashboard : aperçu compact, stable, sans enveloppe qui recouvre la carte */
.dash-flatlay {
  background: #F4F0E8 !important;
  display: block;
}
.dash-flatlay .dash-fl-card {
  position: absolute;
  left: 9%;
  top: 15%;
  width: 48%;
  max-width: 150px;
  aspect-ratio: 5/7;
  transform: rotate(-1deg);
  z-index: 3;
  border-radius: 3px;
}
.dash-flatlay .dash-fl-card .fl-card-overlay {
  padding: 13% 10%;
  justify-content: center;
  background: rgba(255,255,255,.18);
}
.dash-flatlay .fl-eyebrow {
  font-size: .46rem;
  letter-spacing: .18em;
  margin-bottom: 5px;
}
.dash-flatlay .fl-line {
  width: 20px;
  margin: 4px auto;
}
.dash-flatlay .fl-names {
  width: 100%;
  font-size: clamp(.72rem, 1.15vw, .92rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: normal;
}
.dash-flatlay .fl-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.dash-flatlay .fl-date {
  font-size: .46rem;
  letter-spacing: .08em;
}
.dash-flatlay .dash-fl-envelope {
  left: 68%;
  top: 28%;
  width: 54%;
  max-width: 178px;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotate(2deg);
  z-index: 2;
  filter: drop-shadow(0 10px 14px rgba(26,43,74,.16));
}
.dash-flatlay .dash-fl-envelope .fl-env-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}
.dash-flatlay .dash-fl-tampon {
  left: 50%;
  top: 122%;
  width: 38%;
  max-width: 78px;
  transform: translate(-50%, -50%);
  z-index: 4;
  filter: drop-shadow(0 8px 12px rgba(26,43,74,.18));
}
.tpl-card:hover .dash-flatlay .dash-fl-card {
  transform: rotate(-1deg) translateY(-3px);
}
.tpl-card:hover .dash-flatlay .dash-fl-envelope {
  transform: translate(-50%, -50%) rotate(2deg);
}
.tpl-card:hover .dash-flatlay .dash-fl-tampon {
  transform: translate(-50%, -50%);
}

/* Dashboard client */
.client-dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin: 10px 0 22px;
}
.client-dash-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A06F2B;
}
.client-dash-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
}
.client-dash-head p {
  margin: 8px 0 0;
  color: #6B7280;
}
.client-dash-create {
  flex: 0 0 auto;
  border-radius: 8px;
}
.client-dash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 28px;
}
.client-dash-stat {
  min-height: 112px;
  padding: 18px;
  border: 1px solid #E8E1D7;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(25, 20, 14, .05);
}
.client-dash-stat span,
.client-dash-stat small {
  display: block;
  color: #6B7280;
}
.client-dash-stat span {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.client-dash-stat strong {
  display: block;
  margin: 9px 0 4px;
  font-family: var(--serif-display, serif);
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.05;
  color: #161616;
}
.client-dash-stat small {
  font-size: .86rem;
  line-height: 1.35;
}
.client-dash-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 4px 0 16px;
}
.client-dash-section-head h3 {
  margin: 0;
  font-size: 1.35rem;
}
.client-dash-section-head p {
  margin: 5px 0 0;
  color: #6B7280;
}
.client-empty-state {
  max-width: 860px;
  margin: 22px auto 0;
  padding: 42px 28px;
  border: 1px solid #E8E1D7;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(250,247,242,.92)),
    #FFFFFF;
  text-align: center;
  box-shadow: 0 18px 38px rgba(25, 20, 14, .07);
}
.client-empty-state h3 {
  margin: 0;
  font-family: var(--serif-display, serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.05;
  color: #111111;
}
.client-empty-state > p {
  max-width: 540px;
  margin: 12px auto 28px;
  color: #6B7280;
  line-height: 1.6;
}
.client-empty-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 auto 28px;
}
.client-empty-steps div {
  padding: 18px;
  border: 1px solid #E8E1D7;
  border-radius: 8px;
  background: #FFFFFF;
  text-align: start;
}
.client-empty-steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #111111;
  color: #FFFFFF;
  font-size: .78rem;
  font-weight: 800;
}
.client-empty-steps strong,
.client-empty-steps small {
  display: block;
}
.client-empty-steps strong {
  margin-bottom: 6px;
  color: #111111;
}
.client-empty-steps small {
  color: #6B7280;
  line-height: 1.45;
}
.client-empty-action {
  min-width: 220px;
  justify-content: center;
  border-radius: 8px;
}
.client-dash-grid {
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 22px;
  align-items: stretch;
}
.client-inv-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(25, 20, 14, .07);
}
.client-inv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(25, 20, 14, .1);
}
.client-inv-card .dash-flatlay {
  aspect-ratio: 16 / 10;
  min-height: 210px;
  border-radius: 0;
  overflow: hidden;
}
.client-inv-card .dash-flatlay .dash-fl-card {
  left: 8%;
  top: 13%;
  width: 46%;
  max-width: 162px;
}
.client-inv-card .dash-flatlay .dash-fl-envelope {
  left: 70%;
  top: 31%;
  width: 52%;
  max-width: 190px;
}
.client-inv-card .dash-flatlay .dash-fl-tampon {
  top: 121%;
  width: 36%;
  max-width: 82px;
}
.client-preview-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: calc(100% - 24px);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 247, 237, .96);
  color: #B45309;
  font-size: .74rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(120, 53, 15, .12);
}
.client-inv-body {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #FFFFFF;
}
.client-card-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.client-status-pill,
.client-rsvp-mini {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 750;
  white-space: nowrap;
}
.client-status-pill {
  gap: 7px;
  padding: 4px 10px;
  background: #F6F2EC;
  color: #3F3A32;
}
.client-status-pill > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.client-status-pill.is-active {
  background: #ECFDF3;
  color: #166534;
}
.client-status-pill.is-pending {
  background: #FFFBEB;
  color: #92400E;
}
.client-status-pill.is-draft {
  background: #F3F4F6;
  color: #4B5563;
}
.client-rsvp-mini {
  padding: 4px 9px;
  background: #F8FAFC;
  color: #475569;
}
.client-inv-title {
  margin: 0;
  font-family: var(--serif-display, serif);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.08;
  color: #121212;
  overflow-wrap: anywhere;
}
.client-inv-meta {
  display: grid;
  gap: 3px;
  min-height: 36px;
  color: #5F6673;
  font-size: .9rem;
  line-height: 1.35;
}
.client-inv-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-rsvp-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #ECE7DD;
}
.client-rsvp-bar span {
  display: block;
  height: 100%;
  min-width: 7px;
  border-radius: inherit;
  background: linear-gradient(90deg, #C9A961, #8A6428);
}
.client-card-todos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 28px;
}
.client-card-todos span {
  padding: 5px 8px;
  border: 1px solid #E8E1D7;
  border-radius: 999px;
  background: #FBFAF7;
  color: #6B5D48;
  font-size: .74rem;
  font-weight: 700;
}
.client-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}
.client-card-primary,
.client-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.client-card-primary {
  grid-column: 1 / -1;
  border: 1px solid #111111;
  background: #111111;
  color: #FFFFFF;
}
.client-card-primary.is-share {
  border-color: #126C43;
  background: #126C43;
}
.client-card-icon {
  border: 1px solid #D9D3C8;
  background: #FFFFFF;
  color: #202020;
}
.client-card-icon:hover,
.client-card-primary:hover {
  filter: brightness(.98);
  transform: translateY(-1px);
}
.client-card-delete-form {
  margin: 0;
}
.client-card-delete-form .client-card-icon {
  width: 100%;
}
.client-card-icon.is-danger {
  border-color: #FCA5A5;
  background: #FFF1F2;
  color: #B91C1C;
}

@media (max-width: 900px) {
  .client-dash-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .client-dash-create {
    width: 100%;
    justify-content: center;
  }
  .client-dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .client-empty-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .client-dash-stats,
  .client-dash-grid {
    grid-template-columns: 1fr;
  }
  .client-dash-stat {
    min-height: auto;
  }
  .client-inv-card .dash-flatlay {
    min-height: 196px;
  }
  .client-card-actions {
    grid-template-columns: 1fr;
  }
  .client-card-primary {
    grid-column: auto;
  }
}

/* Pastilles de couleurs (style Paperless Post) */
.tpl-swatches {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 12px 14px 0;
  background: #fff;
}
.tpl-swatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.10);
  background-size: cover;
  background-position: center;
  display: inline-block;
  flex: 0 0 auto;
}

/* Variantes d'enveloppe cliquables : doivent passer AU-DESSUS du lien plein-carte
 * (.tpl-card-link, z-index 3) pour recevoir clic + survol. */
.tpl-swatches.is-interactive {
  position: relative;
  z-index: 4;
  pointer-events: none;               /* l'espace vide laisse passer le clic vers le lien carte */
}
.tpl-swatches.is-interactive { gap: 8px; }
.tpl-swatches.is-interactive .tpl-swatch {
  width: 22px; height: 22px;          /* cible tactile confortable */
  -webkit-appearance: none; appearance: none;
  padding: 0; margin: 0;
  cursor: pointer;
  pointer-events: auto;               /* seules les pastilles captent clic + survol */
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tpl-swatches.is-interactive .tpl-swatch:hover {
  transform: translateY(-1px) scale(1.1);
  box-shadow: 0 3px 8px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.12);
}
.tpl-swatches.is-interactive .tpl-swatch.is-active {
  border-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 2px var(--gold, #C9A961);
}
.tpl-swatches.is-interactive .tpl-swatch:focus-visible {
  outline: 2px solid var(--gold, #C9A961);
  outline-offset: 2px;
}
/* 2ᵉ rangée : variantes de CARTE. Pastilles en carré arrondi pour les
 * distinguer des enveloppes (rondes). Rangée resserrée sous la 1ʳᵉ. */
.tpl-swatches-card { padding-top: 7px; }
.tpl-swatches.is-interactive .tpl-swatch-card { border-radius: 6px; }

@media (max-width: 480px) {
  /* L'enveloppe doit rester PLUS LARGE que la carte pour dépasser de chaque côté
   * (sinon elle est cachée derrière la carte → « je ne vois pas l'enveloppe »).
   * On garde le centrage du base (left:50% + translate), donc PAS de right ici. */
  .fl-card { width: 54%; }
  .fl-envelope { width: 92%; }
}

/* (Legacy CSS supprimé - composition unifiée dans .preview-flatlay ci-dessus) */

/* Correctif page /templates.php?tier=cinematic
   La vue dédiée n'a pas de sidebar : elle doit utiliser toute la largeur. */
.tpl-section-cinematic .tpl-container-wide {
  width: min(100% - 40px, 1320px);
  max-width: 1320px !important;
  margin-inline: auto;
}
.tpl-section-cinematic .tpl-layout-cinematic {
  display: block;
  width: 100%;
  margin-top: 0;
}
.tpl-section-cinematic .tpl-content {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.tpl-section-cinematic .results-bar-cinematic {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.tpl-section-cinematic .templates-grid-cinematic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
  width: 100%;
  align-items: stretch;
}
.tpl-section-cinematic .tpl-card-cinematic {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.tpl-section-cinematic .tpl-card-cinematic .preview-flatlay {
  aspect-ratio: 16 / 11;
}
.tpl-section-cinematic .tpl-card-cinematic .body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.tpl-section-cinematic .tpl-card-cinematic h3 {
  min-height: 2.6em;
}
.tpl-section-cinematic .tpl-card-cinematic .cinematic-card-actions {
  margin-top: auto;
  padding-top: 12px;
}
.tpl-section-cinematic .cinematic-compare {
  display: grid;
  grid-template-columns: minmax(240px, .78fr) minmax(0, 1.6fr);
  gap: 28px;
  align-items: start;
  width: 100%;
  margin-top: 42px;
}
.tpl-section-cinematic .cinematic-compare h2 {
  margin-bottom: 0;
}
.tpl-section-cinematic .cinematic-compare-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1180px) {
  .tpl-section-cinematic .templates-grid-cinematic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .tpl-section-cinematic .tpl-container-wide {
    width: min(100% - 28px, 720px);
  }
  .tpl-section-cinematic .templates-grid-cinematic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tpl-section-cinematic .cinematic-compare {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .tpl-section-cinematic .tpl-container-wide {
    width: min(100% - 24px, 420px);
  }
  .tpl-section-cinematic .templates-grid-cinematic {
    grid-template-columns: 1fr;
  }
  .tpl-section-cinematic .cinematic-compare-grid {
    grid-template-columns: 1fr;
  }
  .tpl-section-cinematic .tpl-card-cinematic h3 {
    min-height: 0;
  }
}

/* ============================================================
 * GALERIE — fond d'aperçu UNIFORME & minimal (réf. Paperless Post)
 * Les fonds décoratifs par univers (blobs, motifs, dégradés colorés)
 * rendaient la grille chargée et non uniforme. Sur la grille, toutes les
 * vignettes partagent désormais un même "studio" neutre : la carte +
 * l'enveloppe sont le seul point focal. La direction artistique par
 * univers reste sur la page de personnalisation (create.php).
 * Sélecteur volontairement spécifique (0,4,0) pour neutraliser les
 * surcharges .tpl-card-type-* et .tpl-card-tier-basic.*.
 * ============================================================ */
.templates-grid .tpl-card:not(.tpl-card-cinematic) .preview-flatlay {
  background: #F4F4F5; /* gris clair uni, style e-commerce (demande client) */
}

/* Vignettes BASIC (Standard) : MÊME rendu que les Premium — enveloppe visible +
   carte glissée dedans, à la même taille/disposition (demande client). Le bloc
   .tpl-card-tier-basic masquait l'enveloppe (display:none !important) et forçait
   une grande carte pleine ; on rétablit la composition flat-lay standard.
   Les modèles Standard ont bien une image d'enveloppe (ex: blue-baby.webp). */
.templates-grid .tpl-card-tier-basic .fl-envelope,
.templates-grid .tpl-card-tier-basic .fl-tampon {
  display: block !important; /* annule le display:none !important du bloc basic */
}
.templates-grid .tpl-card-tier-basic .fl-card {
  width: 47%; /* même largeur que les vignettes Premium → place pour l'enveloppe */
}
.templates-grid .tpl-card-tier-basic.tpl-card-type-corporate .fl-card {
  width: 56%; /* aligne sur la carte Premium corporate */
}