/* H&C — fiche événement ponctuel (/agenda/{evenement}/).
   Se charge après fiche.css (sections `.fb`, hero `.fh`, projecteur `.rig`, rideau `.diag`, pied de page).
   Choix de l'utilisateur sur la planche du 2026-10-15 : haut de page « l'affiche » (piste 5).
   Les sections suivent docs/03-contenus/04-agenda.md §2 :

   1. Hero · `.evh`  : mur clair, le jour en ombre derrière l'intervenant détouré sous le projecteur, quatre
                       repères, barre d'inscription pleine largeur (3 champs ; le formulaire complet s'en nourrit).
   2. En bref · `.evb` : photo + 4 puces numérotées.
   3. Pour qui · `.evw`: trois profils.
   4. Programme · `.evp` : « la feuille de service » sous le projecteur, la ligne la plus proche du milieu
                       de l'écran s'allume (evenement.js).
   5. Intervenant · `.evi`.
   6. Infos pratiques · `.evx` : « chez vous, c'est à quelle heure ? » + lien, prix, paiement.
   9. Autres dates · `.evo` : les 3 prochains événements.
   7+8. Formulaire · `.evd` (le gabarit `.diag`) + confirmation `.evs` avec « ajouter à mon agenda ».
   ≤ 1100 px : barre d'inscription en carte ; ≤ 820 px : tout s'empile. */

