:root{--gold:#d8a63a;--ivory:#f3eee6}*{box-sizing:border-box}body{margin:0;background:#060606;color:#f7f4ed;font-family:Arial,sans-serif}header{height:80px;display:grid;grid-template-columns:330px 1fr 190px;align-items:center;padding:0 38px;border-bottom:1px solid #181818}.brand{font-family:Georgia,serif;font-size:23px}.brand small{display:block;color:var(--gold);font-size:16px;letter-spacing:7px;margin-top:6px;text-align:center}nav{display:flex;justify-content:center;gap:34px;font-size:12px}nav a{height:80px;display:grid;place-items:center}.active{color:var(--gold);border-bottom:2px solid var(--gold)}button,.cta{border:1px solid #e3b348;background:linear-gradient(90deg,#c78f28,#e5b84e);border-radius:30px;color:#090909;font-weight:bold;padding:14px 22px}.hero{min-height:530px;display:grid;grid-template-columns:35% 35% 18% 12%;overflow:hidden}.logo{display:grid;place-items:center;background:radial-gradient(circle,#211707,#060606 65%)}.ring{width:82%;aspect-ratio:1;border:4px solid var(--gold);outline:2px solid var(--gold);outline-offset:8px;border-radius:50%;display:grid;place-content:center;text-align:center;color:var(--gold);font-family:Georgia,serif;font-size:25px}.ring small{display:block;font:11px Arial;margin-top:8px}.copy{text-align:center;align-self:center;padding:25px 0}.eyebrow{color:var(--gold);letter-spacing:5px;font-size:12px}.copy h1{font:56px/.95 Georgia,serif;letter-spacing:7px;margin:28px 0 10px}.jp{color:#efbc50;font:31px Georgia,serif;letter-spacing:7px}.copy blockquote{font:italic 18px/1.35 Georgia,serif;margin:28px 0 8px}.sig{color:#e8b34b;font:17px Georgia,serif;margin-bottom:28px}.cta{display:inline-block}.dojo{display:grid;place-items:end center;padding-bottom:18px;background-image:linear-gradient(90deg,rgba(5,5,5,.68),rgba(5,5,5,.08) 55%),url("assets/dojo-reference-crop.png");background-size:cover;background-position:center;color:transparent;font-size:0}aside{padding:8px 22px 8px 16px}aside>div{height:73px;border-bottom:1px solid #6e5524;display:grid;grid-template-columns:62px 1fr;align-items:center}aside b{color:#efbd50;font:36px Georgia,serif;text-align:center}aside span{display:flex;flex-direction:column;gap:6px}aside em{font-style:normal;color:#efbd50;font-weight:bold;font-size:12px}aside small{font-size:9px}.cards{display:grid;grid-template-columns:repeat(4,1fr);min-height:250px;background:#0c0c0c}.cards article{text-align:center;padding:35px 20px;border-right:1px solid #333}.cards i{font-style:normal;color:#e9b548;font-size:42px}.cards h2{font:23px Georgia,serif;letter-spacing:1px}.cards p{font-size:14px;line-height:1.5}.cards strong{display:block;color:#e9b548;font-size:26px}.tradition{min-height:250px;background:linear-gradient(120deg,var(--ivory) 0 52%,#d9d6d0);color:#111;padding:35px 0 35px 100px}.tradition h2{font:40px Georgia,serif;letter-spacing:1px;margin:8px 0}.tradition>p:last-child{font:18px/1.3 Georgia,serif;margin:0}@media(max-width:900px){header{grid-template-columns:1fr auto}nav{display:none}.hero{grid-template-columns:1fr}.logo{padding:35px}.ring{max-width:340px}.dojo{min-height:260px}aside{display:grid;grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr 1fr}.tradition{padding:35px 25px}}
/* V2 : le fichier du logo est conservé octet pour octet, le CSS masque seulement le damier extérieur. */
.logo-wrap img{width:100%;max-width:495px;aspect-ratio:1;object-fit:contain;clip-path:circle(49% at 50% 50%);display:block}
.logo-wrap{display:flex;align-items:center;justify-content:center;padding:10px}
a{color:inherit;text-decoration:none}.selected{color:var(--gold);border-bottom:2px solid var(--gold)}.pill{display:inline-block;text-align:center;border:1px solid #e3b348;background:linear-gradient(90deg,#c78f28,#e5b84e);border-radius:30px;color:#090909;font-size:12px;font-weight:bold;padding:14px 18px}.intro{text-align:center;align-self:center;padding:20px 0;position:relative;z-index:2}.intro h1{font:56px/.95 Georgia,serif;letter-spacing:7px;margin:28px 0 10px}.japanese{color:#efbc50;font:31px Georgia,serif;letter-spacing:7px}.intro blockquote{font:italic 18px/1.35 Georgia,serif;margin:28px 10px 8px}.author{color:#e8b34b;font:17px Georgia,serif;margin-bottom:28px}.pill.big{font-size:14px;padding:18px 27px}.big span{font-size:23px;padding-left:15px}.virtues span{color:#efbd50;font-size:12px;font-weight:bold}.virtues small{color:white;font-weight:normal}.cards>a{text-align:center;padding:35px 20px;border-right:1px solid #333}.cards .symbol{color:#e9b548;font-size:42px}.cards em{display:block;color:#e9b548;font-size:26px;font-style:normal}@media(max-width:900px){.logo-wrap{padding:35px}.logo-wrap img{max-width:340px}.intro{padding:30px 18px}.virtues{display:grid;grid-template-columns:1fr 1fr}}

/* V4 — hero corrigé : décor propre + fondu CSS, aucun texte dans l'image */
.hero{
  position:relative;
  grid-template-columns:35% 53% 12%;
  isolation:isolate;
  background:#060606;
}
.hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  top:0;
  bottom:0;
  left:34%;
  right:12%;
  background-image:url("assets/dojo-artistique.png");
  background-size:cover;
  background-position:center center;
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 12% 0 27%;
  pointer-events:none;
  /* V6 : un seul fondu horizontal, pleine hauteur. Le noir reste dense
     derrière tout le texte puis se dissipe sans aucune boîte visible. */
  background:linear-gradient(90deg,
    #060606 0%,
    #060606 24%,
    rgba(6,6,6,.99) 36%,
    rgba(6,6,6,.94) 48%,
    rgba(6,6,6,.78) 60%,
    rgba(6,6,6,.50) 72%,
    rgba(6,6,6,.20) 86%,
    rgba(6,6,6,0) 100%);
}
.logo-wrap{grid-column:1;grid-row:1;position:relative;z-index:2;background:linear-gradient(90deg,#060606 0%,#060606 82%,rgba(6,6,6,0) 100%)}
.intro{grid-column:2;grid-row:1;position:relative;z-index:2;padding-left:1%;padding-right:27%;}
.dojo{display:none}
.virtues{grid-column:3;grid-row:1;position:relative;z-index:3;background:rgba(5,5,5,.96)}
@media(max-width:900px){
  .hero{display:block}
  .hero::before{left:0;right:0;opacity:.52}
  .hero::after{inset:0;background:linear-gradient(180deg,rgba(6,6,6,.7),rgba(6,6,6,.93))}
  .intro{padding:30px 18px}
  .logo-wrap{background:transparent}
}


/* V7 — pictogrammes personnalisés approuvés */
.cards>a{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.cards .symbol{
  width:96px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 5px;
  overflow:hidden;
}
.cards .symbol img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:screen;
}
.cards>a:nth-child(1) .symbol{width:72px}
.cards>a:nth-child(2) .symbol{width:76px}
.cards>a:nth-child(3) .symbol{width:94px}
.cards>a:nth-child(4) .symbol{width:96px}
.cards h2{margin:8px 0 9px}


/* V8 — Un héritage vivant */
.tradition.heritage{
  position:relative;
  min-height:360px;
  height:auto;
  display:grid;
  grid-template-columns:46% 54%;
  overflow:hidden;
  background:#f2eee6;
  color:#111;
}
.heritage-copy{
  position:relative;
  z-index:3;
  padding:58px 20px 52px 100px;
  align-self:center;
}
.heritage-copy .eyebrow{
  margin:0 0 12px;
  color:#b27c22;
  font-family:Montserrat,Arial,sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:6px;
}
.heritage-copy h2{
  margin:0 0 14px;
  font-family:"Cormorant Garamond",serif;
  font-size:43px;
  line-height:1;
  font-weight:600;
  letter-spacing:1px;
}
.heritage-text{
  max-width:650px;
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:20px;
  line-height:1.32;
}
.heritage-signature{
  margin:20px 0 0;
  color:#b27c22;
  font-family:"Cormorant Garamond",serif;
  font-size:23px;
  font-style:italic;
  font-weight:600;
}
.heritage-art{
  position:absolute;
  z-index:1;
  inset:0 0 0 30%;
  background-image:
    linear-gradient(90deg,#f2eee6 0%,rgba(242,238,230,.98) 13%,rgba(242,238,230,.72) 28%,rgba(242,238,230,.18) 48%,rgba(242,238,230,0) 65%),
    url("assets/heritage-samurai.png");
  background-repeat:no-repeat;
  background-position:center right;
  background-size:cover;
}
@media(max-width:760px){
  .tradition.heritage{display:block;min-height:520px}
  .heritage-copy{padding:42px 25px 230px}
  .heritage-copy h2{font-size:36px}
  .heritage-text{font-size:18px}
  .heritage-art{
    inset:42% 0 0 0;
    background-image:
      linear-gradient(180deg,#f2eee6 0%,rgba(242,238,230,.85) 18%,rgba(242,238,230,.05) 55%),
      url("assets/heritage-samurai.png");
    background-position:center right;
  }
}