/* ══════════════════════════════════════════════════════════
   Aurore Énergies · Gabarit E : page Contact et formulaire
   Spécification : « Page contact.dc.html », « Formulaire contact.dc.html »
   (handoff Claude Design). Chargée par contact.php seul ($page_css).
   Paliers : 768 (tablette) et 1024 (desktop). Classes préfixées contact-.
   Jetons du socle : --erreur (#B3261E), --bordure-champ (#8A877E)…
   Interligne : quand le handoff n'en fixe aucun (libellés, intro producteur,
   titre d'alerte, erreur du consentement, lien de retour, coordonnées), c'est
   l'interligne « normal » d'Urbanist, rendu ici par 1,2 comme dans le socle.
   ══════════════════════════════════════════════════════════ */

/* ── Colonne de la page ─────────────────────────────────── */
/* Le fil d'Ariane suit l'en-tête à 8 px ; --gut (posé sur .shell) donne la
   gouttière et plafonne la colonne à 1280 px au-delà de 1440 px. */
.contact-page {
  display: flex; flex-direction: column; gap: 28px;
  padding: 8px var(--gut) var(--py);
}
.contact-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }

.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 24px 28px; align-items: start;
}
.contact-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ── Carte blanche : formulaire ou message de succès ───── */
.contact-card {
  padding: 24px 20px;
  background: var(--white); border-radius: 28px;
}
.contact-form { display: flex; flex-direction: column; gap: 24px; }

/* ── Libellés, champs, messages d'erreur ────────────────── */
.contact-label { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.contact-label__hint { font-weight: 500; color: var(--muted); }

.contact-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.contact-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 16px; }

.contact-input {
  display: block; width: 100%; height: 52px; padding: 0 14px;
  border: 1.5px solid var(--bordure-champ); border-radius: 14px;
  background: var(--white); color: var(--ink);
  font: inherit; font-size: 16px; line-height: 1.5;
  -webkit-appearance: none; appearance: none;
}
.contact-input--area { height: auto; min-height: 52px; padding: 12px 14px; resize: vertical; }
/* Champ en erreur : bordure rouge de 2 px (padding compensé, le texte ne bouge pas). */
.contact-input[aria-invalid="true"] { border: 2px solid var(--erreur); padding: 0 13.5px; }
.contact-input--area[aria-invalid="true"] { padding: 11.5px 13.5px; }

.contact-error {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--erreur);
}
.contact-error__icon { flex: none; margin-top: 1px; }
/* Un nom de fichier long sans espace (« Facture_EDF_PDL_… ») coupe au lieu
   de déborder à 375 px (vérifié : +108 px sans cette règle). */
.contact-error > span { min-width: 0; overflow-wrap: anywhere; }

.contact-field__aide { font-size: 14px; line-height: 1.45; color: var(--muted); }

/* ── Parcours : boutons radio en cartes ─────────────────── */
.contact-parcours { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-parcours__legend { padding: 0; margin-bottom: 12px; }
.contact-parcours__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.contact-choice {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 12px 16px;
  border: 2px solid var(--line); border-radius: 16px;
  background: var(--white); cursor: pointer;
}
.contact-choice:hover { border-color: var(--bordure-champ); }
.contact-choice:has(.contact-choice__input:checked) { border-color: var(--ink); background: var(--tint); }
.contact-choice__input {
  flex: none; width: 22px; height: 22px; margin: 0;
  accent-color: var(--ink); cursor: pointer;
}
.contact-choice__text { font-size: 16px; font-weight: 700; line-height: 1.3; }

/* ── Bloc producteur ────────────────────────────────────── */
/* Montré par le CSS pour le seul parcours producteur. Sans JavaScript, un
   <noscript> du <head> (contact.php) le force visible, avec la mention
   « (producteurs uniquement) ». Sans :has(), contact.js prend le relais. */
.contact-prod {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px; border-radius: 20px; background: var(--tint);
}
.contact-form:has(.contact-choice__input[value="entreprise"]:checked) .contact-prod { display: none; }
.contact-prod__intro {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700; line-height: 1.2;
}
.contact-prod__disc {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink);
}
.contact-prod__sans-js { display: none; }

