/*!
 * JSContact — Front styles (module jscontact)
 * XOOPS 2.5.11+ / PHP 8+ / Smarty 3
 * Author: Jérôme Serieys — SAS GROMMAG-PROD
 * Copyright (c) 2025 SAS GROMMAG-PROD
 * License: GPL-2.0-or-later
 * SPDX-License-Identifier: GPL-2.0-or-later
 */

/* Minimal styling for form wrapper */
.jscontact-form { max-width: 720px; margin: 0 auto; }
.jscontact-form .xoops-form-element { margin-bottom: 12px; }
/* Conteneur */
.jscontact-wrap { max-width: 780px; margin: 24px auto 64px; padding: 0 16px; }
.jscontact-form { background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08); padding: 24px; }

/* Neutraliser le rendu table par défaut de XOOPS et le transformer en layout vertical */
.jscontact-form table.outer { width: 100%; border-collapse: separate; border-spacing: 0; background: transparent; }
.jscontact-form table.outer th { display: none; } /* on cache l’en-tête "Contact" de la table XOOPS */
.jscontact-form table.outer tr { display: block; margin: 0 0 16px 0; }
.jscontact-form table.outer td { display: block; border: 0; background: transparent; padding: 0; }

/* Label + aide */
.jscontact-form .xoops-form-element-caption,
.jscontact-form .xoops-form-element-caption-required {
  font-weight: 600; margin: 0 0 6px; color: #1f2937;
}
.jscontact-form .xoops-form-element-help { font-size: 0.875rem; color: #6b7280; margin-top: 6px; }

/* Champs */
.jscontact-form input[type="text"],
.jscontact-form input[type="email"],
.jscontact-form input[type="tel"],
.jscontact-form select,
.jscontact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 1rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.jscontact-form textarea { min-height: 140px; resize: vertical; }
.jscontact-form input:focus,
.jscontact-form select:focus,
.jscontact-form textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}

/* ReCAPTCHA */
.jscontact-form .g-recaptcha { margin-top: 8px; }

/* Ligne boutons */
.jscontact-form .formButton,
.jscontact-form input[type="submit"],
.jscontact-form button[type="submit"] {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 600;
  cursor: pointer;
  background: #3b82f6;
  color: #fff;
  transition: transform .02s ease-in-out, box-shadow .2s, background .2s;
}
.jscontact-form .formButton:hover { background: #2563eb; }
.jscontact-form .formButton:active { transform: translateY(1px); }

/* Pied de formulaire (ligne * requis) */
.jscontact-form tr.foot td { display: block; font-size: 0.85rem; color: #6b7280; margin-top: 8px; }

/* Petits ajustements */
.jscontact-form .caption-marker { color: #ef4444; margin-left: 4px; }
/* ====== JSContact — habillage léger et moderne ====== */

.jsc-container { 
  max-width: 840px; 
  margin: 32px auto 80px; 
  padding: 0 16px; 
}

.jsc-title { 
  margin: 0 0 16px; 
  font-size: 28px; 
  line-height: 1.25; 
  font-weight: 800; 
  letter-spacing: .2px; 
}

.jsc-card { 
  background: #fff; 
  border: 1px solid #e5e7eb; 
  border-radius: 14px; 
  box-shadow: 0 10px 30px rgba(0,0,0,.07); 
  overflow: hidden; 
}

.jsc-card__body { 
  padding: 22px; 
}

/* Neutraliser le tableau XOOPS => layout vertical */
.jsc-card table.outer { 
  width: 100%; 
  border-collapse: separate; 
  border-spacing: 0; 
  background: transparent; 
}
.jsc-card table.outer th { display: none; }
.jsc-card table.outer tr { display: block; margin: 0 0 18px; }
.jsc-card table.outer td { display: block; padding: 0; border: 0; background: transparent; }

/* Labels & aides */
.jsc-card .xoops-form-element-caption,
.jsc-card .xoops-form-element-caption-required {
  display: block;
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
}
.jsc-card .xoops-form-element-help {
  font-size: .92rem;
  color: #6b7280;
  margin-top: 6px;
}
.jsc-card .caption-marker { color: #ef4444; margin-left: 4px; }

/* Champs */
.jsc-card input[type="text"],
.jsc-card input[type="email"],
.jsc-card input[type="tel"],
.jsc-card select,
.jsc-card textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 1rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.jsc-card textarea { min-height: 140px; resize: vertical; }
.jsc-card input:focus,
.jsc-card select:focus,
.jsc-card textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}

/* ReCAPTCHA */
.jsc-card .g-recaptcha { margin-top: 8px; }

/* Ligne boutons */
.jsc-card .formButton,
.jsc-card input[type="submit"],
.jsc-card button[type="submit"] {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  background: #2563eb;
  color: #fff;
  transition: transform .02s ease-in-out, box-shadow .2s, background .2s;
}
.jsc-card .formButton:hover,
.jsc-card input[type="submit"]:hover,
.jsc-card button[type="submit"]:hover {
  background: #1d4ed8;
}
.jsc-card .formButton:active,
.jsc-card input[type="submit"]:active,
.jsc-card button[type="submit"]:active {
  transform: translateY(1px);
}

/* Ligne d’info finale */
.jsc-card tr.foot td { 
  display: block; 
  font-size: .92rem; 
  color: #6b7280; 
  margin-top: 8px; 
}

/* Note sous la carte */
.jsc-note { 
  margin: 12px 4px 0; 
  color: #6b7280; 
  font-size: .92rem; 
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
  .jsc-card { 
    background: #0b0f14; 
    border-color: #1f2937; 
    box-shadow: 0 10px 30px rgba(0,0,0,.4); 
  }
  .jsc-card .xoops-form-element-caption,
  .jsc-card .xoops-form-element-caption-required { color: #e5e7eb; }
  .jsc-card .xoops-form-element-help { color: #9ca3af; }
  .jsc-card input[type="text"],
  .jsc-card input[type="email"],
  .jsc-card input[type="tel"],
  .jsc-card select,
  .jsc-card textarea {
    background: #0f1520; 
    border-color: #243040; 
    color: #e5e7eb;
  }
  .jsc-title { color: #f3f4f6; }
  .jsc-note { color: #9ca3af; }
}

/* Mise à niveau layout thème pour la page module */
body.mod-jscontact .content.card-list { padding-left: 0 !important; padding-right: 0 !important; }
body.mod-jscontact .card.card--footerlinks {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  border-radius: 0;
}

/* Confort max du formulaire */
.jsc-container { max-width: 840px; margin-left: auto; margin-right: auto; }

/* Alertes */
.jsc-alert {
  padding: 12px 14px;
  border-radius: 8px;
  margin: 10px 0 16px;
  border: 1px solid transparent;
}
.jsc-alert--success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
  font-weight: 600;
}