/* Fallback fonts si hors-ligne */ @font-face{font-family:Noto Sans JP,'Lato';font-style:normal;font-weight:400; src:local('Lato'),local('Lato-Regular'),local('Arial');} @font-face{font-family:Noto Sans JP,'Cormorant Garamond';font-style:normal;font-weight:400; src:local('Georgia'),local('Times New Roman');} @font-face{font-family:Noto Sans JP,'Noto Serif JP';font-style:normal;font-weight:400; src:local('Hiragino Mincho ProN'),local('MS PMincho'),local('Yu Mincho');} .map-link{color:#c0392b;font-size:.78rem;text-decoration:none} .map-link-plain{color:#c0392b;text-decoration:none} .badge-tag{background:var(--surface);color:var(--muted);font-size:.72rem;padding:5px 8px;letter-spacing:.05em} .icon-btn{cursor:pointer;font-size:1.15rem} .link-blue{color:#1a56b0;font-size:.78rem;text-decoration:none} .link-blue-sm{color:#1a56b0;font-size:.75rem;text-decoration:none} .icon-row{display:flex;align-items:center;gap:8px;padding:10px 16px 0} .book-pave{flex:1;display:flex;align-items:center;justify-content:center; padding:10px 6px;border-radius:8px;text-decoration:none;font-size:.85rem;font-weight:700; letter-spacing:.03em;box-shadow:0 1px 4px rgba(0,0,0,.15)} .book-pave-stay{background:#0a2b52;color:#fff} .book-pave-visit{background:#c06a1e;color:#fff} .book-pave-tile{display:flex;align-items:center;justify-content:center;border-radius:10px; padding:16px 6px;text-decoration:none;font-size:.95rem;font-weight:700;letter-spacing:.03em; box-shadow:0 3px 10px rgba(0,0,0,.12)} .detail-text{font-size:.78rem;line-height:1.6;color:var(--ink)} /* ── Jeu romaji & kana (Comprendre › Dico › S'exercer) ── */ #screen-jeu-kana .jk{ --board:#1c2640; --well:#131a2e; --edge:#2e3b61; --edge2:#3c4a78; --ivory:#f0ebdf; --ivory-edge:#b9b09a; --ink:#25221c; --text:#e9e6dd; --muted:#98a2bd; --ok-top:#e4f0e6; --ok-bot:#cfe4d3; --ok-edge:#9fbfa7; --ok-ink:#1e4a34; --warn:#ec9a8a; --serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",Georgia,serif; --sans:"Avenir Next","Hiragino Sans","Noto Sans JP","Segoe UI",system-ui,sans-serif; color:var(--text);font-family:Noto Sans JP,var(--sans);font-size:16px;line-height:normal; background:radial-gradient(130% 70% at 50% 0%,#24315c 0%,var(--board) 62%); border-radius:14px;padding:10px 14px 0;display:flex;flex-direction:column; min-height:calc(100vh - 80px);min-height:calc(100dvh - 80px); -webkit-user-select:none;user-select:none} #screen-jeu-kana .jk *{box-sizing:border-box} #screen-jeu-kana .jk [hidden]{display:none!important} #screen-jeu-kana .jk #jk-game{display:flex;flex-direction:column;flex:1} #screen-jeu-kana .jk :focus-visible{outline:2px solid var(--ivory);outline-offset:2px} /* Sélecteur */ #screen-jeu-kana .jk-tabs{display:flex;justify-content:center;gap:30px;border-bottom:1px solid var(--edge)} #screen-jeu-kana .jk .jk-tabs button{padding:8px 2px;background:none;color:var(--muted);border:0;border-radius:0; border-bottom:2px solid transparent;margin-bottom:-1px;font-size:1rem;box-shadow:none; transition:color .15s,border-color .15s} #screen-jeu-kana .jk .jk-tabs button:hover{color:var(--text);background:none} #screen-jeu-kana .jk .jk-tabs button.on{color:var(--ivory);border-bottom-color:var(--ivory)} /* Indice */ #screen-jeu-kana .jk-fr{text-align:center;color:var(--muted);font-family:Noto Sans JP,var(--serif);font-style:italic; font-size:1.05rem;line-height:1.4;margin:14px 0 4px} /* Tuiles et emplacements */ #screen-jeu-kana .jk-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 20px;margin:auto 0;padding:6px 0} #screen-jeu-kana .jk-word{display:flex;flex-wrap:nowrap;gap:5px} #screen-jeu-kana .jk-cell{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 var(--cw,3.6rem);min-width:0} #screen-jeu-kana .jk-lab{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center; background:linear-gradient(#f7f3e9,#ebe5d5);color:var(--ink);border-radius:9px; box-shadow:0 3px 0 var(--ivory-edge),0 7px 12px rgba(0,0,0,.32); font-family:Noto Sans JP,var(--sans);font-weight:500;letter-spacing:.02em;font-size:calc(var(--fs,1.1rem)*1.15)} #screen-jeu-kana .jk[data-mode="romaji"] .jk-lab{font-family:Noto Sans JP,var(--serif);font-weight:500;letter-spacing:0; font-size:calc(var(--fs,1.1rem)*1.75)} #screen-jeu-kana .jk input{width:100%;min-width:0;padding:7px 0;text-align:center;font-family:Noto Sans JP,var(--sans); font-size:calc(var(--fs,1.1rem)*1.1);color:var(--ivory);caret-color:var(--ivory); background:var(--well);border:1px solid var(--edge);border-radius:9px;outline:none; box-shadow:inset 0 2px 5px rgba(0,0,0,.5);transition:border-color .15s,box-shadow .15s; -webkit-user-select:text;user-select:text} #screen-jeu-kana .jk[data-mode="kana"] input{font-family:Noto Sans JP,var(--serif);font-size:calc(var(--fs,1.1rem)*1.45);padding:4px 0} #screen-jeu-kana .jk input:focus{border-color:var(--ivory);box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 0 0 3px rgba(240,235,223,.16)} /* Réponse juste : la tuile vient se poser dans l'emplacement */ #screen-jeu-kana .jk input.ok{background:linear-gradient(var(--ok-top),var(--ok-bot));color:var(--ok-ink); border-color:transparent;box-shadow:0 3px 0 var(--ok-edge),0 7px 12px rgba(0,0,0,.3); animation:jk-settle .2s ease-out} #screen-jeu-kana .jk input.ko{border-color:var(--warn);background:#2a1f2d;animation:jk-shake .3s} @keyframes jk-settle{from{transform:translateY(-7px);opacity:.55}to{transform:none;opacity:1}} @keyframes jk-shake{20%{transform:translateX(-3px)}40%{transform:translateX(3px)} 60%{transform:translateX(-2px)}80%{transform:translateX(2px)}} /* Commandes */ #screen-jeu-kana .jk-actions{display:flex;align-items:center;gap:8px} #screen-jeu-kana .jk .jk-actions button{padding:7px 16px} #screen-jeu-kana .jk .jk-actions #jk-btn{padding:7px 22px} #screen-jeu-kana .jk button{font:inherit;font-weight:500;padding:9px 24px;border-radius:10px;cursor:pointer; background:var(--ivory);color:var(--ink);border:1px solid var(--ivory); box-shadow:0 3px 0 var(--ivory-edge);transition:transform .08s,box-shadow .08s,background .15s;opacity:1} #screen-jeu-kana .jk button:hover{background:#fff} #screen-jeu-kana .jk button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ivory-edge);opacity:1} #screen-jeu-kana .jk button.jk-ghost{background:transparent;color:var(--text);border-color:var(--edge2);box-shadow:none} #screen-jeu-kana .jk button.jk-ghost:hover{background:rgba(255,255,255,.06)} #screen-jeu-kana .jk button.jk-ghost:active{transform:none} #screen-jeu-kana .jk-msg{min-height:1.3em;text-align:center;color:var(--muted);font-size:.9rem;margin:0} #screen-jeu-kana .jk-msg.good{color:#a9d9b6} #screen-jeu-kana .jk-msg.bad{color:var(--warn)} /* Aide : trois propositions sous chaque case */ #screen-jeu-kana .jk-choices{display:flex;flex-direction:column;gap:4px;width:100%} #screen-jeu-kana .jk .jk-choices button{padding:6px 0;width:100%;background:#26325a;color:var(--text); border:1px solid var(--edge2);border-radius:8px;box-shadow:none;font-weight:400; font-size:calc(var(--fs,1.1rem)*.95)} #screen-jeu-kana .jk .jk-choices button:hover{background:#2f3d6c} #screen-jeu-kana .jk .jk-choices button:active{transform:none} #screen-jeu-kana .jk[data-mode="kana"] .jk-choices button{font-family:Noto Sans JP,var(--serif);font-size:calc(var(--fs,1.1rem)*1.25)} #screen-jeu-kana .jk .jk-choices button.sel{background:var(--ivory);color:var(--ink);border-color:var(--ivory)} /* Grille de réponse */ #screen-jeu-kana .jk #jk-grid{margin:0 -14px 0;position:sticky;bottom:0;z-index:2; padding:8px 12px calc(10px + env(safe-area-inset-bottom));background:#101728; border-top:1px solid var(--edge);border-radius:16px 16px 14px 14px;box-shadow:0 -10px 24px rgba(0,0,0,.35)} #screen-jeu-kana .jk-dock{display:flex;justify-content:space-between;align-items:center;gap:8px; max-width:420px;margin:0 auto 8px} #screen-jeu-kana .jk-bar{display:flex;gap:8px} #screen-jeu-kana .jk-keys{max-width:420px;margin-left:auto;margin-right:auto} #screen-jeu-kana .jk .jk-bar button{padding:4px 16px;font-size:.95rem;font-weight:400;background:transparent; color:var(--text);border:1px solid var(--edge2);border-radius:8px;box-shadow:none} #screen-jeu-kana .jk .jk-bar button:hover{background:rgba(255,255,255,.06)} #screen-jeu-kana .jk .jk-bar button:active{transform:none} #screen-jeu-kana .jk-keys{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-height:clamp(120px,30vh,250px);overflow-y:auto; padding:2px;scrollbar-width:thin;scrollbar-color:var(--edge2) transparent} #screen-jeu-kana .jk-keys .jk-sp{grid-column:1/-1;height:6px} #screen-jeu-kana .jk .jk-key{padding:6px 0;font-size:.98rem;font-weight:400;background:#26325a;color:var(--text); border:1px solid #36447a;border-radius:8px;box-shadow:0 2px 0 #121a33} #screen-jeu-kana .jk .jk-key:hover{background:#2f3d6c} #screen-jeu-kana .jk .jk-key:active{transform:translateY(1px);box-shadow:0 1px 0 #121a33} #screen-jeu-kana .jk[data-mode="kana"] .jk-key{font-family:Noto Sans JP,var(--serif);font-size:1.12rem} @media (prefers-reduced-motion:reduce){ #screen-jeu-kana .jk input.ok,#screen-jeu-kana .jk input.ko{animation:none} #screen-jeu-kana .jk button,#screen-jeu-kana .jk-tabs button,#screen-jeu-kana .jk input{transition:none} } /* Textes justifiés : billets et notices */ .screen[id$="-billet"] p,.tokyo-poi,.tokyo-poi-detail,.tgare-dest-detail,.tgare-acces-detail,.tcirc-etape-detail,.prep-row-detail{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} /* Mandarin simplifié (version masquée) : pas de césure, justification adaptée aux caractères */ html[lang^="zh"] body{font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei','Noto Sans JP',sans-serif} html[lang^="zh"] .screen p,html[lang^="zh"] .tokyo-poi,html[lang^="zh"] .tokyo-poi-detail,html[lang^="zh"] .tgare-dest-detail,html[lang^="zh"] .tgare-acces-detail,html[lang^="zh"] .tcirc-etape-detail,html[lang^="zh"] .prep-row-detail{hyphens:none;-webkit-hyphens:none;text-align:justify;text-justify:inter-character;line-break:strict;overflow-wrap:break-word} :root{ --bg:#f4f1ec;--surface:#ede9e2;--card:#fff;--border:#cec8bc;--border2:#bbb5a8; --ink:#0a0800;--muted:#3d3628;--accent:#8a6a1a; --red:#b02020;--red2:#d03020;--correct:#1e6b3a;--wrong:#922010; --jp:#b05a28;--kana:#2a5e8a;--kana2:#1a4a70;--kanji:#5a3a8a;--kanji2:#42287a; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:Noto Sans JP,'Lato',sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;font-size:19px} .wrap{max-width:600px;margin:0 auto;padding:20px 16px 60px} /* ── HEADER ── */ header{text-align:center;margin-bottom:18px;padding-bottom:14px;position:relative} header::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%); width:60px;height:2px;background:var(--jp);border-radius:1px} .mon{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:2.2rem;color:var(--jp);display:block; line-height:1;letter-spacing:.1em;font-weight:700} /* ── SCREENS ── */ .screen{display:none;animation:fadeUp .25s ease;position:relative} .screen.active{display:block} /* Écrans hors .wrap — même mise en page */ body>.screen.active{max-width:600px;margin:0 auto;padding:12px 16px 60px} .wrap .screen.active{padding-top:0} @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ── ACCUEIL : grille de sections ── */ .home-sections{display:flex;flex-direction:column;gap:10px} /* ── ACCUEIL : 6 grands carrés (2x3) ── */ .home-quad{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px} /* === Pop-up de crédit (clic sur le monogramme) === */ .credit-overlay{position:fixed;inset:0;background:rgba(15,13,10,.55); display:none;align-items:center;justify-content:center;z-index:2000; -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .credit-overlay.show{display:flex} .credit-box{position:relative;background:#fafbfc;border:1px solid #e0d8c5;border-radius:14px; padding:22px 28px 18px;box-shadow:0 8px 28px rgba(15,13,10,.22); max-width:240px;text-align:center;font-family:Noto Sans JP,'Lato',sans-serif; animation:credit-fade .22s ease-out} @keyframes credit-fade{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}} .credit-title{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.05rem;font-weight:600;color:#0f0d0a; letter-spacing:.01em} .credit-close{position:absolute;top:6px;right:8px;width:30px;height:30px; border:none;background:transparent;color:#8a96a3;cursor:pointer; border-radius:50%;font-size:1.4rem;line-height:1; display:flex;align-items:center;justify-content:center} .credit-close:hover{background:#f0ece2;color:#0f0d0a} .home-monogram:hover{transform:translateX(-50%) scale(1.06);opacity:1} .quad-tile{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden; cursor:pointer;border:none;padding:0;font-family:inherit; box-shadow:0 3px 10px rgba(0,0,0,.12);transition:transform .18s,box-shadow .18s} .quad-tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.18)} .quad-tile:active{transform:translateY(0)} .quad-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .quad-svg-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#5a3a8a 0%,#2a1850 100%)} .quad-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 75%,rgba(0,0,0,.82) 100%)} .quad-label{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px; color:#fff;text-align:left;z-index:2} .quad-title{display:block;font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.55rem; font-weight:600;letter-spacing:.02em;line-height:1;margin-bottom:3px; text-shadow:0 2px 6px rgba(0,0,0,.6)} .quad-sub{display:block;font-size:.66rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;opacity:.92;line-height:1.3; text-shadow:0 1px 4px rgba(0,0,0,.7)} .quad-jp{position:absolute;top:10px;right:12px;font-family:Noto Sans JP,'Noto Serif JP',serif; font-size:.95rem;color:rgba(255,255,255,.85);font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.7);z-index:2;letter-spacing:.05em} /* ── ACCUEIL v1 : 6 tuiles-carte (photo + bandeau blanc titre seul) ── */ #screen-home-real .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-home-real .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-home-real .home-quad .quad-photo .quad-bg, #screen-home-real .home-quad .quad-photo .quad-svg-wrap{ position:absolute;inset:0;width:100%;height:100%} #screen-home-real .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-home-real .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-home-real .home-quad .quad-title{font-size:.86rem} } /* ── VISITER (accueil rubrique) : même habillage que l'accueil (photo + bandeau blanc titre) ── */ #screen-visiter-accueil .home-quad .quad-tile, #screen-tokyo .home-quad .quad-tile, #screen-kyoto .home-quad .quad-tile, #screen-osaka .home-quad .quad-tile, #screen-kobe .home-quad .quad-tile, #screen-nara .home-quad .quad-tile, #screen-miyajima .home-quad .quad-tile, #screen-nikko .home-quad .quad-tile, #screen-hakone .home-quad .quad-tile, #screen-shirakawa .home-quad .quad-tile, #screen-naoshima .home-quad .quad-tile, #screen-kamakura .home-quad .quad-tile, #screen-koyasan .home-quad .quad-tile, #screen-hiroshima .home-quad .quad-tile, #screen-kanazawa .home-quad .quad-tile, #screen-takayama .home-quad .quad-tile, #screen-himeji .home-quad .quad-tile, #screen-noto .home-quad .quad-tile, #screen-nagano .home-quad .quad-tile, #screen-toyama .home-quad .quad-tile, #screen-sapporo .home-quad .quad-tile, #screen-hakodate .home-quad .quad-tile, #screen-otaru .home-quad .quad-tile, #screen-shiretoko .home-quad .quad-tile, #screen-biei .home-quad .quad-tile, #screen-hiraizumi .home-quad .quad-tile, #screen-ginzan .home-quad .quad-tile, #screen-sendai .home-quad .quad-tile, #screen-wakayama .home-quad .quad-tile, #screen-miyazaki .home-quad .quad-tile, #screen-matsue .home-quad .quad-tile, #screen-akan .home-quad .quad-tile, #screen-toya .home-quad .quad-tile, #screen-okinawa .home-quad .quad-tile, #screen-fukuoka .home-quad .quad-tile, #screen-hirosaki .home-quad .quad-tile, #screen-towada .home-quad .quad-tile, #screen-matsushima .home-quad .quad-tile, #screen-daisetsuzan .home-quad .quad-tile, #screen-aizuwakamatsu .home-quad .quad-tile, #screen-kumano .home-quad .quad-tile, #screen-yaeyama .home-quad .quad-tile, #screen-niseko .home-quad .quad-tile, #screen-kurashiki .home-quad .quad-tile, #screen-histoire .home-quad .quad-tile, #screen-hub-connaitre .home-quad .quad-tile, #screen-langue-dico .home-quad .quad-tile, #screen-comprendre-phrases .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-visiter-accueil .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-tokyo .home-quad .quad-photo, #screen-kyoto .home-quad .quad-photo, #screen-osaka .home-quad .quad-photo, #screen-kobe .home-quad .quad-photo, #screen-nara .home-quad .quad-photo, #screen-miyajima .home-quad .quad-photo, #screen-nikko .home-quad .quad-photo, #screen-hakone .home-quad .quad-photo, #screen-shirakawa .home-quad .quad-photo, #screen-naoshima .home-quad .quad-photo, #screen-kamakura .home-quad .quad-photo, #screen-koyasan .home-quad .quad-photo, #screen-hiroshima .home-quad .quad-photo, #screen-kanazawa .home-quad .quad-photo, #screen-takayama .home-quad .quad-photo, #screen-himeji .home-quad .quad-photo, #screen-noto .home-quad .quad-photo, #screen-nagano .home-quad .quad-photo, #screen-toyama .home-quad .quad-photo, #screen-sapporo .home-quad .quad-photo, #screen-hakodate .home-quad .quad-photo, #screen-otaru .home-quad .quad-photo, #screen-shiretoko .home-quad .quad-photo, #screen-biei .home-quad .quad-photo, #screen-hiraizumi .home-quad .quad-photo, #screen-ginzan .home-quad .quad-photo, #screen-sendai .home-quad .quad-photo, #screen-wakayama .home-quad .quad-photo, #screen-miyazaki .home-quad .quad-photo, #screen-matsue .home-quad .quad-photo, #screen-akan .home-quad .quad-photo, #screen-toya .home-quad .quad-photo, #screen-okinawa .home-quad .quad-photo, #screen-fukuoka .home-quad .quad-photo, #screen-hirosaki .home-quad .quad-photo, #screen-towada .home-quad .quad-photo, #screen-matsushima .home-quad .quad-photo, #screen-daisetsuzan .home-quad .quad-photo, #screen-aizuwakamatsu .home-quad .quad-photo, #screen-kumano .home-quad .quad-photo, #screen-yaeyama .home-quad .quad-photo, #screen-niseko .home-quad .quad-photo, #screen-kurashiki .home-quad .quad-photo, #screen-histoire .home-quad .quad-photo, #screen-hub-connaitre .home-quad .quad-photo, #screen-langue-dico .home-quad .quad-photo, #screen-comprendre-phrases .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-visiter-accueil .home-quad .quad-photo .quad-bg, #screen-visiter-accueil .home-quad .quad-photo .quad-svg-wrap, #screen-tokyo .home-quad .quad-photo .quad-bg, #screen-tokyo .home-quad .quad-photo .quad-svg-wrap, #screen-kyoto .home-quad .quad-photo .quad-bg, #screen-kyoto .home-quad .quad-photo .quad-svg-wrap, #screen-osaka .home-quad .quad-photo .quad-bg, #screen-osaka .home-quad .quad-photo .quad-svg-wrap, #screen-kobe .home-quad .quad-photo .quad-bg, #screen-kobe .home-quad .quad-photo .quad-svg-wrap, #screen-nara .home-quad .quad-photo .quad-bg, #screen-nara .home-quad .quad-photo .quad-svg-wrap, #screen-miyajima .home-quad .quad-photo .quad-bg, #screen-miyajima .home-quad .quad-photo .quad-svg-wrap, #screen-nikko .home-quad .quad-photo .quad-bg, #screen-nikko .home-quad .quad-photo .quad-svg-wrap, #screen-hakone .home-quad .quad-photo .quad-bg, #screen-hakone .home-quad .quad-photo .quad-svg-wrap, #screen-shirakawa .home-quad .quad-photo .quad-bg, #screen-shirakawa .home-quad .quad-photo .quad-svg-wrap, #screen-naoshima .home-quad .quad-photo .quad-bg, #screen-naoshima .home-quad .quad-photo .quad-svg-wrap, #screen-kamakura .home-quad .quad-photo .quad-bg, #screen-kamakura .home-quad .quad-photo .quad-svg-wrap, #screen-koyasan .home-quad .quad-photo .quad-bg, #screen-koyasan .home-quad .quad-photo .quad-svg-wrap, #screen-hiroshima .home-quad .quad-photo .quad-bg, #screen-hiroshima .home-quad .quad-photo .quad-svg-wrap, #screen-kanazawa .home-quad .quad-photo .quad-bg, #screen-kanazawa .home-quad .quad-photo .quad-svg-wrap, #screen-takayama .home-quad .quad-photo .quad-bg, #screen-takayama .home-quad .quad-photo .quad-svg-wrap, #screen-himeji .home-quad .quad-photo .quad-bg, #screen-himeji .home-quad .quad-photo .quad-svg-wrap, #screen-noto .home-quad .quad-photo .quad-bg, #screen-noto .home-quad .quad-photo .quad-svg-wrap, #screen-nagano .home-quad .quad-photo .quad-bg, #screen-nagano .home-quad .quad-photo .quad-svg-wrap, #screen-toyama .home-quad .quad-photo .quad-bg, #screen-toyama .home-quad .quad-photo .quad-svg-wrap, #screen-sapporo .home-quad .quad-photo .quad-bg, #screen-sapporo .home-quad .quad-photo .quad-svg-wrap, #screen-hakodate .home-quad .quad-photo .quad-bg, #screen-hakodate .home-quad .quad-photo .quad-svg-wrap, #screen-otaru .home-quad .quad-photo .quad-bg, #screen-otaru .home-quad .quad-photo .quad-svg-wrap, #screen-shiretoko .home-quad .quad-photo .quad-bg, #screen-shiretoko .home-quad .quad-photo .quad-svg-wrap, #screen-biei .home-quad .quad-photo .quad-bg, #screen-biei .home-quad .quad-photo .quad-svg-wrap, #screen-hiraizumi .home-quad .quad-photo .quad-bg, #screen-hiraizumi .home-quad .quad-photo .quad-svg-wrap, #screen-ginzan .home-quad .quad-photo .quad-bg, #screen-ginzan .home-quad .quad-photo .quad-svg-wrap, #screen-sendai .home-quad .quad-photo .quad-bg, #screen-sendai .home-quad .quad-photo .quad-svg-wrap, #screen-wakayama .home-quad .quad-photo .quad-bg, #screen-wakayama .home-quad .quad-photo .quad-svg-wrap, #screen-miyazaki .home-quad .quad-photo .quad-bg, #screen-miyazaki .home-quad .quad-photo .quad-svg-wrap, #screen-matsue .home-quad .quad-photo .quad-bg, #screen-matsue .home-quad .quad-photo .quad-svg-wrap, #screen-akan .home-quad .quad-photo .quad-bg, #screen-akan .home-quad .quad-photo .quad-svg-wrap, #screen-toya .home-quad .quad-photo .quad-bg, #screen-toya .home-quad .quad-photo .quad-svg-wrap, #screen-okinawa .home-quad .quad-photo .quad-bg, #screen-okinawa .home-quad .quad-photo .quad-svg-wrap, #screen-fukuoka .home-quad .quad-photo .quad-bg, #screen-fukuoka .home-quad .quad-photo .quad-svg-wrap, #screen-hirosaki .home-quad .quad-photo .quad-bg, #screen-hirosaki .home-quad .quad-photo .quad-svg-wrap, #screen-towada .home-quad .quad-photo .quad-bg, #screen-towada .home-quad .quad-photo .quad-svg-wrap, #screen-matsushima .home-quad .quad-photo .quad-bg, #screen-matsushima .home-quad .quad-photo .quad-svg-wrap, #screen-daisetsuzan .home-quad .quad-photo .quad-bg, #screen-daisetsuzan .home-quad .quad-photo .quad-svg-wrap, #screen-aizuwakamatsu .home-quad .quad-photo .quad-bg, #screen-aizuwakamatsu .home-quad .quad-photo .quad-svg-wrap, #screen-kumano .home-quad .quad-photo .quad-bg, #screen-kumano .home-quad .quad-photo .quad-svg-wrap, #screen-yaeyama .home-quad .quad-photo .quad-bg, #screen-yaeyama .home-quad .quad-photo .quad-svg-wrap, #screen-niseko .home-quad .quad-photo .quad-bg, #screen-niseko .home-quad .quad-photo .quad-svg-wrap, #screen-kurashiki .home-quad .quad-photo .quad-bg, #screen-kurashiki .home-quad .quad-photo .quad-svg-wrap, #screen-histoire .home-quad .quad-photo .quad-bg, #screen-histoire .home-quad .quad-photo .quad-svg-wrap, #screen-hub-connaitre .home-quad .quad-photo .quad-bg, #screen-hub-connaitre .home-quad .quad-photo .quad-svg-wrap, #screen-langue-dico .home-quad .quad-photo .quad-bg, #screen-langue-dico .home-quad .quad-photo .quad-svg-wrap, #screen-comprendre-phrases .home-quad .quad-photo .quad-bg, #screen-comprendre-phrases .home-quad .quad-photo .quad-svg-wrap{ position:absolute;inset:0;width:100%;height:100%} #screen-visiter-accueil .home-quad .quad-label, #screen-tokyo .home-quad .quad-label, #screen-kyoto .home-quad .quad-label, #screen-osaka .home-quad .quad-label, #screen-kobe .home-quad .quad-label, #screen-nara .home-quad .quad-label, #screen-miyajima .home-quad .quad-label, #screen-nikko .home-quad .quad-label, #screen-hakone .home-quad .quad-label, #screen-shirakawa .home-quad .quad-label, #screen-naoshima .home-quad .quad-label, #screen-kamakura .home-quad .quad-label, #screen-koyasan .home-quad .quad-label, #screen-hiroshima .home-quad .quad-label, #screen-kanazawa .home-quad .quad-label, #screen-takayama .home-quad .quad-label, #screen-himeji .home-quad .quad-label, #screen-noto .home-quad .quad-label, #screen-nagano .home-quad .quad-label, #screen-toyama .home-quad .quad-label, #screen-sapporo .home-quad .quad-label, #screen-hakodate .home-quad .quad-label, #screen-otaru .home-quad .quad-label, #screen-shiretoko .home-quad .quad-label, #screen-biei .home-quad .quad-label, #screen-hiraizumi .home-quad .quad-label, #screen-ginzan .home-quad .quad-label, #screen-sendai .home-quad .quad-label, #screen-wakayama .home-quad .quad-label, #screen-miyazaki .home-quad .quad-label, #screen-matsue .home-quad .quad-label, #screen-akan .home-quad .quad-label, #screen-toya .home-quad .quad-label, #screen-okinawa .home-quad .quad-label, #screen-fukuoka .home-quad .quad-label, #screen-hirosaki .home-quad .quad-label, #screen-towada .home-quad .quad-label, #screen-matsushima .home-quad .quad-label, #screen-daisetsuzan .home-quad .quad-label, #screen-aizuwakamatsu .home-quad .quad-label, #screen-kumano .home-quad .quad-label, #screen-yaeyama .home-quad .quad-label, #screen-niseko .home-quad .quad-label, #screen-kurashiki .home-quad .quad-label, #screen-histoire .home-quad .quad-label, #screen-hub-connaitre .home-quad .quad-label, #screen-langue-dico .home-quad .quad-label, #screen-comprendre-phrases .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-visiter-accueil .home-quad .quad-title, #screen-tokyo .home-quad .quad-title, #screen-kyoto .home-quad .quad-title, #screen-osaka .home-quad .quad-title, #screen-kobe .home-quad .quad-title, #screen-nara .home-quad .quad-title, #screen-miyajima .home-quad .quad-title, #screen-nikko .home-quad .quad-title, #screen-hakone .home-quad .quad-title, #screen-shirakawa .home-quad .quad-title, #screen-naoshima .home-quad .quad-title, #screen-kamakura .home-quad .quad-title, #screen-koyasan .home-quad .quad-title, #screen-hiroshima .home-quad .quad-title, #screen-kanazawa .home-quad .quad-title, #screen-takayama .home-quad .quad-title, #screen-himeji .home-quad .quad-title, #screen-noto .home-quad .quad-title, #screen-nagano .home-quad .quad-title, #screen-toyama .home-quad .quad-title, #screen-sapporo .home-quad .quad-title, #screen-hakodate .home-quad .quad-title, #screen-otaru .home-quad .quad-title, #screen-shiretoko .home-quad .quad-title, #screen-biei .home-quad .quad-title, #screen-hiraizumi .home-quad .quad-title, #screen-ginzan .home-quad .quad-title, #screen-sendai .home-quad .quad-title, #screen-wakayama .home-quad .quad-title, #screen-miyazaki .home-quad .quad-title, #screen-matsue .home-quad .quad-title, #screen-akan .home-quad .quad-title, #screen-toya .home-quad .quad-title, #screen-okinawa .home-quad .quad-title, #screen-fukuoka .home-quad .quad-title, #screen-hirosaki .home-quad .quad-title, #screen-towada .home-quad .quad-title, #screen-matsushima .home-quad .quad-title, #screen-daisetsuzan .home-quad .quad-title, #screen-aizuwakamatsu .home-quad .quad-title, #screen-kumano .home-quad .quad-title, #screen-yaeyama .home-quad .quad-title, #screen-niseko .home-quad .quad-title, #screen-kurashiki .home-quad .quad-title, #screen-histoire .home-quad .quad-title, #screen-hub-connaitre .home-quad .quad-title, #screen-langue-dico .home-quad .quad-title, #screen-comprendre-phrases .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-visiter-accueil .home-quad .quad-title, #screen-tokyo .home-quad .quad-title, #screen-kyoto .home-quad .quad-title, #screen-osaka .home-quad .quad-title, #screen-kobe .home-quad .quad-title, #screen-nara .home-quad .quad-title, #screen-miyajima .home-quad .quad-title, #screen-nikko .home-quad .quad-title, #screen-hakone .home-quad .quad-title, #screen-shirakawa .home-quad .quad-title, #screen-naoshima .home-quad .quad-title, #screen-kamakura .home-quad .quad-title, #screen-koyasan .home-quad .quad-title, #screen-hiroshima .home-quad .quad-title, #screen-kanazawa .home-quad .quad-title, #screen-takayama .home-quad .quad-title, #screen-himeji .home-quad .quad-title, #screen-noto .home-quad .quad-title, #screen-nagano .home-quad .quad-title, #screen-toyama .home-quad .quad-title, #screen-sapporo .home-quad .quad-title, #screen-hakodate .home-quad .quad-title, #screen-otaru .home-quad .quad-title, #screen-shiretoko .home-quad .quad-title, #screen-biei .home-quad .quad-title, #screen-hiraizumi .home-quad .quad-title, #screen-ginzan .home-quad .quad-title, #screen-sendai .home-quad .quad-title, #screen-wakayama .home-quad .quad-title, #screen-miyazaki .home-quad .quad-title, #screen-matsue .home-quad .quad-title, #screen-akan .home-quad .quad-title, #screen-toya .home-quad .quad-title, #screen-okinawa .home-quad .quad-title, #screen-fukuoka .home-quad .quad-title, #screen-hirosaki .home-quad .quad-title, #screen-towada .home-quad .quad-title, #screen-matsushima .home-quad .quad-title, #screen-daisetsuzan .home-quad .quad-title, #screen-aizuwakamatsu .home-quad .quad-title, #screen-kumano .home-quad .quad-title, #screen-yaeyama .home-quad .quad-title, #screen-niseko .home-quad .quad-title, #screen-kurashiki .home-quad .quad-title, #screen-histoire .home-quad .quad-title, #screen-hub-connaitre .home-quad .quad-title, #screen-langue-dico .home-quad .quad-title, #screen-comprendre-phrases .home-quad .quad-title{font-size:.86rem} } /* ── HOKKAIDO (accueil rubrique) : même habillage que Visiter/Tokyo ── */ #screen-hokkaido .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-hokkaido .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-hokkaido .home-quad .quad-photo .quad-bg, #screen-hokkaido .home-quad .quad-photo .quad-svg-wrap{ position:absolute;inset:0;width:100%;height:100%} #screen-hokkaido .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-hokkaido .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-hokkaido .home-quad .quad-title{font-size:.86rem} } /* ── GÉOGRAPHIE (hub) : même habillage que Visiter/Tokyo ── */ #screen-hub-geographie .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-hub-geographie .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-hub-geographie .home-quad .quad-photo .quad-bg, #screen-hub-geographie .home-quad .quad-photo .quad-svg-wrap{ position:absolute;inset:0;width:100%;height:100%} #screen-hub-geographie .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-hub-geographie .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-hub-geographie .home-quad .quad-title{font-size:.86rem} } /* ── TŌHOKU (accueil rubrique) : même habillage que Visiter/Tokyo ── */ #screen-region-tohoku .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-region-tohoku .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-region-tohoku .home-quad .quad-photo .quad-bg, #screen-region-tohoku .home-quad .quad-photo .quad-svg-wrap{ position:absolute;inset:0;width:100%;height:100%} #screen-region-tohoku .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-region-tohoku .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-region-tohoku .home-quad .quad-title{font-size:.86rem} } /* ── KANTŌ (accueil rubrique) : même habillage que Visiter/Tokyo ── */ #screen-region-kanto .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-region-kanto .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-region-kanto .home-quad .quad-photo .quad-bg, #screen-region-kanto .home-quad .quad-photo .quad-svg-wrap{ position:absolute;inset:0;width:100%;height:100%} #screen-region-kanto .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-region-kanto .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-region-kanto .home-quad .quad-title{font-size:.86rem} } /* ── CHŪBU (accueil rubrique) : même habillage que Visiter/Tokyo ── */ #screen-region-chubu .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-region-chubu .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-region-chubu .home-quad .quad-photo .quad-bg, #screen-region-chubu .home-quad .quad-photo .quad-svg-wrap{ position:absolute;inset:0;width:100%;height:100%} #screen-region-chubu .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-region-chubu .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-region-chubu .home-quad .quad-title{font-size:.86rem} } /* ── KANSAI (accueil rubrique) : même habillage que Visiter/Tokyo ── */ #screen-region-kansai .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-region-kansai .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-region-kansai .home-quad .quad-photo .quad-bg, #screen-region-kansai .home-quad .quad-photo .quad-svg-wrap{ position:absolute;inset:0;width:100%;height:100%} #screen-region-kansai .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-region-kansai .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-region-kansai .home-quad .quad-title{font-size:.86rem} } /* ── CHŪGOKU (accueil rubrique) : même habillage que Visiter/Tokyo ── */ #screen-region-chugoku .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-region-chugoku .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-region-chugoku .home-quad .quad-photo .quad-bg, #screen-region-chugoku .home-quad .quad-photo .quad-svg-wrap{ position:absolute;inset:0;width:100%;height:100%} #screen-region-chugoku .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-region-chugoku .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-region-chugoku .home-quad .quad-title{font-size:.86rem} } /* ── SHIKOKU (accueil rubrique) : même habillage que Visiter/Tokyo ── */ #screen-region-shikoku .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-region-shikoku .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-region-shikoku .home-quad .quad-photo .quad-bg, #screen-region-shikoku .home-quad .quad-photo .quad-svg-wrap{ position:absolute;inset:0;width:100%;height:100%} #screen-region-shikoku .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-region-shikoku .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-region-shikoku .home-quad .quad-title{font-size:.86rem} } /* ── KYŪSHŪ (accueil rubrique) : même habillage que Visiter/Tokyo ── */ #screen-region-kyushu .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-region-kyushu .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-region-kyushu .home-quad .quad-photo .quad-bg, #screen-region-kyushu .home-quad .quad-photo .quad-svg-wrap{ position:absolute;inset:0;width:100%;height:100%} #screen-region-kyushu .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-region-kyushu .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-region-kyushu .home-quad .quad-title{font-size:.86rem} } /* ── OKINAWA (accueil rubrique) : même habillage que Visiter/Tokyo ── */ #screen-region-okinawa .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-region-okinawa .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-region-okinawa .home-quad .quad-photo .quad-bg, #screen-region-okinawa .home-quad .quad-photo .quad-svg-wrap{ position:absolute;inset:0;width:100%;height:100%} #screen-region-okinawa .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-region-okinawa .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-region-okinawa .home-quad .quad-title{font-size:.86rem} } /* ── RÉGIONS (hub) : même habillage que Visiter/Tokyo ── */ #screen-regions .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-regions .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-regions .home-quad .quad-photo .quad-bg, #screen-regions .home-quad .quad-photo .quad-svg-wrap{ position:absolute;inset:0;width:100%;height:100%} #screen-regions .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-regions .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-regions .home-quad .quad-title{font-size:.86rem} } /* ── VISITER 2/4 : même habillage que Visiter 1/4 ── */ @media (max-width:380px){ } /* ── VISITER 3/4 et 4/4 : même habillage que Visiter 1/4 ── */ @media (max-width:380px){ } /* ── TOP10 ACCUEIL : même habillage que Visiter ── */ #screen-top10-accueil .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-top10-accueil .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-top10-accueil .home-quad .quad-photo .quad-bg{ position:absolute;inset:0;width:100%;height:100%} #screen-top10-accueil .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-top10-accueil .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-top10-accueil .home-quad .quad-title{font-size:.86rem} } /* ── SURVIE (accueil rubrique) : même taille de tuiles que Visiter ── */ #screen-survie .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-survie .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-survie .home-quad .quad-photo .quad-bg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #screen-survie .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-survie .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-survie .home-quad .quad-title{font-size:.86rem} } /* ── PREPARER (accueil rubrique) : même taille de tuiles que Visiter/Survie ── */ #screen-preparer .home-quad .quad-tile{ aspect-ratio:auto;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.15)} #screen-preparer .home-quad .quad-photo{ position:relative;width:100%;aspect-ratio:1/0.684;overflow:hidden;background:#e8e4da} #screen-preparer .home-quad .quad-photo .quad-bg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #screen-preparer .home-quad .quad-label{ position:static;background:#fff;padding:11px 13px 12px;text-align:left} #screen-preparer .home-quad .quad-title{ color:#151310;font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700; font-size:.95rem;letter-spacing:.005em;line-height:1.25; text-shadow:none;margin-bottom:0} @media (max-width:380px){ #screen-preparer .home-quad .quad-title{font-size:.86rem} } /* Carrés petits écrans */ @media (max-width:380px){ .quad-title{font-size:1.3rem} .quad-sub{font-size:.6rem;letter-spacing:.1em} } /* ── CONNAÎTRE : tuiles réduites de moitié, titre seul ── */ #screen-hub-connaitre .quad-tile{aspect-ratio:2/1} #screen-hub-connaitre .quad-svg-wrap svg{display:none} #screen-hub-connaitre .quad-jp{display:none} #screen-hub-connaitre .quad-sub{display:none} #screen-hub-connaitre .quad-label{padding:0 12px;top:0;bottom:0;display:flex;align-items:center} #screen-hub-connaitre .quad-title{font-size:1.15rem;margin-bottom:0} /* ── HUB : sous-rubriques d'un grand carré ── */ .hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .hub-tile{background:var(--card);border:1.5px solid var(--border);border-radius:10px; padding:18px 14px;cursor:pointer;text-align:left;font-family:inherit; transition:all .18s;box-shadow:0 2px 6px rgba(0,0,0,.06); display:flex;flex-direction:column;gap:6px;min-height:96px} .hub-tile:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(0,0,0,.12); border-color:var(--accent)} .hub-tile-icon{font-size:1.45rem;line-height:1} .hub-tile-title{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.2rem;font-weight:600; color:var(--ink);line-height:1.15} .hub-tile-desc{font-size:.7rem;color:var(--muted);line-height:1.35;letter-spacing:.02em} .hub-tile.htv-langue{border-top:3px solid var(--kanji2)} .hub-tile.htv-visiter{border-top:3px solid #c8542a} .hub-tile.htv-pratique{border-top:3px solid #2a7a5a} .hub-tile.htv-connaitre{border-top:3px solid #b8800f} .hub-tile-photo{padding:0;overflow:hidden;display:flex;flex-direction:column; border-top:1.5px solid var(--border)!important;gap:0; background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.12)} .hub-tile-photo .hub-tile-photo-img{width:100%;height:75px;object-fit:cover;display:block} .hub-tile-photo .hub-tile-photo-body{padding:5px 8px 6px;display:flex;flex-direction:row;align-items:center;gap:6px} .hub-tile-photo .hub-tile-icon{font-size:1rem} .hub-tile-photo .hub-tile-title{font-family:Noto Sans JP,'Lato',sans-serif;font-size:.82rem;line-height:1.15;font-weight:700} #screen-hub-geographie .hub-grid{row-gap:4px} .hub-intro{font-size:.78rem;color:var(--muted);line-height:1.5; margin:6px 4px 0;font-style:italic} /* ── Labels de section dans le hub Langue ── */ .lang-section-label{ font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.05rem;font-weight:600; color:var(--kanji2);margin:18px 4px 4px;letter-spacing:.04em; padding-bottom:4px;border-bottom:1px solid #d8cce8; display:flex;align-items:center;gap:6px} /* ── Style spécifique pour les blocs Quiz dans la rubrique Langue ── */ .hub-tile.htv-quiz{ background:linear-gradient(135deg,#f5f0fa 0%,#ebe2f5 100%); border:1.5px solid #c8b8e2;border-top:3px solid var(--kanji2); position:relative;overflow:hidden} .hub-tile.htv-quiz::before{ content:'';position:absolute;top:-6px;right:-6px;width:32px;height:32px; background:radial-gradient(circle,rgba(122,90,170,.18) 0%,transparent 70%); pointer-events:none} .hub-tile.htv-quiz .hub-tile-icon{color:var(--kanji2);font-weight:700} .hub-tile.htv-quiz .hub-tile-title{color:#3a2270} .hub-tile.htv-quiz:hover{ background:linear-gradient(135deg,#ede0f8 0%,#dfd0ee 100%); border-color:var(--kanji2)} /* ── ECRANS CONNAITRE : contenu encyclopédique ── */ .con-hero{background:linear-gradient(135deg,#b8800f 0%,#7a5408 100%);color:#fff; border-radius:10px;padding:18px 16px;margin-bottom:14px; box-shadow:0 3px 12px rgba(0,0,0,.18)} .con-hero h2{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.7rem;font-weight:600; margin-bottom:4px;letter-spacing:.02em} .con-hero .con-jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:.95rem;opacity:.85; letter-spacing:.08em;margin-bottom:6px;display:block} .con-hero p{font-size:.82rem;line-height:1.55;opacity:.94} .con-section{background:var(--card);border:1.5px solid var(--border);border-radius:10px; padding:14px 16px;margin-bottom:10px;box-shadow:0 2px 6px rgba(0,0,0,.06)} .con-section h3{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600; color:#7a5408;margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:5px} .con-section h4{font-family:Noto Sans JP,'Lato',sans-serif;font-size:.82rem;font-weight:700; color:var(--ink);margin:10px 0 4px;letter-spacing:.04em;text-transform:uppercase} .con-section p{font-size:.84rem;line-height:1.6;color:var(--ink);margin-bottom:8px} .con-section p:last-child{margin-bottom:0} .con-section ul{margin:6px 0 8px 18px;font-size:.82rem;line-height:1.55} .con-section li{margin-bottom:3px} .con-section strong{color:#7a5408} .con-callout{background:rgba(184,128,15,.07);border-left:3px solid #b8800f; padding:9px 12px;margin:8px 0;border-radius:0 6px 6px 0;font-size:.8rem;line-height:1.5} .con-callout strong{color:#7a5408} .con-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:10px 0} .con-stat{background:var(--surface);border-radius:8px;padding:10px;text-align:center; border:1px solid var(--border)} .con-stat-num{display:block;font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.4rem; font-weight:700;color:#7a5408;line-height:1} .con-stat-lbl{display:block;font-size:.66rem;color:var(--muted); letter-spacing:.06em;text-transform:uppercase;margin-top:4px} .con-timeline{position:relative;padding-left:18px;margin:10px 0} .con-timeline::before{content:'';position:absolute;left:5px;top:6px;bottom:6px; width:2px;background:#b8800f;opacity:.3} .con-tl-item{position:relative;margin-bottom:11px;padding-left:6px} .con-tl-item::before{content:'';position:absolute;left:-17px;top:4px;width:10px;height:10px; border-radius:50%;background:#b8800f;border:2px solid #fff;box-shadow:0 0 0 1px #b8800f} .con-tl-date{display:block;font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1rem; font-weight:700;color:#7a5408;line-height:1.1} .con-tl-name{display:block;font-size:.78rem;font-weight:700;color:var(--ink);margin-top:2px} .con-tl-txt{display:block;font-size:.76rem;color:var(--muted);line-height:1.5;margin-top:3px} .con-table{width:100%;border-collapse:collapse;font-size:.78rem;margin:8px 0} .con-table th{background:rgba(184,128,15,.08);color:#7a5408;text-align:left; padding:7px 9px;font-weight:700;border-bottom:2px solid #b8800f;font-size:.72rem; letter-spacing:.04em;text-transform:uppercase} .con-table td{padding:7px 9px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.4} .con-table tr:last-child td{border-bottom:none} /* ── ECRAN REGIONS ── */ .reg-hero{background:linear-gradient(135deg,#c8542a 0%,#7a3018 100%);color:#fff; border-radius:10px;padding:18px 16px;margin-bottom:14px; box-shadow:0 3px 12px rgba(0,0,0,.18)} .reg-hero h2{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.7rem;font-weight:600; margin-bottom:4px} .reg-hero p{font-size:.82rem;line-height:1.55;opacity:.94} .reg-card{background:var(--card);border:1.5px solid var(--border);border-radius:10px; margin-bottom:10px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06)} .reg-card-hd{background:linear-gradient(90deg,rgba(200,84,42,.1),transparent); padding:11px 14px;border-bottom:1px solid var(--border); border-left:4px solid #c8542a;display:flex;align-items:center;justify-content:space-between;gap:8px} .reg-card-hd h3{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600; color:#7a3018;line-height:1.1} .reg-card-hd-jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:.95rem;color:#c8542a; font-weight:700;letter-spacing:.05em} .reg-card-body{padding:11px 14px} .reg-card-body p{font-size:.82rem;line-height:1.55;color:var(--ink);margin-bottom:6px} .reg-card-body p:last-child{margin-bottom:0} .reg-loc{font-size:.74rem;color:var(--muted);font-style:italic;margin-bottom:6px;display:block} .reg-villes{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px} .reg-ville-chip-link{background:rgba(200,84,42,.15);color:#7a3018;font-size:.7rem;cursor:pointer;text-decoration:none;font-weight:700;border:none;font-family:inherit;} .reg-ville-chip-link:hover{background:rgba(200,84,42,.28)} .reg-ville-chip{background:rgba(200,84,42,.08);color:#7a3018;font-size:.7rem; font-weight:700;padding:3px 9px;border-radius:11px;border:1px solid rgba(200,84,42,.2)} .reg-sites{font-size:.78rem;line-height:1.55;color:var(--ink)} .reg-sites strong{color:#7a3018} .reg-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px} /* ── CARTE DU JAPON intégrée (screen-hub-visiter) — tracé réel ── */ .jmap-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px; padding:10px 6px 6px;margin-bottom:10px;box-shadow:0 2px 10px rgba(0,0,0,.06)} .jmap-title{display:flex;align-items:baseline;justify-content:space-between;padding:0 8px 8px} .jmap-title-main{font-size:.92rem;font-weight:700;color:var(--ink)} .jmap-title-sub{font-size:.66rem;color:var(--muted)} #jmap-svg{display:block;width:100%;height:auto;background:linear-gradient(180deg,#eef4f7,#e7eff0);border-radius:8px} .jmap-island{stroke:#fff;stroke-width:1.1;stroke-linejoin:round} .jmap-okinawa-box{fill:#2e9a9a;stroke:rgba(255,255,255,.6);stroke-width:1;stroke-dasharray:4,3} .jmap-region{cursor:pointer} .jmap-region-label{fill:#fff;font-size:12px;font-weight:700;text-anchor:middle;pointer-events:none; paint-order:stroke;stroke:rgba(0,0,0,.45);stroke-width:3px} .jmap-region-jp{fill:rgba(255,255,255,.9);font-size:8.5px;font-family:Noto Sans JP,'Noto Serif JP',serif; text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:2.5px} .jmap-region:active .jmap-region-label{fill:#f4c542} .jmap-note{fill:var(--muted);font-size:8px;font-style:italic;text-anchor:middle} .jmap-dot{fill:#fff;stroke:rgba(0,0,0,.4);stroke-width:.6;cursor:pointer} .jmap-place:active .jmap-dot{fill:#f4c542} .jmap-place-major .jmap-dot{stroke-width:.8} .jmap-place-label{fill:var(--ink);font-size:9.5px;font-weight:700;pointer-events:none; paint-order:stroke;stroke:var(--card);stroke-width:3px} /* ── Carte détaillée de Hokkaidō (tracé réel) ── */ #hokkmap-svg,#kyumap-svg,#tohmap-svg,#shkmap-svg{display:block;width:100%;height:auto;background:linear-gradient(180deg,#7f97ab,#8fa5b8);border-radius:8px} .hokkmap-land{fill:#f5f2ea;stroke:#4a5a68;stroke-width:1} .hokkmap-place{cursor:pointer} .hokkmap-dot{fill:#c8302a;stroke:#fff;stroke-width:.7;cursor:pointer} .hokkmap-place:active .hokkmap-dot{fill:#f4c542} .hokkmap-place-major .hokkmap-dot{fill:#a8202a;stroke-width:.9} .hokkmap-lead{stroke:#4a5a68;stroke-width:.6;stroke-dasharray:1.2,1.2;pointer-events:none} .hokkmap-label{fill:var(--ink);font-size:10.5px;font-weight:700;pointer-events:none; paint-order:stroke;stroke:#f5f2ea;stroke-width:3px} .reg-tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;background:var(--card);border:1.5px solid var(--border);border-radius:9px;cursor:pointer;transition:border-color .15s} .reg-tile:active{opacity:.8} .reg-tile.active{border-color:var(--jp);background:rgba(200,84,42,.06)} .reg-tile-emoji{font-size:1.3rem;line-height:1} .reg-tile-name{font-size:.78rem;font-weight:700;color:var(--ink)} .reg-tile-jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:.65rem;color:var(--muted)} /* ── VOCAB SETUP COMPACT ── */ .vs-row{display:flex;gap:8px;margin-bottom:10px} .vs-btn{flex:1;padding:9px 8px;border:1.5px solid var(--border2);background:var(--surface); border-radius:6px;font-size:.88rem;color:var(--muted);cursor:pointer; transition:all .18s;letter-spacing:.02em;font-family:Noto Sans JP,'Lato',sans-serif} .vs-btn:hover{border-color:var(--jp);color:var(--ink)} .vs-btn.selected{border-color:var(--jp);background:rgba(176,90,40,.08); color:var(--jp);font-weight:700} .home-section{background:var(--card);border:1.5px solid var(--border);border-radius:10px; overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.07)} .home-section-hd{padding:9px 14px;border-bottom:1px solid var(--border); font-family:Noto Sans JP,'Lato',sans-serif;font-size:.8rem;font-weight:700; color:var(--muted);letter-spacing:.12em;text-transform:uppercase} .home-section-hd.s-syntaxe{border-left:4px solid #2a7a5a} .home-btn{flex:1;min-width:0;padding:8px 4px;cursor:pointer;text-align:center; background:var(--card);border:none;border-right:1px solid var(--border); transition:background .18s;font-family:Noto Sans JP,'Lato',sans-serif; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px} .home-btn:last-child{border-right:none} .home-btn:active{background:var(--surface)} .home-btn.hb-kana:active,.home-btn.hb-kana:hover{background:rgba(42,94,138,.07)} .home-btn.hb-kanji:active,.home-btn.hb-kanji:hover{background:rgba(90,58,138,.07)} .home-btn.hb-quiz-lire:active,.home-btn.hb-quiz-lire:hover{background:rgba(42,94,138,.07)} .home-btn.hb-vocab-quiz:active,.home-btn.hb-vocab-quiz:hover{background:rgba(176,90,40,.07)} .home-btn.hb-listes:active,.home-btn.hb-listes:hover{background:rgba(176,90,40,.07)} .home-btn.hb-japon:active,.home-btn.hb-japon:hover{background:rgba(90,58,138,.07)} /* ── TOPNAV ── */ .topnav{display:flex;align-items:center;gap:10px;margin-bottom:10px;position:sticky;top:0;z-index:20;background:var(--bg);padding:10px 0;box-shadow:0 4px 10px -4px rgba(0,0,0,.15)} .nav-back{flex-shrink:0;padding:8px 14px;border:none;background:transparent; color:var(--muted);border-radius:6px;font-size:.9rem;letter-spacing:.04em; cursor:pointer;transition:all .18s;font-family:Noto Sans JP,'Lato',sans-serif} .nav-back:hover{color:var(--ink)} .nav-back.home{color:var(--accent)} .nav-back.home:hover{background:rgba(138,106,26,.08)} .nav-home{flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center; border:none;background:transparent;color:var(--accent);border-radius:6px; font-size:1.1rem;cursor:pointer;transition:all .18s;line-height:1} .nav-home:hover{background:rgba(138,106,26,.08)} .nav-title{flex:1;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center} .nav-stop{flex-shrink:0;padding:7px 12px;border:1.5px solid var(--red);background:transparent; color:var(--red);border-radius:6px;font-size:.82rem;cursor:pointer;transition:all .18s} .nav-stop:hover{background:var(--red);color:#fff} /* ── CARD / FORM ── */ .card{background:var(--card);border:1px solid var(--border);border-radius:8px; padding:20px 18px 22px;box-shadow:0 2px 10px rgba(0,0,0,.08)} .field-label{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); display:block;margin-bottom:10px} .divider{height:1px;background:var(--border);margin:16px 0} .lect-card{background:var(--card);border:1.5px solid var(--border2);border-radius:8px; padding:18px 14px;cursor:pointer;text-align:center;transition:all .22s;color:var(--ink)} .lect-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.12)} /* ── STICKY GO BTN ── */ .sticky-go{position:-webkit-sticky;position:sticky;top:10px;z-index:50;margin-bottom:16px} @supports not (position:sticky){.sticky-go{position:static}} .start-btn{width:100%;padding:15px;border:none;border-radius:7px; font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.3rem;cursor:pointer; letter-spacing:.06em;transition:all .2s;color:#fff; display:flex;align-items:center;justify-content:center;gap:10px} .start-btn.vocab-start{background:linear-gradient(135deg,#b05a28,#8a3e10)} .start-btn.kana-start{background:linear-gradient(135deg,#2a5e8a,#1a3e60)} .start-btn.kanji-start{background:linear-gradient(135deg,#5a3a8a,#3a1e60)} .start-btn:hover{opacity:.88;transform:translateY(-1px)} .start-btn:active{transform:translateY(0)} /* ── DROPDOWN ── */ .dd-wrap{position:relative;margin-bottom:16px;user-select:none} .dd-selected{display:flex;align-items:center;justify-content:space-between; padding:11px 14px;background:var(--surface);border:1.5px solid var(--border2); border-radius:6px;cursor:pointer;transition:border-color .2s;gap:10px} .dd-selected:hover,.dd-wrap.open .dd-selected{border-color:var(--jp)} .dd-selected-text{color:var(--ink);font-size:.95rem;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dd-arrow{color:var(--accent);font-size:.85rem;flex-shrink:0;transition:transform .2s} .dd-wrap.open .dd-arrow{transform:rotate(180deg)} .dd-list{position:fixed;background:var(--card);border:1.5px solid var(--jp);border-radius:6px; z-index:999;max-height:55vh;overflow-y:auto;box-shadow:0 6px 24px rgba(0,0,0,.15);display:none} .dd-wrap.open .dd-list{display:block} .dd-item{padding:11px 16px;font-size:.92rem;color:var(--ink);cursor:pointer; transition:background .15s;border-bottom:1px solid var(--border)} .dd-item:last-child{border-bottom:none} .dd-item:hover{background:rgba(176,90,40,.07)} .dd-item.active{background:rgba(176,90,40,.1)} .dd-group-label{padding:6px 16px 4px;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);border-bottom:1px solid var(--border);background:var(--surface);font-weight:700} /* ── MODE BUTTONS ── */ .mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px} .mode-btn{border:1.5px solid var(--border2);background:var(--surface);border-radius:6px; padding:14px 12px;cursor:pointer;text-align:center;transition:all .2s;color:var(--ink)} .mode-btn:hover{border-color:var(--accent);background:rgba(138,106,26,.06)} .mode-btn.selected{border-color:var(--jp);background:rgba(176,90,40,.08)} .mode-icon{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.5rem;display:block;margin-bottom:6px;color:var(--jp)} /* ── QUIZ ── */ .quiz-prog{margin-bottom:16px} .prog-meta{display:flex;justify-content:space-between;margin-bottom:6px} .prog-label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .prog-score{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.1rem;color:var(--accent)} .prog-track{height:4px;background:var(--border);border-radius:2px;overflow:hidden} .prog-fill{height:100%;background:linear-gradient(90deg,var(--jp),var(--accent));transition:width .5s cubic-bezier(.4,0,.2,1)} .prog-fill.kana-fill{background:linear-gradient(90deg,var(--kana2),var(--kana))} .cat-pill{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:#fff;background:var(--jp);padding:4px 14px;border-radius:20px; margin-bottom:14px;font-weight:700} .cat-pill.kana-pill{background:var(--kana2)} .cat-pill.kanji-pill{background:var(--kanji2)} .q-card{background:var(--card);border:1px solid var(--border);border-radius:8px; padding:22px 20px 24px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin-bottom:14px} .q-num{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); margin-bottom:12px;display:flex;align-items:center;gap:8px} .q-num::after{content:'';flex:1;height:1px;background:var(--border)} .q-word{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:2.6rem;color:var(--ink); text-align:center;margin:10px 0 4px;line-height:1.2;font-weight:700} .q-word.jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:2.2rem;color:var(--jp);font-weight:700} .q-romaji{text-align:center;font-size:.92rem;color:var(--muted);letter-spacing:.06em;margin-bottom:4px;font-style:italic} .q-instr{text-align:center;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px} .options{display:flex;flex-direction:column;gap:9px} .opt-btn{border:1.5px solid var(--border);background:var(--surface);border-radius:8px; padding:11px 16px;cursor:pointer;text-align:center;transition:all .16s; color:var(--ink);width:100%} .opt-btn:hover:not(:disabled){border-color:var(--accent);background:rgba(138,106,26,.07)} .opt-btn:disabled{cursor:default} .opt-btn.opt-correct{border-color:var(--correct);background:rgba(30,107,58,.09)} .opt-btn.opt-wrong{border-color:var(--wrong);background:rgba(146,32,16,.09)} .opt{border:1.5px solid var(--border);background:var(--surface);border-radius:6px; padding:14px 16px;cursor:pointer;text-align:left;transition:all .16s; display:flex;align-items:center;gap:12px;color:var(--ink)} .opt:hover:not(:disabled){border-color:var(--accent);background:rgba(138,106,26,.06);transform:translateX(3px)} .opt:disabled{cursor:default} .opt-ltr{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);min-width:18px;font-weight:700} .opt-content{flex:1} .opt-main{font-size:1.05rem;color:var(--ink);display:block} .opt-main.jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.2rem;font-weight:700;color:var(--jp)} .opt-sub{font-size:.8rem;color:var(--muted);display:block;margin-top:2px;font-style:italic} .opt.correct{border-color:var(--correct);background:rgba(30,107,58,.1)} .opt.correct .opt-ltr{color:var(--correct)} .opt.wrong{border-color:var(--wrong);background:rgba(146,32,16,.1)} .opt.wrong .opt-ltr{color:var(--wrong)} .feedback{text-align:center;margin-top:12px;min-height:26px; font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.15rem;letter-spacing:.02em} .feedback.correct{color:var(--correct)} .feedback.wrong{color:var(--wrong)} .next-btn{display:block;margin:12px auto 0;padding:11px 32px; background:var(--surface);color:var(--ink);border:1.5px solid var(--border2); border-radius:6px;font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.05rem; letter-spacing:.06em;cursor:pointer;transition:all .18s} .next-btn:hover{border-color:var(--accent);color:var(--accent)} /* ── RESULTS ── */ .results-card{background:var(--card);border:1px solid var(--border);border-radius:8px; padding:32px 24px;box-shadow:0 2px 10px rgba(0,0,0,.08);text-align:center} .score-lbl{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .score-big{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:5rem;line-height:1;margin:12px 0 4px;color:var(--ink)} .score-big span{color:var(--jp)} .score-out{color:var(--muted);font-size:1.4rem;vertical-align:super} .score-msg{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.15rem;color:var(--ink);margin:10px 0 4px} .score-jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.6rem;color:var(--jp);font-weight:700; display:block;margin-bottom:22px} .res-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px} .btn-o{padding:10px 18px;border:1.5px solid var(--border2);background:transparent;color:var(--ink); border-radius:5px;font-size:.9rem;letter-spacing:.06em;cursor:pointer;transition:all .18s} .btn-o:hover{border-color:var(--ink)} .region-hand-btn{width:100%;margin-top:4px;padding:10px 18px;border:1.5px solid var(--border2); background:transparent;border-radius:5px;cursor:pointer;transition:all .18s; display:flex;align-items:center;justify-content:center} .region-hand-btn:hover{border-color:var(--accent);background:rgba(138,106,26,.07)} .region-hand-btn svg{display:block} .btn-ch{padding:10px 18px;border:1.5px solid var(--muted);background:transparent;color:var(--muted); border-radius:5px;font-size:.9rem;letter-spacing:.06em;cursor:pointer;transition:all .18s} .btn-ch:hover{color:var(--ink);border-color:var(--ink)} .btn-s{padding:10px 18px;border:1.5px solid var(--jp);background:rgba(176,90,40,.12);color:var(--jp); border-radius:5px;font-size:.9rem;letter-spacing:.06em;cursor:pointer;transition:all .18s} .btn-s:hover{background:rgba(176,90,40,.22)} .rev-toggle{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); background:none;border:none;cursor:pointer;margin:16px auto 0;display:block; text-decoration:underline;text-underline-offset:3px} .rev-table{margin-top:14px;display:none;text-align:left;width:100%;border-collapse:collapse} .rev-table.open{display:table} .rev-table th{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); padding:6px 8px;border-bottom:1px solid var(--border);font-weight:600} .rev-table td{padding:7px 8px;font-size:.9rem;border-bottom:1px solid var(--border);color:var(--ink)} .jp-cell{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1rem;font-weight:700;color:var(--jp)} .r-ok{color:var(--correct)}.r-ko{color:var(--wrong)} /* ══════════════════════════════ KANA SETUP ══════════════════════════════ */ .kana-setup-card{background:var(--card);border:1px solid var(--border);border-radius:8px; padding:20px 18px 22px;box-shadow:0 2px 10px rgba(0,0,0,.08)} .script-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px} .script-btn{border:1.5px solid var(--border2);background:var(--surface);border-radius:6px; padding:8px 10px;cursor:pointer;text-align:center;transition:all .2s; color:var(--muted);font-size:.88rem;letter-spacing:.04em; display:flex;align-items:center;justify-content:center} .script-btn:hover{border-color:var(--kana2);color:var(--ink)} .script-btn.selected{border-color:var(--kana2);background:rgba(42,94,138,.08);color:var(--kana2);font-weight:700} .script-icon{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.1rem;color:var(--kana2)} /* Boutons sens kana compacts */ .kana-sens-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px} .kana-sens-btn{border:1.5px solid var(--border2);background:var(--surface);border-radius:6px; padding:6px 8px;cursor:pointer;text-align:center;transition:all .2s; font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:.95rem;color:var(--kana2);letter-spacing:.04em} .kana-sens-btn:hover{border-color:var(--kana2);background:rgba(42,94,138,.06)} .kana-sens-btn.selected{border-color:var(--kana2);background:rgba(42,94,138,.1);font-weight:700} .kana-row-selector{margin-bottom:14px;display:flex;flex-direction:column;gap:7px} .kana-row-item{display:flex;align-items:center;gap:10px;background:var(--surface); border:1.5px solid var(--border2);border-radius:6px;padding:9px 12px; cursor:pointer;transition:all .18s;user-select:none} .kana-row-item:hover{border-color:var(--kana2)} .kana-row-item.selected{border-color:var(--kana2);background:rgba(42,94,138,.08)} .kana-row-chars{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.25rem;color:var(--kana2); min-width:180px;letter-spacing:.06em;flex:1} .kana-row-label{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); min-width:70px;text-align:right} .kana-select-all{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px; padding:0 0 6px;display:block} .kana-select-all:hover{color:var(--kana2)} .kana-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px} .kana-mode-btn{border:1.5px solid var(--border2);background:var(--surface);border-radius:6px; padding:14px 12px;cursor:pointer;text-align:center;transition:all .2s;color:var(--ink)} .kana-mode-btn:hover{border-color:var(--kana2)} .kana-mode-btn.selected{border-color:var(--kana2);background:rgba(42,94,138,.08)} .kana-mode-btn .mode-icon{color:var(--kana2)} /* ══════════════════════════════ KANA QUIZ ══════════════════════════════ */ .kana-q-card{background:var(--card);border:1px solid var(--border);border-radius:8px; padding:24px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin-bottom:14px;text-align:center} .kana-big{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:5.5rem;line-height:1; color:var(--kana2);margin-bottom:6px} .kana-big.roman{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:3.8rem;color:var(--ink)} .kana-sub-label{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:22px} .kana-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px} .kana-opt{border:1.5px solid var(--border);background:var(--surface);border-radius:6px; padding:16px 10px;cursor:pointer;text-align:center;transition:all .16s;color:var(--ink); font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.8rem;position:relative} .kana-opt:hover:not(.answered){border-color:var(--kana2);background:rgba(42,94,138,.07)} .kana-opt.selected:not(.answered){border-color:var(--kana2);background:rgba(42,94,138,.12); box-shadow:0 0 0 2px var(--kana2)} .kana-opt.correct{border-color:var(--correct);background:rgba(30,107,58,.1)} .kana-opt.wrong{border-color:var(--wrong);background:rgba(146,32,16,.1)} .kana-opt-sub{font-family:Noto Sans JP,'Lato',sans-serif;font-size:.72rem;color:var(--muted);display:block;margin-top:3px} .kana-opt.roman-opt{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.6rem} .validate-btn{display:block;margin:12px auto 0;padding:11px 36px; background:var(--surface);color:var(--muted);border:1.5px solid var(--border2); border-radius:6px;font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.05rem; letter-spacing:.06em;cursor:default;transition:all .2s} .validate-btn.active{color:var(--kana2);border-color:var(--kana2);cursor:pointer} .validate-btn.active:hover{background:rgba(42,94,138,.08)} .kana-prog-meta{display:flex;justify-content:space-between;margin-bottom:6px} .kana-prog-label{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .kana-prog-score{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.1rem;color:var(--kana2)} .kana-results{background:var(--card);border:1px solid var(--border);border-radius:8px; padding:28px 20px;box-shadow:0 2px 10px rgba(0,0,0,.08);text-align:center} .kana-score-jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.6rem;color:var(--kana2);font-weight:700; display:block;margin-bottom:18px} .kana-stat{display:flex;justify-content:center;gap:24px;margin:14px 0 22px} .kana-stat-item{text-align:center} .kana-stat-num{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:2.8rem;display:block;color:var(--ink)} .kana-stat-lbl{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .kana-ok-num{color:var(--correct)}.kana-ko-num{color:var(--wrong)} .kana-rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:7px;margin-top:10px} .kana-rev-cell{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:8px 5px;text-align:center} .kana-rev-cell.ok{border-color:var(--correct);background:rgba(30,107,58,.07)} .kana-rev-cell.ko{border-color:var(--wrong);background:rgba(146,32,16,.07)} .kana-rev-char{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.45rem;color:var(--kana2);display:block} .kana-rev-ro{font-size:.7rem;color:var(--muted);margin-top:1px} .kana-detail-wrap{margin-top:18px;display:none} .kana-detail-wrap.open{display:block} /* ══════════════════════════════ KANJI SETUP + FC ══════════════════════════════ */ .kanji-setup-card{background:var(--card);border:1px solid var(--border);border-radius:8px; padding:20px 18px 22px;box-shadow:0 2px 10px rgba(0,0,0,.08)} .level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px} .level-btn{border:1.5px solid var(--border2);background:var(--surface);border-radius:6px; padding:13px 8px;cursor:pointer;text-align:center;transition:all .2s;color:var(--muted);font-size:.88rem} .level-btn:hover{border-color:var(--kanji2);color:var(--ink)} .level-btn.selected{border-color:var(--kanji2);background:rgba(90,58,138,.08);color:var(--kanji2);font-weight:700} .level-btn .lv-num{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.9rem;color:var(--kanji2)} .level-btn .lv-desc{font-size:.68rem;color:var(--muted);line-height:1.4} .kj-card{background:var(--card);border:1px solid var(--border);border-radius:8px; padding:22px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin-bottom:14px} .kj-face{display:flex;flex-direction:column;align-items:center;justify-content:center; min-height:180px;transition:opacity .2s} .kj-face.hidden{opacity:0;pointer-events:none} .kj-char{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:5.5rem;line-height:1; color:var(--kanji2);margin-bottom:6px} .kj-back-content{display:none;text-align:center} .kj-back-content.visible{display:block} .kj-readings{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.15rem;color:var(--kanji2);margin-bottom:4px;line-height:1.7} .kj-meaning{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.9rem;color:var(--ink);margin-bottom:4px} .kj-hint-txt{font-size:.78rem;color:var(--muted);margin-top:12px;letter-spacing:.1em} .mastery-dots{display:flex;gap:6px;margin-top:8px;justify-content:center} .dot{width:11px;height:11px;border-radius:50%;background:var(--border);transition:background .3s} .dot.filled{background:var(--kanji2)} .kj-new-badge{display:inline-block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase; padding:3px 9px;border-radius:9px;background:rgba(138,106,26,.15);color:var(--accent); font-weight:700;margin-bottom:5px} .kj-flip-btn{display:block;margin:10px auto 0;padding:11px 32px; background:var(--surface);color:var(--muted);border:1.5px solid var(--border2); border-radius:6px;font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.05rem; letter-spacing:.06em;cursor:pointer;transition:all .2s} .kj-flip-btn:hover{border-color:var(--kanji2);color:var(--kanji2)} .kj-controls{display:none;gap:10px;justify-content:center;margin-top:12px} .kj-controls.visible{display:flex} .kj-btn{padding:11px 24px;border:1.5px solid var(--border2);background:var(--surface); color:var(--ink);border-radius:6px;font-size:.92rem;letter-spacing:.06em;cursor:pointer;transition:all .18s} .kj-btn.know{border-color:var(--correct);color:var(--correct);background:rgba(30,107,58,.07)} .kj-btn.know:hover{background:rgba(30,107,58,.15)} .kj-btn.miss{border-color:var(--wrong);color:var(--wrong)} .kj-btn.miss:hover{background:rgba(146,32,16,.1)} .kj-progress-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:5px} .kj-progress-fill{height:100%;background:linear-gradient(90deg,var(--kanji2),var(--kanji));transition:width .5s} .kj-level-sub{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;display:block;margin-bottom:14px} .kj-results{background:var(--card);border:1px solid var(--border);border-radius:8px; padding:28px 20px;box-shadow:0 2px 10px rgba(0,0,0,.08);text-align:center} .kj-res-jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.6rem;color:var(--kanji2);font-weight:700; display:block;margin-bottom:18px} .kj-stat{display:flex;justify-content:center;gap:24px;margin:14px 0 22px} .kj-stat-item{text-align:center} .kj-stat-num{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:2.8rem;display:block;color:var(--ink)} .kj-stat-lbl{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .kj-mastered-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px;margin-top:10px} .kj-mastered-cell{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:8px 4px;text-align:center} .kj-mastered-cell.mastered{border-color:var(--kanji2);background:rgba(90,58,138,.07)} .vn5-char{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:clamp(1.7rem,8vw,2.7rem);line-height:1.35; text-align:center;max-width:92%;overflow-wrap:break-word;color:var(--ink)} .stop-dot-btn{display:flex;align-items:center;gap:6px;background:none;border:0;padding:6px 4px;cursor:pointer} .stop-dot{width:13px;height:13px;border-radius:50%;background:var(--wrong);display:inline-block;box-shadow:0 0 0 3px rgba(146,32,16,.12)} .vn5-prompt{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.8rem;color:var(--ink);margin-bottom:14px} #screen-vocn5-fc .q-card,#screen-vocn5fr-fc .q-card{padding:14px 14px 16px} #screen-vocn5-fc .options,#screen-vocn5fr-fc .options{gap:6px} #screen-vocn5-fc .opt,#screen-vocn5fr-fc .opt{padding:8px 12px;background:var(--card)} #screen-vil-fc .q-card,#screen-gai-fc .q-card{padding:14px 14px 16px} #screen-vil-fc .options,#screen-gai-fc .options{gap:6px} #screen-vil-fc .opt,#screen-gai-fc .opt{padding:8px 12px;background:var(--card)} #screen-kanji-fc .q-card{padding:14px 14px 16px} #screen-kanji-fc .options{gap:6px} #screen-kanji-fc .opt{padding:8px 12px;background:var(--card)} #screen-kanji-fc .feedback.fb-ok{background:var(--card);border:1.5px solid var(--correct);border-radius:8px;padding:12px 14px;color:var(--correct)} #screen-kanji-fc .feedback.fb-ko{background:var(--card);border:1.5px solid var(--wrong);border-radius:8px;padding:12px 14px;color:var(--ink)} #screen-kanji-fc .feedback.fb-ko strong{color:var(--wrong)} #screen-kanji-fc .feedback.fb-ok strong{color:var(--correct)} /* Comptages masqués mais toujours calculés en interne (mastère, complétion de partie) */ #screen-kanji-fc .kana-prog-label,#screen-kanji-fc #kj-score-live, #screen-kanji-fc .kj-progress-bar,#screen-kanji-fc .kj-level-sub, #screen-vocn5-fc .kana-prog-label,#screen-vocn5-fc #vn5-score-live, #screen-vocn5-fc .kj-progress-bar,#screen-vocn5-fc .kj-level-sub, #screen-vocn5fr-fc .kana-prog-label,#screen-vocn5fr-fc #vn5fr-score-live, #screen-vocn5fr-fc .kj-progress-bar,#screen-vocn5fr-fc .kj-level-sub, #screen-vil-fc .kana-prog-label,#screen-vil-fc #vil-score-live, #screen-vil-fc .kj-progress-bar,#screen-vil-fc .kj-level-sub, #screen-gai-fc .kana-prog-label,#screen-gai-fc #gai-score-live, #screen-gai-fc .kj-progress-bar,#screen-gai-fc .kj-level-sub{display:none} #screen-vil-fc .feedback.fb-ok,#screen-gai-fc .feedback.fb-ok{background:var(--card);border:1.5px solid var(--correct);border-radius:8px;padding:12px 14px;color:var(--correct)} #screen-vil-fc .feedback.fb-ko,#screen-gai-fc .feedback.fb-ko{background:var(--card);border:1.5px solid var(--wrong);border-radius:8px;padding:12px 14px;color:var(--ink)} #screen-vil-fc .feedback.fb-ko strong,#screen-gai-fc .feedback.fb-ko strong{color:var(--wrong)} #screen-vil-fc .feedback.fb-ok strong,#screen-gai-fc .feedback.fb-ok strong{color:var(--correct)} .noun-tag{display:inline-block;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase; padding:3px 10px;border-radius:10px;margin-bottom:10px;font-weight:700} .noun-tag.noun-propre{background:rgba(90,58,138,.1);color:var(--kanji2)} .noun-tag.noun-commun{background:rgba(42,94,138,.1);color:var(--kana2)} .lang-quiz-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .lqg-col{display:flex;flex-direction:column;gap:6px} .lqg-head{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); font-weight:700;margin-bottom:2px} .lqg-link{font-size:.9rem;cursor:pointer;color:#000;font-weight:700;text-align:left} #screen-vocn5-fc .feedback.fb-ok,#screen-vocn5fr-fc .feedback.fb-ok{background:var(--card);border:1.5px solid var(--correct);border-radius:8px;padding:12px 14px;color:var(--correct)} #screen-vocn5-fc .feedback.fb-ko,#screen-vocn5fr-fc .feedback.fb-ko{background:var(--card);border:1.5px solid var(--wrong);border-radius:8px;padding:12px 14px;color:var(--ink)} #screen-vocn5-fc .feedback.fb-ko strong,#screen-vocn5fr-fc .feedback.fb-ko strong{color:var(--wrong)} #screen-vocn5-fc .feedback.fb-ok strong,#screen-vocn5fr-fc .feedback.fb-ok strong{color:var(--correct)} .kj-cell-char{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.6rem;color:var(--kanji2);display:block} .kj-cell-ro{font-size:.66rem;color:var(--muted);margin-top:2px} .kj-next-btn{display:block;margin:18px auto 0;padding:11px 36px; background:linear-gradient(135deg,var(--kanji2),var(--kanji));color:#fff;border:none; border-radius:6px;font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.1rem; cursor:pointer;transition:opacity .2s;letter-spacing:.06em} .kj-next-btn:hover{opacity:.85} .kj-next-btn:disabled{opacity:.45;cursor:default} .kj-rev-wrap{margin-top:18px;display:none} .kj-rev-wrap.open{display:block} .circ-dd-item{display:block;width:100%;text-align:left;padding:7px 12px;background:none;border:none;font-family:Noto Sans JP,'Lato',sans-serif;font-size:.82rem;color:var(--ink);cursor:pointer} .circ-dd-item:hover{background:var(--surface)} .circ-dd-item.active{color:var(--kanji2);font-weight:700} .circ-filter-btn{padding:6px 13px;border:1.5px solid var(--border2);border-radius:20px; background:var(--surface);font-size:.75rem;font-weight:700;letter-spacing:.06em; color:var(--muted);cursor:pointer;transition:all .18s;white-space:nowrap;font-family:Noto Sans JP,'Lato',sans-serif} .circ-filter-btn:hover{border-color:var(--kanji2);color:var(--kanji2)} .circ-filter-btn.active{border-color:var(--kanji2);background:rgba(90,58,138,.1);color:var(--kanji2)} .circ-card{background:var(--card);border:1px solid var(--border);border-radius:10px; margin-bottom:14px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.07)} .circ-card.hidden{display:none} .circ-head{padding:14px 15px 12px;border-bottom:1px solid var(--border);cursor:pointer; display:flex;align-items:flex-start;gap:12px;transition:background .15s} .circ-head:hover{background:rgba(90,58,138,.03)} .circ-head-left{flex:1} .circ-badge-row{display:flex;align-items:center;gap:6px;margin-bottom:5px;flex-wrap:wrap} .circ-dur-badge{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:2px 9px;border-radius:9px;color:#fff} .circ-dur-badge.w1{background:#42287a} .circ-dur-badge.w2{background:#b05a28} .circ-dur-badge.w3{background:#1a6a3a} .circ-theme-badge{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:2px 9px;border-radius:9px;background:rgba(200,168,74,.18);color:#a87830} .circ-title{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.22rem;font-weight:700; color:var(--ink);line-height:1.25;margin-bottom:3px} .circ-subtitle{font-size:.78rem;color:var(--muted);line-height:1.4} .circ-toggle-icon{font-size:1rem;color:var(--muted);flex-shrink:0;transition:transform .22s; padding-top:3px} .circ-card.open .circ-toggle-icon{transform:rotate(180deg)} .circ-body{display:none;padding:0 15px 15px} .circ-card.open .circ-body{display:block} .circ-intro{font-size:.84rem;color:var(--ink);line-height:1.65;margin:12px 0 14px; padding-bottom:12px;border-bottom:1px solid var(--border)} .circ-days{display:flex;flex-direction:column;gap:0} .circ-day{border-bottom:1px solid var(--border)} .circ-day:last-child{border-bottom:none} .circ-day-head{display:flex;align-items:center;gap:10px;padding:10px 0;cursor:pointer} .circ-day-num{flex-shrink:0;width:32px;height:32px;border-radius:50%; background:rgba(90,58,138,.1);color:var(--kanji2);font-size:.78rem;font-weight:700; display:flex;align-items:center;justify-content:center;letter-spacing:.04em} .circ-day-title{flex:1;font-size:.88rem;font-weight:700;color:var(--ink)} .circ-day-loc{font-size:.72rem;color:var(--muted);font-style:italic} .circ-day-arrow{font-size:.7rem;color:var(--muted);transition:transform .18s} .circ-day.open .circ-day-arrow{transform:rotate(180deg)} .circ-day-body{display:none;padding:0 0 10px 42px} .circ-day.open .circ-day-body{display:block} .circ-step{display:flex;align-items:flex-start;gap:8px;margin-bottom:7px} .circ-step:last-child{margin-bottom:0} .circ-step-dot{width:7px;height:7px;border-radius:50%;background:var(--kanji2); flex-shrink:0;margin-top:5px} .circ-step-text{font-size:.81rem;color:var(--ink);line-height:1.55} .circ-step-text strong{color:var(--kanji2)} .circ-tip-box{background:rgba(200,168,74,.07);border:1px solid rgba(200,168,74,.22); border-radius:7px;padding:10px 13px;margin-top:12px;font-size:.8rem; color:var(--ink);line-height:1.6} .circ-tip-box strong{color:#a87830} /* ══ FIN CIRCUITS ══ */ /* ══ PRÉPARER / SURVIE ══ */ .prep-tab-row{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px} .prep-tab{flex:1;padding:10px 6px;text-align:center;font-size:.75rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer; border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .18s} .prep-tab.active{color:var(--kanji2);border-bottom-color:var(--kanji2)} .prep-panel{display:none}.prep-panel.active{display:block} /* ── Dialogues tabs ── */ .dial-tab-row{display:flex;gap:0;border-bottom:2px solid var(--border); margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;background:var(--card)} .dial-tab-row::-webkit-scrollbar{display:none} .dial-tab{flex:0 0 auto;padding:9px 10px;text-align:center;font-size:.72rem; font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink); cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px; white-space:nowrap;transition:all .18s;opacity:.55} .dial-tab.active{color:var(--kanji2);border-bottom-color:var(--kanji2);opacity:1} .dial-panel{display:none}.dial-panel.active{display:block} .hist-top-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px} .hist-top-grid .tokyo-nav-label{font-size:.66rem} .prep-block{background:var(--card);border:1px solid var(--border);border-radius:10px; padding:14px 15px;margin-bottom:14px} .prep-block-title{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--kanji2);margin-bottom:10px;display:flex;align-items:center;gap:6px} .prep-block-icon{font-size:1.1rem} .prep-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0; border-bottom:1px solid var(--border)} .prep-row:last-child{border-bottom:none;padding-bottom:0} .prep-row-icon{font-size:1.2rem;flex-shrink:0;margin-top:1px} .prep-row-body{flex:1} .prep-row-label{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:2px} .prep-row-detail{font-size:.8rem;color:var(--muted);line-height:1.55} .prep-row-detail strong{color:var(--ink)} .prep-badge{display:inline-block;font-size:.62rem;font-weight:700;padding:2px 8px; border-radius:8px;margin-left:6px;vertical-align:middle} .prep-badge.ok{background:rgba(40,160,80,.15);color:#1a7a3a} .prep-badge.warn{background:rgba(200,100,20,.15);color:#a05010} .prep-badge.no{background:rgba(180,30,30,.12);color:#a02020} .prep-calc{background:rgba(90,58,138,.06);border:1px solid rgba(90,58,138,.15); border-radius:8px;padding:12px 14px;margin-top:10px} .prep-calc-title{font-size:.75rem;font-weight:700;color:var(--kanji2);margin-bottom:8px} .prep-calc input[type=number]{width:80px;padding:6px 8px;border:1.5px solid var(--border2); border-radius:6px;background:var(--surface);color:var(--ink);font-size:.9rem; font-family:inherit;margin-right:6px} .prep-calc-result{margin-top:8px;font-size:.82rem;color:var(--ink);line-height:1.6} .prep-calc-result strong{color:var(--kanji2);font-size:.95rem} .survie-section{margin-bottom:20px} .survie-section-title{font-size:.62rem;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--kanji2);padding:8px 0 10px; border-bottom:2px solid rgba(90,58,138,.15);margin-bottom:12px; display:flex;align-items:center;gap:8px} .survie-card{background:var(--card);border:1px solid var(--border);border-radius:10px; overflow:hidden;margin-bottom:10px} .survie-card-head{padding:11px 14px;cursor:pointer;display:flex;align-items:center; gap:10px;transition:background .15s} .survie-card-head:hover{background:rgba(90,58,138,.04)} .survie-card-icon{font-size:1.3rem;flex-shrink:0} .survie-card-title{flex:1;font-size:.92rem;font-weight:700;color:var(--ink)} .survie-card-sub{font-size:.73rem;color:var(--muted)} .survie-card-arrow{font-size:.7rem;color:var(--muted);transition:transform .2s} .survie-card.open .survie-card-arrow{transform:rotate(180deg)} .survie-card-body{display:none;padding:0 14px 14px;border-top:1px solid var(--border)} .survie-card.open .survie-card-body{display:block} .survie-step{display:flex;gap:8px;margin-top:10px} .survie-num{flex-shrink:0;width:22px;height:22px;border-radius:50%; background:var(--kanji2);color:#fff;font-size:.7rem;font-weight:700; display:flex;align-items:center;justify-content:center} .survie-step-text{font-size:.82rem;color:var(--ink);line-height:1.6;padding-top:2px} .survie-step-text strong{color:var(--kanji2)} .survie-warn-box{background:rgba(200,100,20,.08);border:1px solid rgba(200,100,20,.2); border-radius:7px;padding:9px 12px;margin-top:10px;font-size:.8rem; color:var(--ink);line-height:1.6} .survie-warn-box strong{color:#a05010} .survie-ok-box{background:rgba(40,160,80,.07);border:1px solid rgba(40,160,80,.2); border-radius:7px;padding:9px 12px;margin-top:10px;font-size:.8rem; color:var(--ink);line-height:1.6} .survie-ok-box strong{color:#1a7a3a} .survie-phrase-row{display:flex;align-items:baseline;gap:8px;padding:6px 0; border-bottom:1px solid var(--border)} .survie-phrase-row:last-child{border-bottom:none} .survie-phrase-fr{font-size:.82rem;color:var(--muted);flex:1} .survie-phrase-jp{font-size:.88rem;font-weight:700;color:var(--ink)} .survie-phrase-rom{font-size:.75rem;color:var(--kanji2);font-style:italic} /* ══ FIN PRÉPARER / SURVIE ══ */ /* ═══════ PWA / ANDROID ═══════ */ html{-webkit-tap-highlight-color:transparent;overscroll-behavior:none;} body{ padding-top:0;padding-bottom:env(safe-area-inset-bottom); padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right); overscroll-behavior-y:none;-webkit-overflow-scrolling:touch;touch-action:pan-y; -webkit-user-select:none;user-select:none; } p,span,div.japan-q-text,div.japan-expl{-webkit-user-select:text;user-select:text;} button:active,.opt:active,.japan-opt:active,.kana-opt:active, .home-btn:active,.lect-card:active,.theme-btn:active,.kana-row-item:active,.level-btn:active{ transform:scale(0.97);opacity:.88; } @media(max-width:700px){ .wrap{max-width:100%;padding:12px 12px calc(60px + env(safe-area-inset-bottom));} header{margin-bottom:14px;padding-bottom:10px;} } #pwa-banner{position:fixed;bottom:0;left:0;right:0;z-index:300; background:var(--card);border-top:1px solid var(--border2); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); display:flex;align-items:center;gap:12px;box-shadow:0 -2px 12px rgba(0,0,0,.12); animation:slideUp .4s ease;} #pwa-banner.hidden{display:none;} @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}} .pwa-icon{width:40px;height:40px;border-radius:8px;flex-shrink:0;} .pwa-text{flex:1;}.pwa-text strong{font-size:.9rem;color:var(--ink);display:block;margin-bottom:1px;} .pwa-text small{font-size:.72rem;color:var(--muted);} .pwa-install{padding:8px 14px;background:var(--jp);color:#fff;border:none;border-radius:6px; font-family:Noto Sans JP,'Lato',sans-serif;font-size:.84rem;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;} .pwa-dismiss{padding:8px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.2rem;flex-shrink:0;line-height:1;} /* ══ QUIZ JAPON ══ */ .japan-setup-card{background:var(--card);border:1px solid var(--border);border-radius:8px; padding:20px 18px 22px;box-shadow:0 2px 10px rgba(0,0,0,.08)} .theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px} .theme-btn{border:1.5px solid var(--border);background:var(--surface);border-radius:6px; padding:12px 10px;cursor:pointer;text-align:left;transition:all .18s; display:flex;align-items:center;gap:9px;opacity:.55} .theme-btn:hover{opacity:.85;border-color:var(--border2)} .theme-btn.selected{border:2px solid #2a5e8a;background:#2a5e8a; opacity:1;box-shadow:0 2px 8px rgba(42,94,138,.3)} .theme-btn.selected .theme-lbl{color:#fff;font-weight:700} .theme-btn.selected .theme-lbl small{color:rgba(255,255,255,.75)} .theme-btn:not(.selected) .theme-lbl{color:var(--muted)} .theme-btn:not(.selected) .theme-lbl small{color:var(--muted)} .theme-check{margin-left:auto;font-size:1rem;color:rgba(255,255,255,.9); opacity:0;transition:opacity .15s;flex-shrink:0} .theme-btn.selected .theme-check{opacity:1} .theme-lbl{font-size:.86rem;color:var(--ink);line-height:1.3} .theme-lbl small{font-size:.68rem;color:var(--muted);display:block;margin-top:1px} .japan-q-card{background:var(--card);border:1px solid var(--border);border-radius:8px; padding:20px 18px 22px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin-bottom:12px} .japan-q-num{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted); margin-bottom:10px;display:flex;align-items:center;gap:8px} .japan-q-num::after{content:'';flex:1;height:1px;background:var(--border)} .japan-theme-pill{display:inline-block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase; padding:3px 9px;border-radius:9px;background:rgba(138,106,26,.12);color:var(--accent); font-weight:700;margin-bottom:12px} .japan-q-text{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.5rem;color:var(--ink); line-height:1.42;margin-bottom:18px;font-weight:700} .japan-opts{display:flex;flex-direction:column;gap:8px} .japan-opt{border:1.5px solid var(--border);background:var(--surface);border-radius:6px; padding:13px 16px;cursor:pointer;text-align:left;transition:all .16s; display:flex;align-items:center;gap:10px;color:var(--ink);font-size:.96rem} .japan-opt:hover:not(:disabled){border-color:var(--accent);background:rgba(138,106,26,.06);transform:translateX(2px)} .japan-opt:disabled{cursor:default} .japan-opt-ltr{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);min-width:16px;font-weight:700} .japan-opt.correct{border-color:var(--correct);background:rgba(30,107,58,.1)} .japan-opt.correct .japan-opt-ltr{color:var(--correct)} .japan-opt.wrong{border-color:var(--wrong);background:rgba(146,32,16,.1)} .japan-opt.wrong .japan-opt-ltr{color:var(--wrong)} .japan-expl{margin-top:10px;padding:10px 14px;background:rgba(138,106,26,.07); border-left:3px solid var(--accent);border-radius:0 6px 6px 0; font-size:.88rem;color:var(--muted);line-height:1.6;display:none} .japan-expl.visible{display:block} .japan-results{background:var(--card);border:1px solid var(--border);border-radius:8px; padding:28px 20px;box-shadow:0 2px 10px rgba(0,0,0,.08);text-align:center} /* ── OVERLAY ── */ .overlay{display:none;position:fixed;inset:0;background:rgba(100,90,70,.55); z-index:200;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .overlay.on{display:flex} .confirm{background:var(--card);border:1px solid var(--border2);border-radius:10px; padding:28px 24px;text-align:center;max-width:320px;width:90%;box-shadow:0 8px 30px rgba(0,0,0,.18)} .confirm h3{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.4rem;margin-bottom:8px;color:var(--ink)} .confirm p{font-size:.9rem;color:var(--muted);margin-bottom:20px;line-height:1.5} .conf-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .conf-yes{padding:10px 22px;background:var(--red);color:#fff;border:none;border-radius:5px;font-size:.9rem;cursor:pointer} .conf-yes:hover{background:var(--red2)} .conf-no{padding:10px 22px;background:transparent;border:1.5px solid var(--border2);color:var(--ink); border-radius:5px;font-size:.9rem;cursor:pointer} .conf-no:hover{border-color:var(--ink)} @media(max-width:520px){ .mode-grid,.kana-mode-grid{grid-template-columns:1fr} .kana-opts{grid-template-columns:1fr 1fr} .q-word{font-size:2.2rem}.score-big{font-size:4rem} .kj-char{font-size:4.5rem}.kana-big{font-size:4.5rem} .level-grid{grid-template-columns:1fr 1fr 1fr} .res-actions{flex-direction:column;align-items:center} } .consult-row{display:flex;gap:8px;margin-bottom:12px} .consult-pill{flex:1;padding:7px 4px;border:1.5px solid var(--border2);background:var(--surface); border-radius:6px;cursor:pointer;text-align:center;transition:all .18s;color:var(--muted); font-size:.82rem;letter-spacing:.04em;line-height:1} .consult-pill:hover{border-color:var(--ink);color:var(--ink)} .consult-pill.cp-vocab:hover,.consult-pill.cp-vocab.active{border-color:var(--jp);color:var(--jp);background:rgba(176,90,40,.07)} .consult-pill.cp-kana:hover,.consult-pill.cp-kana.active{border-color:var(--kana2);color:var(--kana2);background:rgba(42,94,138,.07)} .consult-pill.cp-kanji:hover,.consult-pill.cp-kanji.active{border-color:var(--kanji2);color:var(--kanji2);background:rgba(90,58,138,.07)} .consult-pill.cp-voyage:hover,.consult-pill.cp-voyage.active{border-color:#c0392b;color:#c0392b;background:rgba(192,57,43,.07)} /* ── KANJI VOYAGE ── */ .kvoy-section{margin-bottom:14px} .kvoy-section-title{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase; color:var(--accent);font-weight:700;padding:6px 12px 4px;background:var(--surface); border-bottom:1px solid var(--border);display:block} .kvoy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;background:var(--card)} .kvoy-card{display:flex;align-items:center;gap:10px;padding:10px 12px; background:var(--card);border-bottom:1px solid var(--border);border-right:1px solid var(--border)} .kvoy-card:nth-child(even){border-right:none} .kvoy-kanji{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.8rem;color:var(--kanji2); font-weight:700;min-width:40px;text-align:center;line-height:1} .kvoy-info{flex:1} .kvoy-ro{font-size:.72rem;color:var(--muted);font-style:italic;display:block} .kvoy-fr{font-size:.82rem;color:var(--ink);font-weight:600;display:block;margin-top:1px} .kvoy-ex{font-size:.7rem;color:var(--muted);display:block;margin-top:2px;line-height:1.4} .consult-select{flex:1;padding:9px 12px;background:var(--surface);border:1.5px solid var(--border2); border-radius:6px;color:var(--ink);font-size:.9rem;outline:none; font-family:Noto Sans JP,'Lato',sans-serif;cursor:pointer;-webkit-appearance:none;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6355' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center} .consult-select:focus{border-color:var(--jp)} .consult-select option{background:var(--card);color:var(--ink)} .vocab-search{width:100%;padding:9px 12px;background:var(--surface);border:1.5px solid var(--border2); border-radius:6px;color:var(--ink);font-size:.92rem;outline:none;margin-bottom:9px;font-family:Noto Sans JP,'Lato',sans-serif} .vocab-search:focus{border-color:var(--jp)} .vocab-search::placeholder{color:var(--muted)} .vocab-table-wrap{overflow-x:auto} .vocab-table{width:100%;border-collapse:collapse;font-size:.9rem} .vocab-table th{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); padding:6px 8px;border-bottom:2px solid var(--border2);text-align:left;background:var(--surface);position:sticky;top:0;z-index:2} .vocab-table td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:middle;line-height:1.3} .vocab-table tr:last-child td{border-bottom:none} .vocab-table tr:active td{background:rgba(138,106,26,.05)} .vt-fr{color:var(--ink);font-size:.88rem} .vt-jp{font-family:Noto Sans JP,'Noto Serif JP',serif;color:var(--jp);font-size:1rem;font-weight:700} .vt-ro{color:var(--muted);font-style:italic;font-size:.78rem} .group-label-row td{background:var(--surface)!important;font-size:.6rem;letter-spacing:.16em; text-transform:uppercase;color:var(--accent);padding:5px 8px;font-weight:700} .vocab-count{font-size:.7rem;color:var(--muted);margin-bottom:5px;text-align:right} .kana-legend{display:flex;gap:12px;margin-bottom:9px;font-size:.74rem;flex-wrap:wrap} .kana-legend span{display:flex;align-items:center;gap:5px;color:var(--muted)} .kana-legend .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0} .kana-ref-table{width:100%;border-collapse:collapse} .kana-ref-table th{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); padding:5px 4px;border-bottom:1px solid var(--border2);text-align:center;background:var(--surface);font-weight:700} .kana-ref-table td{padding:5px 2px;border:1px solid var(--border);text-align:center;vertical-align:middle} .krt-hi{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.45rem;color:var(--kana2);display:block;line-height:1} .krt-ka{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.45rem;color:var(--kanji2);display:block;line-height:1;margin-top:3px} .krt-ro{font-size:.62rem;color:var(--muted);margin-top:3px;display:block} .krt-ro-top{font-size:.72rem;font-style:italic;font-weight:700;color:var(--muted);margin-bottom:3px;display:block;letter-spacing:.02em} #screen-kana-ref .kana-ref-table td[data-k]{cursor:pointer;-webkit-tap-highlight-color:transparent} #screen-kana-ref .kana-ref-table td[data-k]:active{background:rgba(42,94,138,.10)} #kana-zoom{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(20,20,20,.55)} #kana-zoom.open{display:flex} #kana-zoom .kz-card{position:relative;background:var(--card,#fff);border-radius:14px;padding:26px 34px 20px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.35);max-width:94vw} #kana-zoom .kz-ch{font-family:Noto Sans JP,'Noto Serif JP',serif;line-height:1.1;font-size:clamp(9rem,52vw,16rem);white-space:nowrap} #kana-zoom .kz-ch.two{font-size:clamp(5.5rem,30vw,10rem)} #kana-zoom .kz-ro{font-size:1.7rem;font-style:italic;font-weight:700;color:var(--muted);margin-top:4px;letter-spacing:.03em} #kana-zoom .kz-fr{font-size:1.05rem;color:var(--ink);margin-top:6px;line-height:1.4} #kana-zoom .kz-rd{margin-top:10px;padding-top:8px;border-top:1px solid var(--border);font-size:1.05rem;line-height:1.6;color:var(--ink)} #kana-zoom .kz-rd:empty{display:none;border:0;margin:0;padding:0} #kana-zoom .kz-rd b{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:8px} #kana-zoom .kz-x{position:absolute;top:6px;right:12px;font-size:1.5rem;line-height:1;color:var(--muted)} /* Écran Kana : grilles agrandies, une ligne par rangée (pas de retour à la ligne) */ #screen-kana-ref .kana-ref-table{table-layout:fixed} #screen-kana-ref .kana-ref-table td{white-space:nowrap;padding:8px 2px;overflow:hidden} #screen-kana-ref .krt-hi,#screen-kana-ref .krt-ka{font-size:clamp(1.9rem,9vw,2.5rem);line-height:1.1;white-space:nowrap} #screen-kana-ref .krt-ro-top{font-size:clamp(.78rem,3.4vw,.95rem);margin-bottom:4px;white-space:nowrap} .kanji-ref-table{width:100%;border-collapse:collapse} .kanji-ref-table th{font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted); padding:6px 8px;border-bottom:2px solid var(--border2);text-align:left;background:var(--surface);position:sticky;top:0;z-index:2} .kanji-ref-table td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:middle} .kanji-ref-table tr:last-child td{border-bottom:none} .kanji-ref-table tr:active td{background:rgba(90,58,138,.04)} .krt-kanji{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.6rem;color:var(--kanji2);line-height:1} .krt-fr-k{color:var(--ink);font-size:.86rem} /* Carte consultation */ .consult-card-wrap{background:var(--card);border:1px solid var(--border);border-radius:7px; padding:12px 13px;margin-bottom:10px} /* ══ TOKYO ══ */ .tokyo-dd-wrap{position:relative;margin-bottom:14px;user-select:none} .tokyo-dd-sel{display:flex;align-items:center;justify-content:space-between; padding:13px 16px;background:var(--surface);border:1.5px solid var(--kanji2); border-radius:8px;cursor:pointer;gap:10px;transition:background .18s} .tokyo-dd-sel:hover{background:rgba(90,58,138,.06)} .tokyo-dd-wrap.open .tokyo-dd-sel{background:rgba(90,58,138,.06)} .tokyo-dd-arrow{color:var(--kanji2);font-size:.9rem;transition:transform .2s;flex-shrink:0} .tokyo-dd-wrap.open .tokyo-dd-arrow{transform:rotate(180deg)} .tokyo-dd-list{position:fixed;background:var(--card);border:1.5px solid var(--kanji2); border-radius:8px;z-index:999;max-height:62vh;overflow-y:auto; box-shadow:0 6px 30px rgba(0,0,0,.18);display:none;min-width:260px} .tokyo-dd-wrap.open .tokyo-dd-list{display:block} .tokyo-dd-item{padding:8px 16px;cursor:pointer;border-bottom:1px solid var(--border); display:flex;align-items:center;gap:10px;transition:background .15s} .tokyo-dd-item:last-child{border-bottom:none} .tokyo-dd-item:hover{background:rgba(90,58,138,.07)} .tokyo-dd-item.active{background:rgba(90,58,138,.1);font-weight:700} .tokyo-dd-item-icon{font-size:1.05rem;flex-shrink:0} .tokyo-dd-item-name{font-size:.88rem;color:var(--ink);font-weight:600} .tokyo-dd-item-sub{font-size:.72rem;color:var(--muted)} .tokyo-card{background:var(--card);border:1px solid var(--border);border-radius:10px; padding:18px 16px 20px;box-shadow:0 2px 10px rgba(0,0,0,.07)} .tokyo-card-head{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)} .tokyo-card-icon{font-size:2rem;display:block;margin-bottom:4px;line-height:1} .tokyo-card-name{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.5rem;font-weight:700; color:var(--ink);display:block;line-height:1.2} .tokyo-card-name-jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1rem;color:var(--kanji2); display:block;margin-top:2px;margin-bottom:6px} .tokyo-card-desc{font-size:.88rem;color:var(--ink);line-height:1.7;margin-bottom:0} .tokyo-section{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)} .tokyo-section-title{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase; color:var(--kanji2);font-weight:700;margin-bottom:10px;display:block} .tokyo-line{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px; background:var(--surface);border-radius:6px;padding:9px 11px} .tokyo-line:last-child{margin-bottom:0} .tokyo-line-badge{flex-shrink:0;border-radius:4px;padding:3px 8px;font-size:.72rem; font-weight:700;letter-spacing:.06em;color:#fff;white-space:nowrap;margin-top:1px} .tokyo-line-info{flex:1} .tokyo-line-name{font-size:.88rem;color:var(--ink);font-weight:600;display:block;margin-bottom:2px} .tokyo-line-stations{font-size:.78rem;color:var(--muted);line-height:1.5} .tokyo-poi{background:var(--surface);border-left:3px solid var(--kanji2); border-radius:0 5px 5px 0;padding:9px 12px;margin-bottom:7px} .tokyo-poi:last-child{margin-bottom:0} .tokyo-poi-name{font-size:.92rem;color:var(--ink);font-weight:600;display:block;margin-bottom:2px} .tq-nm{font-size:.92rem;color:var(--ink);font-weight:600;display:block;margin-bottom:4px} .tokyo-poi-detail{font-size:.8rem;color:var(--muted);line-height:1.5} .tokyo-poi-station{display:inline-block;background:rgba(90,58,138,.1);color:var(--kanji2); font-size:.7rem;padding:2px 7px;border-radius:9px;margin-top:3px;font-weight:600} .tokyo-tip{background:rgba(200,168,74,.08);border:1px solid rgba(200,168,74,.25); border-radius:6px;padding:10px 13px;margin-bottom:7px;font-size:.82rem; color:var(--ink);line-height:1.6} .tokyo-tip:last-child{margin-bottom:0} .tokyo-tip strong{color:#a87830} .vl-level-info{background:rgba(176,90,40,.07);border:1px solid rgba(176,90,40,.2); border-radius:7px;padding:10px 14px;margin-top:14px;font-size:.84rem; color:var(--ink);line-height:1.6;text-align:center} .vl-level-info strong{color:var(--jp)} .qp-context{font-size:1rem;color:var(--ink);line-height:1.8;margin-bottom:4px; text-align:center} .qp-blank{display:inline-block;min-width:40px;border-bottom:2px solid var(--jp); text-align:center;font-weight:700;color:var(--jp);padding:0 4px} /* ══ CONJUGUEUR ══ */ .conj-sel-row{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap} .conj-dd-wrap{flex:1;min-width:140px;position:relative;user-select:none} .conj-dd-sel{display:flex;align-items:center;justify-content:space-between; padding:11px 14px;background:var(--surface);border:1.5px solid var(--border2); border-radius:6px;cursor:pointer;transition:border-color .2s} .conj-dd-sel:hover{border-color:var(--jp)} .conj-dd-wrap.open .conj-dd-sel{border-color:var(--jp)} .conj-dd-list{position:fixed;background:var(--card);border:1.5px solid var(--jp); border-radius:6px;z-index:999;max-height:55vh;overflow-y:auto; box-shadow:0 6px 24px rgba(0,0,0,.15);display:none} .conj-dd-wrap.open .conj-dd-list{display:block} .conj-dd-item{padding:11px 16px;font-size:.92rem;color:var(--ink);cursor:pointer; border-bottom:1px solid var(--border);transition:background .15s} .conj-dd-item:last-child{border-bottom:none} .conj-dd-item:hover{background:rgba(176,90,40,.07)} .conj-dd-item.active{background:rgba(176,90,40,.1)} [id$="-vis-dd-wrap"] .conj-dd-list{display:block!important;position:static!important; width:100%!important;box-shadow:none;margin-top:6px} .conj-card{background:var(--card);border:1px solid var(--border);border-radius:10px; padding:18px 16px 20px;box-shadow:0 2px 10px rgba(0,0,0,.07)} .conj-verb-head{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)} .conj-verb-jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:2.2rem;color:var(--jp); font-weight:700;display:block;line-height:1} .conj-verb-ro{font-size:.92rem;color:var(--muted);font-style:italic;display:block;margin-top:3px} .conj-verb-fr{font-size:.88rem;color:var(--ink);display:block;margin-top:2px} .conj-group-badge{display:inline-block;font-size:.62rem;letter-spacing:.12em; text-transform:uppercase;padding:2px 8px;border-radius:5px;font-weight:700; margin-top:5px;background:rgba(176,90,40,.1);color:var(--jp)} .conj-table{width:100%;border-collapse:collapse;margin-top:10px} .conj-table th{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);padding:6px 8px;border-bottom:2px solid var(--border); text-align:left;background:var(--surface)} .conj-table td{padding:9px 8px;border-bottom:1px solid var(--border);vertical-align:middle} .conj-table tr:last-child td{border-bottom:none} .conj-form-name{font-size:.8rem;color:var(--muted)} .conj-form-jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.05rem;color:var(--jp); font-weight:700;display:block} .conj-form-ro{font-size:.78rem;color:var(--muted);font-style:italic} .conj-form-fr{font-size:.8rem;color:var(--ink)} /* ══ SYNTAXE ══ */ /* ── HORLOGE ACCUEIL ── */ .home-clock{background:var(--card);border:1.5px solid var(--border);border-radius:10px; padding:14px 18px 12px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.06); text-align:center} /* ── BANDEAUX DE NIVEAU ── */ .synt-level-banner{padding:9px 16px;border-radius:7px;font-size:.72rem; letter-spacing:.2em;text-transform:uppercase;font-weight:700; margin-bottom:14px;text-align:center} .synt-lv1{background:rgba(176,90,40,.1);color:var(--jp);border:1px solid rgba(176,90,40,.25)} .synt-lv2{background:rgba(90,58,138,.1);color:var(--kanji2);border:1px solid rgba(90,58,138,.25); margin-top:10px} /* ══ PARTICULES ══ */ .part-dd-wrap{position:relative;margin-bottom:18px;user-select:none} .part-dd-sel{display:flex;align-items:center;justify-content:space-between; padding:14px 16px;background:var(--surface);border:1.5px solid #2a7a5a; border-radius:8px;cursor:pointer;gap:10px;transition:background .18s} .part-dd-sel:hover{background:rgba(42,122,90,.07)} .part-dd-sel-left{display:flex;align-items:baseline;gap:12px} .part-dd-kana{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.5rem;color:#2a7a5a;font-weight:700;line-height:1} .part-dd-ro{font-size:.88rem;color:var(--muted);font-style:italic} .part-dd-name{font-size:.82rem;color:var(--ink);font-weight:600} .part-dd-arrow{color:#2a7a5a;font-size:.9rem;transition:transform .2s;flex-shrink:0} .part-dd-wrap.open .part-dd-arrow{transform:rotate(180deg)} .part-dd-list{position:fixed;background:var(--card);border:1.5px solid #2a7a5a;border-radius:8px; z-index:999;max-height:60vh;overflow-y:auto;box-shadow:0 6px 30px rgba(0,0,0,.18);display:none; min-width:260px} .part-dd-wrap.open .part-dd-list{display:block} .part-dd-item{padding:12px 18px;cursor:pointer;border-bottom:1px solid var(--border); transition:background .15s;display:flex;align-items:baseline;gap:12px} .part-dd-item:last-child{border-bottom:none} .part-dd-item:hover{background:rgba(42,122,90,.08)} .part-dd-item.active{background:rgba(42,122,90,.12);font-weight:700} .part-dd-item-kana{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.2rem;color:#2a7a5a;font-weight:700;min-width:30px} .part-dd-item-ro{font-size:.82rem;color:var(--muted);font-style:italic;min-width:52px} .part-dd-item-name{font-size:.88rem;color:var(--ink)} /* Menu d'accordéon élégant — sélection des leçons du cours de japonais */ .hd-frame{background:var(--card);border:1px solid var(--border);border-radius:12px; margin:14px 2px 0;box-shadow:0 2px 10px rgba(0,0,0,.06);overflow:hidden} .hd-row{border-top:1px solid var(--border)} .hd-row:first-child{border-top:none} .hd-row-head{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:none; text-align:left;padding:13px 14px;cursor:pointer} .hd-item-ico{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:.82rem;font-weight:700;color:var(--jp); flex-shrink:0;min-width:26px;text-align:center;background:rgba(176,90,40,.1);border-radius:50%; width:26px;height:26px;display:flex;align-items:center;justify-content:center} .hd-item-label{flex:1;font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.35} .hd-item-sub{display:block;font-size:.72rem;font-weight:400;color:var(--muted);margin-top:2px} .hd-row-chevron{font-size:.65rem;color:var(--muted);flex-shrink:0;margin-left:6px;transition:transform .2s ease} .hd-row.open .hd-row-chevron{transform:rotate(180deg)} .hd-row-head:active{background:rgba(0,0,0,.03)} @media (hover:hover){.hd-row-head:hover{background:rgba(0,0,0,.03)}} .hd-row-body{display:none;padding:0 14px 18px} .hd-row.open .hd-row-body{display:block;animation:fadeUp .16s ease} /* Cours de japonais : le cadre de l'accordéon occupe 98% de la largeur de l'écran */ #screen-cours-hub .wrap{padding-left:1%;padding-right:1%} #screen-cours-hub .hd-frame{margin-left:0;margin-right:0} .part-card{background:var(--card);border:1px solid var(--border);border-radius:10px; padding:20px 18px 22px;box-shadow:0 2px 10px rgba(0,0,0,.07)} .part-header{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)} .part-kana-big{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:2.8rem;color:#2a7a5a;font-weight:700; line-height:1;display:block} .part-ro-big{font-size:1.1rem;color:var(--muted);font-style:italic;letter-spacing:.04em; display:block;margin-top:4px;margin-bottom:8px} .part-title-name{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.3rem;font-weight:700; color:var(--ink);display:block;margin-bottom:4px} .part-desc{font-size:.92rem;color:var(--ink);line-height:1.7;margin-bottom:14px} .part-schema{background:rgba(42,122,90,.06);border:1px solid rgba(42,122,90,.2); border-radius:6px;padding:10px 14px;margin-bottom:16px; font-size:.82rem;color:#2a7a5a;letter-spacing:.04em;font-weight:600} .part-schema span{color:var(--muted);font-weight:400} .part-examples-title{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase; color:#2a7a5a;font-weight:700;margin-bottom:10px} .part-example{background:var(--surface);border-left:3px solid #2a7a5a;border-radius:0 5px 5px 0; padding:10px 13px;margin-bottom:9px} .part-example:last-child{margin-bottom:0} .part-ex-ro{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.05rem;color:var(--ink); font-weight:600;display:block;margin-bottom:3px} .part-ex-fr{font-size:.88rem;color:var(--muted);font-style:italic;display:block;margin-bottom:5px} .part-ex-note{font-size:.8rem;color:var(--ink);line-height:1.6;display:block} .part-ex-note strong{color:#2a7a5a} .part-empty{text-align:center;color:var(--muted);font-style:italic;padding:40px 0;font-size:.92rem} /* ══ CLASSIFICATEURS ══ */ .cls-dd-kanji{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.4rem;color:#2a7a5a;font-weight:700; line-height:1;margin-right:6px} .cls-table{width:100%;border-collapse:collapse;margin-top:6px} .cls-table th{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);padding:6px 8px;border-bottom:2px solid var(--border); text-align:left;background:var(--surface)} .cls-table td{padding:8px 8px;border-bottom:1px solid var(--border);font-size:.9rem; vertical-align:middle} .cls-table tr:last-child td{border-bottom:none} .cls-table tr:active td{background:rgba(42,122,90,.04)} .cls-num{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1rem;color:#2a7a5a;font-weight:700; white-space:nowrap} .cls-ro{color:var(--muted);font-style:italic;font-size:.82rem} .cls-irreg{display:inline-block;background:rgba(176,90,40,.12);color:var(--jp); font-size:.6rem;letter-spacing:.1em;padding:1px 5px;border-radius:4px; font-weight:700;vertical-align:middle;margin-left:4px} .cls-note-box{background:rgba(42,122,90,.05);border:1px solid rgba(42,122,90,.18); border-radius:6px;padding:11px 13px;margin-top:14px;font-size:.84rem; color:var(--ink);line-height:1.7} .cls-note-box strong{color:#2a7a5a} .cls-ex-block{margin-top:14px} .cls-ex-item{background:var(--surface);border-left:3px solid #2a7a5a; border-radius:0 5px 5px 0;padding:9px 12px;margin-bottom:8px} .cls-ex-item:last-child{margin-bottom:0} .cls-ex-jp{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.05rem;font-weight:600; color:var(--ink);display:block;margin-bottom:2px} .cls-ex-fr{font-size:.86rem;color:var(--muted);font-style:italic;display:block; margin-bottom:4px} .cls-ex-note{font-size:.8rem;color:var(--ink);line-height:1.6;display:block} /* ══ GRAMMAIRE ══ */ .gram-rule{background:var(--card);border:1px solid var(--border);border-radius:10px; padding:20px 18px 22px;box-shadow:0 2px 10px rgba(0,0,0,.07);margin-bottom:16px} .gram-rule-desc{font-size:.9rem;color:var(--ink);line-height:1.75;margin-bottom:12px} .gram-rule-desc strong{color:#2a7a5a} .gram-schema{background:rgba(42,122,90,.06);border:1px solid rgba(42,122,90,.2); border-radius:6px;padding:9px 14px;margin-bottom:14px; font-size:.82rem;color:#2a7a5a;font-weight:600;letter-spacing:.03em} .gram-schema span{color:var(--muted);font-weight:400} .gram-ex{border-left:3px solid #2a7a5a;border-radius:0 5px 5px 0; background:var(--surface);padding:9px 12px;margin-bottom:8px} .gram-ex:last-child{margin-bottom:0} .gram-ex-note{font-size:.79rem;color:var(--ink);line-height:1.6;display:block} .gram-ex-note strong{color:#2a7a5a} .home-section-hd.s-syntaxe{border-left:4px solid #2a7a5a} .synt-screen-card{background:var(--card);border:1px solid var(--border);border-radius:10px; padding:22px 20px 26px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin-bottom:18px} .synt-screen-card+.synt-screen-card{border-top:none;border-radius:10px} .synt-phrase-ro{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.45rem;font-weight:600; color:var(--ink);letter-spacing:.03em;margin-bottom:8px;line-height:1.4} .synt-phrase-hi{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1.25rem;color:#2a7a5a; margin-bottom:8px;line-height:1.6} .synt-phrase-fr{font-size:1rem;color:var(--muted);font-style:italic;margin-bottom:18px; padding-bottom:14px;border-bottom:1px solid var(--border)} .synt-section-title{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase; color:#2a7a5a;font-weight:700;margin-bottom:8px;margin-top:14px} .synt-section-title:first-child{margin-top:0} .synt-vocab-grid{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .synt-vocab-row{display:flex;align-items:baseline;gap:10px;font-size:.92rem} .synt-vocab-jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:1rem;color:#2a7a5a;min-width:70px;font-weight:700} .synt-vocab-ro{color:var(--muted);font-style:italic;min-width:80px;font-size:.85rem} .synt-vocab-fr{color:var(--ink)} .synt-struct-box{background:rgba(42,122,90,.06);border:1px solid rgba(42,122,90,.2); border-radius:6px;padding:13px 14px;margin-top:6px} .synt-struct-row{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-bottom:8px} .synt-struct-row:last-child{margin-bottom:0} .synt-block{display:inline-flex;flex-direction:column;align-items:center; border:1px solid rgba(42,122,90,.35);border-radius:5px;padding:5px 10px; background:#fff;margin:3px 2px} .synt-block-jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:.95rem;color:#2a7a5a;font-weight:700} .synt-block-label{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);margin-top:2px} .synt-arrow{color:rgba(42,122,90,.5);font-size:1rem;margin:0 3px;align-self:center} .synt-note{font-size:.8rem;color:var(--muted);line-height:1.6;margin-top:10px; padding-top:10px;border-top:1px dashed var(--border)} .synt-note strong{color:var(--ink)} /* ══ VISITER DROPDOWN ══ */ .visiter-dd-wrap{position:relative} .visiter-dd-sel{width:100%;display:flex;align-items:center;gap:8px;padding:9px 12px; background:var(--card);border:1.5px solid var(--border);border-radius:8px; cursor:pointer;font-family:Noto Sans JP,'Lato',sans-serif;font-size:.84rem;font-weight:600;color:var(--ink)} .visiter-dd-sel:hover{border-color:var(--kanji2)} .visiter-dd-sel #visiter-sel-name{flex:1;text-align:left} .visiter-dd-sel #visiter-dd-arrow{font-size:.7rem;color:var(--muted)} .visiter-dd-list{position:fixed;z-index:500;background:var(--card); border:1.5px solid var(--border);border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.15);overflow-y:auto;max-height:70vh; min-width:220px;-webkit-overflow-scrolling:touch} .visiter-dd-list.hidden{display:none} .visiter-dd-group{padding:8px 14px 4px;font-size:.65rem;font-weight:700; color:var(--muted);letter-spacing:.12em;text-transform:uppercase; border-top:1px solid var(--border);margin-top:2px} .visiter-dd-group:first-child{border-top:none;margin-top:0} .visiter-dd-wrap-hidden .visiter-dd-sel{display:none} .visiter-dd-item{padding:10px 16px;font-size:.86rem;color:var(--ink);cursor:pointer; display:flex;align-items:center;gap:8px;transition:background .15s} .lang-switch-wrap{position:fixed;top:16px;right:54px;z-index:9999} .lang-switch-btn{background:transparent;border:none;font-size:1.15rem;line-height:1; cursor:pointer;opacity:.7;padding:6px;transition:opacity .18s} .lang-switch-btn:hover{opacity:1} .lang-switch-list{display:none;position:absolute;top:32px;right:0;background:var(--card); border:1.5px solid var(--jp);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.18); min-width:150px;overflow:hidden;z-index:20} .lang-switch-list.open{display:block} .lang-switch-item{padding:9px 14px;font-size:.85rem;color:var(--ink);cursor:pointer; white-space:nowrap;transition:background .15s} .lang-switch-item:hover{background:rgba(90,58,138,.07)} .lang-switch-item.active{font-weight:700;color:var(--kanji2)} .passport-switch-wrap{position:relative;display:inline-block} .passport-switch-btn{background:var(--card);border:1px solid var(--border);border-radius:8px; font-size:.82rem;padding:6px 10px;cursor:pointer;color:var(--ink)} .passport-switch-list{display:none;position:absolute;top:36px;left:0;background:var(--card); border:1.5px solid var(--jp);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.18); min-width:170px;max-height:260px;overflow-y:auto;z-index:20} .passport-switch-list.open{display:block} .passport-switch-item{padding:9px 14px;font-size:.85rem;color:var(--ink);cursor:pointer; white-space:nowrap;transition:background .15s} .passport-switch-item:hover{background:rgba(90,58,138,.07)} .passport-switch-item.active{font-weight:700;color:var(--kanji2)} .visiter-dd-stars{margin-left:auto;color:#c8a24a;font-size:.72rem;letter-spacing:1px;flex-shrink:0;padding-left:8px} .visiter-dd-item:hover{background:rgba(90,58,138,.07);color:var(--kanji2)} .visiter-dd-item.dd-region{font-weight:700;font-size:.98rem;letter-spacing:.02em;padding:11px 16px;background:var(--surface);border-left:3px solid var(--accent);border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:2px} .visiter-dd-item.dd-region:first-of-type{margin-top:0} .visiter-dd-item.dd-hidden,.visiter-dd-group.dd-hidden{display:none} .visiter-search-btn{display:none} .visiter-search-row{margin-top:0;margin-bottom:10px;display:flex;gap:10px;align-items:stretch} .visiter-search-row.hidden{display:none} .visiter-search-row input{flex:1 1 auto;min-width:0;padding:9px 12px;border:1.5px solid var(--border); border-radius:8px;font-family:Noto Sans JP,'Lato',sans-serif;font-size:.84rem;color:var(--ink); background:var(--card)} .visiter-search-row input:focus{outline:none;border-color:var(--kanji2)} .visiter-regions-btn{flex:0 0 auto;padding:0 20px;border:none;border-radius:8px; background:#7a4c3c;color:#fff;cursor:pointer;white-space:nowrap; font-family:Noto Sans JP,'Lato',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.02em; display:flex;align-items:center; transition:filter .15s,transform .15s} .visiter-regions-btn:hover{filter:brightness(1.06)} .visiter-regions-btn:active{transform:translateY(1px);filter:brightness(.95)} .tokyo-nav-btn{background:var(--card);border:1.5px solid var(--border);border-radius:8px; padding:8px 6px;cursor:pointer;text-align:center;transition:all .2s; display:flex;align-items:center;justify-content:center;gap:5px; box-shadow:0 1px 4px rgba(0,0,0,.05)} .tokyo-nav-btn:hover{border-color:var(--kanji2);background:rgba(90,58,138,.04)} .tokyo-nav-btn:active{opacity:.85} .tokyo-nav-btn.active{border-color:var(--kanji2);background:rgba(90,58,138,.08)} .tokyo-nav-icon{font-size:.95rem;line-height:1;flex-shrink:0} .tokyo-nav-label{font-size:.75rem;font-weight:700;color:var(--kanji2);letter-spacing:.02em} /* ── Tokyo : circuits & activités ── */ .tokyo-circuit-btn{display:flex;align-items:center;gap:12px;width:100%; background:var(--card);border:1.5px solid var(--border);border-left:4px solid var(--kanji2); border-radius:8px;padding:14px 12px;margin-bottom:8px;cursor:pointer; text-align:left;font-family:inherit;transition:all .18s; box-shadow:0 2px 5px rgba(0,0,0,.06)} .tokyo-circuit-btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.1); border-color:var(--kanji2)} .tcirc-icon{font-size:1.8rem;flex-shrink:0;line-height:1} .tcirc-meta{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0} .tcirc-title{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.12rem;font-weight:600;color:var(--ink);line-height:1.2} .tcirc-sub{font-size:.72rem;color:var(--muted);letter-spacing:.04em} .tcirc-arr{color:var(--kanji2);font-size:1.4rem;flex-shrink:0;font-weight:300} .tcirc-etape{background:var(--surface);border-left:3px solid var(--accent); padding:10px 12px;margin-bottom:10px;border-radius:0 6px 6px 0} .tcirc-etape:last-child{margin-bottom:0} .tcirc-etape-head{display:flex;align-items:baseline;gap:10px;margin-bottom:5px;flex-wrap:wrap} .tcirc-etape-jour{font-size:.7rem;background:var(--accent);color:#fff;padding:2px 8px; border-radius:3px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;flex-shrink:0} .tcirc-etape-titre{font-size:.96rem;font-weight:700;color:var(--ink)} .tcirc-etape-detail{font-size:.82rem;color:var(--ink);line-height:1.6;margin:0} .tact-cat-head{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.05rem;font-weight:600; color:var(--kanji2);margin:14px 0 6px 0;padding-bottom:3px; border-bottom:1px solid #d8cce8;letter-spacing:.03em} .tact-cat-block{} /* ══ TOKYO SECTION DD ══ */ .beau-village-badge{display:inline-flex;align-items:center;gap:3px;font-size:.6rem; font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:#7a5e12;background:rgba(200,168,74,.16);border:1px solid rgba(200,168,74,.5); padding:2px 7px;border-radius:11px;white-space:nowrap;vertical-align:middle} .beau-village-badge::before{content:'\273F';font-size:.66rem;line-height:1} .bv-dd-mark{color:#b58a1c;font-size:.74rem;margin-left:6px;flex-shrink:0} .tsub-dd-wrap{position:relative;margin-bottom:10px;user-select:none} .tsub-dd-sel{display:flex;align-items:center;gap:8px;padding:10px 14px; background:var(--surface);border:1.5px solid var(--kanji2);border-radius:7px; cursor:pointer;transition:background .15s} .tsub-dd-sel:hover,.tsub-dd-wrap.open .tsub-dd-sel{background:rgba(90,58,138,.06)} .tsub-badge{flex-shrink:0;border-radius:4px;padding:2px 7px;font-size:.7rem; font-weight:700;color:#fff;letter-spacing:.04em;min-width:28px;text-align:center} .tsub-name{flex:1;font-size:.88rem;font-weight:600;color:var(--ink)} .tsub-arrow{color:var(--kanji2);font-size:.82rem;flex-shrink:0} .tsub-dd-list{position:fixed;background:var(--card);border:1.5px solid var(--kanji2); border-radius:7px;z-index:999;max-height:58vh;overflow-y:auto; box-shadow:0 6px 28px rgba(0,0,0,.18);display:none} .tsub-dd-wrap.open .tsub-dd-list{display:block} .tsub-dd-item{display:flex;align-items:center;gap:8px;padding:10px 14px; cursor:pointer;border-bottom:1px solid var(--border);transition:background .14s;font-size:.88rem} .tsub-dd-item:last-child{border-bottom:none} .tsub-dd-item:hover{background:rgba(90,58,138,.07)} .tsub-dd-item.active{background:rgba(90,58,138,.12);font-weight:700} .tline-desc{font-size:.82rem;color:var(--muted);line-height:1.6;margin-bottom:10px; padding:8px 12px;background:var(--card);border-radius:6px;border-left:3px solid var(--kanji2)} .tstation-table{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:4px; background:var(--card);border-radius:8px;overflow:hidden} .tstation-table th{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); padding:5px 6px;border-bottom:2px solid var(--border2);background:var(--surface);text-align:left} .tstation-table td{padding:5px 6px;border-bottom:1px solid var(--border);vertical-align:top} .tstation-table tr:last-child td{border-bottom:none} .tst-num{display:inline-block;color:#fff;font-size:.68rem;font-weight:700; border-radius:3px;padding:2px 5px;letter-spacing:.04em;white-space:nowrap} .tst-nom{font-size:.86rem;color:var(--ink);font-weight:600;white-space:nowrap} .tst-cor{line-height:1.8} .tst-cor-tag{display:inline-block;background:rgba(90,58,138,.09);color:var(--kanji2); font-size:.68rem;padding:1px 6px;border-radius:4px;margin:1px 2px 1px 0;white-space:nowrap} .tst-cor-link{cursor:pointer;border-radius:0 4px 4px 0;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px} .tst-cor-link:hover,.tst-cor-link:focus-visible{background:rgba(90,58,138,.2);outline:none} .tstation-table tr.tst-hl td{background:rgba(90,58,138,.14);transition:background .3s} .tgare-card{background:var(--surface);border-radius:8px;padding:12px 14px;margin-top:6px} .tgare-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px} .tgare-nom{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-size:1.2rem;font-weight:700; color:var(--ink);display:block;line-height:1.2} .tgare-jp{font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:.88rem;color:var(--kanji2);display:block} .tgare-desc{font-size:.84rem;color:var(--ink);line-height:1.6;margin-bottom:10px} .tgare-section-lbl{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase; color:var(--kanji2);font-weight:700;margin-bottom:6px;display:block} .tgare-acces{display:flex;align-items:baseline;gap:8px;padding:5px 8px; background:var(--card);border-radius:5px;margin-bottom:3px;flex-wrap:wrap} .tgare-acces-type{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase; color:var(--kanji2);font-weight:700;min-width:60px;flex-shrink:0} .tgare-acces-detail{font-size:.82rem;color:var(--muted);line-height:1.4} .tgare-dest{display:flex;align-items:baseline;gap:8px;padding:5px 8px; border-bottom:1px solid var(--border);flex-wrap:wrap} .tgare-dest:last-child{border-bottom:none} .tgare-dest-lieu{font-size:.86rem;font-weight:700;color:var(--ink);min-width:100px;flex-shrink:0} .tgare-dest-detail{font-size:.8rem;color:var(--muted)} #app-bg{content:"";position:fixed;inset:0;z-index:-1;background:url("../img/app-bg.jpg") center/cover no-repeat;opacity:.45;pointer-events:none} /* ══ ACCUEIL · relookage équilibré (portée : #screen-home-real uniquement) ══ */ #screen-home-real .home-sections{gap:12px;max-width:560px;margin:0 auto;padding:0 2px 14px} #screen-home-real .hr-mast{text-align:center} #screen-home-real .hr-mast .mon{letter-spacing:.14em;text-shadow:0 1px 10px rgba(255,255,255,.55)} #screen-home-real .hr-word{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-weight:600;font-size:.85rem;letter-spacing:.38em;text-transform:uppercase;color:var(--muted);margin-top:4px;padding-left:.38em} /* grille régulière 2 x 3 : six tuiles de même taille */ #screen-home-real .home-quad{gap:8px;margin-top:0} #screen-home-real .home-quad .quad-tile{position:relative;display:block;aspect-ratio:1/.92;border-radius:0;background:#1a1612;box-shadow:none;overflow:hidden} #screen-home-real .home-quad .quad-tile:hover{transform:none;box-shadow:none} #screen-home-real .home-quad .quad-photo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto} #screen-home-real .home-quad .quad-bg{transition:transform .12s ease-out} #screen-home-real .home-quad .quad-tile:active .quad-bg{transform:scale(1.04)} #screen-home-real .home-quad .quad-label{position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;padding:30px 12px 11px 12px;text-align:left;background:linear-gradient(to top,rgba(12,10,8,.72) 0%,rgba(12,10,8,0) 100%)} #screen-home-real .home-quad .quad-title{display:block;color:#fff;font-family:Noto Sans JP,'Cormorant Garamond',serif;font-weight:600;font-size:1.3rem;letter-spacing:.02em;line-height:1.1;text-shadow:0 1px 8px rgba(0,0,0,.55);margin-bottom:0} /* recherche : à sa place d'origine (sous les tuiles), même ligne graphique */ #screen-home-real #home-search-row{margin:0} #screen-home-real #home-search-input{height:44px;padding:0 16px 0 46px;border:1px solid var(--border2);border-radius:0;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a1a' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") no-repeat 15px 50%/19px;font-size:.92rem;letter-spacing:.02em;box-shadow:none} #screen-home-real #home-search-input:focus{outline:none;border-color:#b9953f} @media (max-width:359px){#screen-home-real .home-quad .quad-title{font-size:1.1rem}} /* ══ PAGES PRINCIPALES (Destinations, Connaître, Préparer son voyage, Sur place) · même habillage que l'accueil ══ */ #screen-visiter-accueil .home-quad,#screen-hub-connaitre .home-quad,#screen-preparer .home-quad,#screen-survie .home-quad{gap:8px} #screen-visiter-accueil .home-quad .quad-tile,#screen-hub-connaitre .home-quad .quad-tile,#screen-preparer .home-quad .quad-tile,#screen-survie .home-quad .quad-tile{position:relative;display:block;aspect-ratio:1/.92;border-radius:0;background:#1a1612;box-shadow:none;overflow:hidden} #screen-visiter-accueil .home-quad .quad-tile:hover,#screen-hub-connaitre .home-quad .quad-tile:hover,#screen-preparer .home-quad .quad-tile:hover,#screen-survie .home-quad .quad-tile:hover{transform:none;box-shadow:none} #screen-visiter-accueil .home-quad .quad-photo,#screen-hub-connaitre .home-quad .quad-photo,#screen-preparer .home-quad .quad-photo,#screen-survie .home-quad .quad-photo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto} #screen-visiter-accueil .home-quad .quad-bg,#screen-hub-connaitre .home-quad .quad-bg,#screen-preparer .home-quad .quad-bg,#screen-survie .home-quad .quad-bg{transition:transform .12s ease-out} #screen-visiter-accueil .home-quad .quad-tile:active .quad-bg,#screen-hub-connaitre .home-quad .quad-tile:active .quad-bg,#screen-preparer .home-quad .quad-tile:active .quad-bg,#screen-survie .home-quad .quad-tile:active .quad-bg{transform:scale(1.04)} #screen-visiter-accueil .home-quad .quad-label,#screen-hub-connaitre .home-quad .quad-label,#screen-preparer .home-quad .quad-label,#screen-survie .home-quad .quad-label{position:absolute;left:0;right:0;top:auto;bottom:0;height:auto;z-index:2;display:block;padding:30px 12px 11px;text-align:left;background:linear-gradient(to top,rgba(12,10,8,.72) 0%,rgba(12,10,8,0) 100%)} #screen-visiter-accueil .home-quad .quad-title,#screen-hub-connaitre .home-quad .quad-title,#screen-preparer .home-quad .quad-title,#screen-survie .home-quad .quad-title{display:block;color:#fff;font-family:Noto Sans JP,'Cormorant Garamond',serif;font-weight:600;font-size:1.2rem;letter-spacing:.02em;line-height:1.1;text-shadow:0 1px 8px rgba(0,0,0,.55);margin-bottom:0;overflow-wrap:anywhere} @media (max-width:359px){#screen-visiter-accueil .home-quad .quad-title,#screen-hub-connaitre .home-quad .quad-title,#screen-preparer .home-quad .quad-title,#screen-survie .home-quad .quad-title{font-size:1.05rem}} /* ══ Principaux sites, Régions, Incontournables · même habillage que l'accueil ══ */ #screen-visiter-principaux .home-quad,#screen-regions .home-quad,#screen-top10-accueil .home-quad{gap:8px} #screen-visiter-principaux .home-quad .quad-tile,#screen-regions .home-quad .quad-tile,#screen-top10-accueil .home-quad .quad-tile{position:relative;display:block;aspect-ratio:1/.92;border-radius:0;background:#1a1612;box-shadow:none;overflow:hidden} #screen-visiter-principaux .home-quad .quad-tile:hover,#screen-regions .home-quad .quad-tile:hover,#screen-top10-accueil .home-quad .quad-tile:hover{transform:none;box-shadow:none} #screen-visiter-principaux .home-quad .quad-photo,#screen-regions .home-quad .quad-photo,#screen-top10-accueil .home-quad .quad-photo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto} #screen-visiter-principaux .home-quad .quad-bg,#screen-regions .home-quad .quad-bg,#screen-top10-accueil .home-quad .quad-bg{transition:transform .12s ease-out} #screen-visiter-principaux .home-quad .quad-tile:active .quad-bg,#screen-regions .home-quad .quad-tile:active .quad-bg,#screen-top10-accueil .home-quad .quad-tile:active .quad-bg{transform:scale(1.04)} #screen-visiter-principaux .home-quad .quad-label,#screen-regions .home-quad .quad-label,#screen-top10-accueil .home-quad .quad-label{position:absolute;left:0;right:0;top:auto;bottom:0;height:auto;z-index:2;display:block;padding:30px 12px 11px;text-align:left;background:linear-gradient(to top,rgba(12,10,8,.72) 0%,rgba(12,10,8,0) 100%)} #screen-visiter-principaux .home-quad .quad-title,#screen-regions .home-quad .quad-title,#screen-top10-accueil .home-quad .quad-title{display:block;color:#fff;font-family:Noto Sans JP,'Cormorant Garamond',serif;font-weight:600;font-size:1.3rem;letter-spacing:.02em;line-height:1.1;text-shadow:0 1px 8px rgba(0,0,0,.55);margin-bottom:0;overflow-wrap:anywhere} #screen-top10-accueil .home-quad .quad-title{font-size:1.05rem} @media (max-width:359px){#screen-visiter-principaux .home-quad .quad-title,#screen-regions .home-quad .quad-title{font-size:1.15rem}#screen-top10-accueil .home-quad .quad-title{font-size:.95rem}} /* ══ Toutes les pages à tuiles photo · même aspect que Destinations ══ */ #screen-langue-dico .home-quad,#screen-comprendre-phrases .home-quad,#screen-hub-geographie .home-quad,#screen-tokyo .home-quad,#screen-osaka .home-quad,#screen-kyoto .home-quad,#screen-kobe .home-quad,#screen-hiroshima .home-quad,#screen-miyajima .home-quad,#screen-shirakawa .home-quad,#screen-nara .home-quad,#screen-kanazawa .home-quad,#screen-takayama .home-quad,#screen-noto .home-quad,#screen-naoshima .home-quad,#screen-nikko .home-quad,#screen-hakone .home-quad,#screen-kumano .home-quad,#screen-hokkaido .home-quad,#screen-sapporo .home-quad,#screen-hakodate .home-quad,#screen-shiretoko .home-quad,#screen-biei .home-quad,#screen-otaru .home-quad,#screen-niseko .home-quad,#screen-hiraizumi .home-quad,#screen-ginzan .home-quad,#screen-hirosaki .home-quad,#screen-aizuwakamatsu .home-quad,#screen-toyama .home-quad,#screen-towada .home-quad,#screen-matsushima .home-quad,#screen-daisetsuzan .home-quad,#screen-akan .home-quad,#screen-toya .home-quad,#screen-okinawa .home-quad,#screen-region-tohoku .home-quad,#screen-region-kanto .home-quad,#screen-region-chubu .home-quad,#screen-region-kansai .home-quad,#screen-region-chugoku .home-quad,#screen-region-shikoku .home-quad,#screen-region-kyushu .home-quad,#screen-region-okinawa .home-quad,#screen-histoire .home-quad,#screen-sendai .home-quad,#screen-nagano .home-quad,#screen-wakayama .home-quad,#screen-miyazaki .home-quad,#screen-yaeyama .home-quad,#screen-kamakura .home-quad,#screen-fukuoka .home-quad,#screen-koyasan .home-quad,#screen-himeji .home-quad,#screen-kurashiki .home-quad,#screen-matsue .home-quad{gap:8px} #screen-langue-dico .home-quad .quad-tile,#screen-comprendre-phrases .home-quad .quad-tile,#screen-hub-geographie .home-quad .quad-tile,#screen-tokyo .home-quad .quad-tile,#screen-osaka .home-quad .quad-tile,#screen-kyoto .home-quad .quad-tile,#screen-kobe .home-quad .quad-tile,#screen-hiroshima .home-quad .quad-tile,#screen-miyajima .home-quad .quad-tile,#screen-shirakawa .home-quad .quad-tile,#screen-nara .home-quad .quad-tile,#screen-kanazawa .home-quad .quad-tile,#screen-takayama .home-quad .quad-tile,#screen-noto .home-quad .quad-tile,#screen-naoshima .home-quad .quad-tile,#screen-nikko .home-quad .quad-tile,#screen-hakone .home-quad .quad-tile,#screen-kumano .home-quad .quad-tile,#screen-hokkaido .home-quad .quad-tile,#screen-sapporo .home-quad .quad-tile,#screen-hakodate .home-quad .quad-tile,#screen-shiretoko .home-quad .quad-tile,#screen-biei .home-quad .quad-tile,#screen-otaru .home-quad .quad-tile,#screen-niseko .home-quad .quad-tile,#screen-hiraizumi .home-quad .quad-tile,#screen-ginzan .home-quad .quad-tile,#screen-hirosaki .home-quad .quad-tile,#screen-aizuwakamatsu .home-quad .quad-tile,#screen-toyama .home-quad .quad-tile,#screen-towada .home-quad .quad-tile,#screen-matsushima .home-quad .quad-tile,#screen-daisetsuzan .home-quad .quad-tile,#screen-akan .home-quad .quad-tile,#screen-toya .home-quad .quad-tile,#screen-okinawa .home-quad .quad-tile,#screen-region-tohoku .home-quad .quad-tile,#screen-region-kanto .home-quad .quad-tile,#screen-region-chubu .home-quad .quad-tile,#screen-region-kansai .home-quad .quad-tile,#screen-region-chugoku .home-quad .quad-tile,#screen-region-shikoku .home-quad .quad-tile,#screen-region-kyushu .home-quad .quad-tile,#screen-region-okinawa .home-quad .quad-tile,#screen-histoire .home-quad .quad-tile,#screen-sendai .home-quad .quad-tile,#screen-nagano .home-quad .quad-tile,#screen-wakayama .home-quad .quad-tile,#screen-miyazaki .home-quad .quad-tile,#screen-yaeyama .home-quad .quad-tile,#screen-kamakura .home-quad .quad-tile,#screen-fukuoka .home-quad .quad-tile,#screen-koyasan .home-quad .quad-tile,#screen-himeji .home-quad .quad-tile,#screen-kurashiki .home-quad .quad-tile,#screen-matsue .home-quad .quad-tile{position:relative;display:block;aspect-ratio:1/.92;border-radius:0;background:#1a1612;box-shadow:none;overflow:hidden} #screen-langue-dico .home-quad .quad-tile:hover,#screen-comprendre-phrases .home-quad .quad-tile:hover,#screen-hub-geographie .home-quad .quad-tile:hover,#screen-tokyo .home-quad .quad-tile:hover,#screen-osaka .home-quad .quad-tile:hover,#screen-kyoto .home-quad .quad-tile:hover,#screen-kobe .home-quad .quad-tile:hover,#screen-hiroshima .home-quad .quad-tile:hover,#screen-miyajima .home-quad .quad-tile:hover,#screen-shirakawa .home-quad .quad-tile:hover,#screen-nara .home-quad .quad-tile:hover,#screen-kanazawa .home-quad .quad-tile:hover,#screen-takayama .home-quad .quad-tile:hover,#screen-noto .home-quad .quad-tile:hover,#screen-naoshima .home-quad .quad-tile:hover,#screen-nikko .home-quad .quad-tile:hover,#screen-hakone .home-quad .quad-tile:hover,#screen-kumano .home-quad .quad-tile:hover,#screen-hokkaido .home-quad .quad-tile:hover,#screen-sapporo .home-quad .quad-tile:hover,#screen-hakodate .home-quad .quad-tile:hover,#screen-shiretoko .home-quad .quad-tile:hover,#screen-biei .home-quad .quad-tile:hover,#screen-otaru .home-quad .quad-tile:hover,#screen-niseko .home-quad .quad-tile:hover,#screen-hiraizumi .home-quad .quad-tile:hover,#screen-ginzan .home-quad .quad-tile:hover,#screen-hirosaki .home-quad .quad-tile:hover,#screen-aizuwakamatsu .home-quad .quad-tile:hover,#screen-toyama .home-quad .quad-tile:hover,#screen-towada .home-quad .quad-tile:hover,#screen-matsushima .home-quad .quad-tile:hover,#screen-daisetsuzan .home-quad .quad-tile:hover,#screen-akan .home-quad .quad-tile:hover,#screen-toya .home-quad .quad-tile:hover,#screen-okinawa .home-quad .quad-tile:hover,#screen-region-tohoku .home-quad .quad-tile:hover,#screen-region-kanto .home-quad .quad-tile:hover,#screen-region-chubu .home-quad .quad-tile:hover,#screen-region-kansai .home-quad .quad-tile:hover,#screen-region-chugoku .home-quad .quad-tile:hover,#screen-region-shikoku .home-quad .quad-tile:hover,#screen-region-kyushu .home-quad .quad-tile:hover,#screen-region-okinawa .home-quad .quad-tile:hover,#screen-histoire .home-quad .quad-tile:hover,#screen-sendai .home-quad .quad-tile:hover,#screen-nagano .home-quad .quad-tile:hover,#screen-wakayama .home-quad .quad-tile:hover,#screen-miyazaki .home-quad .quad-tile:hover,#screen-yaeyama .home-quad .quad-tile:hover,#screen-kamakura .home-quad .quad-tile:hover,#screen-fukuoka .home-quad .quad-tile:hover,#screen-koyasan .home-quad .quad-tile:hover,#screen-himeji .home-quad .quad-tile:hover,#screen-kurashiki .home-quad .quad-tile:hover,#screen-matsue .home-quad .quad-tile:hover{transform:none;box-shadow:none} #screen-langue-dico .home-quad .quad-photo,#screen-comprendre-phrases .home-quad .quad-photo,#screen-hub-geographie .home-quad .quad-photo,#screen-tokyo .home-quad .quad-photo,#screen-osaka .home-quad .quad-photo,#screen-kyoto .home-quad .quad-photo,#screen-kobe .home-quad .quad-photo,#screen-hiroshima .home-quad .quad-photo,#screen-miyajima .home-quad .quad-photo,#screen-shirakawa .home-quad .quad-photo,#screen-nara .home-quad .quad-photo,#screen-kanazawa .home-quad .quad-photo,#screen-takayama .home-quad .quad-photo,#screen-noto .home-quad .quad-photo,#screen-naoshima .home-quad .quad-photo,#screen-nikko .home-quad .quad-photo,#screen-hakone .home-quad .quad-photo,#screen-kumano .home-quad .quad-photo,#screen-hokkaido .home-quad .quad-photo,#screen-sapporo .home-quad .quad-photo,#screen-hakodate .home-quad .quad-photo,#screen-shiretoko .home-quad .quad-photo,#screen-biei .home-quad .quad-photo,#screen-otaru .home-quad .quad-photo,#screen-niseko .home-quad .quad-photo,#screen-hiraizumi .home-quad .quad-photo,#screen-ginzan .home-quad .quad-photo,#screen-hirosaki .home-quad .quad-photo,#screen-aizuwakamatsu .home-quad .quad-photo,#screen-toyama .home-quad .quad-photo,#screen-towada .home-quad .quad-photo,#screen-matsushima .home-quad .quad-photo,#screen-daisetsuzan .home-quad .quad-photo,#screen-akan .home-quad .quad-photo,#screen-toya .home-quad .quad-photo,#screen-okinawa .home-quad .quad-photo,#screen-region-tohoku .home-quad .quad-photo,#screen-region-kanto .home-quad .quad-photo,#screen-region-chubu .home-quad .quad-photo,#screen-region-kansai .home-quad .quad-photo,#screen-region-chugoku .home-quad .quad-photo,#screen-region-shikoku .home-quad .quad-photo,#screen-region-kyushu .home-quad .quad-photo,#screen-region-okinawa .home-quad .quad-photo,#screen-histoire .home-quad .quad-photo,#screen-sendai .home-quad .quad-photo,#screen-nagano .home-quad .quad-photo,#screen-wakayama .home-quad .quad-photo,#screen-miyazaki .home-quad .quad-photo,#screen-yaeyama .home-quad .quad-photo,#screen-kamakura .home-quad .quad-photo,#screen-fukuoka .home-quad .quad-photo,#screen-koyasan .home-quad .quad-photo,#screen-himeji .home-quad .quad-photo,#screen-kurashiki .home-quad .quad-photo,#screen-matsue .home-quad .quad-photo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto} #screen-langue-dico .home-quad .quad-bg,#screen-comprendre-phrases .home-quad .quad-bg,#screen-hub-geographie .home-quad .quad-bg,#screen-tokyo .home-quad .quad-bg,#screen-osaka .home-quad .quad-bg,#screen-kyoto .home-quad .quad-bg,#screen-kobe .home-quad .quad-bg,#screen-hiroshima .home-quad .quad-bg,#screen-miyajima .home-quad .quad-bg,#screen-shirakawa .home-quad .quad-bg,#screen-nara .home-quad .quad-bg,#screen-kanazawa .home-quad .quad-bg,#screen-takayama .home-quad .quad-bg,#screen-noto .home-quad .quad-bg,#screen-naoshima .home-quad .quad-bg,#screen-nikko .home-quad .quad-bg,#screen-hakone .home-quad .quad-bg,#screen-kumano .home-quad .quad-bg,#screen-hokkaido .home-quad .quad-bg,#screen-sapporo .home-quad .quad-bg,#screen-hakodate .home-quad .quad-bg,#screen-shiretoko .home-quad .quad-bg,#screen-biei .home-quad .quad-bg,#screen-otaru .home-quad .quad-bg,#screen-niseko .home-quad .quad-bg,#screen-hiraizumi .home-quad .quad-bg,#screen-ginzan .home-quad .quad-bg,#screen-hirosaki .home-quad .quad-bg,#screen-aizuwakamatsu .home-quad .quad-bg,#screen-toyama .home-quad .quad-bg,#screen-towada .home-quad .quad-bg,#screen-matsushima .home-quad .quad-bg,#screen-daisetsuzan .home-quad .quad-bg,#screen-akan .home-quad .quad-bg,#screen-toya .home-quad .quad-bg,#screen-okinawa .home-quad .quad-bg,#screen-region-tohoku .home-quad .quad-bg,#screen-region-kanto .home-quad .quad-bg,#screen-region-chubu .home-quad .quad-bg,#screen-region-kansai .home-quad .quad-bg,#screen-region-chugoku .home-quad .quad-bg,#screen-region-shikoku .home-quad .quad-bg,#screen-region-kyushu .home-quad .quad-bg,#screen-region-okinawa .home-quad .quad-bg,#screen-histoire .home-quad .quad-bg,#screen-sendai .home-quad .quad-bg,#screen-nagano .home-quad .quad-bg,#screen-wakayama .home-quad .quad-bg,#screen-miyazaki .home-quad .quad-bg,#screen-yaeyama .home-quad .quad-bg,#screen-kamakura .home-quad .quad-bg,#screen-fukuoka .home-quad .quad-bg,#screen-koyasan .home-quad .quad-bg,#screen-himeji .home-quad .quad-bg,#screen-kurashiki .home-quad .quad-bg,#screen-matsue .home-quad .quad-bg{transition:transform .12s ease-out} #screen-langue-dico .home-quad .quad-tile:active .quad-bg,#screen-comprendre-phrases .home-quad .quad-tile:active .quad-bg,#screen-hub-geographie .home-quad .quad-tile:active .quad-bg,#screen-tokyo .home-quad .quad-tile:active .quad-bg,#screen-osaka .home-quad .quad-tile:active .quad-bg,#screen-kyoto .home-quad .quad-tile:active .quad-bg,#screen-kobe .home-quad .quad-tile:active .quad-bg,#screen-hiroshima .home-quad .quad-tile:active .quad-bg,#screen-miyajima .home-quad .quad-tile:active .quad-bg,#screen-shirakawa .home-quad .quad-tile:active .quad-bg,#screen-nara .home-quad .quad-tile:active .quad-bg,#screen-kanazawa .home-quad .quad-tile:active .quad-bg,#screen-takayama .home-quad .quad-tile:active .quad-bg,#screen-noto .home-quad .quad-tile:active .quad-bg,#screen-naoshima .home-quad .quad-tile:active .quad-bg,#screen-nikko .home-quad .quad-tile:active .quad-bg,#screen-hakone .home-quad .quad-tile:active .quad-bg,#screen-kumano .home-quad .quad-tile:active .quad-bg,#screen-hokkaido .home-quad .quad-tile:active .quad-bg,#screen-sapporo .home-quad .quad-tile:active .quad-bg,#screen-hakodate .home-quad .quad-tile:active .quad-bg,#screen-shiretoko .home-quad .quad-tile:active .quad-bg,#screen-biei .home-quad .quad-tile:active .quad-bg,#screen-otaru .home-quad .quad-tile:active .quad-bg,#screen-niseko .home-quad .quad-tile:active .quad-bg,#screen-hiraizumi .home-quad .quad-tile:active .quad-bg,#screen-ginzan .home-quad .quad-tile:active .quad-bg,#screen-hirosaki .home-quad .quad-tile:active .quad-bg,#screen-aizuwakamatsu .home-quad .quad-tile:active .quad-bg,#screen-toyama .home-quad .quad-tile:active .quad-bg,#screen-towada .home-quad .quad-tile:active .quad-bg,#screen-matsushima .home-quad .quad-tile:active .quad-bg,#screen-daisetsuzan .home-quad .quad-tile:active .quad-bg,#screen-akan .home-quad .quad-tile:active .quad-bg,#screen-toya .home-quad .quad-tile:active .quad-bg,#screen-okinawa .home-quad .quad-tile:active .quad-bg,#screen-region-tohoku .home-quad .quad-tile:active .quad-bg,#screen-region-kanto .home-quad .quad-tile:active .quad-bg,#screen-region-chubu .home-quad .quad-tile:active .quad-bg,#screen-region-kansai .home-quad .quad-tile:active .quad-bg,#screen-region-chugoku .home-quad .quad-tile:active .quad-bg,#screen-region-shikoku .home-quad .quad-tile:active .quad-bg,#screen-region-kyushu .home-quad .quad-tile:active .quad-bg,#screen-region-okinawa .home-quad .quad-tile:active .quad-bg,#screen-histoire .home-quad .quad-tile:active .quad-bg,#screen-sendai .home-quad .quad-tile:active .quad-bg,#screen-nagano .home-quad .quad-tile:active .quad-bg,#screen-wakayama .home-quad .quad-tile:active .quad-bg,#screen-miyazaki .home-quad .quad-tile:active .quad-bg,#screen-yaeyama .home-quad .quad-tile:active .quad-bg,#screen-kamakura .home-quad .quad-tile:active .quad-bg,#screen-fukuoka .home-quad .quad-tile:active .quad-bg,#screen-koyasan .home-quad .quad-tile:active .quad-bg,#screen-himeji .home-quad .quad-tile:active .quad-bg,#screen-kurashiki .home-quad .quad-tile:active .quad-bg,#screen-matsue .home-quad .quad-tile:active .quad-bg{transform:scale(1.04)} #screen-langue-dico .home-quad .quad-label,#screen-comprendre-phrases .home-quad .quad-label,#screen-hub-geographie .home-quad .quad-label,#screen-tokyo .home-quad .quad-label,#screen-osaka .home-quad .quad-label,#screen-kyoto .home-quad .quad-label,#screen-kobe .home-quad .quad-label,#screen-hiroshima .home-quad .quad-label,#screen-miyajima .home-quad .quad-label,#screen-shirakawa .home-quad .quad-label,#screen-nara .home-quad .quad-label,#screen-kanazawa .home-quad .quad-label,#screen-takayama .home-quad .quad-label,#screen-noto .home-quad .quad-label,#screen-naoshima .home-quad .quad-label,#screen-nikko .home-quad .quad-label,#screen-hakone .home-quad .quad-label,#screen-kumano .home-quad .quad-label,#screen-hokkaido .home-quad .quad-label,#screen-sapporo .home-quad .quad-label,#screen-hakodate .home-quad .quad-label,#screen-shiretoko .home-quad .quad-label,#screen-biei .home-quad .quad-label,#screen-otaru .home-quad .quad-label,#screen-niseko .home-quad .quad-label,#screen-hiraizumi .home-quad .quad-label,#screen-ginzan .home-quad .quad-label,#screen-hirosaki .home-quad .quad-label,#screen-aizuwakamatsu .home-quad .quad-label,#screen-toyama .home-quad .quad-label,#screen-towada .home-quad .quad-label,#screen-matsushima .home-quad .quad-label,#screen-daisetsuzan .home-quad .quad-label,#screen-akan .home-quad .quad-label,#screen-toya .home-quad .quad-label,#screen-okinawa .home-quad .quad-label,#screen-region-tohoku .home-quad .quad-label,#screen-region-kanto .home-quad .quad-label,#screen-region-chubu .home-quad .quad-label,#screen-region-kansai .home-quad .quad-label,#screen-region-chugoku .home-quad .quad-label,#screen-region-shikoku .home-quad .quad-label,#screen-region-kyushu .home-quad .quad-label,#screen-region-okinawa .home-quad .quad-label,#screen-histoire .home-quad .quad-label,#screen-sendai .home-quad .quad-label,#screen-nagano .home-quad .quad-label,#screen-wakayama .home-quad .quad-label,#screen-miyazaki .home-quad .quad-label,#screen-yaeyama .home-quad .quad-label,#screen-kamakura .home-quad .quad-label,#screen-fukuoka .home-quad .quad-label,#screen-koyasan .home-quad .quad-label,#screen-himeji .home-quad .quad-label,#screen-kurashiki .home-quad .quad-label,#screen-matsue .home-quad .quad-label{position:absolute;left:0;right:0;top:auto;bottom:0;height:auto;z-index:2;display:block;padding:30px 12px 11px;text-align:left;background:linear-gradient(to top,rgba(12,10,8,.72) 0%,rgba(12,10,8,0) 100%)} #screen-langue-dico .home-quad .quad-title,#screen-comprendre-phrases .home-quad .quad-title,#screen-hub-geographie .home-quad .quad-title,#screen-tokyo .home-quad .quad-title,#screen-osaka .home-quad .quad-title,#screen-kyoto .home-quad .quad-title,#screen-kobe .home-quad .quad-title,#screen-hiroshima .home-quad .quad-title,#screen-miyajima .home-quad .quad-title,#screen-shirakawa .home-quad .quad-title,#screen-nara .home-quad .quad-title,#screen-kanazawa .home-quad .quad-title,#screen-takayama .home-quad .quad-title,#screen-noto .home-quad .quad-title,#screen-naoshima .home-quad .quad-title,#screen-nikko .home-quad .quad-title,#screen-hakone .home-quad .quad-title,#screen-kumano .home-quad .quad-title,#screen-hokkaido .home-quad .quad-title,#screen-sapporo .home-quad .quad-title,#screen-hakodate .home-quad .quad-title,#screen-shiretoko .home-quad .quad-title,#screen-biei .home-quad .quad-title,#screen-otaru .home-quad .quad-title,#screen-niseko .home-quad .quad-title,#screen-hiraizumi .home-quad .quad-title,#screen-ginzan .home-quad .quad-title,#screen-hirosaki .home-quad .quad-title,#screen-aizuwakamatsu .home-quad .quad-title,#screen-toyama .home-quad .quad-title,#screen-towada .home-quad .quad-title,#screen-matsushima .home-quad .quad-title,#screen-daisetsuzan .home-quad .quad-title,#screen-akan .home-quad .quad-title,#screen-toya .home-quad .quad-title,#screen-okinawa .home-quad .quad-title,#screen-region-tohoku .home-quad .quad-title,#screen-region-kanto .home-quad .quad-title,#screen-region-chubu .home-quad .quad-title,#screen-region-kansai .home-quad .quad-title,#screen-region-chugoku .home-quad .quad-title,#screen-region-shikoku .home-quad .quad-title,#screen-region-kyushu .home-quad .quad-title,#screen-region-okinawa .home-quad .quad-title,#screen-histoire .home-quad .quad-title,#screen-sendai .home-quad .quad-title,#screen-nagano .home-quad .quad-title,#screen-wakayama .home-quad .quad-title,#screen-miyazaki .home-quad .quad-title,#screen-yaeyama .home-quad .quad-title,#screen-kamakura .home-quad .quad-title,#screen-fukuoka .home-quad .quad-title,#screen-koyasan .home-quad .quad-title,#screen-himeji .home-quad .quad-title,#screen-kurashiki .home-quad .quad-title,#screen-matsue .home-quad .quad-title{display:block;color:#fff;font-family:Noto Sans JP,'Cormorant Garamond',serif;font-weight:600;font-size:1.3rem;letter-spacing:.02em;line-height:1.1;text-shadow:0 1px 8px rgba(0,0,0,.55);margin-bottom:0;overflow-wrap:anywhere} #screen-langue-dico .home-quad .quad-title,#screen-comprendre-phrases .home-quad .quad-title,#screen-shirakawa .home-quad .quad-title,#screen-nikko .home-quad .quad-title,#screen-hakone .home-quad .quad-title,#screen-kumano .home-quad .quad-title,#screen-niseko .home-quad .quad-title,#screen-hiraizumi .home-quad .quad-title,#screen-ginzan .home-quad .quad-title,#screen-hirosaki .home-quad .quad-title,#screen-towada .home-quad .quad-title,#screen-matsushima .home-quad .quad-title,#screen-daisetsuzan .home-quad .quad-title,#screen-akan .home-quad .quad-title,#screen-toya .home-quad .quad-title,#screen-miyazaki .home-quad .quad-title,#screen-koyasan .home-quad .quad-title{font-size:1.2rem} #screen-hub-geographie .home-quad .quad-title,#screen-osaka .home-quad .quad-title,#screen-kyoto .home-quad .quad-title,#screen-kobe .home-quad .quad-title,#screen-takayama .home-quad .quad-title,#screen-noto .home-quad .quad-title,#screen-naoshima .home-quad .quad-title,#screen-aizuwakamatsu .home-quad .quad-title,#screen-toyama .home-quad .quad-title,#screen-okinawa .home-quad .quad-title,#screen-region-okinawa .home-quad .quad-title,#screen-histoire .home-quad .quad-title,#screen-kurashiki .home-quad .quad-title{font-size:1.05rem} @media (max-width:359px){#screen-tokyo .home-quad .quad-title,#screen-hiroshima .home-quad .quad-title,#screen-miyajima .home-quad .quad-title,#screen-nara .home-quad .quad-title,#screen-kanazawa .home-quad .quad-title,#screen-hokkaido .home-quad .quad-title,#screen-sapporo .home-quad .quad-title,#screen-hakodate .home-quad .quad-title,#screen-shiretoko .home-quad .quad-title,#screen-biei .home-quad .quad-title,#screen-otaru .home-quad .quad-title,#screen-region-tohoku .home-quad .quad-title,#screen-region-kanto .home-quad .quad-title,#screen-region-chubu .home-quad .quad-title,#screen-region-kansai .home-quad .quad-title,#screen-region-chugoku .home-quad .quad-title,#screen-region-shikoku .home-quad .quad-title,#screen-region-kyushu .home-quad .quad-title,#screen-sendai .home-quad .quad-title,#screen-nagano .home-quad .quad-title,#screen-wakayama .home-quad .quad-title,#screen-yaeyama .home-quad .quad-title,#screen-kamakura .home-quad .quad-title,#screen-fukuoka .home-quad .quad-title,#screen-himeji .home-quad .quad-title,#screen-matsue .home-quad .quad-title,#screen-langue-dico .home-quad .quad-title,#screen-comprendre-phrases .home-quad .quad-title,#screen-shirakawa .home-quad .quad-title,#screen-nikko .home-quad .quad-title,#screen-hakone .home-quad .quad-title,#screen-kumano .home-quad .quad-title,#screen-niseko .home-quad .quad-title,#screen-hiraizumi .home-quad .quad-title,#screen-ginzan .home-quad .quad-title,#screen-hirosaki .home-quad .quad-title,#screen-towada .home-quad .quad-title,#screen-matsushima .home-quad .quad-title,#screen-daisetsuzan .home-quad .quad-title,#screen-akan .home-quad .quad-title,#screen-toya .home-quad .quad-title,#screen-miyazaki .home-quad .quad-title,#screen-koyasan .home-quad .quad-title{font-size:1.05rem}#screen-hub-geographie .home-quad .quad-title,#screen-osaka .home-quad .quad-title,#screen-kyoto .home-quad .quad-title,#screen-kobe .home-quad .quad-title,#screen-takayama .home-quad .quad-title,#screen-noto .home-quad .quad-title,#screen-naoshima .home-quad .quad-title,#screen-aizuwakamatsu .home-quad .quad-title,#screen-toyama .home-quad .quad-title,#screen-okinawa .home-quad .quad-title,#screen-region-okinawa .home-quad .quad-title,#screen-histoire .home-quad .quad-title,#screen-kurashiki .home-quad .quad-title{font-size:.95rem}} /* Okinawa › Visiter : tuiles photo */ #screen-okinawa-visiter .home-quad{gap:8px} #screen-okinawa-visiter .home-quad .quad-tile{position:relative;display:block;aspect-ratio:1/.92;border-radius:0;background:#1a1612;box-shadow:none;overflow:hidden} #screen-okinawa-visiter .home-quad .quad-tile:hover{transform:none;box-shadow:none} #screen-okinawa-visiter .home-quad .quad-photo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto} #screen-okinawa-visiter .home-quad .quad-bg{transition:transform .12s ease-out} #screen-okinawa-visiter .home-quad .quad-tile:active .quad-bg{transform:scale(1.04)} #screen-okinawa-visiter .home-quad .quad-label{position:absolute;left:0;right:0;top:auto;bottom:0;height:auto;z-index:2;display:block;padding:30px 12px 11px;text-align:left;background:linear-gradient(to top,rgba(12,10,8,.72) 0%,rgba(12,10,8,0) 100%)} #screen-okinawa-visiter .home-quad .quad-title{display:block;color:#fff;font-family:Noto Sans JP,'Cormorant Garamond',serif;font-weight:600;font-size:1.2rem;letter-spacing:.02em;line-height:1.1;text-shadow:0 1px 8px rgba(0,0,0,.55);margin-bottom:0;overflow-wrap:anywhere} @keyframes splashPulse{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(-6px);opacity:1}} .gh{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;z-index:10;cursor:pointer;background:#0f0d0a;color:#fff;font-family:Noto Sans JP,'Lato',sans-serif} .gh-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform-origin:50% 62%;animation:ghZoom 30s ease-in-out infinite alternate} .gh-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,10,8,.58) 0%,rgba(12,10,8,.18) 22%,rgba(12,10,8,0) 36%,rgba(12,10,8,.30) 52%,rgba(12,10,8,.90) 100%)} .gh-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden} .gh-petal{position:absolute;top:-6vh;left:var(--x);width:var(--s);height:calc(var(--s)*.72);border-radius:80% 0 80% 0;background:linear-gradient(135deg,#fff0f3,#f2b3c4);opacity:0;will-change:transform;animation:ghFall var(--t) linear var(--d) infinite} .gh-col{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 24px) 0 calc(env(safe-area-inset-bottom,0px) + 14px)} .gh-top{text-align:center} .gh-word{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-weight:600;font-size:2.75rem;letter-spacing:.05em;line-height:1.05;margin-top:2px;text-shadow:0 2px 16px rgba(0,0,0,.55)} .gh-rule-gold{display:block;width:46px;height:1px;background:#d8b66a;margin:10px auto 8px} .gh-kicker{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.6)} .gh-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:0 28px 22px;min-height:0} .gh-tag{font-family:Noto Sans JP,'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:1.5rem;line-height:1.28;max-width:19em;text-shadow:0 2px 14px rgba(0,0,0,.65)} .gh-hand{margin-top:16px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)} .gh-bottom{padding-bottom:2px} .gh-label{display:flex;align-items:center;gap:12px;padding:0 24px 9px;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;opacity:.9} .gh-label i{flex:1;height:1px;background:rgba(255,255,255,.28)} .gh-label b{font-weight:300;font-size:.9rem;letter-spacing:0} .gh-railwrap{position:relative} .gh-nav{display:none} @media (hover:hover) and (pointer:fine){.gh-nav{display:flex;position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(12,10,8,.55);color:#fff;font-size:1.15rem;line-height:1;align-items:center;justify-content:center;cursor:pointer;opacity:.8}.gh-nav:hover{opacity:1;background:rgba(12,10,8,.8)}.gh-nav[hidden]{display:none}.gh-prev{left:8px}.gh-next{right:8px}} .gh-railwrap::after{content:'';position:absolute;top:0;bottom:0;right:0;width:34px;pointer-events:none;background:linear-gradient(to left,rgba(12,10,8,.85),rgba(12,10,8,0))} .gh-rail{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:0 24px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:default} .gh-rail::-webkit-scrollbar{display:none} .gh-card{position:relative;flex:0 0 108px;height:146px;overflow:hidden;scroll-snap-align:start;border:1px solid rgba(255,255,255,.30);background:#2a2620;color:#fff;text-decoration:none;display:block} .gh-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .12s ease-out} .gh-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(12,10,8,.82) 0%,rgba(12,10,8,0) 58%)} .gh-card:active img{transform:scale(1.06)} .gh-name{position:absolute;left:9px;bottom:21px;z-index:1;font-family:Noto Sans JP,'Cormorant Garamond',serif;font-weight:600;font-size:1.05rem;letter-spacing:.03em;line-height:1;text-shadow:0 1px 6px rgba(0,0,0,.6)} .gh-jp{position:absolute;left:9px;bottom:8px;z-index:1;font-family:Noto Sans JP,'Noto Serif JP',serif;font-size:.6rem;opacity:.85;letter-spacing:.12em} .home-monogram{display:flex;justify-content:center;margin-top:10px;cursor:pointer;color:#d8b66a;opacity:.85} .home-monogram svg{width:30px;height:30px;display:block} .gh .home-monogram:hover{transform:scale(1.06);opacity:1} .gh-in{opacity:0;animation:ghIn .15s ease-out forwards} @keyframes ghIn{to{opacity:1}} @keyframes ghZoom{from{transform:scale(1)}to{transform:scale(1.09)}} @keyframes ghFall{0%{transform:translate3d(0,0,0) rotate(0);opacity:0}8%{opacity:.8}92%{opacity:.8}100%{transform:translate3d(var(--dx),108vh,0) rotate(520deg);opacity:0}} @media (max-height:640px){.gh-word{font-size:2.3rem}.gh-tag{font-size:1.25rem}.gh-hand{margin-top:8px}.gh-card{height:122px;flex-basis:96px}.gh-mid{padding-bottom:12px}} @media (min-width:700px){.gh-mid{padding-bottom:34px}.gh-tag{font-size:1.9rem}.gh-card{flex-basis:140px;height:186px}.gh-rail{padding:0 max(24px,calc((100vw - 760px)/2))}.gh-label{padding:0 max(24px,calc((100vw - 760px)/2)) 9px}} @media (prefers-reduced-motion:reduce){.gh-photo{animation:none}.gh-petals{display:none}.gh-in{animation:none;opacity:1;transform:none}}