/* =====================================================================
   Page Contact (/contact/) — src/contact.njk
   « Page violette » (AGENTS.md §13, désignée par Christian le 01/10/2026) :
   fond blanc, texte noir, accents --nc-violet-page à la place du magenta ;
   le magenta reste réservé aux états d’erreur. Uniquement les
   jetons de tokens.css et les composants partagés (boutons, fil d'Ariane,
   .nc-heading) ; aucune règle globale n'est modifiée ici.
   Ordinateur (≥ 820 px) : introduction et coordonnées | formulaire.
   Mobile : introduction, coordonnées, puis formulaire.
   ===================================================================== */

.nc-contact {
  --nc-contact-flow: clamp(13px, 1.1vw, 24px);
  --nc-contact-measure: 40rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nc-pad-section-md) clamp(32px, 4vw, 104px);
  padding: clamp(26px, 2.8vw, 68px) var(--nc-pad-inline) var(--nc-pad-section-lg);
  background: var(--nc-blanc);
  color: var(--nc-noir);
}

@media (min-width: 820px) {
  .nc-contact {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

/* ----- Colonne gauche : introduction et coordonnées ----- */
.nc-contact__intro {
  display: flex;
  flex-direction: column;
  gap: var(--nc-contact-flow);
}

/* Fil d'Ariane intégré à la colonne (variante "hero", AGENTS.md §5) : pas
   de padding propre, pas de bande autonome. */
.nc-contact .nc-breadcrumbs--hero {
  padding: 0;
}

.nc-contact__title {
  font-size: clamp(2rem, 3.6vw, 4.75rem);
  max-width: 18ch;
  text-wrap: balance;
}

/* Paragraphe éditorial du hero : corps de texte, justifié, dernière ligne
   à gauche, sans césure (AGENTS.md §5). */
.nc-contact__lead {
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-noir);
  max-width: var(--nc-contact-measure);
  text-align: justify;
  text-align-last: left;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
}

.nc-contact__coords {
  list-style: none;
  margin: clamp(8px, 1vw, 20px) 0 0;
  padding: 0;
  max-width: var(--nc-contact-measure);
  border-bottom: var(--nc-bordure);
}

.nc-contact__coord {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: clamp(12px, 1vw, 20px) 0;
  border-top: var(--nc-bordure);
}

.nc-contact__coord-label {
  font: 400 var(--nc-text-meta) var(--nc-police-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nc-gris-600);
}

.nc-contact__coord-value {
  font: 700 var(--nc-text-cta) var(--nc-police-texte);
  color: var(--nc-noir);
}

a.nc-contact__coord-value {
  border-bottom: 2px solid var(--nc-violet-page);
  padding-bottom: 2px;
  transition: color var(--nc-transition-rapide), background-color var(--nc-transition-rapide);
}

a.nc-contact__coord-value:hover,
a.nc-contact__coord-value:focus-visible {
  color: var(--nc-violet-page);
}

/* Précision courte sous les coordonnées (envoi de fichiers). */
.nc-contact__note {
  font: 400 var(--nc-text-secondary) var(--nc-police-texte);
  line-height: 1.5;
  color: var(--nc-gris-600);
  max-width: var(--nc-contact-measure);
}

/* Zone d'intervention (09/10/2026) : sous les coordonnées, filet violet
   court au-dessus du titre (accent des pages violettes, AGENTS.md §13). */
.nc-contact__zone {
  display: flex;
  flex-direction: column;
  gap: var(--nc-contact-flow);
  max-width: var(--nc-contact-measure);
  margin-top: clamp(12px, 1.6vw, 36px);
  padding-top: clamp(16px, 1.4vw, 28px);
  border-top: 4px solid var(--nc-violet-page);
}

.nc-contact__zone-title {
  font: 400 clamp(1.25rem, 1.6vw, 2rem)/1.1 var(--nc-police-titre);
  text-transform: uppercase;
  color: var(--nc-noir);
  text-wrap: balance;
}

.nc-contact__zone-text {
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-noir);
  text-align: justify;
  text-align-last: left;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
}

/* ----- Colonne droite : formulaire ----- */
.nc-contact__form-col {
  position: relative;
  border: var(--nc-bordure);
  background: var(--nc-blanc);
}

/* Filet des pages violettes : violet 50 %, puis cyan, magenta et jaune à
   parts égales (1/6 chacun), dans cet ordre, paliers nets (AGENTS.md §13). */
.nc-contact__bar {
  display: block;
  height: clamp(6px, .5vw, 11px);
  background: linear-gradient(90deg,
    var(--nc-violet-page) 0% 50%,
    var(--nc-cyan) 50% 66.667%,
    var(--nc-magenta) 66.667% 83.333%,
    var(--nc-jaune) 83.333% 100%);
}

