/* Un contact à part entière, sans hériter de l’ancien bandeau .contact. */
.project-contact {
  position: relative;
  isolation: isolate;
  width: calc(100% - 11vw);
  max-width: 1440px;
  margin: 20px auto 80px;
  padding: clamp(30px, 4vw, 62px);
  border: 1px solid #8c8cff40;
  border-radius: 26px;
  background: radial-gradient(ellipse at 0 20%, #7160ff18, transparent 58%), var(--surface-alt);
  scroll-margin-top: 25px;
}
.project-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(35px, 5vw, 82px);
  align-items: start;
}
.project-contact-grid > * { min-width: 0; }
.project-contact-intro { padding-top: 9px; }
.project-contact .eyebrow { margin-bottom: 25px; font-size: 10px; }
.project-contact h2.depth-title {
  font-size: clamp(36px, 3.7vw, 52px);
  line-height: 1.1;
  margin: 12px 0 30px;
}
.project-contact h2 > span { display: block; }
.project-contact .contact-title-accent { color: #a79aff; }
.project-contact-lead {
  max-width: 390px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}
.project-contact-direct { margin-top: 21px; }
.project-contact-direct p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.project-contact-direct a {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  max-width: 100%;
  padding-block: 3px;
  color: var(--text);
  border-bottom: 1px solid #8c8cff65;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.project-contact-direct a > span { color: var(--brand); }
.project-contact-direct a:hover { color: var(--brand); }
.project-chat-scene {
  position: relative;
  width: min(100%, 315px);
  height: 205px;
  margin: 30px 0 13px;
  perspective: 800px;
  pointer-events: none;
}
.project-chat-scene::before {
  content: '';
  position: absolute;
  inset: 12px -16px -10px;
  background: radial-gradient(ellipse, #8c72ff24, transparent 66%);
}
.project-chat-floor {
  position: absolute;
  left: 37px;
  bottom: 1px;
  width: 200px;
  height: 19px;
  border-radius: 50%;
  background: #07091855;
  filter: blur(12px);
}
.project-chat-front,
.project-chat-back {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: 1px solid #bcb0ff9c;
  transform-style: preserve-3d;
}
.project-chat-front {
  z-index: 2;
  top: 48px;
  left: 20px;
  width: 172px;
  height: 117px;
  border-radius: 30px;
  background: linear-gradient(140deg, #b7a2ff 0%, #8770ef 48%, #5c48cd 100%);
  box-shadow: inset 0 2px 1px #ffffff59, 5px 5px 0 #6750b7, 9px 10px 0 #3c2d7f, 16px 24px 21px -8px #07071969;
  transform: rotateY(-16deg) rotateZ(-11deg);
}
.project-chat-front::after {
  content: '';
  position: absolute;
  left: 29px;
  bottom: -17px;
  width: 31px;
  height: 30px;
  background: linear-gradient(135deg, #8a70ed, #6350ce);
  clip-path: polygon(0 0, 100% 0, 8% 100%);
}
.project-chat-front > i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f7f3ff;
  box-shadow: 1px 2px 0 #5f4a9d73;
}
.project-chat-back {
  z-index: 1;
  top: 16px;
  right: 9px;
  flex-direction: column;
  gap: 10px;
  width: 126px;
  height: 86px;
  border-radius: 23px;
  background: linear-gradient(135deg, #514878, #282647);
  box-shadow: inset 0 1px #c6baff35, 5px 6px 0 #15172e, 12px 17px 18px -8px #03061755;
  transform: rotateY(-18deg) rotateZ(11deg);
}
.project-chat-back::after {
  content: '';
  position: absolute;
  right: 23px;
  bottom: -15px;
  width: 23px;
  height: 23px;
  background: #2a284a;
  clip-path: polygon(0 0, 100% 0, 93% 100%);
}
.project-chat-back > i {
  display: block;
  width: 60px;
  height: 5px;
  border-radius: 5px;
  background: #c6bbf277;
}
.project-chat-back > i:last-child { width: 42px; align-self: flex-start; margin-left: 32px; }
.project-chat-spark {
  position: absolute;
  top: 160px;
  right: 43px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(135deg, #c7b6ff, #7759d9);
  box-shadow: 3px 4px 0 #342558;
  transform: rotate(-17deg);
}
.project-contact-form {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: linear-gradient(140deg, #ffffff03, transparent), var(--surface);
  box-shadow: 0 10px 30px -20px #03051670;
}
.project-contact .contact-types { min-width: 0; padding: 0; margin: 0; border: 0; }
.project-contact .contact-website { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
.project-contact .contact-types legend {
  padding: 0;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.7;
}
.project-contact .contact-required { color: var(--brand); }
.contact-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.project-contact .contact-type { position: relative; display: block; min-width: 0; cursor: pointer; }
.project-contact .contact-type > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  clip-path: inset(50%);
}
.project-contact .contact-type > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 45px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  transition: background .2s, border-color .2s, color .2s;
}
.project-contact .contact-type > span::before {
  content: '';
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .75;
}
.project-contact .contact-type:hover > span { border-color: var(--brand); color: var(--text); }
.project-contact .contact-type > input:checked + span { border-color: #a89aff87; background: var(--brand-solid); color: #fff; }
.project-contact .contact-type > input:checked + span::before { opacity: 1; background: #fff; border-color: #fff; box-shadow: inset 0 0 0 3px var(--brand-solid); }
.project-contact .contact-type > input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }
.contact-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.project-contact .contact-field { display: grid; gap: 9px; min-width: 0; }
.project-contact .contact-field > label { font-size: 12px; line-height: 1.6; color: var(--text); font-weight: 550; }
.project-contact .contact-optional { color: var(--muted); font-weight: 400; font-size: 11px; }
.project-contact .contact-field :is(input, select, textarea) {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  transition: border-color .2s, box-shadow .2s;
}
.project-contact .contact-field :is(input, select) { min-height: 46px; }
.project-contact .contact-field select { padding-right: 26px; }
.project-contact .contact-field textarea { min-height: 135px; resize: vertical; }
.project-contact .contact-field :is(input, textarea)::placeholder { color: var(--muted); opacity: .7; }
.project-contact .contact-field :is(input, select, textarea):hover { border-color: #8c8cff65; }
.project-contact .contact-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }
.project-contact .contact-field :is(input, textarea):user-invalid { border-color: #d98baf; }
.contact-form-bottom { display: grid; gap: 13px; }
.project-contact .contact-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 51px;
  padding: 14px 17px;
  border: 1px solid #baadff66;
  border-radius: 9px;
  background: linear-gradient(135deg, #9580ff, #6a5cff 55%, #5141e9);
  box-shadow: inset 0 1px #ffffff50, 0 8px 22px -8px #4a36dc55;
  color: #fff;
  font-size: 13px;
  font-weight: 550;
  text-align: left;
  transition: translate .2s, box-shadow .2s;
}
.project-contact .contact-submit > span:last-child { font-size: 18px; line-height: 1; }
.project-contact .contact-submit:hover { translate: 0 -2px; box-shadow: inset 0 1px #ffffff50, 0 11px 26px -8px #4a36dc77; }
.project-contact .contact-form-help { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.9; }
.project-contact .contact-form-help a { text-decoration: underline; text-underline-offset: 3px; }
.project-contact .contact-feedback {
  min-width: 0;
  padding: 19px;
  border: 1px solid #8c8cff55;
  border-radius: 12px;
  background: #6a5cff0b;
}
.project-contact .contact-feedback[hidden] { display: none !important; }
.project-contact .contact-feedback > p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.8; font-weight: 550; }
.project-contact .contact-feedback[data-state=success] { border-color: #a49aff88; background: #7660ff1a; }
.project-contact .contact-feedback[data-state=error] { border-color: #d98baf80; background: #a3447010; }
.project-contact .contact-feedback[data-state=pending] > p { color: var(--muted); }
.project-contact .contact-submit[aria-busy=true] { opacity: .85; cursor: progress; }
.project-contact .contact-field :is(input, select, textarea):disabled { opacity: .7; cursor: progress; }
.project-contact .contact-type > input:disabled + span { cursor: progress; opacity: .7; }
.project-contact .contact-message-preview {
  max-width: 100%;
  max-height: 330px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  line-height: 1.85;
  tab-size: 2;
}
.project-contact .contact-message-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
.project-contact :is(.contact-send-link, .contact-copy) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 43px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  cursor: pointer;
}
.project-contact .contact-send-link { background: var(--brand-solid); color: #fff; border-color: #a89aff70; }
.project-contact :is(.contact-send-link, .contact-copy):hover { border-color: var(--brand); box-shadow: 0 3px 12px -6px #6a5cff66; }
.project-contact :is(.contact-submit, .contact-send-link, .contact-copy):focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.project-contact :is(.contact-submit, .contact-copy):disabled { opacity: .65; cursor: default; translate: none; }
body[data-theme=light] .project-contact { background: radial-gradient(ellipse at 0 20%, #bbaaff2e, transparent 58%), #f1f0f8; border-color: #7767c938; }
body[data-theme=light] .project-contact .contact-title-accent { color: #6550df; }
body[data-theme=light] .project-contact-form { background: #ffffffdf; box-shadow: 0 10px 30px -20px #6551863b; }
body[data-theme=light] .project-chat-back { background: linear-gradient(135deg, #d9cef7, #b0a1db); border-color: #a28cca; box-shadow: inset 0 1px #fff9, 5px 6px 0 #b3a6d6, 12px 17px 18px -8px #5e40752e; }
body[data-theme=light] .project-chat-back::after { background: #b4a6de; }
body[data-theme=light] .project-chat-back > i { background: #77649d99; }
body[data-theme=light] .project-chat-floor { background: #7563bd2e; }
body[data-theme=light] .project-contact .contact-feedback { background: #f3f0ff; }
@media (max-width: 1100px) {
  .project-contact { padding: 33px; }
  .project-contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 35px; }
  .project-contact h2.depth-title { font-size: clamp(32px, 4.1vw, 44px); }
  .project-contact-lead { font-size: 14px; }
  .project-contact-form { padding: 23px; gap: 21px; }
  .contact-field-row { grid-template-columns: 1fr; gap: 21px; }
  .project-contact .contact-type > span { padding-inline: 10px; font-size: 10px; }
}
@media (max-width: 850px) {
  .project-contact { margin-bottom: 60px; }
  .project-contact-grid { grid-template-columns: 1fr; gap: 31px; }
  .project-contact-intro { position: relative; padding: 0 210px 0 0; min-height: 220px; }
  .project-contact h2.depth-title { font-size: clamp(36px, 5.7vw, 48px); }
  .project-contact-lead { max-width: 400px; }
  .project-chat-scene { position: absolute; right: -5px; top: 5px; width: 210px; margin: 0; scale: .8; transform-origin: right center; }
  .project-chat-front { left: 0; }
  .project-chat-back { right: -38px; }
  .project-chat-floor { left: 0; }
  .project-chat-spark { right: -14px; }
  .project-contact-direct { margin-top: 20px; }
  .project-contact-form { padding: 27px; }
  .contact-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .contact-type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .project-contact { width: calc(100% - 40px); padding: 28px 23px; margin: 10px auto 50px; border-radius: 21px; }
  .project-contact-grid { gap: 27px; }
  .project-contact-intro { min-height: 0; padding: 0; }
  .project-contact .eyebrow { font-size: 9px; margin-bottom: 23px; }
  .project-contact h2.depth-title { font-size: clamp(32px, 8.8vw, 49px); line-height: 1.13; margin: 10px 0 26px; }
  .project-contact-lead { max-width: 350px; font-size: 14px; line-height: 1.85; }
  .project-chat-scene { position: relative; top: auto; right: auto; width: 255px; height: 174px; margin: 8px auto 8px; scale: .84; transform-origin: center center; }
  .project-chat-front { left: 0; }
  .project-chat-back { right: -1px; top: 9px; }
  .project-chat-floor { bottom: -23px; }
  .project-chat-spark { right: 6px; top: 156px; }
  .project-contact-direct { margin-top: 18px; }
  .project-contact-direct p { font-size: 11px; }
  .project-contact-direct a { font-size: 13px; }
  .project-contact-form { padding: 22px 19px; border-radius: 15px; gap: 21px; }
  .contact-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .project-contact .contact-type > span { min-height: 46px; font-size: 11px; padding: 10px; gap: 7px; }
  .contact-field-row { grid-template-columns: 1fr; gap: 21px; }
  .project-contact .contact-field :is(input, select, textarea) { font-size: 16px; padding: 11px 12px; }
  .project-contact .contact-field textarea { min-height: 145px; }
  .project-contact .contact-field > label { font-size: 12px; }
  .project-contact .contact-submit { font-size: 12px; padding-inline: 13px; }
  .project-contact .contact-form-help { font-size: 10px; line-height: 1.8; }
  .project-contact .contact-feedback { padding: 15px; }
  .project-contact .contact-message-preview { padding: 11px; font-size: 11px; }
  .project-contact .contact-message-actions { flex-direction: column; }
}
@media (max-width: 365px) {
  .project-contact { width: calc(100% - 32px); padding: 26px 18px; }
  .project-contact h2.depth-title { font-size: 30px; }
  .project-contact-form { padding: 19px 14px; }
  .project-contact .contact-type > span { font-size: 10px; padding-inline: 8px; }
  .project-contact-direct a { font-size: 12px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-contact *, .project-contact *::before, .project-contact *::after { transition: none !important; }
  .project-contact .contact-submit:hover { translate: none; }
}