/* Tsuki no Ito — version française. Esthétique wa : indigo (ai), or, papier washi. */
:root{
  --ai:#131f3d; --ai-2:#0d1526; --ai-3:#1d2c52;
  --or:#c6a15b; --or-2:#e3c98c; --washi:#f4eee0; --washi-2:#ece3cd;
  --encre:#1a1c22; --gris:#5b5e66; --shu:#a63d2f;
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN",serif;
  --sans:-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--encre); background:var(--washi);
  font-family:var(--serif); font-size:19px; line-height:1.75;
  line-break:strict;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.48 0 0 0 0 0.32 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; text-wrap:balance; line-height:1.25; margin:0 0 .5em}
p{margin:0 0 1em}
a{color:var(--ai-3)}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:1060px; margin:0 auto; padding:0 24px}
.narrow{max-width:760px; margin:0 auto; padding:0 24px}

/* ——— En-tête ——— */
.site-head{position:absolute; top:0; left:0; right:0; z-index:30}
.site-head .bar{display:flex; align-items:center; justify-content:space-between; padding:20px 28px}
.brand{color:#fff; text-decoration:none; display:flex; align-items:baseline; gap:14px}
.brand .bname{font-size:26px; letter-spacing:.14em; font-weight:600}
.brand .bsub{font-size:13px; letter-spacing:.28em; color:var(--or-2); text-transform:uppercase; font-family:var(--sans)}
.brand .bja{font-family:var(--mincho); color:var(--or-2); font-size:17px; letter-spacing:.4em}
.mainnav{display:flex; gap:26px; font-family:var(--sans); font-size:13.5px; letter-spacing:.08em}
.mainnav a{color:#e9e4d4; text-decoration:none}
.mainnav a:hover{color:var(--or-2)}
@media (max-width:760px){ .mainnav{display:none} .brand .bsub{display:none} }

/* ——— Hero ——— */
.hero{position:relative; background:var(--ai-2); color:#f2ecdb; overflow:hidden}
.hero .bgimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92}
.hero .veil{position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,15,30,.82) 30%, rgba(10,15,30,.25) 65%, rgba(10,15,30,.05))}
.hero .inner{position:relative; padding:158px 0 110px}
.hero .eyebrow{font-family:var(--sans); letter-spacing:.34em; font-size:12.5px; text-transform:uppercase; color:var(--or-2); margin-bottom:22px}
.hero h1{font-size:clamp(38px,6vw,64px); font-weight:500; max-width:15em}
.hero h1 em{font-style:italic; color:var(--or-2)}
.hero .lead{font-size:21px; max-width:34em; color:#e6dfca}
.hero .cta-row{display:flex; flex-wrap:wrap; gap:16px; margin-top:34px}
.vert-ja{position:absolute; right:34px; top:120px; writing-mode:vertical-rl; font-family:var(--mincho); color:rgba(227,201,140,.75); font-size:21px; letter-spacing:.55em; z-index:2}
@media (max-width:760px){ .vert-ja{display:none} .hero .inner{padding:120px 0 80px} }

.btn{display:inline-block; font-family:var(--sans); font-size:15px; letter-spacing:.06em; text-decoration:none; padding:15px 30px; border:1px solid var(--or); color:#131313; background:linear-gradient(180deg,var(--or-2),var(--or)); border-radius:2px; cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent; color:#f2ecdb; border-color:rgba(227,201,140,.65)}
.btn.dark{background:var(--ai); color:#f2ecdb; border-color:var(--ai)}
.btn.small{padding:10px 20px; font-size:14px}

/* ——— Sections ——— */
section.bloc{padding:88px 0}
section.bloc.indigo{background:var(--ai); color:#ece5cf}
section.bloc.indigo a{color:var(--or-2)}
section.bloc.pale{background:var(--washi-2)}
.kicker{font-family:var(--sans); font-size:12.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--shu); margin-bottom:14px}
.indigo .kicker{color:var(--or-2)}
.bloc h2{font-size:clamp(28px,4vw,40px); font-weight:500}
.lead2{font-size:20.5px; max-width:44em}
.fil{width:64px; height:1px; background:var(--or); margin:26px 0; border:0}
.center{text-align:center}
.center .fil{margin-left:auto; margin-right:auto}

/* lune du jour */
.lune-card{display:flex; gap:34px; align-items:center; flex-wrap:wrap}
.moon-disc{width:150px; height:150px; border-radius:50%; flex:0 0 auto; background:radial-gradient(circle at 38% 34%, #f7ead0, #dfc288 55%, #b98f45); box-shadow:0 0 60px rgba(198,161,91,.35), inset -18px -10px 34px rgba(90,64,20,.45)}
.lune-faits{font-family:var(--sans); font-size:15px; display:grid; grid-template-columns:auto auto; gap:4px 22px}
.lune-faits dt{color:var(--or-2)} .lune-faits dd{margin:0}

/* signes */
.sign-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px}
@media (max-width:820px){ .sign-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:540px){ .sign-grid{grid-template-columns:repeat(2,1fr)} }
.sign-chip{display:block; text-decoration:none; border:1px solid rgba(198,161,91,.5); padding:18px 16px; background:rgba(255,255,255,.55); color:var(--encre); transition:.2s}
.sign-chip:hover{border-color:var(--or); background:#fff}
.sign-chip .glyph{font-size:26px; color:var(--ai-3)}
.sign-chip .sname{font-size:21px; font-weight:600; display:block}
.sign-chip .sdates{font-family:var(--sans); font-size:12.5px; color:var(--gris); letter-spacing:.04em}

/* cartes lectures */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px}
@media (max-width:900px){ .tiers{grid-template-columns:1fr} }
.tier{border:1px solid rgba(198,161,91,.55); background:#fffdf7; padding:30px 26px; display:flex; flex-direction:column}
.tier.feature{background:var(--ai); color:#ece5cf; border-color:var(--or)}
.tier h3{font-size:24px}
.tier .prix{font-size:34px; font-weight:600; margin:6px 0 2px}
.tier .prix small{font-size:14px; font-family:var(--sans); color:var(--gris)}
.tier.feature .prix small{color:#cbbd93}
.tier ul{margin:14px 0 22px; padding-left:1.1em; font-size:17.5px}
.tier .btn{margin-top:auto; text-align:center}
.tier .tja{font-family:var(--mincho); color:var(--or); letter-spacing:.3em; font-size:13px}

/* diagnostic */
.diag-box{border:1px solid rgba(198,161,91,.6); background:#fffdf7; padding:34px 30px; margin-top:28px}
.diag-box label{font-family:var(--sans); font-size:13.5px; letter-spacing:.06em; display:block; margin:18px 0 8px; color:var(--ai-3)}
.diag-box input[type="date"], .diag-box select{font-size:18px; padding:12px 14px; border:1px solid #b9ac8a; background:#fff; width:100%; max-width:340px; font-family:var(--sans)}
.blood-row{display:flex; gap:10px; flex-wrap:wrap}
.blood-row button{font-family:var(--serif); font-size:19px; padding:10px 22px; border:1px solid #b9ac8a; background:#fff; cursor:pointer}
.blood-row button.sel{background:var(--ai); color:#f2ecdb; border-color:var(--ai)}
.result-card{margin-top:30px; border:1px solid var(--or); background:linear-gradient(180deg,#fffdf7,#f7efdb); padding:36px 32px; display:none}
.result-card.show{display:block}
.result-card .tno{font-family:var(--sans); letter-spacing:.22em; font-size:13px; color:var(--shu); text-transform:uppercase}
.result-card .tname{font-size:clamp(27px,4vw,38px); font-weight:600; margin:8px 0 4px}
.result-card .tdesc{font-family:var(--sans); font-size:14.5px; color:var(--gris)}
.couche{margin-top:22px; border-top:1px solid rgba(198,161,91,.45); padding-top:18px}
.couche h4{font-family:var(--sans); font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--ai-3); margin-bottom:8px}
.hanko{display:inline-block; background:var(--shu); color:#fff; font-family:var(--mincho); padding:4px 8px; font-size:15px; letter-spacing:.2em; border-radius:2px; vertical-align:middle}

/* articles (signes, dossiers) */
.article{max-width:760px; margin:0 auto; padding:0 24px}
.article h2{margin-top:1.6em}
.article .meta{font-family:var(--sans); color:var(--gris); font-size:14px}
table.years{border-collapse:collapse; width:100%; font-size:16.5px; margin:18px 0}
table.years th, table.years td{border:1px solid #cfc39f; padding:8px 10px; text-align:left}
table.years th{background:var(--ai); color:#f2ecdb; font-family:var(--sans); font-weight:500; font-size:14px; letter-spacing:.05em}
.note{border-left:3px solid var(--or); background:rgba(255,255,255,.55); padding:14px 18px; font-size:17px; margin:20px 0}
.faq details{border-top:1px solid rgba(198,161,91,.5); padding:16px 4px}
.faq summary{font-size:20px; font-weight:600; cursor:pointer}
.faq p{margin-top:8px; font-size:17.5px}

/* pied de page */
.site-foot{background:var(--ai-2); color:#cfc7ab; padding:64px 0 40px; font-size:16.5px}
.site-foot a{color:#e6dcbc; text-decoration:none}
.site-foot a:hover{color:var(--or-2)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:34px}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr} }
.site-foot h4{font-family:var(--sans); font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--or-2)}
.site-foot ul{list-style:none; margin:0; padding:0; line-height:2}
.foot-legal{border-top:1px solid rgba(198,161,91,.3); margin-top:40px; padding-top:20px; font-family:var(--sans); font-size:12.5px; color:#9d9682}
.prose p, .prose li{font-size:18px}
.prose h2{margin-top:1.5em; font-size:28px}
.prose h3{margin-top:1.2em; font-size:22px}

/* bandeau cookies */
.cookie-bar{position:fixed; left:0; right:0; bottom:0; z-index:80; background:var(--ai-2); color:#ece5cf; border-top:1px solid var(--or); padding:18px 0; display:none}
.cookie-bar.show{display:block}
.cookie-bar .row{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.cookie-bar p{margin:0; font-size:16px; flex:1 1 320px}
.cookie-bar .btn{padding:10px 18px; font-size:14px}
.cookie-bar .btn.refuse{background:transparent; color:#ece5cf; border-color:#8d8668}
.share-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.share-row a, .share-row button{font-family:var(--sans); font-size:13.5px; border:1px solid #b9ac8a; background:#fff; color:var(--ai-3); padding:9px 16px; text-decoration:none; cursor:pointer}