/* ================================================
   Les Chevaux du Belair, centre equestre pour tous
   Feuille unique, simple et legere
   ================================================ */

:root {
  --creme: #faf6ec;
  --sable: #f0e8d5;
  --vert: #3f6d3a;
  --vert-fonce: #2b4a27;
  --brun: #7a5b3a;
  --texte: #33402f;
  --blanc: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Trebuchet MS", Verdana, "Segoe UI", sans-serif;
  background: var(--creme);
  color: var(--texte);
  line-height: 1.75;
  font-size: 17px;
}

img { max-width: 100%; display: block; }
a { color: var(--vert); }
a:hover { color: var(--brun); }

.cadre { max-width: 920px; margin: 0 auto; padding: 0 22px; }

/* ---------- En-tête ---------- */
header.club {
  background: var(--creme);
  text-align: center;
  padding: 30px 0 0;
}
header.club .fer { width: 46px; height: 46px; margin: 0 auto 8px; }
header.club .nom {
  font-size: 32px;
  font-weight: 700;
  color: var(--vert-fonce);
  letter-spacing: .01em;
}
header.club .nom a { text-decoration: none; color: inherit; }
header.club .devise {
  color: var(--brun);
  font-size: 15.5px;
  font-style: italic;
  margin-bottom: 16px;
}
nav.simple {
  border-top: 2px solid var(--vert);
  border-bottom: 2px solid var(--vert);
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
}
nav.simple a {
  text-decoration: none;
  color: var(--vert-fonce);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 16px;
  border-radius: 4px;
}
nav.simple a:hover, nav.simple a.ici { background: var(--vert); color: var(--creme); }

/* ---------- Héro ---------- */
.grande-photo { position: relative; }
.grande-photo img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.grande-photo .voile {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(43, 74, 39, .82));
  color: var(--creme);
  text-align: center;
  padding: 70px 20px 26px;
}
.grande-photo h1 { font-size: 30px; margin-bottom: 4px; }
.grande-photo p { font-size: 16px; color: #e8e2cf; }

/* ---------- Sections ---------- */
section.partie { padding: 46px 0 8px; }
.titre-partie {
  text-align: center;
  margin-bottom: 28px;
}
.titre-partie h2 {
  display: inline-block;
  font-size: 26px;
  color: var(--vert-fonce);
  border-bottom: 3px solid var(--brun);
  padding-bottom: 6px;
}

.activites {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.activite { text-align: center; }
.activite img {
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  margin-bottom: 12px;
}
.activite h3 { font-size: 19px; color: var(--vert-fonce); margin-bottom: 6px; }
.activite p { font-size: 15px; color: #55624f; }

/* ---------- Bloc article ---------- */
.annonce {
  background: var(--sable);
  border-radius: 10px;
  padding: 30px 34px;
  margin: 40px 0 56px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 26px;
  align-items: center;
}
.annonce img { border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; }
.annonce .sur { color: var(--brun); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.annonce h3 { font-size: 22px; color: var(--vert-fonce); margin: 4px 0 8px; line-height: 1.3; }
.annonce h3 a { text-decoration: none; color: inherit; }
.annonce h3 a:hover { color: var(--vert); }
.annonce p { font-size: 15.5px; color: #55624f; margin-bottom: 8px; }
.annonce .lire { font-weight: 700; text-decoration: none; }

/* ---------- Page article ---------- */
.fil { font-size: 13.5px; color: #77836f; padding: 16px 0 0; }
.fil a { text-decoration: none; }

article.note { max-width: 760px; margin: 0 auto; padding: 20px 22px 10px; }
article.note h1 {
  font-size: 30px;
  color: var(--vert-fonce);
  line-height: 1.2;
  margin-bottom: 14px;
}
article.note figure { margin: 0 0 22px; }
article.note figure img {
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}
article.note figcaption { font-size: 13px; color: #77836f; margin-top: 6px; font-style: italic; }
article.note h2 {
  font-size: 21px;
  color: var(--vert-fonce);
  margin: 26px 0 8px;
}
article.note p { margin-bottom: 15px; }

.retour {
  max-width: 760px;
  margin: 20px auto 60px;
  padding: 0 22px;
}
.retour a {
  display: inline-block;
  background: var(--vert);
  color: var(--creme);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 22px;
  border-radius: 6px;
}
.retour a:hover { background: var(--vert-fonce); color: var(--creme); }

/* ---------- Pied de page ---------- */
footer.club {
  background: var(--vert-fonce);
  color: #d9e2d2;
  font-size: 14.5px;
  margin-top: 30px;
}
footer.club .colonnes {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 34px;
  padding: 38px 0 24px;
}
footer.club h5 { color: var(--creme); font-size: 16px; margin-bottom: 8px; }
footer.club ul { list-style: none; }
footer.club li { margin-bottom: 6px; }
footer.club a { color: #d9e2d2; text-decoration: none; }
footer.club a:hover { color: #f0c9a0; }
footer.club .fin {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding: 14px 0 22px;
  font-size: 13px;
  color: #a9bba0;
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .activites { grid-template-columns: 1fr; }
  .annonce { grid-template-columns: 1fr; }
  footer.club .colonnes { grid-template-columns: 1fr; }
  .grande-photo img { aspect-ratio: 16 / 10; }
  .grande-photo h1 { font-size: 24px; }
}