/* V3 : expertise → détail → contact et contrastes, complétés par iteration.css.
 * Les ratios ci-dessous sont des calculs de génération, pas des mesures.
 */
:root {
  --form-ink: var(--c-dark);               /* Minuit : ≈ 12,3:1 sur Crème, ≈ 11,2:1 sur Cream/C40, ≈ 5,6:1 sur Corail */
  --form-accent: var(--c-coral);           /* contour du bouton, puis son fond au survol */
  --form-accent-pressed: var(--c-tomato);  /* fond à la pression : Minuit ≈ 4,4:1, grand texte gras */
}

/* ---------- Cartes Service : mot visible « Détail » et lien vers le contact ---------- */
.svc {
  --svc-ink: var(--c-dark);                /* lisible sur White, Corail (≈ 5,6:1) et Poire (≈ 11,1:1) */
  gap: calc(12 * var(--m));                /* écart minimal quand la carte ouverte dépasse sa hauteur de maquette */
}

.svc--3[data-state="opened"] {
  --svc-ink: var(--c-cream);               /* ≈ 6,4:1 sur Indigo */
}

.svc__toggle {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--m));
}

/* Ne suit pas la couleur d'accent du survol, trop pâle pour un petit texte. */
.svc__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: max(12px, calc(12 * var(--m)));
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--svc-ink);
}

/* Au-dessus de la zone de clic étendue de la carte (.svc__toggle > .hit-area). Minuit sur White ≈ 13,1:1. */
.svc__contact {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  padding: calc(8 * var(--m)) calc(16 * var(--m));
  border-radius: calc(40 * var(--m));
  background: var(--c-white);
  color: var(--c-dark);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: max(13px, calc(13 * var(--m)));
  line-height: 1.3;
  text-decoration: underline;
  text-underline-position: from-font;
  transition: background-color var(--dur-fast) ease;
}

@media (hover: hover) {
  .svc__contact:hover {
    background: var(--c-cream);
  }
}

/* L'anneau Indigo par défaut disparaît sur le fond Indigo de la carte 3 ouverte. */
.svc[data-state="opened"] :focus-visible {
  outline-color: var(--svc-ink);
}

@media (min-width: 1024px) {
  .svc {
    gap: calc(24 * var(--u));
  }

  .svc__toggle {
    gap: calc(16 * var(--u));
  }

  .svc__label {
    font-size: max(13px, calc(20 * var(--u)));
  }

  .svc__contact {
    padding: calc(14 * var(--u)) calc(28 * var(--u));
    border-radius: calc(40 * var(--u));
    font-size: max(14px, calc(20 * var(--u)));
  }

  /* Cartes 1 et 2 ouvertes : grille titre | détail, le lien sous le détail (deux colonnes en flex en V2). */
  .svc--1[data-state="opened"] .svc__head,
  .svc--2[data-state="opened"] .svc__head {
    display: grid;
    grid-template-columns: calc(330 * var(--u)) minmax(0, 1fr);
    align-items: start;
    gap: calc(24 * var(--u)) calc(60 * var(--u));
  }

  .svc--1[data-state="opened"] .svc__title,
  .svc--2[data-state="opened"] .svc__title {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .svc--1[data-state="opened"] .svc__detail,
  .svc--2[data-state="opened"] .svc__detail {
    grid-column: 2;
    grid-row: 1;
  }

  .svc--1[data-state="opened"] .svc__contact,
  .svc--2[data-state="opened"] .svc__contact {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
}

/* ---------- Formulaire : textes en Minuit opaque (E128, E129) ---------- */
/* Texte indicatif : il était à 40 % d'alpha en V2. Il s'efface toujours au focus. */
.field__control::placeholder {
  color: var(--form-ink);
}

/* Étiquettes opaques, désormais permanentes au-dessus des champs. */
.field__label {
  color: var(--form-ink);
  transition: none;
}

/*
 * Bouton « Envoyer » : texte Minuit dans tous ses états ; seul le fond change (Corail au survol, Tomate à
 * la pression), si bien qu'aucun instant de transition ne fait passer le texte sous le seuil.
 */
.cta {
  border-color: var(--form-accent);
  color: var(--form-ink);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.cta:hover,
.cta:active {
  color: var(--form-ink);
}

.cta:active {
  background: var(--form-accent-pressed);
  border-color: var(--form-accent-pressed);
}