/* =============================================================
   Header L'Optimisme  -  loptimisme.com
   Maquette "header final (hybride A + C)" du 17/08/2026.
   Tout est prefixe .lph pour eviter toute collision avec Bimber.
   Pendant du footer .lpf (footer.css). Meme palette, meme police.
   La police Sora est deja chargee par le CSS additionnel du site
   (@import fonts.googleapis.com/css2?family=Sora dans wp-custom-css),
   elle n'est donc PAS re-enqueue par le theme enfant.

   Principes de la maquette validee par Catherine :
   - bande haute BLANCHE (plus d'arc-en-ciel en fond) ;
   - l'arc-en-ciel devient un filet de 3px SOUS cette bande ;
   - rubriques toutes en encre #1a1a2e gras au repos ;
   - marqueur surligneur incline (-1.2deg) qui se trace au survol,
     avec une couleur par rubrique portee par la variable --c ;
   - aucun surlignage permanent, sauf la rubrique courante ;
   - Boutique garde sa pastille jaune doux (bouton, pas rubrique) ;
   - PAS de bouton Newsletter (doublon avec la barre noire #lo-nl-bar).
   ============================================================= */

/* --- Reset local, strictement limite au header --- */
.lph,
.lph *,
.lph *::before,
.lph *::after{box-sizing:border-box}
.lph p,
.lph h1,
.lph h2,
.lph ul,
.lph li,
.lph form,
.lph figure{margin:0;padding:0}
.lph ul{list-style:none}
.lph li::before{content:none}
.lph img{max-width:100%;height:auto;display:block}
.lph a{color:inherit;text-decoration:none;box-shadow:none;border:0}
.lph a:hover,
.lph a:focus{text-decoration:none;box-shadow:none}
.lph button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;text-transform:none;letter-spacing:normal}
.lph svg{display:block}

