/* La Grand-Rue de Villelibre (maquette du 2026-11-09), à parcourir comme Street View. Images 1184 × 896 ; tout est placé en % de l’image. */
:root { --encre: #1d2621; --papier: #fffdf8; --ombre: 0 10px 30px rgba(20, 16, 10, .28); --ratio: 1184 / 896; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: #2b2620; color: var(--encre); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }

/* La fenêtre : l'image tient toute la hauteur ; si l'écran est étroit (téléphone), on la fait glisser. */
.fenetre { position: fixed; inset: 0; overflow-x: auto; overflow-y: hidden; display: flex; justify-content: safe center;
  background: var(--flou) center / cover, #2b2620; scrollbar-width: none; overscroll-behavior: contain; }
.fenetre::-webkit-scrollbar { display: none; }
.scene { position: relative; flex: none; height: 100dvh; aspect-ratio: var(--ratio); container-type: inline-size;
  transform-origin: 50% 50%; transition: transform .6s cubic-bezier(.3, .7, .2, 1); box-shadow: 0 0 60px rgba(0, 0, 0, .45); }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; transition: filter 1.2s; }
.scene.regarde { transform: scale(var(--zoom, 2)); }

/* Le soir : la place s'assombrit, les fenêtres et les guirlandes brillent. */
.lueurs { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s; mix-blend-mode: screen; }
.lueurs i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 110, .75), rgba(255, 170, 70, .25) 55%, transparent); filter: blur(2px); }
body.soir .scene img { filter: brightness(.42) saturate(.8) contrast(1.08) hue-rotate(-8deg); }
body.soir .lueurs { opacity: 1; }
body.soir .fenetre { background: var(--flou) center / cover, #0f1013; }

/* Les lieux : une zone qu'on touche, une étiquette posée dessus */
.zones { position: absolute; inset: 0; pointer-events: none; } /* seuls les lieux captent le toucher : le panneau d'entrée, dessous, doit rester touchable */
.zone { pointer-events: auto; }
.zone { position: absolute; cursor: pointer; border-radius: 1.2cqw; outline: none; -webkit-tap-highlight-color: transparent; }
.zone::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .25cqw rgba(255, 255, 255, 0); transition: box-shadow .2s, background .2s; }
.zone:hover::after, .zone:focus-visible::after { box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .12); }
.etiquette { position: absolute; left: 50%; top: var(--dy, 6%); transform: translateX(-50%); width: max-content; max-width: 22cqw; text-align: center;
  background: var(--papier); color: var(--encre); border-radius: .7cqw; padding: .45cqw .95cqw .5cqw; box-shadow: var(--ombre);
  border-top: .4cqw solid var(--c, #2D5A3D); font: 800 clamp(10px, 1.25cqw, 16px)/1.15 system-ui, sans-serif; pointer-events: none; transition: transform .2s, opacity .3s; }
.etiquette small { display: block; font-weight: 600; color: #6a645b; font-size: .82em; margin-top: .15em; }
.zone.bord-droit .etiquette { left: auto; right: 0; transform: none; }
.zone.bord-gauche .etiquette { left: 0; transform: none; }
.zone:hover .etiquette { transform: translateX(-50%) translateY(-.3cqw); }
.zone.bord-droit:hover .etiquette, .zone.bord-gauche:hover .etiquette { transform: translateY(-.3cqw); }
/* Profil choisi : ses lieux ressortent, les autres s'effacent */
body[data-profil] .zone.efface .etiquette { opacity: .28; }
body[data-profil] .zone.choisi .etiquette { box-shadow: 0 0 0 .35cqw #fff, 0 0 2.2cqw .6cqw rgba(255, 230, 150, .9); animation: respire 1.8s ease-in-out infinite; }
@keyframes respire { 50% { box-shadow: 0 0 0 .35cqw #fff, 0 0 1.2cqw .2cqw rgba(255, 230, 150, .6); } }

/* En haut : la marque, l'accueil, le soir */
.haut { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0; pointer-events: none; }
.pastille { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 14px; border-radius: 999px; border: 0;
  background: rgba(22, 20, 16, .62); backdrop-filter: blur(6px); color: #fff; font: 800 14px/1 system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.marque { letter-spacing: .02em; }
.titre { margin: 0; text-align: center; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.titre strong { display: block; font-size: clamp(17px, 2.4vw, 24px); }
.titre span { font-size: clamp(12px, 1.5vw, 15px); opacity: .95; }

/* En bas : vous êtes… */
.profils { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 24px); padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(22, 20, 16, .62); backdrop-filter: blur(6px); }
.profils-titre { color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; }
.profils-liste { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.profils-liste::-webkit-scrollbar { display: none; }
.profils button { flex: none; border: 0; border-radius: 999px; padding: 8px 12px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 13px/1 system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.profils button[aria-pressed="true"] { background: #fff; color: var(--encre); }
.version-texte { position: fixed; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); z-index: 4; margin: 0; color: #fff; font-size: 12px; text-shadow: 0 1px 4px #000; }
.version-texte a { color: #fff; }

/* La carte de l'appli */
.voile { position: fixed; inset: 0; z-index: 8; background: rgba(10, 8, 6, .25); }
.carte { position: fixed; z-index: 9; left: 50%; top: 50%; width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); overflow: auto;
  transform: translate(-50%, -50%); background: var(--papier); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); animation: sort .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes sort { from { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(.2); opacity: 0; } }
.carte .lieu { margin: 0; padding: 16px 52px 0 18px; font-size: 13px; font-weight: 700; color: #7a7266; text-transform: uppercase; letter-spacing: .06em; }
.carte h2 { margin: 2px 52px 10px 18px; font-size: 20px; line-height: 1.2; }
.carte .fermer { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .06); font-size: 18px; cursor: pointer; }
.appli { margin: 0 12px 12px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.appli-tete { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.appli-tete .emoji { flex: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, .95); display: grid; place-items: center; font-size: 24px; }
.appli-tete strong { display: block; font-size: 19px; line-height: 1.15; }
.appli-tete .badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .25); font-size: 11px; font-weight: 700; vertical-align: middle; }
.appli p { margin: 12px 16px 4px; color: #3c3730; }
.appli .boutons { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 16px; }
.appli .boutons a { flex: 1 1 140px; text-align: center; text-decoration: none; padding: 11px 12px; border-radius: 12px; font-weight: 800; font-size: 15px; }
.appli .boutons .ouvrir { background: var(--c1); color: #fff; }
.appli .boutons .plus { background: #f1ede5; color: var(--encre); }

/* Téléphone : une bulle dit qu'on peut faire glisser la place */
.indice { position: fixed; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 999px; background: rgba(22, 20, 16, .75); color: #fff; font-weight: 700; font-size: 14px; pointer-events: none; transition: opacity .4s; }
.indice.part { opacity: 0; }
.sans-js { position: fixed; inset: auto 12px 12px; background: #fff; padding: 12px; border-radius: 12px; z-index: 10; }

@media (prefers-reduced-motion: reduce) { .scene, .scene img, .lueurs, .etiquette, .carte { transition: none !important; animation: none !important; } }

/* Téléphone : titre plus court, pas de lien « version texte » (la pastille Ecozone y mène) */
@media (max-width: 600px) {
  .titre strong { font-size: 16px; }
  .titre span { font-size: 12px; }
  .version-texte { display: none; }
  .profils { padding-left: 10px; }
  .profils-titre { font-size: 12px; }
  .profils button { padding: 7px 10px; font-size: 12px; }
}

/* ---------- Spécifique à la rue ---------- */
.fenetre { --flou: url(img/etape1-flou.webp); }
/* Marcher : la caméra plonge vers le fond de la rue, l'étape suivante arrive ; reculer fait l'inverse. */
.scene.part-avant { transform: scale(1.7); opacity: 0; transition: transform .5s cubic-bezier(.5, 0, .8, .4), opacity .45s ease-in; }
.scene.part-arriere { transform: scale(.8); opacity: 0; transition: transform .5s ease-in, opacity .45s ease-in; }
.scene.arrive-avant { transform: scale(.88); opacity: 0; transition: none; }
.scene.arrive-arriere { transform: scale(1.25); opacity: 0; transition: none; }
.scene { transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .45s ease-out; }
/* Le panneau d'entrée du bourg : le nom écrit sur le panneau blanc de l'image */
.nom-village { position: absolute; display: grid; place-items: center; transform: rotate(1.5deg); text-align: center;
  font: 800 2.15cqw/1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif; letter-spacing: .06em; color: #1b1b1b; }
.nom-village small { display: block; font-size: .42em; letter-spacing: .02em; font-weight: 700; margin-top: .35em; color: #333; }
.decor { position: absolute; inset: 0; pointer-events: none; transition: filter 1.2s; }
body.soir .decor { filter: brightness(.5); }
.lueurs-rue i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 110, .7), rgba(255, 170, 70, .22) 55%, transparent); mix-blend-mode: screen; opacity: 0; transition: opacity 1.2s; }
body.soir .lueurs-rue i { opacity: 1; }
/* Le plan de la rue : 4 étapes, celle où l'on est */
.titre { display: grid; justify-items: center; gap: 6px; }
.plan { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; pointer-events: auto; }
.plan button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); background: rgba(22, 20, 16, .55); color: #fff;
  font: 800 13px/1 system-ui, sans-serif; cursor: pointer; position: relative; }
.plan button[aria-current="step"] { background: #fff; color: var(--encre); }
.plan button .pastille-profil { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: #ffd75e; box-shadow: 0 0 0 2px rgba(22, 20, 16, .7); }
/* Avancer / reculer : sur les pavés, au-dessus de la barre des profils */
.marche { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); z-index: 5; display: flex; gap: 8px; }
.pas { border: 0; border-radius: 999px; padding: 11px 18px; background: rgba(22, 20, 16, .62); backdrop-filter: blur(6px); color: #fff; font: 800 15px/1 system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.pas.principal { background: #fff; color: var(--encre); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: invite 2.4s ease-in-out infinite; }
@keyframes invite { 50% { transform: translateY(-3px); } }
@media (max-width: 600px) { .pas { padding: 10px 14px; font-size: 14px; } .plan button { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .pas.principal { animation: none; } .scene.part-avant, .scene.part-arriere { transition: opacity .2s; transform: none; } }
/* Nom du village : tient dans le panneau (corrigé : « KERLUN » débordait) */
.nom-village { font-size: 1.45cqw; letter-spacing: .03em; padding: 0 .4cqw; overflow: hidden; }
/* Téléphone tenu en hauteur : l'image sur deux largeurs d'écran (et non trois), au milieu de la hauteur */
@media (max-aspect-ratio: 3/4) {
  .fenetre { align-items: center; }
  .scene { height: auto; width: 200vw; }
}
/* Ce qui est hors champ : une pastille au bord de l'écran, qui tourne la vue vers le lieu */
.horschamp { position: fixed; top: 50%; transform: translateY(-50%); z-index: 4; display: grid; gap: 8px; }
.horschamp.gauche { left: 6px; } .horschamp.droite { right: 6px; justify-items: end; }
.horschamp button { max-width: 44vw; border: 0; border-radius: 999px; padding: 8px 12px; background: rgba(255, 253, 248, .94); color: var(--encre);
  font: 800 12.5px/1.15 system-ui, sans-serif; box-shadow: var(--ombre); cursor: pointer; text-align: left; border-left: 4px solid var(--c, #2D5A3D); }
.horschamp.droite button { text-align: right; border-left: 0; border-right: 4px solid var(--c, #2D5A3D); }
.horschamp small { display: block; font-weight: 600; color: #6a645b; font-size: 11px; }
/* Pastilles hors champ : sous les étiquettes, juste au-dessus du bouton « Avancer » */
.horschamp { top: auto; transform: none; bottom: calc(env(safe-area-inset-bottom, 0px) + 128px); }

/* « VILLELIBRE » (10 lettres) tient dans le panneau ; la communauté en dessous */
.nom-village { font-size: 1.2cqw; letter-spacing: .02em; }
.nom-village small { font-size: .5em; letter-spacing: 0; margin-top: .5em; }

/* Le panneau d'entrée ouvre le projet global (2026-11-09) */
.decor .nom-village { pointer-events: auto; cursor: pointer; border-radius: .6cqw; transition: box-shadow .2s; }
.decor .nom-village:hover, .decor .nom-village:focus-visible { outline: none; box-shadow: 0 0 0 .3cqw rgba(255, 255, 255, .95), 0 0 2cqw .5cqw rgba(255, 230, 150, .8); }
.nom-indice { position: absolute; left: 50%; top: 100%; transform: translate(-50%, .6cqw) rotate(-1.5deg); white-space: nowrap; font: 800 clamp(10px, 1.1cqw, 14px)/1 system-ui, sans-serif;
  letter-spacing: 0; font-style: normal; color: #fff; background: #b4232c; padding: .45cqw .9cqw; border-radius: 999px; box-shadow: var(--ombre); animation: invite 2.4s ease-in-out infinite; }
/* La fiche du projet : plus large, avec ses listes */
.carte.projet { width: min(620px, calc(100vw - 24px)); }
.carte.projet h3 { margin: 18px 18px 8px; font-size: 16px; }
.projet-intro { margin: 0 18px; color: #3c3730; line-height: 1.5; }
.projet-liste { list-style: none; margin: 0 12px; padding: 0; display: grid; gap: 8px; }
.projet-liste li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.projet-liste .k { font-size: 22px; line-height: 1; }
.projet-liste b { display: block; margin-bottom: 2px; }
.projet-liste span:not(.k) { color: #5b554c; font-size: 14.5px; }
.projet-pied { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 12px 16px; }
.projet-pied a { flex: 1 1 200px; text-align: center; text-decoration: none; padding: 12px; border-radius: 12px; font-weight: 800; font-size: 15px; }
.projet-pied .ouvrir { background: #1F6F5C; color: #fff; }
.projet-pied .plus { background: #f1ede5; color: var(--encre); }
.projet-pied .projet-legal { flex: 1 1 100%; margin: 4px 0 0; text-align: center; font-size: 13px; color: #6a645b; }
.projet-pied .projet-legal a { display: inline; padding: 0; font-weight: 600; font-size: 13px; color: inherit; text-decoration: underline; }

/* La pancarte du projet (2026-11-09) : comme un grand panneau de ville, blanc bordé de rouge */
.carte.projet { width: min(640px, calc(100vw - 20px)); background: #fbfaf6; border: 7px solid #b4232c; border-radius: 22px; box-shadow: 0 0 0 3px #fff, 0 28px 70px rgba(0, 0, 0, .5); }
.pancarte-tete { text-align: center; padding: 22px 52px 14px; border-bottom: 2px solid #ece6da; }
.pancarte-tete strong { display: block; font: 900 clamp(28px, 7vw, 42px)/1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif; letter-spacing: .06em; color: #1b1b1b; }
.pancarte-tete span { display: block; margin-top: 6px; font-weight: 700; color: #6a645b; font-size: 14px; }
.pancarte-bloc h3 { margin: 18px 18px 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #b4232c; }
.pancarte-bloc > p { margin: 0 18px; color: #2f2a24; line-height: 1.55; }

/* ---------- Petits bonheurs cachés (2026-11-09) ---------- */
.cache { position: absolute; pointer-events: auto; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.cache::after { content: '✨'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.3); opacity: 0; font-size: clamp(14px, 2.2cqw, 26px); pointer-events: none; }
.cache.scintille::after { animation: scintille 1.6s ease-out; }
.cache.eclat::after { animation: eclat .9s ease-out; }
@keyframes scintille { 30% { opacity: .95; transform: translate(-50%, -50%) scale(1) rotate(12deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(25deg); } }
@keyframes eclat { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.5); } 100% { opacity: 0; transform: translate(-50%, -90%) scale(2.2); } }
.carte-postale { position: fixed; z-index: 9; left: 50%; top: 50%; width: min(340px, calc(100vw - 40px)); transform: translate(-50%, -50%) rotate(-2deg);
  background: #fffdf8; padding: 10px 10px 14px; border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); animation: postale .45s cubic-bezier(.2, .9, .3, 1.3); cursor: pointer; }
@keyframes postale { from { opacity: 0; transform: translate(-50%, -40%) rotate(-10deg) scale(.7); } }
.carte-postale img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.carte-postale p { margin: 12px 8px 6px; font: italic 600 19px/1.4 Georgia, "Times New Roman", serif; color: #2b2620; text-align: center; }
.carte-postale.sans-image { padding-top: 22px; background: #fffdf8 radial-gradient(circle at 50% 0, #fff3d2, transparent 70%); }
.carte-postale.sans-image p { font-size: 21px; }
.carte-postale small { display: block; text-align: center; color: #9a9184; font-size: 12px; }
.compteur-bonheurs { position: fixed; z-index: 5; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 54px); border: 0; border-radius: 999px; padding: 6px 11px;
  background: rgba(22, 20, 16, .62); backdrop-filter: blur(6px); color: #ffe7a3; font: 800 13px/1 system-ui, sans-serif; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .cache::after, .carte-postale { animation: none !important; } }

/* ---------- Lampions du soir (2026-11-09) ---------- */
.lampions { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s; }
.lampions svg { width: 100%; height: 100%; display: block; overflow: visible; }
body.soir .lampions { opacity: 1; }
body.soir .decor:has(.lampions) { filter: none; } /* le décor du soir n'assombrit pas les lampions */
body.soir .decor .nom-village { filter: brightness(.5); }
.lampion { transform-box: fill-box; transform-origin: 50% 0; animation: balance 3s ease-in-out infinite alternate; }
@keyframes balance { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .lampion { animation: none; } }

/* Appli installable (11/11/2026) : bouton 📲 à côté du soir, bulle d'aide pour l'iPhone */
.haut-actions { display: flex; gap: 6px; pointer-events: auto; }
.haut-actions [hidden] { display: none; }
.bulle-installer { position: fixed; z-index: 30; right: 12px; top: calc(60px + env(safe-area-inset-top)); max-width: 280px; background: var(--papier); color: var(--encre);
  border-radius: 16px; padding: 14px 16px; box-shadow: var(--ombre); font-size: 15px; border-top: 4px solid #2D5A3D; }
.bulle-installer p { margin: 6px 0 10px; } .bulle-installer button { border: 0; border-radius: 999px; padding: 7px 16px; background: #2D5A3D; color: #fff; font: inherit; font-weight: 700; }
@media (max-width: 600px) { .installer-mot { display: none; } }