/* scene-carte.css — Scène « Venir à l'atelier » (carte papier). Unité --u = largeur de la scène / 1920 (posée par scene-carte.js).
   Toutes les règles sont sous .sc-* : aucune collision avec main.css. Chargée par les pages qui montent le film ou la carte. */
.sc-stage { --u: 1px; --sc-ink: #2A2138; --sc-violet: #5B3F7A; --sc-coral: #E8705F; --sc-cream: #faf7f2; --sc-lav: #E6DAF2; --sc-soft: #6f5f85;
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #faf7f2; font-family: 'Figtree', system-ui, sans-serif; color: var(--sc-ink); isolation: isolate; }
.sc-stage .sc-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* routes et rivière « à dessiner » (0 → 1 s) : état de départ en CSS (pathLength="1" posé à la création) ; GSAP écrit ensuite en ligne */
.sc-stage .sc-r-ink, .sc-stage .sc-r-fill, .sc-stage .sc-w-line { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.sc-f-bric { font-family: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif; }
.sc-f-fig { font-family: 'Figtree', system-ui, sans-serif; }
.sc-f-pin { font-family: 'Pinyon Script', cursive; }
.sc-rail { stroke-opacity: .7; }

/* surcouche */
.sc-ui { position: absolute; inset: 0; pointer-events: none; }
.sc-uisvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-grain { position: absolute; inset: 0; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .4 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: calc(220 * var(--u)) calc(220 * var(--u)); }
.sc-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(250,247,242,0) 55%, rgba(91,63,122,.10) 100%); }

/* repères */
.sc-tag { position: absolute; left: calc(44 * var(--u)); top: calc(36 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u));
  padding: calc(10 * var(--u)) calc(22 * var(--u)) calc(12 * var(--u)); background: #FFF9EE; border: 1px solid rgba(42,33,56,.3); border-radius: calc(4 * var(--u));
  box-shadow: calc(2 * var(--u)) calc(3 * var(--u)) 0 rgba(42,33,56,.16); transform: rotate(-1.2deg); }
.sc-tag-k { font-family: 'Pinyon Script', cursive; font-size: calc(46 * var(--u)); line-height: 1; color: var(--sc-violet); }
.sc-tag-s { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: calc(17 * var(--u)); letter-spacing: .06em; text-transform: uppercase; color: var(--sc-soft); }
.sc-north { position: absolute; right: calc(48 * var(--u)); top: calc(36 * var(--u)); width: calc(44 * var(--u)); text-align: center; }
.sc-north svg { width: 100%; height: auto; display: block; filter: drop-shadow(calc(1 * var(--u)) calc(2 * var(--u)) 0 rgba(42,33,56,.2)); }
.sc-north b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: calc(20 * var(--u)); color: var(--sc-ink); margin-top: calc(-6 * var(--u)); }
.sc-scale { position: absolute; right: calc(48 * var(--u)); bottom: calc(40 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); font-family: 'Figtree', sans-serif; font-weight: 600; font-size: calc(18 * var(--u)); color: var(--sc-ink); }
.sc-scale-bar { height: calc(8 * var(--u)); border: calc(2 * var(--u)) solid var(--sc-ink); border-top: 0; box-sizing: border-box; background: linear-gradient(90deg, var(--sc-ink) 0 50%, transparent 50%); background-size: 50% 100%; background-repeat: no-repeat; background-position: left; }
.sc-scale-txt { text-shadow: 0 0 calc(6 * var(--u)) var(--sc-cream), 0 0 calc(2 * var(--u)) var(--sc-cream); }

/* sous-titres (gros, lisibles, bande papier) */
.sc-sub { position: absolute; left: 0; right: 0; bottom: calc(44 * var(--u)); margin: auto; width: max-content; max-width: calc(1500 * var(--u));
  padding: calc(14 * var(--u)) calc(34 * var(--u)); background: #FFF9EE; border: 1px solid rgba(42,33,56,.28); border-radius: calc(6 * var(--u));
  box-shadow: calc(3 * var(--u)) calc(4 * var(--u)) 0 rgba(42,33,56,.14), 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(42,33,56,.12);
  font-family: 'Figtree', sans-serif; font-weight: 600; font-size: calc(46 * var(--u)); line-height: 1.25; color: var(--sc-ink); text-align: center; letter-spacing: .005em; }
.sc-sub strong { font-weight: 800; color: #c9513d; }

/* étiquette d'adresse (papier crème, scotch lavande) */
.sc-tape { position: absolute; width: calc(120 * var(--u)); height: calc(28 * var(--u)); left: 50%; top: calc(-14 * var(--u)); margin-left: calc(-60 * var(--u));
  background: rgba(230,218,242,.75); border: 1px solid rgba(91,63,122,.18); transform: rotate(-3deg); box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(42,33,56,.08); }
.sc-tape-2 { transform: rotate(4deg); left: 50%; }
.sc-card { position: absolute; left: calc(60 * var(--u)); bottom: calc(60 * var(--u)); width: calc(540 * var(--u)); box-sizing: border-box; padding: calc(32 * var(--u)) calc(34 * var(--u)) calc(28 * var(--u));
  background: #FBF4E6 repeating-linear-gradient(0deg, transparent 0 calc(9 * var(--u)), rgba(42,33,56,.025) calc(9 * var(--u)) calc(10 * var(--u)));
  border: 1px solid rgba(42,33,56,.3); border-radius: calc(5 * var(--u)); box-shadow: calc(4 * var(--u)) calc(6 * var(--u)) 0 rgba(42,33,56,.14), 0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(42,33,56,.18); }
.sc-card-brand { font-family: 'Pinyon Script', cursive; font-size: calc(54 * var(--u)); line-height: 1; color: var(--sc-violet); margin-bottom: calc(10 * var(--u)); }
.sc-card-addr { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: calc(30 * var(--u)); white-space: nowrap; line-height: 1.1; color: var(--sc-ink); }
.sc-card-city { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: calc(24 * var(--u)); color: var(--sc-ink); margin-top: calc(4 * var(--u)); }
.sc-card-city span { color: var(--sc-soft); font-weight: 500; }
.sc-card-hr { border: 0; border-top: calc(2 * var(--u)) dotted rgba(91,63,122,.45); margin: calc(16 * var(--u)) 0 calc(14 * var(--u)); }
.sc-card-hours { font-family: 'Figtree', sans-serif; font-size: calc(23 * var(--u)); color: var(--sc-ink); }
.sc-card-hours b { font-weight: 700; }
.sc-card-tel { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: calc(27 * var(--u)); color: #b8442f; margin-top: calc(6 * var(--u)); letter-spacing: .02em; }

/* polaroïd de l'atelier */
.sc-pola { position: absolute; left: calc(1232 * var(--u)); top: calc(70 * var(--u)); width: calc(300 * var(--u)); box-sizing: border-box; padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
  background: #fff; border: 1px solid rgba(42,33,56,.22); box-shadow: calc(3 * var(--u)) calc(5 * var(--u)) 0 rgba(42,33,56,.12), 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(42,33,56,.2); }
.sc-pola-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sc-lav); }
.sc-pola-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-pola-cap { font-family: 'Pinyon Script', cursive; font-size: calc(40 * var(--u)); line-height: 1.1; color: var(--sc-violet); text-align: center; margin-top: calc(8 * var(--u)); }

@media (prefers-reduced-motion: reduce) { .sc-stage * { transition: none !important; } }