/* CSS spécifique à la page Édition */

/* Hero édition */
.hero-edition {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg,#021b55 0%, #0032A0 45%, #ff8b1a 115%);
  color: #fff;
}
.hero-edition .hero-fond { position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(circle at 18% 30%, rgba(255,255,255,.18), transparent 60%),
  radial-gradient(circle at 80% 70%, rgba(255,255,255,.12), transparent 65%);
  mix-blend-mode: screen; }

/* Contenu du hero (grille texte/visuel) */
.hero-edition .hero-contenu { position:relative; display:grid; grid-template-columns: 1.05fr .95fr; gap:50px; align-items:center; }
@media (max-width:900px){ .hero-edition .hero-contenu { grid-template-columns:1fr; gap:40px; } }
.hero-edition .bloc-texte { position:relative; }
.hero-edition .titre-impact { font-size:clamp(54px,8vw,120px); line-height:.88; margin:16px 0 10px; font-weight:900; text-transform:uppercase; }
.hero-edition .titre-impact .stroke { color:transparent; -webkit-text-stroke: 2px #fff; }
.hero-edition .baseline { font-size:clamp(16px,1.5vw,22px); margin:0 0 28px; font-weight:500; }
.hero-chiffres { display:flex; flex-wrap:wrap; gap:28px; margin:0 0 34px; }
.hero-chiffres .hc { display:flex; flex-direction:column; }
.hero-chiffres .hc b { font-size:44px; line-height:1; font-style:italic; }
.hero-chiffres .hc span { font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.8; font-weight:600; }

/* Hero image (remplacement grille) */
.hero-edition .hero-image-wrap { position:relative; border-radius:28px; overflow:hidden; box-shadow:0 25px 60px -18px rgba(0,0,0,.45), 0 6px 18px -4px rgba(0,0,0,.35); }
.hero-edition .hero-image { width:100%; height:480px; object-fit:cover; display:block; filter:brightness(.9) saturate(1.15); }
@media (max-width:900px){ .hero-edition .hero-image { height:360px; } }
.hero-edition .hero-image-overlay { position:absolute; inset:0; background: linear-gradient(135deg, rgba(0,50,160,.25), rgba(255,131,0,.25)); mix-blend-mode:overlay; }



/* Timeline horizontale (édition) */
#timeline .timeline-hz {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
  padding: 24px 0 8px;
}

#timeline .timeline-hz::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 28px; /* centre visuel pour ligne épaisse */
  height: 4px;
  background: linear-gradient(90deg, var(--ccl-blue), var(--ccl-orange));
  opacity: 0.3;
}

#timeline .timeline-item {
  position: relative;
  padding-top: 40px;
}

#timeline .ti-dot {
  position: absolute;
  top: -2px; /* centre de la pastille = 28px */
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #5aa7ff;
  box-shadow: 0 0 0 4px rgba(90,167,255,0.25);
}

#timeline .timeline-item:nth-child(2) .ti-dot {
  background: #cb956e;
  box-shadow: 0 0 0 4px #cb956e50;
}

#timeline .timeline-item:nth-child(3) .ti-dot {
  background: var(--ccl-orange);
  box-shadow: 0 0 0 4px rgba(255,131,0,0.25);
}

#timeline .ti-jour {
  margin: 0 0 6px 0;
  font-size: clamp(1.1rem, 1.1rem + 0.2vw, 1.35rem);
}

#timeline .ti-desc {
  margin: 0;
  line-height: 1.5;
}

#timeline .timeline-lien-centre {
  text-align: center;
  margin-top: 16px;
}

@media (max-width: 800px) {
  #timeline .timeline-hz {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  #timeline .timeline-hz::before {
    left: 8px;
    right: auto;
    width: 4px;
    height: calc(100% - 16px);
    top: 16px; /* centre visuel pour ligne épaisse verticale */
    background: linear-gradient(180deg, var(--ccl-orange), var(--ccl-blue));
  }
  #timeline .timeline-item {
    padding-left: 32px;
    padding-top: 0;
  }
  #timeline .ti-dot {
    left: 0;
    top: 8px; /* centre de la pastille = 16px */
  }
}



.section-soiree { background: linear-gradient(135deg,var(--ccl-blue) 0%,  #28008f 55%,  #3e0b65 100%); }
/* Soirée layout: texte à gauche, image à droite */
.soiree-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
}
.texte-soiree { color: #fff; }
.soiree-image-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.soiree-image {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .soiree-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .soiree-image { height: 300px; }
}