/* =========================================================
   SEISHINKAN — feuille de style commune — V2
   (photos en balises <img> pour un affichage fiable partout
   + carrousel sur la page d'accueil)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,900;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --black:        #0b0b0c;
  --black-soft:   #141414;
  --black-card:   #1a1a1a;
  --ivory:        #f3ecd9;
  --ivory-dim:    #cabfa4;
  --gold:         #c9a15c;
  --gold-light:   #e3c78a;
  --gold-dark:    #8a6a2f;
  --line:         rgba(201,161,92,0.35);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;
  --maxw: 1120px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .6em;
  color: var(--ivory);
}
p{ margin: 0 0 1.1em; color: var(--ivory-dim); }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow{
  display:block;
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9em;
}
.gold{ color: var(--gold-light); font-style: italic; font-weight:500; }
.rule{
  width: 70px; height:1px; background: var(--gold);
  margin: 22px auto; opacity:.8;
}
.rule.left{ margin: 22px 0; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;
  padding: 14px 34px;
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  border-radius: 2px;
  transition: all .25s ease;
}
.btn-gold{
  background: var(--gold);
  color: var(--black);
  font-weight: 500;
}
.btn-gold:hover{ background: var(--gold-light); border-color: var(--gold-light); }
.btn-outline{
  background: transparent;
  color: var(--gold-light);
}
.btn-outline:hover{ background: rgba(201,161,92,.12); }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(11,11,12,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width: var(--maxw); margin:0 auto; padding: 8px 24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width: 62px; height:62px; border-radius:50%;
  display:block; object-fit:cover; flex-shrink:0;
}
.brand-name{
  font-family: var(--font-display); font-weight:700;
  letter-spacing:.22em; font-size: 1rem; color: var(--ivory);
}
.brand-sub{
  display:block; font-family: var(--font-body); font-weight:300;
  letter-spacing:.15em; font-size:.62rem; color: var(--gold); text-transform:uppercase;
}
.nav-links{ display:flex; gap: 34px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size: .78rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ivory-dim); padding: 6px 2px; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-links a:hover, .nav-links a.active{ color: var(--gold-light); border-color: var(--gold); }
.nav-toggle{ display:none; background:none; border:1px solid var(--gold); color: var(--gold); padding:8px 10px; font-size:1.1rem; border-radius:2px; }

@media (max-width: 860px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background: var(--black-soft); flex-direction:column; gap:0;
    max-height:0; overflow:hidden; border-bottom:1px solid var(--line);
    transition: max-height .3s ease;
  }
  .nav-links.open{ max-height: 400px; }
  .nav-links li{ border-top:1px solid var(--line); }
  .nav-links a{ display:block; padding: 16px 24px; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero (générique) ---------- */
.hero{
  position: relative;
  min-height: 78vh;
  display:flex; align-items:flex-end;
  isolation: isolate;
  overflow: hidden;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,11,12,.35) 0%, rgba(11,11,12,.55) 45%, var(--black) 92%);
  z-index:-1;
}
.hero-inner{ padding: 90px 24px 70px; max-width: var(--maxw); margin:0 auto; width:100%; position:relative; z-index:1; }
.hero h1{
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  max-width: 780px;
}
.hero-lead{
  font-family: var(--font-display); font-style: italic; font-weight:400;
  font-size: 1.15rem; color: var(--ivory-dim); max-width:600px; margin-bottom: 1.6em;
}
.hero-small{ min-height: 46vh; }

/* image de fond en <img>, plus fiable que background-image en aperçu intégré */
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Carrousel (page d'accueil) ---------- */
.hero-carousel .carousel-track{ position:absolute; inset:0; z-index:-2; }
.carousel-slide{
  position:absolute; inset:0; opacity:0;
  transition: opacity 1.4s ease;
}
.carousel-slide.active{ opacity:1; }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(.9); }
.carousel-dots{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; gap:10px; z-index:5;
}
.carousel-dots button{
  width:9px; height:9px; border-radius:50%; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--gold);
}
.carousel-dots button.active{ background: var(--gold); }
.hero-carousel .hero-inner{ text-align:center; padding-top: 130px; }
.hero-carousel .hero-lead{ margin-left:auto; margin-right:auto; }
.hero-carousel h1{ max-width: 900px; margin-left:auto; margin-right:auto; }

