/* ============================================================
   CONTACT — compléments au formulaire
   ------------------------------------------------------------
   Le socle visuel (.contact*, .cform__*) vit déjà dans
   dessigne.css, repris du handoff. Cette feuille n'ajoute que
   ce que la maquette ne prévoyait pas : le champ leurre, les
   états d'erreur, la mention RGPD.

   Chargée uniquement sur la page Contact, après interactions.css.
   ============================================================ */

/* ------------------------------------------------------------
   Champ leurre (honeypot)
   ------------------------------------------------------------
   Volontairement masqué ici et non par un style écrit dans le
   gabarit : un robot qui lit le HTML y verrait « display:none »
   et saurait qu'il faut laisser le champ vide.

   Pas de display:none non plus, que certains robots testent :
   le champ reste dans le flux, simplement hors de l'écran.
   ------------------------------------------------------------ */
.cform__leurre {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ------------------------------------------------------------
   Titre de la colonne gauche
   ------------------------------------------------------------ */

/* dessigne.css pose le titre en --ink et ne passe en --gold que le
   <em>. Le titre est ocre d'un bout a l'autre. */
.contact__title { color: var(--gold); }

/* ------------------------------------------------------------
   Champs
   ------------------------------------------------------------ */

/* Un enfant de grille ne rétrécit pas sous la largeur de son
   contenu sans min-width:0 — piège déjà rencontré ailleurs. */
.cform__grid > * { min-width: 0; }

/* Champ occupant les deux colonnes de .cform__grid. */
.cform__field--pleine { grid-column: 1 / -1; }

/* Le <select> hérite de .cform__input ; il lui manque la flèche
   et la hauteur, que les navigateurs ne calquent pas sur un input. */
.cform__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23262421' stroke-width='1.4' stroke-opacity='.55' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.cform__facultatif {
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: none;
  color: rgba(38, 36, 33, .42);
}

.cform__champ-message { margin-top: 4px; }

/* ------------------------------------------------------------
   Erreurs
   ------------------------------------------------------------ */
.cform__alerte {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--burg);
  background: rgba(78, 41, 36, .06);
  border-left: 2px solid var(--burg);
  border-radius: var(--btn-radius);
  padding: 14px 18px;
  margin-bottom: 26px;
}

.cform__alerte a { color: var(--burg); text-decoration: underline; }

.cform__erreur {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--burg);
  margin: 7px 0 0;
}

/* L'état d'erreur se lit sans dépendre de la couleur seule :
   le message sous le champ le nomme explicitement. */
.cform__input[aria-invalid="true"],
.cform__textarea[aria-invalid="true"] {
  border-color: var(--burg);
  background: rgba(78, 41, 36, .03);
}

.cform__input[aria-invalid="true"]:focus,
.cform__textarea[aria-invalid="true"]:focus {
  border-color: var(--burg);
  box-shadow: 0 0 0 2px rgba(78, 41, 36, .16);
}

/* Cible du focus programmé sur l'alerte : pas de contour parasite. */
.cform__alerte:focus { outline: none; }
.cform__alerte:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------------------
   Mention d'information (RGPD)
   ------------------------------------------------------------ */
.cform__rgpd {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(38, 36, 33, .52);
  margin: 18px 0 0;
  max-width: 520px;
}

.cform__rgpd a { color: rgba(38, 36, 33, .72); text-decoration: underline; }
.cform__rgpd a:hover { color: var(--burg); }

/* ------------------------------------------------------------
   Bouton d'envoi
   ------------------------------------------------------------
   Astra repeint tout <button> au survol et au focus avec sa
   couleur d'accent (#045cb4), depuis son CSS inline. La regle de
   dessigne.css ne declarait qu'un filter : la couleur de fond lui
   echappait, et le bouton virait au bleu. On la pose donc
   explicitement, l'assombrissement au survol restant inchange.
   ------------------------------------------------------------ */
.dessigne-page .cform__submit:hover,
.dessigne-page .cform__submit:focus,
.dessigne-page .cform__submit:active {
  background-color: var(--burg);
  color: var(--cream);
  border-color: var(--burg);
}

/* Astra supprime aussi l'anneau de focus (outline: 0), ce qui rend
   la navigation au clavier invisible. On en repose un, en ocre. */
.dessigne-page .cform__submit:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   Carte de confirmation
   ------------------------------------------------------------ */
.cform__success {
  max-width: 720px;
  background: var(--ink);
}

/* Le titre est un <h2> : la regle generale des titres le forcait a
   --ink, soit du sombre sur du sombre. Il prend la couleur et le
   voile du paragraphe qui le suit, pour ne faire qu'un bloc. */
.cform__success-title {
  color: var(--cream);
  opacity: .8;
}

@media (max-width: 860px) {
  .cform__success { padding: 36px 28px; }
  .cform__success-title { font-size: 30px; }
}