/* --- Conteneur --- */
.lph{
	--lph-ink:#1a1a2e;
	--lph-ink-soft:#5a5a7a;
	--lph-jaune:#fdee00;
	--lph-jaune-doux:#fff085;
	--lph-rose:#fbc5ff;
	--lph-bleu:#b5f4ff;
	--lph-bleu-pastel:#cfdbff;
	--lph-vert:#c1fac6;
	--lph-vert-eau:#a8f0dc;
	--lph-line:rgba(26,26,46,.10);
	--lph-rainbow:linear-gradient(90deg,#fdee00,#fff085,#fbc5ff,#cfdbff,#b5f4ff,#c1fac6);

	font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-size:16px;
	color:var(--lph-ink);
	line-height:1.5;
	display:block;
	width:100%;
	clear:both;
	float:none;
	position:relative;
	z-index:200;
	background:#fff;
	border-bottom:1px solid var(--lph-line);
}

.lph-wrap{
	max-width:1240px;
	margin:0 auto;
	padding:0 24px;
}

/* =============================================================
   1. Bande haute BLANCHE + fil d'actualite (ticker)
   Resolution Catherine 18/08 : bande blanche fine (~30px), pas
   d'etiquette, ticker defilant, date discrete a droite, et le
   filet arc-en-ciel de 3px SOUS la bande reste la touche couleur.
   ============================================================= */
/* Fond ARC-EN-CIEL de la bande haute.

   Retour Catherine du 20/08 sur le premier essai a 85 % de blanc :
   « je ne vois pas avec les couleurs ». Le voile etait trop discret a
   l'ecran. On monte l'intensite : ce sont toujours les six teintes de
   la charte melangees a du blanc, seul le taux de melange change. On
   reste dans le pastel, jamais dans la couleur saturee.

   TROIS NIVEAUX SONT PREPARES. Pour basculer, remplacer la valeur de
   `background` de .lph-top ci-dessous par l'une de ces trois lignes.
   Rien d'autre a toucher.

   NIVEAU 1 - le plus doux, 60 % de blanc, contraste 15,5:1
   linear-gradient(90deg,#fef899,#fff9ce,#fde8ff,#ecf1ff,#e1fbff,#e6fde8)

   NIVEAU 2 - intermediaire, 45 % de blanc, contraste 15,1:1  [APPLIQUE]
   linear-gradient(90deg,#fef673,#fff7bc,#fddfff,#e5ebff,#d6f9ff,#ddfce0)

   NIVEAU 3 - le plus marque, 30 % de blanc, contraste 14,7:1
   linear-gradient(90deg,#fef34d,#fff5aa,#fcd6ff,#dde6ff,#cbf7ff,#d4fbd7)

   Le contraste indique est celui du texte encre #1a1a2e sur l'arret le
   plus FONCE du degrade, qui est toujours le jaune de gauche. L'exigence
   WCAG AA pour du texte est de 4,5:1 : les trois niveaux sont donc tres
   largement lisibles. Et comme CHAQUE arret reste un pastel, cela vaut a
   toutes les largeurs, mobile compris, ou les six teintes se resserrent.
   Aucun rouge dans la palette. */
.lph-top{
	overflow:hidden;
	background:linear-gradient(90deg,#fef673,#fff7bc,#fddfff,#e5ebff,#d6f9ff,#ddfce0);
}
.lph-top .lph-wrap{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	flex-wrap:nowrap;
	gap:0;
	padding-top:0;
	padding-bottom:0;
	min-height:30px;
	text-align:left;
}

/* Fenetre de defilement.
   Retour 14 : fondu net et symetrique sur les deux bords pour que le
   fil ne paraisse jamais "coupe" au ras du bord, et retrait interieur
   pour que le premier item demarre franchement dans la zone lisible. */
.lph-tk-window{
	flex:1 1 auto;
	min-width:0;
	position:relative;
	overflow:hidden;
	padding-left:18px;
	-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
	        mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
}
/* Le retrait est porte par la fenetre, JAMAIS par la piste : la piste
   se translate de -50% de SA propre largeur, un padding sur elle
   desynchroniserait la boucle. */
.lph-tk-track{display:flex;width:max-content;will-change:transform}

/* Le defilement ne demarre que la ou .is-scroll est pose (accueil) ET
   une fois que le JS a clone le groupe (.is-ready) : sinon la
   translation de -50% ferait disparaitre le fil. */
.lph-top.is-scroll .lph-tk-track.is-ready{animation:lph-tk-scroll 62s linear infinite}
.lph-top.is-scroll:hover .lph-tk-track.is-ready,
.lph-top.is-scroll .lph-tk-window:focus-within .lph-tk-track.is-ready{animation-play-state:paused}

.lph-tk-group{display:flex;align-items:center;flex:none;list-style:none;margin:0;padding:0}
.lph-tk-group li{display:flex;align-items:center;flex:none;margin:0;padding:0}
.lph-tk-group li::before{content:none}
.lph-tk-group a{
	display:inline-block;
	font-size:.72rem;
	font-weight:600;
	color:var(--lph-ink);
	line-height:1.4;
	padding:7px 0;
	white-space:nowrap;
	box-shadow:inset 0 0 0 rgba(26,26,46,0);
	transition:box-shadow .16s ease;
}
.lph-tk-group a:hover,
.lph-tk-group a:focus-visible{box-shadow:inset 0 -1.5px 0 rgba(26,26,46,.75)}
.lph-tk-group a:focus-visible{outline:2px solid var(--lph-ink);outline-offset:1px;border-radius:3px}
.lph-tk-dot{flex:none;width:3px;height:3px;border-radius:50%;background:rgba(26,26,46,.30);margin:0 14px}

/* Date fixe a GAUCHE (retour Catherine du 20/08), le fil occupe le
   reste. On la deplace avec `order` plutot qu'en changeant le HTML :
   le JS du defilement cible .lph-tk-track et n'est donc pas concerne,
   et l'ordre de lecture du document reste inchange. La date et le fil
   sont deux informations independantes, leur ordre de lecture ne porte
   pas de sens : pas de probleme WCAG 1.3.2.
   Le separateur passe naturellement de gauche a droite. */
.lph-tk-date{
	order:-1;
	flex:0 0 auto;
	font-size:.695rem;
	font-weight:700;
	color:rgba(26,26,46,.78);
	white-space:nowrap;
	padding-right:14px;
	margin-right:2px;
	border-right:1px solid rgba(26,26,46,.16);
}

@keyframes lph-tk-scroll{
	from{transform:translateX(0)}
	to{transform:translateX(-50%)}
}

/* Accessibilite : aucun mouvement si l'internaute le refuse. */
@media (prefers-reduced-motion:reduce){
	.lph-top.is-scroll .lph-tk-track{animation:none;transform:none;width:auto}
	.lph-tk-group.is-dup{display:none}
	.lph-tk-window{
		-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%);
		        mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%);
	}
}

/* =============================================================
   2. Filet arc-en-ciel 3px
   ============================================================= */
.lph-filet{height:3px;background:var(--lph-rainbow)}

