/* jw-sticky-bars.css — barres collantes sous le header rétractable de julienweb.fr
 *
 * POURQUOI CE FICHIER EXISTE (27/08/2026)
 * ---------------------------------------
 * Le header du site est `position:sticky; top:0; z-index:999` (CSS custom #6218, posé le
 * 28/06/2026) et il se replie en DEUX temps au scroll (JS custom #6221 : `.is-shrunk` à
 * partir de 80 px, `.is-shrunked` à partir de 280 px, une row entière passant alors à
 * `max-height:0`). Le header a donc TROIS hauteurs différentes selon la position du scroll.
 *
 * Le sticky natif d'Elementor Pro, lui, pose l'élément en `position:fixed; top:0` sans rien
 * savoir de ce header. Résultat : la barre se cale DERRIÈRE lui, et la portion masquée
 * change à chaque palier de repli. C'est le « léger décalage » constaté sur
 * /services-julienweb-fr/ (#6595), sur /julien-guezennec-cest-qui/ (#3549) et dans le
 * modèle d'article #6905 — ce dernier codant un `sticky_offset:100` EN DUR, donc juste
 * pour un seul des trois états.
 *
 * Le CSS #6218 disait déjà, en commentaire, que le sticky maison du header « remplace le
 * sticky natif Elementor — pas de spacer, pas de saut ». Ce fichier finit le travail pour
 * les barres secondaires.
 *
 * LE CHOIX CENTRAL : le `top` vaut la hauteur du header REPLIÉ (`--jw-head-min`), pas sa
 * hauteur vivante. Un `top` qui change en cours de scroll fait SAUTER un élément sticky, et
 * pendant les 0,4 s de transition du repli il tremble. Une valeur stable ne bouge jamais.
 *
 * Les deux variables sont publiées par js/jw-sticky-bars.js. Sans ce JS, les valeurs
 * restent à 0 : les barres collent en haut, sous le header — dégradé, jamais cassé.
 */

:root {
	--jw-head: 0px;     /* hauteur vivante du header, suit le repli */
	--jw-head-min: 0px; /* hauteur du header une fois replié — c'est elle qui sert d'ancrage */
}

/* ── 1. LE COMPORTEMENT ──────────────────────────────────────────────────────
   Seul, il ne change aucune couleur. C'est ce qu'on pose sur tout ce qui doit rester
   visible au scroll, bandeau ou pas — la table des matières des articles (#6905) en est,
   et elle a déjà son propre habillage de carte. */
/* `.e-con.jw-sticky-bar` n'est pas une redite. Elementor pose `position: var(--position)`
   sur `.e-con` — même spécificité que `.jw-sticky-bar`, donc c'est l'ordre de chargement
   qui tranche. Il nous est favorable aujourd'hui (cette feuille arrive en 34e position,
   après frontend.css) mais rien ne le garantit : n'importe quel plugin peut s'enfiler
   après. Le sélecteur doublé monte à 0,2,0 et rend la règle indépendante de l'ordre —
   plus propre qu'un !important. */
.jw-sticky-bar,
.e-con.jw-sticky-bar {
	position: sticky;
	top: var(--jw-head-min, 0px);
	/* 998 = juste SOUS le header (999). La barre glisse proprement dessous pendant le
	   repli au lieu de lutter avec lui. */
	z-index: 998;
}

/* ── 2. L'APPARENCE DE BANDEAU ───────────────────────────────────────────────
   Uniforme entre les pages qui ont une vraie barre de navigation horizontale : le
   bandeau de /services-julienweb-fr/ (#6595), celui de /julien-guezennec-cest-qui/
   (#3549) et la barre d'ancres de /tarifs/. Valeurs reprises de #6595, qui était déjà
   la référence visuelle du site. */
.jw-sticky-bar--band {
	background-color: #f0f4ff;
	box-shadow: inset 0 8px 14px rgba(0, 0, 0, .19);
}

/* Une ancre visée par un lien #id ne doit pas atterrir sous le header. */
:target {
	scroll-margin-top: calc(var(--jw-head-min, 0px) + 70px);
}

/* Sur mobile le header occupe déjà une bonne part de l'écran : une barre collante y
   mangerait trop de hauteur utile. C'était déjà l'intention côté Elementor, dont le
   réglage `sticky_on` excluait le mobile. */
@media (max-width: 767px) {
	.jw-sticky-bar {
		position: static;
	}
}