/* V3.6 - lot 4 (message audio proprietaire 2026-07-24). Additif, charge en dernier.
   Aucun prix invente: 95 $ a 375 $ par pilier et 995 $ les six reunis (grille interne EHOP V12.3),
   Aging Map 250 $ (site live). Conflit de grilles documente dans le changelog. */

:root { --v36-ink: #071927; --v36-teal: #0d8f96; --v36-gold: #b8863b; }

/* ---------- POP-UP D'ENTREE, plus leger ---------- */
.entry-group { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.06); }
.entry-group-label { color: rgba(255,255,255,.8); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.entry-group-links { display: flex; flex-wrap: wrap; gap: 8px; }
.entry-group-links a { flex: 1 1 auto; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff; font-size: 13px; font-weight: 750; text-decoration: none; }
.entry-group-links a:hover { background: rgba(255,255,255,.16); }

/* ---------- HERO ---------- */
/* On remonte l'image: titre plus large sur 2 lignes max, moins de texte au-dessus */
.v34-hero { padding-top: clamp(24px, 3.2vw, 46px); }
.v34-hero .v31-hero-heading { width: min(100%, 1120px); }
.v34-hero .v31-hero-heading h1 {
  max-width: 100%;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.v34-hero-br { display: none; }
.v34-hero .v34-hero-hook { margin-top: 10px; font-size: clamp(16px, 1.9vw, 20px); }
.v34-hero .v34-hero-figure { margin-top: clamp(14px, 1.8vw, 22px); }

/* Deux boutons en HAUT de l'image (a hauteur de la personne) */
.v34-hero .v34-hero-actions {
  top: 0; bottom: auto;
  justify-content: center;
  gap: clamp(14px, 7vw, 96px);
  padding: 22px 26px 46px;
  background: linear-gradient(180deg, rgba(4,18,30,.72), transparent);
}
.v34-hero .v34-hero-actions .button-primary { background: #fff; color: var(--v36-ink); }
.v34-hero .v34-hero-actions .button-outline { border-color: rgba(255,255,255,.85); color: #fff; background: rgba(255,255,255,.14); }

/* CTA 95 $ en BAS de l'image */
.v36-cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.v34-hero-figure .v36-cta-strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 46px 22px 18px;
  background: linear-gradient(180deg, transparent, rgba(4,18,30,.86));
}
.v34-hero-figure .v36-cta-strip p { margin: 0; color: #fff; font-size: 15px; font-weight: 700; }
.v34-hero-figure .v36-cta-strip strong { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Mobile: pas de superposition, tout redevient statique */
@media (max-width: 760px) {
  .v34-hero .v34-hero-actions,
  .v34-hero-figure .v36-cta-strip { position: static; background: none; padding: 14px 0 0; }
  .v34-hero-figure .v36-cta-strip p { color: #274152; }
  .v34-hero-figure .v36-cta-strip strong { color: var(--v36-teal); }
}

/* ---------- TITRES LARGES, JAMAIS UN MOT PAR LIGNE ----------
   Correctif: v34.css imposait max-width:16ch au titre de la page Programmes,
   ce qui cassait le texte en un mot par ligne. On elargit partout. */
main h1, main h2, main h3, main h4 { text-wrap: balance; }
.start-page .start-hero-content h1 { max-width: min(100%, 880px) !important; }
.start-page .start-hero-content p { max-width: min(100%, 760px); }
.v31-centered-heading { max-width: min(100%, 1040px); }
.v31-centered-heading h2 { max-width: 100%; }
.v31-section-heading { max-width: min(100%, 1080px); }
/* Colonne de texte des rangees programmes: assez large pour 2 lignes de titre */
.v34-prog-row { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.v34-prog-copy h3, .v36-prog-featured h3 { max-width: 100%; }
.v36-quiz-compact { grid-template-columns: minmax(0, .42fr) minmax(0, 1.58fr); }

/* Reduire les vides entre sections */
.v31-future { padding-top: clamp(40px, 5vw, 72px); }
.v31-future .v31-commercial-cta { margin-top: clamp(20px, 2.4vw, 30px); }

/* ---------- TEASER PROGRAMMES (2 rangees) ---------- */
.v36-prog-teaser { margin-top: 26px; }
.v36-prog-lead { max-width: 820px; margin: 0 auto 22px; color: #506879; font-size: 16px; line-height: 1.6; text-align: center; }
.v36-prog-featured {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(20px,3vw,40px); align-items: center;
  padding: clamp(20px,2.6vw,32px); margin-bottom: 16px;
  border: 1px solid rgba(13,115,119,.22); border-radius: 24px;
  background: linear-gradient(120deg,#fff,#f0faf9); color: inherit; text-decoration: none;
}
.v36-prog-featured:hover { box-shadow: 0 20px 60px rgba(6,26,44,.1); }
.v36-prog-featured .v36-reco { display: inline-block; margin-bottom: 8px; padding: 5px 11px; border-radius: 999px; background: var(--v36-teal); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.v36-prog-featured h3 { margin: 2px 0 8px; font-size: clamp(24px,2.6vw,32px); }
.v36-prog-featured p { margin: 0 0 12px; color: #506879; font-size: 15px; line-height: 1.55; }
.v36-prog-price { color: var(--v36-ink); font-weight: 800; }
.v36-prog-price strong { color: var(--v36-teal); }
.v36-prog-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.v36-prog-card { display: block; overflow: hidden; border: 1px solid rgba(7,27,45,.1); border-radius: 20px; background: #fff; color: inherit; text-decoration: none; transition: transform .2s ease; }
.v36-prog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(6,26,44,.1); }
.v36-prog-card img { display: block; width: 100%; height: clamp(150px,16vw,190px); object-fit: cover; }
.v36-prog-card .v36-pc-copy { padding: 16px 18px 20px; }
.v36-prog-card h4 { margin: 0 0 6px; font-size: 18px; }
.v36-prog-card p { margin: 0; color: #607886; font-size: 13.5px; line-height: 1.45; }

/* ---------- CE QUE VOTRE JUMEAU CONTIENT: fond blanc, titre noir, large ---------- */
.v33-contains.v36-contains-light { background: #fff; color: var(--v36-ink); }
.v36-contains-light .v31-centered-heading h2 { color: var(--v36-ink); }
.v36-contains-figures { max-width: 1180px; margin: 0 auto; }
.v36-contains-figures img { display: block; width: 100%; height: auto; border-radius: 18px; }
.v36-contains-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1000px; margin: 24px auto 0; }
.v36-contains-chips span { padding: 10px 15px; border: 1px solid rgba(13,115,119,.22); border-radius: 999px; background: #f2fbfa; color: #274152; font-size: 14px; font-weight: 750; }
.v36-contains-chips b { color: var(--v36-teal); }

/* ---------- MEDIAS: vedette + secondaires ---------- */
.v36-media-band { padding: clamp(48px,6vw,88px) 0; }
.v36-media-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.v36-media-head h2 { margin: 0; }
.v36-media-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.v36-media-feature { position: relative; overflow: hidden; border-radius: 22px; color: #fff; text-decoration: none; min-height: 340px; background: #061a2c; }
.v36-media-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.v36-media-feature .v36-media-cap { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 340px; padding: 24px; background: linear-gradient(180deg, transparent 40%, rgba(3,16,24,.82)); }
.v36-media-feature span { font-size: 12px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.v36-media-feature h3 { margin: 6px 0 0; font-size: clamp(20px,2.2vw,26px); }
.v36-media-side { display: grid; grid-template-rows: repeat(2,1fr); gap: 16px; }
.v36-media-card { position: relative; overflow: hidden; border-radius: 18px; color: #fff; text-decoration: none; min-height: 160px; background: #0a2434; }
.v36-media-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.v36-media-card .v36-media-cap { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 160px; padding: 16px; background: linear-gradient(180deg, transparent 45%, rgba(3,16,24,.82)); }
.v36-media-card span { font-size: 11px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; opacity: .9; }
.v36-media-card h4 { margin: 4px 0 0; font-size: 15px; }

/* ---------- CTA FINAL ---------- */
.v36-final-cta { padding: clamp(40px,5vw,72px) 0; background: #061a2c; color: #fff; }
.v36-final-cta .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.v36-final-cta h2 { margin: 0; max-width: 620px; color: #fff; }

/* ---------- PAGE PROGRAMMES ---------- */
/* Quiz reduit */
.v36-quiz-compact { display: grid; grid-template-columns: minmax(0,.55fr) minmax(0,1fr); gap: clamp(18px,3vw,36px); align-items: center; padding: clamp(18px,2.4vw,28px); border: 1px solid rgba(7,27,45,.12); border-radius: 20px; background: #f7fafb; color: inherit; text-decoration: none; }
.v36-quiz-compact .v34-prog-media img { height: clamp(140px,15vw,190px); }
.v36-quiz-compact h3 { margin: 4px 0 8px; font-size: clamp(20px,2.2vw,26px); }
.v36-quiz-compact p { margin: 0 0 8px; color: #506879; font-size: 15px; }
.v36-reco-badge { display: inline-block; margin-bottom: 6px; padding: 5px 11px; border-radius: 999px; background: var(--v36-teal); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
/* Corrige les visages recadres trop serre */
.v34-prog-media img { object-position: center 28%; }
/* Legendes foret en blanc par-dessus les photos, empilees */
.v36-forest-stack { display: grid; gap: 14px; }
.v36-forest-stack figure { position: relative; margin: 0; overflow: hidden; border-radius: 16px; }
.v36-forest-stack img { display: block; width: 100%; height: clamp(180px,24vw,260px); object-fit: cover; }
.v36-forest-stack figcaption { position: absolute; left: 16px; bottom: 14px; right: 16px; z-index: 1; color: #fff; font-size: clamp(14px,1.8vw,18px); font-weight: 800; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.v36-forest-stack figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(3,16,24,.62)); }

/* ---------- DEUX DIAPORAMAS (le site sert d'entonnoir vers les decks) ---------- */
.v36-decks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.v36-deck-card {
  position: relative; overflow: hidden; display: block; min-height: 340px;
  border-radius: 24px; color: #fff; text-decoration: none; background: #061a2c;
  transition: transform .25s ease, box-shadow .25s ease;
}
.v36-deck-card:hover { transform: translateY(-3px); box-shadow: 0 24px 64px rgba(6,26,44,.18); }
.v36-deck-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .74; transition: transform .7s ease;
}
.v36-deck-card:hover img { transform: scale(1.04); }
.v36-deck-copy {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 340px; padding: 26px;
  background: linear-gradient(180deg, transparent 34%, rgba(3,16,24,.86));
}
.v36-deck-count {
  align-self: flex-start; margin-bottom: 10px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.v36-deck-copy h3 { margin: 0 0 6px; color: #fff; font-size: clamp(21px,2.2vw,27px); }
.v36-deck-copy p { margin: 0 0 12px; color: rgba(255,255,255,.8); font-size: 14.5px; line-height: 1.5; }
.v36-deck-copy strong { color: #6fe3d6; font-size: 14px; font-weight: 850; }

@media (max-width: 860px) { .v36-decks { grid-template-columns: 1fr; } }

/* Ce que vous obtenez: liste haut niveau */
.v36-getlist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.v36-getlist li { padding: 14px 16px; border: 1px solid rgba(7,27,45,.1); border-radius: 14px; background: #fff; color: #33505f; font-size: 15px; line-height: 1.45; }
.v36-getlist b { color: var(--v36-ink); }
.v36-getlist-note { max-width: 820px; margin: 18px auto 0; color: #607886; font-size: 13.5px; text-align: center; }

@media (max-width: 900px) {
  .v36-prog-featured, .v36-media-grid, .v36-quiz-compact { grid-template-columns: 1fr; }
  .v36-prog-cards { grid-template-columns: 1fr; }
  .v36-getlist { grid-template-columns: 1fr; }
}

/* ---------- FIX AGENT REVIEW: H1 hero sur 2 lignes exactement a 1280/1440px ---------- */
.v34-hero .v31-hero-heading h1 { font-size: clamp(34px, 3.6vw, 56px); max-width: 1080px; }

/* ---------- FIX AGENT REVIEW: "Ce que votre jumeau peut contenir", grille de cartes HTML/CSS
   en francais, sans image raster (remplace multimodal-twin.webp, non traduisible). ---------- */
.v36-contains-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}
.v36-cc-card { padding: 24px 22px 26px; border: 1px solid rgba(7, 27, 45, .1); border-radius: 18px; background: #f7fafb; }
.v36-cc-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px; background: #eaf6f5; font-size: 24px; }
.v36-cc-card h3 { margin: 0 0 6px; color: var(--v36-ink); font-size: 18px; line-height: 1.25; }
.v36-cc-card p { margin: 0; color: #506879; font-size: 14px; line-height: 1.5; }
.v36-cc-more { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #fff; border-style: dashed; }
@media (max-width: 860px) { .v36-contains-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .v36-contains-cards { grid-template-columns: 1fr; } }

/* ---------- FIX AGENT REVIEW: 4 vignettes secondaires medias (au lieu de 2), en grille 2x2 ---------- */
.v36-media-side { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v36-media-card { min-height: 150px; }
.v36-media-card .v36-media-cap { min-height: 150px; }
@media (max-width: 620px) { .v36-media-side { grid-template-columns: 1fr; } }

/* ---------- FIX AGENT REVIEW: titres education/science garantis sur 2 lignes a 1280 et 1440px.
   Le h2 generique (v3.css) grandit avec vw sans que son conteneur (max-width fixe) suive, ce qui
   pouvait faire passer ces titres a 3 lignes aux grandes largeurs. Point de coupe manuel + marge
   de securite sur la largeur. */
.v36-force-br { display: inline; }
.v32-education-copy h2 { max-width: 460px; font-size: clamp(28px, 3.4vw, 42px); }
.v34-banner-science .v34-banner-copy h2 { max-width: 860px; }

/* ============================================================
   LOT 5 - corrections demandees le 2026-07-24 (message audio)
   Charge en dernier: ces regles gagnent la cascade.
   ============================================================ */

/* 1. Titre du hero a la largeur de l'image, 2 lignes centrees,
      la premiere plus large que la seconde. */
.v34-hero .v31-hero-heading h1 {
  max-width: min(100%, 1080px);
  margin-inline: auto;
  font-size: clamp(30px, 4.1vw, 50px);
  text-wrap: initial;
}
.v34-hero-br { display: inline; }
@media (max-width: 720px) { .v34-hero-br { display: none; } }

/* Trois boutons dans le hero: on resserre l'espacement */
.v34-hero .v34-hero-actions { gap: clamp(10px, 2.6vw, 34px); flex-wrap: wrap; }

/* 2. Titre sur UNE seule ligne (section contenu du jumeau) */
.v36-oneline-title {
  max-width: 100%;
  margin-inline: auto;
  font-size: clamp(22px, 3.1vw, 42px);
  text-wrap: initial;
}
@media (min-width: 1000px) { .v36-oneline-title { white-space: nowrap; } }

/* 3. Titres limites a DEUX lignes */
.v36-two-line-title {
  max-width: min(100%, 900px);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.12;
  text-wrap: balance;
}
.v34-banner-science .v36-two-line-title { margin-inline: 0; }

/* 4. Titre des programmes: centre, sans encadre */
.v36-prog-heading { max-width: min(100%, 1040px); margin-inline: auto; text-align: center; }
.v36-prog-heading .eyebrow {
  display: inline-flex; padding: 8px 13px; border: 1px solid rgba(13, 115, 119, .2);
  border-radius: 999px; background: #fff;
}

/* 5. Meme effet de survol sur les trois cartes que sur la vedette */
.v36-prog-card { transition: transform .25s ease, box-shadow .25s ease; }
.v36-prog-card:hover,
.v36-prog-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 22px 62px rgba(6, 26, 44, .18);
}
.v36-prog-card img { transition: transform .6s ease; }
.v36-prog-card:hover img { transform: scale(1.04); }
.v36-prog-featured { transition: transform .25s ease, box-shadow .25s ease; }
.v36-prog-featured:hover { transform: translateY(-4px); box-shadow: 0 22px 62px rgba(6, 26, 44, .18); }

/* 6. Section contenu du jumeau: l'image seule, plus large */
.v36-contains-figures { max-width: min(100%, 1180px); margin: 26px auto 0; }
.v36-contains-figures img { width: 100%; height: auto; border-radius: 20px; }

/* 7. Appel a l'action final: titre sur 2 lignes, bouton dessous, le tout centre */
.v36-final-stack {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.v36-final-stack h2 { margin-inline: auto; }

/* 8. Analogie foret: l'arbre doit etre vu EN ENTIER (dezoome) */
.v36-forest-stack .v36-tree-out { background: #0d1f16; }
.v36-forest-stack .v36-tree-out img {
  object-fit: contain;
  background: #0d1f16;
}

/* 9. Lien vers la FAQ complete sous la FAQ rapide */
.v36-faq-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 4px;
  color: var(--v36-teal);
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}
.v36-faq-all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 10. Le saut de ligne du titre du hero etait neutralise par une regle concurrente.
       Specificite elevee pour garantir 2 lignes centrees, la premiere plus large. */
.v34-hero .v31-hero-heading h1 br.v34-hero-br { display: inline !important; }
@media (max-width: 720px) {
  .v34-hero .v31-hero-heading h1 br.v34-hero-br { display: none !important; }
}

/* 11. Titre du hero: on ne depend plus du <br>. La police est assez grande pour que le
       texte deborde d'une ligne et retombe naturellement sur DEUX lignes, la premiere
       plus remplie que la seconde (retour a la ligne gourmand), le tout centre et
       exactement a la largeur de l'image. */
.v34-hero .v31-hero-heading h1 {
  font-size: clamp(30px, 4.9vw, 56px) !important;
  line-height: 1.05;
  text-wrap: nowrap;
  text-wrap: initial;
}

/* ============================================================
   LOT 6 - corrections du 2026-07-24 (2e message audio)
   ============================================================ */

/* 1. Les TROIS boutons du hero: meme gabarit, tous transparents, remontes */
.v34-hero .v34-hero-actions { padding: 14px 26px 44px; gap: clamp(10px, 2vw, 22px); }
.v34-hero .v34-hero-actions .button,
.v34-hero .v34-hero-actions .button-primary,
.v34-hero .v34-hero-actions .button-outline {
  border: 1px solid rgba(255, 255, 255, .85);
  color: #fff;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  box-shadow: none;
  font-size: 13.5px;
  padding: 12px 18px;
  min-height: 46px;
}
.v34-hero .v34-hero-actions .button:hover { background: rgba(255, 255, 255, .26); }

/* 2. Titres sur UNE ligne: le script oneline.js ajuste la taille pour remplir
      la largeur disponible. Ici on pose seulement les garde-fous. */
.v36-oneline-title {
  max-width: 100%;
  margin-inline: auto;
  line-height: 1.1;
  text-wrap: initial;
}
@media (max-width: 760px) {
  .v36-oneline-title { white-space: normal !important; }
}

/* 3. FAQ: titre pleine largeur, questions sur deux colonnes, lien hors du cadre */
.v36-faq-wrap { display: block; }
.v36-faq-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  align-content: start;
}
.v36-faq-all-row { margin: 18px 0 0; text-align: center; }
.v36-faq-all-row .v36-faq-all {
  border: 0;
  background: none;
  padding: 0;
}
@media (max-width: 760px) {
  .v36-faq-two-col { grid-template-columns: 1fr; }
}

/* 4. Analogie foret et arbre: cadrage
      - la foret doit etre dezoomee (on voit les trouees et les essences)
      - l'arbre doit etre cadre de la base a la cime, sans exces de vide */
.v36-forest-stack figure img { height: clamp(200px, 26vw, 300px); }
.v36-forest-stack figure:first-child img {
  object-fit: cover;
  object-position: center center;
  transform: scale(1);
}
.v36-forest-stack .v36-tree-out img {
  object-fit: contain;
  padding: 6px 0;
  background: #0d1f16;
}

/* LOT 7 */
/* Boutons du hero: contour et lettres en vert BioTwin */
.v34-hero .v34-hero-actions .button,
.v34-hero .v34-hero-actions .button-primary,
.v34-hero .v34-hero-actions .button-outline {
  border-color: #6fe3d6 !important;
  color: #6fe3d6 !important;
  background: rgba(4,18,30,.42) !important;
}
.v34-hero .v34-hero-actions .button:hover { background: rgba(111,227,214,.22) !important; }

/* Apercu des diaporamas: mosaique au lieu d'une seule photo */
.v36-deck-card .v36-mosaic { position: absolute; inset: 0; display: grid; gap: 2px; opacity: .74; }
.v36-deck-card .v36-mosaic.m32 { grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(2,1fr); }
.v36-deck-card .v36-mosaic.m16 { grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(2,1fr); }
.v36-deck-card .v36-mosaic img { width: 100%; height: 100%; object-fit: cover; }