/* Sur la trace du Lion – feuille de style
   Couleurs : modifier les variables ci-dessous pour changer toute la charte. */
/* Polices hébergées sur le site (et non chez Google) : aucune adresse IP de visiteur n'est transmise à Google.
   Barlow Condensed et Inter, licence libre SIL Open Font License. Fichiers dans le dossier fonts/. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-condensed-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/barlow-condensed-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/barlow-condensed-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ochre: #d9901f;        /* couleur principale (crinière du lion) */
  --ochre-dark: #b06f0c;
  --forest: #1f3d2b;       /* vert sombre (chemins, Anjou) */
  --forest-2: #2c5a3f;
  --sand: #f7f1e6;         /* fond des sections alternées */
  --ink: #1d1d1b;
  --muted: #5d5b55;
  --white: #ffffff;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(29, 29, 27, .10);
  --font-title: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-text: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}
img { max-width: 100%; }
a { color: var(--ochre-dark); }
h1, h2, h3 { font-family: var(--font-title); line-height: 1.05; margin: 0 0 .4em; }
h2 { font-size: clamp(2rem, 5vw, 2.8rem); text-transform: uppercase; letter-spacing: .02em; color: var(--forest); }
h3 { font-size: 1.4rem; color: var(--forest); }

.container { width: min(1100px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(680px, 100% - 32px); }
.center { text-align: center; }
.section { padding: 72px 0; }
.section-alt { background: var(--sand); }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }
.center .lead { margin-inline: auto; }
.note { font-size: .92rem; color: var(--muted); margin-top: 24px; }

/* Barre du haut */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px;
  background: var(--forest);
  color: var(--white);
}
.brand {
  font-family: var(--font-title); font-weight: 800; font-size: 1.5rem;
  text-transform: uppercase; color: var(--white); text-decoration: none; letter-spacing: .02em;
}
.brand { white-space: nowrap; }
.topbar .brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-logo { width: 60px; height: 60px; margin: -8px -6px; clip-path: circle(42%); flex-shrink: 0; }
.brand span { color: var(--ochre); }
.topbar nav { display: flex; align-items: center; gap: 20px; }
.topbar nav a { color: var(--white); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; }
.topbar nav a:hover { color: var(--ochre); }

/* Boutons */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--ochre);
  color: var(--white) !important;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--ochre);
  transition: background .15s, transform .15s;
}
.btn:hover { background: var(--ochre-dark); border-color: var(--ochre-dark); transform: translateY(-1px); }
.btn-small { padding: 8px 18px; font-size: .9rem; }
.btn-ghost { background: transparent; border-color: var(--white); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); }

