/* =====================================================
   CONTACT
===================================================== */

.contact {
  width:100%;
  margin:0;
  padding:0;
  scroll-margin-top:17vh;
}


/* =====================================================
   SECTION
===================================================== */

.section__contact {
  position:relative;
  width:calc(100% - 400px);
  height:clamp(590px,46vw,635px);
  margin:0 auto;
  background:transparent;
  border:none;
}


/* =====================================================
   PANNEAU D’INFORMATIONS
===================================================== */

.contact__info-panel {
  position:absolute;
  top:0;
  left:0;
  width:74%;
  height:100%;
  padding:clamp(22px,2.6vw,36px) clamp(175px,15vw,235px) clamp(22px,2.6vw,36px) clamp(30px,4vw,55px);
  background:#000;
  border:var(--border);
  box-sizing:border-box;
}

.contact__content {
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  z-index:2;
}

.contact__heading {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(10px,1.4vw,18px);
}

.h3__contact {
  margin:0;
  padding:0;
  font-size:clamp(28px,3vw,50px);
}


/* =====================================================
   DESCRIPTION
===================================================== */

.span__contact {
  display:block;
  width:100%;
  max-width:clamp(280px,38vw,530px);
  margin-top:clamp(20px,2.4vw,32px);
  padding:0;
  color:rgba(255,255,255,.76);
  font-family:"Montserrat",sans-serif;
  font-size:clamp(10px,1.45vw,18px);
  font-weight:300;
  line-height:1.65;
}


/* =====================================================
   INFORMATIONS
===================================================== */

.div__info__contact {
  width:100%;
  margin-top:clamp(28px,3.8vw,48px);
  padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.2vw,28px);
}

.div__info__contact__item {
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,25px);
}

.contact__info-text {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:clamp(4px,.5vw,8px);
}

.contact__info-label {
  color:rgba(255,255,255,.42);
  font-family:"Montserrat",Arial,sans-serif;
  font-size:clamp(7px,.9vw,12px);
  font-weight:550;
  line-height:1;
  letter-spacing:.04em;
}

.span__info__contact__item,
.contact__info-link {
  color:rgba(255,255,255,.88);
  font-family:"Montserrat",Arial,sans-serif;
  font-size:clamp(10px,1.45vw,18px);
  font-weight:450;
  line-height:1.25;
  text-decoration:none;
}

.contact__info-link {
  color:var(--text-color);
  transition:color 220ms ease,text-shadow 220ms ease;
}

.contact__info-link:hover {
  color:#fff;
  text-shadow:0 0 4px rgba(184,184,184,.9),0 0 9px rgba(184,184,184,.4);
}


/* =====================================================
   RÉSEAUX SOCIAUX
===================================================== */

.div__info__contact__item--socials {
  align-items:center;
}

.contact__social-icons {
  display:flex;
  align-items:center;
  gap:clamp(10px,1.3vw,16px);
  flex-shrink:0;
}


/* =====================================================
   FORMULAIRE
===================================================== */

.form__contact {
  position:absolute;
  top:50%;
  right:0;
  width:44%;
  height:auto;
  padding:clamp(18px,1.8vw,24px) clamp(24px,2.6vw,36px);
  background:#000;
  border:var(--border);
  box-sizing:border-box;
  z-index:5;
  transform:translateY(-50%);
}

.form__contact form {
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(13px,1.35vw,18px);
}

.form__contact__field {
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:0;
}


/* =====================================================
   LABELS ACCESSIBLES MAIS MASQUÉS
===================================================== */

.form__contact label {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}


/* =====================================================
   CHAMPS
===================================================== */

.form__contact input,
.form__contact select,
.form__contact textarea {
  width:100%;
  max-width:100%;
  border:1px solid rgba(184,184,184,.4);
  border-radius:clamp(4px,.5vw,7px);
  background:#65656557;
  color:rgba(255,255,255,.88);
  font-family:"Montserrat",Arial,sans-serif;
  font-size:clamp(9px,1.05vw,14px);
  outline:none;
  box-shadow:inset 0 0 12px rgba(0,0,0,.28);
  transition:border-color 220ms ease,box-shadow 220ms ease,background 220ms ease;
}

