/* PERRARA V1.7 · Direction artistique. Données V1.6 et règles de localisation inchangées. */
:root{--ink:#06141e;--night:#091d29;--gold:#d4b17b;--gold-hi:#f6e2ba;--border:rgba(224,185,122,.30);--ivory:#f1e4d0;--aqua:#80cad1;--surface:#0a1c29;--mist:#b9c8ce;--bg-aurora:radial-gradient(ellipse at 75% -15%,#134352 0%,#091b29 43%,#050e17 100%)}
body[data-atmosphere="aube"]{--gold:#e5b983;--aqua:#b9cec9;--border:rgba(236,190,124,.42);--bg-aurora:radial-gradient(ellipse at 85% -10%,#554137 0%,#1b3543 48%,#0c1b29 100%)}
body[data-atmosphere="givre"]{--gold:#bedce4;--gold-hi:#e7f8fc;--aqua:#9dd8e8;--border:rgba(167,223,235,.32);--bg-aurora:radial-gradient(ellipse at 80% -12%,#16475d 0%,#102738 50%,#081b29 100%)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{background:var(--bg-aurora);color:var(--ivory);font-family:'Segoe UI',system-ui,sans-serif}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.11;background-image:radial-gradient(#eee1cb .5px,transparent .5px);background-size:19px 19px;mask-image:linear-gradient(to bottom,#000,transparent 80%)}
.shell{max-width:1960px;overflow:hidden;background:linear-gradient(160deg,rgba(6,18,28,.45),transparent 50%);}
.skiplink{position:absolute;z-index:100;left:15px;top:-100px;background:#d8b984;color:#071721;padding:12px;outline:2px solid white}.skiplink:focus{top:15px}
.perrara-hero{min-height:228px;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:stretch;padding:24px clamp(20px,3vw,54px) 18px;gap:16px;border-bottom:1px solid var(--border);background:linear-gradient(110deg,rgba(5,16,25,.98) 0%,rgba(7,25,37,.89) 50%,rgba(7,24,36,.45) 100%),url('art/carte_paysages_nord.webp') 63% 28%/cover no-repeat}
.perrara-hero:before{content:'';position:absolute;inset:10px;z-index:-1;border:1px solid rgba(221,192,141,.18);pointer-events:none;clip-path:polygon(0 0,25% 0,25% 2px,75% 2px,75% 0,100% 0,100% 100%,0 100%)}
.perrara-hero:after{content:'';position:absolute;bottom:0;left:0;right:0;height:38px;background:linear-gradient(to top,rgba(5,15,24,.72),transparent);pointer-events:none;z-index:-1}
.hero-brand{display:flex;align-items:center;gap:23px;min-width:300px;max-width:920px;flex:1}.brand-seal{width:94px;height:94px;flex:none;filter:drop-shadow(0 0 15px #b9905434)}
.hero-brand h1{font:normal clamp(39px,5.3vw,75px)/1.02 Georgia,'Times New Roman',serif;letter-spacing:.03em;margin:8px 0 9px;text-shadow:0 4px 14px #000}.hero-brand h1 span{display:block;font:normal clamp(15px,1.9vw,24px)/1.25 Georgia,serif;letter-spacing:.11em;color:var(--gold)}
.hero-brand p{color:#dbded6;line-height:1.55;max-width:670px;font-size:14px}.eyebrow{color:var(--gold-hi)}.hero-pills{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0 0}.hero-pills span{padding:5px 9px;background:#111e2bc9;color:#e5d4b7;border:1px solid var(--border);border-radius:100px;font-size:11px}
.art-nav{display:flex;flex-direction:column;gap:9px;justify-content:center;min-width:210px}.art-nav a{display:block;text-align:center;text-decoration:none;text-transform:uppercase;letter-spacing:.07em;background:#091a25a9;border:1px solid var(--border);border-radius:3px;padding:7px 12px;color:#ebd8b9;font-size:11px}.art-nav a:hover,.art-nav a:focus-visible{background:#183849;color:white}.art-nav .art-reset{background:var(--gold);color:#071721;border-color:var(--gold);font-weight:800}
.art-subtitle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 30px;background:#0e2631e6;border-bottom:1px solid var(--border);font-size:12px;color:#cfdae1}.tiny-star{color:var(--gold);font-size:17px;margin-right:6px}.art-validation{color:#d9d8d1;font-size:11px;letter-spacing:.01em}.art-moods{display:flex;align-items:center;gap:3px}.art-moods button,.era-chips button{background:transparent;color:#c5d2d4;border:1px solid #435661;padding:6px 10px;font-size:11px;border-radius:3px}.art-moods button[aria-pressed=true],.era-chips button[aria-pressed=true]{background:var(--gold);color:#08202a;border-color:var(--gold);font-weight:750}
.layout{grid-template-columns:302px minmax(0,1fr);gap:14px;padding:18px clamp(13px,2vw,34px) 36px}.side{top:12px;max-height:calc(100vh - 26px);background:linear-gradient(150deg,rgba(10,32,43,.98),rgba(5,18,28,.99))}
.panel{border:1px solid var(--border);border-radius:5px;background:linear-gradient(145deg,#0b2634,#091b27);box-shadow:0 12px 32px #00101748}
.panelpad{padding:19px}.side h2,.panel h2{font:normal 26px Georgia,serif;color:#f2dfbe}.muted,.micro{color:#c0d3d7}.h3{color:var(--gold);border-bottom:1px solid var(--border);padding-bottom:5px}
.metric div{background:#102f3a;border-radius:3px;border:1px solid #34515c}.metric b{color:var(--gold-hi)}.metric small{color:#c5d2d2}
.site-list button{background:linear-gradient(120deg,#0b2735,#132f3b);border:1px solid #375663;border-radius:3px;transition:background .2s,border-color .2s,transform .2s}.site-list button:hover{transform:translateX(2px);border-color:var(--gold)}.site-list button[aria-pressed=true]{background:linear-gradient(120deg,#234854,#102e3b);border-color:var(--gold);box-shadow:inset 3px 0 var(--gold)}
.btn{border:1px solid #6b7b80;background:#163744;border-radius:4px;color:#f3ecdd;transition:background .18s,transform .18s}.btn:hover{background:#245160;transform:translateY(-1px)}.btn.primary{background:var(--gold);border-color:var(--gold);color:#071f2a}.btn.primary:hover{background:#f6dbaf}.checkbox,.note,.foot{color:#c3d0d2}.note,.sourcebox{background:#0a2531;border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:3px}.event{border-left-color:var(--gold)}.event strong{color:var(--gold-hi)}.event p{color:#e1e7e6}
.era-chips{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0 12px}.era-chips button{flex:1;min-width:38px}
.map-kicker{display:flex;justify-content:space-between;align-items:end;gap:10px;padding:2px 3px 18px}.map-kicker h2{font:normal clamp(27px,3vw,40px) Georgia,serif;margin:7px 0;color:#f7e9d3;letter-spacing:.025em}.map-kicker p{margin:0;color:#bed2d6;font-size:13px;max-width:740px;line-height:1.5}
.mapgrid{gap:15px}.mapgrid .panel{overflow:hidden}.map-head{background:linear-gradient(90deg,#102c3a,#0b2632);border-bottom:1px solid var(--border);padding:14px}.map-head h3{font:normal 22px Georgia,serif;color:#efd7ae}.map-head small{color:#b8d1d5}
.viewport{height:clamp(340px,35vw,525px);background:#06151e;outline-offset:-4px}.atlas-base:after,.atlas-archive:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 35px #061320a8;z-index:3}.viewport canvas{image-rendering:auto}.map-corner{position:absolute;width:38px;height:38px;z-index:6;pointer-events:none;border-color:var(--gold);opacity:.8}.map-corner-tl{top:8px;left:8px;border-top:1px solid;border-left:1px solid}.map-corner-br{bottom:8px;right:8px;border-right:1px solid;border-bottom:1px solid}.quality,.v-read{z-index:7;background:#071b28ef;border:1px solid #5e777e;border-radius:3px;color:#f2dfc3}.quality.warn{border-color:#d4a56e;color:#ffdfae}.foot{border-top:1px solid var(--border);min-height:58px}
.art-section{margin:18px 0 0;border:1px solid var(--border);background:linear-gradient(165deg,#132e3b,#091a27 80%);padding:22px;border-radius:5px;position:relative}.art-section:before{content:'';height:1px;position:absolute;top:-7px;left:10%;right:10%;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.art-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.art-section h2{font:normal clamp(28px,3vw,37px) Georgia,serif;color:#f1e1c7;margin:5px 0 8px}.art-section p{color:#bed1d5;font-size:12px;margin:0 0 16px;max-width:720px;line-height:1.55}
.art-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.art-card{appearance:none;border:1px solid #42616b;box-shadow:0 6px 16px #0005;border-radius:3px;background:#09222f;padding:0;cursor:pointer;color:#f2e6d2;text-align:left;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s}.art-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 13px 30px #0008}.art-card img{width:100%;height:170px;object-fit:cover;display:block;filter:contrast(1.05) saturate(.89)}.art-card-meta{display:grid;gap:5px;padding:11px 12px 13px}.art-card b{font:normal 18px Georgia,serif;color:var(--gold-hi)}.art-card small{color:#b6cbd0;font-size:11px;line-height:1.35}
.art-disclaimer{color:#99b2b6;font-size:11px;padding-top:14px;line-height:1.5}.editgrid{margin-top:18px}.sourcebox,.pick-list article{border:1px solid #3b6066}.footer{border-top:1px solid var(--border);color:#b7c8c9}
.art-modal,.art-guide{position:fixed;inset:0;z-index:999;background:#020b12e8;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(12px)}.art-modal[hidden],.art-guide[hidden]{display:none!important}.art-modal-inner{width:min(1240px,100%);max-height:96vh;background:#091d2a;border:1px solid var(--gold);padding:12px 16px 16px;box-shadow:0 25px 90px #000e;display:flex;flex-direction:column;gap:13px}.art-modal-head,.art-modal-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.art-modal-inner img{max-width:100%;max-height:calc(90vh - 165px);width:100%;object-fit:contain;background:#040b11}.art-modal-footer>div{text-align:center;flex:1}.art-modal-footer strong{display:block;color:var(--gold-hi);font:normal 20px Georgia,serif}.art-modal-footer p{font-size:12px;color:#c9d5d7;margin:5px}.guide-paper{width:min(650px,95vw);padding:30px 35px;background:linear-gradient(140deg,#163543,#071b28);border:1px solid var(--gold);box-shadow:0 20px 100px #000d}.guide-paper h2{font:normal 31px Georgia,serif;color:var(--gold-hi)}.guide-paper p{color:#d0e0e1;line-height:1.6}.guide-paper .btn:first-child{float:right}
@media (max-width:1280px){.layout{grid-template-columns:280px minmax(0,1fr)}.art-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.art-card img{height:135px}.viewport{height:425px}.art-nav{flex-direction:row;flex-wrap:wrap;min-width:0}.perrara-hero{flex-direction:column}.art-nav a{flex:1 0 140px}.art-nav .art-reset{flex:1 0 140px}}
@media (max-width:850px){.layout{display:flex;flex-direction:column}.layout>main{order:0}.side{order:1;max-height:none;position:static}.hero-brand{align-items:flex-start}.brand-seal{width:67px;height:67px}.perrara-hero{min-height:auto}.art-subtitle{flex-wrap:wrap;padding:12px}.art-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.art-card img{height:170px}.map-kicker{align-items:flex-start;flex-direction:column}.editgrid,.mapgrid{grid-template-columns:1fr}}
@media (max-width:490px){.perrara-hero{padding:16px}.hero-brand{gap:12px}.brand-seal{width:49px;height:49px}.hero-brand h1{font-size:37px}.hero-brand h1 span{font-size:15px}.hero-brand p{font-size:12px}.hero-pills{display:none}.art-nav{display:grid;grid-template-columns:1fr 1fr;width:100%}.art-nav a,.art-nav .art-reset{flex:auto;font-size:10px}.art-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.art-card img{height:118px}.art-card b{font-size:16px}.art-card-meta{padding:9px}.art-section{padding:12px}.map-head{padding:10px}.map-head h3{font-size:18px}.viewport{height:310px}.layout{padding:10px 8px}.art-modal-footer .btn{font-size:10px;padding:7px}.art-modal-inner img{max-height:calc(83vh - 145px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}