/* Crolles Grésivaudan Escalade — maquette « La planche du CGE »
   Encre #111111 · ardoise #70979E · ardoise nuit #2F4A4F
   orange #FD4C00 · lien #C23000 · citron #D7DF3B · gris panneau #E7EAEA */

:root {
  --encre: #111111;
  --ardoise: #70979e;
  --nuit: #2f4a4f;
  --orange: #fd4c00;
  --lien: #c23000;
  --citron: #d7df3b;
  --gris: #e7eaea;
  --papier: #ffffff;
  --trait: 4px solid var(--encre);
  --gouttiere: clamp(10px, 1.4vw, 16px);
  --titre: "Titan One", "Arial Black", sans-serif;
  --texte: "Overpass", "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}

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

a { color: var(--lien); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:hover { color: var(--encre); }

:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--papier);
}

p, li, dd { max-width: 66ch; }

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: 0.005em;
}
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }

.chiffres { font-variant-numeric: tabular-nums; }
.insecable { white-space: nowrap; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page { width: min(1240px, 100% - 2 * clamp(14px, 3vw, 32px)); margin-inline: auto; }

/* --- Bandeau de démonstration --- */
.demo {
  background: var(--gris);
  border-bottom: 1px solid #c9cfd0;
  font-size: 0.875rem;
  padding: 0.45rem 0;
}
.demo p { margin-block: 0; max-width: none; }

/* --- En-tête --- */
.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding: 0.9rem 0;
}
.entete__nom {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--encre);
  text-decoration: none;
  font-family: var(--titre);
  font-size: 1.2rem;
  line-height: 1.1;
}
.entete__nom img { width: 62px; }
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: block;
  padding: 0.35rem 0.8rem 0.2rem;
  border: 3px solid transparent;
  color: var(--encre);
  font-weight: 700;
  text-decoration: none;
}
.nav a:hover { border-color: var(--encre); }
.nav a[aria-current="page"] { background: var(--citron); border-color: var(--encre); }

/* --- La case : contour noir épais, angles vifs, aucune ombre --- */
.case {
  border: var(--trait);
  background: var(--papier);
  position: relative;
  margin: 0;
}
.case--citron { background: var(--citron); }
.case--orange { background: var(--orange); }
.case > img { width: 100%; height: 100%; object-fit: cover; }

/* Le récitatif : encadré rectangulaire de BD, collé dans le coin de la case */
.recitatif {
  display: inline-block;
  background: var(--citron);
  border: 3px solid var(--encre);
  padding: 0.3rem 0.7rem 0.15rem;
  font-weight: 700;
  line-height: 1.3;
}
.case > .recitatif {
  position: absolute;
  top: -4px;
  left: -4px;
  max-width: calc(100% - 1.5rem);
}
.case > figcaption.recitatif { top: auto; bottom: -4px; }
.recitatif--orange { background: var(--orange); }
.recitatif--blanc { background: var(--papier); }

/* --- Ouverture de l'accueil --- */
.ouverture {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--gouttiere);
  margin-top: 0.4rem;
  margin-bottom: 7.5rem;
}
.ouverture__titre {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
  grid-template-areas: "texte logo";
  align-items: end;
  gap: 1.5rem;
  padding: clamp(1.2rem, 2.5vw, 2.2rem);
  padding-bottom: 0;
}
.ouverture__titre h1 {
  grid-area: logo;
  margin: 1rem 0 -6.5rem;       /* le grimpeur passe par-dessus le trait */
  position: relative;
  z-index: 2;
}
.ouverture__titre h1 img { width: 100%; max-width: 600px; margin-left: auto; }
.ouverture__texte { grid-area: texte; padding-bottom: clamp(1.2rem, 2.5vw, 2.2rem); }
.chapo { font-size: 1.25rem; line-height: 1.45; margin: 0 0 1.2rem; }
.liens-forts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.liens-forts a {
  display: inline-block;
  background: var(--papier);
  border: 3px solid var(--encre);
  border-radius: 2px;
  padding: 0.4rem 0.8rem 0.25rem;
  color: var(--encre);
  font-weight: 800;
  text-decoration: none;
}
.liens-forts a:hover { background: var(--encre); color: var(--papier); }
.ouverture__photo { display: grid; grid-template-rows: 1fr; min-height: 100%; }
.ouverture__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }

