/* Teintes profondes : les métiers passent en toiles de reliure.
   Bordeaux, vert, bleu de Prusse, à la même clarté que le vert de reliure (oklch L 0,38 au repos, 0,33 au survol).
   Texte écru dessus ; le secondaire est l'écru à 75 % sur la teinte. Contrastes mesurés (repos / survol) :
   bordeaux  écru 9,15 / 11,10 · secondaire 5,87 / 7,12
   vert      écru 8,39 / 10,28 · secondaire 5,50 / 6,74
   prusse    écru 8,64 / 10,63 · secondaire 5,66 / 6,96
   Le formulaire reste sur le papier, la surface et le fond fort : plus de teinte claire. */

:root {
  --bordeaux: #6d2927; --bordeaux-fort: #5c1d1b; --sur-bordeaux: #d4bdb2;
  --vert: #174e35;     --vert-fort: #094029;     --sur-vert: #bfc6b6;
  --prusse: #234566;   --prusse-fort: #183756;   --sur-prusse: #c2c4c2;
  --sur-teinte: var(--fg58);
  --encre-teinte: var(--fg);
  /* La carte contact passe à l'encre : en vert bouteille, elle se confondait avec l'identité visuelle */
  --sombre: #271f19;        /* écru dessus 14,10:1 */
  --sombre-fort: #3a3027;   /* survol : écru 11,20:1 */
  --sur-sombre: #c4b8aa;    /* secondaire : 8,32:1, 6,61:1 au survol */
}
.contact-carte:hover, .contact-carte.capte { background: var(--sombre-fort); }
[data-teinte="typographie"] {
  --teinte: var(--bordeaux); --teinte-forte: var(--bordeaux-fort);
  --teinte-claire: var(--argile); --teinte-claire-forte: var(--argile-fort);
  --sur-teinte: var(--sur-bordeaux); --encre-teinte: var(--bg);
}
[data-teinte="identite"] {
  --teinte: var(--vert); --teinte-forte: var(--vert-fort);
  --teinte-claire: var(--sauge); --teinte-claire-forte: var(--sauge-fort);
  --sur-teinte: var(--sur-vert); --encre-teinte: var(--bg);
}
[data-teinte="site"] {
  --teinte: var(--prusse); --teinte-forte: var(--prusse-fort);
  --teinte-claire: var(--ardoise); --teinte-claire-forte: var(--ardoise-fort);
  --sur-teinte: var(--sur-prusse); --encre-teinte: var(--bg);
}

/* Le formulaire reste sur papier, sans teinte de métier : la surface, et le fond fort pour la question en cours et les survols */
.formulaire {
  --teinte: var(--surface);
  --teinte-forte: var(--surface-fort);
  --sur-teinte: var(--fg58);
  --encre-teinte: var(--fg);
}

/* ---- Cartes des offres (accueil et fiches), cartes des pages services, pied de fiche ---- */
.offres[data-piste="cartes"] .offre,
.carte,
.pied-contact { color: var(--encre-teinte); }
.offres[data-piste="cartes"] .offre h3,
.offres[data-piste="cartes"] .offre .prix,
.carte h3, .carte .grand, .carte .prix, .carte.tarif .prix,
.pied-contact .pied-titre, .fiche-pied .pied-contact h3 { color: var(--encre-teinte); }
.offres[data-piste="cartes"] .offre p,
.offres[data-piste="cartes"] .offre .etiquette,
.offres[data-piste="cartes"] .offre .suite,
.carte p:not(.grand), .carte .etiquette,
.pied-contact p, .pied-contact .etiquette { color: var(--sur-teinte); }
.offres[data-piste="cartes"] .offre .coin-fleche,
.carte .coin-fleche { color: var(--encre-teinte); }

/* La lueur reste écrue mais se fait plus discrète sur un fond sombre (pied des fiches compris :
   à 0,38, l'étiquette « Contact » de .pied-contact tombait à 2,6:1 sous le pointeur) */
[data-teinte] a.carte, a.carte[data-teinte], .offres .offre[data-teinte], [data-teinte] .pied-contact { --lueur: 0.14; }

/* Sur une teinte profonde, le bouton devient une pilule écrue, comme sur la carte contact */
[data-teinte] .pied-contact .bouton-pilule,
.fiche-corps[data-teinte] .pied-contact .bouton-pilule { background: var(--bg); color: var(--fg); }