.form__contact input,
.form__contact select {
  height:clamp(40px,4vw,50px);
  padding:0 clamp(13px,1.4vw,18px);
}

.form__contact textarea {
  height:clamp(72px,7vw,88px);
  min-height:72px;
  padding:clamp(11px,1.2vw,15px);
  resize:vertical;
}

.form__contact input::placeholder,
.form__contact textarea::placeholder {
  color:var(--text-color);
}

.form__contact input:focus,
.form__contact select:focus,
.form__contact textarea:focus {
  border-color:var(--other-color);
}

.form__contact select {
  cursor:pointer;
}

.form__contact select option {
  background:#1a1a1a;
  color:#fff;
}


/* =====================================================
   INFORMATION CONFIDENTIALITÉ
===================================================== */

.contact__privacy-notice {
  margin:0;
  padding:0;
  color:rgba(255,255,255,.4);
  font-family:"Montserrat",Arial,sans-serif;
  font-size:clamp(8px,.62vw,9px);
  font-weight:300;
  line-height:1.45;
}

.contact__privacy-notice a {
  color:rgba(255,255,255,.7);
  font-weight:400;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.35);
  text-underline-offset:2px;
  transition:color 220ms ease,text-decoration-color 220ms ease;
}

.contact__privacy-notice a:hover {
  color:var(--other-color);
  text-decoration-color:var(--other-color);
}


/* =====================================================
   BOUTON ENVOYER
===================================================== */

.contact__submit {
  width:100%;
  height:clamp(42px,3.8vw,49px);
  min-height:0;
  margin-top:2px;
  padding:0 clamp(16px,2vw,24px);
}


/* =====================================================
   RÉPONSE SOUS 48H
===================================================== */

.contact__response-time {
  margin:-8px 0 0;
  padding:0;
  color:rgba(255,255,255,.5);
  font-family:"Montserrat",Arial,sans-serif;
  font-size:clamp(8px,.72vw,10px);
  font-weight:300;
  line-height:1.2;
  letter-spacing:.04em;
  text-align:center;
}


/* =====================================================
   ANIMATION
===================================================== */

.contact__info-panel,
.form__contact {
  opacity:0;
  transition:opacity 700ms ease,transform 750ms cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}

.contact__info-panel {
  transform:translateX(-70px);
}

.form__contact {
  transform:translate(70px,-50%);
}

.contact__info-panel.is-contact-info-visible {
  opacity:1;
  transform:translateX(0);
}

.form__contact.is-contact-form-visible {
  opacity:1;
  transform:translate(0,-50%);
}


/* =====================================================
   RETOUR ENVOI FORMULAIRE
===================================================== */

.contact__form-status {
  min-height:18px;
  margin:7px 0 0;
  color:var(--text-color);
  font-family:"Montserrat",sans-serif;
  font-size:12px;
  font-weight:400;
  line-height:1.4;
  text-align:center;
}

.contact__form-status:empty {
  margin:0;
  min-height:0;
}

.contact__form-status.is-success {
  color:#7fd49b;
}

.contact__form-status.is-error {
  color:#e78686;
}

.contact__submit:disabled {
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}


/* =====================================================
   RESPONSIVE TABLETTE / MOBILE
===================================================== */

