/* Contact page modern redesign */

/* Hero Section */
.contact-hero {
  margin: 10px auto 24px;
  padding: 56px 20px;
  max-width: var(--largeur-site, 1200px);
  /* Bloc carbone : aplat opaque, arete vive, plus de cerne lime decoratif.
     Le lime revient uniquement par la barre de course sous le titre. */
  border-radius: var(--radius-lg);
  background: var(--carbon);
  border: 1px solid var(--border-color);
  text-align: left;
  box-shadow: none;
}

/* Conteneur centre en largeur : le margin auto reste, il ne centre pas du texte. */
.hero-content { max-width: 800px; margin: 0 auto; }

.hero-title {
  margin: 0 0 10px;
  font-size: clamp(32px, 5vw, 48px);
  text-align: left;
}

.hero-title .title-text {
  /* Le titre reste en couleur pleine de texte : le lime est porte par la barre
     de course sous le titre, pas par le titre lui-meme. Un accent qui remplit
     les titres cesse d'etre un accent. */
  color: var(--text-primary);
}

.hero-subtitle {
  color: var(--muted);
  margin: 0;
  max-width: var(--container-text);
  font-size: clamp(16px, 2vw, 18px);
}

.hero-highlights {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.hero-pill {
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--card-bg-hover);
  border: 1px solid var(--border-color);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 700;
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 24px;
}

.hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

/* Une seule action porte l'aplat vert : la hierarchie se lit d'un coup d'oeil. */
.hero-action.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid var(--accent-ink);
}

.hero-action.primary:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
}

.hero-action.secondary {
  color: var(--text-primary);
  border: 2px solid var(--border-control);
  background: transparent;
}

.hero-action.secondary:hover {
  border-color: var(--accent-line);
  color: var(--accent-text);
}

.hero-action:hover {
  transform: translateY(-2px);
}

/* Contact Methods Cards */
.contact-methods {
  max-width: var(--largeur-site, 1200px);
  margin: 0 auto 40px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 420px));
  justify-content: center;
  gap: 24px;
}

.method-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 32px 24px;
  text-align: left;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

/* Le lime en bordure est reserve aux etats : ici le survol, nulle part au repos. */
.method-card:hover {
  transform: translateY(-4px);
  background: var(--card-bg-hover);
  border-color: var(--accent-line);
}

.method-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.method-title {
  margin: 0 0 12px;
  color: var(--text);
  font-size: clamp(18px, 2vw, 22px);
  text-align: left;
}

.method-description {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* Form Section */
.contact-form-section {
  max-width: var(--largeur-site, 1200px);
  margin: 0 auto 40px;
  padding: 0 20px;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.contact-sidebar {
  display: grid;
  gap: 16px;
}

.sidebar-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 22px;
  box-shadow: none;
}

/* Panneau statique : l'emphase passe par la surface, pas par un cerne lime. */
.sidebar-card.emphasis {
  border-color: var(--border-color);
  background: var(--card-bg-hover);
}

.sidebar-card h3 {
  margin: 0 0 10px;
  color: var(--text);
}

.sidebar-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.sidebar-kicker {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.sidebar-list li + li {
  margin-top: 8px;
}

/* Lien autonome : cible tactile de 44px, donc inline-flex sinon min-height reste inerte. */
.contact-mail-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-bottom: 10px;
  color: var(--accent-text);
  font-weight: 700;
  text-decoration: none;
}

.form-header {
  text-align: left;
  margin-bottom: 32px;
}

.section-title {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 36px);
  text-align: left;
}

.section-title .title-text {
  /* Couleur pleine : la barre de course sous le titre porte deja le lime. */
  color: var(--text-primary);
}

.section-description {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-base);
  max-width: var(--container-text);
  text-align: left;
}

/* Contact Form */
.contact-form {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: none;
}

.spam-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-grid-top {
  margin-bottom: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
}

/* Champs : fond opaque, bordure de controle 2px, hauteur de saisie 48px. */
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-control);
  background: var(--field-bg);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  font-size: var(--text-base);
  font-family: inherit;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--field-placeholder);
}

/* Le lime revient ici : la prise de focus est un etat, c'est sa place. */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent-line);
  box-shadow: none;
  background: var(--field-bg);
}

.form-group select {
  appearance: none;
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.field-help {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.form-meta {
  margin: 24px 0 18px;
}

.form-consent {
  display: flex;
  align-items: start;
  gap: 12px;
  margin: 24px 0;
}

.form-consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  /* Sans flex-shrink: 0, la case est compressible : dans un conteneur flex en
     nowrap, un libelle long la ecrase sous ses 20px sur les ecrans etroits. */
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* La case fait 20px par necessite visuelle : c'est son libelle, cliquable lui
   aussi, qui porte la cible tactile de 44px. */
.form-consent label {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  cursor: pointer;
}

.form-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.form-status {
  min-height: 24px;
  margin: 0 0 16px;
  color: var(--text);
  font-weight: 700;
}

.form-status.is-error {
  color: #ff9a9a;
}

.form-status.is-success {
  color: var(--accent-text);
}

/* Submit Button */
/* Action primaire de la page : aplat lime, encre sombre, contour d'encre. */
.submit-btn {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 2px solid var(--accent-ink);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.submit-btn:disabled {
  opacity: 0.72;
  cursor: wait;
  transform: none;
}

/* Le voile blanc qui grossissait au survol delavait l'aplat lime : le survol
   passe desormais par var(--accent-hover), qui monte le contraste au lieu de
   le baisser. Le pseudo-element reste, neutralise. */
.submit-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.submit-btn:hover::before {
  width: 400px;
  height: 400px;
}

.submit-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}

.submit-btn:active {
  transform: translateY(0);
}

.submit-btn svg {
  position: relative;
  z-index: 1;
}

.submit-btn span {
  position: relative;
  z-index: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-hero { padding: 40px 16px; }

  .hero-actions {
    flex-direction: column;
  }

  .hero-action {
    width: 100%;
  }
  
  .contact-methods {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }
  
  .contact-form {
    padding: 24px 20px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .submit-btn {
    font-size: var(--text-base);
    min-height: 48px;
    padding: 0 var(--space-5);
  }
}

@media (max-width: 600px) {
  .method-icon { font-size: 40px; }
  .method-title { font-size: 18px; }
  .method-description { font-size: 14px; }
}

/* ---- Bande tablette ----
   Ces grilles passaient a une colonne des 768px (900px pour certaines), soit
   en pleine tablette : les cartes prenaient toute la largeur et la page
   devenait une longue colonne. Deux colonnes sont retablies jusqu'a 600px,
   ou une colonne unique devient reellement justifiee.
   Regle ajoutee en fin de fichier : a specificite egale, elle l'emporte sur
   la media query d'origine par l'ordre de declaration. */
@media (min-width: 601px) and (max-width: 900px) {
  .contact-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}