/*
Theme Name: Nacre Boutique
Theme URI: https://www.nacre-informatique.net/
Description: Theme enfant de Storefront pour les boutiques Nautile <-> WooCommerce. Ne porte que la mise en page commune aux clients : barre superieure, panier dans la ligne du logo, menu de categories compact et credit de pied de page. Les couleurs, le logo et le slogan restent dans le personnalisateur de chaque boutique, pour qu'un client se distingue sans toucher au code.
Author: Nacre Informatique
Template: storefront
Version: 1.9.0
Text Domain: nacre-boutique
*/

/* ------------------------------------------------------------------------------
   Menu de categories : le faire tenir sur une ligne.

   Storefront affiche le menu en 1em avec de larges marges : les dix familles de
   Nautile debordaient sur TROIS lignes (mesure du 22/09/2026). On resserre la
   police et les espacements, et on laisse le menu prendre toute la largeur, le
   panier ayant ete deplace dans la ligne du logo par functions.php.

   Les libelles restent lisibles : 0.8125em = 13 px, la taille qu'emploie la
   boutique SD Hygiene pour le meme nombre d'entrees.
   ------------------------------------------------------------------------------ */
.storefront-primary-navigation .main-navigation ul.menu > li > a,
.storefront-primary-navigation .main-navigation ul.nav-menu > li > a {
	font-size: 0.75em;
	padding-left: 0.45em;
	padding-right: 0.45em;
	letter-spacing: 0;
}

/* La police suit la largeur disponible, par paliers.

   Les dix familles mesurent 1276 px a 12 px : a 1920 de large il restait 250 px
   inutilises, pour un menu a la limite du lisible. On remonte donc la taille des que
   la place existe, sans jamais risquer le retour a deux lignes.

   Les paliers suivent ceux de `.col-full`, et non des valeurs rondes : a 1400 de large
   le conteneur plafonne encore a 1320, soit 1288 px utiles, alors que 13 px demandent
   1421 px — essaye le 22/09/2026, le menu repassait a deux lignes. Largeurs utiles
   reelles : 1288 sous 1440, 1528 de 1440 a 1800, 1688 au-dela. Besoins mesures :
   1276 px a 12 px, 1382 a 13 px, 1489 a 14 px. */
@media (min-width: 1440px) {
	.storefront-primary-navigation .main-navigation ul.menu > li > a,
	.storefront-primary-navigation .main-navigation ul.nav-menu > li > a {
		font-size: 0.8125em;
		padding-left: 0.6em;
		padding-right: 0.6em;
	}
}

@media (min-width: 1800px) {
	.storefront-primary-navigation .main-navigation ul.menu > li > a,
	.storefront-primary-navigation .main-navigation ul.nav-menu > li > a {
		font-size: 0.875em;
		padding-left: 0.75em;
		padding-right: 0.75em;
	}
}

/* Menu centre, comme sur la boutique SD Hygiene : aligne a gauche, il laissait un vide
   de plusieurs centaines de pixels a droite sur grand ecran. */
.storefront-primary-navigation .main-navigation ul.menu,
.storefront-primary-navigation .main-navigation ul.nav-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* Le bandeau se distingue du contenu : un filet, et de l'air au-dessus et en dessous. */
.storefront-primary-navigation {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.storefront-primary-navigation .main-navigation ul.menu > li > a,
.storefront-primary-navigation .main-navigation ul.nav-menu > li > a {
	padding-top: 0.9em;
	padding-bottom: 0.9em;
}

/* Survol : l'entree visee doit se voir sans deviner. */
.storefront-primary-navigation .main-navigation ul.menu > li:hover > a,
.storefront-primary-navigation .main-navigation ul.menu > li:focus-within > a {
	background-color: rgba(0, 0, 0, 0.04);
}

/* Sous-menus : assez larges pour ne pas couper les libelles en deux lignes, et detaches
   du fond par une ombre. 17em (272 px) laissaient encore « Boites & barquettes
   alimentaires » et « Pots salade, soupes & sauces » sur deux lignes ; 19,5em suffisent
   aux libelles les plus longs des trois clients. */
.storefront-primary-navigation .main-navigation ul.menu ul.sub-menu {
	min-width: 19.5em;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	border-top: 2px solid rgba(0, 0, 0, 0.06);
}

.storefront-primary-navigation .main-navigation ul.menu ul.sub-menu li a {
	/* Storefront FIXE ces liens a `width: 200px`. Elargir le sous-menu ne servait donc
	   a rien : la boite grandissait, le texte continuait de se couper a 200 px moins le
	   padding. Mesure du 29/09/2026 : sous-menu 312 px, lien 200 px. */
	width: auto;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	line-height: 1.3;
}

.storefront-primary-navigation .main-navigation ul.menu ul.sub-menu li:hover > a {
	background-color: rgba(0, 0, 0, 0.05);
}

/* Rendre au menu toute la largeur du bandeau.

   Storefront reserve dans ce bandeau la place du panier, qu'il y affiche en priorite 60.
   functions.php l'ayant remonte dans la ligne du logo, cet espace restait perdu : le
   `ul.menu` etait borne a 989 px pour 1400 disponibles, et les dix familles — 1276 px
   au total, mesure faite — passaient a deux lignes pour rien. */
.woocommerce-active .storefront-primary-navigation .main-navigation,
.woocommerce-active .storefront-primary-navigation .primary-navigation {
	width: 100%;
	float: none;
}

/* Et rendre au bandeau la largeur mangee par son padding : 42 px de chaque cote sur un
   conteneur de 1320 ne laissaient que 1232 px utiles, pour 1276 px d'entrees. */
@media (min-width: 992px) {
	.storefront-primary-navigation > .col-full {
		padding-left: 1em;
		padding-right: 1em;
	}
}

/* L'icone du panier touchait le texte « 0 article » : elle est posee en ::after dans le
   flux, sans marge. */
#masthead .site-header-cart .cart-contents::after {
	margin-left: 0.5em;
}

