/* ==========================================================================
   Theme moderne - surcouche appliquee apres style.css
   Ne remplace pas l'existant : ajuste couleurs, espacements et composants.
   Retirer le <link> de Main.phtml suffit a revenir a l'ancien rendu.
   ========================================================================== */

:root{
	--bleu: #004987;
	--bleu-clair: #1a6bb0;
	--bleu-pale: #eaf2f9;
	--bleu-sombre: #00365f;
	--texte: #2c3338;
	--texte-doux: #5b666f;
	--bord: #dde3e8;
	--fond: #f4f6f8;
	--blanc: #fff;
	--ombre: 0 1px 3px rgba(16,32,48,.08);
	--ombre-forte: 0 6px 20px rgba(16,32,48,.13);
	--radius: 10px;
	--transition: .18s ease;
}

/* --- Base ---------------------------------------------------------------- */
/* Les largeurs fixes heritees (formulaire de recherche, colonnes) debordaient
   sur mobile car le padding s'ajoutait a la largeur. */
*, *::before, *::after{ box-sizing: border-box; }

html, body{
	color: var(--texte);
	background-color: var(--fond);
	-webkit-font-smoothing: antialiased;
}
*{
	font-family: Ubuntu, "Segoe UI", system-ui, -apple-system, sans-serif;
}
body{ line-height: 1.55; }

a{ color: var(--bleu); transition: color var(--transition); }
a:hover{ color: var(--bleu-clair); }

img{ max-width: 100%; }

/* --- Structure ----------------------------------------------------------- */
@media screen and (min-width:800px){
	#body{
		margin: 0 auto;
		max-width: 1320px;
		padding: 0;
		box-shadow: var(--ombre);
		background: var(--blanc);
	}
	article{ padding: 28px 34px 40px; }
}

header, footer{ background-color: var(--blanc); }
header{
	padding: 22px 28px 18px;
	border-bottom: 1px solid var(--bord);
}
header #contact{
	font-size: .88em;
	color: var(--texte-doux);
	line-height: 1.5;
}
header #contact b i{
	color: var(--bleu);
	font-style: normal;
	font-weight: 700;
	letter-spacing: .02em;
}

/* --- Recherche ----------------------------------------------------------- */
header #search form{
	width: 300px;
	max-width: 100%;
	border: 1px solid var(--bord);
	border-radius: 999px;
	background: var(--blanc);
	padding: 9px 16px;
	box-shadow: var(--ombre);
	transition: border-color var(--transition), box-shadow var(--transition);
	max-width: 100%;
}
header #search form:focus-within{
	border-color: var(--bleu);
	box-shadow: 0 0 0 3px rgba(0,73,135,.12);
}
header #search_input, header #searchsubmit{ background: transparent; }
header #search_input{
	font-size: .95em;
	color: var(--texte);
}
header #searchsubmit{
	cursor: pointer;
	font-size: 1.05em;
	line-height: 1;
	transition: transform var(--transition);
}
header #searchsubmit:hover{ transform: scale(1.15); }

/* --- Panier (en-tete) ---------------------------------------------------- */
header #panier img{ height: 30px; }
header #panier .bubble{
	background: var(--bleu);
	border-radius: 999px;
	font-size: .74em;
	font-weight: 700;
	padding: 2px 7px;
	min-width: 18px;
	display: inline-block;
	text-align: center;
	line-height: 1.5;
	vertical-align: super;
}
header #panier .bubble::after{ content: none; }

/* --- Titres -------------------------------------------------------------- */
article h1, .home-titre{
	color: var(--texte);
	font-size: 1.6em;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 .4em;
}
article h2{
	color: var(--texte);
	font-size: 1.22em;
	font-weight: 600;
	margin: 1.6em 0 .7em;
	padding-bottom: .35em;
	border-bottom: 2px solid var(--bleu-pale);
}
.home-intro{
	color: var(--texte-doux);
	font-size: 1.02em;
	max-width: 62em;
}

/* --- Cartes categories (accueil) ----------------------------------------- */
article .home .cat div{
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}
article .home .cat div:hover{
	transform: translateY(-3px);
	box-shadow: var(--ombre-forte);
}
article .home .cat div h3 img{
	border: 1px solid var(--bord);
	border-radius: var(--radius);
	display: block;
}
article .home .cat div p{
	color: var(--texte-doux);
	font-size: .9em;
	line-height: 1.5;
}

/* --- Grille produits ----------------------------------------------------- */
.produits{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	grid-column-gap: 18px;
	grid-row-gap: 18px;
}
.produits>div{
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bord);
	border-top: 1px solid var(--bord);
	border-radius: var(--radius);
	background: var(--blanc);
	padding: 14px;
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.produits>div:hover{
	border-color: var(--bleu-clair);
	box-shadow: var(--ombre-forte);
	transform: translateY(-2px);
}
/* neutralise les regles de hauteur/decalage de l'ancienne grille */
.produits>div>:not(:last-child){ height: auto; }
.produits.liste-categorie>div>:first-child{
	height: 155px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	order: 1;
}
.produits .imgprod{
	max-height: 155px;
	width: auto;
	mix-blend-mode: multiply;
}
.produits.liste-categorie>div>:nth-child(2){
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-top: 1px solid var(--bord);
	padding-top: 10px;
	margin: 0;
	margin-bottom: 0;
	order: 3;
}
.produits.liste-categorie>div>:nth-child(2) a:first-child{
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: .85em;
	font-weight: 600;
	color: var(--bleu);
	background: var(--bleu-pale);
	padding: 3px 9px;
	border-radius: 5px;
}
.produits.liste-categorie>div>:nth-child(2) img{ height: 24px; width: auto; }
.produits.liste-categorie>div>:last-child{
	grid-column: auto;
	order: 2;
	padding: 0;
	margin-bottom: 10px;
	font-size: .93em;
	line-height: 1.45;
	flex: 1;
}
.produits.liste-categorie>div>:last-child .smaller{
	color: var(--texte-doux);
	font-style: normal;
	font-size: .88em;
}

