/* ============================================================
   contact.css — Section 06 · Contact
============================================================ */

.contact__header {
  padding-left:  var(--space-14);
  margin-bottom: var(--space-14);
}

.contact__card {
  display:          flex;
  background-color: var(--ivory-card);
  border:           1px solid var(--border);
  border-radius:    var(--radius-md);
  overflow:         hidden;
  margin-left:      var(--space-14);
}


/* ── Colonne info (fond sombre) ── */

.contact__info {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  flex:            0 0 auto;
  width:           36%;
  padding:         var(--space-12) var(--space-10);
  background:      var(--ink-deep);
  position:        relative;
  overflow:        hidden;
}

.contact__info::before {
  content:       '';
  position:      absolute;
  bottom:        -80px;
  right:         -80px;
  width:         260px;
  height:        260px;
  border-radius: var(--radius-pill);
  border:        1px solid rgba(var(--ivory-rgb), var(--alpha-06));
}

.contact__info::after {
  content:       '';
  position:      absolute;
  bottom:        -40px;
  right:         -40px;
  width:         160px;
  height:        160px;
  border-radius: var(--radius-pill);
  border:        1px solid rgba(var(--ivory-rgb), var(--alpha-08));
}

.contact__info-heading { margin-bottom: var(--space-10); }

.contact__info-title {
  font-family:    var(--font-display);
  font-size:      clamp(1.5rem, 2.2vw, 2rem);
  font-weight:    300;
  font-style:     italic;
  letter-spacing: -0.01em;
  line-height:    1.15;
  color:          var(--ivory-card);
  margin-bottom:  var(--space-2);
}

.contact__info-subtitle {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   var(--text-xl);
  font-weight: 300;
  color:       var(--text-on-ink-strong);
  line-height: 1.7;
}

.contact__info-list {
  display:         flex;
  flex-direction:  column;
  flex:            1 1 0;
  justify-content: center;
}

.contact__info-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-4);
  padding:       var(--space-5) 0;
  border-bottom: 1px solid var(--border-on-ink);
}

.contact__info-item:first-child { border-top: 1px solid var(--border-on-ink); }

/* Email et téléphone : toute la ligne est cliquable (mailto:/tel:),
   pas seulement le texte de la valeur — zone de tap bien plus
   confortable, en particulier au doigt sur mobile. */
.contact__info-item-link {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  width:       100%;
  color:       inherit;
}

.contact__info-item-link:focus-visible {
  outline:        2px solid var(--caramel-light);
  outline-offset: 4px;
  border-radius:  var(--radius-sm);
}

.contact__info-icon-wrapper {
  flex-shrink:     0;
  width:           40px;
  height:          40px;
  border-radius:   var(--radius-full);
  background:      var(--border-on-ink);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--caramel-light);
  transition:      background 300ms ease;
}

.contact__info-item:hover .contact__info-icon-wrapper { background: rgba(176, 125, 82, 0.22); }
.contact__info-icon-wrapper svg { width: 17px; height: 17px; }

.contact__info-text {
  display:        flex;
  flex-direction: column;
  gap:            0.125rem;
}

.contact__info-label {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(var(--ivory-rgb), var(--alpha-60));
}

.contact__info-value {
  font-family: var(--font-body);
  font-size:   var(--text-lg);
  font-weight: 400;
  color:       var(--bg-on-ink-heavy);
  line-height: 1.5;
}

.contact__socials {
  display:    flex;
  gap:        var(--space-3);
  margin-top: var(--space-10);
}

.contact__social-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border:          1px solid var(--border-on-ink-soft);
  border-radius:   var(--radius-sm);
  color:           rgba(var(--ivory-rgb), var(--alpha-60));
  transition:
    border-color 250ms ease,
    color        250ms ease,
    background   250ms ease,
    transform    100ms ease;
}

.contact__social-link:active { transform: scale(0.92); }

.contact__social-link:hover {
  border-color: var(--caramel-light);
  color:        var(--caramel-light);
  background:   rgba(176, 125, 82, 0.12);
}

.contact__social-link svg { width: 15px; height: 15px; }


/* ── Colonne formulaire ── */

.contact__form-wrapper {
  flex:    1 1 0;
  padding: var(--space-12);
}

.contact__form-title {
  font-family:    var(--font-display);
  font-size:      1.375rem;
  font-weight:    400;
  letter-spacing: -0.01em;
  color:          var(--ink-deep);
  margin-bottom:  0.375rem;
}

.contact__form-desc {
  font-family:   var(--font-display);
  font-style:    italic;
  font-size:     var(--text-xl);
  font-weight:   300;
  color:         var(--ink-mid);
  line-height:   1.7;
  margin-bottom: var(--space-8);
}

.contact__form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.contact__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     var(--space-4);
}

.contact__field {
  display:        flex;
  flex-direction: column;
  gap:            0.375rem;
}

