/*
 * Haut de page (module charte) : en-tête qui suit, bouton « revenir en haut » (assets/js/haut-de-page.js).
 * L'en-tête est « collant » (sticky) : la barre d'annonce part avec la page, la barre verte reste. Pour la cacher on
 * décale son « top » plutôt qu'un transform : un transform sur l'en-tête casserait le tiroir (position: fixed dedans).
 */
html.df-entete-suit header.df-entete { position: sticky; top: calc(-1 * var(--df-annonce-h, 0px)); z-index: 900; transition: top .28s ease, box-shadow .28s ease; }
html.df-entete-suit header.df-entete.est-colle { box-shadow: 0 10px 24px -16px rgba(14, 24, 21, .55); }
html.df-entete-suit header.df-entete.est-cache { top: calc(-1 * var(--df-entete-h, 200px) - 12px); box-shadow: none; }

/* Bouton « revenir en haut » : à droite, au-dessus des contenus, sous les panneaux (panier, zoom, simulation). */
.df-haut { position: fixed; right: 18px; bottom: 18px; z-index: 880; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--df-vert, #1f3b35); color: var(--df-blanc, #fff); box-shadow: 0 10px 24px -10px rgba(14, 24, 21, .6); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, background-color .15s ease; }
.df-haut.est-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, background-color .15s ease; }
.df-haut:hover { background: var(--df-vert-nuit, #16302a); }
.df-haut:focus-visible { outline: 2px solid var(--df-sauge, #8fae9f); outline-offset: 3px; }
.df-haut svg { width: 22px; height: 22px; }
/* Bulle de discussion à droite (54 px, à 24 px du bord et 20 px du bas ; 14 / 14 sur téléphone) : le bouton se centre juste au-dessus. */
.df-haut--crisp { right: 27px; bottom: 90px; }
@media (max-width: 767px) {
	.df-haut { right: 12px; bottom: 12px; width: 44px; height: 44px; }
	.df-haut--crisp { right: 19px; bottom: 80px; }
}
/* Fiche produit sur téléphone : la barre d'achat collante (84 px) garde sa place ; le bouton et la bulle se posent au-dessus. */
@media (max-width: 767px) {
	body:has(.df-fiche-achat) .df-haut { bottom: 96px; }
	body:has(.df-fiche-achat) .df-haut--crisp { bottom: 164px; }
}
@media (prefers-reduced-motion: reduce) {
	html.df-entete-suit header.df-entete, .df-haut, .df-haut.est-visible { transition: none; }
}
@media print { .df-haut { display: none !important; } }