/* --- Fiche produit ------------------------------------------------------- */
.detail-produit .produit{
	background: var(--blanc);
	border: 1px solid var(--bord);
	border-radius: var(--radius);
	padding: 8px;
	margin-bottom: 22px;
}
.detail-produit .produit h1{
	font-size: 1.45em;
	margin-top: .15em;
}
.detail-produit .produit p{ margin: .45em 0; }

/* Reference mise en valeur */
.detail-produit .produit ._column:nth-child(2)>p:first-child{
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: .9em;
	color: var(--bleu);
	background: var(--bleu-pale);
	display: inline-block;
	padding: 4px 11px;
	border-radius: 5px;
	font-weight: 600;
}

/* Bloc prix + actions */
.detail-produit .produit ._column.inline{
	background: var(--fond);
	border: 1px solid var(--bord);
	border-radius: var(--radius);
}
.detail-produit .produit ._column.inline>p:first-child{
	font-size: 1.5em;
	font-weight: 700;
	color: var(--texte);
	margin: .2em 0 .6em;
	line-height: 1.2;
}

/* Boutons d'action de la fiche */
.detail-produit ._column.inline a.smaller{
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	font-style: normal;
	font-size: .87em;
	font-weight: 600;
	padding: 11px 16px;
	border-radius: 8px;
	border: 1px solid var(--bord);
	background: var(--blanc);
	color: var(--bleu);
	transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.detail-produit ._column.inline a.smaller:hover{
	border-color: var(--bleu-clair);
	box-shadow: var(--ombre);
	background: var(--bleu-pale);
}
.detail-produit ._column.inline a.smaller img{ height: 26px; width: auto; }
.detail-produit ._column.inline #p_fiche_technique a.smaller img{ height: 30px; }

/* --- Onglets ------------------------------------------------------------- */
.tabs .tab-bar{
	border-bottom: 1px solid var(--bord);
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
article .tabs .tab-bar button{
	border: 1px solid transparent;
	border-bottom: 0;
	background: transparent;
	color: var(--texte-doux);
	font-size: .93em;
	font-weight: 500;
	padding: 10px 16px;
	border-radius: 8px 8px 0 0;
	margin: 0;
	cursor: pointer;
	transition: color var(--transition), background-color var(--transition);
}
article .tabs .tab-bar button:hover{
	color: var(--bleu);
	background: var(--bleu-pale);
}
article .tabs .tab-bar .active{
	background: var(--blanc);
	color: var(--bleu);
	border-color: var(--bord);
	font-weight: 600;
	position: relative;
	top: 1px;
}
article .tabs .tab{
	padding: 18px 4px;
	margin: 0;
	line-height: 1.6;
}

/* Options et produits alternatifs */
article .detail-produit .optalt{
	border: 1px solid var(--bord);
	border-radius: var(--radius);
	padding: 12px;
	transition: border-color var(--transition), box-shadow var(--transition);
}
article .detail-produit .optalt:hover{
	border-color: var(--bleu-clair);
	box-shadow: var(--ombre);
}

/* --- Boutons et formulaires ---------------------------------------------- */
article form input, article form select, article form textarea{
	border: 1px solid var(--bord);
	border-radius: 7px;
	padding: 9px 11px;
	font-size: .95em;
	color: var(--texte);
	background: var(--blanc);
	transition: border-color var(--transition), box-shadow var(--transition);
}
article form input:focus, article form select:focus, article form textarea:focus{
	outline: 0;
	border-color: var(--bleu);
	box-shadow: 0 0 0 3px rgba(0,73,135,.12);
}
article form input[type="submit"], article form button, article .panier .validate button{
	background: var(--bleu);
	color: var(--blanc);
	border: 0;
	border-radius: 7px;
	padding: 11px 22px;
	font-size: .95em;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
article form input[type="submit"]:hover, article form button:hover, article .panier .validate button:hover{
	background: var(--bleu-clair);
	box-shadow: var(--ombre-forte);
	transform: translateY(-1px);
}
/* Les champs requis etaient colores en rouge des le chargement (:invalid).
   On neutralise et on ne signale l'erreur qu'apres saisie de l'utilisateur. */
article form input:invalid, article form select:invalid, article form textarea:invalid{
	background: var(--blanc);
}
article form input:user-invalid, article form select:user-invalid, article form textarea:user-invalid{
	background: #fff6f6;
	border-color: #d98282;
}
article form input:user-invalid:focus, article form select:user-invalid:focus, article form textarea:user-invalid:focus{
	box-shadow: 0 0 0 3px rgba(200,60,60,.12);
}

article form input:disabled, article form select:disabled, article form textarea:disabled, button:disabled{
	background: var(--fond);
	color: var(--texte-doux);
	cursor: not-allowed;
	transform: none;
}

/* --- Tableaux (panier, admin) -------------------------------------------- */
article .panier table, article .admin table{
	border-collapse: collapse;
	width: 100%;
	background: var(--blanc);
	border: 1px solid var(--bord);
	border-radius: var(--radius);
	overflow: hidden;
}
article .panier th, article .admin th{
	background: var(--bleu-pale);
	color: var(--texte);
	font-weight: 600;
	font-size: .92em;
	text-align: left;
}
article .panier td, article .panier th,
article .admin td, article .admin th{
	border: 0;
	border-bottom: 1px solid var(--bord);
	padding: 11px 13px;
}
article .panier tr:last-child td{ border-bottom: 0; }

/* --- Catalogues et videos ------------------------------------------------ */
article .all-catalogues .catalogue, article .catalogues .catalogue{
	border-radius: var(--radius);
	padding: 10px;
	transition: transform var(--transition), box-shadow var(--transition);
}
article .all-catalogues .catalogue:hover, article .catalogues .catalogue:hover{
	transform: translateY(-3px);
	box-shadow: var(--ombre-forte);
}
article .all-catalogues .catalogue img, article .catalogues .catalogue img{
	border: 1px solid var(--bord);
	border-radius: 6px;
}
article .video video{ border-radius: var(--radius); }

/* --- Pied de page -------------------------------------------------------- */
footer{
	border-top: 1px solid var(--bord);
	color: var(--texte-doux);
	font-size: .89em;
	padding: 26px 20px;
	line-height: 1.7;
}
footer a{ color: var(--bleu); }

/* --- Retour en haut ------------------------------------------------------ */
#backToTop{
	border-radius: 50%;
	box-shadow: var(--ombre-forte);
	background: var(--bleu);
	transition: background-color var(--transition), transform var(--transition);
}
#backToTop:hover{
	background: var(--bleu-clair);
	transform: translateY(-2px);
}

/* --- Bandeau cookies ----------------------------------------------------- */
#cookies-banner{
	background: var(--bleu-sombre);
	color: var(--blanc);
	border: 0;
	font-size: .93em;
	box-shadow: 0 -2px 14px rgba(0,0,0,.18);
}
#cookies-banner a, #info{ color: #bcd8f0; }
#cookies-banner > button{
	border-radius: 7px;
	border: 0;
	padding: 9px 20px;
	font-weight: 600;
	font-size: .93em;
	cursor: pointer;
}
#accept-cookie{ background: var(--blanc); }
#deny-cookie{
	background: transparent;
	color: var(--blanc) !important;
	border: 1px solid rgba(255,255,255,.5) !important;
}

