/* =============================================================
   Élevage du Mont-Sacré — 聖山
   Signature : zen japonais épuré (wabi-sabi).
   Blanc cassé (washi) · encre (sumi) · un seul accent : vermillon (shu).
   Trait fin, vaste espace blanc, aucune dépendance externe.
   ============================================================= */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

:root{
  /* Papier & encre */
  --washi:#F6F2E9;          /* blanc cassé, papier washi */
  --washi-deep:#EFE9DC;     /* panneau légèrement plus dense */
  --washi-warm:#F1EADD;
  --sumi:#201B17;           /* encre chaude, texte principal */
  --sumi-2:#5B534A;         /* encre atténuée, texte secondaire */
  --sumi-3:#938A7E;         /* encre pâle, mentions */
  /* L'unique accent : vermillon (朱) */
  --shu:#C13B26;
  --shu-deep:#9E2E1B;
  /* Traits fins */
  --line:rgba(32,27,23,0.13);
  --line-2:rgba(32,27,23,0.24);
  --line-shu:rgba(193,59,38,0.30);

  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Songti SC","Noto Serif JP",Georgia,"Times New Roman",serif;
  --sans:"Hiragino Sans","Yu Gothic",YuGothic,"Helvetica Neue",Helvetica,Arial,"Noto Sans JP",system-ui,sans-serif;

  --wrap:1160px;
  --prose:41rem;
  --pad:clamp(1.4rem,5.5vw,5.5rem);
  --gap-section:clamp(4.5rem,13vh,11rem);
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  background:var(--washi);
  color:var(--sumi);
  line-height:1.85;
  font-size:clamp(1rem,0.97rem + 0.2vw,1.09rem);
  font-weight:400;
  letter-spacing:0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Grain de papier très subtil, sans image */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 18% 12%, rgba(193,59,38,0.020), transparent 42%),
    radial-gradient(circle at 84% 78%, rgba(32,27,23,0.020), transparent 46%);
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }

::selection{ background:rgba(193,59,38,0.16); color:var(--sumi); }

/* -------------------------------------------------------------
   Typographie
   ------------------------------------------------------------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; color:var(--sumi); line-height:1.16; letter-spacing:0.005em; }

.prose{ max-width:var(--prose); }
.prose p{ color:var(--sumi); margin:0 0 1.35em; }
.prose p:last-child{ margin-bottom:0; }
.prose h2{ font-size:clamp(1.55rem,1.2rem + 1.5vw,2.3rem); margin:2.6em 0 0.8em; }
.prose h3{ font-size:clamp(1.2rem,1.05rem + 0.6vw,1.5rem); margin:2.1em 0 0.6em; color:var(--sumi); }
.prose h2:first-child,.prose h3:first-child{ margin-top:0; }
.prose strong{ font-weight:600; }
.prose em{ font-style:italic; }
.prose a{ color:var(--shu); border-bottom:1px solid var(--line-shu); transition:border-color .25s,color .25s; }
.prose a:hover{ color:var(--shu-deep); border-color:var(--shu-deep); }

.lede{ font-family:var(--serif); font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem); line-height:1.5; color:var(--sumi); letter-spacing:0.004em; }

/* Liste zen : trait fin + tiret vermillon */
.zen-list{ list-style:none; max-width:var(--prose); }
.zen-list li{ position:relative; padding:0.85em 0 0.85em 2.2em; border-bottom:1px solid var(--line); }
.zen-list li:first-child{ border-top:1px solid var(--line); }
.zen-list li::before{ content:""; position:absolute; left:0; top:1.55em; width:1.1rem; height:1px; background:var(--shu); }

/* -------------------------------------------------------------
   Cadre & structure
   ------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--gap-section); }
.section--tight{ padding-block:clamp(3rem,7vh,5.5rem); }

.kicker{
  display:inline-flex; align-items:center; gap:0.75rem;
  font-family:var(--sans); font-size:0.72rem; font-weight:600;
  letter-spacing:0.34em; text-transform:uppercase; color:var(--shu);
  margin-bottom:1.5rem;
}
.kicker .num{ font-family:var(--serif); color:var(--sumi-3); letter-spacing:0; font-weight:400; font-size:0.95rem; }
.kicker::before{ content:""; width:2rem; height:1px; background:var(--shu); opacity:.7; }

.eyebrow{ font-size:0.72rem; font-weight:600; letter-spacing:0.32em; text-transform:uppercase; color:var(--sumi-3); }

/* Titre de section */
.h-lg{ font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem); }
.h-xl{ font-size:clamp(2.5rem,1.6rem + 4vw,4.7rem); }

