/* Repère partagé des moments couverts par les formules photo et film. */
.wedding-coverage {
  --coverage-accent: #7153e8;
  --coverage-accent-2: #a254d2;
  --coverage-track: rgba(91, 79, 111, 0.15);
  width: 100%;
  box-sizing: border-box;
  margin: 0.9rem 0 1.05rem;
  padding: 0.78rem 0.72rem 0.68rem;
  border: 1px solid rgba(111, 83, 212, 0.16);
  border-radius: 15px;
  background: rgba(247, 244, 255, 0.78);
}

.wedding-coverage__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.72rem;
  text-align: left;
}

.wedding-coverage__heading > span {
  color: #746b82;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.wedding-coverage__heading strong {
  color: #4e367e;
  font-size: 0.64rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: right;
}

.wedding-coverage__timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.wedding-coverage__timeline li {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 0.38rem;
  color: #928a9a;
  font-size: 0.54rem;
  font-weight: 720;
  line-height: 1.08;
  text-align: center;
  transition: color 420ms ease;
}

.wedding-coverage__timeline li::before,
.wedding-coverage__timeline li::after {
  position: absolute;
  top: 0.3rem;
  z-index: 0;
  width: 50%;
  height: 3px;
  background: var(--coverage-track);
  content: "";
  transition: background 420ms ease, box-shadow 420ms ease;
}

.wedding-coverage__timeline li::before { left: 0; }
.wedding-coverage__timeline li::after { right: 0; }
.wedding-coverage__timeline li:first-child::before,
.wedding-coverage__timeline li:last-child::after { display: none; }

.wedding-coverage__timeline li span {
  position: relative;
  z-index: 2;
  display: block;
  width: 0.68rem;
  height: 0.68rem;
  box-sizing: border-box;
  border: 2px solid #d6d0dc;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px #fff;
  transition: border-color 420ms ease, background 420ms ease, box-shadow 420ms ease, transform 420ms ease;
}

.wedding-coverage__timeline li small {
  max-width: 8ch;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.wedding-coverage__timeline li small em {
  display: block;
  margin-top: 0.12rem;
  color: inherit;
  font-size: 0.86em;
  font-style: normal;
  font-weight: 820;
  opacity: 0.8;
}

.wedding-coverage__timeline li.is-covered { color: #493370; }
.wedding-coverage__timeline li.is-covered span {
  border-color: var(--coverage-accent);
  background: linear-gradient(135deg, var(--coverage-accent), var(--coverage-accent-2));
  box-shadow: 0 0 0 3px #fff, 0 3px 9px rgba(91, 61, 180, 0.25);
  transform: scale(1.08);
}
.wedding-coverage__timeline li.is-covered + li.is-covered::before,
.wedding-coverage__timeline li.is-covered:has(+ li.is-covered)::after {
  background: linear-gradient(90deg, var(--coverage-accent), var(--coverage-accent-2));
  box-shadow: 0 2px 7px rgba(95, 61, 182, 0.18);
}

.wedding-coverage__note {
  margin: 0.62rem 0 0;
  color: #60498d;
  font-size: 0.62rem;
  font-weight: 780;
  line-height: 1.25;
  text-align: center;
}

/* La couverture totale devient un état visuel distinct, pas seulement cinq points actifs. */
.wedding-coverage--complete {
  border-color: rgba(113, 83, 232, 0.3);
  background: linear-gradient(135deg, rgba(242, 238, 255, 0.96), rgba(253, 244, 255, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 7px 18px rgba(91, 61, 180, 0.08);
}

.wedding-coverage--complete .wedding-coverage__heading strong {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.26rem 0.5rem;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--coverage-accent), var(--coverage-accent-2));
  box-shadow: 0 4px 11px rgba(91, 61, 180, 0.2);
}

.wedding-coverage--complete .wedding-coverage__heading strong span {
  font-size: 0.7rem;
  line-height: 1;
}

.wedding-coverage--complete .wedding-coverage__timeline::before {
  position: absolute;
  top: 0.18rem;
  right: 9.5%;
  left: 9.5%;
  z-index: 0;
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coverage-accent), var(--coverage-accent-2));
  box-shadow: 0 4px 12px rgba(91, 61, 180, 0.25);
  content: "";
}

.wedding-coverage--complete .wedding-coverage__timeline::after {
  position: absolute;
  top: 0.18rem;
  left: 9.5%;
  z-index: 1;
  width: 14%;
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  content: "";
  animation: wedding-coverage-sweep 4.8s ease-in-out infinite;
}

.wedding-coverage--signature {
  margin: 0 0 1rem;
  border-color: rgba(111, 83, 212, 0.2);
  background: linear-gradient(135deg, #faf8ff, #fff8fc);
}

@keyframes wedding-coverage-sweep {
  0%, 24% { transform: translateX(-130%); opacity: 0; }
  32% { opacity: 0.9; }
  62% { transform: translateX(580%); opacity: 0.9; }
  70%, 100% { transform: translateX(580%); opacity: 0; }
}

@media (max-width: 420px) {
  .wedding-coverage { padding-inline: 0.45rem; }
  .wedding-coverage__heading { align-items: flex-start; }
  .wedding-coverage__heading strong { max-width: 56%; }
  .wedding-coverage__timeline li { font-size: 0.48rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wedding-coverage__timeline li,
  .wedding-coverage__timeline li::before,
  .wedding-coverage__timeline li::after,
  .wedding-coverage__timeline li span { transition: none; }
  .wedding-coverage--complete .wedding-coverage__timeline::after { display: none; animation: none; }
}