/* --- Mobile -------------------------------------------------------------- */
@media screen and (max-width:800px){
	/* empeche tout debordement horizontal */
	html, body{ overflow-x: hidden; }
	header{ padding: 14px 16px; }
	header #banner img{ max-width: 100%; height: auto; }
	header #search form{ width: auto; }
	header #contact{ margin-left: 0; }
	article{ padding: 16px; }
	article h1, .home-titre{ font-size: 1.3em; }

	.produits{
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		grid-column-gap: 12px;
		grid-row-gap: 12px;
	}
	.produits>div{ padding: 11px; }
	.produits>div>:first-child{ height: 120px; }
	.produits .imgprod{ max-height: 120px; }

	nav ul li a{ padding: 11px 15px; }

	/* largeurs fixes heritees qui debordaient */
	#img_societe1, #img_societe2, #img_societe3{
		width: 100% !important;
		height: auto;
	}
	.contact-form-left-sidebar, .contact-form-right-sidebar{
		width: 100%;
		margin-left: 0;
		float: none;
	}
	/* champs du formulaire de contact : jamais plus larges que l'ecran */
	article form input, article form select, article form textarea{
		max-width: 100%;
	}
	article .tabs .tab-bar button{ padding: 9px 12px; font-size: .88em; }
}

/* ==========================================================================
   Icones Font Awesome (remplacent les anciennes images PNG)
   ========================================================================== */

/* Libelle reserve aux lecteurs d'ecran : l'icone seule n'a pas de texte */
.sr-only{
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Coordonnees de l'en-tete */
header #contact .fa-solid{
	color: var(--bleu);
	width: 1.1em;
	text-align: center;
}

/* Bouton de recherche (ancien input converti en button) */
header #searchsubmit{
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--bleu);
	font-size: 1.02em;
	line-height: 1;
	cursor: pointer;
	float: right;
	transition: transform var(--transition), color var(--transition);
}
header #searchsubmit:hover{
	transform: scale(1.12);
	color: var(--bleu-clair);
}

/* Panier de l'en-tete */
header #panier a{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 1.55em;
	color: var(--bleu);
	transition: color var(--transition);
}
header #panier a:hover{ color: var(--bleu-clair); }
header #panier .bubble{
	font-size: .42em;
	vertical-align: top;
	order: 2;
	margin-left: -14px;
	margin-top: -4px;
	position: relative;
	z-index: 1;
}

/* Reseaux sociaux du pied de page */
#socials a{
	font-size: 1.75em;
	color: var(--texte-doux);
	transition: color var(--transition), transform var(--transition);
	display: inline-block;
}
#socials a:hover{
	color: #c4302b; /* rouge YouTube */
	transform: translateY(-2px);
}

