/* ==========================================================================
   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;

	/* Palette propre aux panneaux du menu : neutre, sans aplat colore.
	   Le bleu de marque reste sur la barre de navigation elle-meme ; a
	   l'interieur des panneaux la hierarchie passe par la typographie et
	   des gris, pas par la couleur. */
	--menu-fond: #fff;
	--menu-texte: #1a1a1a;
	--menu-doux: #6b7280;
	--menu-survol: #f4f4f5;
	--menu-bord: #e5e7eb;
}

/* --- 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%; }

/* Aucun element ne doit provoquer de defilement horizontal, a aucune largeur.
   Le mega-menu en faisait apparaitre un en debordant a droite. */
html, body{ overflow-x: hidden; }

/* --- 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; }
}

/* --- 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;
	/* Ancre du panneau : chaque panneau s'ouvre sous SON entree. Centrer les
	   panneaux sur la barre reglait le debordement, mais leur zone tampon
	   recouvrait alors les entrees voisines, qui devenaient incliquables. */
	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{
	/* Pas de display:none ici : l'ouverture/fermeture passe par
	   visibility + opacity (voir plus bas), qui eux s'animent. Un
	   display:none rendrait toute transition impossible. */
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 18px;
	background: var(--menu-fond);
	border: 1px solid var(--menu-bord);
	border-top: 0;
	border-radius: 0 0 14px 14px;
	box-shadow: 0 12px 32px rgba(17,17,17,.10);
	text-transform: none;
	font-size: 1em;
	color: var(--menu-texte);
	z-index: 120;

	/* Le panneau ne porte plus que les sous-rubriques de 1er rang (14 au
	   maximum, sur Techniques) : une colonne unique suffit et se lit bien
	   mieux qu'un pave multi-colonnes. Le 3e niveau vit dans le volet.
	   Largeur fixe : le volet se colle au bord droit du panneau, qui doit
	   donc etre a une position stable, independante du libelle le plus long
	   (avec width:max-content il sautait d'une rubrique a l'autre). */
	width: 340px;
	max-width: calc(100vw - 32px);
	columns: 1;
	column-width: auto;

	/* PAS d'overflow ici, et donc pas de max-height : le volet de 3e niveau
	   est un enfant positionne en absolu qui sort du panneau par la droite.
	   Un overflow autre que "visible" le decouperait purement et simplement
	   et il resterait invisible au survol ; un max-height sans defilement
	   couperait la liste sans aucun moyen de la faire defiler.
	   Le panneau ne porte que 14 entrees au maximum (Techniques), soit
	   environ 560px : il tient sans plafond. */
	overflow: visible;
}
/* --- Garde anti-debordement ----------------------------------------------
   Le panneau s'aligne toujours sur le bord GAUCHE de son entree. Le seuil
   nth-child(n+6) qui le rabattait datait du panneau large (900px) : a 340px
   il se declenchait bien trop tot et renvoyait a gauche des rubriques qui
   avaient largement la place a droite.
   Si le panneau d'une derniere entree depasse, c'est le script qui le
   recale : lui seul connait la largeur reelle de la fenetre. */
nav>ul#menu>li.panneau-gauche>ul{
	left: auto;
	right: 0;
}

/* Le panneau s'anime comme les volets : display ne se transitionne pas, donc
   il est masque par visibility + opacity et glisse legerement vers le bas.
   Declare ici pour le panneau seul ; les volets ont leur propre regle plus
   bas, avec un glissement lateral. */
nav>ul#menu>li>ul{
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
nav>ul#menu>li:hover>ul,
nav>ul#menu>li:focus-within>ul,
/* .reste-ouvert vaut aussi pour le panneau : sans cela, sortir de la barre
   le refermait instantanement et le delai de tolerance ne servait a rien. */
nav>ul#menu>li.reste-ouvert>ul{
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

/* Le panneau est sur une seule colonne : les entrees s'empilent simplement.
   Un interligne serre suffit, il n'y a plus de groupes a separer. */
nav>ul#menu>li>ul>li{
	display: block;
	width: 100%;
	margin-bottom: 1px;
}

nav>ul#menu ul li{
	display: block;
	/* position: relative — voir le bloc des volets en cascade plus bas :
	   chaque <li> est l'ancre du volet qu'il ouvre. */
	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: 9px 12px;
	border-radius: 8px;
	color: var(--menu-texte);
	font-size: .93em;
	font-weight: 450;
	line-height: 1.4;
	white-space: normal;
	transition: background-color var(--transition), color var(--transition);
}

/* Survol : un simple aplat gris tres clair, aucune couleur. */
nav>ul#menu ul li a:hover{
	background: var(--menu-survol);
	color: var(--menu-texte);
}

/* Entree de 1er rang dans le panneau. Elle se distingue par le poids et
   l'espacement, plus par la couleur ni par un filet de separation. */
nav>ul#menu>li>ul>li>a{
	color: var(--menu-texte);
	font-weight: 600;
	font-size: .94em;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	margin-bottom: 0;
	letter-spacing: -.005em;
}
nav>ul#menu>li>ul>li>a:hover{
	background: var(--menu-survol);
	color: var(--menu-texte);
}
nav>ul#menu ul li a::after{ content: none; }

