.hover-rotate {
  overflow: hidden;
  /*min-width: 240px;
  max-width: 320px;
  width: 100%;*/
}

.hover-rotate img {
  transition: all 0.7s;
  box-sizing: border-box;
  max-width: 100%;
}

.hover-rotate:hover img {
  transform: scale(1.2) rotate(5deg);
}

.hover-rotate.reverse:hover img {
	transform: scale(1.2) rotate(-5deg);
}

/* Removed the site-wide `a:hover { text-decoration: underline }` — this file is include()d by
   css.php, so that rule underlined every link on hover, which read as a "broken"/default-browser
   look. Base `a { text-decoration: none }` (css.php) already governs links in all states; the few
   components that want an underline affordance set it on their own selector. */

.icon {
  display: inline-block;
  width: 1.5em;   /* Scales with text size */
  height: 1.5em;
  stroke-width: 0;
  stroke: white;
  fill: currentColor;
  vertical-align: middle;
}

.pm-close {
	color: red;
}

.white a {
	color: white;
}

#logocontainer {
	margin-left:10px; 
	height:80px;
	margin-top:10px;
}

#headercontainer {
	min-height:100px;
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
}

.breadcrumbs a {
	text-decoration: none;
	transition: background .5s;
}

.breadcrumbs a:hover {
	transition: background .5s;
	background:white;
	color:#5f6e77;
	text-decoration: none;
}

/* Breadcrumb sibling "folder tabs" — same-level category hop (breadcrumbs8 in fonctions.php).
   A category crumb reveals its siblings ON HOVER (no chevron). The hovered crumb becomes an
   active tab (white, matching the panel) sitting flush on top of the panel below it, so tab
   + panel read as one L-shape. Pure CSS; no JS. */
.crumb { display: inline-block; }
.crumb-cat { position: relative; }
/* Roomy crumbs: constant padding so the white hover/active tab has breathing room around the
   text (no jump — the padding is always there, only the background appears on hover).
   inline-block so the vertical padding sits INSIDE the box — otherwise it overhangs and the
   panel's top:100% lands above the tab's visual bottom, collapsing the gap to a ~1px sliver. */
.crumb > a { display: inline-block; padding: 2px 5px; }

/* the hovered crumb = active tab styled as a gradient "title bar" — same OS-feel as the
   treact modal/popover title bars. Tab sits top-left, the white panel hangs off it as the
   window body → reads like a little BeOS window. Raised above the panel's top edge, and lit
   while the cursor is anywhere in .crumb-cat (incl. the panel) so it never flickers. */
.crumb-cat:hover > a {
	position: relative; z-index: 2;
	background: var(--brand-gradient); color: #fff;
	transition: none;            /* snappy — override .breadcrumbs a's .5s fade for the tab */
}

.crumb-dd__menu {
	position: absolute; left: 0; top: 100%;   /* flush under the tab → connected L, no gap */
	z-index: 1; min-width: 180px; max-height: 60vh; overflow-y: auto;
	padding: 4px 0;
	background: #fff;
	/* 1px frame in the SAME gradient as the title tab → tab + panel read as one window unit.
	   A deliberate exception to "panels use shadow, not an outline": explicit framing tells the
	   eye exactly where the window starts/ends (Win3.1/BeOS clarity), which is the point here. */
	border: 1px solid transparent; border-image: var(--brand-gradient) 1;
	box-shadow: var(--shadow-panel);
	/* fade + slide in. opacity/visibility (not display) so it can transition; visibility
	   flips back only AFTER the fade-out (the .15s delay) so the panel stays put while it goes.
	   It slides up from behind the tab (z-index 1 vs 2) and settles flush. */
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	/* CLOSED = display:none too: a merely invisible absolute panel still counts as page overflow — near the right
	   edge on a phone it widened the layout viewport (every fixed layer, e.g. the gallery lightbox, grew past the
	   screen). allow-discrete keeps the fade where supported; elsewhere it just opens/closes without animating. */
	display: none;
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s, display 0s linear .15s;
	transition-behavior: allow-discrete;
}
.crumb-cat:hover .crumb-dd__menu {
	display: block; opacity: 1; visibility: visible; transform: translateY(0);
	/* 200ms hover-intent delay before opening (closing stays immediate via the base rule) */
	transition: opacity .15s ease .2s, transform .15s ease .2s, visibility 0s linear .2s, display 0s linear .2s;
	transition-behavior: allow-discrete;
}
@starting-style { .crumb-cat:hover .crumb-dd__menu { opacity: 0; transform: translateY(-6px); } }
/* Narrow screens: the crumbs wrap and a category can sit near the right edge — hang the OPEN panel off the whole
   breadcrumb bar instead of the tab, so it always fits the screen. */
@media (max-width: 960px) {
	.breadcrumbs { position: relative; }
	.crumb-cat { position: static; }
	.crumb-dd__menu { left: var(--space-3); max-width: calc(100% - 2 * var(--space-3)); }   /* aligned with the crumb text */
	.crumb-dd__menu .crumb-dd__item { white-space: normal; }
}

.crumb-dd__menu .crumb-dd__item {
	display: flex; align-items: center; gap: var(--space-1); padding: 6px 14px;
	font-size: 12px; color: #333; white-space: nowrap;
	transition: background .12s;
}
/* small category thumbnail on a white tile (square — css8 language) */
.crumb-dd__menu .crumb-dd__ico {
	flex: 0 0 auto; width: 22px; height: 22px;
	object-fit: contain; background: #fff;
}
.crumb-dd__menu .crumb-dd__item:hover { background: #DAEAF0; color: #333; }
.crumb-dd__menu .crumb-dd__item.is-current { font-weight: 700; color: var(--brand); }

#logosite {
	width:250px;
}