/* Badge "Nouveau" des fiches produit */
.badge-nouveau{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff4d6;
	color: #8a5a00;
	border: 1px solid #f0d49a;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: .84em;
	font-weight: 600;
}

/* Boutons d'action de la fiche produit (panier / PDF) */
.detail-produit ._column.inline a.smaller .fa-solid{
	font-size: 1.6em;
	line-height: 1;
}
.detail-produit ._column.inline a.smaller .fa-file-pdf{ color: #c8322b; }

/* Icone panier dans les cartes produit et les vignettes options */
.produits .fa-cart-plus,
.detail-produit .optalt .fa-cart-plus{
	font-size: 1.25em;
	color: var(--bleu);
	transition: color var(--transition), transform var(--transition);
}
.produits a:hover .fa-cart-plus,
.detail-produit .optalt a:hover .fa-cart-plus{
	color: var(--bleu-clair);
	transform: scale(1.12);
}

/* Fil d'Ariane : maison */
article .fa-house{
	color: var(--texte-doux);
	transition: color var(--transition);
}
article a:hover .fa-house{ color: var(--bleu); }

/* Panier : bouton retirer */
article .panier .fa-trash.img-button{
	color: #b4453f;
	font-size: 1.05em;
	cursor: pointer;
	transition: color var(--transition), transform var(--transition);
}
article .panier a:hover .fa-trash.img-button{
	color: #8c2f2a;
	transform: scale(1.12);
}

/* Menu mobile et chevrons de sous-menu */

/* Retour en haut : l'ancienne regle utilisait FontAwesome 4 */
#backToTop::after{
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f077";
}

/* ==========================================================================
   Redesign : en-tete, navigation et pagination
   ========================================================================== */

/* --- En-tete en flexbox (remplace les float et marges negatives) ---------- */
header{
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}
header:after{ content: none; }

header #banner{
	flex: 0 1 330px;
	min-width: 180px;
}
header #banner img{ display: block; }

header #search{
	flex: 1 1 340px;
	display: flex;
	align-items: center;
	gap: 18px;
	justify-content: flex-end;
	float: none;
	margin: 0;
}
header #search form{
	flex: 1 1 auto;
	max-width: 420px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
header #search_input{
	flex: 1 1 auto;
	width: auto;
	border: 0;
	outline: 0;
}
header #searchsubmit{ float: none; flex: 0 0 auto; }

/* Actions rapides : devis et panier */
#header-actions{
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}
#panier{ float: none; margin: 0; }
.header-action{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 8px 12px;
	border-radius: 9px;
	color: var(--texte-doux);
	font-size: .74em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	transition: background-color var(--transition), color var(--transition);
}
.header-action i{
	font-size: 1.55em;
	color: var(--bleu);
	transition: color var(--transition);
}
.header-action:hover{
	background: var(--bleu-pale);
	color: var(--bleu);
}
header #panier a.header-action{ font-size: .74em; }

/* Pastille du compteur, positionnee sur l'icone */
.panier-icone{ position: relative; display: inline-block; line-height: 1; }
header #panier .bubble{
	position: absolute;
	top: -6px;
	right: -11px;
	margin: 0;
	font-size: 1.05em;
	background: #c8322b;
	color: var(--blanc);
	border: 2px solid var(--blanc);
	padding: 1px 6px;
	min-width: 20px;
	vertical-align: baseline;
}

/* Bloc telephone mis en avant */
header #contact{
	flex: 0 0 auto;
	margin: 0;
	font-size: 1em;
}
.contact-tel{
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 15px;
	border: 1px solid var(--bord);
	border-radius: 999px;
	color: var(--texte);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-tel:hover{
	border-color: var(--bleu-clair);
	box-shadow: var(--ombre);
}
.contact-tel i{
	color: var(--blanc);
	background: var(--bleu);
	width: 32px; height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .85em;
	flex: 0 0 auto;
}
.contact-tel span{ display: flex; flex-direction: column; line-height: 1.2; }
.contact-tel b{ font-size: 1em; color: var(--texte); white-space: nowrap; }
.contact-tel em{
	font-style: normal;
	font-size: .74em;
	color: var(--texte-doux);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* --- Pagination moderne -------------------------------------------------- */
.pagination{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 22px 0;
}
.pagination-page, .pagination-nav{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 11px;
	border: 1px solid var(--bord);
	border-radius: 8px;
	background: var(--blanc);
	color: var(--texte);
	font-size: .93em;
	font-weight: 500;
	transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}
.pagination-page:hover, .pagination-nav:hover{
	border-color: var(--bleu-clair);
	background: var(--bleu-pale);
	color: var(--bleu);
}
.pagination-page.is-current{
	background: var(--bleu);
	border-color: var(--bleu);
	color: var(--blanc);
	font-weight: 700;
	cursor: default;
}
.pagination-nav{ color: var(--bleu); }
.pagination-gap{
	padding: 0 4px;
	color: var(--texte-doux);
	user-select: none;
}

/* --- Mobile : en-tete et pagination -------------------------------------- */
@media screen and (max-width:800px){
	header{
		gap: 12px;
		row-gap: 10px;
	}
	header #banner{ flex: 1 1 60%; min-width: 140px; }
	header #search{
		order: 3;
		flex: 1 1 100%;
		justify-content: space-between;
		gap: 10px;
	}
	header #search form{ max-width: none; }
	header #contact{ flex: 0 0 auto; order: 2; margin-left: auto; }
	.contact-tel{ padding: 7px 11px; gap: 8px; }
	.contact-tel em{ display: none; }
	.header-action span:not(.panier-icone):not(.bubble){ display: none; }
	.header-action{ padding: 8px 9px; }

	.pagination-page, .pagination-nav{
		min-width: 34px;
		height: 34px;
		padding: 0 8px;
		font-size: .88em;
	}
}

/* --- Corrections de portee ---------------------------------------------- */
/* Les regles "nav" visent la barre de menu : la pagination est aussi un
   <nav>, on lui rend un fond neutre et sa propre typographie. */
nav.pagination{
	background: transparent;
	font-size: 1em;
	z-index: auto;
}

/* La banniere doit rester lisible sans etre ecrasee */
header #banner{ flex: 0 1 420px; }
header #banner img{ max-height: 74px; width: auto; }
@media screen and (max-width:800px){
	header #banner img{ max-height: 52px; }
}

/* --- Caracteristiques rapides de la fiche produit ------------------------ */
.produit-carac{
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 330px;
}
.produit-carac li{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--fond);
	border: 1px solid var(--bord);
	border-radius: 8px;
	font-size: .9em;
}
.produit-carac i{
	color: var(--bleu);
	width: 1.2em;
	text-align: center;
	flex: 0 0 auto;
}
.produit-carac span{
	color: var(--texte-doux);
	flex: 1 1 auto;
}
.produit-carac b{
	color: var(--texte);
	font-weight: 600;
	white-space: nowrap;
}