/* -------------------------------------------------------------
   Motifs : disque (soleil / hinomaru) & sceau (hanko)
   ------------------------------------------------------------- */
.disc{ border-radius:50%; background:var(--shu); display:block; }

.seal{
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--shu);
  color:var(--shu); font-family:var(--serif);
  writing-mode:vertical-rl; text-orientation:upright;
  letter-spacing:0.12em; line-height:1.05;
  padding:0.5rem 0.35rem; border-radius:2px;
  user-select:none;
}
.seal--sm{ font-size:0.95rem; padding:0.4rem 0.25rem; }
.seal--lg{ font-size:1.5rem; padding:0.7rem 0.45rem; }

/* Séparateur : trait fin ponctué d'un point vermillon */
.rule{ display:flex; align-items:center; gap:1.2rem; margin-block:var(--gap-section); }
.rule::before,.rule::after{ content:""; height:1px; background:var(--line); flex:1; }
.rule .dot{ width:7px; height:7px; border-radius:50%; background:var(--shu); flex:none; }

/* Ligne de montagne (Mont Sacré) — trait unique */
.mountain{ width:100%; height:auto; display:block; color:var(--line-2); }

/* -------------------------------------------------------------
   En-tête
   ------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(246,242,233,0.86);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:74px; }

.brand{ display:flex; align-items:center; gap:0.85rem; }
.brand .mark{ width:13px; height:13px; border-radius:50%; background:var(--shu); flex:none; margin-top:2px; }
.brand .txt{ display:flex; flex-direction:column; line-height:1.05; }
.brand .name{ font-family:var(--serif); font-size:1.16rem; color:var(--sumi); letter-spacing:0.01em; }
.brand .sub{ font-size:0.62rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--sumi-3); margin-top:3px; }

/* Navigation */
.nav{ display:flex; align-items:center; gap:0.35rem; }
.nav-link{
  display:inline-block; padding:0.6rem 0.85rem;
  font-size:0.79rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--sumi-2);
  position:relative; transition:color .25s;
}
.nav-link:hover,.nav-item:hover > .nav-link,.nav-link[aria-current="page"]{ color:var(--sumi); }
.nav-link[aria-current="page"]::after{
  content:""; position:absolute; left:0.85rem; right:0.85rem; bottom:0.35rem; height:1px; background:var(--shu);
}
.nav-item{ position:relative; }
.nav-item > .nav-link .caret{ display:inline-block; margin-left:0.35rem; width:5px; height:5px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); opacity:.6; }

.sub{
  position:absolute; top:100%; left:0; min-width:230px;
  background:var(--washi); border:1px solid var(--line);
  padding:0.5rem; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s,transform .2s,visibility .2s; box-shadow:0 22px 50px -30px rgba(32,27,23,0.4);
}
.nav-item:hover .sub,.nav-item:focus-within .sub{ opacity:1; visibility:visible; transform:translateY(0); }
.sub a{ display:block; padding:0.6rem 0.9rem; font-size:0.82rem; color:var(--sumi-2); letter-spacing:0.04em; transition:color .2s,background .2s; }
.sub a:hover{ color:var(--sumi); background:var(--washi-deep); }

/* Bouton menu mobile */
.nav-toggle{ display:none; background:none; border:1px solid var(--line-2); width:44px; height:40px; cursor:pointer; position:relative; border-radius:2px; }
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:50%; width:19px; height:1.4px; background:var(--sumi); transition:.28s; transform:translateX(-50%);
}
.nav-toggle span{ top:50%; transform:translate(-50%,-50%); }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }

/* -------------------------------------------------------------
   Héros
   ------------------------------------------------------------- */