@media screen and (max-width:900px) {
  .contact {
    width:100%;
    margin:0;
    padding:0;
    overflow:visible;
  }

  .section__contact {
    position:relative;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:clamp(25px,6vw,40px);
  }

  .contact__info-panel {
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    order:1;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:clamp(35px,7vw,50px) clamp(25px,6vw,45px);
    display:block;
    box-sizing:border-box;
    transform:translateY(30px);
  }

  .contact__info-panel.is-contact-info-visible {
    opacity:1;
    transform:translateY(0);
  }

  .contact__content {
    width:100%;
    height:auto;
    max-width:none;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .contact__heading {
    width:100%;
    align-items:center;
    text-align:center;
  }

  .h3__contact {
    width:100%;
    text-align:center;
  }

  .contact__title-line {
    margin:0 auto;
  }

  .span__contact {
    width:100%;
    max-width:500px;
    margin:clamp(24px,5vw,36px) auto 0;
    text-align:center;
  }

  .div__info__contact {
    width:100%;
    max-width:500px;
    margin:clamp(35px,7vw,50px) auto 0;
    gap:clamp(20px,5vw,30px);
  }

  .div__info__contact__item {
    width:100%;
    min-width:0;
    justify-content:flex-start;
    text-align:left;
  }

  .contact__info-text {
    min-width:0;
    flex:1;
  }

  .contact__info-label {
    font-size:9px;
  }

  .span__info__contact__item,
  .contact__info-link {
    max-width:100%;
  }

  .contact__social-icons {
    flex-shrink:0;
  }

  .form__contact {
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    order:2;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:clamp(28px,6vw,40px) clamp(25px,6vw,45px);
    display:block;
    box-sizing:border-box;
    z-index:auto;
    transform:translateY(30px);
  }

  .form__contact.is-contact-form-visible {
    opacity:1;
    transform:translateY(0);
  }

  .form__contact form {
    width:100%;
    height:auto;
    gap:clamp(15px,3.4vw,20px);
  }

  .form__contact__field {
    width:100%;
  }

  .form__contact input,
  .form__contact select,
  .form__contact textarea {
    width:100%;
    max-width:100%;
  }

  .form__contact textarea {
    height:100px;
    min-height:100px;
  }

  .contact__privacy-notice {
    font-size:10px;
    line-height:1.5;
  }

  .contact__submit {
    height:48px;
    margin-top:2px;
  }

  .contact__response-time {
    margin:-4px 0 0;
    padding:0;
    font-size:9px;
  }
}


/* =====================================================
   RESPONSIVE SMARTPHONE
===================================================== */

@media screen and (max-width:600px) {
  .section__contact {
    width:100%;
    margin:0;
    gap:20px;
  }

  .contact__info-panel,
  .form__contact {
    width:100%;
    padding:30px 20px;
  }

  .contact__content {
    width:100%;
  }

  .h3__contact {
    width:100%;
    font-size:clamp(22px,7vw,30px);
    line-height:1.15;
    letter-spacing:1px;
    text-align:center;
  }

  .span__contact {
    width:100%;
    max-width:100%;
    margin-top:25px;
    font-size:clamp(13px,3.8vw,16px);
    line-height:1.6;
    text-align:center;
  }

  .div__info__contact {
    width:100%;
    max-width:100%;
    margin-top:35px;
    gap:20px;
  }

  .div__info__contact__item {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
  }

  .contact__info-text {
    width:auto;
    min-width:0;
    flex:1;
  }

  .contact__info-label {
    font-size:10px;
  }

  .span__info__contact__item,
  .contact__info-link {
    font-size:14px;
    line-height:1.35;
  }

  .contact__info-link[href^="tel:"] {
    white-space:nowrap;
  }

  .contact__social-icons {
    gap:8px;
  }

  .form__contact form {
    gap:14px;
  }

  .form__contact input,
  .form__contact select,
  .form__contact textarea {
    font-size:13px;
  }

  .form__contact input,
  .form__contact select {
    height:46px;
  }

  .form__contact textarea {
    height:95px;
    min-height:95px;
  }

  .contact__privacy-notice {
    margin:0;
    font-size:9px;
    line-height:1.45;
  }

  .contact__submit {
    height:46px;
    min-height:46px;
    margin-top:0;
    padding:0 18px;
  }

  .contact__response-time {
    margin:-4px 0 0;
    padding:0;
    font-size:9px;
    line-height:1.2;
  }
}