/* ==========================================================================
   MOBILE — feuille dediee, chargee uniquement sous 800px
   ==========================================================================

   Pourquoi un fichier separe :
   style.css et theme.css decrivent un mega-menu concu pour le survol
   (70 regles sur nav>ul#menu, des :hover et :focus-within hors media query).
   Sur tactile ces regles fuitaient et annulaient chaque correctif ajoute
   dans theme.css. Plutot que d'empiler des contre-annulations, cette
   feuille repart de zero pour le menu, l'en-tete et le fil d'Ariane.

   Elle est chargee via media="screen and (max-width:800px)" : au-dessus de
   800px le navigateur ne l'applique pas, le desktop reste donc strictement
   inchange. Les fichiers d'origine ne sont pas modifies.

   Les !important ne sont pas de la facilite : ils neutralisent des regles
   desktop plus specifiques (id #menu) qu'on ne peut pas battre autrement
   sans reecrire le balisage.
   ========================================================================== */


/* ==========================================================================
   1. EN-TETE — recherche, devis, panier
   ==========================================================================
   Le bandeau montrait logo + recherche + devis + panier + telephone sur une
   largeur de telephone : tout etait tronque. On ne garde que les trois
   actions utiles. Le logo et le telephone restent accessibles (le logo via
   le retour a l'accueil du menu, le telephone depuis la page contact).
   ========================================================================== */

header{
	display: flex !important;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap !important;
	padding: 10px 10px !important;
	/* place a droite pour le bouton menu (46px, position fixed) + sa marge */
	padding-right: 64px !important;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Masques sur mobile : ils saturaient la barre sans rien apporter. */
header #banner,
header #contact{
	display: none !important;
}

header #search{
	display: flex !important;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto !important;
	min-width: 0;          /* autorise le champ a se retrecir */
	margin: 0 !important;
	justify-content: flex-start !important;
}

header #search form{
	display: flex !important;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto !important;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
	background: var(--blanc, #fff);
	border: 1px solid var(--bord, #d8dee4);
	border-radius: 9px;
	padding: 2px 4px 2px 10px;
	box-sizing: border-box;
}

header #search_input{
	flex: 1 1 auto !important;
	min-width: 0 !important;    /* sans cela le champ deborde de l'ecran */
	width: 100% !important;
	border: 0 !important;
	outline: 0;
	background: transparent;
	font-size: 16px;            /* < 16px : iOS zoome au focus */
	padding: 8px 0;
}

header #searchsubmit{
	flex: 0 0 auto !important;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 8px;
	background: var(--bleu, #004987);
	color: #fff;
	cursor: pointer;
}

#header-actions{
	display: flex !important;
	align-items: stretch;      /* les deux actions ont la meme hauteur */
	gap: 4px;
	flex: 0 0 auto !important;
	margin: 0 !important;
}

/* #panier est un <div> qui enveloppe son lien, alors que "Devis" est un <a>
   direct : il gardait donc ses styles desktop. style.css lui applique
   float:right et surtout margin-top:-85px sous 800px, ce qui le projetait
   au-dessus de la barre. On le neutralise completement : il ne doit etre
   qu'un conteneur transparent. */
header #panier{
	display: flex !important;
	float: none !important;
	position: static !important;
	margin: 0 !important;
	padding: 0 !important;
	top: auto !important;
	right: auto !important;
	width: auto !important;
	height: auto !important;
}

/* Devis et panier : icone surmontant son libelle. Une icone seule n'etait
   pas comprehensible, surtout le panier dont le pictogramme se confondait
   avec le reste de la barre. */
