.contact-hero { padding:clamp(58px,8vw,115px) clamp(24px,8vw,120px) 55px;border-bottom:1px solid var(--border);background:radial-gradient(circle at 78% 45%,color-mix(in srgb,var(--amber) 12%,transparent),transparent 26%); }
/* Typographie du bandeau : règle partagée des héros, dans style.css. */
.contact-hero .lede{max-width:55ch}
.contact-dossier { border:1px solid var(--border2);border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:0 35px 90px color-mix(in srgb,var(--bg) 45%,transparent) }
.contact-dossier__entete { padding:clamp(26px,4vw,50px);border-bottom:1px solid var(--border);background:linear-gradient(120deg,var(--surface),var(--bg)) }.contact-dossier__entete h2{max-width:18ch}.contact-dossier__entete>p:last-child{color:var(--muted)}.contact-dossier__numero{font:600 10px var(--mono);color:var(--amber);letter-spacing:.1em}
.formulaire-guide { padding:clamp(24px,5vw,62px);max-width:none }.formulaire-guide fieldset{border:0;padding:0;margin:0 0 34px}.formulaire-guide legend{font-weight:650;margin-bottom:12px}.formulaire-guide__grille{display:grid;grid-template-columns:1fr 1fr;gap:18px}.formulaire-guide p{max-width:none}.formulaire-guide label:not(.choix-projet label){font-size:13px}
.choix-projet { display:grid;grid-template-columns:repeat(3,1fr);gap:12px }.choix-projet legend{grid-column:1/-1}.choix-projet label{position:relative;display:block;min-height:150px;padding:24px;border:1px solid var(--border2);border-radius:12px;cursor:pointer;background:var(--bg)}.choix-projet input{position:absolute;right:16px;top:16px;width:18px;height:18px;accent-color:var(--amber)}.choix-projet span{display:flex;flex-direction:column;gap:9px;padding-right:14px}.choix-projet b{font-size:18px}.choix-projet small{color:var(--muted);font-size:13px;line-height:1.5}.choix-projet label:has(input:checked){border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber);background:var(--amber-wash)}
.groupe-conditionnel { padding:24px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--bg) }.groupe-conditionnel[hidden],.choix-formule[hidden]{display:none}.notice-agenda{margin:18px 0 0;padding:14px 16px;border-left:2px solid var(--amber);background:var(--amber-wash);color:var(--text);font-size:13px}.choix-canaux{display:flex!important;flex-wrap:wrap;gap:12px 22px;margin:8px 0 0!important}.choix-canaux legend{width:100%}.choix-canaux label,.choix-formule label{display:inline-flex;align-items:center;gap:8px;min-height:44px}.choix-canaux input,.choix-formule input{width:18px;height:18px;accent-color:var(--amber)}
.choix-formule{display:flex;gap:10px 25px;flex-wrap:wrap;padding:20px 0!important;border-top:1px solid var(--border)!important;border-bottom:1px solid var(--border)!important}.choix-formule legend{width:100%}.formulaire-guide__grille--identite{margin-top:28px}.formulaire-guide__envoi{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px}.formulaire-guide__envoi p{margin:0;color:var(--muted);font:500 11px var(--mono)}
.contact-reperes { display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 26px;border-top:1px solid var(--border);border-bottom:1px solid var(--border) }.contact-reperes div{padding:22px;border-right:1px solid var(--border)}.contact-reperes div:last-child{border-right:0}.contact-reperes span{display:block;color:var(--amber);font:600 10px var(--mono);margin-bottom:20px}.contact-reperes b{font-size:14px}.contact-reperes p{font-size:12px;color:var(--muted);line-height:1.5}
@media(max-width:760px){.contact-hero{padding:54px 20px}.choix-projet,.formulaire-guide__grille{grid-template-columns:1fr}.choix-projet label{min-height:118px}.contact-reperes{grid-template-columns:1fr 1fr}.contact-reperes div:nth-child(2){border-right:0}.contact-reperes div{border-bottom:1px solid var(--border)}}
@media(prefers-reduced-motion:reduce){.choix-projet label{transition:none}}

/* ⚠️ L'ADRESSE DIRECTE, AJOUTÉE LE 13 AOÛT 2026. Jusque-là, contact@southcode.fr
   figurait dans contact.php, les données structurées de l'accueil, la page de
   remerciement et les mentions légales — partout SAUF sur la page contact. Un
   visiteur qui préfère écrire librement n'avait aucune porte : le formulaire
   était le seul chemin. Pour une clientèle de commerces et d'artisans, c'était
   un filtre involontaire. */
.contact-direct {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  max-width: 62ch; margin: 26px 0 0; padding-top: 22px;
  border-top: 1px solid var(--border);
}
.contact-direct a {
  font: 600 clamp(1.05rem, 1.6vw, 1.35rem) var(--mono);
  color: var(--amber); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
}
.contact-direct a:hover { border-bottom-color: var(--amber); }
.contact-direct span { color: var(--muted); font-size: 14px; line-height: 1.55; }

#contact-echec { display:none; max-width:62ch; margin:22px 0 0; padding:14px 16px; border-left:3px solid var(--red); background:color-mix(in srgb,var(--red) 12%,var(--surface)); color:var(--text); }
#contact-echec:target { display:block; }

/* Le dépliant des questions facultatives. <details> natif : aucun JavaScript,
   il fonctionne script désactivé, se pilote au clavier et les lecteurs d'écran
   annoncent son état. Une version maison en aurait coûté trois fois plus pour
   faire moins bien. */
.contact-details { margin: 0 0 30px; border-top: 1px solid var(--border); }
.contact-details > summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 16px 0; cursor: pointer;
  color: var(--text); font: 600 13px var(--mono);
  text-transform: uppercase; letter-spacing: .08em;
  list-style: none;
}
.contact-details > summary::-webkit-details-marker { display: none; }
/* Le chevron tourne à l'ouverture : c'est le seul indice d'état, il ne doit pas
   dépendre de la couleur seule. */
.contact-details > summary::before {
  content: ''; flex: none;
  width: 8px; height: 8px;
  border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber);
  rotate: -45deg; translate: 0 -2px;
  transition: rotate .2s ease;
}
.contact-details[open] > summary::before { rotate: 45deg; translate: 0 -3px; }
.contact-details > summary .facultatif { text-transform: none; letter-spacing: 0; }
.contact-details__corps { padding-top: 8px; }
.contact-details__corps > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .contact-details > summary::before { transition: none; }
}