/* =============================================================
   3. Barre principale (logo + nav + loupe), sticky
   ============================================================= */
.lph-stick{
	background:#fff;
	position:-webkit-sticky;
	position:sticky;
	top:0;
	z-index:210;
}
/* Barre d'admin WordPress : on decale le sticky pour ne pas passer dessous. */
.admin-bar .lph-stick{top:32px}
@media (max-width:782px){
	.admin-bar .lph-stick{top:46px}
}

.lph-main{background:#fff}
/* Ligne 1 : logo + "le media positif" a gauche, actions a droite. */
.lph-main .lph-wrap{
	display:flex;
	align-items:center;
	gap:16px;
	padding-top:12px;
	padding-bottom:12px;
}

/* Signature du media, a cote du logo (retour Catherine 18/08).
   Elle a ete REMONTEE du hero de la page d'accueil : le hero ne porte
   plus ce titre, il n'existe donc qu'une seule fois sur la page.
   Taille remontee a 1.22rem le 20/08 (retour Catherine : "un peu plus
   gros non ?"), rendue possible par le raccourcissement de la pastille
   ("Depuis 2016" seul). Une ligne de 1.22rem x 1.22 = ~24px, tres en
   dessous des 42px du logo : la hauteur de la ligne 1 ne bouge pas. */
.lph-claim{
	flex:1 1 auto;
	min-width:0;
	margin:0;
	font-size:1.22rem;
	font-weight:800;
	line-height:1.22;
	letter-spacing:-.5px;
	color:var(--lph-ink);
	padding-left:18px;
	border-left:1px solid var(--lph-line);
	/* Pas de max-width : la boite flex prend juste la largeur qu'il
	   faut, donc une seule ligne tant qu'il y a la place. text-wrap
	   balance evite le mot orphelin le jour ou ca doit passer sur deux
	   lignes (ecrans intermediaires, libelles plus longs). */
	text-wrap:balance;
}
.lph-claim mark{
	background:linear-gradient(180deg,transparent 58%,var(--lph-jaune) 58%);
	color:inherit;
	padding:0 2px;
}
@media (max-width:1240px){
	.lph-claim{font-size:1.08rem;padding-left:14px}
}

/* Pastilles d'identite a cote du logo (retour Catherine 18/08).
   Elles ont ete REMONTEES du hero de la page d'accueil : elles sont
   maintenant sitewide, ce qui renforce le signal "media etabli"
   (anciennete + volume publie) sur chaque page. Ne pas les remettre
   dans front-page.php, elles s'afficheraient deux fois sur l'accueil. */
.lph-facts{
	flex:0 1 auto;
	min-width:0;
	display:flex;
	align-items:center;
	gap:7px;
}
.lph-fact{
	display:inline-flex;
	align-items:baseline;
	gap:5px;
	background:#fff;
	border:1px solid var(--lph-line);
	border-radius:999px;
	padding:5px 13px;
	white-space:nowrap;
}
.lph-fact b{font-size:.8rem;font-weight:800;letter-spacing:-.3px;color:var(--lph-ink)}
.lph-fact span{font-size:.67rem;font-weight:500;color:var(--lph-ink-soft)}

/* Entre 1024 et 1200px la ligne se resserre : on sacrifie d'abord le
   compteur, on garde l'anciennete qui porte le signal le plus fort. */
@media (max-width:1200px){
	.lph-fact-count{display:none}
}

/* Bloc d'actions a droite : loupe + Boutique.
   Boutique quitte le menu des rubriques (retour Catherine 18/08) : c'est
   un bouton commercial, pas une rubrique editoriale. Elle ne fait donc
   plus deborder la ligne du menu. */
.lph-actions{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	gap:10px;
}
.lph-shop-btn{
	display:inline-flex;
	align-items:center;
	background:var(--lph-jaune-doux);
	border-radius:999px;
	padding:9px 18px;
	font-size:.83rem;
	font-weight:800;
	color:var(--lph-ink);
	white-space:nowrap;
	transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.lph-shop-btn:hover,
.lph-shop-btn:focus{
	background:var(--lph-jaune);
	color:var(--lph-ink);
	transform:translateY(-1px);
	box-shadow:0 5px 16px rgba(253,238,0,.5);
}
.lph-shop-btn:focus-visible{outline:2px solid var(--lph-ink);outline-offset:2px}

/* =============================================================
   3 bis. Barre des rubriques (ligne 2), pleine largeur
   ============================================================= */
.lph-menubar{background:#fff;border-top:1px solid var(--lph-line)}
.lph-menubar .lph-wrap{padding-top:0;padding-bottom:0}

/* --- Logo --- */
.lph-logo{flex:0 0 auto;display:block}
.lph-logo img{
	height:42px;
	width:auto;
	max-width:none;
	display:block;
}

/* --- Navigation --- */
.lph-nav{flex:1 1 auto;min-width:0;width:100%;display:flex}
.lph-nav ul{
	display:flex;
	align-items:center;
	flex-wrap:nowrap;
	justify-content:space-between;
	width:100%;
	gap:0;
}
.lph-nav a{
	position:relative;
	display:block;
	white-space:nowrap;
	color:var(--lph-ink);
	font-size:.87rem;
	font-weight:700;
	padding:12px 10px 13px;
	transition:color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.lph-nav a .lph-t{position:relative;z-index:2}

/* --- Marqueur surligneur : une couleur par rubrique (variable --c) --- */
.lph-nav a::after{
	content:'';
	position:absolute;
	z-index:1;
	left:6px;
	right:6px;
	bottom:15px;
	height:10px;
	border-radius:3px;
	background:var(--c,transparent);
	transform:scaleX(0) rotate(-1.2deg);
	transform-origin:left center;
	transition:transform .26s cubic-bezier(.4,.72,.28,1);
}
.lph-nav a:hover::after,
.lph-nav a:focus-visible::after,
.lph-nav li.is-active > a::after{transform:scaleX(1) rotate(-1.2deg)}

.lph-nav a:focus-visible{outline:2px solid var(--lph-ink);outline-offset:-2px;border-radius:6px}

/* =============================================================
   Menus deroulants (ajout 18/08/2026)
   Panneau blanc arrondi, ombre douce, apparition sobre. Ouverture
   au survol ET au focus clavier (focus-within), sans clic force :
   le niveau 1 reste un vrai lien vers sa rubrique.
   ============================================================= */
.lph-nav li{position:relative}
/* Derniers items : sous-menu ancre a droite (evite le debordement horizontal du document) - 02/09/2026 */
.lph-nav > ul > li:last-child .lph-sub,
.lph-nav > ul > li:nth-last-child(2) .lph-sub{left:auto;right:0}

.lph-sub{
	position:absolute;
	top:100%;
	left:50%;
	transform:translateX(-50%) translateY(5px);
	min-width:252px;
	max-width:320px;
	background:#fff;
	border:1px solid var(--lph-line);
	border-radius:14px;
	box-shadow:0 14px 40px rgba(26,26,46,.13);
	padding:8px;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .16s ease,transform .16s ease;
	z-index:320;
}

/* Pont invisible : evite que le panneau se ferme dans l'espace
   entre l'onglet et le panneau. */
.lph-sub::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}

.lph-nav li.lph-has-sub:hover > .lph-sub,
.lph-nav li.lph-has-sub:focus-within > .lph-sub{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translateX(-50%) translateY(0);
}

/* Le UL du panneau est vertical : on annule le flex horizontal. */
.lph-sub ul{
	display:block;
	flex-wrap:nowrap;
	justify-content:flex-start;
	gap:0;
}
.lph-sub li{border:0}
.lph-sub a{
	display:block;
	white-space:normal;
	font-size:.8rem;
	font-weight:600;
	line-height:1.35;
	padding:8px 12px;
	border-radius:9px;
	color:var(--lph-ink);
}
/* Pas de marqueur surligneur dans les panneaux. */
.lph-sub a::after{display:none}
.lph-sub a:hover,
.lph-sub a:focus-visible{background:#F6F6F8;color:var(--lph-ink)}

/* "Toute la rubrique" : en tete, avec la pastille de couleur. */
.lph-sub-all a{
	font-weight:800;
	padding-bottom:10px;
	margin-bottom:5px;
	border-bottom:1px solid var(--lph-line);
	border-radius:9px 9px 0 0;
}
.lph-sub-all a::before{
	content:'';
	display:inline-block;
	width:9px;
	height:9px;
	border-radius:3px;
	background:var(--c,var(--lph-jaune));
	margin-right:9px;
	vertical-align:middle;
}

/* Intertitre discret dans un panneau (ex. "Atypisme"). */
.lph-sub-sep{
	padding:9px 12px 4px;
	margin-top:4px;
	border-top:1px solid var(--lph-line);
}
.lph-sub-sep span{
	font-size:.63rem;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:1.4px;
	color:var(--lph-ink-soft);
}

/* --- Boutique : pastille jaune doux permanente (bouton, pas rubrique) --- */
.lph-nav li.lph-shop{margin-left:8px}
.lph-nav li.lph-shop > a{
	background:var(--lph-jaune-doux);
	border-radius:999px;
	padding:9px 16px;
	font-weight:800;
}
.lph-nav li.lph-shop > a::after{display:none}
.lph-nav li.lph-shop > a:hover,
.lph-nav li.lph-shop > a:focus{
	background:var(--lph-jaune);
	transform:translateY(-1px);
	box-shadow:0 5px 16px rgba(253,238,0,.5);
}

/* --- Loupe --- */
.lph-search-btn{
	flex:0 0 auto;
	width:40px;
	height:40px;
	border-radius:50%;
	border:1.5px solid rgba(26,26,46,.15);
	background:transparent;
	display:grid;
	place-items:center;
	color:var(--lph-ink);
	transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.lph-search-btn svg{width:17px;height:17px}
.lph-search-btn:hover,
.lph-search-btn:focus{
	background:var(--lph-jaune);
	border-color:var(--lph-jaune);
	transform:translateY(-1px);
}

/* --- Burger (mobile uniquement) --- */
.lph-burger{
	display:none;
	flex:0 0 auto;
	width:40px;
	height:40px;
	border-radius:12px;
	border:1.5px solid rgba(26,26,46,.15);
	background:transparent;
	flex-direction:column;
	justify-content:center;
	align-items:stretch;
	gap:4px;
	padding:11px 9px;
	transition:background .18s ease,border-color .18s ease;
}
.lph-burger span{
	display:block;
	width:100%;
	height:2.5px;
	border-radius:2px;
	background:var(--lph-ink);
	transition:transform .2s ease,opacity .2s ease;
}
.lph-burger:hover,
.lph-burger:focus{background:var(--lph-jaune);border-color:var(--lph-jaune)}
.lph-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.lph-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.lph-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* =============================================================
   4. Recherche
   ============================================================= */
.lph-searchbox{
	border-top:1px solid var(--lph-line);
	background:#fff;
}
.lph-searchbox[hidden]{display:none}
.lph-search-form{
	max-width:1240px;
	margin:0 auto;
	padding:14px 24px;
	display:flex;
	gap:10px;
	align-items:center;
}
.lph-search-form input[type="search"]{
	flex:1;
	min-width:0;
	font-family:inherit;
	font-size:.92rem;
	color:var(--lph-ink);
	background:#f6f6f9;
	border:1px solid var(--lph-line);
	border-radius:999px;
	padding:11px 18px;
	margin:0;
	outline:none;
}
.lph-search-form input[type="search"]:focus{
	border-color:var(--lph-ink);
	background:#fff;
}
.lph-search-form button{
	background:var(--lph-ink);
	color:var(--lph-jaune);
	border-radius:999px;
	padding:11px 22px;
	font-size:.82rem;
	font-weight:700;
	white-space:nowrap;
	transition:transform .18s ease,box-shadow .18s ease;
}
.lph-search-form button:hover,
.lph-search-form button:focus{
	transform:translateY(-1px);
	box-shadow:0 6px 18px rgba(26,26,46,.22);
}

/* --- Accessibilite --- */
.lph-sr{
	position:absolute;
	width:1px;height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
}
.lph a:focus-visible,
.lph button:focus-visible,
.lph input:focus-visible{
	outline:2px solid var(--lph-ink);
	outline-offset:2px;
}

/* Respect des preferences systeme : on coupe le trace du marqueur. */
@media (prefers-reduced-motion:reduce){
	.lph *,
	.lph *::after{transition:none !important}
}

/* =============================================================
   5. Ecrans intermediaires
   ============================================================= */
/* La barre des rubriques occupe desormais sa propre ligne pleine
   largeur (retour Catherine 18/08) : la place ne manque plus, on peut
   revenir a une taille de police confortable et ne resserrer que tard. */
@media (max-width:1180px){
	.lph-nav a{font-size:.8rem;padding-left:6px;padding-right:6px}
}

/* --- Tres petits ecrans : on compacte la pastille Boutique plutot que
   de la masquer, pour qu'elle reste atteignable sans deborder. --- */
@media (max-width:560px){
	.lph-shop-btn{padding:7px 12px;font-size:.75rem}
	.lph-search-btn{width:36px;height:36px}
}

/* =============================================================
   6. Mobile / tablette  (< 1024px)
   ============================================================= */
@media (max-width:1023px){

	.lph-wrap{padding:0 14px}

	/* La bande haute garde son ticker, un peu plus compact. */
	.lph-top .lph-wrap{gap:0;padding-top:0;padding-bottom:0;min-height:28px}
	.lph-tk-group a{font-size:.69rem}
	.lph-tk-date{display:none}

	/* Barre principale : burger | logo | loupe */
	.lph-main .lph-wrap{
		padding-top:12px;
		padding-bottom:12px;
		justify-content:space-between;
		gap:12px;
		flex-wrap:wrap;
	}
	.lph-burger{display:flex}
	.lph-logo img{height:34px}

	/* Mobile : logo seul a gauche, la signature et les pastilles cedent
	   la place pour ne pas faire exploser la hauteur du header.
	   La signature reste dans le DOM (donc lue par les moteurs), elle
	   n'est que masquee visuellement. */
	.lph-claim{display:none}
	.lph-facts{display:none}

	/* La ligne 2 n'a plus de filet propre : c'est la nav depliee qui
	   porte sa bordure haute quand elle s'ouvre. */
	.lph-menubar{border-top:0}
	.lph-menubar .lph-wrap{padding-left:0;padding-right:0}

	/* La nav devient un panneau deroulant sous la barre. */
	.lph-nav{
		flex:1 1 100%;
		width:100%;
		display:none;
		justify-content:flex-start;
		margin:0;
		border-top:1px solid var(--lph-line);
		max-height:calc(100vh - 190px);
		overflow-y:auto;
	}
	.lph-nav.is-open{display:flex}
	.lph-nav ul{
		flex-direction:column;
		align-items:stretch;
		justify-content:flex-start;
		flex-wrap:nowrap;
		gap:0;
		width:100%;
	}
	.lph-nav li{border-bottom:1px solid var(--lph-line)}

	/* Les deroulants deviennent de simples listes indentees : pas de
	   panneau flottant, pas d'accordeon a piloter en JS. */
	.lph-sub{
		position:static;
		transform:none;
		opacity:1;
		visibility:visible;
		pointer-events:auto;
		min-width:0;
		max-width:none;
		background:transparent;
		border:0;
		border-radius:0;
		box-shadow:none;
		padding:0 0 8px;
		z-index:auto;
	}
	.lph-sub::before{display:none}
	.lph-sub li{border-bottom:0}
	.lph-sub a{
		padding:7px 18px 7px 34px;
		font-size:.86rem;
		font-weight:500;
		border-radius:0;
		color:var(--lph-ink-soft);
	}
	.lph-sub-all a{
		font-weight:700;
		color:var(--lph-ink);
		border-bottom:0;
		border-radius:0;
		margin-bottom:0;
		padding-bottom:7px;
	}
	.lph-sub-sep{padding:8px 18px 2px 34px;margin-top:2px;border-top:0}
	.lph-nav a{
		font-size:.95rem;
		padding:14px 14px 14px 12px;
		white-space:normal;
		border-left:4px solid var(--c,transparent);
	}
	/* En liste verticale, le marqueur incline n'a pas de sens :
	   la couleur de rubrique passe sur le filet lateral. */
	.lph-nav a::after{display:none}
	.lph-nav a:hover,
	.lph-nav a:focus{background:#fafafc}
	.lph-nav li.is-active > a{background:#fafafc}

	.lph-nav li.lph-shop{margin-left:0}
	.lph-nav li.lph-shop > a{
		border-radius:0;
		padding:14px 14px 14px 12px;
		border-left:4px solid var(--lph-jaune);
	}
	.lph-nav li.lph-shop > a:hover,
	.lph-nav li.lph-shop > a:focus{transform:none;box-shadow:none}
}

@media (max-width:600px){
	.lph-search-form{padding:12px 14px;flex-wrap:wrap}
	.lph-search-form input[type="search"]{width:100%;flex:1 1 100%}
	.lph-search-form button{width:100%}
}

/* =============================================================
   7. Filet de securite sticky
   -------------------------------------------------------------
   Si, une fois publie, la barre ne colle pas au scroll, c'est
   qu'un ancetre Bimber (.g1-body-inner ou #page) porte un
   overflow:hidden, ce qui neutralise position:sticky.
   Decommenter alors la regle ci-dessous et verifier qu'aucun
   defilement horizontal n'apparait.
   ============================================================= */
/*
.g1-body-inner,
#page{overflow:visible}
*/