/* Taiji Wushu Club Grenoble — maquette « Tenue blanche, tenue noire » */

:root {
  --noir: #1D1C1A;      /* tenue noire */
  --blanc: #F7F7F4;     /* soie blanche */
  --or: #E8A33D;        /* or de l'affiche 2021, sur noir uniquement */
  --rouge: #990000;     /* liens de l'ancien site */
  --bambou: #34472F;    /* légendes, texte secondaire */
  --salle: #E4E5E0;     /* gris salle */
  --titre: "Alegreya", Georgia, serif;
  --texte: "Fira Sans", Verdana, sans-serif;
  --large: 72rem;
}

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

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
}

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

a { color: var(--rouge); text-underline-offset: .18em; }
a[href^="tel:"] { white-space: nowrap; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--noir);
}

h1, h2, h3 {
  font-family: var(--titre);
  line-height: 1.12;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.9rem); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }

.mesure { max-width: 38em; }

.lien-evitement {
  position: absolute; left: -999px; top: 0;
  background: var(--noir); color: var(--blanc); padding: .5rem 1rem;
}
.lien-evitement:focus { left: 0; z-index: 10; }

/* Bandeau maquette */
.bandeau-maquette {
  background: var(--salle);
  color: var(--noir);
  font-size: .875rem;
  padding: .4rem 1rem;
  border-bottom: 1px solid #c9cbc3;
}
.bandeau-maquette p { margin: 0 auto; max-width: var(--large); }

/* En-tête */
.entete {
  max-width: var(--large);
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
}
.marque {
  display: flex; align-items: center; gap: .9rem;
  color: var(--noir); text-decoration: none;
}
/* Logo réel (137 × 144 px, recadré dans l'affiche 2021) : toujours réduit */
.marque .logo { width: 68px; height: auto; flex: none; }
/* Titre calligraphié réel du bandeau d'origine (497 × 31 px) */
.marque .marque-titre { width: 300px; max-width: 100%; height: auto; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .25rem 1.5rem;
}
.nav a {
  display: inline-block;
  padding: .35rem 0;
  color: var(--noir);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 3px solid transparent;
}
.nav a:hover { border-bottom-color: var(--salle); }
.nav a[aria-current="page"] { border-bottom-color: var(--rouge); }

