/* Fiche produit : garanties en ligne puis idée de vitrine avec une pile de produits qui défile (module Idées pour ma vitrine).
   Le bloc reste caché tant que fiche.js ne l'a pas placé. */
.af-sous { container-type: inline-size; margin: 20px 0; }
.af-sous[hidden] { display: none !important; }
.af-sous .af-gar { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.af-sous .af-gar li { background: #fff; border-radius: 18px; box-shadow: 0 3px 14px rgba(0, 0, 0, .10); padding: 11px 13px; display: flex; gap: 10px; align-items: center; margin: 0; }
.af-sous .af-gar svg { flex: 0 0 28px; width: 28px; height: 28px; fill: none; stroke: #c8586c; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.af-sous .af-gar p { margin: 0; line-height: 1.25; }
.af-sous .af-gar b { display: block; color: #4c7360; font-size: 13.5px; }
.af-sous .af-gar span { display: block; font-size: 12px; color: #55595c; }
.af-sous .af-idee { position: relative; display: flex; align-items: center; gap: 6px; border-radius: 26px; overflow: hidden; min-height: 210px; padding: 14px 18px 14px 14px;
  background: linear-gradient(135deg, #fff5f0 0%, #fbe7e2 100%); box-shadow: 0 6px 22px rgba(200, 88, 108, .18); }
/* la pile de suggestions : 3 cartes visibles, la première glisse et passe derrière (fiche.js) */
.af-sous .af-pile { position: relative; flex: 0 0 230px; height: 190px; }
.af-sous .af-pile img { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; object-fit: contain; background: #fff; border: 5px solid #fff; border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16); opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s; }
.af-sous .af-pile img.p0 { opacity: 1; z-index: 3; transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
.af-sous .af-pile img.p1 { opacity: 1; z-index: 2; transform: translate(-18%, -56%) rotate(7deg) scale(.86); }
.af-sous .af-pile img.p2 { opacity: 1; z-index: 1; transform: translate(-82%, -46%) rotate(-11deg) scale(.78); }
.af-sous .af-pile img.sort { opacity: 0; z-index: 4; transform: translate(10%, -40%) rotate(14deg) scale(.9); }
.af-sous .af-i-txt { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.af-sous .af-badge { align-self: flex-start; background: #c8586c; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.af-sous .af-i-titre { font-family: Amithen, cursive; color: #c8586c; font-size: 36px; line-height: 1; margin: 0; }
.af-sous .af-i-sous { font-size: 13px; color: #55595c; margin: 0; line-height: 1.45; }
.af-sous .af-i-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: #4c7360; color: #fff !important; font-weight: 700; font-size: 13.5px;
  padding: 9px 10px 9px 18px; border-radius: 999px; text-decoration: none !important; transition: background .2s; }
.af-sous .af-i-btn i { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #4c7360; align-items: center; justify-content: center; font-style: normal; font-size: 14px; }
.af-sous .af-i-btn:hover { background: #3d5e4e; }
.af-sous .af-deco { position: absolute; right: -18px; bottom: -18px; width: 90px; height: 90px; opacity: .14; fill: #c8586c; pointer-events: none; }
/* bloc étroit (téléphone, colonne étroite) : garanties 2 + 1, pile plus petite */
@container (max-width: 520px) {
  .af-sous .af-gar { grid-template-columns: 1fr 1fr; gap: 8px; }
  .af-sous .af-gar li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .af-sous .af-gar li { padding: 9px 10px; gap: 8px; border-radius: 16px; }
  .af-sous .af-gar svg { flex-basis: 22px; width: 22px; height: 22px; }
  .af-sous .af-gar b { font-size: 12.5px; }
  .af-sous .af-gar span { font-size: 11px; }
  .af-sous .af-idee { min-height: 170px; padding: 12px 14px 12px 8px; gap: 2px; }
  .af-sous .af-pile { flex-basis: 130px; height: 150px; }
  .af-sous .af-pile img { width: 100px; height: 100px; border-width: 4px; border-radius: 12px; }
  .af-sous .af-i-txt { gap: 5px; }
  .af-sous .af-i-titre { font-size: 25px; }
  .af-sous .af-i-sous { font-size: 12px; }
  .af-sous .af-i-btn { font-size: 12.5px; padding: 7px 8px 7px 14px; }
}
@media (prefers-reduced-motion: reduce) { .af-sous .af-pile img { transition: none; } }