/* ==========================================================================
   Barre du haut et bouton « Boutique »

   Refonte du 12/11/2026, sur la maquette de la cliente : une seule barre bleu
   nuit (#16163f, le bleu du menu, blanc dessus à 17:1 de contraste) avec
   l'adresse à gauche, « Savoir-faire français depuis 1927 » au centre, la
   livraison offerte et le blog à droite. Elle remplace deux bandeaux : le
   « Livraison offerte » de septembre et la barre or d'Elementor (adresse, blog,
   Facebook, Instagram), que la première règle ci-dessous masque.

   La barre n'est écrite que par le plugin : sans lui (ou sans WooCommerce), la
   barre or d'Elementor reste en place, rien n'est masqué.
   ========================================================================== */

.gg-barre ~ [data-elementor-type="header"] > .elementor-element-5df06c8 {
	display: none !important;
}

/* Un seul bloc de texte par zone ; la grille range les zones selon la largeur :
   téléphone, deux lignes centrées (le slogan, puis la livraison) ; tablette, le
   slogan au-dessus, l'adresse et la droite en dessous (le blog à partir de 1 000 px) ;
   grand écran (1 366 px), trois zones sur une ligne : à moins, la livraison offerte,
   la plus longue des trois, n'y tient pas. */
.gg-barre {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "marque" "droite";
	gap: 2px 24px;
	padding: 8px 16px;
	background: #16163f;
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}

.gg-barre p {
	margin: 0;
}

.gg-barre a {
	color: #fff;
	text-decoration: none;
}

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

.gg-barre__marque {
	grid-area: marque;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-wrap: balance;
}

.gg-barre__adresse {
	display: none;
	grid-area: adresse;
	align-items: center;
	gap: 8px;
	letter-spacing: 0.02em;
}

.gg-barre__adresse svg {
	flex: none;
	width: 11px;
	height: 14px;
	fill: #d3b574;
}

.gg-barre__droite {
	display: flex;
	flex-wrap: wrap;
	grid-area: droite;
	align-items: center;
	justify-content: center;
	gap: 2px 24px;
	letter-spacing: 0.02em;
	text-wrap: balance;
}

/* L'adresse et le blog sont aussi dans le pied de page : sur un téléphone, la
   barre garde ce qui compte pour acheter. */
.gg-barre__blog {
	display: none;
}

@media (max-width: 380px) {
	.gg-barre__marque {
		letter-spacing: 0.06em;
	}
}

@media (min-width: 800px) {
	.gg-barre {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "marque marque" "adresse droite";
		padding: 8px 24px;
	}

	.gg-barre__adresse {
		display: flex;
		justify-self: start;
	}

	.gg-barre__droite {
		justify-content: flex-end;
		text-align: right;
	}
}

@media (min-width: 1000px) {
	.gg-barre__blog {
		display: inline;
	}
}

@media (min-width: 1366px) {
	.gg-barre {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas: "adresse marque droite";
		align-items: center;
	}
}

/* ==========================================================================
   Le bouton « Boutique » du menu, en pastille bleu nuit

   Il était or, rectangle à angles vifs (feuille du thème enfant et compte.css,
   qui règlent aussi sa taille et ses marges : on n'y touche pas). Seuls le fond
   et la forme changent, dans le menu de la barre ; le menu déroulant du
   téléphone garde son bouton pleine largeur sans arrondi.
   ========================================================================== */

body [data-elementor-type="header"] nav.elementor-nav-menu--main li.boutique-cta > a.elementor-item,
body [data-elementor-type="header"] nav.elementor-nav-menu--main li.boutique-cta > a.elementor-item.elementor-item-active {
	background-color: #16163f;
	border-radius: 99px;
}

body [data-elementor-type="header"] nav.elementor-nav-menu--main li.boutique-cta > a.elementor-item:hover,
body [data-elementor-type="header"] nav.elementor-nav-menu--main li.boutique-cta > a.elementor-item:focus {
	background-color: #2e2e72;
}

body [data-elementor-type="header"] nav.elementor-nav-menu--dropdown li.boutique-cta > a.elementor-item,
body [data-elementor-type="header"] nav.elementor-nav-menu--dropdown li.boutique-cta > a.elementor-item.elementor-item-active {
	background-color: #16163f;
	border-radius: 0;
}

/* Le thème enfant remet l'or au survol et sur la page active du menu déroulant : le dernier sélecteur plus précis l'emporte. */
body [data-elementor-type="header"] nav.elementor-nav-menu--dropdown li.boutique-cta > a.elementor-item:hover,
body [data-elementor-type="header"] nav.elementor-nav-menu--dropdown li.boutique-cta > a.elementor-item:focus,
body [data-elementor-type="header"] nav.elementor-nav-menu--dropdown li.boutique-cta > a.elementor-item.elementor-item-active:hover {
	background-color: #2e2e72;
}