/* ==========================================================================
   FridgEat — accueil : bandeau d'aliments, démo de la photo, écran verrouillé, bilan du mois.
   L'état de base est l'état final (lisible sans JS et avec « réduire les animations ») ;
   les animations se jouent quand /assets/js/accueil.js ajoute .is-in (élément visible à l'écran).
   ========================================================================== */

/* ---------- Bandeau d'aliments qui défile ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  margin-block: clamp(4px, 2vw, 20px) clamp(28px, 5vw, 56px);
  padding-block: 12px;
  background: var(--citron);
  border-block: var(--border) solid #111111;
  rotate: -1.6deg;
  scale: 1.04;
}
.marquee__track {
  display: flex;
  gap: 34px;
  width: max-content;
  margin: 0;
  padding: 0 17px;
  list-style: none;
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  color: #111111;
  white-space: nowrap;
}
.marquee__item img { width: 40px; height: 40px; }
.marquee__item::after { content: "✦"; margin-left: 24px; font-size: 0.8em; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 38s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { translate: -50% 0; } }
@media (prefers-color-scheme: dark) { .marquee { border-color: #F4F0FF; } }

/* ---------- Démo : une photo → la liste ---------- */
.scan {
  position: relative;
  width: min(100%, 440px);
  margin-inline: auto;
}
.scan__photo {
  position: relative;
  overflow: hidden;
  background: #E9D3A8;
  border: var(--border) solid #111111;
  border-radius: 26px;
  box-shadow: 6px 6px 0 var(--shadow);
  rotate: -1.5deg;
  aspect-ratio: 520 / 374;
}
.scan__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scan__beam {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 0;
  height: 22%;
  background: linear-gradient(180deg, rgba(200, 241, 105, 0) 0%, rgba(200, 241, 105, 0.55) 70%, #C8F169 92%, rgba(255, 255, 255, 0.9) 100%);
  box-shadow: 0 6px 18px rgba(200, 241, 105, 0.9);
  opacity: 0;
  pointer-events: none;
}
.scan__badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: #111111;
  background: var(--citron-vert);
  border: var(--border-thin) solid #111111;
  border-radius: 999px;
  box-shadow: 2px 2px 0 #111111;
}
.scan__badge svg { width: 20px; height: 20px; fill: none; stroke: #111111; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.scan__list {
  position: relative;
  display: grid;
  gap: 9px;
  margin: -26px 14px 0;
  padding: 0;
  list-style: none;
  z-index: 1;
}
.scan__row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 10px;
  color: #111111;
  background: #FFFFFF;
  border: var(--border-thin) solid #111111;
  border-radius: 16px;
  box-shadow: 3px 3px 0 #111111;
}
.scan__row img { width: 40px; height: 40px; }
.scan__name { font-weight: 800; font-size: 1rem; line-height: 1.15; }
.scan__qty { padding: 4px 10px; font-size: 0.875rem; font-weight: 700; background: #F2EEFF; border-radius: 10px; }
.scan__date {
  min-width: 52px;
  padding: 4px 10px;
  font-size: 0.875rem;
  font-weight: 800;
  text-align: center;
  background: var(--citron-vert);
  border: 2px solid #111111;
  border-radius: 999px;
}
.scan__date--soon { background: var(--citron); }
.scan__row--check { background: var(--citron-pale); }
@media (max-width: 420px) {
  .scan__list { margin-inline: 6px; }
  .scan__row { grid-template-columns: 34px 1fr auto; }
  .scan__row img { width: 34px; height: 34px; }
  .scan__qty { display: none; }
}
@media (prefers-color-scheme: dark) {
  .scan__photo { border-color: #F4F0FF; }
}

@media (prefers-reduced-motion: no-preference) {
  .js-motion .scan:not(.is-in) .scan__row,
  .js-motion .scan:not(.is-in) .scan__badge { opacity: 0; }
  .js-motion .scan.is-in .scan__beam { animation: beam 1.5s cubic-bezier(0.45, 0, 0.55, 1) 0.2s 2 both; }
  .js-motion .scan.is-in .scan__badge { animation: pop-in 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 3.1s both; }
  .js-motion .scan.is-in .scan__row { animation: row-in 0.55s cubic-bezier(0.25, 1.4, 0.5, 1) calc(0.9s + var(--i) * 0.32s) both; }
  .js-motion .scan.is-in .scan__row img { animation: pop-in 0.5s cubic-bezier(0.3, 1.8, 0.5, 1) calc(1s + var(--i) * 0.32s) both; }
}
@keyframes beam {
  0% { opacity: 0; translate: 0 -100%; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; translate: 0 460%; }
}
@keyframes row-in {
  from { opacity: 0; translate: -28px 18px; rotate: -3deg; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes pop-in {
  from { opacity: 0; scale: 0.3; }
  to { opacity: 1; scale: 1; }
}

/* ---------- Démo : l'écran verrouillé ---------- */
.lock {
  position: relative;
  width: min(100%, 330px);
  margin-inline: auto;
  aspect-ratio: 330 / 600;
  padding: 12px;
  background: #111111;
  border-radius: 54px;
  box-shadow: 8px 8px 0 var(--shadow), inset 0 0 0 2px #3A3249;
  rotate: -2deg;
}
.lock__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 43px;
  background:
    radial-gradient(120% 70% at 80% 10%, rgba(255, 167, 181, 0.55), transparent 60%),
    radial-gradient(110% 60% at 10% 90%, rgba(142, 209, 255, 0.5), transparent 60%),
    linear-gradient(170deg, #2A2257 0%, #3C2F78 55%, #5A3F86 100%);
  color: #FFFFFF;
  text-align: center;
}
.lock__island {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 92px;
  height: 27px;
  translate: -50% 0;
  background: #000000;
  border-radius: 999px;
}
.lock__date { margin: 62px 0 0; font-weight: 700; font-size: 1rem; opacity: 0.92; }
.lock__time { margin: 2px 0 0; font-family: var(--font-display); font-size: 4.6rem; line-height: 1; letter-spacing: -0.02em; }
.lock__mascot { position: absolute; left: 50%; bottom: 26px; width: 74px; height: auto; translate: -50% 0; opacity: 0.95; rotate: -4deg; }
.lock__notif {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 172px;
  padding: 12px 12px 10px;
  color: #111111;
  text-align: left;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lock__head { display: flex; align-items: center; gap: 8px; }
.lock__icon { width: 26px; height: 26px; border-radius: 7px; }
.lock__app { flex: 1; margin: 0; font-weight: 800; font-size: 0.875rem; }
.lock__when { font-size: 0.75rem; font-weight: 600; color: #6B6580; }
.lock__msg { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.3; font-weight: 600; }
.lock__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.lock__btn { padding: 8px 6px; font-size: 0.875rem; font-weight: 800; text-align: center; background: #ECE8F6; border-radius: 12px; }
.lock__btn--eat { display: flex; align-items: center; justify-content: center; gap: 4px; }
.lock__btn--eat svg { width: 16px; height: 16px; fill: none; stroke: #111111; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.lock.is-done .lock__btn--eat, .lock:not(.js-wait) .lock__btn--eat { background: var(--citron-vert); }
.lock__toast {
  position: absolute;
  left: 50%;
  top: 356px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: #111111;
  white-space: nowrap;
  background: var(--citron);
  border: var(--border-thin) solid #111111;
  border-radius: 999px;
  box-shadow: 3px 3px 0 #111111;
  rotate: -3deg;
}
@media (max-width: 380px) {
  .lock__time { font-size: 3.8rem; }
  .lock__notif { top: 150px; }
  .lock__toast { top: 320px; }
}

@media (prefers-reduced-motion: no-preference) {
  .js-motion .lock:not(.is-in) .lock__notif,
  .js-motion .lock:not(.is-in) .lock__toast { opacity: 0; }
  .js-motion .lock.is-in .lock__notif { animation: notif-drop 0.7s cubic-bezier(0.25, 1.35, 0.45, 1) 0.5s both; }
  .js-motion .lock.is-in .lock__btn--eat { animation: tap 0.5s ease 2.3s both; }
  .js-motion .lock.is-in .lock__toast { animation: pop-in 0.5s cubic-bezier(0.3, 1.7, 0.5, 1) 2.75s both; }
  .js-motion .lock.is-in .lock__mascot { animation: hop 0.7s ease 2.75s both; }
}
@keyframes notif-drop {
  from { opacity: 0; translate: 0 -70px; scale: 0.92; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes tap {
  0% { background: #ECE8F6; }
  35% { scale: 0.9; background: #DCD5EE; }
  70% { scale: 1.04; background: var(--citron-vert); }
  100% { scale: 1; background: var(--citron-vert); }
}
@keyframes hop {
  0%, 100% { translate: -50% 0; }
  40% { translate: -50% -18px; rotate: 6deg; }
}

/* ---------- Bilan du mois : montant et calendrier ---------- */
.bilan-band { padding-block: clamp(48px, 7vw, 88px); }
.bilan-band__grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 860px) {
  .bilan-band__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
}
.bilan-band__num {
  display: block;
  font-size: clamp(4rem, 2.6rem + 6vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.bilan-band__num .bilan-band__hl {
  display: inline-block;
  padding: 0 0.14em;
  background: var(--citron);
  color: #111111;
  border: var(--border) solid #111111;
  border-radius: 0.18em;
  box-shadow: 5px 5px 0 var(--shadow);
  rotate: -2deg;
}
.bilan-band h2 { margin: 0 0 16px; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.05; }
.bilan-band__sub { font-size: 1.0625rem; font-weight: 600; color: var(--muted); }

.cal {
  width: min(100%, 420px);
  margin-inline: auto;
  padding: 18px 18px 16px;
  color: #111111;
  background: #FFFFFF;
  border: var(--border) solid #111111;
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow);
  rotate: 1.5deg;
}
.cal__title { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; font-family: var(--font-display); font-size: 1.25rem; }
.cal__legend { font-family: var(--font-text); font-size: 0.8125rem; font-weight: 700; color: #57506E; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.cal__head { font-size: 0.75rem; font-weight: 800; text-align: center; color: #57506E; }
.cal__day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: 0.8125rem;
  font-weight: 800;
  border-radius: 9px;
  border: 2px solid #111111;
  background: var(--citron-vert);
}
.cal__day--none { background: #FFFFFF; border-color: #D9D2F0; color: #57506E; }
.cal__day--thrown { background: var(--tomate); }
.cal__day--gap { border: 0; background: none; }
@media (prefers-color-scheme: dark) { .cal { border-color: #F4F0FF; } }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .cal:not(.is-in) .cal__day:not(.cal__day--gap) { opacity: 0; scale: 0.4; }
  .js-motion .cal.is-in .cal__day:not(.cal__day--gap) { animation: pop-in 0.35s cubic-bezier(0.3, 1.7, 0.5, 1) calc(0.15s + var(--i) * 0.035s) both; }
}

/* Captures : légère inclinaison au défilement (navigateurs récents) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .scan, .lock, .cal {
      animation: tilt-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}
@keyframes tilt-in {
  from { translate: 0 60px; rotate: 4deg; }
  to { translate: 0 0; }
}

/* Ordre d'apparition (pas de style en ligne : la CSP l'interdit) */
.scan__row:nth-child(1) { --i: 0; }
.scan__row:nth-child(2) { --i: 1; }
.scan__row:nth-child(3) { --i: 2; }
.scan__row:nth-child(4) { --i: 3; }
.scan__row:nth-child(5) { --i: 4; }
.scan__row:nth-child(6) { --i: 5; }
.scan__row:nth-child(7) { --i: 6; }
.scan__row:nth-child(8) { --i: 7; }
.cal__day:nth-child(9) { --i: 1; }
.cal__day:nth-child(10) { --i: 2; }
.cal__day:nth-child(11) { --i: 3; }
.cal__day:nth-child(12) { --i: 4; }
.cal__day:nth-child(13) { --i: 5; }
.cal__day:nth-child(14) { --i: 6; }
.cal__day:nth-child(15) { --i: 7; }
.cal__day:nth-child(16) { --i: 8; }
.cal__day:nth-child(17) { --i: 9; }
.cal__day:nth-child(18) { --i: 10; }
.cal__day:nth-child(19) { --i: 11; }
.cal__day:nth-child(20) { --i: 12; }
.cal__day:nth-child(21) { --i: 13; }
.cal__day:nth-child(22) { --i: 14; }
.cal__day:nth-child(23) { --i: 15; }
.cal__day:nth-child(24) { --i: 16; }
.cal__day:nth-child(25) { --i: 17; }
.cal__day:nth-child(26) { --i: 18; }
.cal__day:nth-child(27) { --i: 19; }
.cal__day:nth-child(28) { --i: 20; }
.cal__day:nth-child(29) { --i: 21; }
.cal__day:nth-child(30) { --i: 22; }
.cal__day:nth-child(31) { --i: 23; }
.cal__day:nth-child(32) { --i: 24; }
.cal__day:nth-child(33) { --i: 25; }
.cal__day:nth-child(34) { --i: 26; }
.cal__day:nth-child(35) { --i: 27; }
.cal__day:nth-child(36) { --i: 28; }
.cal__day:nth-child(37) { --i: 29; }
.cal__day:nth-child(38) { --i: 30; }
.cal__day:nth-child(39) { --i: 31; }
.bilan-band__note { text-align: left; margin: 12px 0 0; }

/* ---------- Démo : les recettes qui sauvent les restes (éventail de cartes) ---------- */
.cook { position: relative; width: min(100%, 460px); margin-inline: auto; }
.cook__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 22px; padding: 0; list-style: none; }
.cook__chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-weight: 800; font-size: 0.9375rem; color: #111111;
  background: #FFFFFF; border: var(--border-thin) solid #111111; border-radius: 999px; box-shadow: 2px 2px 0 #111111;
}
.cook__chip.is-on { background: var(--citron-vert); }
.cook__chip svg { width: 16px; height: 16px; fill: none; stroke: #111111; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.cook__stack { position: relative; height: 380px; }
.cook__card {
  position: absolute;
  left: 50%;
  top: 0;
  width: 236px;
  margin-left: -118px;
  overflow: hidden;
  color: #111111;
  background: #FFFFFF;
  border: var(--border) solid #111111;
  border-radius: 22px;
  box-shadow: 5px 5px 0 #111111;
  transform-origin: 50% 120%;
}
.cook__card img { display: block; width: 100%; height: 150px; object-fit: cover; border-bottom: var(--border-thin) solid #111111; }
.cook__body { padding: 12px 14px 14px; }
.cook__title { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.1; }
.cook__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 0.8125rem; font-weight: 700; }
.cook__meta li { padding: 2px 8px; border: 2px solid #111111; border-radius: 999px; }
.cook__meta .is-veg { background: var(--citron-vert); }
.cook__saves { margin: 0; padding: 8px 10px; font-size: 0.8125rem; font-weight: 800; background: var(--citron-vert-pale); border: 2px solid #111111; border-radius: 12px; }
.cook__saves span { display: inline-block; margin: 4px 4px 0 0; padding: 2px 8px; font-weight: 700; background: #FFFFFF; border: 2px solid #111111; border-radius: 999px; }
.cook__saves .is-urgent { background: var(--tomate); }
.cook__saves .is-soon { background: var(--citron); }
/* État final : l'éventail */
.cook__card--1 { z-index: 3; translate: 0 22px; rotate: 0deg; }
.cook__card--2 { z-index: 2; translate: -150px 34px; rotate: -10deg; }
.cook__card--3 { z-index: 1; translate: 150px 34px; rotate: 10deg; }
@media (max-width: 520px) {
  .cook__stack { height: 340px; }
  .cook__card { width: 196px; margin-left: -98px; border-radius: 18px; }
  .cook__card img { height: 118px; }
  .cook__body { padding: 10px 11px 12px; }
  .cook__title { font-size: 1rem; }
  .cook__saves span { font-size: 0.75rem; white-space: nowrap; }
  .cook__card--2 { translate: -66px 34px; rotate: -8deg; }
  .cook__card--3 { translate: 66px 34px; rotate: 8deg; }
}
.cook__saves span { white-space: nowrap; }
@media (prefers-color-scheme: dark) { .cook__card { border-color: #F4F0FF; } }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .cook:not(.is-in) .cook__card { translate: 0 60px; rotate: 0deg; opacity: 0; }
  .js-motion .cook:not(.is-in) .cook__chip.is-on { background: #FFFFFF; }
  .js-motion .cook.is-in .cook__card { transition: translate 0.8s cubic-bezier(0.25, 1.35, 0.45, 1), rotate 0.8s cubic-bezier(0.25, 1.35, 0.45, 1), opacity 0.3s ease; }
  .js-motion .cook.is-in .cook__card--1 { transition-delay: 0.15s; }
  .js-motion .cook.is-in .cook__card--2 { transition-delay: 0.55s; }
  .js-motion .cook.is-in .cook__card--3 { transition-delay: 0.7s; }
  .js-motion .cook.is-in .cook__chip.is-on { animation: chip-on 0.4s ease both; }
  .js-motion .cook.is-in .cook__chip:nth-child(1) { animation-delay: 1.3s; }
  .js-motion .cook.is-in .cook__chip:nth-child(2) { animation-delay: 1.6s; }
  .js-motion .cook.is-in .cook__saves span { animation: pop-in 0.4s cubic-bezier(0.3, 1.7, 0.5, 1) 1.9s both; }
  .js-motion .cook .cook__card:hover { rotate: 0deg; z-index: 4; transition-delay: 0s; }
}
@keyframes chip-on {
  0% { background: #FFFFFF; scale: 1; }
  45% { scale: 1.12; }
  100% { background: var(--citron-vert); scale: 1; }
}

/* ---------- Et aussi : trois tuiles animées ---------- */
.tiles { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.tile { display: flex; flex-direction: column; }
.tile__stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 230px;
  margin-bottom: 20px;
  overflow: hidden;
  color: #111111;
  background: var(--c);
  border: var(--border) solid #111111;
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow);
}
.tile--ciel { --c: var(--ciel); }
.tile--rose { --c: var(--rose); }
.tile--lime { --c: var(--citron-vert); }
.tile__title { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.015em; }
.tile p { margin: 0; }
@media (prefers-color-scheme: dark) { .tile__stage { border-color: #F4F0FF; } }

/* Pas à pas : l'étape, le minuteur, la voix */
.step-card { width: 82%; padding: 14px 16px; background: #FFFFFF; border: var(--border-thin) solid #111111; border-radius: 18px; box-shadow: 3px 3px 0 #111111; }
.step-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #57506E; }
.step-card__text { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.15; }
.step-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.timer { position: relative; width: 52px; height: 52px; }
.timer svg { width: 100%; height: 100%; rotate: -90deg; }
.timer circle { fill: none; stroke-width: 6; }
.timer__track { stroke: #ECE8F6; }
.timer__arc { stroke: var(--tomate); stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: 40; }
.timer__label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; }
.voice { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 0.8125rem; font-weight: 800; background: var(--citron); border: 2px solid #111111; border-radius: 999px; }
.voice__bars { display: flex; gap: 2px; align-items: center; height: 14px; }
.voice__bars i { width: 3px; height: 100%; background: #111111; border-radius: 2px; }
.voice__bars i:nth-child(2) { height: 60%; }
.voice__bars i:nth-child(3) { height: 85%; }
.voice__bars i:nth-child(4) { height: 45%; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .tile.is-in .timer__arc { animation: timer 6s linear infinite; }
  .js-motion .tile.is-in .voice__bars i { animation: bars 0.9s ease-in-out infinite alternate; }
  .voice__bars i:nth-child(2) { animation-delay: -0.3s !important; }
  .voice__bars i:nth-child(3) { animation-delay: -0.6s !important; }
  .voice__bars i:nth-child(4) { animation-delay: -0.15s !important; }
}
@keyframes timer { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 126; } }
@keyframes bars { from { scale: 1 0.3; } to { scale: 1 1; } }

/* Frigo à deux : les messages du foyer */
.duo { display: grid; gap: 10px; width: 84%; }
.duo__msg { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 0.875rem; font-weight: 700; line-height: 1.2; background: #FFFFFF; border: var(--border-thin) solid #111111; border-radius: 16px; box-shadow: 3px 3px 0 #111111; }
.duo__msg:nth-child(2) { margin-left: 18px; }
.duo__avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; font-family: var(--font-display); font-size: 0.9375rem; background: var(--citron); border: 2px solid #111111; border-radius: 50%; }
.duo__msg:nth-child(2) .duo__avatar { background: var(--ciel); }
.duo__msg img { width: 30px; height: 30px; margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .tile:not(.is-in) .duo__msg { opacity: 0; }
  .js-motion .tile.is-in .duo__msg { animation: row-in 0.55s cubic-bezier(0.25, 1.4, 0.5, 1) both; }
  .js-motion .tile.is-in .duo__msg:nth-child(1) { animation-delay: 0.3s; }
  .js-motion .tile.is-in .duo__msg:nth-child(2) { animation-delay: 1.1s; }
}

/* Défis et badges */
.quest { width: 84%; display: grid; gap: 12px; justify-items: center; }
.quest__badges { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.quest__badges li { display: grid; place-items: center; width: 58px; height: 58px; background: #FFFFFF; border: var(--border-thin) solid #111111; border-radius: 50%; box-shadow: 3px 3px 0 #111111; }
.quest__badges li:nth-child(2) { background: var(--citron); translate: 0 -8px; }
.quest__badges img { width: 34px; height: 34px; }
.quest__card { width: 100%; padding: 10px 12px; font-size: 0.875rem; font-weight: 800; background: #FFFFFF; border: var(--border-thin) solid #111111; border-radius: 14px; box-shadow: 3px 3px 0 #111111; }
.quest__bar { height: 12px; margin-top: 8px; overflow: hidden; background: #ECE8F6; border: 2px solid #111111; border-radius: 999px; }
.quest__bar i { display: block; width: 72%; height: 100%; background: var(--tomate); border-right: 2px solid #111111; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .tile:not(.is-in) .quest__badges li { opacity: 0; }
  .js-motion .tile.is-in .quest__badges li { animation: badge-in 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
  .js-motion .tile.is-in .quest__badges li:nth-child(1) { animation-delay: 0.2s; }
  .js-motion .tile.is-in .quest__badges li:nth-child(2) { animation-delay: 0.4s; }
  .js-motion .tile.is-in .quest__badges li:nth-child(3) { animation-delay: 0.6s; }
  .js-motion .tile.is-in .quest__bar i { animation: fill 1.4s cubic-bezier(0.3, 1, 0.4, 1) 0.8s both; }
}
@keyframes badge-in { from { opacity: 0; scale: 0.3; rotate: -40deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes fill { from { width: 0; } }

.bilan-band__cta { margin-top: 22px; }

/* ---------- L'app en images : les 7 visuels App Store, à faire défiler ---------- */
.gallery { padding-top: clamp(24px, 4vw, 48px); }
.gallery__scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block: 8px 24px;
  scrollbar-width: thin;
}
.gallery__scroller:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--radius-sm); }
.gallery__list {
  display: flex;
  gap: 18px;
  width: max-content;
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
}
.gallery__item { scroll-snap-align: start; }
.gallery__item img {
  display: block;
  width: min(62vw, 240px);
  height: auto;
  border: var(--border) solid #111111;
  border-radius: 24px;
  box-shadow: 5px 5px 0 var(--shadow);
}
.gallery__item:nth-child(odd) img { rotate: -1.2deg; }
.gallery__item:nth-child(even) img { rotate: 1.2deg; translate: 0 10px; }
@media (prefers-color-scheme: dark) { .gallery__item img { border-color: #F4F0FF; } }
@media (prefers-reduced-motion: no-preference) {
  .gallery__item img { transition: rotate 0.3s ease, translate 0.3s ease; }
  .gallery__item img:hover { rotate: 0deg; translate: 0 -6px; }
}

.lock__caption { max-width: 330px; margin: 22px auto 0; font-size: 0.9375rem; font-weight: 700; text-align: center; color: var(--muted); }
.feature__media:has(.lock) { flex-direction: column; align-items: center; }