:root{
  --papier:#f6f3ec; --fond-panneau:#fbf9f4; --encre:#161310; --discret:#8b8378;
  --trait:rgba(22,19,16,.12); --trait-fort:rgba(22,19,16,.32);
  --serif-ja:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Source Han Serif JP","Noto Serif SC",serif;
  --serif-lat:"Cormorant Garamond","Hiragino Mincho ProN","Noto Serif JP",Georgia,serif;
  --mesure:36rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--serif-ja);font-weight:400;font-size:16px;line-height:1.9;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* en-tête */
.entete{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.4rem 2.4rem;mix-blend-mode:multiply}
.marque{display:flex;align-items:baseline;gap:.7rem}
.marque-kanji{font-size:1.15rem;letter-spacing:.2em}
.marque-romaji{font-family:var(--serif-lat);font-size:.9rem;letter-spacing:.24em;color:var(--discret)}
.nav{display:flex;gap:2.2rem;font-size:.82rem;letter-spacing:.2em}
.nav a{padding-bottom:.2rem;border-bottom:1px solid transparent;transition:border-color .3s}
.nav a:hover{border-color:var(--encre)}
.langues{display:flex;gap:1.1rem;font-size:.72rem;letter-spacing:.14em;color:var(--discret)}
.lang-opt{padding:.1rem 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.lang-opt:hover{color:var(--encre)}
.lang-opt.actif{color:var(--encre);border-color:var(--encre)}

/* héros */
.hero{position:relative;height:100vh;min-height:36rem;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
#fond{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-titre{position:relative;margin:0;font-weight:400;line-height:1}
.hero-kanji{display:block;writing-mode:vertical-rl;font-size:clamp(4.2rem,11vw,8.5rem);letter-spacing:.32em;font-weight:300;padding-top:.15em}
.hero-phrase{position:relative;margin:2.6rem 0 0;font-size:.95rem;letter-spacing:.3em;color:var(--discret)}

/* blocs */
main{position:relative;background:var(--papier)}
.bloc{padding:8rem 2.4rem;max-width:64rem;margin:0 auto}
.intro{padding-top:9rem}
.intro-texte{max-width:var(--mesure);margin:0 auto;font-size:1.05rem;line-height:2.3;text-align:center}
.titre-section{margin:0 0 4rem;text-align:center;font-weight:400;font-size:.78rem;letter-spacing:.42em;color:var(--discret)}
.titre-section span{display:inline-block;padding-bottom:1rem;border-bottom:1px solid var(--trait-fort)}

/* outils */
.outils{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.outil{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3.6rem 1.8rem 3rem;border-left:1px solid var(--trait);transition:background .4s}
.outil:first-child{border-left:0}
.outil:hover{background:var(--fond-panneau)}
.outil-kanji{font-size:4.6rem;line-height:1;font-weight:300;transition:transform .5s}
.outil:hover .outil-kanji{transform:translateY(-.15rem)}
.outil-nom{margin-top:1.1rem;font-family:var(--serif-lat);font-size:.95rem;letter-spacing:.3em;color:var(--discret)}
.outil-desc{margin-top:1.6rem;font-size:.86rem;line-height:2;min-height:4em}
.outil-lien{margin-top:1.8rem;font-size:.72rem;letter-spacing:.28em;padding-bottom:.25rem;border-bottom:1px solid var(--encre)}
.bientot{margin:3rem 0 0;text-align:center;font-size:.78rem;letter-spacing:.18em;color:var(--discret)}
.bientot-kanji{display:block;font-size:1.6rem;letter-spacing:.3em;margin-bottom:.6rem;color:var(--discret);font-weight:300}

/* licence */
.licence-texte{max-width:var(--mesure);margin:0 auto 4rem;text-align:center;font-size:.95rem;line-height:2.2}
.tarifs{display:grid;grid-template-columns:1fr 1fr;max-width:44rem;margin:0 auto;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.tarif{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 2rem;border-left:1px solid var(--trait)}
.tarif:first-child{border-left:0}
.tarif-nom{font-size:.78rem;letter-spacing:.34em;color:var(--discret)}
.tarif-prix{margin-top:1.2rem;font-family:var(--serif-lat);font-size:2.6rem;font-weight:400;line-height:1;letter-spacing:.04em}
.tarif-note{margin-top:.8rem;font-size:.72rem;letter-spacing:.2em;color:var(--discret)}
.tarif-desc{margin-top:1.6rem;font-size:.84rem;line-height:2}
.licence-bientot{margin:3rem 0 0;text-align:center;font-size:.78rem;letter-spacing:.2em;color:var(--discret)}

/* pied */
.pied{padding:5rem 2.4rem 3rem;border-top:1px solid var(--trait);text-align:center}
.pied-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:2.4rem;font-size:.76rem;letter-spacing:.18em}
.pied-liens a{padding-bottom:.2rem;border-bottom:1px solid transparent;transition:border-color .3s}
.pied-liens a:hover{border-color:var(--encre)}
.pied-copy{margin:2.6rem 0 0;font-size:.7rem;letter-spacing:.2em;color:var(--discret)}

/* latin */
html[lang="en"] body,html[lang="fr"] body{font-family:var(--serif-lat);font-size:17.5px;letter-spacing:.01em;line-height:1.75}
html[lang="en"] .marque-kanji,html[lang="fr"] .marque-kanji,html[lang="en"] .hero-kanji,html[lang="fr"] .hero-kanji,html[lang="en"] .outil-kanji,html[lang="fr"] .outil-kanji,html[lang="en"] .bientot-kanji,html[lang="fr"] .bientot-kanji{font-family:var(--serif-ja)}
html[lang="en"] .nav,html[lang="fr"] .nav,html[lang="en"] .titre-section,html[lang="fr"] .titre-section,html[lang="en"] .tarif-nom,html[lang="fr"] .tarif-nom{letter-spacing:.26em;text-transform:uppercase;font-size:.72rem}
html[lang="en"] .hero-phrase,html[lang="fr"] .hero-phrase{letter-spacing:.18em;font-style:italic;font-size:1.05rem}
html[lang="zh"] body{font-family:"Noto Serif SC","Songti SC","STSong",var(--serif-ja)}

@media (max-width:52rem){
  .entete{padding:1.1rem 1.3rem;flex-wrap:wrap;gap:.8rem 1.4rem}
  .nav{gap:1.4rem;order:3;width:100%}
  .bloc{padding:5rem 1.4rem}
  .outils{grid-template-columns:1fr;border-left:0}
  .outil{border-left:0;border-top:1px solid var(--trait)}
  .outil:first-child{border-top:0}
  .tarifs{grid-template-columns:1fr}
  .tarif{border-left:0;border-top:1px solid var(--trait)}
  .tarif:first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}