/* ============================================================
   PAGE CONTACT — devis personnalisé
   Hero éditorial sombre + 2-col (infos / formulaire)
   Les Coffrets de Lorraine · ze-theme-vitrine
============================================================ */

/* ============================================================
   PAGE HERO (en haut, fond charbon)
============================================================ */
.ze-vitrine-page-hero {
  background: var(--ze-charbon);
  padding: calc(var(--ze-announce-h) + var(--ze-nav-h) + 3rem) 5% 4rem;
  position: relative;
  overflow: hidden;
}
/* Pages sans nav (ex: /contact/) : announce-bar = sibling au-dessus du hero,
   donc on n'a aucune hauteur à compenser. Header collé au eyebrow. */
body.ze-vitrine-no-nav .ze-vitrine-page-hero {
  padding-top: 1.5rem;
}
@media (max-width: 768px) {
  body.ze-vitrine-no-nav .ze-vitrine-page-hero {
    padding-top: 1rem;
  }
}
/* Pattern croix de Lorraine + glow doré : pseudo-éléments décoratifs
   (déplacés du markup vers le CSS pour garder le hero éditable en blocs natifs) */
.ze-vitrine-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='120'%3E%3Crect x='36' y='0' width='8' height='120' fill='%23B8830A'/%3E%3Crect x='24' y='24' width='32' height='7' fill='%23B8830A'/%3E%3Crect x='18' y='50' width='44' height='9' fill='%23B8830A'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 80px 120px;
  opacity: 0.025;
  pointer-events: none;
  z-index: 1;
}
.ze-vitrine-page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(184,131,10,0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}
.ze-vitrine-page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--ze-container);
  margin: 0 auto;
}
.ze-vitrine-page-hero__eyebrow {
  font-family: var(--ze-font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ze-or-clair);
  margin: 0 0 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.ze-vitrine-page-hero__eyebrow::before {
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--ze-or-clair);
}
.ze-vitrine-page-hero__title {
  font-family: var(--ze-font-serif);
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 600;
  color: white;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}
.ze-vitrine-page-hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--ze-or-clair);
}
.ze-vitrine-page-hero__sub {
  margin: 1.2rem 0 0;
  font-family: var(--ze-font-sans);
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  max-width: 520px;
  line-height: 1.8;
}

/* ============================================================
   CONTACT LAYOUT (2 colonnes)
============================================================ */
.ze-vitrine-contact-section {
  padding: clamp(2rem, 3vw, 3.5rem) 0 clamp(4rem, 7vw, 8rem);
  background: var(--ze-ivoire);
}
.ze-vitrine-contact-grid {
  max-width: var(--ze-container);
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 6rem;
  align-items: start;
}

/* ── Colonne gauche : infos ── */
.ze-vitrine-contact-infos {
  position: sticky;
  top: calc(var(--ze-announce-h) + var(--ze-nav-h) + 2rem);
}
.ze-vitrine-contact-infos__intro {
  font-family: var(--ze-font-sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ze-gris);
  line-height: 1.8;
  margin: 1.5rem 0 2.5rem;
}

.ze-vitrine-contact-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 1rem;
  align-items: center;
  margin-bottom: 1.8rem;
}
/* Icône en ::before, position col 1 / 2 lignes — permet à label + value
   d'être de simples blocs natifs Gutenberg (paragraphes) éditables. */
.ze-vitrine-contact-item::before {
  content: '';
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ze-creme-foncee);
  background-color: var(--ze-blanc);
  background-image: var(--ze-contact-icon, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  align-self: center;
}
.ze-vitrine-contact-item__label,
.ze-vitrine-contact-item__value { grid-column: 2; }
.ze-vitrine-contact-item--phone {
  --ze-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23B8830A' stroke-width='1.8'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.4 12.82a19.79 19.79 0 01-3.07-8.68A2 2 0 012.3 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 9.91a16 16 0 006.16 6.16l1.27-.64a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E");
}
.ze-vitrine-contact-item--email {
  --ze-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23B8830A' stroke-width='1.8'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
.ze-vitrine-contact-item--region {
  --ze-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23B8830A' stroke-width='1.8'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.ze-vitrine-contact-item__label {
  font-family: var(--ze-font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ze-gris);
  margin: 0 0 3px;
}
.ze-vitrine-contact-item__value {
  font-family: var(--ze-font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ze-charbon);
  margin: 0;
}
.ze-vitrine-contact-item__value a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ze-transition);
}
.ze-vitrine-contact-item__value a:hover { color: var(--ze-rouge); }