.gridcentered {
		display:grid;
		align-items:center;
		justify-items:center;
}

.btn {
  /* Base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.5em 1em;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: #F69C17;
  color: white;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
  appearance: none;
  -webkit-appearance: none;

  /* Remove default button styles */
  margin: 0;
  box-sizing: border-box;
}

.btn__content {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.btn__text {
  display: inline-block;
  flex: 0 0 auto;
}

.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}

.btn__icon img,
.btn__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon-only button */
.btn--icon-only .btn__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Text-only button */
.btn--text-only .btn__icon {
  display: none;
}

/* Hover state */
.btn:hover {
  background-color: #4338ca;
  transform: translateY(-1px);
}

/* Active/clicked state */
.btn:active {
  background-color: #3730a3;
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Focus state */
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
}

/* Disabled state */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  background-color: #4f46e5;
}

/* Icon size variants */
.btn--sm .btn__icon {
  width: 0.875em;
  height: 0.875em;
}

.btn--lg .btn__icon {
  width: 1.25em;
  height: 1.25em;
}

/* Icon position variants */
.btn--icon-right .btn__content {
  flex-direction: row-reverse;
}

.btn--icon-top .btn__content {
  flex-direction: column;
}

.btn--icon-bottom .btn__content {
  flex-direction: column-reverse;
}


.red {color:red}

.green {color:green}

.onlymobile, .mobileonly {
	display: none;
}


.fakeaigeneration {
    visibility: hidden;
}

.usermenuitem {
	min-width:96px;
	padding:10px;
	transition: background .2s, transform .25s;
}

.usermenuitem:hover {
	background:#D2D2DF; 
	color:#333;
	transition: background .2s, transform .25s;
	transform: scale(1.2);
	
}

.usermenuitem.actif {
	background:#0066dc;
	filter: invert(1);
}

.split-button {
  display: inline-flex; /* Use inline-flex for side-by-side buttons */
  position: relative; /* Needed for absolute positioning of dropdown */
}

.primary-button, .dropdown-toggle {
  padding: 10px 15px;
  border: 1px solid #ccc;
  /*border-right:none;*/
  cursor: pointer;
  outline: none;
  /* Base look, unified with the modern .cta--primary: green gradient + glossy inset highlight. */
  background: linear-gradient(180deg, #57bd41, var(--green-cart));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  color: #fff;
  font-weight:bold;
  transition: background .2s, color .2s, box-shadow .5s;
}

.primary-button {
	/*border-radius: 100px 0px 0px 100px;*/
}

.primary-button:active {
	box-shadow: inset 1px 1px 5px #333;
	transition: box-shadow .5s;
}

/* Outlined sibling of .primary-button (same box, no fill). Global so any modal/wizard can
   use it; the more-specific .compl-actions .btn-outline keeps that modal's own look. */
.btn-outline {
  padding: 10px 15px;
  border: 1px solid var(--green-cart);
  cursor: pointer;
  outline: none;
  background: #fff;
  color: var(--green-cart-dark);
  font-weight: bold;
  transition: background .2s, color .2s;
}
.btn-outline:hover { background: #f3f8f1; }

.dropdown-toggle {
  border-left: none; /* Remove left border for seamless look */
  /*border-radius: 0px 100px 100px 0px;*/
  
}

.primary-button:hover, .dropdown-toggle:hover {
	background: linear-gradient(180deg, #5fc748, var(--green-cart-dark));
	color:#fff;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 8px rgba(0,0,0,.18);
	transition: background .2s, color .2s, box-shadow:.1s;
}

.dropdown-menu {
  /* Wide, soft elevation: a broad ambient pool + a tighter contact layer for definition.
     Neutral slate tint, low opacity — reads as "floating" rather than a hard offset. */
  box-shadow:
    0 16px 44px rgba(15, 23, 42, .22),
    0 4px 12px rgba(15, 23, 42, .14);

  color:#333;
  min-width: 150px; 
  white-space: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  right: 0;            /* right-aligned by default: drops from the ▼ chevron */
  background-color: white;
  border: 1px solid #ccc;
  display: none; /* Initially hide the dropdown */
  z-index: 100; /* Ensure it's on top */
  transition: box-shadow .1s;
}

/* Viewport-aware variants toggled by js/javascript.js (the split-button dropdown):
   flip above the toggle, or left-align, when the default below/right-aligned
   placement would run off-screen. */
.dropdown-menu.drop-up   { top: auto; bottom: 100%; box-shadow: 0 -16px 44px rgba(15, 23, 42, .22), 0 -4px 12px rgba(15, 23, 42, .14); }
.dropdown-menu.drop-left { right: auto; left: 0; }

.dropdown-menu li {
  padding: 10px 15px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  /* brand gradient on hover — matches the crumb tabs / modal title bars ("OS-window" feel),
     instead of the one-off gold-brown that lived only here. */
  background: var(--brand-gradient);
  color:#fff;
}

.primary-button.green {
	background-color: var(--green-cart);
	color:#fff;
}

.primary-button.small {
	font-size:12px;
	line-height:16px;
	padding:4px;
	border:none;
	border-right:1px solid #59CC40;
}

.dropdown-toggle.small {
	padding: 4px;
	border:none;
}
.dropdown-toggle.green {
	background-color: var(--green-cart);
}

.action {
  background-color: #f3f7fe;
  color: #3b82f6;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  width: 100px;
  height: 45px;
  transition: 0.3s;
  font-weight:normal;
  font-size:12px;
}

.action:hover {
  background-color: #3b82f6;
  box-shadow: 0 0 0 5px #3b83f65f;
  color: #fff;
}

.btnplusminus {
	background-color: #f0f0f0;
	transition: background-color .2s;
}

.miniactive:hover {
	background-color:#ccc;
	transition: background-color .2s;
}
.miniactive:active {
	box-shadow: inset 3px 3px 3px #999;
}

@font-face {
	font-family: "Tabitha";
	src: url("../../fonts/tabitha.woff");
	font-weight:400;
}

/* .photoprincipale / .visuel / .hint* (the legacy product-image grid + flechehint
   arrow decorations) were removed — the product image area is now the #pgal gallery
   (css/gallery.css). .logomarque kept (still referenced in places). */
.logomarque {
	margin-top:10px;
}

.nodecorate {
	text-decoration:none;
}

.detail {
	font-size:11px;
	color: #0E0B58;
	font-weight:normal;
}

a {
	text-decoration:none;
	color:#8D5413;
}

#infosprod {
	background-color:#fff;
	color:#333;
}

#stocktarif {
	display:grid;
	grid-gap:20px;	
}

#floaterprod {
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:20px;
}