/* Champ à unité (kWc) : le focus se lit sur le cadre entier. */
.contact-unit {
  display: flex; align-items: center;
  width: 100%; max-width: 260px; height: 52px; overflow: hidden;
  border: 1.5px solid var(--bordure-champ); border-radius: 14px; background: var(--white);
}
.contact-unit:focus-within {
  outline: 2px solid var(--ink); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--yellow);
}
.contact-unit:has(.contact-unit__input[aria-invalid="true"]) { border: 2px solid var(--erreur); }
.contact-unit__input {
  flex: 1; min-width: 0; height: 100%; padding: 0 14px;
  border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 16px;
}
.contact-unit__input:focus-visible { outline: none; box-shadow: none; }
.contact-unit__suffix { flex: none; padding: 0 14px; font-size: 15px; font-weight: 700; color: var(--muted); }

/* ── Dépôt des factures ─────────────────────────────────── */
/* Version « avec pièce jointe » du handoff (« Formulaire contact.dc.html »,
   pj = vide / fichiers / erreur) : aide, liste des fichiers, erreur, puis
   zone en pointillés. Sans JavaScript, le champ natif reste tel quel ;
   contact.js pose .is-js et le rend transparent par-dessus la zone, qui
   reçoit alors le clic, le dépôt et le focus (anneau du socle). */
.contact-depot { gap: 10px; }

.contact-depot__zone { position: relative; min-width: 0; }
.contact-depot__input {
  display: block; width: 100%; max-width: 100%;
  font: inherit; font-size: 15px; color: var(--ink);
}
.contact-depot__invite { display: none; }

.contact-depot.is-js .contact-depot__zone {
  display: flex; align-items: center; justify-content: center;
  min-height: 64px; padding: 12px 16px;
  border: 2px dashed var(--bordure-champ); border-radius: 16px;
  background: var(--paper); cursor: pointer;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.contact-depot.is-js .contact-depot__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.contact-depot.is-js .contact-depot__invite {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-align: center; pointer-events: none;
}
.contact-depot__invite-icone { flex: none; }
.contact-depot__textes { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 6px; }
.contact-depot__titre { font-size: 15px; font-weight: 700; line-height: 1.3; }
.contact-depot__glisser { display: none; font-size: 15px; line-height: 1.3; color: var(--muted); }
/* « ou glissez-les ici » : seulement avec une souris (pas sur mobile). */
@media (hover: hover) and (pointer: fine) {
  .contact-depot__glisser { display: inline; }
}
.contact-depot.is-js .contact-depot__zone:hover,
.contact-depot.is-js .contact-depot__zone.is-drag { border-color: var(--ink); background: var(--tint); }
.contact-depot.is-js .contact-depot__zone:focus-within {
  outline: 2px solid var(--ink); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--yellow);
}
.contact-depot.is-js .contact-depot__input:focus-visible { outline: none; box-shadow: none; }
.contact-depot.is-invalid .contact-depot__zone { border-color: var(--erreur); }

/* Fichiers choisis (contact.js) : nom coupé par une ellipse, jamais de
   débordement à 375 px ; « Retirer » + nom lu par les lecteurs d'écran. */
.contact-depot__liste { display: flex; flex-direction: column; gap: 10px; }
.contact-depot__fichier {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 12px 10px 14px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper);
}
.contact-depot__icone { flex: none; color: var(--ink); }
.contact-depot__infos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.contact-depot__nom {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 700; line-height: 1.3;
}
.contact-depot__meta { font-size: 13px; line-height: 1.3; color: var(--muted); }
.contact-depot__fichier.is-refuse { border: 2px solid var(--erreur); background: var(--white); }
.contact-depot__fichier.is-refuse .contact-depot__icone,
.contact-depot__fichier.is-refuse .contact-depot__meta { color: var(--erreur); }
.contact-depot__retirer {
  flex: none; height: 40px; padding: 0 14px;
  border: 1.5px solid var(--ink); border-radius: var(--pill);
  background: var(--white); color: var(--ink);
  font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.contact-depot__retirer:hover { background: var(--ink); color: var(--yellow); }

/* Formulaire réaffiché : les fichiers sont à choisir de nouveau. */
.contact-depot__rappel {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink);
}
.contact-depot__rappel-icone { flex: none; margin-top: 1px; }

