*{box-sizing:border-box}html,body{margin:0;height:100%;font:12px/1.5 Arial,Helvetica,sans-serif;background:#f3f1ed;color:#181818}button,input,select{font:inherit}button{cursor:pointer}header{height:72px;padding:0 2.5vw;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{color:inherit;text-decoration:none;font-weight:900;font-size:23px;letter-spacing:-1.3px}.brand small{font-size:9px;letter-spacing:1px;font-weight:400}.headright{display:flex;align-items:center;gap:25px;font-size:10px;letter-spacing:1px}.headright a{color:inherit;text-decoration:none}.layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,.72fr);height:calc(100vh - 72px);min-height:620px}.map-area{padding:18px 24px;display:flex;flex-direction:column;min-height:0;border-right:1px solid #1a1a1a}.topline,.bottomline,.side-heading,.feature-meta{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:1px}.topline{padding-bottom:14px}.bottomline{padding-top:13px}#mapview{position:relative;flex:1;min-height:0;background:#eeece7;overflow:hidden;cursor:grab}#mapview.dragging{cursor:grabbing}#map-svg{display:block;width:100%;height:100%;touch-action:none}#geo{fill:none;stroke:#a7a49e;stroke-width:1.1;vector-effect:non-scaling-stroke}.dot{fill:#ffed00;stroke:#171717;stroke-width:1.8;cursor:pointer;vector-effect:non-scaling-stroke}.dot:hover,.dot.selected{fill:#ffed00;stroke-width:3.6}.map-tools{position:absolute;bottom:20px;left:20px;display:flex;flex-direction:column}.map-tools button{border:1px solid #111;background:#f3f1ed;width:36px;height:36px;font-size:20px}.map-tools button+button{border-top:0}#hover-card{position:absolute;z-index:3;width:185px;background:#ffed00;pointer-events:none;box-shadow:3px 4px 0 #111}#hover-card[hidden]{display:none}#hover-card img{width:100%;height:115px;object-fit:cover;filter:grayscale(1);display:block}#hover-card div{padding:9px}#hover-name{font-weight:800;display:block;font-size:12px}#hover-city{display:block;font-size:10px}.side{min-height:0;display:flex;flex-direction:column}.side-heading{padding:19px 23px;border-bottom:1px solid #bbb}.feature{padding:18px 23px 15px;overflow-y:auto;flex:0 0 auto;max-height:65%}.feature-media{height:clamp(180px,28vh,320px);background:#dedbd4;position:relative}.feature-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);cursor:zoom-in;display:none}.feature-media img.loaded{display:block}#feature-empty{position:absolute;inset:0;display:grid;place-items:center;color:#777;font-size:11px;letter-spacing:1px}.feature-media:has(img.loaded) #feature-empty{display:none}.feature-meta{margin-top:12px;color:#6d6b67}.feature h1{font-size:clamp(25px,2.5vw,41px);letter-spacing:-.055em;line-height:1.05;margin:12px 0}.feature p{font-size:12px;line-height:1.5;margin:9px 0}#feature-city{font-weight:bold}.credit{color:#777;font-size:10px!important}.browse{min-height:120px;display:flex;flex-direction:column;border-top:1px solid #222;flex:1}.filterrow{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #bbb}.filterrow select,.filterrow input{background:none;border:0;min-width:0;padding:14px;font-size:10px;outline:none}.filterrow select{border-right:1px solid #bbb}#list{overflow-y:auto;flex:1}.item{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;background:none;border:0;border-bottom:1px solid #d5d2cb;padding:10px 23px;text-align:left;font-size:11px}.item:hover,.item.active{background:#ffed00}.item span:last-child{color:#777;font-size:9px;white-space:nowrap}.item.active span:last-child{color:#111}#lightbox{position:fixed;inset:0;background:#101010ed;z-index:10;display:grid;place-items:center;padding:40px}#lightbox[hidden]{display:none}#close-lightbox{position:absolute;right:25px;top:20px;color:#fff;border:1px solid #fff;background:none;padding:10px 14px}.lightbox-wrap{max-width:90vw}.lightbox-wrap img{display:block;max-width:90vw;max-height:75vh;object-fit:contain}.lightbox-wrap div{display:flex;justify-content:space-between;gap:30px;color:white;margin-top:12px;font-size:11px}@media(max-width:850px){header{height:auto;min-height:65px}.brand small{display:none}.headright{gap:10px}.layout{display:flex;flex-direction:column;height:auto}.map-area{height:65vh;min-height:450px;border-right:0;border-bottom:1px solid #111}.side{min-height:600px}.feature{max-height:none}.browse{min-height:300px}.bottomline span:last-child{display:none}}
/* HORS—CHAMP — carte imprimée, encre noire, points jaune fluo */
#mapview{background:#f4f0e5;border:1px solid #151515;isolation:isolate}
.map-paper-grain{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.52;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");mix-blend-mode:multiply}
#map-svg{position:relative;z-index:1}
#geo{stroke:none}
.arrondissement{fill:transparent;stroke:#101010;stroke-width:.85;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.arr-label{fill:#111;stroke:none;font-size:6.3px;font-weight:400;text-anchor:middle;pointer-events:none}
.paris-label,.city-label{display:none}
.dot{fill:#eaff00;stroke:#111;stroke-width:.85;cursor:pointer;vector-effect:non-scaling-stroke;transition:fill .16s}
.dot:hover,.dot.selected{fill:#eaff00;stroke:#111;stroke-width:1.7}
#hover-card{background:#f4f0e5;border:1px solid #111;box-shadow:3px 3px 0 #111;width:190px}
#hover-card img{filter:none}
#hover-name{font-size:11px;font-weight:700}
#hover-city{font-size:9px}
.topline,.bottomline{font-size:9px;letter-spacing:.25px}
/* Une seule feuille, recto-verso : retournement sans dépliage */
.paper-intro{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#e8e4d9;perspective:1500px;cursor:pointer;transition:opacity .45s ease,visibility .45s ease}
.paper-intro.is-finished{opacity:0;visibility:hidden;pointer-events:none}
.paper-scene{width:min(69%,520px);height:min(74%,440px);perspective:1500px;filter:drop-shadow(12px 18px 9px #0002)}
.paper-sheet{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.2,.7,.15,1);transform:rotateY(0deg)}
.paper-intro.is-flipping .paper-sheet{transform:rotateY(-180deg)}
.paper-face{position:absolute;inset:0;backface-visibility:hidden;background:#f5f0e4;border:1px solid #222;padding:clamp(18px,3vw,33px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.paper-face:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.32;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.paper-eyebrow,.paper-footer{font-size:9px;letter-spacing:.8px}
.paper-center{margin:auto 0;text-align:left}
.paper-kicker{font-size:clamp(17px,2.5vw,31px);font-weight:400;letter-spacing:-.8px}
.paper-main-title{font-size:clamp(37px,5vw,75px);font-weight:900;line-height:1;letter-spacing:-.065em;white-space:nowrap}
.paper-subtitle{font-size:clamp(11px,1.3vw,17px);letter-spacing:.1px;margin-top:16px}
.paper-footer{border-top:1px solid #111;padding-top:12px;display:flex;justify-content:space-between;gap:12px}
.paper-back{transform:rotateY(180deg);font-weight:900;font-size:22px;letter-spacing:-1px}
.paper-back-lines{flex:1;margin:25px 0;opacity:.6;background:repeating-linear-gradient(115deg,transparent 0 22px,#111 22.5px,#111 23px,transparent 23.5px 46px)}
.paper-back small{font-size:9px;letter-spacing:1px;font-weight:400}
@media(prefers-reduced-motion:reduce){.paper-sheet{transition:none}.paper-intro{transition:none}}
@media(max-width:850px){.paper-scene{width:82%;height:65%}.paper-main-title{font-size:clamp(27px,7vw,52px)}.paper-footer{font-size:7px}}

/* Feuille imprimée : véritable recto/verso, verso = carte elle-même */
.paper-intro{background:transparent;perspective:1900px;transition:opacity .24s ease,visibility .24s ease}
.paper-scene{width:calc(100% - 36px);height:calc(100% - 36px);perspective:1900px;filter:drop-shadow(3px 5px 3px #0002);transition:filter 1.15s ease}
.paper-sheet{transition:transform 1.45s cubic-bezier(.45,.02,.18,1);transform-origin:50% 50%}
.paper-intro.is-flipping .paper-sheet{transform:rotateY(-180deg)}
.paper-intro.is-flipping .paper-scene{filter:drop-shadow(-12px 12px 9px #0003)}
.paper-face{background:#f4f0e5;border:1px solid #8b877c;box-shadow:inset 0 0 35px #6b5d3610;padding:clamp(24px,4vw,58px)}
.paper-face:before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 2px,#463e2504 3px 4px,transparent 5px 11px);opacity:.4}
.paper-face:after{opacity:.47}
.paper-front{transform:rotateY(0deg)}
.paper-back{padding:0;transform:rotateY(180deg);display:block;overflow:hidden}
.paper-map-preview{position:absolute;inset:0;background:#f4f0e5;overflow:hidden}
.paper-map-preview svg{display:block;width:100%;height:100%}
.paper-map-preview .dot{pointer-events:none}
.paper-intro.is-finished{transition:opacity .18s ease,visibility .18s ease}
@media(max-width:850px){.paper-scene{width:calc(100% - 24px);height:calc(100% - 24px)}.paper-main-title{font-size:clamp(30px,7vw,62px)}}

/* Ajustements : recto opaque pendant tout le retournement. */
.arr-label{font-size:4.2px;font-weight:400;paint-order:stroke;stroke:#f4f0e5;stroke-width:.7px;stroke-linejoin:round}
.paper-intro,.paper-intro:not(.is-finished){background:#e9e5da}
.paper-scene{transform-style:preserve-3d}
.paper-sheet{transform-style:preserve-3d;isolation:isolate}
.paper-face{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:flat;opacity:1}
.paper-front{transform:rotateY(0deg) translateZ(1px);background-color:#f4f0e5}
.paper-back{transform:rotateY(180deg) translateZ(1px);background-color:#f4f0e5}
.paper-map-preview{background:#f4f0e5}
/* Aucun aperçu de la carte ne transparaît avant le milieu de la rotation. */
.paper-map-preview{visibility:hidden}
.paper-intro.is-flipping .paper-map-preview{animation:reveal-verso 1.45s steps(1,end) forwards}
@keyframes reveal-verso{0%,49%{visibility:hidden}50%,100%{visibility:visible}}

/* Correction finale : une feuille se retourne, et la vraie carte apparaît immédiatement.
   Aucun verso simulé, aucun titre en miroir. */
.paper-back{display:none!important}
.paper-intro{background:transparent!important;transition:none!important}
.paper-intro.is-flipping .paper-sheet{transform:rotateY(-90deg)!important}
.paper-intro.is-flipping{pointer-events:none}
.paper-sheet{transition:transform .76s cubic-bezier(.42,0,.85,.5)!important}
.paper-front{backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important}
