/* diginoone — l'accueil : la rue vivante */
/* L'accueil remplit tout l'écran ; le bouton « Découvrir la suite » montre que la page continue */
.stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); color: var(--cream); }
.mark { color: var(--yellow); font-style: normal; }
.dots--clair i { background: var(--yellow); }
.dots--clair i + i { background: var(--cream); box-shadow: none; }
.btn--clair { border-color: var(--cream); color: var(--cream); background: transparent; }
.btn--clair::before { background: var(--cream); }
.btn--clair:hover { color: var(--ink); }
#arrivee { z-index: 1; object-fit: fill; }
.lit { z-index: 2; }
.street > img:first-child { z-index: 0; }
#pluie { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
/* Le dégradé continue sous le ciel de la photo : aucune cassure visible entre les deux */
.stage { background: linear-gradient(#0E0E12, #1C1D3D calc(100% - 42.4vw), #3F4180 calc(100% - 27vw)); }
.rue { position: absolute; left: 0; right: 0; bottom: 0; overflow-x: auto; overscroll-behavior-x: none; scrollbar-width: none; }
.rue::-webkit-scrollbar { display: none; }
.street { position: relative; width: 100%; min-width: 980px; aspect-ratio: 2357 / 1000; margin: 0 auto; container-type: inline-size; -webkit-mask-image: linear-gradient(transparent, rgba(0, 0, 0, .1) 5%, rgba(0, 0, 0, .4) 11%, rgba(0, 0, 0, .8) 18%, #000 25%); mask-image: linear-gradient(transparent, rgba(0, 0, 0, .1) 5%, rgba(0, 0, 0, .4) 11%, rgba(0, 0, 0, .8) 18%, #000 25%); }
.street img, #arrivee { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Chaque commerce s'allume seul : la photo allumée n'est visible que dans sa colonne */
.lit { opacity: 0; transition: opacity .35s var(--ease); -webkit-mask-image: var(--m); mask-image: var(--m); }
.lit.on { opacity: 1; }
.shop { position: absolute; z-index: 4; bottom: 15%; height: 62%; border: 0; padding: 0; background: none; cursor: pointer; }
.shop span { position: absolute; left: 50%; bottom: -14px; padding: 9px 17px; border: 1.5px solid rgba(241, 203, 28, .75); border-radius: 999px; background: rgba(14, 14, 18, .86); color: #fff; font: 700 .95rem/1 var(--f-body); white-space: nowrap; transform: translateX(-50%); transition: background-color .25s, color .25s, border-color .25s; }
.shop:hover span { border-color: var(--cream); background: var(--cream); color: var(--ink); }
.shop[aria-pressed="true"] span { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
/* L'enseigne de la dernière vitrine : le nom tapé par le visiteur */
.enseigne { position: absolute; z-index: 3; left: 77.5%; width: 20.5%; top: 53.2%; height: 3.2%; display: grid; place-items: center; overflow: hidden; font: 700 1.02cqw/1 var(--f-head); letter-spacing: -.01em; color: var(--yellow); text-shadow: 0 0 .7em rgba(241, 203, 28, .9); white-space: nowrap; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.enseigne.on { opacity: 1; }

/* « Et le vôtre ? » : la façade en grand, au centre de l'écran */
.vit { position: absolute; z-index: 5; inset: 0; overflow: hidden; background: #0E0E12; opacity: 0; visibility: hidden; }
.vit__p { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); container-type: inline-size; }
.vit__p img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Bandeau d'enseigne mesuré sur la photo */
.vit__nom { position: absolute; left: 9.6%; width: 82.6%; top: 21.5%; height: 15.5%; display: flex; align-items: center; justify-content: center; overflow: hidden; font: 700 4.4cqw/1 var(--f-head); letter-spacing: -.02em; color: var(--c, var(--yellow)); text-shadow: 0 0 .35em color-mix(in srgb, currentColor 75%, transparent); white-space: nowrap; transition: color .3s; }
.vit__nom.vide { opacity: .9; text-shadow: none; }
/* Couleur trop sombre pour se lire sur le bandeau : c'est tout le bandeau qui prend la couleur */
.vit__nom.peint { background: var(--c); color: var(--on); text-shadow: none; box-shadow: inset 0 .6cqw 1.6cqw rgba(255, 214, 130, .34), inset 0 -.4cqw 1cqw rgba(0, 0, 0, .3); transition: background-color .3s; }
.vit__nom.peint.vide { opacity: 1; color: var(--on); }
/* L'enseigne se touche pour écrire : le champ invisible la recouvre, le nom s'y affiche en direct */
.vit__nom.vide::before { content: "✎"; margin-right: .35em; }
.vit__nom.ecrit::after { content: ""; width: .07em; height: 1em; margin-left: .08em; background: currentColor; animation: curseur 1s steps(2) infinite; }
.vit__saisie { position: absolute; z-index: 2; left: 9.6%; top: 21.5%; width: 82.6%; height: 15.5%; padding: 0; border: 0; border-radius: 0; background: none; color: transparent; caret-color: transparent; cursor: text; }
.vit__saisie::selection { background: transparent; color: transparent; }
.vit__saisie:focus, .vit__saisie:hover { outline: 2px dashed rgba(241, 203, 28, .7); outline-offset: -6px; }
.vit__ok { display: none; }
.saisie-nom .vit__ok { position: absolute; z-index: 3; left: 50%; top: 42%; display: block; min-height: 44px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--yellow); color: var(--ink); font: 700 1rem/1 var(--f-body); transform: translateX(-50%); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); cursor: pointer; }
.retour { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--cream); color: var(--ink); font: 700 1rem/1.1 var(--f-body); cursor: pointer; transition: background-color .2s var(--ease); }
.retour:hover { background: var(--yellow); }
.taille { min-height: 42px; padding: 0 14px; border: 1.5px solid rgba(246, 243, 234, .45); border-radius: 999px; background: none; color: var(--cream); font: 600 .92rem/1.1 var(--f-body); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.taille:hover { border-color: var(--yellow); color: var(--yellow); }
.taille[hidden] { display: none; }

.intro { position: absolute; z-index: 6; top: clamp(80px, 9vh, 104px); left: 0; right: 0; padding: 0 16px; text-align: center; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 18px rgba(0, 0, 0, .75); transition: opacity .4s var(--ease), transform .4s var(--ease); }
/* Voile sombre derrière le texte : il reste lisible même par-dessus le ciel clair et les toits */
.intro::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -130px; bottom: -40px; width: min(1180px, 100vw); transform: translateX(-50%); background: radial-gradient(closest-side, rgba(10, 10, 14, .82), rgba(10, 10, 14, .62) 62%, transparent); pointer-events: none; }
.intro .btn { text-shadow: none; }
.intro.off { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.intro h1 { font-size: clamp(1.6rem, 3.1vw, 2.8rem); }
.intro h1 .eyebrow { display: flex; width: fit-content; margin: 0 auto 12px; padding: 6px 18px; border: 1.5px solid var(--yellow); border-radius: 999px; color: #fff; }
.intro .h1-main { display: block; max-width: 24ch; margin: 0 auto; }
.intro .lead { max-width: 44em; margin: 12px auto 16px; color: #fff; font-size: clamp(1.02rem, 1.35vw, 1.18rem); font-weight: 500; line-height: 1.5; }
.intro .actions { justify-content: center; }

/* Le téléphone */
.phone { position: absolute; z-index: 7; top: 88px; left: 0; width: 214px; height: min(58vh, 440px); padding: 7px; border-radius: 30px; background: #0B0B09; box-shadow: 0 0 0 1px rgba(246, 243, 234, .16), 0 26px 60px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(24px); pointer-events: none; transition: width .45s var(--ease), height .45s var(--ease); }
.phone.on { pointer-events: auto; }
.tel-barre, .tel-agrandir { display: none; }
@media (min-width: 761px) {
  .phone.big { --h: min(72vh, 640px); width: calc(var(--h) * .47); height: var(--h); border-radius: 38px; }
  .phone.big .ecran { border-radius: 31px; font-size: clamp(12px, calc(var(--h) * .022), 14px); }
  /* « Et le vôtre » n'a pas d'étiquettes à éviter en bas : il va plus loin */
  .phone.big.vous { --h: min(82vh, 680px); }
}
.ecran { position: relative; height: 100%; overflow: hidden; border-radius: 24px; background: var(--cream); color: var(--ink); font: 400 12px/1.4 var(--f-body); }
.screen { position: relative; height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; touch-action: pan-y; }
.screen::-webkit-scrollbar { display: none; }
.screen h2, .screen h3 { font-family: var(--f-head); font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.12; }
.screen p { margin: 0; }
.m-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .55em; padding: 1.05em .9em .7em; background: var(--c); color: var(--on); }
.m-top b { display: grid; place-items: center; width: 2em; height: 2em; flex: none; border-radius: 50%; background: var(--on); color: var(--c); font: 700 .86em/1 var(--f-head); }
.m-top span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .86em/1.1 var(--f-head); }
.m-burger { width: 1.9em; height: 1.9em; flex: none; border: 0; border-radius: 6px; padding: 0; background: none; color: inherit; font-size: 1.15em; cursor: pointer; }
.m-menu { display: none; position: sticky; top: 3.4em; z-index: 4; background: var(--ink); }
.m-menu.on { display: grid; }
.m-menu button { padding: .75em .9em; border: 0; border-top: 1px solid rgba(246, 243, 234, .14); background: none; color: var(--cream); font: 600 1em var(--f-body); text-align: left; cursor: pointer; }
.m-tag { position: absolute; z-index: 3; top: 4.2em; right: .7em; padding: .2em .6em; border-radius: 999px; background: rgba(24, 23, 15, .9); color: var(--cream); font-size: .84em; font-weight: 600; }
.m-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .45em; min-height: 17em; padding: 1em .9em; background: var(--ph, none) center / cover, #3a382c; color: #fff; }
.m-vide { position: absolute !important; left: 50%; top: 22%; cursor: pointer; transform: translateX(-50%); padding: .4em .8em; border: 2px dashed rgba(255, 255, 255, .7); border-radius: .6em; background: rgba(10, 10, 14, .82); color: #fff; font-size: .9em; font-weight: 600; white-space: nowrap; }
.m-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 25%, rgba(0, 0, 0, .78)); }
.m-hero > * { position: relative; }
.m-hero h2 { font-size: 1.5em; }
.m-open { display: inline-flex; align-items: center; gap: .45em; align-self: flex-start; padding: .25em .6em; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: .9em; font-weight: 600; }
.m-open i { width: .55em; height: .55em; border-radius: 50%; background: #B5452B; }
.m-open.is-on i { background: #2C9A5B; animation: pouls 1.6s infinite; }
@keyframes pouls { 50% { opacity: .35; } }
.m-sec { padding: 1.3em .9em; border-bottom: 1px solid rgba(24, 23, 15, .1); }
.m-sec h3 { font-size: 1.12em; margin-bottom: .7em; }
.m-item { display: flex; align-items: center; gap: .6em; padding: .5em 0; border-top: 1px solid rgba(24, 23, 15, .08); }
.m-item span { flex: 1; }
.m-item button { width: 1.9em; height: 1.9em; border: 0; border-radius: 50%; background: var(--c); color: var(--on); font: 700 1em var(--f-body); cursor: pointer; }
.m-gal { display: grid; grid-template-columns: 1fr 1fr; gap: .35em; }
.m-ph { aspect-ratio: 4 / 3; border-radius: .6em; background: var(--ph) center / cover; }
.m-ph:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.m-ph.vide { display: grid; place-items: center; border: 2px dashed rgba(24, 23, 15, .3); color: rgba(24, 23, 15, .6); font-size: .9em; font-weight: 600; text-align: center; padding: .5em; }
.m-note { display: flex; align-items: center; gap: .55em; margin-bottom: .6em; }
.m-note strong { font: 700 1.8em/1 var(--f-head); }
.m-note small { display: block; font-size: .86em; opacity: .7; }
.m-stars { color: #E2A400; letter-spacing: .06em; }
.m-avis { padding: .7em; margin-top: .45em; border-radius: .6em; background: #fff; }
.m-avis b { display: block; }
.m-hours { display: grid; gap: .15em; }
.m-hours div { display: flex; justify-content: space-between; padding: .22em .45em; border-radius: .4em; }
.m-hours .auj { background: var(--c); color: var(--on); font-weight: 700; }
.m-map { position: relative; height: 9em; overflow: hidden; border-radius: .6em; background: #E8E3D3; }
.m-map svg { width: 100%; height: 100%; display: block; }
.m-map i { position: absolute; left: 50%; top: 46%; width: 1.3em; height: 1.3em; margin: -1.3em 0 0 -.65em; border-radius: 50% 50% 50% 0; background: var(--c); box-shadow: 0 0 0 2px var(--on); transform: rotate(-45deg); }
.m-link { display: block; margin-top: .55em; padding: .7em; border: 2px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font: 600 1em var(--f-body); text-align: center; cursor: pointer; }
.m-form { display: grid; gap: .4em; }
.m-form input, .m-form textarea { width: 100%; padding: .6em; border: 1px solid rgba(24, 23, 15, .24); border-radius: .5em; background: #fff; font: 400 1em var(--f-body); color: var(--ink); }
.m-send { padding: .7em; border: 0; border-radius: 999px; background: var(--c); color: var(--on); font: 600 1em var(--f-body); cursor: pointer; }
.m-foot { padding: 1em .9em 4.6em; background: var(--ink); color: var(--muted-on-ink); font-size: .9em; }
.m-bar { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: 1fr 1.5fr; gap: .4em; padding: .55em; background: rgba(246, 243, 234, .94); backdrop-filter: blur(6px); }
.m-bar button { padding: .65em .3em; border: 0; border-radius: 999px; background: var(--ink); color: var(--cream); font: 600 .95em/1.1 var(--f-body); cursor: pointer; }
.m-bar button + button { background: var(--c); color: var(--on); }
.m-peek { position: sticky; bottom: 4em; z-index: 6; display: block; width: max-content; margin: -2.4em auto 0; padding: .3em .8em; border-radius: 999px; background: var(--ink); color: var(--yellow); font-size: .9em; font-weight: 600; pointer-events: none; transition: opacity .3s; }
.m-peek.off { opacity: 0; }
.m-hero, .m-ph:not(.vide) { cursor: zoom-in; }
.m-panier { position: relative; width: 1.9em; height: 1.9em; flex: none; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.m-panier svg { display: block; width: 1.45em; height: 1.45em; margin: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-panier i { position: absolute; top: -.25em; right: -.3em; min-width: 1.35em; height: 1.35em; padding: 0 .2em; border-radius: 999px; background: var(--on); color: var(--c); font: 700 .8em/1.35em var(--f-body); }
.m-panier i:empty { display: none; }
.m-qte { color: var(--ink); font-style: normal; font-weight: 700; white-space: nowrap; }
.m-qte:empty { display: none; }

/* Par-dessus le site du téléphone : le panier, puis les photos en grand */
.m-calque { position: absolute; z-index: 9; inset: 0; overflow-y: auto; background: var(--cream); scrollbar-width: none; overscroll-behavior: contain; }
.m-calque::-webkit-scrollbar { display: none; }
.m-calque h3 { margin: 0 0 .6em; font: 700 1.12em/1.12 var(--f-head); letter-spacing: -.02em; }
.m-vue-haut { position: sticky; top: 0; z-index: 2; padding: 1.05em .9em .7em; background: var(--c); color: var(--on); font-weight: 600; }
.m-vue-haut button { padding: 0; border: 0; background: none; color: inherit; font: 600 1em/1.2 var(--f-body); cursor: pointer; }
.m-corps { padding: 1em .9em 1.4em; }
.m-ligne { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3em .6em; padding: .5em 0; border-top: 1px solid rgba(24, 23, 15, .08); }
.m-ligne span:first-child { grid-column: 1 / -1; }
.m-qtes { display: flex; align-items: center; gap: .45em; }
.m-qtes button { width: 1.9em; height: 1.9em; padding: 0; border: 0; border-radius: 50%; background: var(--c); color: var(--on); font: 700 1em/1 var(--f-body); cursor: pointer; }
.m-total { display: flex; justify-content: space-between; margin-bottom: 1.2em; padding-top: .6em; border-top: 2px solid var(--ink); font-size: 1.08em; font-weight: 700; }
.m-retrait { margin: 0 0 .7em; padding: .6em .7em; border-radius: .6em; background: #fff; }
.m-choix { display: flex; flex-wrap: wrap; gap: .35em; margin-bottom: .7em; }
.m-choix button { padding: .45em .7em; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font: 600 .92em/1.1 var(--f-body); cursor: pointer; }
.m-choix button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.m-exemple { margin-top: .7em; font-size: .86em; opacity: .75; }
.m-label { margin-bottom: .35em; font-weight: 600; }
.m-recu { margin: .5em 0 0; padding: .6em .7em .6em 1.8em; border-radius: .6em; background: #fff; font-weight: 600; }
.m-calque.appel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; padding: 1.5em 1.2em; background: #0B0B09; color: var(--cream); text-align: center; }
.m-calque.appel h3 { margin: 0; font-size: 1.3em; }
.m-appel-rond { position: relative; display: grid; place-items: center; width: 6em; height: 6em; margin: 1em 0 .8em; border-radius: 50%; background: var(--c); color: var(--on); }
.m-appel-rond b { position: relative; font: 700 2.4em/1 var(--f-head); }
.m-appel-rond::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c); opacity: .5; animation: onde 1.6s var(--ease) infinite; }
@keyframes onde { to { opacity: 0; transform: scale(1.7); } }
.m-raccroche { min-height: 3.4em; margin-top: 1.6em; padding: 0 1.8em; border: 0; border-radius: 999px; background: #C8352B; color: #fff; font: 700 1em/1 var(--f-body); cursor: pointer; }
.m-corps .m-link { width: 100%; margin-top: 1em; }
.m-calque.photo { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: #0B0B09; color: var(--cream); }
.m-photo-haut, .m-photo-bas { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .9em; font-weight: 600; }
.m-photo-haut button { padding: .35em .7em; border: 0; border-radius: 999px; background: var(--cream); color: var(--ink); font: 600 .95em/1.1 var(--f-body); cursor: pointer; }
.m-photo-bas { padding-top: .5em; font-size: .9em; }
.m-photo-bas span { text-align: center; line-height: 1.3; }
.m-photo-bas button { width: 2.6em; height: 2.6em; flex: none; padding: 0; border: 0; border-radius: 50%; background: rgba(246, 243, 234, .16); color: var(--cream); font: 700 1.2em/1 var(--f-body); cursor: pointer; }
.m-photo { min-height: 0; overflow: hidden; }
.m-photo img { width: 100%; height: 100%; object-fit: contain; touch-action: pan-y; user-select: none; cursor: zoom-in; }
.m-photo.zoom img { object-fit: cover; touch-action: none; cursor: zoom-out; }
.m-calque[hidden] { display: none; }

/* Le panneau à côté du téléphone */
.try { position: absolute; z-index: 7; top: 88px; left: 0; display: flex; flex-direction: column; gap: 9px; width: 280px; max-height: calc(100vh - 104px); overflow-y: auto; padding: 16px; border-radius: 18px; background: rgba(24, 23, 15, .84); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; }
.try.on { pointer-events: auto; }
.try label, .try .lab { font-weight: 600; font-size: .92rem; }
.try input { min-height: 44px; padding: 0 12px; border: 2px solid var(--yellow); border-radius: 10px; background: var(--cream); color: var(--ink); font: 500 1rem var(--f-body); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips[hidden] { display: none; }
.chips button { padding: 7px 11px; border: 1px solid rgba(246, 243, 234, .35); border-radius: 999px; background: none; color: var(--cream); font: 600 .84rem/1 var(--f-body); cursor: pointer; }
.chips button[aria-pressed="true"] { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
.ajout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ajout[hidden] { display: none; }
.ajout__btn { padding: 9px 13px; border-radius: 999px; background: var(--yellow); color: var(--ink); font: 600 .86rem/1 var(--f-body) !important; cursor: pointer; }
.ajout__file { position: absolute; width: 1px !important; height: 1px; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.ajout__moins { padding: 4px 0; border: 0; background: none; color: var(--cream); font: 500 .8rem/1 var(--f-body); text-decoration: underline; cursor: pointer; }
.ajout__moins[hidden] { display: none; }
.ajout__info { flex-basis: 100%; margin: 0; color: var(--muted-on-ink); font-size: .78rem; line-height: 1.3; }
.sw { display: flex; flex-wrap: wrap; gap: 8px; }
/* Une flèche sur les listes qui défilent ; au bout, elle se retourne et ramène au début */
.defile { position: relative; min-width: 0; }
.defile__suite, .rue-fleche { display: none; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--yellow); color: var(--ink); box-shadow: 0 3px 10px rgba(0, 0, 0, .45); cursor: pointer; }
.defile__suite { position: absolute; z-index: 2; right: -2px; top: 50%; width: 30px; height: 30px; margin-top: -15px; }
.defile__suite svg, .rue-fleche svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.defile__suite.fin svg, .rue-fleche[data-sens="-1"] svg { transform: rotate(180deg); }
@media (max-width: 760px) {
  /* Deux flèches sur la rue, même commerce ouvert, sauf devant la vitrine d'« Et le vôtre » qui la recouvre */
  .rue-fleche { position: absolute; z-index: 6; bottom: calc(44px + 18svh); display: grid; width: 38px; height: 38px; animation: glisse 1.8s var(--ease) infinite; }
  .rue-fleche[data-sens="-1"] { left: 8px; --sens: -1; }
  .rue-fleche[data-sens="1"] { right: 8px; --sens: 1; }
  .rue-fleche[hidden], .a-vitrine .rue-fleche { display: none; }
}
@keyframes glisse { 50% { transform: translateX(calc(var(--sens, 1) * 4px)); } }
.libre { position: relative; width: 28px; height: 28px; overflow: hidden; border: 2px solid rgba(246, 243, 234, .4); border-radius: 50%; background: conic-gradient(#E5484D, #F1CB1C, #2C9A5B, #2F7FD6, #8E4EC6, #E5484D); cursor: pointer; }
.libre.on { border-color: var(--cream); box-shadow: 0 0 0 2px var(--yellow); }
.libre input { position: absolute; inset: -6px; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.sw button { width: 28px; height: 28px; padding: 0; border: 2px solid rgba(246, 243, 234, .4); border-radius: 50%; background: var(--b); cursor: pointer; }
.sw button[aria-pressed="true"] { border-color: var(--cream); box-shadow: 0 0 0 2px var(--yellow); }


@media (max-width: 760px) {
  .stage { background: linear-gradient(#0E0E12, #23244A calc(100% - 42svh)); }
  .street { width: auto; height: 42vh; height: 42svh; aspect-ratio: 2357 / 1000; min-width: 0; }
  .enseigne { font-size: 1.02cqw; }
  .vit { top: auto; height: 44svh; background: linear-gradient(transparent, #0E0E12 30%); }
  .vit__p { top: auto; bottom: 0; width: 128vw; transform: translateX(-50%); }
  /* Pendant la saisie, la vitrine couvre l'écran et reste collée en haut de la partie visible, quoi que fassent le clavier et la page */
  .saisie-nom .vit { position: fixed; z-index: 400; top: var(--haut, 0px); left: 0; right: 0; bottom: auto; height: 100lvh; background: #0E0E12; touch-action: none; animation: saisie .2s ease-out; }
  .saisie-nom .vit__p { top: 0; bottom: auto; }
  /* Le titre tient sur deux lignes et le surtitre sur une seule, à toutes les largeurs */
  /* Le texte d'accueil se pose sur le toit : le bas des boutons s'arrête au-dessus des commerces */
  .intro { top: auto; bottom: calc(100svh - var(--toit) + 6px); }
  .intro h1 { font-size: min(4.85vw, 1.5rem); }
  .intro h1 .eyebrow { margin-bottom: clamp(24px, 5svh, 40px); padding: 6px 12px; font-size: min(3.08vw, .8rem); letter-spacing: .04em; white-space: nowrap; }
  .intro h1 .dots { display: none; }
  .intro .lead { margin: 10px auto 14px; font-size: .96rem; line-height: 1.45; }
  .intro .actions { gap: 8px; }
  .intro .actions .btn { width: auto; min-height: 44px; padding: 0 18px; font-size: .92rem; }
  /* Le téléphone garde de vraies proportions et s'arrête sur le toit : la rue est calée en bas de l'accueil, le haut du toit à 16 % de sa hauteur */
  .stage { --toit: calc(100svh - 44px - 35.3svh); --tel-h: clamp(240px, calc(var(--toit) - 66px), 380px); --tel-l: calc(var(--tel-h) * .48); --tel-haut: max(66px, calc(var(--toit) - var(--tel-h))); }
  .phone { top: var(--tel-haut); left: 12px !important; width: var(--tel-l); height: var(--tel-h); padding: 6px; border-radius: 26px; transition: none; }
  .ecran { border-radius: 20px; font-size: clamp(9px, calc(var(--tel-l) * .066), 12px); }
  .tel-agrandir { position: absolute; z-index: 8; right: -8px; bottom: -8px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); color: var(--ink); cursor: pointer; }
  .tel-agrandir svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  /* Le site en grand : tout l'écran, avec de quoi le réduire au-dessus */
  .phone.grand { position: fixed; z-index: 300; inset: 8px; left: 8px !important; display: flex; flex-direction: column; width: auto; height: auto; padding: 0 7px 7px; border-radius: 30px; }
  .phone.grand .tel-barre { display: flex; flex: none; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 4px 0 12px; color: var(--cream); font: 600 .92rem/1 var(--f-body); }
  .tel-barre button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--yellow); color: var(--ink); font: 700 .92rem/1 var(--f-body); cursor: pointer; }
  .phone.grand .ecran { flex: 1; min-height: 0; height: auto; border-radius: 22px; font-size: min(3.5vw, 15px); }
  .phone.grand .screen { overscroll-behavior: contain; }
  .phone.grand .tel-agrandir { display: none; }
  .tel-grand { overflow: hidden; }
  .try { top: var(--tel-haut); left: auto !important; right: 8px; width: calc(100vw - var(--tel-l) - 32px); padding: 9px; gap: 6px; }
  .try label { font-size: .87rem; }
  .retour { min-height: 44px; padding: 0 10px; font-size: .9rem; }
  .taille { display: none; }
  .try input { min-height: 44px; min-width: 0; width: 100%; padding: 0 8px; font-size: .9rem; }
  .try .lab { display: none; }
  /* Les couleurs tiennent sur une ligne qu'on fait défiler */
  .sw { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -9px; padding-inline: 9px 42px; -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent); mask-image: linear-gradient(90deg, #000 76%, transparent); }
  .sw::-webkit-scrollbar { display: none; }
  .sw button, .libre { flex: none; width: 34px; height: 34px; }
  .defile__suite:not([hidden]) { display: grid; }
  .defile:has(> .chips[hidden]) { display: none; }
  .descendre { min-height: 44px; padding: 0 18px; }
  .chips button { min-height: 38px; padding: 0 11px; font-size: .87rem; }
  /* Les activités défilent sur une seule ligne pour ne pas cacher l'enseigne */
  .try .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -9px; padding-inline: 9px 42px; -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent); mask-image: linear-gradient(90deg, #000 76%, transparent); }
  .try .chips::-webkit-scrollbar { display: none; }
  .try .chips button { flex: none; }
  .ajout__btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; padding: 0 10px; font-size: .84rem !important; }
  .ajout__info { font-size: .8rem; }
}
  
@keyframes curseur { 50% { opacity: 0; } }

/* L'indication pour descendre */
.descendre { position: absolute; z-index: 8; left: 50%; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--yellow); color: var(--ink); font: 600 .92rem/1 var(--f-body); text-decoration: none; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.descendre .ico { width: 1.1em; height: 1.1em; animation: rebond 1.5s var(--ease) infinite; }
@keyframes rebond { 50% { transform: translateY(4px); } }
@media (max-width: 760px) {
  .rue { bottom: 44px; }
  .vit { bottom: 44px; }
  }
@media (prefers-reduced-motion: reduce) {
  .descendre .ico { animation: none; }
}

/* Écrans très courts : le texte d'accueil se limite au titre et aux boutons */
@media (max-width: 760px) and (max-height: 600px) {
  .intro .lead { display: none; }
}

/* Petits téléphones : le panneau se fait plus compact pour laisser voir l'enseigne */
@media (max-width: 760px) and (max-height: 720px) {
  .ajout__info { display: none; }
  .try { gap: 5px; }
}

/* Le guide de l'accueil : la souris qui clique sur le Coiffeur et la vague sur les étiquettes, tant qu'aucun commerce n'est ouvert */
.guide { position: absolute; z-index: 5; left: 49.6%; bottom: calc(15% + 80px); padding: 9px 16px; border-radius: 999px; background: rgba(10, 10, 14, .9); color: var(--yellow); font: 700 1rem/1 var(--f-body); white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.guide__souris { position: absolute; left: calc(50% - 9px); top: calc(100% + 10px); width: 40px; height: 40px; overflow: visible; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.guide__souris path { fill: #fff; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; transform-origin: 5.5px 3.2px; }
.guide__souris circle { fill: none; stroke: var(--yellow); stroke-width: 1.4; opacity: 0; transform-origin: 5.5px 3.2px; }
.guide__doigt { display: none; }
.a-choisi .guide { display: none; }
.pret .guide__souris { animation: souris 2.4s ease-in-out infinite; }
.pret .guide__souris path { animation: clic 2.4s ease-in-out infinite; }
.pret .guide__souris circle { animation: onde 2.4s ease-out infinite; }
@keyframes souris { 0%, 100% { transform: translate(12px, 8px); } 35%, 75% { transform: none; } }
@keyframes clic { 0%, 40%, 58%, 100% { transform: none; } 48% { transform: scale(.82); } }
@keyframes onde { 0%, 46% { opacity: 0; transform: scale(.3); } 52% { opacity: 1; } 78%, 100% { opacity: 0; transform: scale(1.5); } }
.pret .shop span { animation: vague 6s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .26s); }
@keyframes vague {
  0%, 12%, 100% { background: rgba(14, 14, 18, .86); color: #fff; transform: translateX(-50%) scale(1); }
  5% { background: var(--yellow); color: var(--ink); transform: translateX(-50%) scale(1.12); }
}
.a-choisi .shop span, .shop:hover span, .shop[aria-pressed="true"] span { animation: none !important; }
@media (min-width: 761px) and (max-width: 880px) {
  .guide { display: none; }
}
/* Sur téléphone, le guide est un doigt qui touche la façade du Coiffeur : au-dessus de l'étiquette, il ne passe jamais sous « Découvrir la suite » */
@media (max-width: 760px) {
  .guide { bottom: calc(15% + 24px); padding: 0; background: none; }
  .guide span, .guide__souris { display: none; }
  .guide__doigt { position: absolute; left: -28px; bottom: 0; display: block; width: 58px; height: 58px; fill: #fff; stroke: var(--ink); stroke-width: .5; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .7)); }
  .pret .guide__doigt { animation: tape 1.5s ease-in-out infinite; }
}
@keyframes tape { 0%, 100% { transform: translateY(9px); } 45% { transform: translateY(-3px) scale(.92); } }
@keyframes saisie { from { opacity: 0; } }
@media (max-width: 880px) {
  .shop span { padding: 7px 12px; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pret .guide__souris, .pret .guide__souris path, .pret .guide__souris circle, .pret .guide__doigt, .pret .shop span, .saisie-nom .vit { animation: none; }
}