/* ---------- Sections ---------- */
section{ padding: 84px 0; }
.section-alt{ background: var(--black-soft); }
.center{ text-align:center; }
.lead{
  font-family: var(--font-display); font-style: italic; color: var(--ivory-dim);
  font-size: 1.15rem; max-width: 680px; margin: 0 auto 1.4em;
}

/* ---------- Grilles / cartes ---------- */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
@media (max-width: 860px){ .grid-2, .grid-3{ grid-template-columns: 1fr; } }

.card{
  background: var(--black-card);
  border: 1px solid var(--line);
  padding: 34px 30px;
  border-radius: 3px;
}
.discipline-card{
  display:flex; flex-direction:column;
  border: 1px solid var(--line);
  background: var(--black-card);
  overflow:hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.discipline-card:hover{ transform: translateY(-4px); border-color: var(--gold); }
.discipline-card .thumb{
  height: 240px; position:relative; overflow:hidden;
}
.discipline-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.discipline-card .thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, var(--black-card) 100%);
}
.discipline-card .body{ padding: 28px 30px 32px; flex:1; display:flex; flex-direction:column; }
.schedule-tag{
  display:inline-block; align-self:flex-start;
  font-size: .72rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--gold); border:1px solid var(--line); padding: 6px 12px; margin-bottom: 14px;
}

/* ---------- Instructeurs ---------- */
.instructor{ text-align:center; }
.photo-placeholder{
  width: 190px; height:190px; border-radius:50%;
  margin: 0 auto 18px; overflow:hidden;
  background: radial-gradient(circle at 50% 35%, #262421 0%, #171716 70%);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-dark); font-family: var(--font-display); font-size:.75rem;
  letter-spacing:.08em; text-align:center; padding: 10px;
}
.photo-placeholder img{ width:100%; height:100%; object-fit:cover; }
.photo-placeholder svg{ width:54px; height:54px; opacity:.5; }
.instructor h4{ margin-bottom:.15em; }
.instructor .rank{
  display:block; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--gold); margin-bottom:.8em;
}

/* ---------- Boîte horaires / infos ---------- */
.info-box{
  border: 1px solid var(--gold); padding: 26px 30px;
  display:flex; flex-wrap:wrap; gap: 24px 40px; align-items:center; justify-content:space-between;
}
.info-item .label{
  display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.info-item .value{ font-family: var(--font-display); font-size:1.15rem; color: var(--ivory); }

/* ---------- Référent technique ---------- */
.referent{
  display:flex; gap: 28px; align-items:flex-start;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 30px 0; margin: 10px 0 40px;
}
.referent .mark{
  font-family: var(--font-display); font-size:2.2rem; color: var(--gold); flex-shrink:0; line-height:1;
}
@media (max-width: 640px){ .referent{ flex-direction:column; } }

/* ---------- Actualités ---------- */
.news-item{
  border-bottom: 1px solid var(--line);
  padding: 34px 0;
  display:grid; grid-template-columns: 160px 1fr; gap: 28px;
}
.news-item:first-child{ padding-top:0; }
.news-date{
  font-family: var(--font-display); font-style:italic; color: var(--gold-light); font-size:1rem;
}
.news-pdf{
  display:inline-flex; align-items:center; gap:8px;
  margin-top: 10px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--gold); border-bottom: 1px solid var(--gold-dark);
}
@media (max-width: 640px){ .news-item{ grid-template-columns: 1fr; gap:8px; } }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items:start; }
.contact-line{ display:flex; gap: 14px; margin-bottom: 22px; }
.contact-line .k{ color: var(--gold); min-width: 110px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding-top:3px; }
.contact-line .v{ color: var(--ivory); }
.map-frame{ border:1px solid var(--line); filter: grayscale(1) invert(.92) contrast(.9); width:100%; height: 320px; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.site-footer{
  background: #000; border-top:1px solid var(--line);
  padding: 50px 0 26px;
}
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; margin-bottom: 36px; }
.footer-grid h5{
  font-family:var(--font-body); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.footer-grid p, .footer-grid a{ font-size:.88rem; color: var(--ivory-dim); }
.footer-grid a:hover{ color: var(--gold-light); }
.footer-bottom{
  border-top: 1px solid var(--line); padding-top: 22px;
  text-align:center; font-size:.75rem; letter-spacing:.06em; color: var(--ivory-dim); opacity:.7;
}

.reveal-note{
  font-size:.75rem; color: var(--ivory-dim); opacity:.6; font-style:italic;
}