/* Bas des pages services en teintes profondes, « Une reliure par page ». Branchée après profond.css. Le volume des tarifs,
   l'index, le rabat et la pilule posée sur la flèche vivent dans systeme.css, interactions.js et scripts/atelier-services.js ;
   ici, seulement ce qui tient aux toiles. Le volume prend sa toile et son texte écru par profond.css (.carte).

   Contrastes mesurés (styles calculés, WCAG 2.x), bordeaux · vert · bleu de Prusse :
   volume              écru 9,15 · 8,39 · 8,64 (texte et prix)
   index au repos      numéro dans la toile 9,15 · 8,39 · 8,64 · titre encre 14,10 · phrase 6,78
   index sur la toile  titre et flèche écru 9,15 · 8,39 · 8,64 · numéro et phrase 5,87 · 5,50 · 5,66
   au clic (toile forte) écru 11,10 · 10,28 · 10,63 · numéro et phrase 7,12 · 6,74 · 6,96
   pilule claire       encre sur écru 14,10 · anneau de focus encre sur papier 14,10 */

/* Sur la toile, la pilule « Voir l'offre » passe en clair (lue par interactions.js et atelier-services.js) */
.renvoi { --pilule-claire: 1; }

/* Au repos, le numéro est composé dans la toile de son métier (et non le rouge) :
   c'est lui qui tient la couleur sur téléphone */
.renvoi .renvoi-numero { color: var(--teinte); }

/* Le rabat est la toile du métier (--teinte de profond.css) ; le texte passe en écru dessus */
.renvoi:is(:hover, .capte, :focus-visible) :is(.renvoi-titre, .coin-fleche) { color: var(--encre-teinte); }
.renvoi:is(:hover, .capte, :focus-visible) :is(.renvoi-numero, .renvoi-phrase) { color: var(--sur-teinte); }

/* Le texte change de couleur au passage de la toile : de gauche à droite quand elle se rabat,
   de droite à gauche quand elle se retire. Le déplacement du titre et de la flèche reste immédiat. */
.renvoi-numero { transition: color 0.6s var(--courbe) 0.3s; }
.renvoi-titre { transition: color 0.6s var(--courbe) 0.12s, transform 0.6s var(--courbe); }
.renvoi-phrase { transition: color 0.6s var(--courbe) 0.04s; }
.renvoi .coin-fleche { transition: color 0.6s var(--courbe), transform 0.6s var(--courbe); }
.renvoi:is(:hover, .capte, :focus-visible) .renvoi-numero { transition-delay: 0s; }
.renvoi:is(:hover, .capte, :focus-visible) .renvoi-titre { transition: color 0.6s var(--courbe) 0.02s, transform 0.6s var(--courbe); }
.renvoi:is(:hover, .capte, :focus-visible) .renvoi-phrase { transition-delay: 0.08s; }
.renvoi:is(:hover, .capte, :focus-visible) .coin-fleche { transition: color 0.6s var(--courbe) 0.2s, transform 0.6s var(--courbe); }

/* La page a bougé sous un pointeur immobile (html.sans-survol, source) : la toile ne se rabat pas, le texte reste à l'encre */
html.sans-survol .renvoi:hover:not(:focus-visible) :is(.renvoi-titre, .coin-fleche) { color: var(--fg); transition: none; }
html.sans-survol .renvoi:hover:not(:focus-visible) .renvoi-phrase { color: var(--fg58); transition: none; }
html.sans-survol .renvoi:hover:not(:focus-visible) .renvoi-numero { color: var(--teinte); transition: none; }

/* ---- Pied (2026-10-27) : la ligne des liens se pose près du filet, au même écart que celui qui sépare le filet
   de la présentation (8 px de marge + 8 px d'écart du flux = 16 px, le retrait sous le filet) ; le copyright ouvre
   la présentation, sur une seule ligne avec les mentions quand la largeur le permet ---- */
footer.conteneur .pied-nav { margin: 0 0 8px; }
footer.conteneur > div { align-items: baseline; column-gap: 32px; }
footer.conteneur > div .presentation { flex: 1 1 auto; margin: 0; }

/* ---- Ligne agences sous les cartes d'offres de l'accueil (2026-10-28) ----
   Depuis le 2026-10-30 (Viktor) : une carte blanche d'une ligne de haut, sur toute la largeur ; la flèche à droite
   avance au survol, comme sur les autres cartes. */
.offres-agences { margin: 24px 0 0; }
.offres-agences a {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 28px; border-radius: 30px; background: #fff; color: var(--fg); text-decoration: none;
  transition: background-color 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.offres-agences a span { flex: none; transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
.offres-agences a:hover, .offres-agences a:focus-visible { background: var(--surface-legere); }
.offres-agences a:hover span, .offres-agences a:focus-visible span { transform: translateX(6px); }
.offres-agences a:active { filter: brightness(0.96); }
@media (max-width: 759px) { .offres-agences a { padding: 18px 22px; align-items: flex-end; } }