/* Mise en page commune des widgets (T-0073). Toute la couleur vient des variables de la charte de la structure (/charte.css),
   rien ici n'est propre à Becs Rouges ou à Rouge Coquelicot. Aucune ressource tierce : police, icônes et images sont locales. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.cadre { max-width: 46rem; margin: 0 auto; padding: 0 1rem 2rem; }

/* En-tête : le nom de la structure en police de titre, puis trois onglets qui sont de vrais liens. */
.entete { padding: 1rem 0 0; }
.entete h1 {
  margin: 0; font: 400 1.5rem/1.2 var(--police-titre); color: var(--titre);
  display: flex; align-items: center; gap: .6rem;
}
.entete h1::before {
  content: ""; width: .5rem; height: 1.5rem; border-radius: 2px; background: var(--accent); flex: none;
}
.entete p { margin: .25rem 0 0 1.1rem; color: var(--discret); font-size: .875rem; }
.onglets { display: flex; gap: .25rem; margin: 1rem 0 1.25rem; border-bottom: 2px solid var(--filet); }
.onglets a {
  padding: .5rem .85rem; margin-bottom: -2px; border-bottom: 2px solid transparent;
  color: var(--discret); text-decoration: none; font-weight: 600; font-size: .9375rem;
}
.onglets a:hover { color: var(--titre); }
.onglets a[aria-current="page"] { color: var(--titre); border-bottom-color: var(--accent); }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; border-radius: 3px; }

/* Agenda */
.mois {
  margin: 1.5rem 0 .5rem; font: 400 1.0625rem/1.2 var(--police-titre); color: var(--titre);
  text-transform: capitalize; display: flex; align-items: center; gap: .75rem;
}
.mois::after { content: ""; flex: 1; height: 1px; background: var(--filet); }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.evt {
  display: grid; grid-template-columns: 4rem 1fr; gap: .875rem; align-items: start;
  background: var(--carte); border: 1px solid var(--filet); border-radius: 6px; padding: .75rem;
  box-shadow: var(--ombre);
}
.pastille {
  background: var(--pastille); color: var(--pastille-texte); border-radius: 4px; text-align: center;
  padding: .4rem .25rem .45rem; line-height: 1; border-top: 4px solid var(--accent);
}
.pastille .sem { display: block; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.pastille .jour { display: block; font: 400 1.75rem/1.1 var(--police-titre); margin: .15rem 0; }
.pastille .m { display: block; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.evt.aujourdhui { border-color: var(--accent); }
.evt h2 { margin: 0; font: 400 1.125rem/1.3 var(--police-titre); color: var(--titre); overflow-wrap: anywhere; }
.meta { margin: .2rem 0 0; color: var(--discret); font-size: .875rem; display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
.meta span { overflow-wrap: anywhere; }
.puce {
  display: inline-block; margin-left: .5rem; padding: .05rem .5rem; vertical-align: .15em; border-radius: 99px;
  background: var(--accent); color: var(--accent-texte); font: 700 .6875rem/1.5 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase;
}
.evt details { margin-top: .5rem; }
.evt summary { cursor: pointer; color: var(--lien); font-size: .875rem; font-weight: 600; }
.evt details p { margin: .4rem 0 0; font-size: .9375rem; white-space: pre-line; overflow-wrap: anywhere; }
.evt .lien { display: inline-block; margin-top: .5rem; color: var(--lien); font-size: .875rem; font-weight: 600; }

/* États : chargement, vide, erreur. Chacun dit quoi faire. */
.etat { padding: 1.25rem; border: 1px dashed var(--filet); border-radius: 6px; color: var(--discret); text-align: center; }
.etat.erreur { border-style: solid; border-color: var(--accent); color: var(--texte); }
.etat button {
  margin-top: .6rem; padding: .45rem 1rem; border: 0; border-radius: 4px; background: var(--accent); color: var(--accent-texte);
  font: 600 .9375rem system-ui, sans-serif; cursor: pointer;
}

/* Réseaux */
.reseaux { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.reseaux a {
  display: block; height: 100%; padding: .8rem .9rem; border: 1px solid var(--filet); border-left: 4px solid var(--accent); border-radius: 6px;
  background: var(--carte); color: var(--titre); text-decoration: none; box-shadow: var(--ombre);
}
.reseaux a:hover { border-left-color: var(--accent-2); }
.reseaux strong { display: block; font: 400 1.0625rem/1.3 var(--police-titre); }
.reseaux span { display: block; margin-top: .15rem; color: var(--discret); font-size: .8125rem; overflow-wrap: anywhere; }
.flux { margin-top: 1.5rem; }
.flux h2 { margin: 0 0 .5rem; font: 400 1.0625rem/1.2 var(--police-titre); color: var(--titre); }
.flux ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.flux li { padding: .55rem 0; border-bottom: 1px solid var(--filet); }
.flux li a { color: var(--lien); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.flux li a:hover { text-decoration: underline; }
.flux time { display: block; color: var(--discret); font-size: .8125rem; }
.note { margin-top: 1.5rem; color: var(--discret); font-size: .8125rem; }

@media (max-width: 26rem) {
  .evt { grid-template-columns: 3.4rem 1fr; gap: .65rem; padding: .6rem; }
  .pastille .jour { font-size: 1.5rem; }
  .onglets a { padding: .5rem .6rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .evt, .reseaux a { transition: border-color .15s ease; }
}