/* --- Mobile : l'en-tete ne doit jamais depasser l'ecran ------------------ */
@media screen and (max-width:800px){
	header{ width: 100%; max-width: 100%; }
	header #search{
		width: 100%;
		max-width: 100%;
		min-width: 0;
		flex-wrap: nowrap;
	}
	header #search form{
		flex: 1 1 auto;
		min-width: 0;
	}
	header #search_input{ min-width: 0; }
	#header-actions{ flex: 0 0 auto; }
}

/* --- Mobile : en-tete sur deux rangees, sans superposition --------------- */
@media screen and (max-width:800px){
	header{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 8px;
		row-gap: 10px;
		position: static;
	}
	/* Rangee 1 : logo a gauche, actions a droite */
	header #banner{
		order: 1;
		/* laisse la place aux actions : la banniere ne prend pas toute la rangee */
		flex: 0 1 calc(100% - 140px);
		min-width: 0;
		overflow: hidden;
	}
	header #banner img{ max-width: 100%; height: auto; }
	#header-actions{
		order: 2;
		flex: 0 0 auto;
		position: static;
		gap: 2px;
		display: flex;
		align-items: center;
	}
	/* Rangee 2 : la recherche occupe toute la largeur */
	header #search{
		order: 3;
		flex: 1 1 100%;
		min-width: 0;
		gap: 8px;
	}
	header #search form{ flex: 1 1 auto; min-width: 0; }
	header #search_input{ min-width: 0; }
	/* Le telephone reste joignable via le bouton Devis et le pied de page */
	header #contact{ display: none; }

	#header-actions .header-action{ padding: 6px 9px; }
	#header-actions .header-action i{ font-size: 1.4em; }
}

/* ==========================================================================
   MENU PRINCIPAL — refonte complete
   Les regles de style.css (fond gris, sous-menu noir sur texte gris,
   colonne unique interminable) sont entierement neutralisees ici.
   La barre de pagination est aussi un <nav> : tout est prefixe #menu
   ou nav>ul pour ne jamais l'atteindre.
   ========================================================================== */

nav:not(.pagination){
	background: var(--bleu);
	font-size: .92em;
	border: 0;
	position: relative;
	z-index: 100;
}
nav:not(.pagination):after{ content: none; }

/* --- Barre principale ---------------------------------------------------- */
nav>ul#menu{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1320px;
}
nav>ul#menu>li{
	display: flex;
	position: relative;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	text-transform: uppercase;
	transition: background-color var(--transition);
}
nav>ul#menu>li>a{
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 14px 18px;
	color: rgba(255,255,255,.92);
	font-weight: 500;
	font-size: .92em;
	letter-spacing: .02em;
	line-height: 1.2;
	white-space: nowrap;
	position: relative;
	transition: color var(--transition), background-color var(--transition);
}
nav>ul#menu>li>a:hover,
nav>ul#menu>li:hover>a,
nav>ul#menu>li:focus-within>a{
	color: var(--blanc);
	background: rgba(255,255,255,.1);
}

/* Trait d'accent sous l'entree survolee */
nav>ul#menu>li>a::after{
	content: "";
	position: absolute;
	left: 18px; right: 18px; bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--blanc);
	transform: scaleX(0);
	transition: transform var(--transition);
}
nav>ul#menu>li:hover>a::after,
nav>ul#menu>li:focus-within>a::after{ transform: scaleX(1); }

/* Chevron des entrees a sous-menu */
nav>ul#menu .icon-sub{
	font-size: .62em;
	opacity: .75;
	transition: transform var(--transition);
}
nav>ul#menu>li:hover>a .icon-sub{ transform: rotate(180deg); }

