/* ============ Mobile : finitions d'app, parcours plus court, gestes naturels ============ */

/* Socle « app » : pas de flash au toucher, réponse immédiate, pas de sélection sur les contrôles */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button, a, [role="button"], [role="tab"], .token, .wpin, .dm-tab, .vote-opt, .city-btns button, .wmap-chips button {
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
input, textarea, select { font-size: 16px; }
.pill:active, .app-btn:active, .vote-opt:active, .dm-tab:active, .city-btns button:active, .wmap-chips button:active, .wpin:active, .menu-links a:active { transform: scale(.97); }
.pill, .vote-opt, .dm-tab, .wmap-chips button, .menu-links a { transition: transform .12s var(--ease-out), background-color .3s, color .3s, opacity .5s; }

/* Bouton « Être prévenu » toujours à portée de pouce (téléphone uniquement) */
.mcta { display: none; }
@media (max-width: 760px) {
  .mcta {
    position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 58;
    display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 24px; border-radius: 999px;
    background: var(--forest); color: var(--ivory); font-size: .95rem; font-weight: 500; text-decoration: none;
    box-shadow: 0 18px 36px -14px rgba(16, 36, 28, .7), 0 0 0 1px rgba(244, 239, 228, .08) inset;
    transform: translate(-50%, 140%); opacity: 0; transition: transform .5s var(--ease-drawer), opacity .4s;
  }
  .mcta i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--g-amber); color: var(--ink); font-size: .95rem; }
  .mcta.is-on { transform: translate(-50%, 0); opacity: 1; }
  .mcta.is-on:active { transform: translate(-50%, 0) scale(.97); }
  body.menu-open .mcta { opacity: 0; pointer-events: none; }
}

