/* ==========================================================================
   Kawann Supply — page « Contactez-nous »
   Entièrement traitée en CSS : le balisage vient des modules ps_contactinfo
   et contactform, on ne reprend aucun gabarit.
   ========================================================================== */

/* --- Carte des informations --- */
.page-contact #left-column .ps-contactinfo {
  padding: 24px 22px;
  border: 1px solid var(--kawann-border);
  border-radius: 14px;
  background: var(--kawann-blanc);
}

.page-contact #left-column .ps-contactinfo__title {
  position: relative;
  margin: 0 0 24px;
  padding-bottom: 12px;
  font-size: 1.125rem;
  font-weight: var(--kawann-weight-title);
  color: var(--kawann-marine);
}

.page-contact #left-column .ps-contactinfo__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--kawann-soleil);
}

.page-contact #left-column .ps-contactinfo__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 0;
}

/* L'icône du module devient une pastille, comme sur les pages du compte. */
.page-contact #left-column .ps-contactinfo__item .material-icons {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fdf0d8;
  font-size: 21px;
  color: var(--kawann-marine);
}

.page-contact #left-column .ps-contactinfo__info,
.page-contact #left-column .ps-contactinfo address {
  margin: 0;
  font-size: 0.8125rem;
  font-style: normal;
  line-height: 1.7;
  color: var(--kawann-text-muted);
}

/* La première ligne de l'adresse est le nom de la boutique. */
.page-contact #left-column .ps-contactinfo__item address { color: var(--kawann-marine); }

.page-contact #left-column .ps-contactinfo__info--email a {
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-lien);
  text-decoration: none;
  /* La colonne est maintenant assez large ; le garde-fou ne sert plus qu'aux
     très petits écrans, et coupe alors au plus près d'une limite naturelle. */
  overflow-wrap: break-word;
  white-space: nowrap;
}

.page-contact #left-column .ps-contactinfo__info--email a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-contact #left-column .ps-contactinfo hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--kawann-border-clair, #efeae2);
  opacity: 1;
}

/* --- Formulaire --- */
.page-contact .contact-form {
  padding: 26px 30px;
  border: 1px solid var(--kawann-border);
  border-radius: 14px;
  background: var(--kawann-blanc);
}

.page-contact .contact-form .page-title-section {
  position: relative;
  margin: 0 0 26px;
  padding-bottom: 12px;
  font-size: 1.5rem;
  font-weight: var(--kawann-weight-title);
  color: var(--kawann-marine);
}

.page-contact .contact-form .page-title-section::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--kawann-soleil);
}

.page-contact .contact-form .form-label {
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
}

.page-contact .contact-form .form-control,
.page-contact .contact-form .form-select {
  padding: 12px 14px;
  min-height: 48px;
  border: 1px solid var(--kawann-border);
  border-radius: 10px;
  font-size: 0.875rem;
  color: var(--kawann-marine);
}

.page-contact .contact-form .form-control:focus,
.page-contact .contact-form .form-select:focus {
  border-color: var(--kawann-marine);
  box-shadow: none;
}

.page-contact .contact-form textarea.form-control {
  min-height: 130px;
  line-height: 1.6;
  resize: vertical;
}

.page-contact .contact-form .form-text {
  display: block;
  margin-top: 5px;
  font-size: 0.6875rem;
  color: var(--kawann-text-muted);
}

/* Champ de fichier : le bouton natif reprend le registre du site. */
.page-contact .contact-form input[type="file"].form-control {
  padding: 0;
  overflow: hidden;
}

.page-contact .contact-form input[type="file"].form-control::file-selector-button {
  height: 46px;
  margin: 0 14px 0 0;
  padding: 0 18px;
  border: 0;
  border-right: 1px solid var(--kawann-border);
  background: var(--kawann-surface);
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-marine);
  cursor: pointer;
}

.page-contact .contact-form input[type="file"].form-control::file-selector-button:hover {
  background: #efece6;
}

/* --- Bouton d'envoi ---
   L'icône est posée en fond : le balisage vient du module, on n'y insère pas
   d'élément. */
.page-contact .contact-form .buttons-wrapper {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--kawann-border-clair, #efeae2);
}

.page-contact .contact-form [type="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px 13px 52px;
  min-height: 50px;
  border: 0;
  border-radius: 10px;
  background-color: var(--kawann-marine);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10.5 13.5'/%3E%3Cpath d='M21 3 14.5 21l-4-7.5L3 9.5 21 3Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 24px center;
  background-size: 18px 18px;
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-blanc);
}

.page-contact .contact-form [type="submit"]:hover {
  background-color: var(--kawann-marine-clair);
  color: var(--kawann-blanc);
}

.page-contact .contact-form [type="submit"]:focus-visible {
  outline: 2px solid var(--kawann-marine);
  outline-offset: 3px;
}

/* --- Colonnes ---
   Le gabarit Bootstrap donne 25% à la colonne de gauche, trop étroit pour que
   l'adresse e-mail tienne sur une ligne : elle se coupait en deux. On lui fixe
   une largeur suffisante et le formulaire prend le reste. */
@media (min-width: 768px) {
  .page-contact #left-column {
    flex: 0 0 340px;
    max-width: 340px;
    padding-right: 8px;
  }

  /* width: auto est indispensable : les classes col-lg-9 posent « width: 75% »,
     qui s'ajoutait aux 340px de gauche et faisait déborder la rangée — les deux
     colonnes passaient alors l'une sous l'autre. */
  .page-contact #center-column {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    padding-left: 8px;
  }

  /* La carte remplit sa colonne : le thème lui imposait une largeur plus
     étroite, et l'adresse débordait de son cadre. */
  .page-contact #left-column .ps-contactinfo {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  .page-contact #left-column .ps-contactinfo { margin-bottom: 16px; }
  .page-contact .contact-form { padding: 22px 18px; }
}

/* Sous 768px la colonne reprend toute la largeur : l'adresse peut de nouveau
   se replier si l'écran est vraiment étroit. */
@media (max-width: 767.98px) {
  .page-contact #left-column .ps-contactinfo__info--email a {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}