/* page-contact.css — ce qui appartient en propre à contact.
 *
 * Le commun vit dans style.css. Ce fichier ne contient que les écarts :
 * 0 règles strictement identiques à style.css ont été retirées,
 * 26 conservées. À charger APRÈS style.css.
 *
 * Extrait le 10-08-2026 par _gabarit-css.py.
 */

/* OFFICE CARDS — accent top-line on hover */
  .office {
    position: relative;
  }

.office::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
    opacity: 0;
    transition: opacity 0.4s;
  }

.office:hover::before { opacity: 1; }

/* CONTACT SECTION */
  .contact-section {
    padding: 8rem 4rem;
  }

/* Left col copy block */
  .contact-left {
    position: sticky;
    top: 8rem;
  }

.contact-left .section-title {
    max-width: none;
  }

.contact-intro {
    font-size: 0.97rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.9;
    margin-bottom: 1.75rem;
  }

.contact-aside-note {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
  }

.contact-aside-note-icon {
    font-family: var(--display);
    font-size: 0.8rem;
    color: var(--accent-pale);
    opacity: 0.7;
    flex-shrink: 0;
    margin-top: 2px;
  }

.contact-aside-note p {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.75;
  }

/* FORM WRAPPER CARD */
  .contact-form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 3.5rem;
    position: relative;
  }

.contact-form-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 2.5rem;
    right: 2.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }

/* Label with optional tag */
  .form-group label .optional {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-left: 0.4rem;
  }

/* Placeholder color */
  .form-group input::placeholder,
  .form-group textarea::placeholder {
    color: rgba(122,133,152,0.45);
  }

/* Error state */
  .form-group input.error,
  .form-group select.error,
  .form-group textarea.error {
    border-color: rgba(160, 80, 80, 0.5);
  }

/* Submit full-width */
  .btn-submit {
    width: 100%;
    text-align: center;
  }

/* SUCCESS STATE */
  .form-success {
    display: none;
    text-align: center;
    padding: 3rem 1.5rem;
  }

.form-success.active {
    display: block;
  }

.form-success-icon {
    font-family: var(--display);
    font-size: 2.8rem;
    color: var(--accent-pale);
    margin-bottom: 1.5rem;
    opacity: 0.7;
  }

.form-success h3 {
    font-family: var(--display);
    font-size: 1.7rem;
    font-weight: 400;
    margin-bottom: 1rem;
  }

.form-success p {
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.75;
    max-width: 380px;
    margin: 0 auto;
  }

/* CONFIDENTIALITY BAND */
  .confidentiality-band {
    padding: 2.5rem 4rem 5rem;
    text-align: center;
  }

.confidentiality-band .divider {
    padding: 0;
    margin-bottom: 2rem;
  }

.confidentiality-band .divider-line {
    max-width: 80px;
  }

.confidentiality-text {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    line-height: 1.8;
    max-width: 560px;
    margin: 0 auto;
  }

/* ── Points de rupture ── */

@media (max-width: 1024px) {
    .contact-section { padding: 6rem 2rem; }
    .contact-left { position: static; }
    .confidentiality-band { padding: 2rem 2rem 4rem; }
  }

@media (max-width: 768px) {
    .contact-form-card { padding: 2.5rem 2rem; }
  }

@media (max-width: 600px) {
    .contact-section { padding: 5rem 1.5rem; }
    .contact-form-card { padding: 2rem 1.25rem; }
    .confidentiality-band { padding: 1.5rem 1.5rem 3.5rem; }
  }

/* Image de cette page. Le traitement est commun, dans style.css. */
.hero {
  --hero-image: url('../webp/hero-cervin.webp');
  min-height: 52vh;
}

/* ─── Bureau unique ───────────────────────────────────────────────────────
 *
 * `.offices-row` est une grille de trois bureaux : son fond gris sert à
 * dessiner les séparateurs d'un pixel entre les cartes. Avec un seul bureau,
 * la carte ne remplit plus sa colonne et ce fond ressort sur le côté — d'où le
 * grand aplat gris à droite du texte.
 *
 * On sort donc du modèle « tableau » : plus de grille, plus de cadre. Un filet
 * doré, le nom de la ville, l'adresse, puis les deux moyens de contact
 * détachés — ce sont les seules actions du bloc, elles méritent de se voir.
 */
.offices-single {
  display: block;
  max-width: 30rem;
  margin: 3.5rem auto 0;
  padding: 0;
  background: none;
  border: none;
}

.offices-single .office {
  background: none;
  padding: 3rem 0 0;
  border-top: 1px solid var(--border);
  position: relative;
}

/* Le filet doré est permanent ici : sans deuxième bureau, il ne distingue
   plus rien, il ancre. */
.offices-single .office::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.offices-single .office:hover { background: none; }

.offices-single .office-city {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.offices-single .office-country { margin-bottom: 2rem; }

.offices-single .office-detail {
  line-height: 1.9 !important;
}

/* Téléphone et courriel, détachés de l'adresse postale. */
.offices-single .office-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.offices-single .office-contact a {
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text) !important;
  text-decoration: none;
  transition: color 0.3s;
}

.offices-single .office-contact a:hover { color: var(--gold-light) !important; }

@media (max-width: 768px) {
  .offices-single { margin-top: 1rem; }
  .offices-single .office-city { font-size: 1.6rem; }
}