@media (max-width: 760px) {
  /* En-tête : sous l'encoche, un peu plus compact */
  .nav { padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; }
  .nav.is-solid { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
  .menu { padding-top: calc(88px + env(safe-area-inset-top, 0px)); }
  .toast-copy { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* Respiration : des parties plus proches, sans grands vides */
  .block { padding-top: 64px; padding-bottom: 64px; }
  .block-head { margin-bottom: 26px; }
  .block-title { font-size: clamp(1.75rem, 7.6vw, 2.2rem); }
  .brief { padding: 28px 0 8px; }
  .trust { padding: 0 0 56px; }
  .bagshow { padding-bottom: 40px; }
  .roadmap.block { padding-bottom: 56px; }
  .dm-inner { padding-top: 64px; padding-bottom: 64px; }

  /* Carrousels à glisser du doigt : le principe, la confiance */
  .brief-list, .trust-list {
    display: flex !important; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 20px 6px; margin: 0; scroll-padding: 0 20px;
  }
  .brief-list::-webkit-scrollbar, .trust-list::-webkit-scrollbar { display: none; }
  .brief-list > li, .trust-list > li { flex: 0 0 82%; scroll-snap-align: start; }
  .brief-list > li { gap: 12px; }
  .brief-img { aspect-ratio: 4 / 3; }
  .trust-list { border-radius: 0; background: none; box-shadow: none; }
  .trust-list > li { padding: 12px; border-radius: 22px; background: #fffdf8; box-shadow: 0 16px 30px -24px rgba(16, 36, 28, .6); }
  .trust-img { aspect-ratio: 4 / 3; border-radius: 14px; }
  .m-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
  .m-dots i { width: 6px; height: 6px; border-radius: 6px; background: rgba(19, 33, 27, .18); transition: width .35s var(--ease-out), background-color .3s; }
  .m-dots i.on { width: 20px; background: var(--forest); }
  .dm .m-dots i { background: rgba(244, 239, 228, .25); } .dm .m-dots i.on { background: var(--ivory); }
  .why-acc { padding-bottom: 0; }

  /* Où déposer : une fiche posée sur la carte, comme dans une app de cartes */
  .wmap { gap: 0; }
  .wmap-stage { min-height: 380px; border-radius: 24px; }
  .wmap-card { position: relative; z-index: 4; margin: -78px 12px 0; min-height: 0; display: grid; }
  .wcard { position: relative; grid-area: 1 / 1; flex-direction: row; align-items: center; gap: 14px; padding: 10px; border-radius: 20px; background: #fffdf8; box-shadow: 0 24px 40px -22px rgba(16, 36, 28, .55); }
  .wcard .card-img { flex: none; width: 92px; height: 92px; aspect-ratio: 1 !important; border-radius: 14px; box-shadow: none; }
  .wcard figcaption { padding: 0; }
  .wcard h3 { font-size: 1rem; }
  .wcard p { margin-top: 2px; font-size: .84rem; line-height: 1.45; }

  /* Commerçants : photo plus basse, texte plus proche */
  .shop { gap: 22px; }
  .shop-img { aspect-ratio: 4 / 3; }

  /* Le sac en scène : le sac se rapproche du texte */
  .bagdrop-stage { padding-top: calc(70px + env(safe-area-inset-top, 0px)); grid-template-rows: auto 1fr; }
  .bd-visual { height: auto; min-height: 0; align-self: stretch; place-items: center; }
  .bd-bagwrap { margin-bottom: 0; width: 88%; }
  .bd-items { top: 0; height: 45%; }

  /* Feuille de route : photos plus basses pour garder le fil */
  .road-list { gap: 22px; }
  .road-img { aspect-ratio: 2 / 1; margin-bottom: 10px; }

  /* Pied de page centré et aéré, au-dessus du bouton flottant */
  .footer { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .footer nav { justify-content: center; }
  .join { margin: 0 10px 10px; border-radius: 24px; }
  .wait-legal { font-size: .74rem; }
}

/* ============ Maquettes d'app sur téléphone : un grand écran qu'on parcourt sur place ============ */
.how-nav, .hn-hint { display: none; }
@media (max-width: 900px) {
  .how .how-steps { display: none; }
  .how .how-grid { gap: 0; }
  .how .phone-wrap { position: relative; top: auto; z-index: auto; margin: 0; padding: 8px 0 0; background: none; box-shadow: none; }
  .how .phone, .dm-phone .phone { --ps: .9; }
  .how-caption { min-height: 104px; margin-top: 18px; align-items: flex-start; }
  .how-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(420px, calc(100% - 40px)); margin: 14px auto 0; }
  .how-nav button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--forest); color: var(--ivory); font-size: 1.15rem; cursor: pointer; box-shadow: 0 12px 22px -14px rgba(16, 36, 28, .8); }
  .how-nav .hn-prev { background: #fffdf8; color: var(--forest); box-shadow: inset 0 0 0 1px rgba(19, 33, 27, .12); }
  .hn-dots { display: flex; gap: 6px; }
  .hn-dots i { width: 7px; height: 7px; border-radius: 7px; background: rgba(19, 33, 27, .18); transition: width .35s var(--ease-out), background-color .3s; }
  .hn-dots i.on { width: 22px; background: var(--forest); }
  .hn-hint { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; font-size: .8rem; color: var(--ink-soft); }
  .hn-hint i { color: var(--amber-deep); font-size: 1.05rem; }
  .how .phone { touch-action: pan-y; }
  .dm-phone .phone { touch-action: pan-y; }
}
@media (max-width: 360px) { .how .phone, .dm-phone .phone { --ps: .82; } }
@media (max-width: 900px) { .how .phone { --ps: .84; } .dm-phone .phone { --ps: .86; } .how-caption { min-height: 96px; margin-top: 14px; } .how-nav { margin-top: 10px; } }
@media (max-width: 900px) { .how .phone, .dm-phone .phone { will-change: auto; box-shadow: inset 0 0 0 1.5px #4d6d60, inset 0 0 0 3px #13241c, inset 0 0 0 6px #0b1712, 0 34px 50px -30px rgba(16, 36, 28, .55); } }

/* L'invitation de l'ouverture est un vrai bouton, facile à toucher */
.mask-hint { border: 0; background: rgba(19, 33, 27, .06); padding: 11px 18px; border-radius: 999px; font: 500 .84rem "Poppins", sans-serif; color: var(--ink-soft); cursor: pointer; }
.mask-hint:active { transform: translateX(-50%) scale(.96); }
@media (max-width: 760px) { .mask-hint { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); } }

/* L'histoire sur téléphone : la photo en entier, la carte du trajet à côté du choix de la ville */
@media (max-width: 900px) {
  .story { height: 400vh; }
  .story-stage { padding-top: calc(66px + env(safe-area-inset-top, 0px)); gap: 14px; }
  .scene-media { height: auto; aspect-ratio: 3 / 2; border-radius: 18px; }
  .city-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
  .city-pick .trip-map { position: static; flex: none; width: 118px; padding: 4px; border-radius: 12px; box-shadow: 0 10px 20px -14px rgba(16, 36, 28, .5); }
  .city-pick .trip-map svg { border-radius: 8px; }
  .scene-texts { min-height: 13rem; }
  .why-acc .card, .why-acc .card.is-open { height: min(420px, 58svh); }
}

/* ============ Demain : chaque idée mise en valeur, navigation claire ============ */
.dm-num { position: absolute; right: 18px; top: 18px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: rgba(244, 239, 228, .4); }
.dm-tab.is-active .dm-num { color: var(--amber-hi); }
.dm-tab { padding-right: 44px; }
.dm-tab.is-active { background: rgba(244, 239, 228, .1); box-shadow: inset 3px 0 0 var(--amber); }
.dm-tab.is-active b { font-size: 1.2rem; }
.dm.no-auto .dm-bar { display: none; }
.dm-nav { display: none; }
@media (max-width: 900px) {
  .dm-num { display: none; }
  .dm-tab { padding-right: 14px; box-shadow: none !important; }
  .dm-tab.is-active { background: rgba(244, 239, 228, .16); }
  .dm-tab.is-active b { font-size: .9rem; }
  .dm-caption { padding: 16px 18px 18px; border-radius: 22px; background: rgba(244, 239, 228, .09); box-shadow: inset 0 0 0 1px rgba(244, 239, 228, .1); }
  .dmc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .dmc-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--g-amber); color: var(--ink); font-size: 1.25rem; }
  .dmc-n { font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: rgba(244, 239, 228, .6); }
  .dm-caption b { font-size: 1.3rem; font-weight: 500; letter-spacing: -.02em; }
  .dm-caption p { margin-top: 6px; font-size: .93rem; }
  .dm-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
  .dm-nav button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(244, 239, 228, .12); color: var(--ivory); font-size: 1.15rem; cursor: pointer; }
  .dm-nav .dn-next { background: var(--g-amber); color: var(--ink); box-shadow: 0 12px 24px -14px rgba(199, 122, 44, .9); }
  .dn-dots { display: flex; gap: 6px; }
  .dn-dots i { width: 7px; height: 7px; border-radius: 7px; background: rgba(244, 239, 228, .25); transition: width .35s var(--ease-out), background-color .3s; }
  .dn-dots i.on { width: 22px; background: var(--ivory); }
  .dm-head .block-title { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
}
@media (max-width: 900px) {
  .dm-caption { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; margin-top: 12px; }
  .dmc-top { display: contents; }
  .dmc-ico { grid-row: 1; grid-column: 1; }
  .dmc-n { display: none; }
  .dm-caption b { grid-row: 1; grid-column: 2; font-size: 1.15rem; line-height: 1.2; }
  .dm-caption p { grid-column: 1 / -1; margin-top: 8px; font-size: .88rem; line-height: 1.45; }
  .dm-nav { margin-top: 10px; }
  .dm-nav button { width: 44px; height: 44px; }
  .dm-tabs { padding-bottom: 2px; }
  .dm-grid { gap: 10px; }
}
@media (max-width: 900px) and (max-height: 740px) {
  .dm-tabs { display: none !important; }
  .dm-caption p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dm-caption { padding: 12px 14px; }
  .how-caption p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hn-hint { display: none; }
}

/* ============ Ombres : aucune sous les photos et vidéos, un simple filet pour les cartes claires ============ */
.card-img, .shop-img, .scene-media, .brief-img, .road-img, .eco-img, .pack-media, .wmap-stage, .trust-img, .bag-frame, .wcard .card-img, .jr-mem-img { box-shadow: none !important; }
.road-list .is-now .road-img { box-shadow: 0 0 0 2px var(--amber) !important; }
.how-caption, .trust-list > li, .jr-mem, .jr-map { box-shadow: 0 0 0 1px rgba(19, 33, 27, .07) !important; }
@media (max-width: 760px) { .wcard { box-shadow: 0 0 0 1px rgba(19, 33, 27, .06), 0 14px 26px -20px rgba(16, 36, 28, .35) !important; } }
/* dernière maquette : la flèche « suivant » devient « voir la suite », en ambre */
.how-nav .hn-next.is-end { background: var(--amber); color: var(--forest-deep); }
.how-nav .hn-next i { transition: transform .3s var(--ease-out); }
.how-nav .hn-next.is-end i { animation: hn-nudge 1.6s var(--ease-out) infinite; }
@keyframes hn-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .how-nav .hn-next.is-end i { animation: none; } }

/* v9.9 : fondu d'entrée de « feetch » sur un calque à part, la plongée garde le masque */
.mask-in { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.js .hero .mask { opacity: 1; }
.js .hero .mask-in { opacity: 0; }
.js .hero .mask-hint { opacity: 1; }
.mh-in { display: inline-flex; align-items: center; gap: 8px; }
.js .hero .mh-in { opacity: 0; }
.no-mask .hero .mask-in { display: none; }

/* textes qui se remplacent : l'ancien s'efface vite, puis le nouveau arrive (plus de chevauchement) */
.scene-texts .scene-text { transition: opacity .28s var(--ease-out), transform .4s var(--ease-out); }
.scene-texts .scene-text.is-active { transition: opacity .7s var(--ease-out) .26s, transform .9s var(--ease-out) .26s; }
.pack-lines { display: grid; height: auto; }
.pack-lines .pack-line { position: relative; inset: auto; grid-area: 1 / 1; align-self: end; transition: opacity .25s var(--ease-out), transform .35s var(--ease-out); }
.pack-lines .pack-line.is-on { transition: opacity .6s var(--ease-out) .24s, transform .8s var(--ease-out) .24s; }
@media (max-width: 760px) {
  .pack-media { --txt: 96px; }
  .pack-lines { font-size: clamp(1.25rem, 5.6vw, 1.5rem); }
  .pack-lines .pack-line { max-width: none; }
}
.mask-in { will-change: opacity; }

/* Fin de chaque partie : « Ensuite · … » vers la suivante */
.next-cue { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px); margin: 8px auto 28px; padding: 6px 6px 6px 18px; border: 1px solid rgba(19, 33, 27, .1); border-radius: 999px; background: #fbf8f1; color: var(--ink); font: 400 .88rem "Poppins", sans-serif; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; box-shadow: 0 10px 24px -18px rgba(16, 36, 28, .45); transition: transform .16s var(--ease-out); }
.next-cue .nc-k { color: var(--ink-soft); }
.next-cue .nc-k::after { content: "·"; margin-left: 10px; opacity: .6; }
.next-cue .nc-t { font-weight: 600; color: var(--forest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-cue .nc-a { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--amber); color: var(--forest-deep); font-size: 1rem; transition: transform .3s var(--ease-out); }
.next-cue:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .next-cue:hover .nc-a { transform: translateY(3px); } }
@media (max-width: 760px) { .next-cue { margin: 4px auto 22px; font-size: .84rem; } }
.next-cue[hidden] { display: none; }
/* fin de parcours (valise, Demain) : même flèche ambrée vers le bas que la 6e maquette */
.pack-skip.is-end { background: var(--amber); color: var(--forest-deep); }
.pack-skip.is-end i, .dm-nav .dn-next.is-end i { animation: hn-nudge 1.6s var(--ease-out) infinite; }
.dm-nav .dn-next.is-end { background: var(--amber); color: var(--forest-deep); }
@media (prefers-reduced-motion: reduce) { .pack-skip.is-end i, .dm-nav .dn-next.is-end i { animation: none; } }
/* « Ensuite » plus discret : un simple lien, sans pastille */
.next-cue { gap: 8px; margin: 0 auto 24px; padding: 6px 4px; border: 0; background: none; box-shadow: none; font-size: .8rem; opacity: .8; transition: opacity .2s, transform .16s var(--ease-out); }
.next-cue .nc-k::after { margin-left: 8px; }
.next-cue .nc-t { font-weight: 500; color: var(--ink); }
.next-cue .nc-a { width: 26px; height: 26px; background: none; color: var(--forest); box-shadow: inset 0 0 0 1px rgba(19, 33, 27, .22); font-size: .85rem; }
@media (hover: hover) and (pointer: fine) { .next-cue:hover { opacity: 1; } }