/* Les sous-menus gardent une taille confortable : ils s'ouvrent un par un. */
.storefront-primary-navigation .main-navigation ul.menu ul li a,
.storefront-primary-navigation .main-navigation ul.nav-menu ul li a {
	font-size: 0.875em;
}

/* La fleche de sous-menu collait au libelle suivant. */
.main-navigation ul.menu > li.menu-item-has-children > a::after,
.main-navigation ul.nav-menu > li.menu-item-has-children > a::after {
	margin-left: 0.25em;
}

/* Un peu plus de largeur utile : dix familles d'hygiene professionnelle portent
   des libelles longs (« Emballages & Vente a emporter »). */
@media (min-width: 1200px) {
	.col-full {
		max-width: 1320px;
	}
}

@media (min-width: 1440px) {
	.col-full {
		max-width: 1560px;
	}
}

@media (min-width: 1800px) {
	.col-full {
		max-width: 1720px;
	}
}

/* ------------------------------------------------------------------------------
   Logo, recherche et panier sur UNE ligne.

   functions.php sort le panier du bandeau du menu ; restait a l'aligner. Storefront
   empile les trois blocs de l'en-tete (`site-branding`, `site-search`,
   `site-header-cart`) dans un meme `col-full`, chacun en pleine largeur : le panier
   se retrouvait seul sur sa ligne. On passe le conteneur en flex — les enfants d'un
   conteneur flex ignorent leur `float`, ce qui suffit a defaire l'empilement de
   Storefront sans avoir a annuler ses regles une par une.

   Sous 768 px on ne touche a rien : l'en-tete empile est ce qu'on veut sur mobile.
   ------------------------------------------------------------------------------ */
@media (min-width: 768px) {
	/* `#masthead` et non `.site-header` : Storefront fixe la largeur de la recherche
	   et du panier a 20,43 % par des regles a specificite de classe plus forte que la
	   notre (mesure : 286 px chacun dans une fenetre de 1400). Un identifiant tranche
	   sans recourir a !important. */
	#masthead > .col-full {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	/* `auto` a droite pousse recherche et panier au bord oppose du logo. */
	#masthead .site-branding {
		margin-right: auto;
		margin-bottom: 0;
		width: auto;
		max-width: 30%;
		float: none;
	}

	/* Le logo de Loca Net Service est un PNG de 854 px de large : affiche a sa taille
	   naturelle, il mangeait 973 px des 1400 disponibles et faisait passer le panier a
	   la ligne. On le borne en hauteur, la largeur suit. */
	#masthead .custom-logo {
		max-height: 5.5em;
		width: auto;
		height: auto;
	}

	#masthead .site-search {
		width: auto;
		min-width: 16em;
		margin-bottom: 0;
		float: none;
		clear: none;
	}

	#masthead .site-header-cart {
		width: auto;
		float: none;
		margin: 0 0 0 1.5em;
	}
}

.site-header .site-header-cart .cart-contents {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

/* ------------------------------------------------------------------------------
   Barre superieure (voir barre-superieure.php).

   Fond sombre et texte clair, comme sur SD Hygiene : elle doit se lire comme un
   bandeau de service, pas comme une partie du menu. Les couleurs restent volontairement
   neutres — un client qui veut les siennes les pose dans son style additionnel, sans
   toucher au theme partage.
   ------------------------------------------------------------------------------ */
.nacre-barre-superieure {
	background-color: #3d4550;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8125em;
	line-height: 1.4;
}

.nacre-barre-superieure > .col-full {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em 1em;
	padding-top: 0.55em;
	padding-bottom: 0.55em;
}

.nacre-barre-superieure a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
}

.nacre-barre-superieure a:hover,
.nacre-barre-superieure a:focus {
	color: #fff;
	text-decoration: underline;
}

.nacre-barre-gauche {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	/* `margin-right: auto` plutot que de compter sur le `space-between` du parent :
	   mesure du 29/09/2026, avec un seul enfant le bloc se retrouvait centre malgre
	   space-between et des marges nulles. Une marge auto explicite ne depend d'aucune
	   hypothese sur le reste. */
	margin-right: auto;
}

.nacre-barre-droite {
	margin-left: auto;
}

.nacre-barre-sep {
	opacity: 0.45;
	padding: 0 0.15em;
}

.nacre-barre-reseau {
	display: inline-flex;
	align-items: center;
	padding: 0 0.2em;
}

.nacre-barre-icone {
	display: block;
}

/* Sur mobile, la barre s'empile : mieux vaut centrer que laisser un bloc a gauche et
   un lien esseule a droite. */
@media (max-width: 767px) {
	.nacre-barre-superieure > .col-full {
		justify-content: center;
		text-align: center;
	}
}