@media only screen and (max-width : 960px) {
	
	#headercontainer {
		min-height:50px;
		display:grid;
		grid-template-columns: 44px 1fr auto;
		align-items:center;
		gap:6px;
		position: fixed;
		z-index:100000;
		top:0;
		width:100%;
		padding: 0 12px;   /* side gutters — was flush, so the burger touched left / Outils touched right (border-box: no overflow) */
		background: var(--brand-gradient);
		box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
	}

	.menupanel {
		grid-template-columns:1fr;
	}

	/* Mobile search: full-width, touch-friendly input below the fixed header.
	   (The magnifier/input alignment is handled by the .content/.searchbar__field
	   split in header.php — no mobile padding hacks needed.) */
	.searchbar {
		margin-top: 60px;     /* clear the fixed #headercontainer */
		height: auto;
		padding: 8px 0;
	}
	.searchbar__input {
		padding-top: 11px;
		padding-bottom: 11px;   /* ~44px touch target */
	}

	#logocontainer {
		height:auto;
		display: grid;
		align-content: center;
	}
	
	#logosite {
		width:100px;
		height:auto;
	}
	.gridarticles {
		display:grid; 
		grid-template-columns:1fr ; 
		grid-gap: 20px;
		
		}
	
	.toolbarblock {
		height:64px;
	}

	.content {
		max-width:920px;
		padding-left:20px;
		padding-right:20px;
	}
	
	/* #menu is the off-canvas drawer; it now wraps both the category list
	   (.menuroot) and the panels (.menucontent) — see menu.php. */
	#menu.content {
		position: fixed;
		top: 0;
		left: 0;
		width: min(86vw, 360px);
		max-width: none;
		height: 100dvh;
		padding: 60px 0 24px;
		margin: 0;
		background: #261e19;
		box-shadow: 2px 0 18px rgba(0,0,0,.45);
		transform: translateX(-100%);
		transition: transform .28s ease;
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		z-index: 99999;
	}
	body.nav-open #menu.content {
		transform: translateX(0);
	}

	/* panels flow inline inside the drawer (no longer a fixed overlay) */
	.menucontent {
		position: static;
		width: 100%;
		max-height: none;
		padding: 0;
		z-index: auto;
	}

	.contentwidth {
		width:950px;
	}	

	#fullhd, #widescreen, #normal, #mobile {
		display:none;
	}		

	.onlymobile, .mobileonly {
		display: block;
	}
	
	#main {
		grid-template-columns:1fr;
	}
	
	#mobile {
		display:block;
		position: fixed;
		top:5px;
		left:5px;
		background-color:lime;
	}					
	
	.contentwide {
		max-width: 950px;
		margin: auto;
	}

	.nomobile {
		display:none;
	}
	
	.listeproduits {
		margin-top:20px;
		display:grid;
		grid-gap:20px;
	}	
	
	.menuroot {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		height: auto !important;
		gap: 0;
	}
	

	#mainicons {
		font-size:10px;
		padding-bottom:10px;
	}

	.toolbarblock {
		height:40px;
		width:40px;
	}
	
	.toolbarblock img {
		height:16px;
		width:16px;
	}

	/* The connected-user initials chip is 38px on desktop — far too big for the 40px mobile tile
	   (it overflowed and spilled below the bar). Shrink it to sit in the icon row like the 16px
	   icons, leaving room for the "Compte" label below. */
	.acct__tileavatar {
		width:20px; height:20px; margin:3px auto 0;
		font-size:11px; box-shadow:none;
	}
	
	#footer h2 {
		font-size: 12px;
	}

	.footer {
		display:grid; grid-template-columns:1fr; grid-gap:20px;
	}

	/* ---- hamburger toggle (left of the logo in the app-bar) ---- */
	#navtoggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 11px 9px;
		background: transparent;
		border: 0;
		cursor: pointer;
	}
	#navtoggle span {
		display: block;
		height: 2px;
		width: 100%;
		background: #fff;
		border-radius: 2px;
		transition: transform .25s ease, opacity .2s ease;
	}
	body.nav-open #navtoggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	body.nav-open #navtoggle span:nth-child(2) { opacity: 0; }
	body.nav-open #navtoggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* ---- dim backdrop behind the open drawer ---- */
	#nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,.5);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .28s ease;
		z-index: 99998;
	}
	body.nav-open #nav-backdrop {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	body.nav-open { overflow: hidden; }

	/* ---- drawer items & panels ---- */
	#nosproduits { display: none; }
	.menuitem1 {
		justify-content: flex-start;
		align-items: center;
		flex-grow: 0;
		height: auto;
		min-height: 52px;
		padding: 0 18px;
		font-size: 1rem;
		color: #fff;
		border-bottom: 1px solid rgba(255,255,255,.08);
	}
	.menuitem1active { margin-bottom: 0; }
	.menupanelwrapper {
		position: static;
		width: 100%;
		margin: 0;
		border: 0;
		box-shadow: none;
		padding: 6px 16px 14px;
		background: rgba(0,0,0,.22);
	}
	/* drill-down: tapping a category replaces the list with its panel */
	body.menu-panel-open .menuroot { display: none; }
	.menupanelwrapper { padding: 4px 14px 18px; }

	/* the panel title doubles as a back button (‹ Catégorie) */
	.menutitrepanel {
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 1.15rem;
		color: #fff;
		padding: 6px 0 10px;
		margin-bottom: 6px;
		border-bottom: 1px solid rgba(255,255,255,.12);
	}
	.menutitrepanel::before { content: "\2039"; font-size: 1.7rem; line-height: 1; }

	/* the 3 desktop column-headers (Par Gamme / Marque / Services) don't map
	   to the stacked mobile layout — drop them */
	.menucategories { display: none; }

	/* product cards: two columns that actually fit the drawer, images scale */
	.menuproductgrid {
		grid-template-columns: 1fr 1fr !important;
		grid-gap: 10px;
		margin: 12px 0;
	}
	/* uniform tiles → consistent vertical rhythm: fixed header + fixed image
	   box; the image is contained inside it instead of dictating tile height */
	.menuproductrange { grid-template-rows: 30px 92px; }
	#menu .menuimagecat2 {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 92px;
		padding: 6px;
		overflow: hidden;
	}
	#menu .menuproductrange img {
		max-width: 100% !important;
		max-height: 100% !important;
		width: auto !important;
		height: auto !important;
		object-fit: contain;
	}

	/* Everything inside a panel must be allowed to shrink to the drawer width.
	   Grid/flex items default to min-width:auto and refuse to shrink below their
	   content — that's what pushed the brands/services column past the edge. */
	#menu .menupanel,
	#menu .menupanel * { min-width: 0; }
	#menu .menupanel { grid-template-columns: 1fr; }
	/* the brands | services wrapper stacks instead of sitting side by side —
	   but NOT the product-cards grid (also a direct .grid child of .menupanel),
	   which must keep its two columns */
	#menu .menupanel > .grid:not(.menuproductgrid) { grid-template-columns: 1fr !important; }
	#menu .menubrands, #menu .menuservices { overflow-wrap: anywhere; }
	#menu .menubrands img, #menu .menuservices img { max-width: 100%; height: auto; }
}