/* Accueil */
.hero {
  position: relative;
  color: var(--white);
  background:
    radial-gradient(circle at 80% 20%, rgba(217, 144, 31, .45), transparent 45%),
    linear-gradient(160deg, var(--forest-2) 0%, var(--forest) 60%, #142a1d 100%);
  padding: 96px 0 88px;
  overflow: hidden;
}
/* Emplacement pour une photo de course : décommenter et mettre le fichier dans images/
.hero { background: linear-gradient(rgba(20,42,29,.65), rgba(20,42,29,.85)), url("images/hero.jpg") center/cover; }
*/
.hero-inner { width: min(1100px, 100% - 32px); margin-inline: auto; position: relative; }

/* TEST : variante « fun » du haut de page (ciel, soleil, collines, sentier).
   Utilisée seulement par test-fond-fun.html (classe hero-fun). */
.hero.hero-fun {
  color: var(--forest);
  background:
    radial-gradient(circle at 86% 30%, rgba(255, 236, 110, .95) 0, rgba(255, 220, 90, .45) 16%, transparent 34%),
    radial-gradient(ellipse 160px 40px at 18% 18%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(ellipse 120px 30px at 48% 10%, rgba(255, 255, 255, .7), transparent 70%),
    linear-gradient(180deg, #6cc8f0 0%, #a8e0fa 50%, #e3f6ff 80%, #fff5d6 100%);
  padding-bottom: 170px;
}
.hero-fun .hero-inner { z-index: 1; }
.hero-fun .hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 170px; display: block; }
.hero-fun .eyebrow, .hero-fun .hero-new { color: #b85c00; }
.hero-fun h1 { color: var(--forest); text-shadow: 0 2px 0 rgba(255, 255, 255, .5); }
.hero.hero-fun h1 span { color: #e8730c; }
.hero-fun .hero-facts li { background: rgba(255, 255, 255, .8); border-color: transparent; box-shadow: 0 2px 8px rgba(31, 61, 43, .12); }
.hero-fun .hero-facts strong { color: #c4620a; }
.hero-fun .btn-ghost { color: var(--forest) !important; border-color: var(--forest); background: rgba(255, 255, 255, .5); }
.hero-fun .btn-ghost:hover { background: var(--white); border-color: var(--forest); }
.hero-fun .countdown { opacity: 1; color: var(--forest); }
.hero-fun .hero-logo { filter: drop-shadow(0 8px 18px rgba(184, 92, 0, .35)); }
/* TEST 2 : variante « crinière » (soleil levant, rayons depuis le logo).
   Utilisée seulement par test-fond-2.html (classe hero-mane). */
.hero.hero-mane {
  color: #23170a;
  background:
    repeating-conic-gradient(from 0deg at 86% 34%, rgba(255, 255, 255, .16) 0deg 5deg, transparent 5deg 13deg),
    radial-gradient(circle at 86% 34%, #ffe066 0, #ffc23d 22%, transparent 55%),
    linear-gradient(135deg, #ffb238 0%, #ff8a2a 45%, #f2552c 100%);
  padding-bottom: 120px;
}
.hero-mane .hero-inner { z-index: 1; }
.hero-mane .wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; display: block; }
.hero-mane .eyebrow, .hero-mane .hero-new { color: #3b1d05; }
.hero-mane h1 { color: var(--forest); }
.hero.hero-mane h1 span { color: var(--white); text-shadow: 0 3px 0 rgba(120, 40, 0, .25); }
.hero-mane .hero-facts li { background: rgba(255, 255, 255, .88); border-color: transparent; color: #23170a; }
.hero-mane .hero-facts strong { color: #c2410c; }
.hero-mane .hero-cta .btn:not(.btn-ghost) { background: var(--forest); border-color: var(--forest); }
.hero-mane .hero-cta .btn:not(.btn-ghost):hover { background: #142a1d; border-color: #142a1d; }
.hero-mane .btn-ghost { color: var(--forest) !important; border-color: var(--forest); background: rgba(255, 255, 255, .35); }
.hero-mane .btn-ghost:hover { background: var(--white); border-color: var(--forest); }
.hero-mane .countdown { opacity: 1; color: var(--forest); }
.hero-mane .hero-logo { filter: drop-shadow(0 10px 22px rgba(120, 40, 0, .45)); }
@media (max-width: 900px) {
  .hero.hero-mane { background:
    repeating-conic-gradient(from 0deg at 50% 8%, rgba(255, 255, 255, .16) 0deg 5deg, transparent 5deg 13deg),
    linear-gradient(160deg, #ffb238 0%, #ff8a2a 50%, #f2552c 100%); }
}

@media (max-width: 640px) {
  .hero.hero-mane { padding-bottom: 90px; }
  .hero-mane .wave { height: 44px; }
  .hero.hero-fun { padding-bottom: 140px; }
  .hero-fun .hills { height: 110px; }
}
.hero-logo {
  position: absolute; top: 0; right: 0;
  width: clamp(150px, 24vw, 280px); height: auto; aspect-ratio: 1;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35));
}
@media (max-width: 900px) {
  .hero-logo { position: static; display: block; width: 130px; margin: 0 0 20px; }
}
.eyebrow {
  font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem;
  color: var(--ochre); margin: 0 0 12px;
}
.eyebrow-dark { color: var(--ochre-dark); }
.hero h1 {
  font-size: clamp(3.2rem, 11vw, 7rem);
  font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  margin: 0;
}
.hero h1 span { color: var(--ochre); display: block; }
.hero-date { font-family: var(--font-title); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 600; margin: 12px 0 28px; }
.hero-facts {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.hero-facts li {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: .95rem;
}
.hero-facts strong { color: var(--ochre); margin-right: 4px; }
/* Bandeau d'actualité (sous le menu) */
.news-strip {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 16px; background: var(--ochre); color: var(--white); text-decoration: none;
  font-weight: 600; font-size: .95rem; text-align: center;
}
.news-strip[hidden] { display: none; }
.news-strip:hover .news-strip-text { text-decoration: underline; }
.news-strip-tag {
  flex: none; padding: 2px 10px; border-radius: 999px; background: var(--forest);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
}
.news-strip-go { flex: none; transition: transform .15s; }
.news-strip:hover .news-strip-go { transform: translateX(3px); }

/* Section Actualités */
.section-actus { padding: 56px 0; background: var(--sand); }
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.news-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.news-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.news-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 22px; flex: 1; }
.news-date { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ochre-dark); }
.news-title { margin: 0; font-size: 1.45rem; }
.news-text { margin: 0; color: var(--muted); font-size: .95rem; }
.news-link { margin-top: auto; padding-top: 8px; font-weight: 600; text-decoration: none; }
.news-link:hover { text-decoration: underline; }
@media (max-width: 860px) { .news { grid-template-columns: 1fr; } }

/* Étiquettes cliquables (accueil) */
.hero-links li { padding: 0; transition: background .15s, border-color .15s, transform .15s; }
.hero-links a { display: block; padding: 6px 16px; color: inherit; text-decoration: none; border-radius: 999px; }
.hero-links a::after { content: " →"; opacity: .55; transition: opacity .15s, margin .15s; }
.hero-links li:hover { background: rgba(255, 255, 255, .2); border-color: var(--ochre); transform: translateY(-1px); }
.hero-links li:hover a::after { opacity: 1; }
.hero-links a:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.hero-new { margin: -18px 0 28px; color: var(--ochre); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
/* Menu : réseaux sociaux, page en cours, bouton téléphone */
.topbar nav { margin-left: auto; }
.topbar nav a[aria-current="page"] { color: var(--ochre); }
.nav-social { display: inline-flex; align-items: center; gap: 14px; }
.topbar nav a.social { display: inline-flex; align-items: center; opacity: .9; }
.topbar nav a.social:hover { opacity: 1; }
.topbar nav .nav-cta { display: none; }
.menu-toggle {
  display: none; align-items: center; gap: 8px;
  background: transparent; color: var(--white); border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 999px; padding: 6px 14px; font: 600 .9rem var(--font-text); cursor: pointer;
}
.menu-toggle:hover, .menu-toggle:focus-visible { border-color: var(--white); }
.menu-toggle .bars, .menu-toggle .bars::before, .menu-toggle .bars::after {
  display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; position: relative; content: "";
}
.menu-toggle .bars::before { position: absolute; top: -5px; }
.menu-toggle .bars::after { position: absolute; top: 5px; }
@media (max-width: 1100px) {
  .menu-toggle { display: inline-flex; }
  .topbar-cta { margin-left: auto; }
  .topbar nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--forest); padding: 4px 24px 18px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
  }
  .topbar.open nav { display: flex; }
  .topbar nav a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 1rem; }
  .topbar nav .nav-social { padding-top: 14px; gap: 20px; }
  .topbar nav .nav-social a { border: 0; padding: 4px 0; }
}
@media (max-width: 520px) {
  .topbar-cta { display: none; }
  .topbar nav .nav-cta { display: block; color: var(--ochre); font-weight: 700; }
  .menu-toggle { margin-left: auto; }
}

/* En-tête des pages intérieures */
.page-head {
  color: var(--white);
  background:
    radial-gradient(circle at 85% 10%, rgba(217, 144, 31, .35), transparent 40%),
    linear-gradient(160deg, var(--forest-2) 0%, var(--forest) 70%);
  padding: 56px 0 48px;
}
.page-head h1 { font-size: clamp(2.6rem, 8vw, 4.6rem); text-transform: uppercase; margin: 0 0 10px; text-wrap: balance; }
.page-head h1 span { color: var(--ochre); }
.page-head .lead { color: rgba(255, 255, 255, .85); margin: 0; }
.page-head .hero-facts { margin: 22px 0 0; }
.crumbs { margin: 0 0 14px; font-size: .88rem; color: rgba(255, 255, 255, .75); }
.crumbs a { color: var(--white); }

/* Page course */
.course-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.course-layout h2 { font-size: 1.9rem; }
.course-layout h2:not(:first-child) { margin-top: 36px; }
.course-side { position: sticky; top: 96px; }
.course-side .btn { display: block; text-align: center; margin-top: 20px; }
.course-side .note { margin-top: 14px; }
.course-gallery { margin-top: 0; grid-template-columns: repeat(2, 1fr); }
.course-gallery > :first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.other-courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.other-courses a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 20px 24px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow);
  text-decoration: none; color: var(--forest); font-weight: 600;
}
.other-courses a strong { font-family: var(--font-title); font-size: 2.2rem; line-height: 1; }
.other-courses a:hover { transform: translateY(-2px); }
@media (max-width: 860px) {
  .course-layout { grid-template-columns: 1fr; }
  .course-side { position: static; }
}

/* Accueil : liens vers les autres pages */
.explore { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.explore a {
  display: block; padding: 26px 24px; border-radius: var(--radius); background: var(--white);
  box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .15s;
}
.explore a:hover { transform: translateY(-2px); }
.explore strong { display: block; font-family: var(--font-title); font-size: 1.6rem; color: var(--forest); margin-bottom: 6px; }
.explore span { color: var(--muted); font-size: .95rem; }
.explore em { display: block; margin-top: 12px; font-style: normal; font-weight: 600; color: var(--ochre-dark); }
@media (max-width: 860px) { .explore { grid-template-columns: 1fr; } }

/* Galerie avec légendes (bénévoles) */
.gallery figure { margin: 0; }
.gallery { align-items: start; }
.gallery figcaption { margin-top: 8px; font-size: .9rem; color: var(--muted); }
/* Réseaux sociaux : boutons aux couleurs de Facebook et Instagram */
.btn-social {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px; border-radius: 999px; color: #fff !important; text-decoration: none;
  font-weight: 600; transition: transform .15s, box-shadow .15s;
}
.btn-social:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.btn-social:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
.btn-social.fb { background: #1877f2; }
.btn-social.ig { background: linear-gradient(45deg, #f09433, #e6683c 30%, #dc2743 55%, #cc2366 75%, #bc1888); }
.social-links, .follow-btns, .footer-social { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-social { margin-top: 12px !important; }
.footer-social .btn-social { padding: 8px 16px; font-size: .9rem; }
/* Accueil : encart « Suivez-nous » sous les actualités */
.follow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  margin-top: 28px; padding: 22px 26px; border-radius: var(--radius); background: var(--forest); color: var(--white);
}
.follow-text { margin: 0; max-width: 52ch; color: rgba(255, 255, 255, .85); }
.follow-text strong { display: block; font-family: var(--font-title); font-size: 1.6rem; color: var(--white); margin-bottom: 2px; }
.follow-btns { margin: 0; }

/* Accueil : l'organisateur (ESSHA Athlétisme) */
.club { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 40px; align-items: center; }
.club-logo { width: 180px; height: 180px; clip-path: circle(42%); }
.club .lead { margin-top: 0; }
.club-cta { margin: 20px 0 0; }
.page-head .lead a { color: var(--white); }
@media (max-width: 640px) {
  .club { grid-template-columns: 1fr; gap: 12px; justify-items: start; }
  .club-logo { width: 130px; height: 130px; }
}

/* Bénévoles : toutes les photos à la même taille, 4 par ligne (2 sur téléphone et tablette) */
.gallery.gallery-benevoles { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .gallery.gallery-benevoles { grid-template-columns: repeat(2, 1fr); } }
/* Éditions précédentes : un bloc par année */
.edition-block { margin-top: 36px; }
.edition-block + .edition-block { padding-top: 32px; border-top: 1px solid #e6dfd0; }
.edition-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.edition-head h3 { margin: 0; font-size: 1.8rem; }
.edition-block .gallery { margin-top: 18px; }
.edition-credit { margin-top: 12px; }
.editions-social { margin-top: 40px; }

/* Photos cliquables + visionneuse */
.gallery img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  background: rgba(10, 20, 14, .92);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1200px, 100%); display: flex; flex-direction: column; align-items: center; min-width: 0; }
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 8px; cursor: default; }
.lightbox figcaption { margin-top: 10px; color: #fff; font-size: .95rem; text-align: center; }
.lightbox button {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.8rem; line-height: 1;
}
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255, 255, 255, .3); outline: none; }
.lightbox .lb-close { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: 14px; }
.lightbox.single .lb-prev, .lightbox.single .lb-next { visibility: hidden; }
body.lb-open { overflow: hidden; }
@media (max-width: 640px) {
  .lightbox .lb-prev, .lightbox .lb-next { position: absolute; bottom: 18px; }
  .lightbox .lb-prev { left: calc(50% - 56px); }
  .lightbox .lb-next { right: calc(50% - 56px); }
  .lightbox img { max-height: 70vh; }
}

/* Photo prise en hauteur : cadrée sur le haut pour garder le visage */
.gallery img.portrait { object-position: center 18%; }

/* Programme */
.timeline { list-style: none; margin: 32px 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 86px; top: 8px; bottom: 8px; width: 2px; background: #e6dfd0; }
.timeline li { display: grid; grid-template-columns: 72px 1fr; gap: 30px; padding: 12px 0; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 81px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--ochre); box-shadow: 0 0 0 4px var(--white); }
.timeline time { font-family: var(--font-title); font-weight: 800; font-size: 1.5rem; color: var(--forest); text-align: right; line-height: 1.2; }
.timeline strong { display: block; font-size: 1.05rem; }
.timeline span { color: var(--muted); font-size: .95rem; }

/* Bénévoles */
.missions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.missions li { background: var(--sand); border-radius: var(--radius); padding: 16px 18px; font-size: .92rem; color: var(--muted); }
.missions strong { display: block; font-family: var(--font-title); font-size: 1.25rem; color: var(--forest); }

/* Galerie */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.gallery img, .gallery .photo-slot { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.social-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 640px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .missions { grid-template-columns: 1fr; }
}

.card-link { display: inline-block; margin-top: 14px; font-weight: 600; text-decoration: none; }
.card-link:hover { text-decoration: underline; }

/* Parcours en détail */
.route { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); margin-top: 32px; overflow: hidden; scroll-margin-top: 80px; }
.route-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 20px 28px; background: var(--forest); color: var(--white); }
.route-distance { margin: 0; font-family: var(--font-title); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--ochre); }
.route-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.route-facts li { font-weight: 600; }
.route-facts span { display: block; font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.route-body { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 28px; }
.route-body h3 { margin-top: 0; }
.route-body h3 + p { margin-top: 0; }
.ravitos { list-style: none; padding: 0; margin: 0; }
.ravitos li { padding: 8px 0; border-bottom: 1px solid #ece6da; }
.ravitos li:last-child { border-bottom: 0; }
.ravitos em { display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px; background: var(--sand); color: var(--ochre-dark); font-style: normal; font-size: .82rem; font-weight: 600; }
.photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: start; }
.photos > :first-child { grid-column: 1 / -1; }
.photos img, .photo-slot { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.photos > :first-child { aspect-ratio: 16 / 9; }
.photo-slot { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #efe8da, #efe8da 10px, #f6f1e7 10px, #f6f1e7 20px); color: var(--muted); font-size: .85rem; }
@media (max-width: 760px) {
  .route-body { grid-template-columns: 1fr; padding: 20px; }
  .route-head { padding: 18px 20px; }
}

.relay-info { margin: 0 0 16px; padding-left: 20px; line-height: 1.7; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* Compte à rebours (accueil) : discret, une ligne */
.countdown { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -14px 0 28px; }
.cd-label { margin: 0; font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .75); }
.cd-units { display: flex; gap: 6px; }
.cd-unit {
  display: inline-flex; align-items: baseline; gap: 3px; padding: 4px 10px;
  border-radius: 8px; background: rgba(255, 255, 255, .1);
}
.cd-num { font-family: var(--font-title); font-weight: 700; font-size: 1.45rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--white); min-width: 1.2em; text-align: right; }
.cd-unit:first-child .cd-num { color: var(--ochre); }
.cd-txt { font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.cd-num.tick { animation: cd-tick .3s ease-out; }
@keyframes cd-tick { from { opacity: .35; } to { opacity: 1; } }
.cd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.countdown.done .cd-units { display: none; }
@media (prefers-reduced-motion: reduce) { .cd-num.tick { animation: none; } }

/* Cartes des courses */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.card {
  position: relative;
  background: var(--white);
  border: 1px solid #e6e1d6;
  border-radius: var(--radius);
  padding: 28px 24px 20px;
  box-shadow: var(--shadow);
}
.card-featured { border: 2px solid var(--ochre); }
.card-badge {
  position: absolute; top: -14px; left: 24px; margin: 0;
  background: var(--ochre); color: var(--white);
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  padding: 4px 12px; border-radius: 999px;
}
.card-distance { font-family: var(--font-title); font-weight: 800; font-size: 3.6rem; line-height: 1; margin: 0; color: var(--forest); }
.card-time { font-weight: 600; color: var(--ochre-dark); margin: 6px 0 18px; }
.card-list { margin: 0; }
.card-list div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid #eee8dc; font-size: .95rem;
}
.card-list dt { color: var(--muted); }
.card-list dd { margin: 0; font-weight: 600; text-align: right; }

/* Relais */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.relay { list-style: none; counter-reset: leg; padding: 0; margin: 0; display: grid; gap: 14px; }
.relay li {
  counter-increment: leg;
  display: flex; align-items: center; gap: 18px;
  background: var(--white); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow);
}
.relay li::before {
  content: counter(leg);
  flex: 0 0 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--forest); color: var(--white);
  font-family: var(--font-title); font-weight: 700; font-size: 1.4rem;
}
.relay-dist { font-family: var(--font-title); font-weight: 800; font-size: 1.8rem; color: var(--ochre-dark); min-width: 80px; }
.relay-who { font-weight: 500; }

/* Infos pratiques */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.access-map { margin-top: 24px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 7; background: #e9e4d8; }
.access-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .access-map { aspect-ratio: 4 / 3; } }

/* Résultats */
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 28px; }
.result-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 20px; align-items: center; padding: 24px; border-radius: var(--radius); background: var(--forest); color: var(--white); text-decoration: none; transition: transform .15s; }
.result-card:hover { transform: translateY(-2px); }
.result-year { grid-row: 1 / 3; font-family: var(--font-title); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--ochre); }
.result-info { font-size: .95rem; opacity: .85; }
.result-info strong { display: block; font-size: 1.05rem; opacity: 1; color: var(--white); }
.result-go { font-weight: 600; font-size: .92rem; color: var(--ochre); }
.info { background: var(--white); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.info p { margin: 0; color: var(--muted); font-size: .96rem; }

/* Partenaires */
.partners {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px;
}
.partners li {
  display: grid; place-items: center; text-align: center;
  min-height: 80px; padding: 12px;
  border: 1px solid #e6e1d6; border-radius: var(--radius);
  font-weight: 600; color: var(--forest);
}

/* Pied de page */
.footer { background: var(--forest); color: rgba(255, 255, 255, .85); padding: 40px 0; font-size: .95rem; }
.partners img { max-width: 100%; max-height: 84px; object-fit: contain; }
.partners li { min-height: 110px; overflow: hidden; }
.partners li.partner-fill { padding: 6px; }
.partners li.partner-fill img { width: 100%; height: 98px; max-height: none; object-fit: contain; }
.partners li.partner-fill img.crop-brain { object-fit: cover; object-position: center 52%; }
.partners li.partner-dark { background: var(--forest); }
.partners li.partner-black { background: #000; }
.partners li.partner-navy { background: #203641; }
.partners li.partner-named { gap: 6px; }
.partners a.partner-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.partners li.partner-named img { max-height: 40px; }
.partners li.partner-named span { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.sponsor-cta { margin-top: 40px; padding: 28px; border-radius: var(--radius); background: var(--sand); text-align: center; }
.sponsor-cta h3 { margin-top: 0; }
.sponsor-cta p:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 0; }
.btn-outline { background: transparent; color: var(--forest) !important; border-color: var(--forest); }
.btn-outline:hover { background: var(--forest); color: var(--white) !important; border-color: var(--forest); }
.footer a { color: var(--ochre); }
.footer p { margin: 4px 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* Tablette */
@media (max-width: 900px) {
  .cards { gap: 16px; }
  .card { padding: 26px 18px 16px; }
  .card-distance { font-size: 3rem; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Petite tablette et téléphone */
@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; max-width: 460px; }
}

/* Téléphone */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .topbar { padding: 10px 16px; }
  .brand { font-size: 1.25rem; }
  .section { padding: 56px 0; }
  .hero { padding: 64px 0 56px; }
  .info-grid { grid-template-columns: 1fr; }
}

/* Carte Google chargée au clic */
.map-consent { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center;
  background: repeating-linear-gradient(45deg, #ece6d8, #ece6d8 12px, #f3eee3 12px, #f3eee3 24px); }
.map-consent p { margin: 0; color: var(--muted); }
.map-consent strong { display: block; font-family: var(--font-title); font-size: 1.5rem; color: var(--forest); }
.map-consent .map-note { font-size: .82rem; }

/* Page Mentions légales */
.legal h2 { font-size: 1.7rem; margin-top: 40px; }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }

/* ==========================================================================
   Mise en avant des partenaires et des actualités
   ========================================================================== */

/* Logo d'un partenaire dans une petite case (bandeau, bas de page, « offert par », actus) */
.p-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; border: 1px solid #e6e1d6; border-radius: 10px; }
.p-chip img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.p-chip.p-fill { padding: 3px !important; }
.p-chip.p-fill img { width: 100%; height: 100%; }
.p-chip.p-cover img { object-fit: cover; object-position: center 52%; }
.p-txt { font-weight: 600; font-size: .8rem; line-height: 1.15; color: var(--forest); text-align: center; padding: 4px; }

/* Bandeau de logos qui défile (accueil, sous la grande photo) */
.partners-band { background: var(--white); padding: 20px 0 22px; border-bottom: 1px solid #ece6d8; }
.partners-band[hidden] { display: none; }
.partners-band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.partners-band-title { margin: 0; font-family: var(--font-title); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .08em; color: var(--forest); }
.partners-band-more { font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.partners-band-more:hover { text-decoration: underline; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; width: max-content; animation: defile var(--duree, 60s) linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-track a { display: block; border-radius: 10px; }
.marquee-track a:hover .p-chip { border-color: var(--ochre); }
.band-chip { width: 156px; height: 80px; padding: 8px 10px; }
@keyframes defile { to { transform: translateX(calc(-50% - 7px)); } }
@media (max-width: 640px) { .band-chip { width: 124px; height: 66px; } .partners-band-title { font-size: 1.05rem; white-space: nowrap; } }
@media (max-width: 420px) { .partners-band-more { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; }
  .marquee-track li[aria-hidden] { display: none; }
}

/* Logos des partenaires en bas des pages */
.footer-partners { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.footer-partners[hidden] { display: none; }
.footer-partners-title { margin: 0 0 12px !important; font-family: var(--font-title); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .08em; color: var(--white); }
.footer-partners-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.foot-chip { width: 108px; height: 56px; padding: 5px 7px; border-color: transparent; border-radius: 8px; }
.footer-partners-list a { display: block; border-radius: 8px; transition: transform .15s; }
.footer-partners-list a:hover { transform: translateY(-2px); }

/* « Offert par… » */
.offert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; font-size: .88rem; color: var(--muted); }
.offert[hidden] { display: none; }
.offert-center { justify-content: center; }
.offert-label { font-weight: 600; }
.offert-partner { display: inline-flex; align-items: center; gap: 8px; color: var(--forest); font-weight: 600; text-decoration: none; }
a.offert-partner:hover .offert-nom { text-decoration: underline; }
.offert-chip { width: 72px; height: 40px; padding: 3px 5px; border-radius: 8px; }
.timeline .offert { margin-top: 8px; }
.timeline .offert span { font-size: .88rem; }
.card .offert { padding-top: 12px; border-top: 1px dashed #e6dfd0; }

/* Actualités : « À la une », types, logo du partenaire */
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.news-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--sand); color: var(--forest); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.news-badge-une { background: var(--ochre); color: var(--white); }
.news-text p { margin: 0 0 8px; }
.news-text p:last-child { margin-bottom: 0; }
.news-logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 18px; border-bottom: 1px solid #ece6d8; }
.news-logo-chip { width: 80%; height: 80%; border: 0; background: transparent !important; }
.news-partner { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-weight: 600; font-size: .9rem; color: var(--forest); }
.news-partner-chip { width: 64px; height: 36px; padding: 3px 5px; border-radius: 8px; }
.news-une { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border: 2px solid var(--ochre); }
.news-une .news-img, .news-une .news-logo { height: 100%; min-height: 260px; aspect-ratio: auto; border-bottom: 0; }
.news-une .news-body { padding: 30px 32px; justify-content: center; gap: 10px; }
.news-une .news-title { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.news-une .news-text { font-size: 1.02rem; color: var(--ink); }
.news-une .news-link { margin-top: 6px; }
.news-une.news-une-text { grid-template-columns: 1fr; border-width: 0 0 0 6px; }
@media (max-width: 860px) {
  .news-une { grid-template-columns: 1fr; }
  .news-une .news-img, .news-une .news-logo { min-height: 0; aspect-ratio: 16 / 9; }
  .news-une .news-body { padding: 22px; }
}

/* Bandeau orange : plusieurs actus qui défilent */
.news-strip { transition: opacity .25s; }
.news-strip.fade { opacity: .15; }
.news-strip-dots { display: inline-flex; gap: 5px; flex: none; }
.news-strip-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.news-strip-dots span.on { background: var(--white); }

/* Inscriptions : message (« Plus que 50 places… ») et bouton inactif */
.hero-alert { display: inline-block; margin: -14px 0 22px; padding: 6px 16px; border-radius: 999px; background: var(--ochre); color: var(--white); font-weight: 700; }
.hero-alert[hidden], .inscription-alert[hidden] { display: none; }
.inscription-alert { display: inline-block; margin: 0 0 22px; padding: 8px 18px; border-radius: 999px; background: var(--sand); color: var(--forest); font-weight: 700; }
.btn.btn-off, .btn.btn-off:hover { background: #d8d2c5; border-color: #d8d2c5; color: var(--forest) !important; cursor: default; transform: none; }