.header-action{
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	/* 44px : cible tactile minimale recommandee (WCAG 2.5.8) */
	min-width: 48px;
	min-height: 44px;
	padding: 3px 4px !important;
	border-radius: 9px;
	color: var(--texte, #23323f);
	text-decoration: none;
	line-height: 1;
}
/* Le libelle sous l'icone. .panier-icone est le conteneur de l'icone du
   panier (icone + pastille), il ne doit pas etre traite comme un texte. */
.header-action span:not(.panier-icone):not(.bubble){
	display: block !important;
	font-size: 10px;
	font-weight: 600;
	white-space: nowrap;
	letter-spacing: .01em;
}
.header-action i{ font-size: 1.05em; }

/* Le lien du panier est cible par "header #panier a" (specificite d'id) :
   sans repeter cette specificite ici, il garderait la disposition
   horizontale et la taille de police du desktop. */
header #panier a.header-action{
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 48px;
	min-height: 44px;
	padding: 3px 4px !important;
	font-size: 1em !important;
	color: var(--texte, #23323f) !important;
	line-height: 1;
}
header #panier a.header-action i{ font-size: 1.05em; }
header #panier a.header-action > span:not(.panier-icone){
	font-size: 10px;
	font-weight: 600;
	white-space: nowrap;
}

/* Pastille du nombre d'articles : reste visible sur l'icone panier.
   Repete avec la specificite d'id pour battre "header #panier .bubble". */
.panier-icone,
header #panier .panier-icone{
	position: relative !important;
	display: inline-flex !important;
	line-height: 1;
}
header #panier .bubble,
.panier-icone .bubble{
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: #c8322b;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	box-sizing: border-box;
}


/* ==========================================================================
   2. MENU — panneau lateral, sections depliables au toucher
   ==========================================================================
   Reecriture complete : le desktop ouvre les panneaux au survol, ce qui
   n'existe pas au doigt. Ici chaque entree ayant des sous-rubriques se
   replie/deplie sur toute la largeur de sa ligne, via la classe
   .sous-ouvert posee par Part/Nav.phtml.
   ========================================================================== */

nav:not(.pagination){ position: static !important; }

/* --- Bouton hamburger, fixe en haut a droite ----------------------------- */
nav>.displayer{
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 10px;
	right: 12px;
	left: auto;
	margin: 0;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 11px;
	background: var(--bleu, #004987);
	color: #fff;
	font-size: 1.1em;
	box-shadow: 0 4px 14px rgba(16,32,48,.24);
	cursor: pointer;
	z-index: 140;
}

/* --- Panneau ------------------------------------------------------------- */
nav>ul#menu{
	display: none !important;      /* ferme par defaut */
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: min(86vw, 360px);
	margin: 0;
	padding: 68px 0 24px !important;
	background: #fff;
	box-shadow: -8px 0 28px rgba(16,32,48,.22);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	z-index: 135;
	/* annule la mise en page horizontale du desktop */
	columns: auto !important;
	column-width: auto !important;
	max-height: none !important;
	min-width: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	list-style: none;
}
nav>ul#menu.open{ display: block !important; }

/* --- Entrees : tous niveaux confondus ------------------------------------ */
/* Le desktop met les <li> de sous-menu en inline-block : le <a> ne faisait
   alors que la largeur de son texte, et seul le texte repondait au toucher.
   Tout repasse en bloc pleine largeur. */
nav>ul#menu li{
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	background: none !important;
	border: 0;
	break-inside: auto !important;
	list-style: none;
}
nav>ul#menu>li{
	border-bottom: 1px solid var(--bord, #e4e9ee);
}

nav>ul#menu li>a{
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100% !important;
	/* 46px : toute la ligne est une cible tactile confortable */
	min-height: 46px;
	padding: 11px 16px !important;
	box-sizing: border-box;
	color: var(--texte, #23323f) !important;
	background: transparent !important;
	font-size: .95em;
	font-weight: 600;
	text-decoration: none;
	white-space: normal !important;
	text-align: left;
}

/* Le trait d'accent du desktop n'a pas de sens ici. */
nav>ul#menu li>a::after,
nav>ul#menu li>a::before{ content: none !important; }

/* --- Etat actif ----------------------------------------------------------
   :hover et :focus-within persistent apres un appui sur tactile : le texte
   passait en blanc sur fond blanc (invisible) et le panneau se rouvrait
   aussitot referme. On neutralise les deux ; seul .sous-ouvert compte. */