/* --- Niveaux 3 a 6 : volets en cascade ------------------------------------
   Auparavant le 3e niveau etait deplie en liste indentee dans le panneau.
   Sur Techniques cela faisait 98 sous-entrees pour 14 rubriques : le panneau
   depassait l'ecran et devenait scrollable, impraticable au survol.
   Chaque niveau ouvre donc son propre volet, a droite du precedent. L'arbre
   descend jusqu'a 6 niveaux sous Sciences ; les regles ci-dessous sont
   ecrites en cascade (ul ul), donc elles valent pour TOUS les niveaux, sans
   avoir a en declarer un par profondeur.

   CHAQUE volet est en position:absolute et sort du flux : il n'ajoute jamais
   ni hauteur ni largeur a son parent. Le panneau garde ses 340px, ouvert ou
   non, et un volet garde sa largeur quand le suivant s'ouvre.
   Le <li> porte l'ancre (position:relative) pour que le volet s'aligne sur
   SA ligne : ancre en haut, il aurait fallu remonter toute la hauteur du
   parent en diagonale depuis une entree basse. */
nav>ul#menu>li>ul{ position: absolute; }
nav>ul#menu ul li{ position: relative; }

nav>ul#menu ul ul{
	/* display ne s'anime pas : on garde le volet dans le flux visuel et on
	   joue sur visibility + opacity + transform, qui eux se transitionnent.
	   visibility:hidden le rend inerte (aucun survol, aucun clic, invisible
	   aux lecteurs d'ecran) tant qu'il est ferme, et son changement est
	   differe par la transition pour laisser l'animation se jouer. */
	visibility: hidden;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
	position: absolute;
	/* -18px = le padding du volet : sa premiere entree se retrouve a la
	   hauteur exacte de la ligne survolee, et non 18px plus bas. */
	top: -18px;
	left: 100%;                     /* colle au bord droit du parent */
	margin: 0;
	padding: 18px;
	/* Largeur FIXE, comme le panneau : un volet dont la largeur depend du
	   contenu decalerait le volet suivant a chaque niveau. */
	width: 300px;
	min-width: 0;
	max-width: none;
	columns: 1;
	column-width: auto;
	background: var(--menu-fond);
	border: 1px solid var(--menu-bord);
	border-left: 0;
	border-radius: 0 14px 14px 0;
	box-shadow: 12px 0 28px -14px rgba(17,17,17,.14);
	/* Ni overflow ni max-height : le pont invisible est un ::before pose
	   hors des bords (left:-24px), qu'un overflow decouperait ; et un
	   plafond sans defilement tronquerait la liste en silence. Un volet
	   peut donc depasser en bas de fenetre, c'est assume. */
	overflow: visible;
	z-index: 2;
}
nav>ul#menu ul li:hover>ul,
nav>ul#menu ul li:focus-within>ul,
/* .reste-ouvert est pose par le script : il maintient le volet affiche
   pendant le delai de tolerance, apres que la souris est sortie. */
nav>ul#menu ul li.reste-ouvert>ul{
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
	/* A l'ouverture, visibility bascule immediatement (pas de delai) pour
	   que le volet soit survolable des le debut de l'animation. */
	transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

/* Pont invisible entre une ligne et son volet.
   Le parent a 18px de padding : la ligne s'arrete donc 18px avant le bord ou
   commence le volet (left:100%). Cette bande n'appartient ni a l'une ni a
   l'autre — le curseur la traversait, perdait le :hover, et le volet se
   refermait avant d'etre atteignable.
   Pose sur le volet plutot que sur le <li>, il n'existe que quand le volet
   est ouvert et n'intercepte jamais de clic a vide. */
nav>ul#menu ul ul::before{
	content: "";
	position: absolute;
	top: 0;
	left: -24px;                    /* 18px de padding + 6px de marge */
	width: 24px;
	height: 100%;
}

/* Les volets s'ouvrent toujours vers la droite : pas de regle de bascule.
   Seul le panneau se recale (voir .panneau-gauche plus haut), ce qui lui
   redonne la place necessaire sans inverser le sens de la cascade. */

/* La ligne dont le volet est ouvert reste marquee pendant le parcours. */
nav>ul#menu ul li:hover>a{ background: var(--menu-survol); }

/* Chevron : toute ligne ayant un volet l'annonce, a tous les niveaux. */
nav>ul#menu ul li>a .icon-sub{
	display: inline-block;
	float: right;
	margin-left: 8px;
	font-size: .72em;
	opacity: .45;
	transform: rotate(-90deg);
}

nav>ul#menu ul ul li a{
	padding: 8px 12px;
	font-size: .91em;
	font-weight: 450;
	color: var(--menu-doux);
	border-radius: 8px;
}
nav>ul#menu ul ul li a:hover{
	background: var(--menu-survol);
	color: var(--menu-texte);
}

/* Le chevron est pose par navRender() sur toute entree ayant des enfants.
   Sa mise en forme, commune a tous les niveaux, est dans le bloc des volets
   en cascade plus haut. */

/* --- 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(--menu-survol);
		color: var(--menu-texte);
	}
	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.
	   Le desktop masque desormais panneaux et volets avec visibility +
	   opacity (pour les animer) : il faut annuler les trois proprietes ici,
	   sinon ils resteraient invisibles malgre leur display:block. */
	nav>ul#menu ul,
	nav>ul#menu>li:hover>ul{
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
		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(--menu-bord);
		border-radius: 0;
		box-shadow: none;
	}
	nav>ul#menu ul li a{
		padding: 8px 10px;
		font-size: .95em;
		color: var(--menu-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;
	}
}