/* ==========================================================
   Card / Événement (Ipedis)
   Réactivité par container queries : la carte s'adapte à la
   largeur de la colonne qui l'accueille, pas à l'écran.
   ========================================================== */

.card-evt-wrap {
  container-type: inline-size;
  container-name: card-evt;
}

.card-evt {
  /* Tokens (remplacer par les variables du thème si elles existent) */
  --ce-bleu: #001730;
  --ce-beige-fonce: #F5F1D8;
  --ce-beige: #FFFDED;
  --ce-jaune: #FFCC02;
  --ce-ciel: #B9E9FF;
  --ce-mauve: #E6D4FF;
  --ce-valeur: rgba(0, 23, 48, 0.8);   /* 80 % : ne pas descendre en dessous */
  --ce-sep: rgba(0, 23, 48, 0.18);
  --ce-police: "Urbanist", system-ui, sans-serif;
  --ce-cadre: var(--ce-bleu);

  box-sizing: border-box;
  margin: 0;
  padding: 16px 4px 4px;
  border-radius: 16px;
  background: var(--ce-cadre);
  color: var(--ce-bleu);
  font-family: var(--ce-police);
}

.card-evt *,
.card-evt *::before,
.card-evt *::after { box-sizing: border-box; }

/* Couleurs de cadre (décoratif) */
.card-evt--cadre-bleu  { --ce-cadre: var(--ce-bleu); }
.card-evt--cadre-jaune { --ce-cadre: var(--ce-jaune); }
.card-evt--cadre-mauve { --ce-cadre: var(--ce-mauve); }
.card-evt--cadre-ciel  { --ce-cadre: var(--ce-ciel); }
.card-evt--cadre-beige { --ce-cadre: var(--ce-beige); }

.card-evt__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: 13px;
  background: var(--ce-beige-fonce);
}

/* ---------- Texte masqué visuellement ---------- */
.card-evt .card-evt__sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- En-tête : surtitre + titre ---------- */
.card-evt__entete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Surtitre (Section Label) : fond de couleur + logo Ipedis.
   Le carré du logo est bleu, le tracé reprend la couleur du fond. */