:root { --ev-gold-ink: #8a6500; }

/* =========================================================
   1. Hero — l'affiche
   ========================================================= */
.evh { --rig-x: 80%; --rig-y: 12px; --rig-w: 72px; --rig-tilt: 0deg; padding-bottom: clamp(32px, 4vw, 56px); }
.evh .cone { --spread: 15deg; --throw: 760px; }
.evh__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
.evh__ex { margin: 0; font-size: 0.8125rem; color: rgb(22 33 61 / 0.55); }

.evh__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  column-gap: clamp(16px, 3vw, 48px);
  min-height: clamp(400px, 38vw, 540px);
  margin-top: clamp(8px, 1.6vw, 20px);
}
.evh__day {
  position: absolute;
  z-index: 0;
  right: 25%;
  bottom: -0.04em;
  font-size: clamp(260px, 34vw, 500px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.8;
  color: rgb(22 33 61 / 0.12);
  pointer-events: none;
  user-select: none;
}
.evh__copy { position: relative; z-index: 2; align-self: center; display: grid; justify-items: start; gap: 18px; padding-block: 12px clamp(40px, 4.4vw, 60px); }
.evh__copy .stitle { max-width: 15ch; font-size: clamp(2.3rem, 4.7vw, 4.2rem); text-wrap: balance; }
.evh__copy .fb__lead { max-width: 40ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: #3d475c; }
.evh__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.evh__facts li { display: grid; gap: 1px; padding: 11px 18px; border-radius: 18px; background: var(--ink); color: #fff; }
.evh__facts small { font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.65; }
.evh__facts b { font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 500; white-space: nowrap; }
.evh__facts .is-date { background: var(--gold); color: var(--ink); }
.evh__facts .is-date small { opacity: 0.72; }

.evh__sp { position: relative; z-index: 2; align-self: end; justify-self: end; width: min(100%, 470px); margin: 0; }
.evh__sp img { display: block; width: 100%; height: auto; }
.evh__tag {
  position: absolute;
  left: -6%;
  bottom: 64px;
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 36px -16px rgb(22 33 61 / 0.5);
}
.evh__tag b { font-size: 1rem; font-weight: 600; }
.evh__tag span { font-size: 0.8125rem; color: #5b6478; }

.evh__strip {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 10px;
  margin-top: -30px;
  padding: 12px 12px 12px clamp(22px, 2.4vw, 34px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 24px 44px -18px rgb(22 33 61 / 0.5);
}
.evh__strip-t { display: grid; gap: 2px; margin: 0; padding-right: 8px; font-size: 1.1875rem; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.evh__strip-t span { font-size: 0.8125rem; font-weight: 400; color: #5b6478; }
.evh__strip input {
  width: 100%;
  height: 54px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #eef1f6;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}
.evh__strip input::placeholder { color: #7d8799; }
.evh__strip input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; background: #fff; box-shadow: 0 0 0 4px rgb(226 174 12 / 0.2); }
.evh__strip .btn { min-height: 58px; padding-right: 26px; font-size: 1.0625rem; }
.evh__strip .btn__icon { width: 44px; height: 44px; }

@media (max-width: 1100px) {
  .evh__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 18px; border-radius: 34px; }
  .evh__strip-t { grid-column: 1 / -1; padding: 0 4px; white-space: normal; }
  .evh__strip .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 820px) {
  .evh { --rig-x: 62%; --rig-w: 62px; }
  .evh__stage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .evh__copy { padding-bottom: 12px; }
  .evh__copy .stitle { max-width: none; }
  .evh__sp { justify-self: start; width: min(60%, 330px); margin-top: 6px; }
  .evh__tag { left: 0; bottom: 48px; }
  .evh__day { right: -3%; bottom: 0; font-size: 66vw; }
  .evh__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .evh__strip { grid-template-columns: minmax(0, 1fr); margin-top: -26px; }
}

/* =========================================================
   2. En bref
   ========================================================= */
.evb__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 5vw, 84px); }
.evb__ph { position: relative; margin: 0; overflow: hidden; border-radius: 30px; aspect-ratio: 4 / 4.4; background: var(--wall); }
.evb__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.evb__live {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.evb__live i { width: 10px; height: 10px; border-radius: 50%; background: #e0452a; animation: ev-live 1.6s ease-in-out infinite; }
@keyframes ev-live { 50% { opacity: 0.35; } }
.evb__tx { display: grid; justify-items: start; gap: 18px; }
.evb__list { counter-reset: b; display: grid; width: 100%; margin: 8px 0 0; padding: 0; list-style: none; }
.evb__list li {
  counter-increment: b;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgb(22 33 61 / 0.12);
  font-size: clamp(1.0625rem, 1.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.35;
}
.evb__list li:last-child { border-bottom: 1px solid rgb(22 33 61 / 0.12); }
.evb__list li::before {
  content: counter(b);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

/* =========================================================
   3. Pour qui
   ========================================================= */
.evw__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin: clamp(28px, 4vw, 52px) 0 0; padding: 0; list-style: none; }
.evw__card { display: grid; align-content: start; gap: 8px; overflow: hidden; border-radius: 28px; background: #fff; padding-bottom: 26px; }
.evw__ph { aspect-ratio: 16 / 11; overflow: hidden; }
.evw__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.evw__card h3 { margin: 12px 24px 0; font-size: clamp(1.2rem, 1.7vw, 1.5rem); font-weight: 500; line-height: 1.15; }
.evw__card p { margin: 0 24px; font-size: 1rem; line-height: 1.5; color: #4b5569; }

/* =========================================================
   4. Programme horaire — la feuille de service
   ========================================================= */
.evp { --rig-x: 68%; --rig-y: 12px; --rig-w: 70px; --rig-tilt: 0deg; padding-top: clamp(116px, 12vw, 172px); }
.evp .cone { --spread: 17deg; --throw: 820px; }
.evp__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(28px, 5vw, 84px); }
.evp__tx { display: grid; justify-items: start; gap: 18px; }
.evp__end { margin: 6px 0 0; font-size: 0.9375rem; color: rgb(255 255 255 / 0.62); }
.evp__sheet {
  padding: clamp(20px, 3vw, 40px);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  rotate: -0.8deg;
  box-shadow: 0 40px 70px -30px rgb(0 0 0 / 0.75);
}
.evp__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--ink);
}
.evp__head b { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.evp__head span { font-size: 1rem; color: #4b5569; }
.evp__rows { margin: 0; padding: 0; list-style: none; }
.evp .evp__row {
  display: grid;
  grid-template-columns: minmax(84px, 130px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 10px;
  border-bottom: 1px solid rgb(22 33 61 / 0.14);
  transition: opacity 0.7s ease, translate 0.9s var(--ease-out), background-color 0.4s ease, box-shadow 0.4s ease;
  transition-delay: calc(var(--i, 0) * 80ms + 60ms), calc(var(--i, 0) * 80ms + 60ms), 0s, 0s;
}
.evp .evp__row.is-on { background: rgb(226 174 12 / 0.17); }
.evp__t { font-size: clamp(1.8rem, 3.3vw, 2.9rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.evp__row h3 { margin: 0; font-size: clamp(1.0625rem, 1.6vw, 1.4rem); font-weight: 500; line-height: 1.15; }
.evp__row p { margin: 3px 0 0; font-size: 0.9375rem; line-height: 1.35; color: #5b6478; }
.evp__d { justify-self: end; padding: 4px 12px; border-radius: 14px; background: #eef1f6; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.evp__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0; padding-top: 14px; font-size: 0.9375rem; color: #5b6478; }

@media (max-width: 1000px) {
  .evp { --rig-x: 50%; }
  .evp__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .evp .evp__row { grid-template-columns: 72px minmax(0, 1fr); gap: 6px 14px; padding-inline: 4px; }
  .evp__d { grid-column: 2; justify-self: start; }
}

/* =========================================================
   5. Intervenant
   ========================================================= */
.evi__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(28px, 5vw, 88px); }
.evi__ph { position: relative; justify-self: center; width: min(100%, 440px); aspect-ratio: 1; margin: 0; }
.evi__disc { position: absolute; left: 4%; right: 4%; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: var(--gold); }
.evi__ph img { position: absolute; left: 50%; bottom: 0; width: 84%; height: auto; translate: -50% 0; }
.evi__tx { display: grid; justify-items: start; gap: 18px; }
.evi__who { display: grid; gap: 2px; margin: 0; }
.evi__who b { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 500; letter-spacing: -0.015em; }
.evi__who span { font-size: 1.0625rem; color: #4b5569; }

/* =========================================================
   6. Infos pratiques
   ========================================================= */
.evx__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(28px, 4vw, 52px); }
.evx__clock { display: grid; align-content: start; gap: 8px; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: var(--night); color: #fff; }
.evx__clock-t { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.evx__clock-d { margin: 0; font-size: 1rem; color: rgb(255 255 255 / 0.7); }
.evx__clock ul { display: grid; gap: 10px; margin: 16px 0 6px; padding: 0; list-style: none; }
.evx__clock li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-radius: 16px; background: rgb(255 255 255 / 0.08); }
.evx__clock li span { font-size: 0.9375rem; line-height: 1.3; color: rgb(255 255 255 / 0.86); }
.evx__clock li b { font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 300; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.evx__clock li.is-gmt { background: var(--gold); color: var(--ink); }
.evx__clock li.is-gmt span { color: var(--ink); }
.evx__clock-n { margin: 6px 0 0; font-size: 0.8125rem; color: rgb(255 255 255 / 0.55); }
.evx__list { display: grid; align-content: start; gap: 14px; margin: 0; padding: 0; list-style: none; }
.evx__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 22px 24px; border-radius: 24px; background: #fff; }
.evx__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgb(226 174 12 / 0.2); color: var(--ink); }
.evx__ic svg { width: 24px; height: 24px; stroke-width: 1.7; }
.evx__list h3 { margin: 0 0 4px; font-size: 1.25rem; font-weight: 500; }
.evx__list p { margin: 0; font-size: 1rem; line-height: 1.5; color: #4b5569; }
.evx__list b { font-weight: 600; color: var(--ink); }

/* =========================================================
   9. Autres dates
   ========================================================= */
.evo__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 36px; }
.evo__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.evo__card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
  border-radius: 26px;
  background: var(--wall);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.45s var(--ease-out), box-shadow 0.35s ease;
}
.evo__card:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -26px rgb(22 33 61 / 0.5); }
.evo__card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.evo__ph { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.evo__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.evo__tx { position: relative; display: grid; align-content: start; gap: 4px; padding: 18px 70px 22px 22px; }
.evo__tx em { font-style: normal; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ev-gold-ink); }
.evo__tx b { font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 500; line-height: 1.1; }
.evo__tx > span { font-size: 0.9375rem; line-height: 1.35; color: #4b5569; }
.evo__go { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); transition: transform 0.4s var(--ease-out); }
.evo__card:hover .evo__go { transform: rotate(-10deg); }
.evo__go svg { width: 17px; height: 17px; stroke-width: 1.8; }

/* =========================================================
   7 + 8. Formulaire d'inscription et confirmation
   ========================================================= */
.evd__card .diag__form[hidden] { display: none; }
.evs { display: grid; justify-items: start; gap: 14px; outline: none; }
.evs[hidden] { display: none; }
.evs__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.evs__ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.evs__t { margin: 6px 0 0; font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.evs__d { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: #4b5569; }
.evs__when { display: grid; gap: 2px; width: 100%; margin: 4px 0; padding: 16px 20px; border-radius: 18px; background: var(--wall); }
.evs__when b { font-size: 1.125rem; font-weight: 600; }
.evs__when span { font-size: 0.9375rem; color: #4b5569; }
.evs__add { display: grid; gap: 10px; width: 100%; }
.evs__add > p { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5b6478; }
.evs__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.evs__link {
  appearance: none;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgb(22 33 61 / 0.3);
  text-underline-offset: 5px;
  cursor: pointer;
}
.evs__link:hover { text-decoration-color: currentColor; }

/* =========================================================
   Tablette et mobile
   ========================================================= */
@media (max-width: 1000px) {
  .evb__grid,
  .evi__grid { grid-template-columns: minmax(0, 1fr); }
  .evb__ph { aspect-ratio: 16 / 10; }
  .evi__ph { width: min(70%, 360px); }
  .evw__cards,
  .evo__cards { grid-template-columns: minmax(0, 1fr); }
  .evw__card { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); align-content: center; column-gap: 0; padding-bottom: 0; }
  .evw__ph { grid-row: 1 / span 2; aspect-ratio: auto; min-height: 150px; }
  .evw__card h3 { align-self: end; margin: 20px 22px 0; }
  .evw__card p { align-self: start; margin: 6px 22px 20px; }
  .evo__card { grid-template-rows: none; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
  .evo__ph { aspect-ratio: auto; min-height: 140px; }
  .evx__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .evw__card,
  .evo__card { grid-template-columns: minmax(0, 1fr); }
  .evw__ph { grid-row: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .evo__ph { aspect-ratio: 16 / 9; min-height: 0; }
  .evw__card h3 { margin: 16px 20px 0; }
  .evw__card p { margin: 6px 20px 20px; }
  .evx__list li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}