.nc-contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.4vw, 28px);
  padding: clamp(18px, 2.2vw, 52px) clamp(14px, 2.2vw, 52px) clamp(22px, 2.4vw, 56px);
}

.nc-contact-form__title {
  font-size: clamp(1.5rem, 2.3vw, 3rem);
  max-width: 24ch;
  text-wrap: balance;
}

.nc-contact-form__note {
  font: 400 var(--nc-text-secondary) var(--nc-police-texte);
  line-height: 1.5;
  color: var(--nc-gris-600);
}

.nc-contact-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.4vw, 28px) clamp(16px, 1.6vw, 32px);
}

@media (min-width: 1200px) {
  .nc-contact-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----- Champs ----- */
.nc-contact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.nc-contact-field label {
  font: 600 var(--nc-text-body) var(--nc-police-texte);
  color: var(--nc-noir);
}

.nc-contact-field input,
.nc-contact-field select,
.nc-contact-field textarea {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(11px, .9vw, 16px) clamp(12px, 1vw, 18px);
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.4;
  color: var(--nc-noir);
  background: var(--nc-blanc);
  border: 1px solid var(--nc-noir);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px transparent;
  transition: border-color var(--nc-transition-rapide), box-shadow var(--nc-transition-rapide);
}

.nc-contact-field textarea {
  min-height: 10rem;
  resize: vertical;
}

.nc-contact-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--nc-noir) 50%),
    linear-gradient(135deg, var(--nc-noir) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Focus : contour violet bien visible, distinct de l'état d'erreur (magenta). */
.nc-contact-field input:focus-visible,
.nc-contact-field select:focus-visible,
.nc-contact-field textarea:focus-visible {
  outline: 3px solid var(--nc-violet-page);
  outline-offset: 2px;
}

/* Erreur : bordure doublée magenta + message sous le champ. */
.nc-contact-field [aria-invalid="true"] {
  border-color: var(--nc-magenta);
  box-shadow: inset 0 0 0 1px var(--nc-magenta);
}

.nc-contact-field__help {
  font: 400 var(--nc-text-secondary) var(--nc-police-texte);
  line-height: 1.5;
  color: var(--nc-gris-600);
}

.nc-contact-field__error {
  font: 600 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.45;
  color: var(--nc-magenta);
}

.nc-contact-field__error::before {
  content: "! ";
  font-family: var(--nc-police-mono);
}

/* Champ piège : hors écran, jamais visible ni atteignable au clavier. */
.nc-contact-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nc-contact-form__captcha {
  min-height: 78px;
}

@media (max-width: 359px) {
  .nc-contact-form__captcha .g-recaptcha {
    transform: scale(.9);
    transform-origin: 0 0;
  }
}

/* ----- Messages d'envoi (succès / échec / CAPTCHA) ----- */
.nc-contact-form__status,
.nc-contact-form__fallback {
  padding: clamp(14px, 1.2vw, 22px) clamp(14px, 1.2vw, 24px);
  border: var(--nc-bordure);
  border-left-width: 8px;
  font: 600 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.5;
  color: var(--nc-noir);
  background: var(--nc-blanc);
}

.nc-contact-form__status:focus {
  outline: 3px solid var(--nc-violet-page);
  outline-offset: 2px;
}

.nc-contact-form__status[hidden] {
  display: none;
}

.nc-contact-form__status--ok,
.nc-contact-form__fallback--ok {
  border-left-color: var(--nc-cyan);
}

.nc-contact-form__status--erreur,
.nc-contact-form__fallback--erreur {
  border-left-color: var(--nc-magenta);
}

/* Retours sans JavaScript : affichés seulement quand le traitement PHP
   redirige vers l'ancre correspondante (#demande-envoyee / #demande-erreur). */
.nc-contact-form__fallback {
  display: none;
}

.nc-contact-form__fallback:target {
  display: block;
}

/* ----- Bouton d'envoi ----- */
.nc-contact-form__submit {
  align-self: flex-start;
}

/* Bouton noir : survol et focus violets sur cette page (au lieu du
   magenta de .btn--dark). */
.nc-contact-form__submit:hover,
.nc-contact-form__submit:focus-visible {
  background: var(--nc-violet-page);
  color: var(--nc-blanc);
}

.nc-contact-form__submit:focus-visible {
  outline: 3px solid var(--nc-violet-page);
  outline-offset: 3px;
}

.nc-contact-form__submit[disabled] {
  cursor: progress;
  background: var(--nc-gris-600);
  color: var(--nc-blanc);
}

.nc-contact-form__submit[disabled] .btn__arrow {
  transform: none;
}