/* --- Mega-menu : panneau blanc en colonnes ------------------------------- */
nav>ul#menu ul{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 18px;
	min-width: 280px;
	max-width: min(920px, 92vw);
	background: var(--blanc);
	border: 1px solid var(--bord);
	border-top: 3px solid var(--bleu);
	border-radius: 0 0 12px 12px;
	box-shadow: 0 14px 34px rgba(16,32,48,.17);
	text-transform: none;
	font-size: 1em;
	color: var(--texte);
	z-index: 120;

	/* Colonnes de type journal : les groupes (titre + enfants) coulent de
	   haut en bas puis passent a la colonne suivante, sans etre coupes.
	   La largeur est bornee pour qu'aucune colonne ne sorte du panneau. */
	display: none;
	width: max-content;
	max-width: min(900px, 92vw);
	column-gap: 24px;
	/* Les colonnes s'equilibrent sur la hauteur disponible : un menu court
	   reste compact, un menu fourni s'etale en largeur plutot qu'en hauteur. */
	column-fill: balance;
	column-width: 220px;

	/* un menu tres fourni ne doit pas depasser l'ecran */
	max-height: min(72vh, 560px);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}
nav>ul#menu>li:hover>ul,
nav>ul#menu>li:focus-within>ul{ display: block; }

/* Un groupe n'est jamais coupe entre deux colonnes */
nav>ul#menu>li>ul>li{
	break-inside: avoid;
	page-break-inside: avoid;
	display: inline-block;
	width: 100%;
	margin-bottom: 10px;
}

/* Un menu d'une seule entree n'a pas besoin de plusieurs colonnes */
nav>ul#menu>li>ul:not(:has(li:nth-child(2))){
	column-width: auto;
	columns: 1;
	width: 280px;
}
/* Le dernier menu s'ouvre vers la gauche pour ne pas sortir de l'ecran */
nav>ul#menu>li:nth-last-child(-n+3)>ul{ left: auto; right: 0; }

nav>ul#menu ul li{
	display: block;
	position: static;
	padding: 0;
	margin: 0 0 2px;
	background: transparent;
	border: 0;
	font-size: 1em;
	break-inside: avoid;
}
nav>ul#menu ul li a{
	display: block;
	padding: 8px 12px;
	border-radius: 7px;
	color: var(--texte);
	font-size: .93em;
	font-weight: 500;
	line-height: 1.35;
	white-space: normal;
	transition: background-color var(--transition), color var(--transition);
}

/* Sous-entrees : survol discret. Declare avant la regle des titres
   pour ne pas ecraser leur survol plein. */
nav>ul#menu ul li a:hover{
	background: var(--bleu-pale);
	color: var(--bleu);
}

/* Titre de groupe : c'est un lien cliquable vers la categorie, il doit
   se distinguer nettement de ses sous-entrees. */
nav>ul#menu>li>ul>li>a{
	color: var(--bleu);
	font-weight: 700;
	font-size: .95em;
	padding: 9px 12px;
	border-bottom: 1px solid var(--bleu-pale);
	border-radius: 7px 7px 0 0;
	margin-bottom: 3px;
}
nav>ul#menu>li>ul>li>a:hover{
	background: var(--bleu);
	color: var(--blanc);
	border-bottom-color: var(--bleu);
}
nav>ul#menu ul li a::after{ content: none; }

/* Troisieme niveau : liste indentee sous son parent, sans survol imbrique */
nav>ul#menu ul ul{
	display: block;
	position: static;
	columns: 1;
	min-width: 0;
	max-width: none;
	margin: 0 0 10px 10px;
	padding: 0 0 0 10px;
	border: 0;
	border-left: 2px solid var(--bleu-pale);
	border-radius: 0;
	box-shadow: none;
}
nav>ul#menu ul ul li a{
	padding: 5px 10px;
	font-size: .87em;
	font-weight: 400;
	color: var(--texte-doux);
}
nav>ul#menu ul ul li a:hover{ color: var(--bleu); }
/* le chevron n'a pas de sens au 2e niveau : tout est deja deplie */
nav>ul#menu ul .icon-sub{ display: none; }

/* --- Bouton hamburger (mobile) ------------------------------------------- */
/* C'est un vrai <button> (focusable au clavier) : on retire le style natif. */
nav>.displayer{
	display: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}
nav>.displayer:focus-visible{
	outline: 2px solid var(--blanc);
	outline-offset: -4px;
}