.partialmodal {
	display:none;
}

/* Base modal styles */
.partial-modal-open {
    box-sizing: border-box;
}

/* Overlay styles */
.partial-modal-overlay {
    will-change: opacity;
}

/* Close button styles */
.partial-modal-close {
    transition: color 0.2s ease;
}
.partial-modal-close:hover {
    color: #ccc;
}

/* Body lock when modal is open */
.partial-modal-body-open {
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .partial-modal-open {
        width: 90% !important;
        max-width: none !important;
    }

    /* Full-screen for mobile filter menu */
    #filter-menu.partial-modal-open {
        width: 100% !important;
    }
}


#contenutelechargement {
	justify-content: center;
}

#associescontent {
	align-self:center;
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(130px,1fr));
	gap:20px; 
	justify-content: space-around;
}

.associe {
	transition:box-shadow .2s;
	
}

.associe:hover {
	box-shadow: #A2BAE0 0 5px 20px;
	transition:box-shadow .2s;
}

#featuresprod {
	font-size:14px;
	line-height:1.5em;
	padding: 20px;
}

a.fullclicker {

}

div.fullclicker {
	cursor:pointer;
	position:relative;
}

@font-face {
	font-family: "FiraSans";
	src: url("../fonts/FiraSans-Regular.ttf");
}

@font-face {
	font-family: "Nunito";
	src: url("../../fonts/Nunito-Regular.ttf");
	font-weight:400;
}
@font-face {
	font-family: "Tabitha";
	src: url("../fonts/tabitha.woff");
	font-weight:400;
}

@font-face {
	font-family: "Nunito";
	src: url("../../fonts/Nunito-Bold.ttf");
	font-weight:800;
}


*, *:before, *:after {
  box-sizing: border-box;
  padding:0;
  margin:0;
}

html {font-family: 'nunito','Open Sans','Droid Sans',Sans Serif,"Times New Roman",Times,serif;
	font-size: 100%;
	/* Reserve the scrollbar's space permanently so opening a modal/lightbox
	   (which sets body overflow:hidden) doesn't shift the page sideways.
	   Modern replacement for the old padding-right compensation hack. */
	scrollbar-gutter: stable;
}


.degrade_lscf_inv {
	background: var(--brand-gradient);
	color:#fff;
}


#search_result {
	background-color: #fff;
	color:#333;
	display: none;        /* hidden until focus; the show/hide JS toggles it */
	padding: 10px;
	/* Float the results as a dropdown OVER the page instead of growing the
	   (position:relative) field. That keeps the field input-height, so the
	   absolutely-positioned magnifier stays centered on the input no matter how
	   tall the results get — and the page no longer pushes down on each search. */
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 50;
	max-height: 70vh;     /* tall result sets scroll inside the dropdown, not off-screen */
	overflow-y: auto;
	box-shadow: 0 7px 7px rgba(0,0,0,.35);
}

#search_result > div {
	background-color: #fff;
	color:#333;
	font-size:13px;
}

#search_result ul {position: relative; margin:0;}

#search_result li {
	box-sizing:border-box;
	list-style-type: none;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:0;
	border-top:1px solid #eee;
	cursor: pointer;
	display:grid;
	grid-gap:0;
	width:100%;
}

.txtdark {
	color:#333;
}

#search_result li:first-of-type {
	border-top:1px solid #fff;
}

#search_result li:hover{
	background-color:#DAEAF0;
}

#search_result li.active {
	background-color:#DAEAF0;
}

.search_result_li.active {
	background-color:#DAEAF0;
}

.search_result_li_produit {
	grid-auto-flow:row;
}

.search_result_image {margin-left:0px; margin-right:10px; text-align:center; display:grid; align-items: center;
  justify-content: center;  vertical-align: middle;}
