/* ============================================================
   EVENT CARDS — grille de spectacles

   Réglages relevés sur la source (viewport 1440) :
   - page blanche, section en 160px 60px, contenu borné à 1305
   - en-tête : titre à gauche, paragraphe à droite, alignés en haut
   - titre de section en Khand 80, capitales
   - grille de 3 colonnes de 422, gouttière 20 en colonne, 30 en rangée
   - carte : fond #f5f5f5, radius 20, padding 30
   - titre de carte en Khand 24 / 28.8, graisse 600, capitales
   - corps en Kanit 16 / 24, interlettrage -0.32
   - bouton : pilule noire, radius 100, padding 16 30, texte Kanit 18
     graisse 500, plus une pastille de 8px en #ededed
   - visuel de la source en 1.66 paysage, radius 20

   Écart assumé : le visuel passe en 3 / 4 portrait, parce que ce sont
   des affiches et qu'un recadrage en paysage n'en garderait qu'une
   bande. La carte devient plus haute, ce qui est le format habituel
   d'une annonce de spectacle. Le token --poster-ratio revient au
   paysage de la source si besoin.

   Fonts : Khand et Kanit, celles de la source, toutes deux sur
   Google Fonts.
   ============================================================ */

.iv-event-module {
  --page: #0c0c0c;
  --card: #f5f5f5;
  --ink: #000000;
  --ink-soft: #4a4a4a;
  --line: #dedede;

  /* Hors carte, sur le fond noir, l'encre s'inverse. */
  --ink-out: #f5f3f1;
  --ink-out-soft: rgba(245, 243, 241, 0.6);
  --dot: #ededed;

  --radius: 20px;
  --card-pad: 30px;
  --poster-ratio: 3 / 4;   /* 1.66 / 1 pour le paysage de la source */
  --grid-gap: 20px;
}

.iv-event-module.iv-grain { --iv-grain-opacity: var(--iv-grain-opacity-card); background-color: var(--iv-black); }

.iv-event-module, .iv-event-module * { box-sizing: border-box; }

.iv-event-module { background: var(--page); color: var(--ink); font-family: "Instrument Sans", Arial, sans-serif; }

.ec-section {
  padding: clamp(70px, 11vw, 160px) 0;
}

/* Seul l'en-tête reste borné. Le carrousel prend toute la largeur, sinon
   les cartes s'arrêtent net au milieu de l'écran sur grand écran. */
.ec-inner {
  container-type: inline-size;
  max-width: 1305px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 60px);
}

/* ---------- en-tête ---------- */

.ec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(48px, 6vw, 96px);
}

.ec-title {
  margin: 0;
  font-family: "Instrument Sans", Impact, sans-serif;
  font-weight: 700;
  font-size: clamp(46px, 6vw, 80px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink-out);
}

.ec-intro {
  margin: 10px 0 0;
  max-width: 320px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-out-soft);
}

/* ---------- carrousel ---------- */

