/* ============================================================
   TOUITIGROUP — contact.css
   Section Contact : image de fond décorative (IMG-090, alt="",
   aria-hidden) + voile + contenu (coordonnées, carte, formulaire).
   Chargé par : index.html et ar/index.html (section #contact), et par
   les pages fr/contact/ et ar/contact/ (bloc « .contact-page » en fin de fichier).
   « #contact.contact-section » : prioritaire sur « #contact » (CSS de
   index.html) ; chargé après images.css (« .img-wrap »).
   ============================================================ */

#contact.contact-section { position: relative; padding: 100px 40px; overflow: hidden; }
.contact-section .contact-bg-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.contact-section .contact-bg-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.contact-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.80) 50%, rgba(10,10,10,0.90) 100%);
}
.contact-content { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; }
#contact.contact-section::before { z-index: 3; } /* filet doré du haut, au-dessus de l'image */
.contact-section .contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); /* 40 % / 60 % sans débordement dû au gap */
  gap: 60px;
}

@media (max-width: 768px) {
  #contact.contact-section { padding: 60px 20px; }
  .contact-section .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}


/* ============================================================
   Page Contact dédiée (/fr/contact/, /ar/contact/) — nouveau système
   Tout est préfixé « .contact-page » : aucun effet sur la section
   #contact de l'accueil (styles inline de index.html / identity.css).
   Hero + fil d'Ariane : .service-hero de service.css.
   ============================================================ */

.contact-page { padding-block: var(--tg-space-2xl) var(--tg-section-y); }
.contact-page .contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--tg-space-xl), 5vw, var(--tg-space-2xl));
  align-items: start;
}

/* ----- Colonne coordonnées ----- */
.contact-page .contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-page .contact-item {
  display: flex;
  gap: var(--tg-space-md);
  align-items: flex-start;
  padding: var(--tg-space-lg);
  background: var(--tg-color-dark);
  border: 1px solid var(--tg-color-border);
  border-radius: var(--tg-radius-sm);
  transition: border-color var(--tg-duration) var(--tg-ease);
}
.contact-page .contact-item:hover { border-color: var(--tg-color-border-strong); }
.contact-page .contact-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--tg-color-gold);
  border: 1px solid var(--tg-color-gold);
  border-radius: var(--tg-radius-sm);
}
.contact-page .contact-item-icon svg { width: 1.25rem; height: 1.25rem; }
.contact-page .contact-item-label {
  margin-bottom: var(--tg-space-xs);
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-semibold);
  letter-spacing: var(--tg-tracking-wider);
  text-transform: uppercase;
  color: var(--tg-color-gold);
}
.contact-page .contact-item-value {
  font-size: var(--tg-text-base);
  line-height: 1.6;
  color: var(--tg-color-text);
}
.contact-page .contact-item-value a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tg-duration) var(--tg-ease);
}
.contact-page .contact-item-value a:hover { color: var(--tg-color-gold-highlight); }
.contact-page .contact-item-note { font-size: var(--tg-text-sm); color: var(--tg-color-text-muted); }
:lang(ar) .contact-page .contact-item-label { letter-spacing: 0; }

/* ----- Carte Google Maps ----- */
.contact-page .map-wrap {
  margin-top: var(--tg-space-lg);
  overflow: hidden;
  border: 1px solid var(--tg-color-border-strong);
  border-radius: var(--tg-radius-sm);
}
.contact-page .map-wrap iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
  filter: grayscale(1) invert(0.9) contrast(0.85); /* carte assortie au fond noir (comme l'accueil) */
}
.contact-page .map-gbp-link {
  display: inline-block;
  margin-top: var(--tg-space-sm);
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-semibold);
  color: var(--tg-color-gold);
  text-decoration: none;
}
.contact-page .map-gbp-link:hover { color: var(--tg-color-gold-highlight); }