/* ── Account overview quick-actions: a conventional 2×2 tile grid on phones ───────────────────
   The default is a horizontal .dashboard__quick flex strip; on a phone it drops each pill onto
   its own full-width row (wasted vertical space). Below, four square tiles — icon on top, label
   underneath, the count as a corner badge. Lives in this GLOBAL sheet (always cache-busted by
   $rand) rather than the per-view compte.css, which turbonav injects bare-href and can serve
   stale. Targeted at phones (≤640px); tablets/desktop keep the inline strip. */
@media only screen and (max-width : 640px) {
	/* One contiguous 2×2 grid: the tiles butt together with a 1px divider that shows through the
	   grid gap (the container's background) — not spaced, individually-bordered cards. The outer
	   border + gap colour are the same hairline, so the whole thing reads as a single control. */
	/* Selectors are prefixed with .dashboard on purpose: the per-view compte.css is emitted AFTER
	   this global sheet with the same single-class selectors (.dashboard__quick {display:flex; gap},
	   .quick-action {…border…}), so equal specificity lost the cascade — the tiles stayed a flex-wrap
	   row of content-width cards. Two classes out-rank one regardless of source order. */
	.dashboard .dashboard__quick {
		display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
		background: #d0d5dd; border: 1px solid #d0d5dd;
	}
	.dashboard .quick-action {
		display: flex; width: 100%; box-sizing: border-box;   /* fill the grid cell edge-to-edge */
		flex-direction: column; align-items: center; justify-content: center;
		text-align: center; white-space: normal; gap: 8px;
		padding: 18px 8px; min-height: 92px; position: relative;   /* corner-badge anchor */
		border: 0; margin: 0;   /* dividers come from the 1px grid gap over the container bg */
	}
	.dashboard .quick-action .icon { width: 26px; height: 26px; }
	.dashboard .quick-action__badge { position: absolute; top: 8px; right: 8px; margin: 0; }

	/* RMA: one column of HORIZONTAL cards — numsav band on top, then the product image on the left
	   and the details stacked on the right (origin affaire spans the full width above them).
	   Prefixed .rma-grid so it out-ranks the desktop rules in components.css.php. */
	.rma-grid { grid-template-columns: 1fr; gap: 12px; }
	.rma-grid .rma-card__body {
		display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; row-gap: 4px;
		grid-template-areas:
			"aff  aff"
			"img  ref"
			"img  desc"
			"img  sn"
			"img  status";
		align-items: start;
	}
	.rma-grid .rma-card__aff    { grid-area: aff; }
	.rma-grid .rma-card__img    { grid-area: img; height: auto; align-self: center; }
	.rma-grid .rma-card__img img { max-width: 72px; height: auto; }
	.rma-grid .rma-card__ref    { grid-area: ref; }
	.rma-grid .rma-card__desc   { grid-area: desc; }
	.rma-grid .rma-card__sn     { grid-area: sn; }
	.rma-grid .rma-card__status { grid-area: status; }

	/* Devis / Commandes lists (.ligneaffaire): the desktop row is a FIXED 65px height with six
	   percentage columns (3% 15% 37% 10% 25% 10%) — on a phone those are a few px wide and every
	   cell overlaps. Re-flow each row into a readable card:
	     [ n° + date          montant ]
	     [ nom d'affaire + livraison  ]
	     [ logos marques     Éliminer ]
	   The glance (hover-only quick-look) is hidden — there's no hover on touch, a tap opens the
	   card. Éliminer is removed on phones too: a destructive action sitting inside a whole-card tap
	   target is a mis-touch risk (deleting a devis stays a desktop gesture). */
	.account-list .ligneaffaire {
		height: auto; padding: 12px;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"id     amt"
			"main   main"
			"brands brands";
		row-gap: 8px; column-gap: 12px; align-items: start;
	}
	.account-list .ligneaffaire .la-glance { display: none; }
	.account-list .ligneaffaire .la-id     { grid-area: id; padding-left: 0; }
	.account-list .ligneaffaire .la-amt    { grid-area: amt; padding-right: 0; font-weight: 700; }
	.account-list .ligneaffaire .la-main   { grid-area: main; min-width: 0; overflow-wrap: anywhere; }
	.account-list .ligneaffaire .la-brands { grid-area: brands; line-height: 0; }
	.account-list .ligneaffaire .la-brands img { max-height: 22px; width: auto; max-width: 110px; vertical-align: middle; margin-right: 6px; }
	.account-list .ligneaffaire .la-act    { display: none; }
}