.ze-vitrine-contact-engagements {
  margin-top: 3rem;
  padding: 1.8rem;
  background: var(--ze-charbon);
  border-radius: var(--ze-radius-md);
}
.ze-vitrine-contact-engagements__title {
  font-family: var(--ze-font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ze-or-clair);
  margin: 0 0 1.2rem;
}
.ze-vitrine-contact-engagements__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
}
.ze-vitrine-contact-engagements__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ze-font-sans);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
}
.ze-vitrine-contact-engagements__list li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ze-or-clair);
  flex-shrink: 0;
}

/* ── Colonne droite : formulaire ── */
.ze-vitrine-devis-form {
  background: var(--ze-blanc);
  border-radius: var(--ze-radius-lg);
  padding: clamp(2rem, 4vw, 3.5rem);
  box-shadow: var(--ze-shadow-card);
}
.ze-vitrine-devis-form__title {
  font-family: var(--ze-font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ze-charbon);
  margin: 0 0 0.4rem;
}
.ze-vitrine-devis-form__subtitle {
  font-family: var(--ze-font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--ze-gris);
  margin: 0 0 2.2rem;
  line-height: 1.6;
}

.ze-vitrine-form-group {
  margin-bottom: 1.4rem;
}
.ze-vitrine-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.ze-vitrine-devis-form label {
  display: block;
  font-family: var(--ze-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ze-gris-fonce);
  margin-bottom: 0.5rem;
}
.ze-vitrine-devis-form label .required {
  color: var(--ze-rouge);
  margin-left: 2px;
}

.ze-vitrine-devis-form input[type="text"],
.ze-vitrine-devis-form input[type="email"],
.ze-vitrine-devis-form input[type="tel"],
.ze-vitrine-devis-form select,
.ze-vitrine-devis-form textarea {
  width: 100%;
  padding: 0.8em 1em;
  background: var(--ze-ivoire);
  border: 1.5px solid var(--ze-creme-foncee);
  border-radius: var(--ze-radius-sm);
  font-family: var(--ze-font-sans);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--ze-charbon);
  transition: border-color var(--ze-transition), box-shadow var(--ze-transition);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.ze-vitrine-devis-form input::placeholder,
.ze-vitrine-devis-form textarea::placeholder {
  color: var(--ze-gris);
  opacity: 0.7;
}
.ze-vitrine-devis-form input:focus,
.ze-vitrine-devis-form select:focus,
.ze-vitrine-devis-form textarea:focus {
  border-color: var(--ze-or);
  box-shadow: 0 0 0 3px rgba(184,131,10,0.12);
  background: var(--ze-blanc);
}
.ze-vitrine-devis-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6560' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.ze-vitrine-devis-form textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.65;
}

/* ── Radios "type de client" ── */
.ze-vitrine-form-radios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.ze-vitrine-form-radio {
  min-width: 0;
  position: relative;
}
.ze-vitrine-form-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.ze-vitrine-form-radio label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.2em 0.8em;
  background: var(--ze-ivoire);
  border: 1.5px solid var(--ze-creme-foncee);
  border-radius: var(--ze-radius-sm);
  cursor: pointer;
  font-family: var(--ze-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ze-gris-fonce);
  transition: all var(--ze-transition);
  text-align: center;
  margin-bottom: 0;
}
.ze-vitrine-form-radio label svg {
  width: 22px;
  height: 22px;
  color: var(--ze-or);
  transition: color var(--ze-transition);
}
.ze-vitrine-form-radio input[type="radio"]:checked + label {
  background: var(--ze-charbon);
  border-color: var(--ze-charbon);
  color: white;
}
.ze-vitrine-form-radio input[type="radio"]:checked + label svg {
  color: var(--ze-or-clair);
}
.ze-vitrine-form-radio label:hover {
  border-color: var(--ze-or);
  color: var(--ze-charbon);
}