.search_result_text {display:block; font-size:14px; line-height:14px;}
.search_result_tarif {font-weight:bold; font-size:10px; text-align:right; color: #FF3333; display:block}

/* ============================================================
   Search dropdown — chip filters + sectioned cards.
   Markup built in lib/search.php (shared with advsearch.php).
   Filter state = `hide-<key>` classes toggled on #search_result
   itself (the element survives every live-typing tUpdate, so a
   chosen filter sticks); each chip is a sibling of the sections,
   so hiding a section never hides its own toggle.
   ============================================================ */

/* Tempered match highlight — was solid white-on-blue ("Word 2000");
   now a soft brand-blue wash that keeps the text legible. */
.srch-hl { background: rgba(1,110,175,.13); color: inherit; font-weight: 600; padding: 0 1px; }

/* ── filter chip bar ── */
.srch-filters {
	display: flex; flex-wrap: wrap; gap: 6px;
	padding: 2px 2px 10px; margin-bottom: 4px;
	border-bottom: 1px solid #eee;
	position: sticky; top: 0;   /* keep filters reachable while the result body scrolls */
	background: #fff; z-index: 2;
}
.srch-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; font: inherit; font-size: 12px; line-height: 1;
	color: #fff; background: var(--brand-gradient);
	border: 0; cursor: pointer; user-select: none;
}
.srch-chip__x { font-size: 14px; line-height: 1; opacity: .85; transition: transform .15s ease; }
/* OFF: chip greyed + hollow; the × rotates 45° → reads as a "+" (click to re-add) */
#search_result.hide-categories    .srch-chip[data-section="categories"],
#search_result.hide-produits      .srch-chip[data-section="produits"],
#search_result.hide-configurateur .srch-chip[data-section="configurateur"],
#search_result.hide-actualites    .srch-chip[data-section="actualites"],
#search_result.hide-articles      .srch-chip[data-section="articles"],
#search_result.hide-affaires      .srch-chip[data-section="affaires"] {
	background: #f1f1f1; color: #999;
}
#search_result.hide-categories    .srch-chip[data-section="categories"]    .srch-chip__x,
#search_result.hide-produits      .srch-chip[data-section="produits"]      .srch-chip__x,
#search_result.hide-configurateur .srch-chip[data-section="configurateur"] .srch-chip__x,
#search_result.hide-actualites    .srch-chip[data-section="actualites"]    .srch-chip__x,
#search_result.hide-articles      .srch-chip[data-section="articles"]      .srch-chip__x,
#search_result.hide-affaires      .srch-chip[data-section="affaires"]      .srch-chip__x { transform: rotate(45deg); }
/* the toggle itself, hiding its section's body + slim header */
#search_result.hide-categories    .srch-section[data-section="categories"],
#search_result.hide-produits      .srch-section[data-section="produits"],
#search_result.hide-configurateur .srch-section[data-section="configurateur"],
#search_result.hide-actualites    .srch-section[data-section="actualites"],
#search_result.hide-articles      .srch-section[data-section="articles"],
#search_result.hide-affaires      .srch-section[data-section="affaires"] { display: none; }

