* { box-sizing: border-box; }
:root { color-scheme: light; font-family: 'Segoe UI', Arial, sans-serif; }
body { margin: 0; overflow: hidden; background: #c2cbd0; }
canvas { display: block; outline: none; }
[hidden] { display: none !important; }
#ui { position: fixed; inset: 0; pointer-events: none; color: #f8f0df; z-index: 2; }
#title { position: absolute; top: 24px; left: 24px; padding: 18px 23px; background: #203d30ef; border: 1px solid #ffffff24; border-radius: 4px 16px 16px 16px; box-shadow: 0 6px 30px #182a2520; }
.eyebrow { display: block; font-size: 9px; font-weight: 600; letter-spacing: 2.2px; color: #cfbc8e; margin-bottom: 8px; }
#title strong { display: block; font: normal 26px/1.15 Georgia, serif; }
#title small { display: block; margin-top: 9px; font-size: 12px; color: #d1ddcc; }
#title small::before { content: '●'; font-size: 7px; color: #ceba81; margin-right: 8px; }
#visit { position: absolute; top: 24px; right: 24px; display: flex; align-items: center; gap: 10px; background: #203d30ed; border: 1px solid #ffffff24; border-radius: 40px; padding: 8px 9px 8px 16px; font-size: 11px; }
#shop-toggle { border: 1px solid #cfbc8e80; background: #cfbc8e; color: #203d30; padding: 7px 12px; border-radius: 30px; font-weight: 600; }
.visit-dot { width: 6px; height: 6px; border-radius: 50%; background: #cfbc8e; }
button { pointer-events: auto; cursor: pointer; font: inherit; }
button:focus-visible { outline: 2px solid #dfbd76; outline-offset: 4px; }
#visit #exit-world{display:inline-flex;align-items:center;justify-content:center;gap:7px}
#visit #exit-world svg{display:block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#help-toggle { border: 0; background: #ffffff14; color: #f8f0df; padding: 7px 11px; border-radius: 30px; margin-left: 6px; }
#help { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: #203d30ed; border: 1px solid #ffffff22; padding: 12px 19px; border-radius: 12px; text-align: center; line-height: 2; width: max-content; max-width: calc(100% - 32px); font-size: 11px; color: #dfe4d5; }
#help b { color: #fff0d3; font-weight: 500; }
kbd { display: inline-block; font: 10px/1.5 'Segoe UI', sans-serif; background: #ffffff12; border: 1px solid #ffffff35; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; margin: 0 2px; color: #fff6dd; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #ffffffb5; border-radius: 50%; box-shadow: 0 0 2px #0007; }
body.locked #crosshair { background: white; }
#message { position: absolute; top: 160px; left: 24px; width: min(355px, calc(100% - 48px)); max-height: calc(100% - 185px); overflow: auto; padding: 26px; background: #fbf3e3f5; color: #294534; border: 1px solid #e6d6b5; border-radius: 4px 16px 16px 16px; box-shadow: 0 12px 50px #162b332a; pointer-events: auto; }
#message-image { display: block; width: min(360px, 100%); height: auto; max-height: 230px; object-fit: contain; border-radius: 5px; margin: 14px auto 18px; }
#message-link { display: block; margin-bottom: 18px; padding: 11px 13px; border-radius: 5px; background: #294534; color: #fff1d5; text-decoration: none; font-size: 12px; }
#message-link:hover { background: #435c43; }
#message .eyebrow { color: #8c7047; font-size: 8px; }
#message h2 { font: normal 25px/1.15 Georgia, serif; margin: 14px 0; }
#message p { font-size: 13px; line-height: 1.8; margin: 0 0 20px; }
#message small { display: block; border-top: 1px solid #d5c6a9; padding-top: 13px; font-size: 10px; line-height: 1.7; color: #79765e; }
#close-message { position: absolute; right: 10px; top: 8px; border: 0; background: transparent; font-size: 25px; color: #5a684f; }
noscript { position: fixed; inset: 30%; background: #fff5e1; color: #234c35; padding: 30px; }
@media (max-width: 700px) {
  #title { top: 12px; left: 12px; padding: 12px 15px; }
  #title strong { font-size: 21px; }
  .eyebrow { font-size: 7px; }
  #visit { top: 118px; right: 12px; font-size: 10px; }
  #help { font-size: 10px; line-height: 1.8; padding: 9px 12px; bottom: 12px; }
  #message { top: 170px; left: 12px; padding: 20px; max-height: calc(100% - 320px); overflow: auto; pointer-events: auto; }
}
#message-text { white-space: pre-line; }
#news-navigation { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 18px; }
#news-navigation button { background: #294534; border: 0; color: #fff1d5; border-radius: 5px; padding: 9px 10px; font-size: 11px; }
#news-navigation button:hover { background: #435c43; }
#news-counter { font-size: 11px; color: #79765e; white-space: nowrap; }
#shop-overlay { position: fixed; inset: 14px; z-index: 10; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid #d8c69f; border-radius: 14px; background: #f8f4e9; color: #294534; box-shadow: 0 20px 80px #101a16a8; pointer-events: auto; }
.shop-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; background: #203d30; color: #fff4df; }
.shop-overlay-header .eyebrow { margin: 0 0 3px; font-size: 8px; }
.shop-overlay-header strong { font: normal 20px Georgia, serif; }
#shop-close { border: 1px solid #fff5df5c; border-radius: 24px; padding: 9px 14px; background: #ffffff14; color: #fff4df; }
#shop-frame { display: block; width: 100%; height: 100%; border: 0; background: #fbf7ee; }
@media (max-width: 700px) {
  #shop-overlay { inset: 5px; border-radius: 9px; }
  .shop-overlay-header { padding: 8px 10px; }
  .shop-overlay-header strong { font-size: 16px; }
  #shop-close { padding: 8px 10px; font-size: 11px; }
}


/* Écran d’accueil : illustration et progression du chargement du monde. */
#world-loader{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;overflow:auto;padding:36px 24px clamp(42px,8vh,88px);color:#fff6e4;background:#263e2c url('assets/loading-domaine.jpg?v=20261030-mascotte') center 53%/cover no-repeat;opacity:1;transition:opacity .45s ease;isolation:isolate}
#world-loader::before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,28,19,.35) 0%,rgba(15,25,18,.06) 34%,rgba(14,25,19,.42) 70%,rgba(10,24,17,.9) 100%)}
#world-loader.is-complete{opacity:0;pointer-events:none}
.world-loader-card{position:relative;width:min(680px,100%);text-align:center;padding:24px 32px 26px;border:1px solid #f1deb34d;border-radius:8px 28px 8px 28px;background:linear-gradient(140deg,rgba(18,43,29,.91),rgba(24,45,31,.78));box-shadow:0 18px 65px #111b1480,inset 0 1px #fff2d21c;backdrop-filter:blur(10px)}
.world-loader-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:15px}
.world-loader-logo{width:54px;height:54px;object-fit:cover;border-radius:50%;box-shadow:0 0 0 1px #ead49a90}
.world-loader-brand span{color:#e8cd93;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;text-align:left;line-height:1.5}
.world-loader-card h1{font:normal clamp(30px,5vw,48px)/1.1 Georgia,serif;letter-spacing:-.025em;text-shadow:0 3px 14px #101b17;margin:0;color:#fff4d7}
.world-loader-subtitle{font:normal clamp(14px,2vw,17px)/1.45 Georgia,serif;color:#e5e0cd;margin:10px 0 20px}
.world-loader-loading{display:flex;align-items:end;justify-content:space-between;text-align:left;gap:12px;color:#f0e4c7}
.world-loader-loading-label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.17em;color:#dfc795}
#world-loader-status{margin:6px 0 0;font-size:12px;line-height:1.35;color:#e6edda;min-height:16px}
#world-loader-percent{font:normal 30px/1 Georgia,serif;white-space:nowrap;color:#f7d99a}
.world-loader-track{height:10px;width:100%;margin:12px auto 0;border:1px solid #e8d0a564;border-radius:20px;background:#0b1c13ab;overflow:hidden}
.world-loader-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9d713b,#e4c77e 58%,#f2dc9d);box-shadow:0 0 12px #dfbf7c90;transition:width .3s ease}
#world-loader-note{margin:14px auto 0;color:#e0ddc6;font-size:11px;line-height:1.5;min-height:16px}
#world-loader-retry{margin-top:12px;border:1px solid #e6d09b;border-radius:30px;background:#f4dfad;color:#244032;padding:9px 18px;font-weight:700}
.world-loader-footer{margin:17px 0 0;color:#cbb88e;font-size:9px;letter-spacing:.17em;text-transform:uppercase}
.world-loader-orbit{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.world-loader-orbit span{position:absolute;bottom:0;width:5px;height:5px;border-radius:50%;background:#fff1bd;box-shadow:0 0 10px #f3d99b;opacity:0;animation:world-firefly 6s infinite ease-in-out}
.world-loader-orbit span:nth-child(1){left:17%;animation-delay:.4s}.world-loader-orbit span:nth-child(2){left:76%;animation-delay:2s}.world-loader-orbit span:nth-child(3){left:48%;animation-delay:4s}
@keyframes world-firefly{0%{opacity:0;transform:translate(0,0)}25%{opacity:.7}75%{opacity:.45}100%{opacity:0;transform:translate(20px,-100px)}}
@media(max-width:600px){#world-loader{padding:20px 14px max(24px,env(safe-area-inset-bottom));background-position:52% center}.world-loader-card{padding:18px 18px 20px;border-radius:7px 20px}.world-loader-logo{width:44px;height:44px}.world-loader-brand{margin-bottom:10px}.world-loader-subtitle{margin:8px 0 16px}#world-loader-percent{font-size:25px}}
@media(max-height:600px){#world-loader{padding-top:8px;padding-bottom:12px}.world-loader-card{padding:12px 22px}.world-loader-brand{margin-bottom:5px}.world-loader-logo{width:35px;height:35px}.world-loader-card h1{font-size:27px}.world-loader-subtitle{margin:5px 0 9px}.world-loader-footer{display:none}}
@media(prefers-reduced-motion:reduce){.world-loader-orbit span{animation:none}.world-loader-track span,#world-loader{transition:none}}

.world-loader-guide{position:absolute;right:clamp(16px,4vw,70px);bottom:clamp(18px,5vh,50px);display:flex;flex-direction:column;align-items:flex-end;width:225px;pointer-events:none;filter:drop-shadow(0 7px 12px #17231866)}
.world-loader-speech{position:relative;width:100%;padding:15px 17px;background:#fff3d9;color:#213d2b;border:2px solid #b39565;border-radius:17px;font:13px/1.4 'Segoe UI',Arial,sans-serif;box-shadow:0 3px 0 #6b4a2a5c}
.world-loader-speech::after{content:'';position:absolute;right:38px;bottom:-13px;width:20px;height:20px;background:#fff3d9;border-right:2px solid #b39565;border-bottom:2px solid #b39565;transform:rotate(45deg)}
.world-loader-speech strong{display:block;font-size:16px;color:#173c27;margin-bottom:7px}.world-loader-speech p{margin:5px 0}.world-loader-speech b{color:#285135}
.world-loader-mascot{width:185px;height:auto;max-height:34vh;object-fit:contain;object-position:bottom;margin-top:8px}
@media(max-width:1200px){.world-loader-guide{top:14px;right:18px;bottom:auto;flex-direction:row;align-items:center;width:auto}.world-loader-speech{width:min(230px,43vw)}.world-loader-speech::after{right:-12px;bottom:24px;transform:rotate(-45deg)}.world-loader-mascot{width:120px;max-height:23vh;margin:0 0 0 8px}}
@media(max-width:600px){.world-loader-guide{top:10px;right:10px}.world-loader-speech{width:min(205px,55vw);padding:10px 12px;font-size:11px;line-height:1.3}.world-loader-speech strong{font-size:13px;margin-bottom:4px}.world-loader-speech p{margin:3px 0}.world-loader-mascot{width:85px;max-height:22vh;margin-left:5px}}
@media(max-height:500px){.world-loader-guide{top:6px;right:8px;transform:scale(.72);transform-origin:top right}.world-loader-card{width:min(590px,calc(100% - 190px));margin-right:175px}}


/* Progression circulaire de l'écran d'accueil. */
.world-loader-loading{justify-content:center;align-items:center;gap:20px}
.world-loader-circle{position:relative;flex:none;width:92px;height:92px;display:grid;place-items:center}
.world-loader-circle svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.world-loader-circle circle{fill:none;stroke-width:6}
.world-loader-circle-track{stroke:#0b1c13b3}
.world-loader-circle-fill{stroke:#e9ce8e;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 4px #dfbf7c90);transition:stroke-dashoffset .3s ease}
#world-loader-percent{position:relative;font-size:22px}
.world-loader-loading-copy{min-width:0}
@media(max-width:600px){.world-loader-circle{width:74px;height:74px}#world-loader-percent{font-size:18px}.world-loader-loading{gap:14px}}
@media(max-height:600px){.world-loader-circle{width:65px;height:65px}#world-loader-percent{font-size:16px}}
@media(prefers-reduced-motion:reduce){.world-loader-circle-fill{transition:none}}

#world-loader-enter{margin-top:6px;border:1px solid #f4dfa6;border-radius:30px;background:linear-gradient(135deg,#f5dfaa,#d8b76e);color:#203c2a;padding:12px 24px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px #101b1766;transition:transform .2s ease,box-shadow .2s ease}
#world-loader-enter:hover{transform:translateY(-2px);box-shadow:0 6px 20px #101b1780}
#world-loader-enter:focus-visible{outline:3px solid #fff5d5;outline-offset:3px}
@media(prefers-reduced-motion:reduce){#world-loader-enter{transition:none}}

.world-loader-tip-hint{display:block;margin-top:8px;color:#58745b;font-size:10px;line-height:1.25}
button.world-loader-mascot{padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;line-height:0}
button.world-loader-mascot img{display:block;width:100%;height:auto;max-height:inherit;object-fit:contain;object-position:bottom}
button.world-loader-mascot:focus-visible{outline:3px solid #f4dfa6;outline-offset:3px;border-radius:12px}

#library-overlay{position:fixed;inset:14px;z-index:11;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid #d8c69f;border-radius:14px;overflow:hidden;background:#f8f4e9;color:#294534;box-shadow:0 20px 80px #101a16a8;pointer-events:auto}
.library-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;background:#203d30;color:#fff4df}
.library-header .eyebrow{margin:0 0 3px;font-size:8px}.library-header strong{font:normal 20px Georgia,serif}
#library-close{border:1px solid #fff5df5c;border-radius:24px;padding:9px 14px;background:#ffffff14;color:#fff4df}
.library-layout{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);min-height:0}
.library-list-panel{overflow:auto;padding:16px;border-right:1px solid #e0d4bb}.library-list-panel p{font-size:13px;line-height:1.5;color:#596858;margin:0 0 14px}
#library-items{display:grid;gap:8px}.library-item{width:100%;display:flex;gap:11px;align-items:center;text-align:left;padding:9px;border:1px solid #ded4bd;border-radius:8px;background:#fffdf6;color:#264536}.library-item:hover,.library-item.is-selected{border-color:#70936f;background:#e9f0df}.library-item img{width:52px;height:52px;object-fit:cover;border-radius:5px}.library-item span{font-size:13px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.library-view-panel{min-height:0;display:grid;place-items:center;background:#ece9dc}#library-placeholder{padding:24px;text-align:center;color:#61705f}#library-article-frame,#library-video-frame{display:block;width:100%;height:100%;border:0;background:#fff}
@media(max-width:700px){#library-overlay{inset:5px}.library-layout{grid-template-columns:1fr;grid-template-rows:minmax(110px,35%) minmax(0,1fr)}.library-list-panel{border-right:0;border-bottom:1px solid #e0d4bb;padding:10px}.library-header strong{font-size:16px}}

#article-preview{position:fixed;z-index:5;width:174px;max-width:calc(100vw - 16px);padding:7px;background:#fffaf0;color:#253d2b;border:1px solid #cfbea1;border-top:4px solid #002800;border-radius:7px;box-shadow:0 5px 20px #10201866;pointer-events:none}
#article-preview.resilience{border-top-color:#280000;color:#5d3b1d}
#article-preview-image{display:block;width:100%;height:86px;object-fit:cover;border-radius:3px;margin-bottom:6px}
#article-preview-category{display:block;color:#074012;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
#article-preview.resilience #article-preview-category{color:#5d3b1d}
#article-preview-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font:600 12px/1.25 'Segoe UI',sans-serif;margin-top:3px;overflow-wrap:anywhere}
#article-preview small{display:block;color:#6c7767;font-size:10px;margin-top:5px}

/* Interface de visite : bois discret, feuillage et lisibilité. */
#title, #visit, #help {
  border: 2px solid #a78555;
  background-image: linear-gradient(135deg,rgba(20,55,35,.94),rgba(30,60,39,.9)),url('assets/wood/color.jpg');
  background-size: auto, 360px auto;
  box-shadow: 0 5px 0 #553b28, 0 10px 24px #101b18a0, inset 0 0 0 1px #efdbac35;
}
#title { border-radius: 8px 20px 8px 20px; }
#title .eyebrow { color:#e7ca8a; }
#title strong { color:#fff0cf; text-shadow:0 2px 4px #0c1c12; }
#title small::before { content:'✦'; font-size:10px; color:#bddd90; }
#visit { border-radius:12px 22px 12px 22px; gap:8px; }
#visit button { transition:background-color .15s ease,transform .15s ease; }
#visit button:hover { transform:translateY(-1px); }
#shop-toggle { background:#dabc7c; color:#193d29; border-color:#f0d79a; }
#help-toggle, #exit-world { border:1px solid #d2bc8a6b; background:#183827; color:#f8f0df; }
#help { border-radius:12px 12px 5px 5px; background-image:linear-gradient(135deg,rgba(20,55,35,.94),rgba(30,60,39,.94)),url('assets/wood/color.jpg'); }
#help kbd { background:#f0e3bd; color:#294331; border:1px solid #ad9266; border-bottom-width:2px; }
#article-preview { background:#fcf3de; border:2px solid #a78555; border-top:4px solid #285b37; box-shadow:0 5px 0 #61452d,0 8px 18px #16221980; }
#article-preview-description { margin:5px 0 0; color:#4e614c; font-size:10px; line-height:1.35; }
.shop-overlay-header, .library-header { background-image:linear-gradient(100deg,rgba(22,54,35,.94),rgba(38,68,43,.89)),url('assets/wood/color.jpg'); background-size:auto,360px auto; border-bottom:2px solid #a78555; }

#exit-world { border: 1px solid #cfbc8e80; background: #ffffff14; color: #f8f0df; padding: 7px 11px; border-radius: 30px; white-space: nowrap; }
#exit-world:hover { background: #ffffff28; }
@media (max-width: 700px) { #visit { max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: flex-end; border-radius: 16px; gap: 6px; } }

/* Habillage de jeu : panneaux en bois, incrustations vertes et feuilles. */
#title, #visit, #help {
  border: 4px solid #9e7143;
  border-radius: 8px;
  background-image: linear-gradient(rgba(61,36,18,.26),rgba(35,22,12,.48)),url('assets/wood/color.jpg');
  background-size: auto, 290px auto;
  box-shadow: inset 0 0 0 2px #edce8c78, 0 3px 0 #4c2c18, 0 8px 20px #101b17a3;
}
#title {
  min-height: 95px;
  padding: 16px 28px 16px 81px;
  color: #fff3d6;
}
#title::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 53px;
  height: 53px;
  transform: translateY(-50%);
  border: 2px solid #d6b66d;
  border-radius: 50%;
  background: #133b21 url('assets/boiserie-logo.png') center/cover no-repeat;
  box-shadow: 0 2px 6px #120d0a99;
}
#title strong { font-size: 23px; color:#fff1cc; text-shadow:0 2px 3px #261408; }
#title .eyebrow { color:#f2d899; }
#title small { color:#e6f0d2; }
#title small::before { content:'✿'; color:#a6d880; font-size:12px; }
#visit { padding:8px 10px 8px 15px; gap:8px; color:#fff1d7; }
#visit::before {
  content:'';
  width:23px;
  height:23px;
  flex:none;
  background:url('../img/kit/feuille.svg') center/contain no-repeat;
  filter:drop-shadow(0 2px 2px #18331c);
}
#visit button {
  padding:8px 13px;
  border:1px solid #ddc18c;
  border-radius:5px;
  background:#264e30;
  color:#fff3dc;
  font-weight:700;
  box-shadow:inset 0 1px #ffffff26,0 2px 0 #26321c;
}
#visit button:hover { background:#3d6a3d; }
#visit #shop-toggle { background:#dfc28a; color:#263f25; border-color:#f6dfab; }
#help {
  padding:12px 24px;
  border-radius:8px;
  color:#f9efda;
  background-image:linear-gradient(rgba(25,57,35,.80),rgba(24,49,31,.85)),url('assets/wood/color.jpg');
  background-size:auto,360px auto;
}
#help b { color:#fff1cc; font-weight:700; }
#help kbd { background:#eddfba; color:#243f28; border-color:#bda071; box-shadow:0 1px 1px #1a2618; }
#article-preview { border:3px solid #987044; border-top:5px solid #315d38; background:#fbefd4; box-shadow:0 3px 0 #61402b,0 7px 18px #101b1780; }
.shop-overlay-header, .library-header {
  background-image:linear-gradient(rgba(35,65,38,.65),rgba(27,54,32,.77)),url('assets/wood/color.jpg');
  background-size:auto,320px auto;
  border-bottom:4px solid #b69156;
}
@media(max-width:700px) {
  #title { min-height:70px; padding:10px 15px 10px 58px; }
  #title::before { width:38px; height:38px; left:10px; }
  #title strong { font-size:19px; }
  #visit::before { width:18px; height:18px; }
}
@media(prefers-reduced-motion:reduce) { #visit button { transition:none; } }
#visit #fullscreen-toggle {
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:7px;
  flex:none;
}
#fullscreen-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Fenêtres immersives de la boutique, des articles et des vidéos. */
#shop-overlay, #library-overlay {
  inset:clamp(12px,2vw,26px);
  border:6px solid #79512f;
  border-radius:16px;
  background:#263f2c;
  box-shadow:0 0 0 100vmax #07140ec2,0 18px 60px #050d08ad,inset 0 0 0 1px #e6c48380;
}
.browser-header {
  min-height:78px;
  padding:12px 20px;
  border-bottom:3px solid #b68b50;
  background-image:linear-gradient(100deg,rgba(19,45,29,.82),rgba(39,63,34,.79)),url('assets/wood/color.jpg');
  background-size:auto,380px auto;
  box-shadow:inset 0 1px #f5dda450,0 3px 8px #13251b45;
}
.browser-brand { display:flex; align-items:center; gap:13px; min-width:0; }
.browser-brand-logo {
  display:block; width:48px; height:48px; flex:none;
  object-fit:cover; border:2px solid #d5b778; border-radius:50%;
  box-shadow:0 2px 8px #08130db3;
}
.browser-header .eyebrow { color:#e2c78c; margin:0 0 5px; font-size:9px; letter-spacing:.17em; }
.browser-header strong { color:#fff1ce; font:600 23px/1.1 Georgia,serif; text-shadow:0 2px 3px #102116; }
#shop-close.browser-close, #library-close.browser-close {
  display:inline-flex; align-items:center; gap:9px; flex:none;
  padding:10px 17px; border:1px solid #dec28b; border-radius:8px;
  background:#f1dcac; color:#20402b; font:700 12px 'Segoe UI',sans-serif;
  box-shadow:0 3px 0 #84683e,0 5px 12px #09160d70;
}
.browser-close span { font-size:18px; line-height:1; }
#shop-close.browser-close:hover, #library-close.browser-close:hover { background:#ffedc8; }
#shop-close.browser-close:focus-visible, #library-close.browser-close:focus-visible { outline:3px solid #fff3c2; outline-offset:3px; }
.shop-view-panel { min-height:0; padding:10px; background:#264631; }
#shop-frame { overflow:hidden; border:1px solid #c6b48e; border-radius:7px; box-shadow:0 3px 12px #10231770; }
.library-layout {
  grid-template-columns:minmax(240px,310px) minmax(0,1fr);
  gap:0; background:#e9e5d7;
}
.library-list-panel {
  padding:20px 15px;
  background:linear-gradient(rgba(23,59,35,.93),rgba(30,61,38,.95)),url('assets/wood/color.jpg') center/380px auto;
  border-right:3px solid #a7804d; color:#fff1d8;
}
.browser-list-heading { padding:1px 3px 14px; border-bottom:1px solid #e8d2a046; margin-bottom:14px; }
.browser-list-heading span { display:block; color:#d7bc7d; font-size:9px; font-weight:700; letter-spacing:.16em; }
.browser-list-heading strong { display:block; margin-top:5px; color:#fff1d7; font:600 20px Georgia,serif; }
.library-list-panel p { color:#e4ead7; font-size:12px; line-height:1.5; }
#library-items { gap:9px; }
.library-item {
  padding:8px; border:1px solid #bdab84; border-radius:7px;
  background:#f8f0dd; color:#284533; box-shadow:0 2px 4px #0e21184d;
}
.library-item:hover,.library-item.is-selected { background:#fff7df; border-color:#e0bf78; box-shadow:inset 3px 0 #69945f,0 2px 5px #0e21184d; }
.library-item img { width:55px; height:55px; border:1px solid #c9b994; }
.library-view-panel { min-width:0; min-height:0; padding:12px; background:#d7dfce; }
#library-placeholder { max-width:400px; padding:28px; border:1px solid #cbb892; border-radius:10px; background:#fff8e8; color:#3c6046; box-shadow:0 4px 18px #304a3026; }
#library-article-frame,#library-video-frame { min-width:0; min-height:0; border:1px solid #b9b19a; border-radius:7px; box-shadow:0 3px 14px #263d2b40; }
@media(max-width:700px) {
  #shop-overlay,#library-overlay { inset:5px; border-width:4px; border-radius:10px; }
  .browser-header { min-height:60px; padding:8px 10px; }
  .browser-brand { gap:8px; }
  .browser-brand-logo { width:36px; height:36px; }
  .browser-header .eyebrow { font-size:7px; letter-spacing:.08em; }
  .browser-header strong { font-size:17px; }
  #shop-close.browser-close,#library-close.browser-close { padding:8px 9px; font-size:11px; }
  .shop-view-panel,.library-view-panel { padding:6px; }
  .library-layout { grid-template-columns:1fr; grid-template-rows:minmax(110px,35%) minmax(0,1fr); }
  .library-list-panel { border-right:0; border-bottom:3px solid #a7804d; padding:10px; }
  .browser-list-heading { padding-bottom:7px; margin-bottom:7px; }
  .browser-list-heading strong { font-size:16px; }
}

/* Navigateur : bois naturel et encadrement vert. */
#shop-overlay, #library-overlay {
  border-color:#315a39;
  background:#78573c;
  box-shadow:0 0 0 100vmax #07140ec2,0 18px 60px #050d08ad,inset 0 0 0 1px #a7c38a80;
}
.browser-header {
  border-bottom-color:#467346;
  background-image:linear-gradient(100deg,rgba(76,46,23,.30),rgba(51,31,15,.42)),url('assets/wood/color.jpg');
}
.browser-header .eyebrow { color:#f0d9a7; }
.browser-header strong { color:#fff4d9; text-shadow:0 2px 4px #281809; }
.browser-brand-logo { border-color:#95bd7c; }
#shop-close.browser-close, #library-close.browser-close {
  border-color:#a6c18b;
  background:#345b3b;
  color:#fff4dd;
  box-shadow:0 3px 0 #1d3b29,0 5px 12px #21140870;
}
#shop-close.browser-close:hover, #library-close.browser-close:hover { background:#497449; }
.shop-view-panel { background:#8c6a4c; }
#shop-frame { border-color:#4e744d; }
.library-list-panel {
  border-color:#467346;
  background:linear-gradient(rgba(83,52,29,.33),rgba(61,38,22,.52)),url('assets/wood/color.jpg') center/380px auto;
}
.browser-list-heading { border-bottom-color:#e9d4a968; }
.library-item { border-color:#6d8c5d; }
.library-item:hover, .library-item.is-selected { border-color:#3b6b3c; box-shadow:inset 3px 0 #4a7c49,0 2px 5px #27190f55; }
.library-view-panel { background:#e4dfd0; }
#library-article-frame,#library-video-frame { border-color:#6d8c5d; }


/* Barre compacte : compteur sous la zone, commandes sous forme de quatre touches. */
#title #exploration-progress { display:flex;align-items:center;gap:7px;margin-top:7px;font-size:10.5px;line-height:1.3;color:#d4dfc4; }
#title #exploration-progress::before { content:none; }
#exploration-progress .visit-dot { flex:none;width:5px;height:5px;background:#cfbc8e; }
#visit { padding:8px; }
#visit::before { display:none; }
#visit #help-toggle { display:inline-grid;place-items:center;width:34px;height:34px;padding:7px;margin-left:0;flex:none; }
#help-toggle svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
@media(max-width:700px) {
  #title { max-width:calc(100% - 24px); }
  #visit { top:136px; }
  #title #exploration-progress { font-size:10px; }
}


/* Confirmation avant le retour au site classique. */
#exit-confirmation { width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:28px;border:3px solid #527349;outline:2px solid #b49464;border-radius:12px;background:#f5efdd;color:#294534;box-shadow:0 18px 70px #0b1d17a8;font:15px/1.65 'Segoe UI',Arial,sans-serif; }
#exit-confirmation::backdrop { background:#10251bb8;backdrop-filter:blur(3px); }
#exit-confirmation h2 { margin:0 0 13px;font:normal 27px/1.2 Georgia,serif;color:#294534; }
#exit-confirmation p { margin:0; }
.exit-confirmation-actions { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px; }
.exit-confirmation-actions button { min-height:43px;padding:10px 14px;border:1px solid #527349;border-radius:5px;font-weight:700;font-size:14px;background:#e4e8d7;color:#294534; }
.exit-confirmation-actions #exit-confirm { background:#315b3c;color:#fff6df; }
.exit-confirmation-actions button:hover { filter:brightness(.95); }
.exit-confirmation-actions button:focus-visible { outline:3px solid #b17c37;outline-offset:3px; }
@media(max-width:420px) { #exit-confirmation { padding:23px 20px; }.exit-confirmation-actions{gap:9px}.exit-confirmation-actions button{padding:10px 8px} }


/* Fermeture discrète, sans empiéter sur les lignes de commandes. */
#help { padding-right:38px; }
#help-close { position:absolute;top:5px;right:7px;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:4px;background:transparent;color:#fff3d6;font:22px/1 Arial,sans-serif;pointer-events:auto; }
#help-close:hover { background:#ffffff1c;color:#fff; }

/* Lecture prioritaire : toutes les commandes du monde restent sous les fenêtres. */
#foreground-controls{position:fixed;inset:0;z-index:1200;pointer-events:none;color:#f8f0df}
#foreground-controls #visit{pointer-events:auto}
#world-loader{z-index:3000}
#message{position:fixed;z-index:1600;top:50%;left:50%;transform:translate(-50%,-50%);width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:25px 28px;box-shadow:0 0 0 100vmax #091b1599,0 15px 60px #07140eb3}
#close-message{position:sticky;top:0;right:auto;float:right;display:grid;place-items:center;width:36px;height:36px;z-index:3;border:1px solid #baaa85;border-radius:50%;background:#faf2de;line-height:1}
#shop-overlay,#library-overlay{z-index:1600;inset:16px;max-height:calc(100dvh - 32px)}
.browser-header{flex:none;min-height:70px}.browser-close{white-space:nowrap}
@media(max-width:700px){
 #foreground-controls #visit{top:8px;right:8px;max-width:calc(100vw - 16px);flex-wrap:nowrap;gap:6px;padding:7px 8px}
 #message{top:50%;max-height:calc(100dvh - 20px);width:calc(100vw - 20px);padding:18px}
 #shop-overlay,#library-overlay{inset:5px;max-height:calc(100dvh - 10px)}
 .browser-header{min-height:60px;gap:8px;padding:8px 10px}.browser-header .eyebrow{display:none}.browser-brand{gap:7px}.browser-brand-logo{width:30px;height:30px}.browser-header strong{font-size:16px}.browser-close{max-width:145px}
}
@media(max-height:500px){#shop-overlay,#library-overlay{top:5px;max-height:calc(100dvh - 10px)}#message{top:50%;max-height:calc(100dvh - 16px)}}

/* Catalogue et salon de lecture. */
#library-overlay.is-site .library-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#library-overlay.is-site .library-list-panel{display:none}
#library-seat-controls{position:fixed;z-index:1000;bottom:25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:15px;padding:10px 14px;border:1px solid #bdab78;border-radius:9px;background:#243b2eea;color:#fff1d5;box-shadow:0 4px 18px #0005;font:12px Arial,sans-serif}
#library-seat-controls[hidden]{display:none}
#library-seat-controls button{padding:8px 14px;border:1px solid #ddc99e;border-radius:5px;background:#f2e6c9;color:#2c4933;font-weight:bold;cursor:pointer;white-space:nowrap}
#library-fullscreen{display:inline-grid;place-items:center;flex:none;margin-left:auto;width:40px;height:40px;padding:9px;background:#294d38;color:#f6e9c5;border:1px solid #d7c395;border-radius:7px;cursor:pointer}
#library-fullscreen[hidden]{display:none}
#library-fullscreen svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#library-fullscreen:hover{background:#3d6145}
#library-fullscreen:focus-visible{outline:3px solid #fff3c2;outline-offset:3px}
#library-close .reader-close-label{font:700 12px/1.2 'Segoe UI',sans-serif}
#library-video-reduce{display:none}
.library-view-panel:fullscreen{position:relative;display:block;width:100%;height:100%;padding:0;background:#0d1812}
.library-view-panel:fullscreen #library-video-reduce{display:block;position:absolute;top:15px;right:20px;z-index:2;background:#f7efd8;color:#274936;border:1px solid #bcb18b;border-radius:5px;padding:10px 16px;cursor:pointer}
.library-view-panel:fullscreen iframe{width:100%;height:100%;border:0}
@media(max-width:700px){#library-fullscreen{width:34px;height:34px;padding:6px}.library-header .browser-brand{min-width:0}.library-header .browser-brand strong{font-size:14px}#library-seat-controls{bottom:12px;max-width:calc(100vw - 24px);gap:8px}#library-seat-controls span{max-width:160px}}
@media(max-width:480px){#library-close .reader-close-label{display:none}#library-close::after{content:'Fermer';font:700 11px 'Segoe UI',sans-serif}#library-close.browser-close{gap:6px;padding:8px 9px}.library-header{gap:8px}}
@media(max-width:360px){.library-header .browser-brand-logo{display:none}}

/* Un vrai fond modal intercepte aussi les clics hors de la fenêtre. */
#reading-backdrop{position:fixed;inset:0;z-index:1500;background:#07140e85;backdrop-filter:blur(2px);pointer-events:auto}
#reading-backdrop[hidden]{display:none}
#shop-close .browser-close-label{font:700 12px/1.2 'Segoe UI',sans-serif}
@media(max-width:480px){#shop-close .browser-close-label{display:none}#shop-close::after{content:'Fermer';font:700 11px 'Segoe UI',sans-serif}#shop-close.browser-close{gap:6px;padding:8px 9px}}
@media(max-width:360px){.shop-overlay-header .browser-brand-logo{display:none}}

#article-preview.is-product{width:230px;border-top-color:#355a39}#article-preview.is-product #article-preview-image{height:145px;object-fit:contain;background:#f4edda}#article-preview.is-product #article-preview-title{font-size:14px;line-height:1.35}

#article-preview{z-index:1300}