.card-evt .card-evt__surtitre {
  --ce-st-fond: var(--ce-beige);
  --ce-st-texte: var(--ce-bleu);
  --ce-st-carre: var(--ce-bleu);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 16px 10px 12px;
  border-radius: 8px;
  background: var(--ce-st-fond);
  color: var(--ce-st-texte);
  font: 800 16px/1.5 var(--ce-police);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.card-evt__surtitre-logo { flex: none; display: block; }
.card-evt__surtitre-carre { fill: var(--ce-st-carre); }
.card-evt__surtitre-trait { fill: var(--ce-st-fond); }

.card-evt .card-evt__surtitre--beige { --ce-st-fond: var(--ce-beige); }
.card-evt .card-evt__surtitre--mauve { --ce-st-fond: var(--ce-mauve); }
.card-evt .card-evt__surtitre--ciel  { --ce-st-fond: var(--ce-ciel); }
.card-evt .card-evt__surtitre--jaune { --ce-st-fond: var(--ce-jaune); }
.card-evt .card-evt__surtitre--bleu  { --ce-st-fond: var(--ce-bleu); --ce-st-texte: var(--ce-beige); --ce-st-carre: var(--ce-beige); }

.card-evt .card-evt__titre {
  margin: 0;
  color: var(--ce-bleu);
  font: 700 30px/1.2 var(--ce-police);
  letter-spacing: 0;
  text-transform: none;
}
.card-evt__titre-principal,
.card-evt__titre-italique { display: block; }
.card-evt__titre-italique { font-style: italic; font-weight: 700; }

/* ---------- Bandeau reporté / annulé ---------- */
.card-evt__bandeau {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid var(--ce-bleu);
  border-radius: 8px;
  background: var(--ce-beige);
}
.card-evt__bandeau .card-evt__picto { flex: none; margin-top: 2px; }
.card-evt .card-evt__bandeau p {
  margin: 0;
  font: 800 16px/1.5 var(--ce-police);
  letter-spacing: 0.5px;
}
.card-evt__bandeau a {
  display: inline-block;
  color: var(--ce-bleu);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Lignes d'information ---------- */
.card-evt .card-evt__infos {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 12px;
  margin: 0;
  padding: 0;
}
.card-evt__infos:empty { display: none; }

.card-evt__ligne {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;   /* valeurs alignées sur le libellé le plus long */
  align-items: center;
}

.card-evt .card-evt__ligne dt {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font: 800 16px/1.5 var(--ce-police);
  letter-spacing: 0.5px;
}
.card-evt__ligne dt > span { min-width: 76px; }

.card-evt .card-evt__ligne dd {
  margin: 0;
  color: var(--ce-valeur);
  font: 500 16px/1.5 var(--ce-police);
}
.card-evt__ligne del { text-decoration-thickness: 2px; }

.card-evt__picto { flex: none; display: block; }
.card-evt__ligne .card-evt__picto { width: 32px; height: 32px; }

/* Navigateurs sans subgrid */
@supports not (grid-template-columns: subgrid) {
  .card-evt .card-evt__infos { display: flex; flex-direction: column; gap: 12px; }
  .card-evt__ligne { display: flex; gap: 16px; }
  .card-evt__ligne dt > span { min-width: 120px; }
}

/* ---------- Séparateur ---------- */
.card-evt .card-evt__sep {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--ce-sep);
}

/* ---------- Actions ---------- */
.card-evt__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-evt__boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.card-evt .card-evt__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  margin: 0;
  padding: 4px 12px 4px 4px;
  border: 0;
  border-radius: 4px;
  background: var(--ce-bleu);
  color: var(--ce-beige);
  font: 800 16px/1.5 var(--ce-police);
  letter-spacing: 0.5px;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.card-evt__cta-icone {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: var(--ce-beige);
  color: var(--ce-bleu);
}
.card-evt__cta-icone .card-evt__picto { width: 20px; height: 20px; }

.card-evt .card-evt__cta--jaune { background: var(--ce-jaune); color: var(--ce-bleu); }
.card-evt .card-evt__cta--ciel  { background: var(--ce-ciel);  color: var(--ce-bleu); }
.card-evt__cta--jaune .card-evt__cta-icone,
.card-evt__cta--ciel .card-evt__cta-icone { background: var(--ce-bleu); color: var(--ce-beige); }

.card-evt .card-evt__cta:hover .card-evt__cta-texte { text-decoration: underline; text-underline-offset: 3px; }

/* Lien texte (Google Agenda) */
.card-evt .card-evt__lien {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--ce-bleu);
  font: 700 16px/1.5 var(--ce-police);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.card-evt .card-evt__lien:hover { text-decoration-thickness: 2px; }

.card-evt .card-evt__note {
  margin: 0;
  color: var(--ce-valeur);
  font: 500 14px/1.5 var(--ce-police);
}

/* ---------- Focus visible (y compris sur cadre bleu) ---------- */
.card-evt a:focus-visible,
.card-evt button:focus-visible {
  outline: 3px solid var(--ce-bleu);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--ce-beige-fonce);
}

/* ---------- Carte étroite (< 420 px) ---------- */
@container card-evt (max-width: 419.98px) {
  .card-evt__inner { padding: 24px; }

  .card-evt .card-evt__titre { font-size: 24px; }
  .card-evt__titre-italique { font-size: 20px; }

  .card-evt .card-evt__infos { display: flex; flex-direction: column; gap: 12px; }
  .card-evt__ligne { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .card-evt .card-evt__ligne dd { padding-left: 48px; }   /* 32 px picto + 16 px */

  .card-evt__boutons { flex-direction: column; align-items: flex-start; }
}

/* ---------- Modes de contraste forcé (Windows) ---------- */
@media (forced-colors: active) {
  .card-evt { border: 1px solid CanvasText; }
  .card-evt .card-evt__cta,
  .card-evt__cta-icone,
  .card-evt .card-evt__surtitre { border: 1px solid ButtonText; }
  .card-evt__surtitre-carre { fill: CanvasText; }
  .card-evt__surtitre-trait { fill: Canvas; }
  .card-evt .card-evt__sep { background: CanvasText; }
}

/* Pas d'animation dans ce module. */