/* --- Mobile : panneau lateral -------------------------------------------- */
@media screen and (max-width:800px){
	nav:not(.pagination){ position: static; }

	nav>.displayer{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 14px; left: auto; right: 14px;
		margin: 0;
		height: 46px; width: 46px;
		border-radius: 12px;
		background: var(--bleu);
		box-shadow: var(--ombre-forte);
		z-index: 130;
		cursor: pointer;
	}
	nav>.displayer .fa-bars{
		color: var(--blanc);
		font-size: 1.15em;
		line-height: 1;
		margin: 0;
	}

	nav>ul#menu{
		display: none;
		position: fixed;
		top: 0; right: 0; bottom: 0;
		left: auto;
		width: min(310px, 86vw);
		max-width: none;
		margin: 0;
		padding: 74px 14px 24px;
		background: var(--blanc);
		box-shadow: -8px 0 28px rgba(16,32,48,.22);
		overflow-y: auto;
		z-index: 125;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: stretch;
	}
	/* showmenu() bascule la classe .open : on garde la mise en page verticale */
	nav>ul#menu.open{ display: block; }

	nav>ul#menu>li{
		display: block;
		width: 100%;
		border-bottom: 1px solid var(--bord);
	}
	nav>ul#menu>li>a{
		padding: 13px 10px;
		color: var(--texte);
		font-size: .84em;
		font-weight: 600;
		white-space: normal;
	}
	/* Couleurs du menu mobile : voir public/css/mobile.css */
	nav>ul#menu>li>a:hover,
	nav>ul#menu>li:hover>a{
		background: var(--bleu-pale);
		color: var(--bleu);
	}
	nav>ul#menu>li>a::after{ content: none; }
	nav>ul#menu .icon-sub{ display: none; }

	/* Sous-menus deplies en liste indentee, pas de survol sur tactile */
	nav>ul#menu ul,
	nav>ul#menu>li:hover>ul{
		display: block;
		position: static;
		width: auto;
		min-width: 0;
		max-width: none;
		margin: 0 0 8px 8px;
		padding: 0 0 0 10px;
		columns: 1;
		border: 0;
		border-left: 2px solid var(--bleu-pale);
		border-radius: 0;
		box-shadow: none;
	}
	nav>ul#menu ul li a{
		padding: 8px 10px;
		font-size: .95em;
		color: var(--texte-doux);
	}
	nav>ul#menu ul ul{ margin-left: 6px; }
}

/* ==========================================================================
   MENU — corrections du survol
   ========================================================================== */

/* style.css applique `transition: background-color ease 0.7s` a tous les
   `nav li` : le fond mettait 0,7 s a reagir, ce qui donnait un survol mou
   et trainant. On remet une reponse immediate. */
nav:not(.pagination) li{
	transition: none;
}
nav>ul#menu>li,
nav>ul#menu li a{
	transition: background-color var(--transition), color var(--transition);
}

/* L'entree de la barre restait allumee tant que la souris etait dans le
   panneau (`li:hover` couvre aussi le sous-menu). On distingue desormais
   le survol du lien lui-meme de l'etat "panneau ouvert". */
nav>ul#menu>li:hover>a{
	background: rgba(255,255,255,.08);
}
nav>ul#menu>li>a:hover,
nav>ul#menu>li:focus-within>a{
	background: rgba(255,255,255,.16);
	color: var(--blanc);
}

/* Le trait d'accent et le chevron suivent l'ouverture du panneau,
   sans a-coup quand la souris descend dans le menu. */
nav>ul#menu>li>a::after{
	transition: transform .16s ease;
}

/* Pas d'effet de survol sur les entrees sans sous-menu au niveau du <li>
   (elles n'ouvrent rien : seul le lien doit reagir). */
nav>ul#menu>li:not(:has(ul)):hover>a{
	background: rgba(255,255,255,.16);
}

/* Zone tampon invisible entre la barre et le panneau : evite que le menu
   se referme quand la souris traverse l'espace qui les separe. */
nav>ul#menu>li>ul::before{
	content: "";
	position: absolute;
	top: -6px;
	left: 0;
	right: 0;
	height: 6px;
}

/* Le survol des sous-entrees ne doit pas colorer tout le <li> */
nav>ul#menu ul li:hover{ background: transparent; }

/* --- Produit sans visuel -------------------------------------------------
   Les images sont servies depuis un partage interne : certaines familles
   n'en ont aucune. Plutot qu'une balise <img src=""> cassee, on reserve
   la place avec un aplat discret, pour que les cartes restent alignees. */
.img-absente{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 110px;
	border: 1px dashed var(--bord);
	border-radius: var(--radius);
	background: var(--bleu-pale);
	color: #9aa8b4;
	font-size: 1.9em;
}
.produits .img-absente{ max-height: 155px; }

@media screen and (max-width:800px){
	.produits .img-absente{ max-height: 120px; min-height: 90px; }
}

/* --- Page Nouveautes -----------------------------------------------------
   Cette liste a son propre balisage (._column.aside, .ref_column) herite
   d'une mise en page en tableau : les colonnes y etaient contraintes a 25%
   de large, ce qui ecrasait le visuel et le titre en bandes verticales.
   On la ramene au meme rendu en cartes que les autres listes produit. */
.new .produits>div{
	display: flex;
	flex-direction: column;
}
/* neutralise ._table .aside{width:25%}, le padding de ._column et les
   marges en pourcentage de l'ancienne grille (margin-top:25%), qui
   creusaient un vide sous le visuel */
.new .produits ._column.aside,
.new .produits .ref_column,
.new .produits .ref_column2{
	width: auto;
	padding: 0;
	display: block;
}
.new .produits>div>*{
	margin-top: 0;
	margin-bottom: 0;
	height: auto;
}
.new .produits>div>:first-child{
	min-height: 155px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}
/* le lien enveloppe l'image : sans cela il garde sa hauteur de ligne et
   laisse un blanc sous le visuel */
