/* ══════════════════════════════════════════════════════════════
   QUATRE V2 — SEGMENT CTA + FOOTER (fond rouge, maquette 22:2328 / 22:2336)
   ═════════════════════════════════════════════════════════════ */

/* ── Segment « Parlons de votre projet » ── */
.segment {
  background-color: var(--bg-brand);
  padding: var(--section-gap) var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 3.7vw, 64px);
}

.segment-logo {
  width: clamp(96px, 8.4vw, 146px);
  color: var(--black);
}

.segment-logo svg,
.segment-logo img {
  width: 100%;
  height: auto;
}

.segment-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(var(--wide-w), 100%);
  text-align: center;
}

.segment-title {
  font-family: var(--font-serif);
  font-size: var(--title-size);
  line-height: var(--title-lh);
  color: var(--black);
}

/* ── Footer ── */
.footer {
  background-color: var(--bg-brand);
  padding: 24px var(--pad-x) 24px;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 3.7vw, 64px);
}

/* Le contenu du footer s'aligne sur la même colonne que les tiles */
.ft-bar,
.ft-social,
.ft-bottom {
  width: min(var(--content-w), 100%);
  margin-inline: auto;
}

.ft-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 52px;
  border-radius: 9999px;
  background-color: var(--night);
  color: var(--white);
  font-size: 16px;
  line-height: 24px;
}

.ft-bar-label {
  flex: 1 0 0;
  min-width: 1px;
}

.ft-bar-value {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
}

.ft-bar-sub {
  color: var(--grey-400);
}

.ft-bar-value a {
  position: relative;
  color: var(--white);
  text-decoration: none;
  padding-bottom: 2px;
  align-self: flex-start;
}

/* Soulignement ANIMÉ (même geste que l'email du drawer contact) :
   la ligne entre par la GAUCHE au survol et sort par la DROITE au
   départ — un balayage continu, jamais un aller-retour. */
.ft-bar-value a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}

.ft-bar-value a:hover::after,
.ft-bar-value a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .ft-bar-value a::after {
    transition: none;
  }
}

.ft-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.ft-social a {
  display: inline-flex;
  width: 32px;
  height: 32px;
  color: var(--black);
  transition: opacity 0.25s ease;
}

.ft-social a:hover {
  opacity: 0.6;
}

.ft-social svg,
.ft-social img {
  width: 100%;
  height: 100%;
}

.ft-bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  line-height: 16px;
  color: var(--black);
}

.ft-copy {
  flex: 1 0 0;
  min-width: 1px;
}

.ft-year {
  flex: 1 0 0;
  min-width: 1px;
  text-align: right;
}

.ft-legal {
  display: flex;
  gap: 16px;
  white-space: nowrap;
}

.ft-legal a:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .ft-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 28px;
    border-radius: 24px;
  }

  .ft-bottom {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .ft-legal {
    flex-wrap: wrap;
    white-space: normal;
  }
}