/* Vitrine du premier accueil : cartes en grand qui défilent, reflet holographique au passage. */
.showcase{position:relative;margin:0 0 26px;padding:30px 0 18px;border-radius:18px;overflow:hidden;color:#fff;
  background:radial-gradient(ellipse 80% 70% at 50% 110%,#1d6fa5 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 15% 0%,#3b2a73 0%,transparent 60%),linear-gradient(160deg,#0d2233,#13324a 55%,#0d2233)}
.showcase-head{padding:0 28px 18px;max-width:640px}
.showcase-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;color:#facc45}
.showcase-head h2{font-size:clamp(22px,3vw,30px);line-height:1.15;margin:8px 0 8px;letter-spacing:-.4px;color:#fff}
.showcase-head p{margin:0;font-size:14px;line-height:1.6;color:#c8deec}
.showcase-track{overflow:hidden;padding:22px 0 26px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.showcase-rail{display:flex;gap:22px;width:max-content;padding:0 11px;animation:showcase-scroll 70s linear infinite}
.showcase-track:hover .showcase-rail,.showcase-track:focus-within .showcase-rail{animation-play-state:paused}
@keyframes showcase-scroll{to{transform:translateX(-50%)}}
.showcase-card{position:relative;flex:0 0 auto;width:180px;aspect-ratio:63/88;padding:0;border:0;border-radius:11px;overflow:hidden;cursor:pointer;background:#0b1c29;
  box-shadow:0 18px 38px #00000073,0 0 0 1px #ffffff1f;transform:rotate(-2.5deg);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.showcase-card:nth-child(even){transform:rotate(2deg) translateY(10px)}
.showcase-card:hover,.showcase-card:focus-visible{transform:translateY(-10px) scale(1.06) rotate(0);box-shadow:0 26px 50px #0000008c,0 0 0 2px #facc45;z-index:2;outline:none}
.showcase-card img{display:block;width:100%;height:100%;object-fit:cover}
.showcase-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#ffffff59 47%,#a8f0ff40 52%,transparent 64%);background-size:280% 100%;background-position:120% 0;mix-blend-mode:screen;animation:showcase-shine 5.5s ease-in-out infinite;pointer-events:none}
.showcase-card:nth-child(3n+2) .showcase-shine{animation-delay:1.8s}
.showcase-card:nth-child(3n) .showcase-shine{animation-delay:3.6s}
@keyframes showcase-shine{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}
.showcase-name{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;background:linear-gradient(transparent,#000000cc);font-size:12px;font-weight:600;text-align:left;line-height:1.3;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.showcase-name small{display:block;font-size:10px;font-weight:400;color:#d6e6ef}
.showcase-card:hover .showcase-name,.showcase-card:focus-visible .showcase-name{opacity:1;transform:none}
.showcase-note{margin:0;padding:0 28px;font-size:11px;color:#8fb0c4}
.showcase-landing{margin:56px auto;max-width:1180px}
@media (max-width:760px){.showcase-landing{margin:36px 0}.showcase{border-radius:14px;padding:22px 0 14px}.showcase-head{padding:0 18px 12px}.showcase-card{width:132px}.showcase-rail{gap:16px;animation-duration:55s}.showcase-note{padding:0 18px}}
@media (prefers-reduced-motion:reduce){.showcase-rail{animation:none}.showcase-track{overflow-x:auto}.showcase-shine{animation:none;opacity:0}}
/* Version compacte du tableau de bord : une bande de petites cartes sous « Ajouter une carte » */
.showcase-compact{margin:0 0 22px;padding:14px 0 4px;border-radius:14px}
.showcase-compact .showcase-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:0 20px;max-width:none}
.showcase-compact .showcase-head h2{font-size:16px;margin:0}
.showcase-compact .showcase-head span{font-size:12px;color:#a9c6d8}
.showcase-compact .showcase-track{padding:14px 0 16px}
.showcase-compact .showcase-rail{gap:14px;animation-duration:55s}
.showcase-compact .showcase-card{width:96px;border-radius:7px;box-shadow:0 10px 22px #00000066,0 0 0 1px #ffffff1f}
.showcase-compact .showcase-card:nth-child(even){transform:rotate(2deg) translateY(5px)}
.showcase-compact .showcase-card:hover,.showcase-compact .showcase-card:focus-visible{transform:translateY(-6px) scale(1.08) rotate(0)}
.showcase-compact .showcase-name{display:none}
@media (max-width:760px){.showcase-compact .showcase-card{width:82px}.showcase-compact .showcase-head{padding:0 16px}}
/* Exemple de la page d'accueil : la carte recherchée en image, centrée au-dessus du texte sur téléphone */
.example-with-card{display:grid;grid-template-columns:118px minmax(0,1fr);gap:20px;align-items:center}
.example-card-img{display:block;width:118px;height:auto;border-radius:7px;box-shadow:0 12px 26px #1b364640;transform:rotate(-2deg)}
@media (max-width:600px){.example-with-card{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}.example-card-img{width:170px}}