/* Cœur de Cendres — carte interactive */

/* polices d'époque (dossier fonts/, servies à côté de cette feuille) */
@font-face{font-family:"Cardo";font-style:normal;font-weight:400;
  src:url(fonts/Cardo-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Cardo";font-style:italic;font-weight:400;
  src:url(fonts/Cardo-Italic.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Cardo";font-style:normal;font-weight:700;
  src:url(fonts/Cardo-Bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Cinzel Decorative";font-style:normal;font-weight:700;
  src:url(fonts/CinzelDecorative-Bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Alegreya SC";font-style:normal;font-weight:400;
  src:url(fonts/AlegreyaSC-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Uncial Antiqua";font-style:normal;font-weight:400;
  src:url(fonts/UncialAntiqua-Regular.ttf) format("truetype");font-display:swap}

:root{
  --ink:#2b2118; --sepia:#6f5a38; --red:#8e2f1e; --red2:#c0521f;
  --parch:#f1e5c4; --parch2:#e2d2a9; --leather:#191410; --leather2:#221b13;
  --line:#4a3d28; --gold:#b8873a; --txt:#e6d9b6; --dim:#a1906c;
}
*{box-sizing:border-box}
/* l'attribut hidden doit toujours gagner sur un display de cette feuille :
   sans ça, #overlay{display:flex} écrase [hidden]{display:none} du navigateur
   et la fenêtre d'aide ne se ferme plus. */
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{
  background:var(--leather); color:var(--txt);
  font:15px/1.55 "Cardo","Iowan Old Style",Georgia,serif;
  overflow:hidden;
}
#app{
  display:grid; height:100vh;
  grid-template-columns:352px 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:"top top" "side map";
}

/* ---------------------------------------------------------------- header */
#top{
  grid-area:top; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 16px; background:linear-gradient(#221b13,#181310);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;flex-direction:column;line-height:1.15;min-width:0}
/* .t1 est un h1 (titre principal, utile au référencement) : on annule la
   marge et la taille par défaut de la feuille du navigateur. */
.brand .t1{margin:0;font:600 20px/1.1 "Cinzel Decorative",Palatino,Georgia,serif;
           color:#e8cfa0;letter-spacing:.10em;white-space:nowrap}
.brand .t2{font-size:12.5px;color:var(--dim);font-style:italic;white-space:nowrap;
           overflow:hidden;text-overflow:ellipsis}
.tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.search{position:relative}
.search input{
  width:320px;max-width:44vw;padding:8px 11px;border-radius:4px;
  border:1px solid var(--line);background:#0f0c09;color:var(--txt);
  font:15px "Cardo",Georgia,serif;
}
.search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px #b8873a33}
#sugg{
  position:absolute;z-index:40;top:calc(100% + 4px);left:0;width:100%;margin:0;
  padding:4px;list-style:none;max-height:340px;overflow:auto;
  background:#1b1610;border:1px solid var(--line);border-radius:5px;
  box-shadow:0 16px 44px #000a;
}
#sugg li{padding:6px 9px;border-radius:3px;cursor:pointer;display:flex;gap:8px;
         align-items:baseline}
#sugg li .k{color:var(--gold);font-size:12px}
#sugg li[aria-selected="true"],#sugg li:hover{background:#2b2318}
.zoombox{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.zoombox button,#help{
  width:34px;height:34px;border:0;background:#211a12;color:var(--txt);
  font-size:16px;cursor:pointer;
}
.zoombox button+button{border-left:1px solid var(--line)}
.zoombox button:hover,#help:hover{background:#31261a;color:#fff}
#help{border:1px solid var(--line);border-radius:4px}

/* --------------------------------------------------------------- sidebar */
#side{
  grid-area:side; overflow:auto; padding:14px 14px 40px;
  background:linear-gradient(#1d1710,#181310); border-right:1px solid var(--line);
}
#side section{margin-bottom:20px}
#side h2{
  font:600 12.5px/1.3 "Cinzel Decorative",Georgia,serif; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin:0 0 9px;
  display:flex;align-items:center;gap:8px;
}
.count{color:var(--dim);font-size:11.5px;letter-spacing:0}
.layers{display:grid;gap:3px}
.layers label{display:flex;gap:8px;align-items:center;font-size:14px;
              padding:3px 6px;border-radius:3px;cursor:pointer}
.layers label:hover{background:#241d14}
.layers input{accent-color:var(--gold);width:15px;height:15px}
.mini{margin-left:auto;font:12px "Cardo",serif;background:#2b2318;color:var(--gold);
      border:1px solid var(--line);border-radius:3px;padding:2px 8px;cursor:pointer}
.mini:hover{background:#3a2e1e}

.itin{margin:0;padding:0;list-style:none;counter-reset:s}
.itin li{counter-increment:s;position:relative;padding:6px 8px 6px 30px;
         border-radius:4px;cursor:pointer;font-size:13.5px;color:#d6c8a4}
.itin li::before{content:counter(s);position:absolute;left:7px;top:7px;width:17px;
  height:17px;border-radius:50%;border:1px solid var(--line);text-align:center;
  font-size:11px;line-height:16px;color:var(--gold)}
.itin li:hover{background:#241d14}
.itin li.on{background:#33261663;box-shadow:inset 2px 0 0 var(--red2)}
.itin li .ch{color:var(--gold);font-size:11.5px;letter-spacing:.06em}
.itin li .tx{display:block;color:var(--dim);font-style:italic;font-size:12.5px}

.list{display:grid;gap:2px}
.list button{
  display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;
  background:none;border:0;color:var(--txt);font:14px "Cardo",serif;
  padding:5px 7px;border-radius:3px;cursor:pointer;
}
.list button:hover{background:#241d14}
.list button.on{background:#33261663;box-shadow:inset 2px 0 0 var(--red2)}
.list .ty{color:var(--dim);font-size:11.5px;font-style:italic;margin-left:auto;
          white-space:nowrap}
.src{font-size:12.5px;color:var(--dim);margin:0}
.src code{color:var(--gold);font-size:11.5px;word-break:break-all}

/* ------------------------------------------------------------------- map */
#mapwrap{grid-area:map;position:relative;overflow:hidden;background:#0e0b08}
#carte{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
#carte.grabbing{cursor:grabbing}
.lieu .hit{fill:#000;fill-opacity:0.001;cursor:pointer}
.lieu .zone{fill:var(--red2);fill-opacity:0;stroke:var(--red2);stroke-opacity:0;
            stroke-width:3;transition:fill-opacity .18s,stroke-opacity .18s}
.lieu:hover .zone{fill-opacity:.10;stroke-opacity:.45}
.lieu.on .zone{fill-opacity:.15;stroke-opacity:.7}
.lieu text{transition:fill .15s}
.lieu:hover text{fill:#8e2f1e}
.lieu:focus{outline:none}
.lieu:focus-visible .hit{fill-opacity:.12;fill:#8e2f1e}
.braise{cursor:pointer}
.braise:hover circle{stroke-width:7}

#tooltip{
  position:absolute;z-index:20;pointer-events:none;max-width:280px;
  padding:7px 10px;border-radius:4px;background:#120e0ae8;color:var(--txt);
  border:1px solid var(--line);font-size:13px;box-shadow:0 10px 30px #000b;
}
#tooltip b{color:#f0e0bb}
#tooltip .c{color:var(--dim);font-size:11.5px;display:block}

/* surcouche SVG : halo de sélection + itinéraire joué */
#halo{transition:opacity .25s ease}
#halo.on{animation:pulse 2.3s ease-out infinite}
@keyframes pulse{
  0%{opacity:.75;r:64}
  70%{opacity:0;r:132}
  100%{opacity:0;r:132}
}
#itineraire{transition:opacity .2s}
.itin li.done::before{background:#8e2f1e;color:#f8e7cf;border-color:#7a2416}

/* ---------------------------------------------------------------- detail */
#detail{
  position:absolute;z-index:30;left:14px;bottom:14px;width:min(430px,calc(100% - 28px));
  max-height:min(66vh,620px);overflow:auto;
  background:linear-gradient(#f3e8cb,#e9d9b3);color:#2b2118;
  border:1px solid #6f5a38;border-radius:6px;padding:18px 20px 20px;
  box-shadow:0 24px 60px #000c;
}
#detail::before{
  content:"";position:absolute;inset:6px;border:1px solid #b09a6e80;
  border-radius:4px;pointer-events:none;
}
#close{position:absolute;right:9px;top:7px;border:0;background:none;
       font-size:20px;line-height:1;color:#6f5a38;cursor:pointer}
#close:hover{color:#8e2f1e}
#dcard h3{font:600 22px/1.15 "Cinzel Decorative",Georgia,serif;color:#7a2a12;
          margin:0 40px 2px 0;letter-spacing:.02em}
#dcard .sub{font-style:italic;color:#6f5a38;margin:0 0 10px}
#dcard .badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
#dcard .badge{
  font-size:11.5px;letter-spacing:.05em;border:1px solid #a8916a;border-radius:99px;
  padding:2px 9px;color:#5c4a2c;background:#00000008;
}
#dcard .badge.b{background:#8e2f1e;color:#f8e7cf;border-color:#7a2416}
#dcard p{margin:0 0 12px}
#dcard ul{margin:0;padding-left:18px}
#dcard li{margin-bottom:6px;font-style:italic;color:#4a3a24}
#dcard .zone-t{font:600 11.5px "Cinzel Decorative",serif;letter-spacing:.12em;
               text-transform:uppercase;color:#8a6b3c;margin:14px 0 6px}
#dcard .acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
#dcard .acts button{
  font:13px "Cardo",serif;padding:5px 11px;border:1px solid #a8916a;border-radius:3px;
  background:#00000008;color:#4a3a24;cursor:pointer;
}
#dcard .acts button:hover{background:#00000014;color:#7a2a12}
#dcard .warn{color:#8e2f1e}

/* --------------------------------------------------------------- overlay */
#overlay{position:fixed;inset:0;z-index:60;background:#000000b8;
         display:flex;align-items:center;justify-content:center;padding:20px}
.modal{max-width:560px;background:linear-gradient(#f3e8cb,#e7d7b0);color:#2b2118;
       border:1px solid #6f5a38;border-radius:8px;padding:24px 26px}
.modal h3{font:600 24px "Cinzel Decorative",Georgia,serif;color:#7a2a12;margin:0 0 12px}
.modal ul{margin:0 0 14px;padding-left:20px}
.modal li{margin-bottom:6px}
.modal kbd{background:#00000012;border:1px solid #a8916a;border-radius:3px;
           padding:0 4px;font-size:12px}
.modal .note{font-size:13px;font-style:italic;color:#5c4a2c}
.modal button{margin-top:6px;font:15px "Cardo",serif;padding:7px 16px;
              border:1px solid #a8916a;border-radius:3px;background:#00000010;
              color:#4a3a24;cursor:pointer}
.modal button:hover{background:#0000001c}

@media (max-width:900px){
  #app{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;
       grid-template-areas:"top" "side" "map"}
  #side{max-height:38vh;border-right:0;border-bottom:1px solid var(--line)}
  .search input{width:200px}
  .brand .t1{font-size:16px}
}