/* ============================================================
   Réexpédition page — Phase 6
   Pixel-perfect rebrand of /reexpedition/
   ============================================================ */

/* ---------- Layout: break out of the .page-content > .container wrapper
              so that section backgrounds span the full viewport width.
   The layout passes content through .container with 15px padding, so we
   use the classic 100vw breakout technique while preserving scrollbars
   safety with overflow-x:clip on the closest stable container.
   ---------- */
.reexp-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.reexp-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ---------- Section background variants ---------- */
.reexp-section--white {
  background-color: var(--color-white);
}

.reexp-section--gray {
  background-color: var(--color-gray-50);
}

.reexp-section--navy {
  background-color: var(--color-navy);
  color: var(--color-white);
}

/* ---------- Section titles ---------- */
.reexp-section__title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--font-size-5xl); /* 45px */
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  text-transform: uppercase;
  line-height: var(--line-height-tight);
  margin: 0;
  padding-bottom: 34px;
  position: relative;
}

/* Centered teal underline (live: .underline-title — 159px, ~30px below) */
.reexp-section__title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 159px;
  height: 4px;
  background: var(--color-teal);
}

@media (max-width: 768px) {
  .reexp-section__title {
    font-size: 32px;
  }
}

/* ============================================================
   Section 1 — Comment ça marche ?
   ============================================================ */
.reexp-how {
  padding-top: 80px;
  padding-bottom: 16px;
}

/* Intro paragraph below the H2 (live: .delivery-info-desc) */
.reexp-how__lead {
  margin: 60px auto 0;
  max-width: 995px;
  text-align: center;
  color: var(--color-navy);
  line-height: 1.5;
}

/* Cross layout: 3 columns × 2 rows arranged around a central round image.
   row 1: step 1 (left)  | image (rowspan 2) | step 3 (right)
   row 2: step 2 (left)  |  (image cont.)    | step 4 (right) */
.reexp-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 48px;
  row-gap: 56px;
  margin-top: 64px;
}

.reexp-step--1 { grid-column: 1; grid-row: 1; }
.reexp-step--2 { grid-column: 1; grid-row: 2; }
.reexp-step--3 { grid-column: 3; grid-row: 1; }
.reexp-step--4 { grid-column: 3; grid-row: 2; }

.reexp-steps__diagram {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 320px;
  max-width: 100%;
  justify-self: center;
  align-self: center;
}

.reexp-steps__diagram img {
  width: 100%;
  height: auto;
  display: block;
}

.reexp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 360px;
}

.reexp-step--left {
  justify-self: end;
}

.reexp-step--right {
  justify-self: start;
}

/* Live: pink outline glyph, 100px, no circle background */
.reexp-step__icon {
  display: block;
  font-size: 100px;
  line-height: 1;
  color: var(--color-pink);
}

/* Live: navy title with a large faded number (data-order) hanging to the left */
.reexp-step__title {
  position: relative;
  display: inline-block;
  margin: 20px 0 0;
  padding-left: 40px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.75px;
  color: var(--color-navy);
  line-height: var(--line-height-tight);
}

.reexp-step__title::before {
  content: attr(data-order);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.78px;
  line-height: 1;
  color: var(--color-navy);
  opacity: 0.25;
}

.reexp-step__desc {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-navy);
}

/* Mobile — single column vertical stack, image first, then steps 1-4 */
@media (max-width: 900px) {
  .reexp-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 48px;
  }
  .reexp-steps__diagram {
    order: -1;
    width: 280px;
    height: auto;
  }
  .reexp-step {
    align-items: center;
    text-align: center;
  }
  .reexp-how {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* ============================================================
   Section 2 — CTA Créez votre adresse gratuitement
   ============================================================ */
.reexp-cta-mid {
  padding-top: 48px;
  padding-bottom: 48px;
  text-align: center;
}

.reexp-cta-mid__title {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  line-height: var(--line-height-tight);
  margin: 0;
}

@media (max-width: 768px) {
  .reexp-cta-mid__title {
    font-size: 24px;
  }
}

.reexp-cta-mid .reexp-btn {
  margin-top: 24px;
}

/* ============================================================
   Section 3 — Avantages "0 frais"
   ============================================================ */
.reexp-advantages {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #f1f2f5; /* live advantages bg */
}

.reexp-advantages__grid {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 32px;
  margin-top: 64px;
}

.reexp-advantage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.reexp-advantage__number {
  font-family: var(--font-heading);
  font-size: 90px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 2.81px;
  line-height: 1;
  color: var(--color-pink);
  opacity: 0.25; /* live: faded pink */
  display: block;
}

.reexp-advantage__label {
  margin-top: 40px;
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.75px; /* live: .advantages-item-desc — aère les lettres (aspect moins dense) */
  color: var(--color-navy);
  line-height: var(--line-height-tight);
}

@media (max-width: 768px) {
  .reexp-advantages {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .reexp-advantages__grid {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 48px;
  }
}

/* ============================================================
   Buttons (scoped to reexpedition page)
   ============================================================ */
.reexp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 5px;
  line-height: 1;
  border: 1px solid transparent;
  transition: opacity var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
}

.reexp-btn--pink {
  background-color: var(--color-pink);
  color: var(--color-white);
}

.reexp-btn--pink:hover {
  opacity: 0.9;
  color: var(--color-white);
}

.reexp-btn--ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.reexp-btn--ghost:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
}