.ec-viewport {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.ec-viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* Les cartes sont en absolu et positionnées une par une par le script.
   Pas de flex, pas de gap, pas de clones : chaque carte calcule sa
   propre position et se replace toute seule quand elle sort du cadre. */
.ec-track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ec-card {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  border-radius: var(--radius);
  background: var(--card);
  will-change: transform;
}

/* Le survol ne peut pas toucher au transform de la carte, il est piloté
   par le script. Le retour visuel passe par l'affiche. */
.ec-card .ec-poster img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.ec-card:hover .ec-poster img { transform: scale(1.03); }

/* ---------- ligne de méta ---------- */

.ec-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.ec-tag {
  padding: 7px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 15px;
  line-height: 1.4;
}

.ec-date {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}

.ec-tag, .ec-date { white-space: nowrap; }

.ec-date svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* ---------- contenu ---------- */

.ec-name {
  margin: 0 0 24px;
  font-family: "Instrument Sans", Impact, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  text-transform: uppercase;
}

.ec-poster {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: var(--poster-ratio);
  overflow: hidden;
  border-radius: var(--radius);
  background: #ece9e4;
}

/* Sans ça, un clic-glisser sur l'affiche lance le glisser-déposer natif
   du navigateur : image fantôme sous le curseur et pictogramme d'interdit. */
.ec-poster img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* La description ne fait pas la même hauteur d'une carte à l'autre.
   La marge basse automatique pousse le bouton en pied de carte, ce qui
   aligne les trois boutons sur la même ligne. */
.ec-text {
  margin: 26px 0 auto;
  padding-bottom: 28px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
}

/* ---------- bouton ---------- */

/* Au survol, la pastille se dilate jusqu'à remplir la pilule et le bouton
   s'inverse. Le disque de départ fait 100px et n'est agrandi que six fois,
   plutôt que de partir des 8px visibles : un facteur trop grand sur un
   élément minuscule donne un bord flou à l'arrivée.
   Tout se joue sur transform et color, rien sur la géométrie. */
.ec-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  align-self: flex-start;
  padding: 16px 30px;
  border-radius: 100px;
  background: var(--ink);
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.ec-cta::before {
  content: "";
  position: absolute;
  z-index: 0;
  /* Centre aligné sur celui de la pastille : 30px de padding plus la
     moitié des 8px du point. Sans ça le remplissage naît à côté du point
     au lieu d'en sortir, et le décalage se voit sur les premières frames. */
  top: 50%;
  right: 34px;
  width: 100px;
  height: 100px;
  margin: -50px -50px 0 0;
  border-radius: 100%;
  background: var(--ink-out);
  transform: scale(0);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.ec-cta:hover::before,
.ec-cta:focus-visible::before { transform: scale(6); }

.ec-cta-label {
  position: relative;
  z-index: 2;
  transition: color 0.3s ease 0.08s;
}

.ec-cta::after {
  content: "";
  position: relative;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: var(--dot);
  transition: background-color 0.3s ease 0.08s;
}

.ec-cta:hover .ec-cta-label,
.ec-cta:focus-visible .ec-cta-label { color: var(--ink); }

.ec-cta:hover::after,
.ec-cta:focus-visible::after { background: var(--ink); }

/* ---------- flèches ---------- */

.ec-carousel { position: relative; }

.ec-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-top: -27px;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.ec-arrow svg { width: 22px; height: 22px; }
.ec-arrow:hover { transform: scale(1.08); }
.ec-arrow--prev { left: clamp(12px, 2vw, 28px); }
.ec-arrow--next { right: clamp(12px, 2vw, 28px); }

/* Pointeur fin uniquement : sur écran tactile le glissement suffit. */
@media (min-width: 1080px) and (hover: hover) and (pointer: fine) {
  .ec-arrow { display: flex; }
}

/* ---------- affiche agrandie ---------- */

.ec-poster img { cursor: zoom-in; }

.ec-lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 4vw, 56px);
  background: rgba(6, 6, 6, 0.92);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.ec-lightbox[hidden] { display: none; }
.ec-lightbox.is-open { opacity: 1; }

.ec-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  transform: scale(0.97);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ec-lightbox.is-open img { transform: scale(1); }

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  .ec-head {
    flex-direction: column;
    gap: 20px;
  }

  .ec-intro { max-width: none; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ec-cta::before, .ec-cta::after, .ec-cta-label,
  .ec-card .ec-poster img, .ec-arrow, .ec-lightbox, .ec-lightbox img { transition: none; }
  .ec-card:hover .ec-poster img { transform: none; }
}

.iv-event-module { min-width: 0; overflow: hidden; }
.iv-transition .iv-event-module .ec-title { color: var(--ink-out); font-family: var(--iv-font-text); font-weight: 900; font-size: clamp(2.8rem,6.4vw,7rem); line-height:1; }
.ec-title__line { display: block; white-space: nowrap; }
/* Une ligne sur PC, dimensionnée sur son conteneur plutôt que la fenêtre. */
@media (min-width: 701px) {
  .iv-transition .iv-event-module .ec-title { font-size: clamp(1rem,8cqi,7rem); white-space: nowrap; }
  .ec-title__line { display: inline; }
}
.iv-transition .iv-event-module .ec-name { font-family: var(--iv-font-text); font-weight: 750; font-size:24px; line-height:1.2; margin:0; }
@media (max-width: 600px) {
  .iv-event-module { --card-pad: 16px; --radius: 16px; }
  .ec-meta { gap: 8px; margin-bottom: 12px; }
  .ec-tag { padding: 5px 9px; font-size: 11px; }
  .ec-date { gap: 5px; font-size: 11px; }
  .ec-date svg { width: 14px; height: 14px; }
  .iv-transition .iv-event-module .ec-name { font-size: 18px; }
  .ec-text { margin-top: 14px; padding-bottom: 14px; font-size: 13px; line-height: 1.4; }
  .ec-cta { gap: 12px; padding: 10px 14px; font-size: 13px; }
}