/* ── Consentement ───────────────────────────────────────── */
.contact-consent { display: flex; flex-direction: column; gap: 8px; }
.contact-consent__label {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  font-size: 15px; line-height: 1.5; color: var(--text-2);
}
.contact-consent__input {
  flex: none; width: 22px; height: 22px; margin: 1px 0 0;
  accent-color: var(--ink); cursor: pointer;
}
.contact-consent__label a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.contact-consent__label a:hover { text-decoration-thickness: 2px; }
.contact-consent__error {
  padding-left: 34px;
  font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--erreur);
}

/* ── Envoi ──────────────────────────────────────────────── */
.contact-submit { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.contact-submit__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 32px;
  border: 0; border-radius: var(--pill);
  background: var(--yellow); color: var(--ink);
  font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: background-color .15s ease-out, transform .15s ease-out;
}
.contact-submit__btn:hover { background: var(--yellow-hover); transform: translateY(-1px); }
.contact-submit__btn:focus-visible { outline-offset: 3px; }
.contact-submit__spinner { display: none; }
/* État « Envoi en cours… » (contact.js) : bouton inactif, fond #DDDAD0. */
.contact-submit__btn.is-sending,
.contact-submit__btn.is-sending:hover {
  background: var(--line); color: var(--text-2);
  cursor: not-allowed; transform: none;
}
.contact-submit__btn.is-sending .contact-submit__spinner {
  display: inline-flex;
  animation: contact-spin 1s linear infinite;
}
@keyframes contact-spin { to { transform: rotate(360deg); } }

.contact-submit__legal { font-size: 13px; line-height: 1.45; color: var(--muted); }
.contact-submit__legal a { color: var(--muted); text-decoration: underline; }
.contact-submit__legal a:hover { color: var(--ink); }
/* Information RGPD (toujours affichée) : l'adresse e-mail peut couper. */
.contact-submit__rgpd { max-width: 640px; overflow-wrap: anywhere; }
/* reCAPTCHA : mention textuelle sous le bouton, badge masqué (handoff). */
.grecaptcha-badge { visibility: hidden !important; }

/* Alerte et message de succès reçoivent le focus par script (tabindex="-1")
   pour être lus à l'arrivée : ce ne sont pas des commandes, pas de contour. */
.contact-alert:focus,
.contact-succes:focus { outline: none; box-shadow: none; }

