/* Belfort-sur-Rebenty : habillage des blocs Communauterre (kit agenda, pages d'événement)
   aux couleurs du site : panneaux de verre clair sur la photo de fond, texte blanc.
   Chargée après communauterre/communauterre.css (dont les règles :where() cèdent toujours). */

:root {
  --ct-accent: #ffffff;
  --ct-accent-fonce: #1e3a5f;
  --ct-accent-clair: rgba(255, 255, 255, 0.18);
  --ct-fond: transparent;
  --ct-surface: rgba(255, 255, 255, 0.1);
  --ct-texte: #ffffff;
  --ct-texte-doux: rgba(255, 255, 255, 0.85);
  --ct-bord: rgba(255, 255, 255, 0.24);
  --ct-police-titres: Arial, sans-serif;
  --ct-police-texte: Arial, sans-serif;
  --ct-rayon: 14px;
}

/* Le corps des pages porte aussi la classe article-page (styles de Belfort) :
   la largeur du bloc de contenu du kit ne doit s'appliquer qu'au bloc lui-même. */
body.article-page { width: auto; margin: 0; }

/* ── Page d'un événement ───────────────────────────────────────────── */
.article-panel .article-page { width: 100%; margin: 0; color: #fff; }
.article-panel .article-page__soustitre { margin: 0 0 14px; font-size: 1.1rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); text-align: center; }
.article-panel .article-page > img { display: block; width: 100%; max-height: 560px; object-fit: contain; margin: 0 0 16px; border-radius: 10px; }
.article-panel .article-page__dates { margin: 0 0 16px; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, 0.24); border-left: 4px solid #fff; border-radius: 0 14px 14px 0; background: rgba(255, 255, 255, 0.11); }
.article-panel .article-page__dates h2 { margin: 0 0 8px; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.article-panel .article-page__dates ul { margin: 0; padding-left: 1.1rem; }
.article-panel .article-page__dates li { line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
.article-panel .article-page h2 { color: #fff; }
.article-panel .article-page li { color: rgba(255, 255, 255, 0.92); line-height: 1.7; }
.article-panel .evenement-infos { margin: 16px 0 0; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 14px; background: rgba(255, 255, 255, 0.11); color: rgba(255, 255, 255, 0.92); }
.article-panel .evenement-infos h2 { margin: 0 0 8px; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; }
.article-panel .evenement-acces__bouton { border-color: #fff; background: transparent; color: #fff; }
.article-panel .evenement-acces__bouton--principal { background: #fff; color: #1e3a5f; }
.article-panel .evenement-acces__qr { color: rgba(255, 255, 255, 0.85); }

/* ── Page Événements (kit agenda, cartes du thème) ─────────────────── */
.events-wrap .agenda-avenir__titre { margin: 0 0 18px; color: #fff; font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: 0.04em; text-transform: uppercase; }
.events-wrap .agenda-avenir ~ .agenda-avenir__titre { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.events-wrap .groupe-annee__grille { gap: 12px; }
.events-wrap .groupe-annee__grille .event-card + .event-card { margin-top: 0; }
.events-wrap .liste-vide { color: rgba(255, 255, 255, 0.85); }
.events-wrap .accordeon-annee { border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.08); }
.events-wrap .accordeon-annee__entete { color: #fff; }
.event-titre-lien { color: inherit; text-decoration: none; }
.event-titre-lien:hover, .event-titre-lien:focus-visible { text-decoration: underline; }
.event-lieu { opacity: 0.85; }