/* L'en-tête des pages services sur la toile du métier. La carte de prix qui ouvre la page
   reprend la toile de la carte touchée sur l'accueil (bordeaux, vert, bleu de Prusse), écru dessus : le visiteur qui a
   touché le bordeaux arrive dans du bordeaux. Branchée après profond.css.
   Contrastes (styles calculés) : prix écru 9,15 · 8,39 · 8,64 ; étiquettes au secondaire de la toile 5,87 · 5,50 · 5,66. */

body[data-teinte] .ouverture-infos {
  align-self: start;
  margin-top: 52px;
  padding: 28px 32px 30px;
  border-radius: 30px;
  background: var(--teinte);
  color: var(--encre-teinte);
}
body[data-teinte] .ouverture-infos dt { color: var(--sur-teinte); text-wrap: balance; }
body[data-teinte] .ouverture-infos dd { color: var(--encre-teinte); }

/* En une colonne, la carte devient un bandeau sous le chapô, les deux prix côte à côte quand ils tiennent */
@media (max-width: 1023px) {
  body[data-teinte] .ouverture-infos { margin-top: 40px; padding: 24px 28px 26px; }
}
@media (max-width: 759px) {
  body[data-teinte] .ouverture-infos { margin-top: 32px; padding: 22px 24px 24px; }
}

/* ---- Ouverture de l'accueil, agrandie, avec ses deux actions (Viktor, 2026-10-30) ----
   Le H1 et le sceau gardent le même corps (le sceau se cale sur les deux lignes du titre).
   L'action principale ouvre le formulaire ; la secondaire mène aux offres (les projets suivent juste dessous). */
.ouverture-titre h1, .ouverture-sceau { font-size: clamp(64px, 6.8vw, 112px); }
.ouverture-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
.ouverture-actions .bouton-pilule { margin-top: 0; font-size: 13.5px; padding: calc(18px + 0.1em) 28px calc(18px - 0.1em); }
.bouton-pilule.secondaire { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px currentColor; }
.bouton-pilule.secondaire:hover, .bouton-pilule.secondaire.capte { background: var(--surface); color: var(--fg); }
@media (max-width: 1023px) {
  .ouverture-titre h1, .ouverture-sceau { font-size: 72px; }
}
@media (max-width: 759px) {
  .ouverture-titre h1, .ouverture-sceau { font-size: 50px; }
  .ouverture-actions { margin-top: 32px; }
  .ouverture-actions .bouton-pilule { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 374px) {
  .ouverture-titre h1, .ouverture-sceau { font-size: 42px; }
}