/* ============================================================
   WEGAM — Composants d'interface.
   Repris du moodboard : bouton principal, secondaire, contact,
   icone, lien texte, indicateur de scroll, lignes.
   ============================================================ */

:root {
  --wg-vermillon: #fb0301;
  --wg-noir: #1A1A1A;
  --wg-gris: #E8E8E4;
  --wg-sable: #C7B8A6;
  --wg-bord: rgba(199, 184, 166, 0.28);
  --wg-bord-fort: rgba(232, 232, 228, 0.34);
}

/* ---------- bouton principal : plein vermillon ---------- */

.wg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4.5rem);
  min-width: clamp(14rem, 22vw, 20rem);
  padding: clamp(0.95rem, 1.6vw, 1.25rem) clamp(1.1rem, 1.8vw, 1.5rem);
  border: 0;
  border-radius: 2px;
  background: var(--wg-vermillon);
  color: var(--wg-noir);
  font-family: 'Neuepower', Arial, sans-serif;
  font-size: clamp(0.62rem, 0.8vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: none;
  transition: background 0.35s ease, color 0.35s ease;
}

.wg-btn:hover {
  background: var(--wg-gris);
}

.wg-btn__arrow {
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.wg-btn:hover .wg-btn__arrow {
  transform: translate(3px, -3px);
}

/* ---------- bouton secondaire : pilule contourée ---------- */

.wg-btn--pill {
  justify-content: center;
  min-width: 0;
  background: none;
  border: 1px solid var(--wg-bord-fort);
  border-radius: 999px;
  color: var(--wg-gris);
}

.wg-btn--pill:hover {
  background: var(--wg-gris);
  border-color: var(--wg-gris);
  color: var(--wg-noir);
}

/* ---------- bouton contact : pilule sombre + pastille ---------- */

.wg-btn--dot {
  justify-content: center;
  min-width: 0;
  background: rgba(232, 232, 228, 0.06);
  border: 1px solid var(--wg-bord);
  border-radius: 999px;
  color: var(--wg-gris);
}

.wg-btn--dot i {
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--wg-vermillon);
  transition: transform 0.35s ease;
}

.wg-btn--dot:hover i {
  transform: scale(1.35);
}

/* ---------- bouton icone : cercle vermillon ---------- */

.wg-btn--circle {
  justify-content: center;
  min-width: 0;
  width: clamp(3rem, 4.4vw, 4.4rem);
  height: clamp(3rem, 4.4vw, 4.4rem);
  padding: 0;
  gap: 0;
  border: 1px solid var(--wg-vermillon);
  border-radius: 50%;
  background: none;
  color: var(--wg-vermillon);
}

.wg-btn--circle:hover {
  background: var(--wg-vermillon);
  color: var(--wg-noir);
}

/* ---------- lien texte souligne ---------- */

.wg-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--wg-bord-fort);
  font-family: 'Neuepower', Arial, sans-serif;
  font-size: clamp(0.66rem, 0.86vw, 0.86rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wg-gris);
  text-decoration: none;
  cursor: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.wg-link:hover {
  color: var(--wg-vermillon);
  border-color: var(--wg-vermillon);
}

/* ---------- indicateur de scroll ---------- */

.wg-scroll {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  font-family: 'Neuepower', Arial, sans-serif;
  font-size: clamp(0.56rem, 0.72vw, 0.72rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(199, 184, 166, 0.78);
}

.wg-scroll__track {
  position: relative;
  width: clamp(4rem, 8vw, 8rem);
  height: 1px;
  background: var(--wg-bord-fort);
}

.wg-scroll__dot {
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--wg-vermillon);
  animation: wg-scroll-dot 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes wg-scroll-dot {
  0%   { right: 100%; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { right: 0; opacity: 0; }
}

/* ---------- lignes ---------- */

.wg-line {
  height: 1px;
  background: var(--wg-bord);
}

/* ligne avec numerotation : 01 ———— 06 */
.wg-line--num {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Neuepower', Arial, sans-serif;
  font-size: clamp(0.56rem, 0.72vw, 0.72rem);
  letter-spacing: 0.2em;
  color: rgba(199, 184, 166, 0.78);
}

.wg-line--num::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--wg-vermillon), var(--wg-bord));
}

/* ligne separateur + texte : WEGAM / WORK / 03 */
.wg-line--meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Neuepower', Arial, sans-serif;
  font-size: clamp(0.56rem, 0.72vw, 0.72rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(199, 184, 166, 0.78);
}

.wg-line--meta::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--wg-bord);
}

/* ---------- entete projet : 01 / 20 ———— TECH & INNOVATION ---------- */

.pj-hero__kicker {
  align-items: center;
}

.pj-hero__kicker span:first-child::after {
  content: '';
  display: inline-block;
  width: clamp(2.5rem, 7vw, 7rem);
  height: 1px;
  margin-left: 1.4rem;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--wg-vermillon), var(--wg-bord));
}


/* Bouton pose sur un fond clair : il inverse ses couleurs. */
.wg-btn--on-light,
.wg-btn--on-sand {
  background: #1A1A1A;
  color: #E8E8E4;
  border-color: #1A1A1A;
}

.wg-btn--on-light:hover,
.wg-btn--on-sand:hover {
  background: #fb0301;
  border-color: #fb0301;
  color: #E8E8E4;
}