.new .produits>div>:first-child>a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.new .produits .img-absente{ min-height: 155px; }
.new .produits .imgfill{
	max-height: 155px;
	width: auto;
	max-width: 100%;
	mix-blend-mode: multiply;
}
.new .produits .ref_column{
	margin-bottom: 10px;
	font-size: .92em;
	line-height: 1.45;
}
.new .produits .ref_column a{
	color: var(--texte);
	text-decoration: none;
}
.new .produits .ref_column a:hover{ color: var(--bleu); }
/* Les categories restent lisibles mais s'effacent derriere le produit */
.new .produits .ref_column2{
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--bord);
}
.new .produits .ref_column2 p{ margin: 4px 0; }
.new .produits .ref_column2 a{
	color: var(--texte-doux);
	text-decoration: none;
}
.new .produits .ref_column2 a:hover{ color: var(--bleu); }

@media screen and (max-width:800px){
	.new .produits>div>:first-child{ height: 120px; }
	.new .produits .imgfill{ max-height: 120px; }
}

/* === Corrections ergonomie ============================================== */

/* --- 1. Card produit entierement cliquable -------------------------------
   Seuls l'image et la reference etaient des liens : le reste de la carte
   (nom, sous-titre, marges) ne reagissait pas au clic. On etend le lien de
   l'image a toute la carte via un ::after en position absolue, ce qui evite
   d'imbriquer le bouton panier dans le lien produit (HTML invalide).
   Le lien du panier repasse au-dessus grace a son propre z-index. */
.produits.liste-categorie>div.card-produit{ position: relative; }
.produits.liste-categorie>div.card-produit .card-lien::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Le bouton panier et la reference restent cliquables par-dessus la zone. */
.produits.liste-categorie>div.card-produit>:nth-child(2) a{
	position: relative;
	z-index: 2;
}
/* Le curseur main sur toute la carte signale qu'elle est cliquable. */
.produits.liste-categorie>div.card-produit{ cursor: pointer; }

/* --- 2. Lisibilite du survol des cartes d'accueil ------------------------
   style.css superpose au survol un calque sombre (rgba(1,1,1,.6)) avec un
   texte blanc. theme.css forcait ensuite la couleur a --texte-doux (gris
   fonce), d'ou un texte illisible sur fond noir. On retablit le blanc et on
   renforce le calque pour le contraste. */
article .home .cat div p{
	color: #fff;
	background: rgba(0,0,0,.72);
}
article .home .cat div:hover p{ opacity: 1; }

/* --- 3. Espacement des champs du formulaire de devis ---------------------
   style.css applique float:right aux champs sans vider le flottant : les
   lignes se chevauchaient. On repasse chaque ligne en flex, ce qui aligne
   le libelle et le champ et retablit un espacement regulier. */
article form .inputright p{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 12px;
	min-height: 38px;
}
article form .inputright input,
article form .inputright select,
article form .inputright textarea,
article form .inputright button{
	float: none;
	flex: 0 1 auto;
}
/* Le select et son champ "Autre" s'echangent via display:none (SelectOther) :
   un seul des deux est visible, aucun retour a la ligne n'est necessaire. */
/* Cases a cocher : pas d'etirement, elles restent collees a leur libelle. */
article form .inputright input[type="checkbox"]{ flex: 0 0 auto; }

@media screen and (max-width:800px){
	article form .inputright p{
		flex-direction: column;
		align-items: stretch;
		gap: 5px;
	}
}

/* --- 4. Formulaire de contact (/renseignements) ---------------------------
   Les deux colonnes sont figees a 270px par style.css, les inputs portent
   size="40" (plus large que la colonne) et les selects prennent la largeur
   de leur plus longue option : chaque champ avait donc une largeur
   differente et les lignes gauche/droite ne s'alignaient plus.
   On passe les colonnes en grille souple et on force tous les champs a la
   largeur de leur colonne. */
.contact-form-left-sidebar,
.contact-form-right-sidebar{
	width: auto;
	float: none;
	margin-left: 0;
	box-sizing: border-box;
}
.contact-form-colonnes{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 40px;
	float: none !important;
	width: 100% !important;
}
/* Chaque ligne de champ occupe la meme hauteur a gauche et a droite, ce qui
   realigne les paires libelle/champ des deux colonnes. */
.contact-form-left-sidebar p,
.contact-form-right-sidebar p{
	margin: 0 0 14px;
}
/* Tous les champs remplissent la colonne : meme largeur pour les inputs
   (size="40"), les selects et le textarea. */
.contact-form-left-sidebar input:not([type="checkbox"]):not([type="submit"]),
.contact-form-left-sidebar select,
.contact-form-left-sidebar textarea,
.contact-form-right-sidebar input:not([type="checkbox"]):not([type="submit"]),
.contact-form-right-sidebar select,
.contact-form-right-sidebar textarea{
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-top: 4px;
}
.contact-form-right-sidebar textarea{ resize: vertical; }
/* Faux titre blanc servant jadis a aligner la colonne droite sur la gauche.
   La grille aligne desormais les deux colonnes toute seule : on le neutralise
   en gardant sa hauteur, pour ne pas decaler le premier champ de droite. */
.contact-form-right-sidebar .p-disabled{
	visibility: hidden;
	margin: 15px 0 14px;
}

@media screen and (max-width:800px){
	/* Une seule colonne : le faux titre blanc de la colonne droite
	   (.p-disabled) est deja masque par style.css. */
	.contact-form-colonnes{
		grid-template-columns: 1fr;
		gap: 0;
	}
}