
.kyp2026-contact-intro {
  --kyp-contact-bg: var(--kyp2026-bg, #121217);
  --kyp-contact-surface: var(--kyp2026-surface, #1c1c23);
  --kyp-contact-surface-2: var(--kyp2026-surface-2, #262633);
  --kyp-contact-text: var(--kyp2026-text, #F6F2EA);
  --kyp-contact-muted: var(--kyp2026-muted, #B8B3A8);
  --kyp-contact-border: var(--kyp2026-border, rgba(255,255,255,.15));
  --kyp-contact-a1: var(--kyp2026-accent-1, #FFC400);
  --kyp-contact-a2: var(--kyp2026-accent-2, #006FCF);
  color: var(--kyp-contact-text);
  background: transparent !important;
  padding: clamp(76px, 8vw, 126px) 0 clamp(44px, 6vw, 82px);
}

.kyp2026-contact-intro__wrap { width: min(1680px, calc(100% - 44px)); margin-inline: auto; }
.kyp2026-contact-intro__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(340px, .64fr); gap: clamp(34px, 6vw, 98px); align-items: center; }

.kyp2026-contact-intro__kicker,
.kyp2026-contact-intro__panel-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--kyp-contact-a1); font-size: .78rem; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }
.kyp2026-contact-intro__kicker::before,
.kyp2026-contact-intro__panel-kicker::before { content: ""; width: 30px; height: 2px; background: linear-gradient(90deg, var(--kyp-contact-a2), var(--kyp-contact-a1)); }

.kyp2026-contact-intro h1 { max-width: 980px; margin: 0; font-size: clamp(2.8rem, 6vw, 6.4rem); line-height: .9; letter-spacing: -.07em; text-transform: uppercase; }
.kyp2026-contact-intro__text { max-width: 820px; margin: 24px 0 0; color: var(--kyp-contact-muted); font-size: clamp(1.03rem, 1.25vw, 1.23rem); line-height: 1.75; }

.kyp2026-contact-intro__actions { margin-top: 28px; }
.kyp2026-contact-intro__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; color: #111 !important; background: linear-gradient(135deg, color-mix(in srgb, var(--kyp-contact-a1) 88%, #fff), var(--kyp-contact-a1)); font-weight: 950; text-transform: uppercase; text-decoration: none !important; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%, 0 10px); }

.kyp2026-contact-intro__switch { margin-top: 20px; display: inline-flex; }
.kyp2026-contact-intro__switch .kyp2026-ambiance-switch { transform: scale(.95); transform-origin: left center; }

.kyp2026-contact-intro__panel { position: relative; padding: 30px 28px 30px 34px; border: 1px solid color-mix(in srgb, var(--kyp-contact-border) 88%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--kyp-contact-surface) 84%, transparent), color-mix(in srgb, var(--kyp-contact-surface-2) 66%, transparent)), repeating-linear-gradient(125deg, rgba(255,255,255,.010) 0 1px, transparent 1px 18px); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); box-shadow: 0 16px 42px rgba(0,0,0,.14); }
.kyp2026-contact-intro__panel::before { content: ""; position: absolute; left: 14px; top: 18px; bottom: 18px; width: 3px; background: linear-gradient(180deg, var(--kyp-contact-a1), var(--kyp-contact-a2)); }
.kyp2026-contact-intro__panel p { color: var(--kyp-contact-muted); line-height: 1.7; }
.kyp2026-contact-intro__panel ul { list-style: none; margin: 22px 0 0; padding: 0 0 0 14px; display: grid; gap: 12px; }
.kyp2026-contact-intro__panel li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--kyp-contact-border) 80%, transparent); background: color-mix(in srgb, var(--kyp-contact-bg) 22%, transparent); }
.kyp2026-contact-intro__panel strong { color: var(--kyp-contact-a1); text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; }
.kyp2026-contact-intro__panel span { color: var(--kyp-contact-text); }