nav>ul#menu li:hover>a,
nav>ul#menu li:focus-within>a,
nav>ul#menu li>a:hover,
nav>ul#menu li>a:focus{
	background: var(--bleu-pale, #eaf2fa) !important;
	color: var(--bleu, #004987) !important;
}
nav>ul#menu li.sous-ouvert>a{
	background: var(--bleu-pale, #eaf2fa) !important;
	color: var(--bleu, #004987) !important;
}

/* --- Sous-menus : replies, ouverts par .sous-ouvert seulement ------------- */
nav>ul#menu ul,
nav>ul#menu li:hover>ul,
nav>ul#menu li:focus-within>ul{
	display: none !important;
}
nav>ul#menu li.sous-ouvert>ul{
	display: block !important;
	position: static !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 0 6px 0 !important;
	padding: 0 0 0 14px !important;
	background: #fafcfe !important;
	border: 0 !important;
	border-left: 3px solid var(--bleu-pale, #d6e6f5) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	columns: 1 !important;
	column-width: auto !important;
	overflow: visible !important;
}

/* Hierarchie visuelle par la taille, pas par l'indentation : sur un ecran
   etroit, indenter chaque niveau mange toute la largeur. */
nav>ul#menu ul li>a{
	min-height: 42px;
	padding: 9px 16px !important;
	font-size: .9em;
	font-weight: 500;
	color: var(--texte-doux, #5c6b7a) !important;
}
nav>ul#menu ul ul li>a{ font-size: .86em; }

/* --- Chevron : indication visuelle, la ligne entiere est cliquable -------- */
nav>ul#menu .icon-sub{
	display: none !important;
}
nav>ul#menu li[data-depliable]>a .icon-sub{
	display: inline-block !important;
	flex: 0 0 auto;
	margin-left: auto;
	font-size: .8em;
	opacity: .7;
	transform: none !important;
	transition: transform .18s ease;
}
nav>ul#menu li.sous-ouvert[data-depliable]>a .icon-sub{
	transform: rotate(180deg) !important;
	opacity: 1;
}

/* --- "Voir tout" : acces a la rubrique elle-meme -------------------------
   Le libelle sert a deplier, ce lien reste le seul chemin vers la page. */
nav>ul#menu li.voir-tout>a{
	font-style: italic;
	font-weight: 600;
	color: var(--bleu, #004987) !important;
}


/* ==========================================================================
   3. FIL D'ARIANE
   ==========================================================================
   "Accueil > Sciences > Physique > Mecanique > ..." occupait jusqu'a quatre
   lignes avant le contenu. Masque sur mobile : la navigation se fait par le
   menu et le bouton retour du navigateur. Le balisage reste dans la page
   (donnees structurees BreadcrumbList intactes cote SEO, seul l'affichage
   est supprime).
   ========================================================================== */

article>p:first-of-type:has(>a>.fa-house){
	display: none;
}
/* Repli pour les navigateurs sans :has() : cible le meme paragraphe par sa
   position, uniquement quand il commence par le lien maison. */
article .fil-ariane{ display: none; }


/* ==========================================================================
   4. CONTENU — debordements horizontaux
   ==========================================================================
   Regle generale : rien ne doit forcer un defilement lateral.
   ========================================================================== */

#body, article{
	max-width: 100%;
	overflow-x: hidden;
}

article img,
article video,
article iframe{
	max-width: 100%;
	height: auto;
}

/* Les tableaux (panier, admin, caracteristiques) defilent dans leur propre
   conteneur plutot que d'elargir la page. */
article table{
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Champs de formulaire : jamais plus larges que l'ecran, et 16px minimum
   pour eviter le zoom automatique d'iOS au focus. */
article form input,
article form select,
article form textarea{
	max-width: 100% !important;
	box-sizing: border-box;
	font-size: 16px;
}