/* Contact-specific overrides remain isolated in the validated global fidelity layer pending extraction. */

/* ── Les prestations : cartes compactes, formulaire en dessous ───────────────────────────────
   Cocher une carte ouvre son formulaire aussitôt. Le premier jet passait par un « Précise ta
   demande » à déplier : un clic de trop entre la case et le champ où l'on écrit.

   Le cadre parent « .contact-choices » est une grille à DEUX colonnes, prévue pour des cases à
   cocher côte à côte. Nos blocs y tombaient dans une seule cellule : la grille de cartes se
   retrouvait large de 298 px dans un cadre de 648, et tout s'empilait en colonne. Ils traversent
   donc toute la largeur. */
.prestations__aide,
.prestations__cartes,
.prestations__formulaires { grid-column: 1 / -1; }

.prestations__aide {
  color: var(--muted, #5e615b);
  font-size: .9rem;
  margin: 0 0 .8rem;
  text-align: left;   /* le cadre justifie son texte : sur une ligne courte, ça écarte les mots */
}

.prestations__cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .5rem;
}

/* Une carte tient en deux lignes : le nom, puis l'accroche. Pas de case à cocher visible —
   c'est la carte entière qui est la cible, ce qui donne une zone de clic bien plus grande. */
.prestation-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 3.6rem;
  padding: .6rem .7rem;
  border: 1px solid var(--line, #e2ded5);
  border-radius: .55rem;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s;
}

/* La case reste dans le flux — masquée à l'œil, jamais au clavier ni au lecteur d'écran.
   « display:none » la retirerait de la navigation par tabulation. */
.prestation-carte input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}

.prestation-carte strong {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.25;
}

.prestation-carte small {
  display: block;
  margin-top: .15rem;
  color: var(--muted, #5e615b);
  font-size: .74rem;
  line-height: 1.3;
}

.prestation-carte:hover { border-color: var(--terra-text, #a35839); }

/* Sélection : bordure épaissie ET fond teinté. Deux signaux plutôt qu'un, parce que la couleur
   seule ne se voit pas de tous les yeux. Le rembourrage compense l'épaisseur pour que la carte
   ne saute pas d'un pixel au clic. */
.prestation-carte:has(input:checked) {
  border-color: var(--terra-text, #a35839);
  border-width: 2px;
  padding: calc(.6rem - 1px) calc(.7rem - 1px);
  background: #fdf6f2;
}

/* Le focus clavier se marque sur la CARTE, puisque la case est invisible. */
.prestation-carte:has(input:focus-visible) {
  outline: 2px solid var(--terra-text, #a35839);
  outline-offset: 2px;
}

.prestation-form {
  padding: 1rem 1.1rem;
  margin-top: .9rem;
  border: 1px solid var(--line, #e2ded5);
  border-left: 3px solid var(--terra-text, #a35839);
  border-radius: .5rem;
  background: #fff;
}

.prestation-form h3 {
  margin: 0 0 .8rem;
  font-size: .95rem;
  font-weight: 600;
}

/* Deux colonnes pour les questions courtes, une seule pour les champs de récit : sur une largeur
   de 560 px, une question de trois mots suivie d'un champ pleine largeur gaspille la moitié de
   la ligne et allonge le formulaire pour rien. */
.prestation-form__questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 1rem;
}

.prestation__champ { margin: 0 0 .8rem; }
.prestation__champ--large { grid-column: 1 / -1; }

.prestation__champ label {
  display: block;
  font-weight: 600;
  font-size: .88rem;
  margin-bottom: .25rem;
  text-align: left;
}

.prestation__champ small {
  display: block;
  color: var(--muted, #5e615b);
  font-size: .78rem;
  line-height: 1.35;
  margin-bottom: .3rem;
  font-weight: 400;
  text-align: left;
}

/* Les champs reprennent le style du site — arrondi 14 px, fond #faf9f7 — et NON un style à moi.
   Ma première version imposait un arrondi de 6 px et un fond blanc : elle l'emportait sur les
   champs texte mais pas sur les listes ni les zones de saisie, qui gardaient le style du site.
   Résultat, trois apparences différentes dans le même formulaire, et un champ texte écrasé à
   18 px de haut contre 39 pour une liste (mesuré le 2026-08-14).

   On ne redéfinit donc ni la bordure, ni l'arrondi, ni le fond : « .page-contact :is(input,
   select,textarea) » s'en charge déjà pour toute la page. On ne fixe que ce qui manque. */
.prestation__champ input[type="text"],
.prestation__champ textarea,
.prestation__champ select {
  width: 100%;
  padding: .55rem .8rem;
  font: inherit;
  font-size: .92rem;
  box-sizing: border-box;
}

/* Une hauteur identique pour les champs d'une ligne : sans elle, un champ texte et une liste
   posés côte à côte ne s'alignent pas, et l'œil le voit immédiatement. */
.prestation__champ input[type="text"],
.prestation__champ select { height: 2.75rem; }

.prestation__champ textarea { resize: vertical; }

/* #a35839 sur blanc : 4,7 pour 1, au-dessus du seuil de 4,5. Le rouge pur ne le franchissait pas. */
.requis { color: var(--terra-text, #a35839); }

.prestation__champ textarea[aria-invalid="true"],
.prestation__champ input[aria-invalid="true"] {
  border-color: var(--terra-text, #a35839);
  border-width: 2px;
}