.contact__field-label {
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ink-base);
}

.contact__field-input-wrapper {
  position:    relative;
  display:     flex;
  align-items: center;
}

.contact__field-icon {
  position:       absolute;
  left:           var(--space-4);
  top:            50%;
  transform:      translateY(-50%);
  width:          16px;
  height:         16px;
  color:          var(--ink-mid);
  pointer-events: none;
  flex-shrink:    0;
  transition:     color 200ms ease;
}

.contact__field-icon--textarea { top: 1.125rem; transform: none; }

.contact__input {
  width:         100%;
  height:        52px;
  padding:       0 var(--space-4) 0 2.875rem;
  background:    var(--color-bg);
  border:        1px solid var(--border-on-light);
  border-radius: var(--radius-sm);
  font-family:   var(--font-body);
  font-size:     var(--text-md);
  font-weight:   400;
  color:         var(--ink-base);
  outline:       none;
  transition:
    border-color     200ms ease,
    background-color 200ms ease;
  appearance:    none;
}

.contact__input:hover { border-color: rgba(var(--ink-base-rgb), var(--alpha-35)); }

.contact__input::placeholder { color: var(--ink-mid); font-weight: 300; }

.contact__input:focus {
  border-color:      var(--caramel);
  background-color:  var(--ivory-card);
}

/* Validation native HTML5 — ne s'affiche qu'une fois que l'utilisateur
   a commencé à saisir quelque chose (:not(:placeholder-shown)), pour
   ne jamais montrer un champ vide et obligatoire comme "en erreur"
   avant même que la personne n'ait eu la chance de le remplir. */
.contact__input:not(:placeholder-shown):invalid {
  border-color: var(--status-error);
}

.contact__input:not(:placeholder-shown):valid {
  border-color: var(--status-online);
}

.contact__input:focus:invalid,
.contact__input:focus:valid {
  background-color: var(--ivory-card);
}

.contact__field-input-wrapper:focus-within .contact__field-icon { color: var(--caramel); }

.contact__textarea {
  height:      auto;
  padding:     var(--space-4) var(--space-4) var(--space-4) 2.875rem;
  resize:      vertical;
  line-height: 1.7;
  min-height:  160px;
}

.contact__field-input-wrapper--textarea { align-items: flex-start; }

.contact__form-footer {
  display:         flex;
  justify-content: flex-end;
  align-items:     center;
  gap:             var(--space-6);
  margin-top:      var(--space-2);
}

.contact__form-note {
  font-size:   var(--text-base);
  font-weight: 400;
  color:       var(--ink-mid);
}

.contact__submit {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            var(--space-2-5);
  min-height:     44px;
  padding:        0.875rem var(--space-7);
  background:     var(--ink-deep);
  color:          var(--ivory-card);
  border:         none;
  border-radius:  var(--radius-sm);
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:
    background 300ms cubic-bezier(0.16, 1, 0.3, 1),
    transform  100ms ease;
}

.contact__submit:hover  { background: var(--caramel); }
.contact__submit:active { transform: scale(0.97); }

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

.contact__submit svg {
  width:      14px;
  height:     14px;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact__submit:hover svg { transform: translateX(3px); }


/* ── Responsive ── */

@media (max-width: 1100px) {
  .contact__info         { width: 40%; padding: var(--space-10) var(--space-8); }
  .contact__form-wrapper { padding: var(--space-10) var(--space-8); }
}

@media (max-width: 1024px) {
  .contact__header { padding-left: var(--space-10); }
  .contact__card   { margin-left: var(--space-10); }
}

@media (max-width: 900px) {
  .contact__card      { flex-direction: column; }
  .contact__info      { width: 100%; padding: var(--space-10); }
  .contact__info-list { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
  .contact__info-item {
    flex:          1 1 calc(50% - 0.5rem);
    border:        1px solid var(--border-on-ink);
    border-radius: var(--radius-sm);
    padding:       var(--space-4);
  }
  .contact__info-item:first-child { border-top: 1px solid var(--border-on-ink); }
}

@media (max-width: 768px) {
  .contact__header { padding-left: 0; }
  .contact__card   { margin-left: 0; }

  /* Le padding interne (40px hérité du palier tablette) se cumulait
     avec le padding externe de la section pour resserrer le contenu
     au centre de l'écran. On le réduit ici pour que la carte respire
     davantage sur mobile. */
  .contact__info         { padding: var(--space-8) var(--space-4); }
  .contact__form-wrapper { padding: var(--space-8) var(--space-4); }

  .contact__info-list   { flex-direction: column; }
  .contact__info-item   { flex: 1 1 auto; }
  .contact__form-row    { grid-template-columns: 1fr; }
  .contact__form-footer { flex-direction: column; align-items: stretch; }
  .contact__submit      { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .contact__info,
  .contact__form-wrapper { padding-inline: var(--space-3); }
}