.hero{ position:relative; padding-block:clamp(3.5rem,11vh,8rem) clamp(3rem,8vh,6rem); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.hero h1{ font-size:clamp(2.6rem,1.6rem + 5vw,5rem); line-height:1.08; letter-spacing:0.004em; margin:0.4em 0 0; }
.hero h1 .accent{ color:var(--shu); }
.hero-lede{ margin-top:1.8rem; max-width:34rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }

/* Composition graphique du héros (disque + sceau) */
.hero-art{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; }
.hero-art .sun{
  width:min(82%,340px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #d0533c, var(--shu) 62%, var(--shu-deep));
  box-shadow:0 40px 90px -40px rgba(158,46,27,0.55);
}
.hero-art .ring{ position:absolute; inset:0; margin:auto; width:min(96%,410px); aspect-ratio:1; border:1px solid var(--line-2); border-radius:50%; }
.hero-art .seal{ position:absolute; right:6%; bottom:8%; background:var(--washi); }

/* -------------------------------------------------------------
   Boutons
   ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:0.7rem;
  font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:500;
  padding:0.95rem 1.7rem; border:1px solid var(--sumi); color:var(--sumi);
  transition:.28s; border-radius:1px;
}
.btn:hover{ background:var(--sumi); color:var(--washi); }
.btn .arrow{ transition:transform .28s; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--shu{ border-color:var(--shu); color:var(--shu); }
.btn--shu:hover{ background:var(--shu); color:#fff; }
.btn--ghost{ border-color:var(--line-2); color:var(--sumi-2); }
.btn--ghost:hover{ background:var(--sumi); color:var(--washi); border-color:var(--sumi); }

/* Lien fléché discret */
.link-arrow{ display:inline-flex; align-items:center; gap:0.55rem; font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--shu); }
.link-arrow .arrow{ transition:transform .25s; }
.link-arrow:hover{ color:var(--shu-deep); }
.link-arrow:hover .arrow{ transform:translateX(4px); }

/* -------------------------------------------------------------
   Mise en page éditoriale
   ------------------------------------------------------------- */
.split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,6vw,5.5rem); align-items:start; }
.split--rev{ grid-template-columns:1.1fr 0.9fr; }
.stick{ position:sticky; top:110px; }

/* Cartes (accès rubriques / femelles) */
.grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.cell{ background:var(--washi); padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; min-height:200px; transition:background .3s; }
a.cell:hover{ background:var(--washi-deep); }
.cell .idx{ font-family:var(--serif); font-size:1.1rem; color:var(--shu); margin-bottom:auto; }
.cell h3{ font-size:clamp(1.25rem,1.05rem + 0.7vw,1.6rem); margin:1.6rem 0 0.5rem; }
.cell p{ color:var(--sumi-2); font-size:0.94rem; }
.cell .more{ margin-top:1.3rem; font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--shu); display:inline-flex; align-items:center; gap:0.5rem; }
a.cell:hover .more .arrow{ transform:translateX(4px); }
.cell .more .arrow{ transition:transform .25s; }

/* Fiche femelle (roster) */
.roster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.roster .name-card{ background:var(--washi); padding:1.9rem 1.7rem; display:flex; flex-direction:column; gap:0.5rem; transition:background .3s; }
.roster .name-card:hover{ background:var(--washi-deep); }
.roster .name-card .role{ font-size:0.68rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--shu); }
.roster .name-card .dog{ font-family:var(--serif); font-size:1.3rem; line-height:1.25; color:var(--sumi); }
.roster .name-card .sub{ font-size:0.85rem; color:var(--sumi-3); }

/* Panneau (encadré washi) */
.panel{ background:var(--washi-deep); border:1px solid var(--line); padding:clamp(1.8rem,4vw,3rem); }
.panel--shu{ border-color:var(--line-shu); }