/* ── Alertes en tête du formulaire (role="alert") ───────── */
.contact-alert {
  display: flex; gap: 14px;
  padding: 18px 20px;
  border: 2px solid var(--erreur); border-radius: 20px;
}
.contact-alert__icon { flex: none; color: var(--erreur); }
.contact-alert__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.contact-alert__body--message { gap: 10px; }
.contact-alert__title { font-size: 17px; font-weight: 800; line-height: 1.2; color: var(--erreur); }
/* Puces en encre : seuls les liens sont en rouge (handoff). */
.contact-alert__list {
  display: grid; gap: 4px;
  padding-left: 18px; list-style: disc;
  font-size: 15px; line-height: 1.45; color: var(--ink);
  overflow-wrap: anywhere;   /* nom de fichier long cité dans le récapitulatif */
}
.contact-alert__link {
  color: var(--erreur);
  text-decoration: underline; text-underline-offset: 3px;
}
.contact-alert__link:hover { color: var(--erreur); text-decoration-thickness: 2px; }
.contact-alert__text { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.contact-alert__tel {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 20px;
  border: 2px solid var(--ink); border-radius: var(--pill);
  font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.contact-alert__tel:hover { background: var(--ink); color: var(--yellow); }

/* ── Succès : le message remplace le formulaire ─────────── */
.contact-succes { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.contact-succes__disc {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--yellow);
}
.contact-succes__title { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.contact-succes__text  { font-size: 17px; line-height: 1.55; color: var(--text-2); }
.contact-succes__text2 { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.contact-succes__link {
  font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--ring);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.contact-succes__link:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ── Colonne d'informations ─────────────────────────────── */
.contact-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.contact-coords {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 28px 24px; border-radius: 28px;
  background: var(--ink); color: var(--white);
}
/* Fond encre : contour de focus jaune (règle du socle). */
.contact-coords :focus-visible { outline-color: var(--yellow); box-shadow: none; }
.contact-coords__title {
  font-size: 13px; font-weight: 700; line-height: 1.2;
  letter-spacing: .12em; text-transform: uppercase; color: var(--yellow);
}
.contact-coords__phone {
  font-size: 30px; font-weight: 800; line-height: 1.2;
  letter-spacing: -.02em; color: var(--white); white-space: nowrap;
}
.contact-coords__phone:hover { color: var(--yellow); }
.contact-coords__mail,
.contact-coords__addr {
  max-width: 100%;
  font-size: 16px; line-height: 1.2; color: var(--on-dark-2);
  overflow-wrap: anywhere;
}
.contact-coords__mail:hover { color: var(--white); }
.contact-coords__linkedin {
  font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--white);
  text-decoration: underline; text-underline-offset: 4px;
}
.contact-coords__linkedin:hover { color: var(--yellow); }

.contact-box {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px 24px; border-radius: 28px; background: var(--white);
}
.contact-box--tint { gap: 14px; background: var(--tint); }
.contact-box__title { font-size: 20px; font-weight: 800; line-height: 1.2; }

.contact-steps { display: flex; flex-direction: column; gap: 14px; }
.contact-steps__item { display: flex; gap: 12px; }
.contact-steps__num {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--yellow);
  font-size: 14px; font-weight: 800;
}
.contact-steps__item:first-child .contact-steps__num { background: var(--yellow); color: var(--ink); }
.contact-steps__text { padding-top: 5px; font-size: 15px; line-height: 1.45; color: var(--text-2); }

.contact-checks { display: flex; flex-direction: column; gap: 10px; }
.contact-checks__item { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; }
.contact-checks__icon {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--yellow);
}

/* ── Tablette (768 px) ──────────────────────────────────── */
@media (min-width: 768px) {
  .contact-card { padding: 36px; }
  .contact-parcours__options,
  .contact-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-submit { align-items: flex-start; }

  /* Les deux champs d'une rangée restent alignés même quand un libellé passe
     sur deux lignes (« Entreprise ou exploitation (obligatoire) » à 1024 px)
     ou qu'un seul porte un message d'erreur : libellé, champ et erreur
     forment trois pistes partagées par la rangée (subgrid), le libellé court
     descend au niveau de la seconde ligne du libellé voisin. Écarts
     inchangés (mesurés) : 8 px dans le champ, 18 px entre deux rangées, avec
     ou sans message d'erreur. L'écart de 8 px du subgrid est réparti en
     demi-marges (4 + 4), d'où les 14 px de padding (4 + 14 = 18) et les 4 px
     ajoutés sous un message d'erreur ; -18 px rend les 24 px du formulaire
     après la dernière rangée. */
  @supports (grid-template-rows: subgrid) {
    .contact-fields { row-gap: 0; margin-bottom: -18px; }
    .contact-fields > .contact-field {
      display: grid; grid-row: span 3; grid-template-rows: subgrid;
      row-gap: 8px; padding-bottom: 14px;
    }
    .contact-fields > .contact-field > .contact-label { align-self: end; }
    .contact-fields > .contact-field > .contact-error { margin-bottom: 4px; }
  }
}

/* ── Desktop (1024 px) : formulaire 1,6 fr, informations 1 fr ── */
@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    /* 32 px à 1024, 56 px à 1440 (handoff). */
    column-gap: clamp(32px, 5.769vw - 27.08px, 56px);
  }
}