/* ============================================================
   113 — Agenda : bandeau d'annonces + section #agenda
   Chargé après styles-editorial.css (version index-actus.html)
   ============================================================ */
[hidden] { display:none !important; }

/* Couleur de repère par type d'annonce (règle des blocs du logo) */
[data-type="appel"]    { --type:var(--orange); }
[data-type="matinale"] { --type:var(--green); }
[data-type="evenement"]{ --type:var(--blue); }

/* ---------- Bandeau ---------- */
.agenda-bar { background:var(--ink); color:var(--paper); font-size:var(--fs-small); }
.agenda-bar__inner { display:flex; align-items:center; gap:20px; min-height:48px; }
.agenda-bar__label { flex:none; font:700 var(--fs-micro)/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--paper) 72%, transparent); }
.agenda-bar__list { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:20px; min-width:0; flex:1; }
.agenda-bar__list li { display:flex; align-items:center; gap:10px; min-width:0; }
.agenda-bar__list li + li { padding-left:20px; border-left:1px solid color-mix(in srgb, var(--paper) 22%, transparent); }
.agenda-bar__list li::before { content:""; flex:none; width:9px; height:9px; background:var(--type, var(--orange)); }
.agenda-bar__list a { display:block; min-width:0; color:var(--paper); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:2px; text-underline-offset:5px; padding-block:12px; }
.agenda-bar__list a:hover { text-decoration-thickness:3px; }
.agenda-bar__all { flex:none; font:700 var(--fs-label)/1 var(--mono); letter-spacing:.04em; color:var(--paper); padding-block:14px; white-space:nowrap; }
.agenda-bar__all:hover { color:color-mix(in srgb, var(--paper) 78%, var(--orange)); }
.agenda-bar:not(.is-multi) .agenda-bar__all { display:none; }
.agenda-bar__close { flex:none; display:grid; place-items:center; width:44px; height:44px; margin-right:-12px; background:none; border:0; color:var(--paper); cursor:pointer; border-radius:var(--radius); }
.agenda-bar__close svg { stroke:currentColor; stroke-width:1.8; stroke-linecap:square; fill:none; }
.agenda-bar__close:hover { background:color-mix(in srgb, var(--paper) 12%, transparent); }
.agenda-bar :focus-visible { outline-color:var(--orange); }
@media (max-width:860px){
  .agenda-bar__label { display:none; }
  .agenda-bar__inner { gap:12px; }
  .agenda-bar__list li + li { display:none; }          /* une seule annonce sur mobile… */
  .agenda-bar__all { font-size:var(--fs-micro); }        /* …le reste via « Tout l'agenda » */
}

/* ---------- Section Agenda ---------- */
.annonces { border-top:1px solid var(--line); }
.annonce { display:grid; grid-template-columns:160px minmax(0, 1fr) 220px; gap:clamp(20px, 3vw, 44px); padding-block:clamp(28px, 3.4vw, 44px); border-bottom:1px solid var(--line); scroll-margin-top:90px; }
.annonce__date { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.annonce__date::before { content:""; width:18px; height:18px; background:var(--type); margin-bottom:10px; }
.annonce__kicker { font:700 var(--fs-micro)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.annonce__day { font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(52px, 5.6vw, 72px); line-height:.9; letter-spacing:-.04em; font-variant-numeric:lining-nums tabular-nums; }
.annonce__month { font:700 var(--fs-label)/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.annonce__type { font:700 var(--fs-label)/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.annonce[data-exemple] .annonce__type::after { content:"Exemple · à remplacer"; font-size:var(--fs-micro); letter-spacing:.08em; color:var(--muted); border:1px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius:var(--radius); padding:4px 7px; }
.annonce__title { font-size:clamp(26px, 2.8vw, 36px); margin-top:12px; }
.annonce__desc { color:var(--muted); font-size:var(--fs-text); max-width:58ch; margin-top:14px; }
.annonce__meta { font:400 var(--fs-label)/1.6 var(--mono); letter-spacing:.02em; margin-top:16px; }
.annonce__facts { list-style:none; margin:22px 0 0; padding:0; border-top:1px solid var(--line); max-width:62ch; }
.annonce__facts li { display:grid; grid-template-columns:150px 1fr; gap:16px; padding-block:11px; border-bottom:1px solid var(--line); font-size:var(--fs-small); }
.annonce__facts b { font:700 var(--fs-micro)/1.9 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.annonce__cta { display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding-top:4px; }
.annonce__countdown { font:700 var(--fs-label)/1.3 var(--mono); letter-spacing:.02em; background:var(--souligne); padding-inline:.15em; }
.annonce__countdown:empty { display:none; }

/* L'appel à projets est l'annonce principale : fond carte pour la détacher */
.annonce--appel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding-inline:clamp(20px, 3vw, 40px); margin-block:clamp(20px, 2.4vw, 28px); }
.annonces > .annonce--appel:first-child { margin-top:clamp(24px, 3vw, 36px); }
/* La carte déborde de sa marge intérieure : ses colonnes s'alignent sur celles des annonces sans fond */
@media (min-width:901px){ .annonce--appel { margin-inline:calc(-1 * clamp(20px, 3vw, 40px)); } }

@media (max-width:900px){
  .annonce { grid-template-columns:1fr; gap:18px; }
  .annonce__date { flex-direction:row; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .annonce__date::before { align-self:center; margin:0 4px 0 0; width:14px; height:14px; }
  .annonce__day { font-size:44px; }
  .annonce__cta { flex-direction:row; align-items:center; flex-wrap:wrap; }
}
@media (max-width:520px){
  .annonce__facts li { grid-template-columns:1fr; gap:2px; }
}

/* ---------- Contact : logo LinkedIn ---------- */
.cta__line .cta__social { display:inline-grid; place-items:center; width:44px; height:44px; margin:-12px -11px -12px 0; color:var(--ink); text-decoration:none; border-radius:var(--radius); transition:color .2s ease; }
.cta__line .cta__social svg { fill:currentColor; display:block; }
.cta__line .cta__social:hover { color:var(--blue); }