/* ── slim section labels (replace the loud full-width orange bars) ── */
.srch-head {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 2px 4px;
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: #b08a5a; cursor: default;
}
.srch-head::after { content: ''; flex: 1; height: 1px; background: #eee; }

/* ── Actualités / Articles → card grid (were full-width rows) ── */
.srch-cardgrid {
	display: grid; gap: 8px; padding: 4px 2px 6px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.srch-card {
	display: grid; grid-template-rows: 60px auto 1fr; grid-gap: 4px;
	border: 1px solid #eee; padding: 8px;
}
.srch-card__media { display: flex; align-items: center; justify-content: center; height: 60px; overflow: hidden; }
.srch-card__media img { max-width: 100%; max-height: 60px; width: auto; height: auto; object-fit: contain; }
.srch-card__title { font-size: 12px; font-weight: 700; line-height: 1.2; color: #333; }
.srch-card__excerpt { font-size: 10px; line-height: 1.35; color: #777; }

/* ── Affaires → compact cards; étape is a small badge, not a repeated title bar ── */
.srch-affgrid {
	display: grid; gap: 10px; padding: 4px 2px 6px;
	grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}
.srch-aff { display: block; border: 1px solid #eee; border-left: 3px solid #b08a5a; padding: 8px; }
.srch-aff__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.srch-aff__num { font-size: 10px; color: #999; }
.srch-aff__etape {
	font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
	background: #efe9e2; color: #8a6d4b; padding: 2px 6px; white-space: nowrap;
}
.srch-aff__name { font-size: 12px; line-height: 1.25; color: #333; margin-bottom: 4px; }
.srch-aff__meta { font-size: 10px; color: #999; }
.srch-aff__brands { margin-top: 5px; }
.srch-aff__brands img { max-height: 14px; max-width: 46px; }

/* "Voir tous les résultats" — spans the whole product grid as a clear CTA into the
   css8 /recherche page (was a small cell that bounced to the old site). */
.srch-more {
	grid-column: 1 / -1;
	display: flex; align-items: center; justify-content: center; gap: 6px;
	padding: 12px; margin-top: 4px;
	font-size: 15px; font-weight: 700; color: #b08a5a;
	border-top: 1px solid #eee; text-align: center;
}
.srch-more:hover { background: #faf7f2; }


#spinner {
animation: spin 1s ease-in-out infinite;
}

.menuimagecat2 {
	overflow:hidden;
}

#spinnerbre {
animation: breathing 2s ease-in-out infinite;
opacity:.5;
}

.filteredout {
	color:#f00;
}

@keyframes spin {
from {
	transform:rotate(0deg);
}
to {
	transform:rotate(360deg);
}
}		 


@keyframes breathing {
0% {
transform: scale(0.3);
}

25% {
transform: scale(1);
}

60% {
transform: scale(1.1);
}

100% {
transform: scale(0.3);
}
}


.white {color:white;}

.menucontent {color:white; top: 10px;  position: relative;}

.menuitem1 {color:white; z-index:1;}

/* "You are here" — the megamenu's current top-level category (JS adds .menuitem-current from
   <body data-cat1>). Inset underline → no layout shift on the flex row; bold to reinforce. */
.menuitem1.menuitem-current {
	box-shadow: inset 0 -3px 0 #fff;
	font-weight: 600;
}

a.nodecorate {
	text-decoration: none;
}

a.nodecorate:visited {
	text-decoration: none;
}

body {
	min-height:100vh;
	/*color: #fff;*/
	font-family: 'Nunito', 'Work Sans', Ubuntu, 'Nunito Sans', Lato, 'Open Sans','Droid Sans',Sans Serif,"Times New Roman",Times,serif;
}

.bgwhite {
	background-color:white;
}

.notconnected {
	display: grid;
	align-items:center;
	justify-items:center;
	color:red;
	min-height:130px;
}

.eliminer {transition:opacity 400ms; justify-self:right; padding-right:20px; opacity:0; color:red;}
.glance {transition:opacity 400ms; opacity:0;}

.ligneaffaire:hover {background-color:#ededf0;}

.ligneaffaire:hover .eliminer {opacity:1;}
.ligneaffaire:hover .glance {opacity:1;}

.bold {
	font-weight: bold;
}

.ligneaffaire {
	height:65px;
	display:grid;
	grid-template-columns:3% 15% 37% 10% 25% 10%;
	justify-items:left;
	align-items:center;
	/* Card look comes from the shared .account-card (white + shadow); old table border dropped. */
	padding:0 var(--space-2);
}
/* Named cells (were inline styles) so the phone breakpoint in css.mobile.php can re-flow the row. */
.ligneaffaire .la-glance { justify-self: center; }
.ligneaffaire .la-id     { padding-left: 20px; }
.ligneaffaire .la-amt    { justify-self: right; padding-right: 20px; white-space: nowrap; }
.ligneaffaire .la-brands { line-height: 16px; }
.ligneaffaire .la-act    { justify-self: right; }

.is-none {display:none;}

#catalogproduits {
	cursor:pointer;
}

#fullhd, #widescreen, #normal, #mobile, #tiny {
	display:none;
}
	
#fullhd {
	display:none;
	position: fixed;
	top:5px;
	left:5px;
	background-color:lime;
}


#widescreen {
	display:none;
	position: fixed;
	top:5px;
	left:5px;
	background-color:lime;
}

#normal {
	display:block;
	position: fixed;
	top:5px;
	left:5px;
	background-color:#F49F33;
}


#mobile {
	display:none;
	position: fixed;
	top:5px;
	left:5px;
	background-color:#FF4400;
}

#tiny {
	display:none;
	position: fixed;
	top:5px;
	left:5px;
	background-color:#320D00;
}
		
.toolbarblock {
	height:80px;
	width:80px;
	margin-top:10px;
	display: grid;
	grid-template-rows: 7fr 3fr;
	text-align:center;
	cursor:pointer;
}
		
.text_center {
	text-align:center;
}
		
.mw100 {
	max-width:100%;
	max-height:100%;
}

.toolbarblock_icon {
	margin-top:10px;
	width:40px;
	text-align:center;
}
		
#fakeModal {
	 height: 100%;
	 display:flex;
	 align-items: center;
	 justify-content: center;
	 width:auto;
	 border:1px solid #F00;
}
		
.h2 {
	display:block;
	font-weight: bold;
	padding:10px;
	font-size:1.5rem;
	color:white;
	margin:0;   /* flush bar — neutralize the UA margin a heading element (e.g. the product <h1>) brings */

}
		
.fakeModalContent {
	min-height:250px;
}
		
.modal-shadow {
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	  background-color: #3e3e3e;
}
		
.button {
	background-color:#ff9923;
	font-weight:bold;
	padding:5px;
	border:1px solid #933318;
	color:#fff;
	cursor: pointer;
}
		
input[type=text] {
	padding: 10px;
	caret-color: #ff9923;
	accent-color: #ff9923;
}

input[type=password] {
	padding: 10px;
	caret-color: #ff9923;
	accent-color: #ff9923;
}

input[type=search] {
	padding-left: 20px;
	caret-color: #ff9923;
	accent-color: #ff9923;
}
		
.content {
	min-width: 320px;
	max-width: 90%;
	margin: auto;
}
	

.contentwide {
	max-width: 1160px;
	margin: auto;
}

.secondary, .ZebraDialog_Body, ZebraDialog_Buttons {
	background: #41434E;
	color:#fff;
}
	
.curpointer {
	cursor:pointer
}
	
