/* Karaté Goju-ryu Grenoble : « L'écusson brodé » */
:root{
  --bordeaux:#5E1A26;   /* drap de l'écusson */
  --nuit:#2E0B12;       /* bordeaux profond, ombre de la broderie */
  --fil:#E9E2D3;        /* fil de broderie, uniquement sur fond sombre */
  --gi:#FCFCFA;         /* blanc du karategi */
  --encre:#1B1517;
  --rouge:#C23A44;      /* rouge de l'affiche 2026 : actions seulement */
  --gris:#ECEAE7;
  --titre:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --texte:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gi);color:var(--encre);font:400 1.0625rem/1.65 var(--texte)}
img{max-width:100%;height:auto;display:block}
a{color:var(--bordeaux);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--rouge)}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
h1,h2{font-family:var(--titre);font-weight:800;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.demo{background:var(--encre);color:#fff;font-size:.85rem;padding:.45rem 1rem;text-align:center}
.demo strong{color:#F3C9CD}

/* En-tête */
.haut{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;
  padding:.9rem clamp(1rem,4vw,3.5rem);border-bottom:1px solid var(--gris)}
.marque{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--encre);font-family:var(--titre);font-weight:600;line-height:1.1;font-size:1.05rem}
.marque img{width:52px}
.marque b{font-weight:800;color:var(--bordeaux);font-size:1.3rem}
.haut nav{display:flex;flex-wrap:wrap;gap:.25rem 1.6rem;align-items:center;font-weight:500}
.haut nav a{color:var(--encre);text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.haut nav a[aria-current]{border-bottom-color:var(--bordeaux)}
.haut nav a:hover{border-bottom-color:var(--rouge);color:var(--encre)}
.haut nav .tel{background:var(--bordeaux);color:var(--fil);padding:.4rem .8rem;border-radius:2px;border:0}
.haut nav .tel:hover{background:var(--rouge);color:#fff}

/* Ouverture : texte + l'écusson comme objet */
.ouverture{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:min(78vh,720px)}
.ouv-texte{padding:clamp(2.5rem,7vw,6rem) clamp(1.25rem,5vw,4.5rem);align-self:center}
.ouverture h1{font-size:clamp(2.4rem,5.6vw,4.6rem);color:var(--nuit)}
.nw{white-space:nowrap}
.ouverture h1 .nl{display:block;color:var(--bordeaux)}
.chapo{font-size:1.2rem;max-width:34em;margin:0 0 1.8rem}
.essai{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin:0 0 .6rem;font-weight:700}
.bouton{display:inline-block;background:var(--rouge);color:#fff;text-decoration:none;padding:.8rem 1.2rem;border-radius:2px;font-weight:700}
.bouton:hover{background:var(--nuit);color:#fff}
.petit{font-size:.95rem;color:#5b5153;margin:0}
.ouv-objet{margin:0;background:var(--nuit);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:3rem clamp(4.5rem,9vw,8rem) 2.5rem clamp(1.5rem,4vw,3rem);overflow:hidden}
.ouv-objet img{width:min(100%,430px);filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
.ouv-objet figcaption{color:var(--fil);font-size:.9rem;margin-top:1.4rem;opacity:.85}
.kanji{position:absolute;right:clamp(.6rem,2.5vw,2rem);top:50%;transform:translateY(-50%);margin:0;writing-mode:vertical-rl;
  font-family:var(--titre);font-weight:800;font-size:clamp(3.5rem,7.5vw,6.5rem);line-height:1;color:var(--fil);letter-spacing:.08em}

/* Cours */
.cours{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:1.5rem clamp(2rem,6vw,5rem);
  padding:clamp(3rem,7vw,5.5rem) clamp(1.25rem,5vw,4.5rem);max-width:1320px;margin:0 auto}
.cours-tete p{max-width:28em;margin:0}
.planning{border-collapse:collapse;width:100%;align-self:start}
.planning th,.planning td{text-align:left;padding:1.1rem .6rem 1.1rem 0;border-bottom:2px solid var(--encre);vertical-align:baseline}
.planning tr:first-child th,.planning tr:first-child td{border-top:6px solid var(--bordeaux)}
.planning th{font-family:var(--titre);font-size:1.6rem;font-weight:800;color:var(--bordeaux);width:28%}
.planning .h{font-family:var(--titre);font-weight:800;font-size:clamp(1.8rem,4vw,2.9rem);font-variant-numeric:tabular-nums;line-height:1}
.planning .tiret{margin:0 .6rem;font-size:1rem;color:#6b6063}
.planning td:last-child{text-align:right;font-weight:500;white-space:nowrap}
.observer{grid-column:2;margin:0;color:#4a4043;max-width:40em}

/* Déroulement */
.seance{background:var(--gris);padding:clamp(3rem,6vw,4.5rem) clamp(1.25rem,5vw,4.5rem)}
.seance h2{max-width:1320px;margin:0 auto 1.8rem}
.etapes{list-style:none;counter-reset:e;margin:0 auto;padding:0;max-width:1320px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.etapes li{counter-increment:e;padding-top:.4rem}
.etapes li::before{content:counter(e);display:block;font-family:var(--titre);font-weight:800;font-size:3.6rem;line-height:1;color:var(--bordeaux);margin-bottom:.6rem}
.etapes b{font-weight:700}

/* Initiation : vraies photos de l'affiche 2026 */
.initiation{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:2rem clamp(2rem,6vw,5rem);align-items:center;
  padding:clamp(3rem,7vw,5.5rem) clamp(1.25rem,5vw,4.5rem);max-width:1320px;margin:0 auto}
.init-texte p{max-width:30em}
.ronds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.ronds li{text-align:center;font-weight:700}
.ronds img{width:100%;max-width:220px;margin:0 auto .8rem;aspect-ratio:1;object-fit:cover;border-radius:50%;border:6px solid var(--bordeaux)}
.ronds li:nth-child(2){margin-top:2.5rem}

/* Lieu */
.lieu{background:var(--bordeaux);color:var(--fil);padding:clamp(3rem,6vw,4.5rem) clamp(1.25rem,5vw,4.5rem)}
.lieu h2{color:#fff;max-width:1320px;margin:0 auto 1.4rem}
.lieu-grille{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:2rem;align-items:start}
.adresse{font-family:var(--titre);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.35;margin:0;color:#fff}
.acces{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:0}
.acces dt{font-weight:700;color:#fff}
.acces dd{margin:0}
.lien-carte{color:#fff;font-weight:700}
.lien-carte:hover{color:#F3C9CD}

/* Pages intérieures */
.interieur{max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem) 4rem}
.titre-page{padding:clamp(2.5rem,6vw,4.5rem) 0 2rem;border-bottom:6px solid var(--bordeaux);margin-bottom:2.5rem;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1rem 3rem;align-items:end}
.titre-page h1{font-size:clamp(2.6rem,6vw,4.8rem);color:var(--nuit);margin:0}
.titre-page .chapo{margin:0;font-size:1.12rem}
.texte-long p{max-width:44em;font-size:1.1rem}

/* Lignée : vraie séquence, donc numérotée par l'ordre */
.lignee{margin:3rem 0}
.lignee ol{list-style:none;margin:0;padding:0;border-left:6px solid var(--bordeaux)}
.lignee li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,6fr);gap:.3rem 2rem;padding:1.3rem 0 1.3rem 1.6rem;border-bottom:1px solid #d9d4d0;align-items:baseline}
.lignee li p{margin:0}
.lignee .nom{font-family:var(--titre);font-weight:800;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.15;color:var(--nuit)}
.lignee .dates{font-variant-numeric:tabular-nums;font-weight:700;color:var(--bordeaux)}
.lignee li.ici{background:var(--nuit);color:var(--fil);border-bottom:0}
.lignee li.ici .nom{color:#fff}
.lignee li.ici .dates{color:#F3C9CD}
.pour-aller ul{padding-left:1.2rem}
.contact{margin-top:3rem;padding-top:2rem;border-top:2px solid var(--encre)}
.contact-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.contact-grille p{margin:0}
.etiq{display:block;font-weight:700;margin-bottom:.3rem}
.gros{font-family:var(--titre);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.8rem);word-break:break-word}

/* Calendrier des stages : élément signature */
.stages{margin-bottom:3rem}
.table-defile{overflow-x:auto}
.calendrier{width:100%;border-collapse:collapse}
.calendrier th{text-align:left;font-weight:700;font-size:.95rem;padding:.6rem .8rem .6rem 0;border-bottom:2px solid var(--encre)}
.calendrier td{padding:.85rem .8rem .85rem 0;border-bottom:1px solid #d9d4d0;vertical-align:baseline}
.calendrier .date{white-space:nowrap;font-weight:500;width:13rem}
.calendrier .j{font-family:var(--titre);font-weight:800;font-size:1.55rem;color:var(--nuit);display:inline-block;min-width:5.2rem}
.calendrier .hor{white-space:nowrap;font-variant-numeric:tabular-nums}
.calendrier tr.fort td{background:#F6E9EA}
.calendrier tr.fort td:first-child{box-shadow:inset 6px 0 0 var(--rouge);padding-left:1rem}
.legende{font-size:.95rem;display:flex;align-items:center;gap:.6rem}
.pastille{display:inline-block;width:18px;height:18px;background:#F6E9EA;box-shadow:inset 6px 0 0 var(--rouge)}
.ete{background:var(--nuit);color:var(--fil);padding:2rem clamp(1.25rem,4vw,2.5rem);margin:0 0 3rem}
.ete h2{color:#fff}
.ete-dates{font-family:var(--titre);font-weight:800;font-size:clamp(1.4rem,3vw,2.1rem);color:#fff;margin:0 0 1rem;line-height:1.2}
.ete dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.4rem;margin:0}
.ete dt{font-weight:700;color:#fff}
.ete dd{margin:0}
.stages.deux{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.calendrier.court .date{width:auto}
.source{font-size:.95rem;color:#4a4043;max-width:46em}

/* Pied */
.bas{background:var(--encre);color:#d8d2d3;padding:2.5rem clamp(1.25rem,5vw,4.5rem) 1.5rem}
.bas-in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,4fr);gap:1.5rem 2rem}
.bas p{margin:0 0 .6rem}
.bas a{color:#fff}
.bas-nom{font-family:var(--titre);font-weight:800;font-size:1.3rem;color:#fff}
.bas-note{max-width:1320px;margin:1.5rem auto 0 !important;font-size:.82rem;color:#a99fa1}

/* Tablette et mobile */
@media (max-width:900px){
  .ouverture{grid-template-columns:1fr;min-height:0}
  .ouv-objet{padding:2.5rem 5.5rem 2rem 1.5rem}
  .ouv-objet img{width:min(72vw,340px)}
  .cours,.initiation{grid-template-columns:1fr}
  .observer{grid-column:1}
  .etapes{grid-template-columns:1fr 1fr}
  .lieu-grille{grid-template-columns:1fr}
  .titre-page{grid-template-columns:1fr}
  .lignee li{grid-template-columns:1fr}
  .contact-grille{grid-template-columns:1fr}
  .stages.deux{grid-template-columns:1fr}
  .bas-in{grid-template-columns:1fr}
}
@media (max-width:560px){
  .haut nav{gap:.2rem 1rem;font-size:.95rem}
  .etapes{grid-template-columns:1fr;gap:1.2rem}
  .etapes li{position:relative;padding:0 0 0 3rem;min-height:2.6rem}
  .etapes li::before{position:absolute;left:0;top:-.15rem;font-size:2.4rem;margin:0}
  .haut nav .tel{display:none}
  .ronds{gap:.8rem}
  .ronds li{font-size:.85rem}
  .ronds img{border-width:4px}
  .ronds li:nth-child(2){margin-top:1.2rem}
  .planning th{font-size:1.25rem;width:auto}
  .planning td:last-child{display:none}
  .calendrier thead{display:none}
  .calendrier tr{display:grid;grid-template-columns:auto 1fr;gap:0 1rem;padding:.8rem 0;border-bottom:1px solid #d9d4d0}
  .calendrier td{border:0;padding:0}
  .calendrier .date{grid-row:span 3;width:auto}
  .calendrier .j{display:block;min-width:0}
  .calendrier tr.fort td:first-child{padding-left:.7rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}