.contact-page {
  background:#faf9f6;
  color:#35127a
}

.contact-page header {
  background:#faf9f6
}

.contact-page nav [aria-current] {
  border-bottom:2px solid #fe6057;
  padding-bottom:5px
}

.contact-hero {
  padding:var(--hero-top) var(--edge) 65px
}

.contact-hero-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:9%;
  align-items:center
}

.contact-hero h1 {
  font-size:clamp(48px,5.5vw,78px);
  line-height:1.07;
  letter-spacing:-.05em;
  margin:22px 0
}

.contact-page em {
  font-style:normal;
  color:#a17bc6
}

.contact-hero p {
  font-size:19px;
  color:#71677f;
  line-height:1.75;
  max-width:480px;
  margin-bottom:30px
}

.contact-visual {
  position:relative;
  height:430px;
  margin-right:30px
}

.contact-students {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 65%;
  border-radius:100px 25px 25px 25px
}

.contact-caption {
  position:absolute;
  bottom:25px;
  left:20px;
  right:20px;
  background:white;
  border-radius:30px;
  padding:15px;
  font:700 14px Quicksand,sans-serif;
  text-align:center
}

img.contact-o {
  position:absolute;
  width:100px;
  height:100px;
  right:-40px;
  top:15px;
  background:#faf9f6;
  border-radius:50%;
  padding:7px;
  transform:rotate(12deg)
}

.contact-channels {
  background:#35127a;
  color:white;
  padding:30px var(--edge);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px
}

.contact-channels>a {
  display:flex;
  gap:20px;
  align-items:center;
  border-right:1px solid #ffffff30
}

.contact-channels>a:last-child {
  border:0
}

.channel-icon {
  font-size:32px;
  color:#fe6057
}

.contact-channels small {
  font-size:10px;
  letter-spacing:.08em;
  display:block;
  color:#c6aee9;
  margin-bottom:10px
}

.contact-channels strong {
  display:block;
  font:700 20px Quicksand,sans-serif;
  margin-bottom:8px
}

.contact-channels a>span>span {
  font-size:12px;
  color:#e2d7ef
}

.contact-main {
  padding:80px var(--edge);
  display:grid;
  grid-template-columns:minmax(0,1fr) 355px;
  gap:8%;
  scroll-margin-top:25px
}

.contact-main h2 {
  font-size:52px;
  line-height:1.1;
  margin:20px 0
}

.form-intro {
  font-size:17px;
  line-height:1.7;
  color:#71677f;
  margin-bottom:32px;
  max-width:530px
}

.contact-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 20px
}

#message-form label {
  display:block;
  font-weight:800;
  font-size:14px;
  margin-bottom:22px
}

#message-form input,#message-form select,#message-form textarea {
  display:block;
  width:100%;
  padding:15px 16px;
  margin-top:9px;
  border:1px solid #dcd1e8;
  border-radius:13px;
  background:white;
  font:15px Nunito,sans-serif;
  color:#35127a;
  min-height:50px
}

#message-form textarea {
  resize:vertical;
  min-height:160px
}

#message-form input:focus,#message-form select:focus,#message-form textarea:focus {
  outline:2px solid #a17bc6;
  outline-offset:2px
}

#message-form input::placeholder,#message-form textarea::placeholder {
  color:#95889f
}

.contact-privacy {
  font-size:12px;
  line-height:1.7;
  color:#82728e;
  margin-bottom:22px
}

.contact-privacy a {
  text-decoration:underline
}

.contact-page button.button {
  border:0;
  cursor:pointer
}

#message-status {
  font-size:12px;
  line-height:1.7;
  color:#82728e;
  margin-top:15px;
  max-width:450px
}

#message-status:empty {
  display:none
}

.contact-advice {
  padding:30px;
  background:#efe6f7;
  border-radius:28px
}

.contact-advice h3 {
  font-size:29px;
  line-height:1.2;
  margin:20px 0
}