/* Ouverture de l'accueil : soie blanche | tenue noire, photo sur la couture */
.tenues-ouverture {
  background: linear-gradient(90deg, var(--blanc) 50%, var(--noir) 50%);
  padding-top: 3rem;
  border-top: 1px solid #d6d7d0;
}
.titre-calli {
  position: relative;
  width: min(497px, calc(100% - 2.5rem));
  margin: 0 auto 2.75rem;
  line-height: 0;
}
.titre-calli img { width: 100%; height: auto; }
.titre-calli .calli-noir { clip-path: inset(0 50% 0 0); }
.titre-calli .calli-blanc {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 50%);
}
.tenues {
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
  display: grid;
  grid-template-columns: 1fr minmax(0, 34rem) 1fr;
  gap: 2.25rem;
  align-items: end;
}
.tenues .couture { margin: 0; }
.cote p:last-child { margin-bottom: 0; }
.cote--noir { color: var(--blanc); }
.cote--noir a:not(.bouton) { color: var(--blanc); }
.accroche {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(2rem, 3.1vw, 2.8rem);
  line-height: 1.06;
  margin-bottom: .6em;
}
.cote .qui { font-family: var(--titre); font-size: 1.3rem; font-weight: 700; }
.cote--noir .reprise { border-left-color: var(--or); }
.bouton.bouton--soie { background: var(--blanc); color: var(--rouge); }
.bouton.bouton--soie:hover { background: #fff; }

/* Citation pleine largeur */
.citation.citation--large {
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.15;
  max-width: 24em;
  margin-bottom: 3rem;
}
.duo--pratique { grid-template-columns: 6fr 5fr; }

/* Conteneurs */
.bloc { max-width: var(--large); margin: 0 auto; padding: 3.5rem 1.25rem; }
.bloc--serre { padding-top: 1.5rem; }

/* Ouverture */
.ouverture {
  max-width: var(--large);
  margin: 0 auto;
  padding: .5rem 1.25rem 3rem;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 2.5rem;
  align-items: center;
}
.ouverture figure { margin: 0; }
.ouverture .chapo { font-size: 1.15rem; }
figcaption {
  font-size: .875rem;
  color: var(--bambou);
  margin-top: .5rem;
}

.reprise {
  border-left: 4px solid var(--rouge);
  padding: .2rem 0 .2rem 1rem;
  margin: 1.5rem 0;
}
.reprise strong { font-weight: 600; }

.bouton {
  display: inline-block;
  background: var(--rouge);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: .75rem 1.3rem;
  border-radius: 2px;
}
.bouton:hover { background: #7a0000; }
.bouton--clair { background: transparent; color: var(--rouge); box-shadow: inset 0 0 0 2px var(--rouge); }
.bouton--clair:hover { background: #fff; }

/* Signature : la semaine en deux temps */
.semaine-titre {
  max-width: var(--large);
  margin: 0 auto;
  padding: 3.5rem 1.25rem 1rem;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .25rem 2rem;
}
.semaine-titre h2 { margin: 0; }
.semaine-titre p { margin: 0; color: var(--bambou); }

.semaine {
  max-width: var(--large);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.temps { padding: 2rem clamp(1.25rem, 3vw, 2.5rem) 2.25rem; }
.temps--soir { background: var(--noir); color: var(--blanc); }
.temps--matin {
  background: var(--blanc);
  color: var(--noir);
  border: 2px solid var(--noir);
}
.temps h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.temps h3 span { display: block; font-family: var(--texte); font-size: .95rem; font-weight: 400; margin-top: .3rem; }
.temps--soir h3 span { color: #CFCDC6; }
.temps--matin h3 span { color: var(--bambou); }

.creneaux { list-style: none; margin: 0; padding: 0; }
.creneaux li {
  display: grid;
  grid-template-columns: 7.4rem 1fr;
  gap: 1rem;
  padding: .9rem 0;
  border-top: 1px solid rgba(247, 247, 244, .22);
}
.temps--matin .creneaux li { border-top-color: #c3c5bc; }
.creneaux time.debut {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.temps--soir time.debut { color: var(--or); }
.creneaux .cours { font-weight: 600; font-size: 1.05rem; display: block; }
.creneaux .detail { display: block; font-size: .9rem; }
.temps--soir .detail { color: #CFCDC6; }
.temps--matin .detail { color: var(--bambou); }
.creneaux .detail a { color: inherit; }
.temps--soir a { color: var(--blanc); }

.semaine-pied {
  max-width: var(--large);
  margin: 0 auto;
  padding: 1rem 1.25rem 0;
  font-size: .95rem;
}

/* Version détaillée (page cours) */
.semaine--detail .creneaux li { grid-template-columns: 7.4rem 1fr; }
.semaine--detail .description { display: block; margin-top: .35rem; font-size: .95rem; }
.temps--soir .description { color: #E6E4DE; }

/* Deux colonnes de texte */
.duo {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 2.5rem 3.5rem;
  align-items: start;
}
.duo--inverse { grid-template-columns: 7fr 5fr; }

.citation {
  margin: 0;
  font-family: var(--titre);
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
}
.citation p { margin: 0 0 .6em; }
.citation footer { font-family: var(--texte); font-size: .9rem; color: var(--bambou); }

.disciplines { margin: 0; }
.disciplines dt {
  font-family: var(--titre);
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 1.1rem;
}
.disciplines dt:first-child { margin-top: 0; }
.disciplines dd { margin: .15rem 0 0; }

.fond-salle { background: var(--salle); }

/* Portrait à taille réelle */
.portrait { margin: 0; }
.portrait img { width: auto; }

/* Liste des assistants (vignettes 85 px réelles) */
.assistants {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1rem 1.5rem;
}
.assistants li { display: flex; align-items: center; gap: .9rem; }
.assistants img { width: 85px; height: 85px; }

/* Lignée */
.lignee {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: none;
}
.lignee li {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr;
  gap: .25rem 1.5rem;
  padding: .85rem 0;
  border-top: 1px solid #c3c5bc;
}
.lignee li:last-child { border-bottom: 1px solid #c3c5bc; }
.lignee .gen { color: var(--bambou); font-size: .9rem; padding-top: .3rem; }
.lignee .nom { font-family: var(--titre); font-weight: 700; font-size: 1.35rem; display: block; }
.portrait--suite { margin-top: 1.5rem; }

/* Planche de photos */
.planche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 0;
}
.planche figure { margin: 0; }

.annees { list-style: none; margin: 0; padding: 0; }
.annees li { padding: .9rem 0; border-top: 1px solid #c3c5bc; }
.annees h3 { margin-bottom: .2rem; }

/* Contact */
.contact dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.5rem; }
.contact dt { font-weight: 600; }
.contact dd { margin: 0; }

/* Pied de page sur la texture rouge d'origine */
.pied {
  background: #5E0D0E url("img/texture-rouge.jpg");
  color: #fff;
}
.pied a { color: #fff; }
.pied-interne {
  max-width: var(--large);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem 4rem;
}
.pied-interne > div { flex: 1 1 16rem; }
.pied p { margin: 0 0 .5em; }
.pied .pied-titre { width: 280px; max-width: 100%; height: auto; margin-bottom: 1rem; }
.pied :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--noir); }

/* Tablette et mobile : la couture reste verticale derrière le titre et la
   photo, puis les deux côtés s'empilent en aplats pleine largeur. */
@media (max-width: 68rem) {
  .tenues {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  .tenues .couture { order: -1; padding: 0 1.25rem 2.25rem; max-width: 44rem; margin: 0 auto; }
  .cote { padding: 2.25rem 1.25rem 2.5rem; }
  .cote > * { max-width: 40rem; margin-left: auto; margin-right: auto; }
  .cote--blanc { background: var(--blanc); }
  .cote--noir { background: var(--noir); }
  .cote--noir .bouton { margin-left: 0; }
}

/* Mobile */
@media (max-width: 52rem) {
  .ouverture, .duo, .duo--inverse, .duo--pratique { grid-template-columns: 1fr; gap: 1.75rem; }
  .semaine { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) {
  body { font-size: 1rem; }
  .marque .logo { width: 52px; }
  .marque .marque-titre { width: 220px; }
  .tenues-ouverture { padding-top: 2rem; }
  .titre-calli { margin-bottom: 1.75rem; }
  .creneaux li, .semaine--detail .creneaux li { grid-template-columns: 4.9rem 1fr; gap: .75rem; }
  .lignee li { grid-template-columns: 1fr; }
  .lignee .gen { padding-top: 0; }
  .contact dl { grid-template-columns: 1fr; gap: 0; }
  .contact dd { margin-bottom: .6rem; }
}