/* ── Titre de section dans le formulaire ── */
.ze-vitrine-form-section-title {
  font-family: var(--ze-font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ze-or-clair);
  margin: 2rem 0 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ze-creme);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ze-vitrine-form-section-title svg { opacity: 0.7; }

/* ── Consentement RGPD ── */
.ze-vitrine-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 1.8rem;
  margin-bottom: 1.8rem;
}
.ze-vitrine-form-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--ze-or);
  cursor: pointer;
}
.ze-vitrine-form-consent label {
  font-family: var(--ze-font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ze-gris);
  line-height: 1.6;
  margin-bottom: 0;
}
.ze-vitrine-form-consent label a {
  color: var(--ze-charbon);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Submit ── */
.ze-vitrine-form-submit-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.ze-vitrine-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 1em 2.4em;
  background: var(--ze-or);
  color: var(--ze-charbon);
  font-family: var(--ze-font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--ze-radius-pill);
  cursor: pointer;
  box-shadow: var(--ze-shadow-or);
  transition: background var(--ze-transition), transform var(--ze-transition), box-shadow var(--ze-transition);
}
.ze-vitrine-form-submit:hover:not(:disabled) {
  background: var(--ze-or-clair);
  transform: translateY(-2px);
}
.ze-vitrine-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ze-vitrine-form-submit-note {
  font-family: var(--ze-font-sans);
  font-size: 0.75rem;
  color: var(--ze-gris);
  font-weight: 300;
}

/* ── États d'erreur ── */
.ze-vitrine-form--error input,
.ze-vitrine-form--error select,
.ze-vitrine-form--error textarea {
  border-color: var(--ze-rouge) !important;
}
.ze-vitrine-form--error .ze-vitrine-form-radio label {
  border-color: var(--ze-rouge);
}
.ze-vitrine-field-error {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--ze-font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ze-rouge);
}

/* ── Feedback global (en cas d'erreur réseau ou serveur) ── */
.ze-vitrine-form-feedback {
  margin-top: 1.2rem;
  font-family: var(--ze-font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  text-align: center;
}
.ze-vitrine-form-feedback--error { color: var(--ze-rouge); }

/* ── Honeypot anti-bot ── */
.ze-vitrine-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Message de succès (masqué par défaut) ── */
.ze-vitrine-form-success {
  display: none;
  text-align: center;
  padding: 3rem 2rem;
}
.ze-vitrine-form-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(184,131,10,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: var(--ze-or);
}
.ze-vitrine-form-success__title {
  font-family: var(--ze-font-serif);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--ze-charbon);
  margin: 0 0 0.8rem;
}
.ze-vitrine-form-success__text {
  font-family: var(--ze-font-sans);
  font-size: 0.92rem;
  color: var(--ze-gris);
  line-height: 1.8;
  max-width: 360px;
  margin: 0 auto;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .ze-vitrine-contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .ze-vitrine-contact-infos {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
  }
  .ze-vitrine-contact-infos__heading { grid-column: 1 / -1; }
  .ze-vitrine-contact-engagements    { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .ze-vitrine-contact-infos { grid-template-columns: 1fr; order: 2; }
  .ze-vitrine-devis-form    { order: 1; }
  .ze-vitrine-form-row      { grid-template-columns: 1fr; }
  .ze-vitrine-form-radios   { grid-template-columns: repeat(2, 1fr); }
  .ze-vitrine-form-submit-wrap { flex-direction: column; align-items: stretch; }
  .ze-vitrine-form-submit      { justify-content: center; }
}