.contact-advice p {
  font-size:15px;
  line-height:1.8;
  color:#71677f;
  margin-bottom:24px
}

.contact-advice .button {
  width:100%;
  justify-content:space-between;
  font-size:14px;
  padding:17px 20px
}

.contact-advice>span {
  font-size:11px;
  display:block;
  text-align:center;
  margin-top:15px;
  color:#82728e
}

.contact-hours,.contact-address {
  margin-top:30px;
  padding:10px 5px
}

.contact-aside .eyebrow {
  font-size:10px;
  letter-spacing:.07em
}

.contact-hours h3,.contact-address h3 {
  font-size:25px;
  margin:15px 0 20px
}

.contact-hours dl {
  margin:0
}

.contact-hours dl>div {
  display:flex;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid #e6ddee;
  padding:13px 0;
  font-size:13px
}

.contact-hours dt {
  color:#71677f
}

.contact-hours dd {
  margin:0;
  font-weight:800;
  white-space:nowrap
}

.contact-address p {
  line-height:1.8;
  color:#71677f;
  margin-bottom:15px
}

.contact-address a {
  font-weight:800;
  font-size:14px
}

.contact-bottom {
  background:#35127a;
  color:white;
  text-align:center;
  padding:60px 6%;
  border-radius:30px;
  margin:0 var(--edge) 30px
}

.contact-bottom .eyebrow {
  color:#c6aee9
}

.contact-bottom h2 {
  font-size:clamp(32px,4vw,52px);
  line-height:1.2;
  margin:25px 0 30px
}

.contact-bottom em {
  color:#c6aee9
}

@media(max-width:1050px) {
  .contact-hero-grid {
    gap:5%
  }

  .contact-hero h1 {
    font-size:58px
  }

  .contact-main {
    gap:5%;
    grid-template-columns:minmax(0,1fr) 310px
  }

  .contact-channels {
    gap:20px
  }

  .contact-channels strong {
    font-size:16px
  }

  .channel-icon {
    display:none
  }

}

@media(max-width:760px) {
  .contact-hero-grid {
    grid-template-columns:1fr;
    gap:35px
  }

  .contact-hero h1 {
    font-size:48px
  }

  .contact-hero p {
    font-size:17px
  }

  .contact-hero {
    padding-bottom:40px
  }

  .contact-visual {
    height:300px;
    margin-right:20px
  }

  img.contact-o {
    width:80px;
    height:80px;
    right:-26px /* girado 12°, a -30px salía 1px de la pantalla en 320 */
  }

  .contact-channels {
    grid-template-columns:1fr;
    padding:15px var(--edge);
    gap:0
  }

  .contact-channels>a {
    padding:22px 0;
    border:0;
    border-bottom:1px solid #ffffff30
  }

  .contact-channels strong {
    font-size:20px
  }

  .channel-icon {
    display:block
  }

  .contact-main {
    grid-template-columns:1fr;
    gap:40px;
    padding-top:50px;
    padding-bottom:50px
  }

  .contact-main h2 {
    font-size:42px
  }

  .contact-fields {
    grid-template-columns:1fr
  }

  .contact-bottom {
    margin:0 var(--edge) 20px;
    padding:45px 6%;
    border-radius:24px
  }

  .contact-caption {
    font-size:12px
  }

}

.contact-hero .button,.contact-hero .button span {
  color:#fff
}

.video-actions {
  position:absolute;
  top:20px;
  left:25px;
  display:flex;
  gap:8px;
  z-index:2
}

.video-actions button {
  border:0;
  border-radius:20px;
  padding:10px 14px;
  background:#fff;
  color:#35127a;
  font:700 12px Quicksand,sans-serif;
  cursor:pointer;
  min-height:40px
}

.video-actions button:focus-visible {
  outline:3px solid #35127a;
  outline-offset:3px
}

/* Envoi réel via Contact Form 7 : erreurs renvoyées par le serveur */
#message-status.is-error {
  color:#b3261e
}

#message-form [aria-invalid="true"] {
  border-color:var(--coral)
}