/* ============================================================
   marketing-v6.css — Passe de finition premium (MK103)
   Additive, chargée en dernier. Aucun changement de contenu :
   uniquement lisibilité, cohérence et micro-finitions.
   ============================================================ */

/* ---- Galerie : libellé sur une seule ligne, jamais tronqué de travers ----
   Fix : .gal-meta était left:14px sans contrainte droite → sur les cartes
   étroites de la mosaïque, titre/auteur/likes se chevauchaient. */
.gal-card .gal-meta {
  left: 12px; right: 12px; bottom: 12px;
  align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 9px;
  background: rgba(10, 15, 28, .72);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  white-space: nowrap; overflow: hidden;
}
/* le titre prend l'espace disponible et s'abrège proprement */
.gal-card .gal-meta > span:first-child {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* séparateur + auteur ne rétrécissent pas */
.gal-card .gal-meta > span:not(:first-child):not(.heart) { flex: 0 0 auto; }
/* le cœur est épinglé à droite */
.gal-card .gal-meta .heart { flex: 0 0 auto; margin-left: auto; padding-left: 4px; }
/* sur cartes très étroites, on masque l'auteur (garde titre + likes lisibles) */
@media (max-width: 640px) {
  .gal-card .gal-meta > span:nth-child(2),
  .gal-card .gal-meta > span:nth-child(3) { display: none; }
}

/* ---- Micro-finitions premium, sûres et transverses ---- */
/* sélection de texte aux couleurs de la marque */
::selection { background: rgba(43, 107, 255, .22); color: inherit; }

/* focus visible cohérent (accessibilité + finition pro) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #2B6BFF; outline-offset: 2px; border-radius: 4px;
}

/* images de galerie : rendu net + transition d'apparition douce */
.gal-card .gal-img.gal-photo img { image-rendering: auto; }

/* évite tout débordement horizontal résiduel sur petits écrans */
@media (max-width: 560px) {
  html, body { overflow-x: hidden; }
}