/* ----- Colonne formulaire ----- */
.contact-page .contact-form {
  padding: clamp(var(--tg-space-lg), 4vw, var(--tg-space-xl));
  background: var(--tg-color-dark);
  border: 1px solid var(--tg-color-border-strong);
  border-radius: var(--tg-radius-md);
}
.contact-page .contact-form-title { margin-bottom: var(--tg-space-sm); font-size: var(--tg-text-h3); }
.contact-page .contact-form-intro {
  margin-bottom: var(--tg-space-lg);
  font-size: var(--tg-text-sm);
  color: var(--tg-color-text-muted);
}
.contact-page .quote-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tg-space-md);
}
.contact-page .form-field { display: flex; flex-direction: column; gap: var(--tg-space-xs); }
.contact-page .form-field--full,
.contact-page .form-consent,
.contact-page .quote-form .tg-btn,
.contact-page .form-status { grid-column: 1 / -1; }
.contact-page .form-field label {
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-medium);
  color: var(--tg-color-text);
}
.contact-page .form-req { color: var(--tg-color-gold); }
.contact-page .form-opt { font-weight: var(--tg-weight-regular); color: var(--tg-color-text-subtle); }
.contact-page .quote-form input,
.contact-page .quote-form select,
.contact-page .quote-form textarea {
  width: 100%;
  min-height: var(--tg-control-h);
  padding: 0.75rem var(--tg-space-md);
  font: inherit;
  font-size: var(--tg-text-base); /* 16px : pas de zoom automatique sur iOS */
  color: var(--tg-color-text);
  background: var(--tg-color-black);
  border: 1px solid var(--tg-color-border-strong);
  border-radius: var(--tg-radius-sm);
  transition: border-color var(--tg-duration) var(--tg-ease);
}
.contact-page .quote-form textarea { min-height: 7.5rem; resize: vertical; }
.contact-page .quote-form select {
  appearance: none;
  cursor: pointer;
  padding-inline-end: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--tg-color-gold) 50%),
                    linear-gradient(135deg, var(--tg-color-gold) 50%, transparent 50%);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-position: right 1.25rem center, right 0.9rem center;
}
[dir="rtl"] .contact-page .quote-form select { background-position: left 0.9rem center, left 1.25rem center; }
.contact-page .quote-form select option { color: var(--tg-color-text); background: var(--tg-color-dark-2); }
.contact-page .quote-form ::placeholder { color: var(--tg-color-text-subtle); }
.contact-page .quote-form input:focus-visible,
.contact-page .quote-form select:focus-visible,
.contact-page .quote-form textarea:focus-visible {
  outline: var(--tg-focus-ring);
  outline-offset: 1px;
  border-color: var(--tg-color-gold);
}
.contact-page .quote-form .is-touched:invalid { border-color: var(--tg-color-gold-highlight); }

/* Case à cocher (consentement loi 09-08) */
.contact-page .form-consent {
  display: flex;
  gap: var(--tg-space-sm);
  align-items: flex-start;
  font-size: var(--tg-text-sm);
  line-height: 1.6;
  color: var(--tg-color-text-muted);
}
.contact-page .form-consent input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin-top: 0.15rem;
  padding: 0;
  accent-color: var(--tg-color-gold);
  cursor: pointer;
}
.contact-page .form-consent a { color: var(--tg-color-gold); }
.contact-page .form-consent a:hover { color: var(--tg-color-gold-highlight); }

/* Bouton d'envoi + message de confirmation */
.contact-page .quote-form .tg-btn { width: 100%; margin-top: var(--tg-space-xs); }
.contact-page .form-status {
  padding: var(--tg-space-md);
  font-size: var(--tg-text-sm);
  color: var(--tg-color-text);
  background: var(--tg-color-gold-light);
  border: 1px solid var(--tg-color-border-strong);
  border-radius: var(--tg-radius-sm);
}
.contact-page .form-status[hidden] { display: none; }
.contact-page .form-note a,
.contact-page .form-status a { color: var(--tg-color-gold); }
.contact-page .form-note { margin-top: var(--tg-space-md); font-size: var(--tg-text-xs); color: var(--tg-color-text-subtle); }

@media (max-width: 1024px) {
  .contact-page .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .contact-page .quote-form { grid-template-columns: 1fr; }
  .contact-page .contact-item { padding: var(--tg-space-md); }
}