/* ── Header toolbar (header.php #mainicons) ── */
#mainicons { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 10px; }
.toolbarblock { position: relative; cursor: pointer; }   /* relative = cart-badge anchor; the blocks are interactive */
#cart-count {
	position: absolute; top: 2px; right: 6px;
	min-width: 16px; height: 16px; padding: 0 4px;
	background: #138a3e; color: #fff; border-radius: 9px;
	font-size: 11px; line-height: 16px; text-align: center;
}

/* ── Account tile dropdown (header.php #compteutilisateur, connected state) — a hover-reveal
   "OS window": gradient title bar (company/contact) + white panel of shortcuts + a red
   Déconnexion, framed in the brand gradient. Same language as the breadcrumb dropdowns.
   Anon tile has no panel; a click opens the login modal. ── */
.acct__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Connected state is shown by a small green corner cue (NOT by changing the label text or
   size) — so all three tiles keep the same word size + vertical rhythm. The actual identity
   (company / contact) lives in the dropdown. Square mark, matching css8's angular look. */
.acct.is-connected::after {
	content: ''; position: absolute; top: 6px; right: 6px;
	width: 7px; height: 7px; background: #4AAA35;
}

.acct__menu {
	position: absolute; top: 100%; right: 0;
	z-index: 1200; min-width: 220px;
	text-align: left; color: #333; background: #fff;
	border: 1px solid transparent; border-image: var(--brand-gradient) 1;
	box-shadow: var(--shadow-panel);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.acct:hover .acct__menu,
.acct:focus-within .acct__menu {   /* :focus-within → keyboard users open the dropdown by tabbing to the tile */
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity .15s ease, transform .15s ease, visibility 0s;
}
/* Dismissed on a page change (handlers/nav/goto.php → tAddClass): turbonav only swaps <main>, so the pointer
   is still over the tile and the clicked link keeps focus — :hover/:focus-within would keep the menu open.
   Re-armed by javascript.js when the pointer leaves the tile (or the tile is tapped / focused again).
   Higher specificity than the open rule. */
.acct.is-dismissed:hover .acct__menu,
.acct.is-dismissed:focus-within .acct__menu {
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: none;
}
.acct__head { background: var(--brand-gradient); color: #fff; padding: 8px 12px; line-height: 1.25; }
.acct__ent  { font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.acct__cli  { font-size: 11px; opacity: .85; }
/* Account dropdown head = a small personal "you belong here" card: initials avatar + company /
   contact name. Scoped to #compteutilisateur so the Panier head (its own .acct__head) is untouched. */
#compteutilisateur .acct__head { display: flex; align-items: center; gap: 10px; }
.acct__id     { min-width: 0; }
.acct__avatar {
	flex: 0 0 auto; width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.22); color: #fff;
	font-weight: 800; font-size: 14px; letter-spacing: .5px;
}
/* Same initials as the header tile icon when connected (a solid white chip on the gradient tile
   → reads as "their" avatar; replaces compte.svg). Sized to sit in the .toolbarblock icon row. */
.acct__tileavatar {
	width: 38px; height: 38px; margin: 8px auto 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; color: var(--brand);
	font-weight: 800; font-size: 15px; letter-spacing: .5px;
	box-shadow: var(--shadow-panel);
}
.acct__item {
	display: flex; align-items: center; gap: 9px;
	width: 100%; box-sizing: border-box; padding: 9px 12px;
	font: inherit; font-size: 13px; color: #333; text-align: left; text-decoration: none;
	background: none; border: 0; cursor: pointer;
}
.acct__item .icon { width: 16px; height: 16px; flex: 0 0 16px; }
.acct__item:hover { background: #DAEAF0; color: #333; }
.acct__logout { color: #b3261e; border-top: 1px solid #eee; }
.acct__logout:hover { background: #fbe9e7; color: #b3261e; }
/* "Ajouter des produits" — a small square icon button in the Panier dropdown head (opens the
   puncher targeting the cart). Tooltip via title=. Scoped to #paniertile so the account head's
   stacked company/contact layout is untouched. */
#paniertile .acct__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acct__addbtn {
	flex: 0 0 auto; width: 24px; height: 24px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.2); color: #fff; border: 0; cursor: pointer;
}
.acct__addbtn:hover { background: rgba(255,255,255,.38); }
.acct__addbtn .icon { width: 15px; height: 15px; }
.acct__note { padding: 8px 12px; font-size: 12px; color: #666; line-height: 1.35; }

/* "Charger un devis" chooser (panier/offres modal): one row per saved devis. */
.offre-list  { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.offre-empty { padding: 24px; text-align: center; color: #777; line-height: 1.4; }
.offre-row {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 14px; border-bottom: 1px solid #eee;
}
.offre-row:last-child { border-bottom: 0; }
.offre-row__info { min-width: 0; }
.offre-row__nom  { font-weight: 600; font-size: 14px; color: #333; overflow-wrap: anywhere; }
.offre-row__cur  { font-weight: 400; font-size: 12px; color: #4AAA35; }
.offre-row__meta { font-size: 12px; color: #888; }
.offre-row__num  { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .3px; color: #aaa; }
.offre-row__here .icon { width: 18px; height: 18px; color: #4AAA35; }

/* Condensed cart preview in the Panier dropdown (panier_preview_html): pic | ref | qty | total.
   Power-user glance — a touch wider than the account menu for the 4 columns. */
#paniertile .acct__menu { min-width: 300px; }
.cartprev { max-height: 240px; overflow-y: auto; padding: 2px 0; }
.cartprev-row {
	display: grid; grid-template-columns: 28px 1fr auto auto; gap: 8px;
	align-items: center; padding: 4px 12px; font-size: 12px;
	color: inherit; text-decoration: none;        /* row is now an <a> → kill link styling */
	transition: background .12s ease;
}
.cartprev-row:hover { background: #f1f3f5; text-decoration: none; }   /* clickable affordance — beats global a:hover underline */
.cartprev-row__img { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cartprev-row__img img { max-width: 28px; max-height: 28px; width: auto; height: auto; object-fit: contain; }
.cartprev-row__ref { min-width: 0; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartprev-row__qty { color: #888; }
.cartprev-row__sub { font-weight: 600; color: #333; white-space: nowrap; }
.cartprev-total { padding: 8px 12px; border-top: 1px solid #eee; font-size: 12px; color: #555; text-align: right; }
.cartprev-empty { padding: 14px 12px; font-size: 12px; color: #888; }
.cartprev-more { padding: 4px 12px; font-size: 11px; color: #999; font-style: italic; }

/* ── Search field (header.php) — input group: magnifier + input ── */
.searchbar__field { position: relative; }
.searchbar__ico {
	position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
	display: flex; color: #888; pointer-events: none;
}
.searchbar__ico .icon { width: 18px; height: 18px; }   /* fix the size — .icon's 1.5em is font-dependent */
.searchbar__input {
	width: 100%; box-sizing: border-box;
	padding: 6px 8px; border: none; background: #fff; font-weight: bold;
}
/* The input is type=search, so input[type=search]{padding-left:20px} (an attribute
   selector — higher specificity than a single class) was clobbering our left padding
   and letting the magnifier overlap the placeholder. A 2-class selector wins it.
   Icon ends at 10+18 = 28px; 36px leaves a clean gap. */
.searchbar__field .searchbar__input { padding-left: 36px; }
/* App-only scan button (js/app-mode.js) — mirrors the magnifier on the right; a full-height touch target. */
.searchbar__scan {
	position: absolute; right: 0; top: 0; bottom: 0; width: 44px;
	display: flex; align-items: center; justify-content: center;
	border: none; background: transparent; color: var(--brand); cursor: pointer;
}
.searchbar__scan[hidden] { display: none; }
.searchbar__scan .icon { width: 22px; height: 22px; }
.searchbar__scan:active { opacity: .6; }
.searchbar__scan:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.app-mode .searchbar__field .searchbar__input { padding-right: 48px; }

/* ── Backdrop: when the megamenu panel or search dropdown is open, dim EVERYTHING —
   header bars included — except the active component (lifted back above it below).
   Same darkness as the treact modal overlay (rgba(0,0,0,.5)) so all three open-states
   share ONE consistent backdrop look. Lives INSIDE #site-header (z:1000) so it covers
   the header chrome AND the page beneath; z:500 keeps it above the chrome but below the
   active component (z:600). Hit-testable only while visible → clicking it lands outside
   the active component, firing the existing close handlers. */
#menudim {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
	z-index: 500;
}
body.menu-panel-open #menudim,
body.search-open #menudim,
body.prodflyout-open #menudim { opacity: 1; visibility: visible; }

/* The whole header is ONE stacking context (<header id='site-header'> in index.php),
   above the page content. The #menudim backdrop + the spotlight below all live inside
   it. Below toaster/cookie/modals (≥9999) so those still win; the mobile drawer's high
   z-indexes order correctly WITHIN this context, so they keep working. */
#site-header { position: relative; z-index: 1000; }

/* Spotlight: only the ACTIVE component rises above the backdrop (z:500); everything
   else in the header dims along with the page. Search and menu are mutually exclusive,
   so they never fight for the layer. (Raises only z-index/position — no geometry change:
   the panel is already absolute, so its containing block is untouched.) */
body.search-open .searchbar { position: relative; z-index: 600; }
body.menu-panel-open .menuroot { position: relative; z-index: 600; }
body.menu-panel-open .menupanelwrapper { z-index: 600; }
/* Cascade flyout: lift the menu bar (which contains #prodflyout) above the dim — AND above a
   megamenu panel (z:600). Otherwise hovering/clicking a sibling nav item opens its .menupanelwrapper
   (also z:600); the tie resolves by DOM order and .menucontent sits AFTER .menuroot, so that panel
   would paint OVER the open flyout. 650 keeps the flyout cleanly on top while it's open. */
body.prodflyout-open .menuroot { position: relative; z-index: 650; }

/* top utility bar (Qui sommes-nous / Contact / …) */
.topbar { padding: 4px; height: 24px; box-sizing: border-box; background: #261e19; color: #fff; font-size: 12px; }
.topbar__inner { display: flex; justify-content: space-around; }

.searchbar {
	height:60px;
	padding-top:15px;
	}
		
.productpage {
	margin-top:20px;
	display:grid;
	grid-gap:20px;
	grid-template-columns:20fr 80fr;
}
	
.secondarytitle {
	padding:5px;
	margin-top:5px;
	margin-bottom:5px;
}
	
.filtrecontent {
	margin-left:20px;
}
	
.blocproduit {
	cursor: pointer;
}
	
.titreblocproduit {
	font-weight:bold;
	padding:10px;
	overflow: hidden;
	text-overflow: ellipsis;			
	height:60px;
	display:grid;
	align-items:center;
}
	
.blocproduitmarque {
	background:#fff;
	text-align:right;
	padding-right:10px;
	height:24px;
	padding-top:5px;
}
	
.blocproduitmarqueimg {
	max-width:45px;
	max-height:22px;
}
	
.containerimageblocproduit {
	background:#fff;
	height:160px;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
}
	
.small {
	font-size:.8rem;
}
	
.valign {
	vertical-align:middle;
}
	
ul {
	padding: 0;
	margin-left: 15px;	
}
	
b.descourte {
	display:block;
	margin-top:20px;
	margin-left:20px;
}
	
li {padding: 0 0 0 .25em;}
	
.productdescription {
	padding-left:10px;
	height:60px;
	display: grid;
	align-items: center;
	color:#fff;
}

.blocproduitprix {
	height:25px;
	text-align:right;
	padding-right:5px;
	font-size: 1.2rem;
	font-weight: bold;
	color:#F00;
	background-color: #fff;
}

.rotate img {}

.rotate img:hover {
	animation: rotation 250ms cubic-bezier(.77,0,.18,1);
}

@keyframes rotation {
  25% {
    transform: rotate(-10deg);
  }
  75% {
	  transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}	

#main {
}

.padded10 {
	padding:10px;
}

.padded20 {
	padding:20px;
}

.lineheight {
	line-height:1.5em;
}

#cookie-banner {
	justify-items:center;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15px;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
	z-index: 9999;
	display: none;
}

#cookie-banner p {
	margin: 0 0 10px;
	font-size: 14px;
}

#cookie-banner button {
	margin-right: 10px;
	padding: 5px 15px;
}

#footer {
	margin-top:20px;
	font-size:.8em;
}

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

.footercontainer {
	box-shadow: 0px 10px 15px #333;
}

.newsimagecontainer {
	background-color:#fff;
	height:350px;
	align-items:center;
	padding:10px;
	overflow:hidden;
}

.is-hidden {
  display:none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

.gradient,.ZebraDialog_Title {
	background: linear-gradient(90deg, #933318, #ff9923);
	color:#fff;
}

.gradient_background {
	/*background: linear-gradient(45deg, #565a62 40%, #3e3e3e 50%, #38393C 50%);*/
	background: #5F6E77;
}

.filtres {
	color:#fff;
	font-size:12px;
}

.disableselect {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

.flex-container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
}

.flex-container-row {
    width: auto;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */   
}

.flex-item {
    
    
}

.boxshadow {
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px;
	
}
	
.boxshadowup {	
	box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 3px, rgba(0, 0, 0, 0.1) 0px -3px 4px;
}

.petit {
	font-size:13px;
}

.menubrands {
	margin-top:20px;
	margin-bottom:20px;
	margin-left:40px;
	margin-right:20px;
	border-left:1px solid #333;
	padding-left:0px; 
	line-height:200%;
}

.menuservices {
	margin-top:20px;
	margin-bottom:20px;
	margin-left:0px;
	margin-right:20px;
	border-left:1px solid #333;
	padding-left:20px; 
	line-height:200%;
}

.grid {
	display:grid;
}

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

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

.gridcenter {
	justify-items: center;
	align-items:center;
}

.gridcentered {
	justify-items: center;
	align-items:center;
}

.pointer {
	cursor:pointer;
}

:root {
  --checkbox-border-color: #E28200;
  --checkbox-checked-color: #58E32F;
  --checkbox-hover-color: #E8F1A3;
  --checkbox-disabled-bg-color: #d9d9d9;
}

.fadeinonscroll {
	opacity:1;
}

/*
input[type="checkbox"] {
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  margin: 1px;
  padding: 0;
  border: 2px solid var(--checkbox-border-color);
  appearance: none;
  background-color: #ffffff55;
  outline: none;
  transition: outline 0.1s;
  border-radius:100%;
}

input[type="checkbox"]:checked {
  background-size: cover;
  padding: 2px;
}

input[type="checkbox"]:not(:disabled):checked {
  border-color: var(--checkbox-checked-color);
  background-color: #ffffffCC;
  background-image: url('../static/images/a2.svg');
}

input[type="checkbox"]:disabled {
  background-color: var(--checkbox-disabled-bg-color);
}

input[type="checkbox"]:disabled:checked {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: #FF0000" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
}
*/

@media (hover: hover) {
  input[type="checkbox"]:not(:disabled):hover {
    background-color: var(--checkbox-hover-color);
    outline: 2px solid var(--checkbox-hover-color);
    transform: scale(1.05);
  }
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--checkbox-hover-color);
  transform: scale(1.05);
}


/* Quantity stepper styles moved to vues/produit/produit.css (product-page-only UI, co-located with its view via the LoadVue server-component convention). */

.pc100 {
	width:100%;
}

.right {
	text-align:right;
}

.center {
	text-align:center;
}

.left {
	text-align:left;
}

/* Letter Spacing */

h1, .h1 {
	letter-spacing: -2%;
}

h2, .h2 {
	letter-spacing: -1.5%;
}

h3 {
	letter-spacing: -1%;
}


@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"] {
    transition: none;
  }
}

/* View Transitions for turbonav fragment swaps (Chrome/Edge/Safari 18+; ignored elsewhere).
   Default root crossfade, just tuned snappier. Only the changed <main> shows it — the header/menu
   are identical old↔new so they crossfade invisibly. turbonav already skips the transition under
   prefers-reduced-motion, so no extra guard needed here. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .2s;
  animation-timing-function: ease;
}