/* ═══════════════════════════════════════════════════════════
   Cmandili — visuels des pages d'atterrissage SEO.

   Chargé par les 6 pages SEO, qu'elles utilisent landing-seo.css
   ou style.css (shein-tunisie.html, qui garde son CSS d'origine).
   Ce fichier ne dépend donc d'aucun des deux : chaque variable est
   écrite avec sa valeur de repli, ex. var(--tint,#faf3f0).

   ⚠️ Ne JAMAIS placer un <img> dans un élément porteur de data-ar :
   la bascule FR/AR réécrit innerHTML et supprimerait l'image.
   L'image est sœur du <figcaption>, qui porte seul la traduction.
   ═══════════════════════════════════════════════════════════ */

.shot{
  margin:24px 0 0;
  border-radius:16px;
  overflow:hidden;
  background:var(--tint,#faf3f0);
  border:1px solid var(--border,#efe7e1);
}

.shot img{
  display:block;
  width:100%;
  height:auto;
  /* Réserve la place avant le chargement → pas de décalage de mise en page.
     Doit rester cohérent avec width/height dans le HTML (1200×675). */
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--tint,#faf3f0);
}

.shot figcaption{
  padding:10px 14px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted,#6a635e);
  background:var(--card,#fff);
  border-top:1px solid var(--border,#efe7e1);
}

/* Visuel d'ouverture, juste sous le héros : légèrement détaché. */
.shot-hero{box-shadow:0 10px 30px rgba(44,36,32,.10)}

html[dir="rtl"] .shot figcaption{text-align:right}

@media(max-width:520px){
  .shot{border-radius:12px;margin-top:18px}
  .shot figcaption{font-size:12.5px;padding:9px 12px}
}