.kyp2026-contact-intro-admin-card { max-width: 1240px; margin: 18px 0; padding: 22px; background: #fff; border: 1px solid #dcdcde; border-radius: 12px; }
.kyp2026-contact-intro-admin-field { display: grid; grid-template-columns: 240px minmax(280px, 1fr); align-items: start; gap: 14px; margin: 14px 0; }
.kyp2026-contact-intro-admin-field span { padding-top: 7px; font-weight: 700; }
.kyp2026-contact-intro-admin-field input,
.kyp2026-contact-intro-admin-field textarea { width: 100%; max-width: 850px; }
.kyp2026-contact-intro-admin-check { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 14px 0; }

@media (max-width: 1050px) {
  .kyp2026-contact-intro__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .kyp2026-contact-intro__wrap { width: min(100% - 24px, 1680px); }
  .kyp2026-contact-intro h1 { font-size: clamp(2.2rem, 12vw, 4rem); }
  .kyp2026-contact-intro__panel { clip-path: none; }
  .kyp2026-contact-intro__panel li { grid-template-columns: 1fr; }
}


/* v0.1.1 — petites icônes premium intégrées */
.kyp2026-contact-intro__items {
  list-style: none;
  margin: 22px 0 0 !important;
  padding: 0 0 0 14px !important;
  display: grid;
  gap: 12px;
}

.kyp2026-contact-intro__item {
  --kyp-contact-icon: var(--kyp-contact-a1);
  position: relative;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center;
  padding: 13px 14px !important;
  border: 1px solid color-mix(in srgb, var(--kyp-contact-border) 80%, transparent);
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--kyp-contact-bg) 28%, transparent),
      color-mix(in srgb, var(--kyp-contact-surface) 42%, transparent)
    );
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: transform .22s ease, border-color .22s ease, filter .22s ease;
}

.kyp2026-contact-intro__item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--kyp-contact-icon) 44%, var(--kyp-contact-border));
  filter: brightness(1.04);
}

.kyp2026-contact-intro__item--phone {
  --kyp-contact-icon: var(--kyp-contact-a1);
}

.kyp2026-contact-intro__item--email {
  --kyp-contact-icon: color-mix(in srgb, #de3163 78%, var(--kyp-contact-a2));
}

.kyp2026-contact-intro__item--address {
  --kyp-contact-icon: var(--kyp-contact-a2);
}

.kyp2026-contact-intro__item--hours {
  --kyp-contact-icon: color-mix(in srgb, var(--kyp-contact-text) 84%, var(--kyp-contact-a2));
}

.kyp2026-contact-intro__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--kyp-contact-icon) 44%, transparent);
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--kyp-contact-icon) 16%, transparent),
      transparent 68%
    ),
    color-mix(in srgb, var(--kyp-contact-surface-2) 72%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--kyp-contact-icon) 10%, transparent),
    0 0 18px color-mix(in srgb, var(--kyp-contact-icon) 15%, transparent);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.kyp2026-contact-intro__icon svg {
  width: 21px;
  height: 21px;
  display: block;
  fill: none;
  stroke: var(--kyp-contact-icon);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kyp2026-contact-intro__item-content {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.kyp2026-contact-intro__item-content strong {
  color: var(--kyp-contact-icon) !important;
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .12em;
}

.kyp2026-contact-intro__item-content span {
  color: var(--kyp-contact-text) !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* neutralise l'ancien style li si chargé avant */
.kyp2026-contact-intro__panel ul.kyp2026-contact-intro__items li {
  grid-template-columns: 44px minmax(0, 1fr) !important;
}

.kyp2026-contact-intro__panel ul.kyp2026-contact-intro__items li strong,
.kyp2026-contact-intro__panel ul.kyp2026-contact-intro__items li span {
  display: initial;
}

@media (max-width: 760px) {
  .kyp2026-contact-intro__item {
    clip-path: none;
  }
}


/* v0.1.2 — respiration libellé / valeur dans la carte contact */
.kyp2026-contact-intro__item {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  column-gap: 18px !important;
}

.kyp2026-contact-intro__item-content {
  display: flex !important;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

.kyp2026-contact-intro__item-content strong {
  flex: 0 0 auto;
  min-width: 86px;
}

.kyp2026-contact-intro__item-content span {
  flex: 1 1 auto;
}

@media (max-width: 760px) {
  .kyp2026-contact-intro__item-content {
    display: grid !important;
    gap: 5px;
  }

  .kyp2026-contact-intro__item-content strong {
    min-width: 0;
  }
}
