/*
 * Flownaely Café — homepage deck
 * The pilote slide deck ported to a scrollable, responsive landing page.
 */

.deck{ display:block; }

.deck .s{
  padding:var(--pad-block) var(--pad-x);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  gap:var(--gap-item);
}

.deck .slide-cream{
  background-color:var(--cream);
  background-image:radial-gradient(rgba(123,74,46,.10) 2.2px, transparent 2.3px);
  background-size:30px 30px;
  color:var(--ink);
}
.deck .slide-plum{
  background-color:var(--plum);
  background-image:radial-gradient(rgba(255,255,255,.05) 2.2px, transparent 2.3px);
  background-size:30px 30px;
  color:var(--paper);
}
.deck .slide-plum .eyebrow{ color:#e9925f; }
.deck .slide-plum .body{ color:var(--muted-paper); }
.deck .slide-plum .frame{
  border-color:#0e0a13;
  box-shadow:var(--px-shadow) var(--px-shadow) 0 var(--shadow-plum);
}

/* cover */
.deck .cover-row{
  display:flex;
  align-items:center;
  gap:clamp(32px, 5vw, 64px);
}
.deck .cover-copy{ display:flex; flex-direction:column; gap:32px; flex:1 1 46%; }
.deck .cover-art{ flex:1 1 42%; align-self:center; aspect-ratio:512/571; max-width:520px; }

/* multi-column problem / why blocks */
.deck .cards{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(28px, 4vw, 64px);
}
.deck .cards > .col{ flex:1 1 240px; gap:18px; }

/* two-column text + art rows */
.deck .split{
  display:flex;
  align-items:center;
  gap:clamp(32px, 6vw, 80px);
}
.deck .split > .col{ flex:1; }
.deck .split .frame{ flex:1; }

/* steps / pilote cards */
.deck .steps{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(20px, 2.4vw, 30px);
  align-items:stretch;
}
.deck .steps > .frame{
  flex:1 1 260px;
  padding:38px 34px;
  gap:18px;
  display:flex; flex-direction:column;
  justify-content:flex-start;
}

/* IA avatars */
.deck .avatars{ display:flex; gap:56px; align-items:flex-end; flex-wrap:wrap; }
.deck .avatars .col{ align-items:center; gap:18px; }

/* contact buttons row */
.deck .contacts{ display:flex; gap:26px; flex-wrap:wrap; }

/* entrée animation : translation seule, jamais opacity résiduelle */
@media (prefers-reduced-motion:no-preference){
  .deck .rise{ animation:rise .5s cubic-bezier(.2,.75,.25,1) both; }
  .deck .rise.d1{ animation-delay:.05s; }
  .deck .rise.d2{ animation-delay:.11s; }
  .deck .rise.d3{ animation-delay:.17s; }
  .deck .rise.d4{ animation-delay:.23s; }
  .deck .rise.d5{ animation-delay:.29s; }
}
@keyframes rise{ from{ transform:translateY(22px); } to{ transform:none; } }

/* responsive : on empile tout sous 760px */
@media (max-width:760px){
  .deck .cover-row,
  .deck .split{ flex-direction:column; align-items:stretch; }
  .deck .cover-art{ order:-1; max-width:100%; }
  .deck .lead, .deck .body{ max-width:none; }
}