/* --- Sections --- */
.section { margin: clamp(3rem, 7vw, 5.5rem) 0; }
.section > header { margin-bottom: 1.6rem; }
.section > header p { margin: 0; font-size: 1.125rem; }

/* La soirée du 6 novembre */
.a-venir {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--gouttiere);
  align-items: stretch;
}
.a-venir__affiche img { aspect-ratio: 4 / 5; }
.a-venir__texte { padding: clamp(1.4rem, 3vw, 2.6rem); padding-top: 3.4rem; }
.a-venir__texte h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.fiche { margin: 1.4rem 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.2rem; }
.fiche dt { font-weight: 800; }
.fiche dd { margin: 0; }

/* --- Signature : la semaine au mur en strip --- */
.strip {
  display: grid;
  grid-template-columns: 1fr 1.55fr 1.15fr 1.3fr 1.3fr; /* largeur = charge du jour */
  gap: var(--gouttiere);
  list-style: none;
  margin: 0;
  padding: 0;
}
.strip > li { max-width: none; }
.jour { padding: 3.6rem 1rem 1.1rem; height: 100%; }
.jour > .recitatif { font-family: var(--titre); font-weight: 400; font-size: 1.35rem; padding: 0.35rem 0.8rem 0.2rem; }
.creneaux { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.creneaux li { padding-left: 0.75rem; border-left: 4px solid var(--ardoise); line-height: 1.35; }
.creneaux li.libre { border-left: 7px solid var(--orange); }
.creneaux .heure { display: block; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.creneaux .note { display: block; font-size: 0.9rem; color: #3b4447; }
.legende-strip { margin-top: 1.1rem; font-size: 0.95rem; }
.legende-strip span { display: inline-block; width: 1.4em; height: 0.7em; vertical-align: 0.05em; margin-right: 0.35em; }

/* Version complète (horaires.html) */
.strip--complet .creneaux { gap: 1.2rem; }
.strip--complet .creneaux strong { display: block; }

/* --- Nouvelles datées --- */
.nouvelles { list-style: none; margin: 0; padding: 0; }
.nouvelle {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 15rem;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 3px solid var(--encre);
  max-width: none;
}
.nouvelle:last-child { border-bottom: 3px solid var(--encre); }
.nouvelle time { font-weight: 800; font-variant-numeric: tabular-nums; }
.nouvelle h3 { margin-bottom: 0.4rem; }
.nouvelle p { margin: 0 0 0.5rem; }
.nouvelle figure { margin: 0; }
.nouvelle figure img { border: 3px solid var(--encre); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.passe { font-size: 0.9rem; color: #3b4447; }

/* --- Contact --- */
.contact {
  background: var(--nuit);
  color: var(--papier);
  border: var(--trait);
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 3rem;
}
.contact a { color: var(--papier); }
.contact a:hover { color: var(--citron); }
.contact :focus-visible { outline-color: var(--papier); box-shadow: 0 0 0 6px var(--nuit); }
.contact h2 { color: var(--papier); }
.contact p { margin: 0 0 0.9rem; }
.contact .mail { font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 800; word-break: break-word; }

/* --- Pages intérieures --- */
.tete {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--gouttiere);
  margin: 0.4rem 0 0;
}
.tete__titre { padding: clamp(1.3rem, 3vw, 2.4rem); display: flex; flex-direction: column; justify-content: flex-end; }
.tete__titre h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin-bottom: 0.4rem; }
.tete__titre p { margin: 0; font-size: 1.15rem; }
.tete__photo img { aspect-ratio: 16 / 9; }

.deux-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gouttiere); }
.encadre { padding: 3.4rem clamp(1rem, 2.5vw, 1.8rem) 1.2rem; }
.encadre ul { padding-left: 1.2rem; margin: 0; }
.encadre li + li { margin-top: 0.45rem; }

.bon-a-savoir { background: var(--gris); border-left: 7px solid var(--orange); padding: 1rem 1.2rem; margin: 1.5rem 0; }
.bon-a-savoir p { margin: 0; }

/* Planche de photos du mur : cases de tailles différentes */
.planche {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 150px;
  gap: var(--gouttiere);
}
.planche figure { margin: 0; }
.planche .grand { grid-column: span 3; grid-row: span 2; }
.planche .haut { grid-column: span 1; grid-row: span 2; }
.planche .large { grid-column: span 2; grid-row: span 2; }

.pratiques { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem 3rem; margin: 0; }
.pratiques div { border-top: 3px solid var(--encre); padding-top: 0.9rem; }
.pratiques dt { font-family: var(--titre); font-size: 1.35rem; line-height: 1.15; margin-bottom: 0.4rem; }
.pratiques dd { margin: 0; }

.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.etapes li {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 1rem 1.5rem;
  padding: 1rem 0;
  border-top: 2px solid var(--encre);
  max-width: 62rem;
}
.etapes .quand { font-weight: 800; }
.etapes p { margin: 0; }
.etapes .fait { color: #3b4447; }

table { border-collapse: collapse; width: 100%; max-width: 40rem; font-variant-numeric: tabular-nums; }
caption { text-align: left; font-weight: 800; padding-bottom: 0.5rem; }
th, td { text-align: left; padding: 0.5rem 0.8rem 0.4rem 0; border-bottom: 2px solid var(--encre); }
thead th { border-bottom-width: 4px; }

.photos-sortie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); margin-top: 1.4rem; }
.photos-sortie img { aspect-ratio: 9 / 16; object-fit: cover; }
.photos-compet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); margin-top: 1.4rem; }
.photos-compet img { aspect-ratio: 2 / 3; object-fit: cover; }

