/* Visionneuse — la nouvelle appli (refonte). Couleurs de la marque : encre, trait (blanc chaud), or, filet d'or, cœur. */
:root { --encre: rgba(14, 15, 17, .82); --fond: #0E0F11; --trait: #E9E4D8; --doux: #A39E93; --or: #D9BC7A; --filet: rgba(217, 188, 122, .38); --coeur: #E5484D;
  --pastille: 46px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--trait); font: 15px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
.cache { display: none !important; }

.pastille { width: var(--pastille); height: var(--pastille); border-radius: 50%; border: 1px solid var(--filet); background: var(--encre); padding: 0;
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pastille .ic { width: 24px; height: 24px; fill: none; stroke: var(--trait); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pastille .ic .plein { fill: var(--trait); stroke: none; }
.pastille.actif { border-color: var(--or); }
.pastille.actif .ic { stroke: var(--or); } .pastille.actif .ic .plein { fill: var(--or); }
.pastille.aime .ic { stroke: var(--coeur); } .pastille.aime .ic .plein { fill: var(--coeur); }

#barre { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 72px 8px 10px; pointer-events: none; }
#barre > * { pointer-events: auto; }
#titre { display: flex; flex-direction: column; padding: 4px 12px; border-radius: 22px; background: var(--encre); border: 1px solid var(--filet);
  max-width: min(60vw, 520px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#titre b { font-weight: 650; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; }
#titre small { color: var(--doux); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
#colonne { position: fixed; top: calc(8px + env(safe-area-inset-top)); right: 10px; z-index: 5; display: flex; flex-direction: column; gap: 10px; }

#vue { position: fixed; inset: 0; overflow: hidden; }
#etat { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 6; padding: 8px 16px; border-radius: 20px;
  background: var(--encre); border: 1px solid var(--filet); color: var(--trait); font-size: 13px; }

/* ── mosaïque ── */
.defile { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.mosaique { position: relative; }
.tuile { position: absolute; overflow: hidden; background: #1A1C20; cursor: pointer; border-radius: 2px; }
.tuile img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .25s; }
.tuile img.vu { opacity: 1; }
.tuile .leg { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; font-size: 11px; line-height: 1.2;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:not(.titres) .tuile .leg { display: none; }

/* ── frise ── */
.frise { position: relative; }
.carte-frise { position: absolute; display: flex; flex-direction: column; cursor: pointer; }
.carte-frise .img { flex: 1; background: #1A1C20; overflow: hidden; border-radius: 3px; display: grid; place-items: center; }
.carte-frise img { max-width: 100%; max-height: 100%; display: block; opacity: 0; transition: opacity .25s; }
.carte-frise img.vu { opacity: 1; }
.carte-frise .leg { height: 30px; font-size: 11px; line-height: 1.25; color: var(--doux); overflow: hidden; padding-top: 2px; }
.carte-frise .leg b { color: var(--trait); font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regle { position: absolute; left: 0; right: 0; top: 0; height: calc(96px + env(safe-area-inset-top)); z-index: 2; pointer-events: none;
  background: linear-gradient(var(--fond) 80%, transparent); }
.regle canvas { position: absolute; left: 0; bottom: 6px; width: calc(100% - 66px); height: 26px; }

/* ── carte ── */
.carte-monde { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.carte-monde canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.repere { position: absolute; transform: translate(-50%, -100%); width: 54px; height: 54px; border-radius: 6px; overflow: hidden; border: 2px solid var(--or);
  background: #222; box-shadow: 0 3px 10px rgba(0,0,0,.6); cursor: pointer; }
.repere img { width: 100%; height: 100%; object-fit: cover; display: block; }
.repere span { position: absolute; right: 2px; bottom: 2px; min-width: 18px; padding: 0 4px; border-radius: 9px; background: var(--encre); color: var(--or);
  font-size: 11px; text-align: center; }
.fiche-lieu { position: absolute; left: 0; right: 0; bottom: 0; max-height: 46%; z-index: 3; background: rgba(14,15,17,.94); border-top: 1px solid var(--filet);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.fiche-lieu h2 { margin: 0 0 8px; font-size: 15px; font-weight: 650; display: flex; justify-content: space-between; }
.fiche-lieu .rangee { display: flex; gap: 6px; overflow-x: auto; }
.fiche-lieu img { height: 120px; border-radius: 3px; cursor: pointer; }

/* ── voiles : menu des peintres, roue ── */
.voile { position: fixed; inset: 0; z-index: 8; background: rgba(8,9,10,.93); overflow: auto; padding: calc(70px + env(safe-area-inset-top)) 16px 30px; }
.voile h2 { color: var(--or); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin: 22px 0 10px; }
.peintres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.peintre { position: relative; height: 110px; border-radius: 8px; overflow: hidden; background: #1A1C20; border: 1px solid transparent; cursor: pointer; text-align: left; padding: 0; }
.peintre.choisi { border-color: var(--or); }
.peintre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.peintre span { position: absolute; left: 8px; right: 8px; bottom: 6px; font-weight: 650; text-shadow: 0 1px 4px #000; }
.peintre small { display: block; font-weight: 400; color: #ddd; font-size: 11px; }
.champ { width: 100%; padding: 10px 14px; border-radius: 22px; border: 1px solid var(--filet); background: #15171A; color: var(--trait); font: inherit; }

/* ── panneau des critères ── */
.panneau { position: fixed; z-index: 7; top: calc(64px + env(safe-area-inset-top)); left: 10px; width: min(420px, calc(100vw - 80px)); max-height: calc(100vh - 90px);
  overflow: auto; background: rgba(14,15,17,.95); border: 1px solid var(--filet); border-radius: 14px; padding: 12px; }
.panneau h3 { margin: 14px 0 6px; font-size: 12px; color: var(--or); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { padding: 5px 10px; border-radius: 16px; border: 1px solid var(--filet); background: transparent; cursor: pointer; font-size: 13px; }
.puce.actif { background: var(--or); color: #111; border-color: var(--or); }
.puce small { opacity: .7; margin-left: 4px; }
.periode { display: flex; gap: 8px; align-items: center; }
.periode input { width: 90px; }

/* ── visionneuse ── */
#visionneuse { position: fixed; inset: 0; z-index: 9; background: var(--fond); }
#v-toile { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#v-barre { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.7)); }
#v-cartel { flex: 1; min-width: 0; }
#v-cartel b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#v-cartel small { color: var(--doux); }
.licence { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--filet); margin-left: 6px; color: var(--or); }

/* ── roue ── */
.roue-centre { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.roue-centre img { height: 90px; border-radius: 4px; }
.chemin { margin: 10px 0 16px; }
.chemin h3 { margin: 0 0 6px; font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.chemin h3 small { color: var(--doux); font-weight: 400; }
.chemin .rangee { display: flex; gap: 8px; overflow-x: auto; }
.chemin figure { margin: 0; width: 120px; flex: none; cursor: pointer; }
.chemin figure img { width: 120px; height: 120px; object-fit: cover; border-radius: 4px; display: block; background: #1A1C20; }
.chemin figcaption { font-size: 11px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#roue { z-index: 10; }
.defile { touch-action: pan-x pan-y; }