/* Tarifs */
.price-row{ display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.price-row:first-of-type{ border-top:1px solid var(--line); }
.price-row .pr-name{ font-family:var(--serif); font-size:clamp(1.2rem,1rem + 0.7vw,1.55rem); }
.price-row .pr-name small{ display:block; font-family:var(--sans); font-size:0.82rem; color:var(--sumi-3); letter-spacing:0.02em; text-transform:none; margin-top:0.2rem; }
.price-row .pr-val{ font-family:var(--serif); font-size:clamp(1.3rem,1rem + 1vw,1.9rem); color:var(--shu); white-space:nowrap; }

/* Étapes numérotées */
.steps{ counter-reset:step; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.step{ background:var(--washi); padding:clamp(1.5rem,3vw,2.3rem); display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:start; }
.step::before{ counter-increment:step; content:counter(step,decimal-leading-zero); font-family:var(--serif); font-size:1.4rem; color:var(--shu); line-height:1; }
.step h3{ font-size:1.15rem; margin-bottom:0.3rem; }
.step p{ color:var(--sumi-2); font-size:0.94rem; }

/* Coordonnées (contact) */
.contact-lines{ display:grid; gap:0; }
.contact-lines .cl{ display:grid; grid-template-columns:150px 1fr; gap:1.5rem; padding:1.3rem 0; border-bottom:1px solid var(--line); align-items:baseline; }
.contact-lines .cl:first-child{ border-top:1px solid var(--line); }
.contact-lines .cl .k{ font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--sumi-3); }
.contact-lines .cl .v{ font-family:var(--serif); font-size:clamp(1.1rem,0.95rem + 0.6vw,1.4rem); color:var(--sumi); }
.contact-lines .cl .v a{ color:var(--shu); transition:color .2s; }
.contact-lines .cl .v a:hover{ color:var(--shu-deep); }

/* Fil d'ariane */
.breadcrumb{ font-size:0.74rem; letter-spacing:0.06em; color:var(--sumi-3); padding-top:2rem; }
.breadcrumb a{ color:var(--sumi-2); transition:color .2s; }
.breadcrumb a:hover{ color:var(--shu); }
.breadcrumb .sep{ margin:0 0.55rem; color:var(--line-2); }

/* Page-tête (sous-pages) */
.pagehead{ padding-block:clamp(2.5rem,6vh,4.5rem) clamp(1.5rem,4vh,3rem); }
.pagehead h1{ font-size:clamp(2.3rem,1.5rem + 3.4vw,4rem); margin-top:0.6rem; }
.pagehead .intro{ margin-top:1.4rem; max-width:var(--prose); color:var(--sumi-2); }

/* -------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); margin-top:var(--gap-section); background:var(--washi-warm); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,5vw,4rem); padding-block:clamp(3.5rem,8vh,5.5rem); }
.footer-brand .name{ font-family:var(--serif); font-size:1.5rem; color:var(--sumi); }
.footer-brand p{ color:var(--sumi-2); font-size:0.92rem; margin-top:1rem; max-width:28rem; }
.footer-col h4{ font-family:var(--sans); font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--sumi-3); font-weight:600; margin-bottom:1.2rem; }
.footer-col a,.footer-col p{ display:block; color:var(--sumi-2); font-size:0.9rem; padding:0.32rem 0; transition:color .2s; }
.footer-col a:hover{ color:var(--shu); }
.footer-bottom{ border-top:1px solid var(--line); padding-block:1.6rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.footer-bottom p{ font-size:0.76rem; color:var(--sumi-3); letter-spacing:0.02em; }
.footer-seal{ display:flex; align-items:center; gap:1rem; }

/* -------------------------------------------------------------
   Utilitaires
   ------------------------------------------------------------- */
.mt-s{ margin-top:1rem; } .mt-m{ margin-top:2rem; } .mt-l{ margin-top:3.5rem; }
.center{ text-align:center; } .max-prose{ max-width:var(--prose); }
.mx-auto{ margin-inline:auto; }
.muted{ color:var(--sumi-2); }

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ max-width:360px; margin-inline:auto; order:-1; }
  .split,.split--rev{ grid-template-columns:1fr; gap:2.5rem; }
  .stick{ position:static; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .grid--3{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .nav-toggle{ display:block; }
  .nav{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--washi); border-bottom:1px solid var(--line);
    padding:0.5rem var(--pad) 1.5rem; transform:translateY(-115%); transition:transform .35s ease;
    max-height:calc(100vh - 74px); overflow-y:auto; box-shadow:0 30px 40px -30px rgba(32,27,23,0.35);
  }
  .nav.open{ transform:translateY(0); }
  .nav-link{ padding:0.95rem 0.2rem; border-bottom:1px solid var(--line); font-size:0.86rem; }
  .nav-item{ display:block; }
  .nav-item > .nav-link .caret{ display:none; }
  .sub{ position:static; opacity:1; visibility:visible; transform:none; border:none; box-shadow:none; padding:0 0 0.6rem 1rem; min-width:0; background:transparent; }
  .sub a{ padding:0.55rem 0.2rem; border-bottom:1px solid var(--line); }
}
@media (max-width:560px){
  .grid--2,.grid--3{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .contact-lines .cl{ grid-template-columns:1fr; gap:0.35rem; }
  .price-row{ flex-direction:column; gap:0.4rem; }
  .step{ grid-template-columns:1fr; gap:0.7rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}