.recit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: start; }

figcaption { font-size: 0.9rem; }
.legende { margin-top: 0.4rem; font-size: 0.9rem; color: #3b4447; }

.bandeaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); align-items: start; }
.bandeaux img { aspect-ratio: 3 / 2; object-fit: cover; }

/* --- Pied de page --- */
.pied {
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: var(--trait);
  padding: 1.6rem 0 2.4rem;
  font-size: 0.95rem;
}
.pied ul { list-style: none; padding: 0; margin: 0 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.pied p { margin: 0.3rem 0; }

/* --- Responsive --- */
@media (max-width: 1060px) {
  .strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .strip > li { grid-column: span 2; }
  .strip > li:nth-child(4), .strip > li:nth-child(5) { grid-column: span 3; }
  .nouvelle { grid-template-columns: 8rem minmax(0, 1fr) 11rem; }
}

@media (max-width: 860px) {
  .ouverture { grid-template-columns: 1fr; margin-bottom: 3rem; }
  .ouverture__titre { grid-template-columns: 1fr; grid-template-areas: "logo" "texte"; padding-bottom: 0; }
  .ouverture__titre h1 { margin: 0; }
  .ouverture__titre h1 img { max-width: 420px; margin-inline: auto; }
  .ouverture__photo img { aspect-ratio: 3 / 2; }
  .a-venir, .tete, .deux-col, .contact, .recit, .bandeaux { grid-template-columns: 1fr; }
  .a-venir__affiche img { max-height: 70vh; object-fit: contain; background: var(--encre); }
  .strip > li, .strip > li:nth-child(4), .strip > li:nth-child(5) { grid-column: span 3; }
  .nouvelle { grid-template-columns: 1fr; gap: 0.6rem; }
  .nouvelle figure { max-width: 22rem; }
  .pratiques { grid-template-columns: 1fr; }
  .planche { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .planche .grand { grid-column: span 2; grid-row: span 2; }
  .planche .haut, .planche .large { grid-column: span 1; grid-row: span 2; }
  .etapes li { grid-template-columns: 1fr; gap: 0.2rem; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .strip > li, .strip > li:nth-child(4), .strip > li:nth-child(5) { grid-column: 1 / -1; }
  .photos-sortie, .photos-compet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .fiche { grid-template-columns: 1fr; }
  .fiche dd { margin-bottom: 0.5rem; }
  .entete__nom span { font-size: 1.05rem; }
}

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