/* ==========================================================================
   SOCMA Élevages : réglages et surcharges propres au site (après socle.css).
   Couleurs du Kit : rouge #EA2328, rouge foncé #AD1518, gris foncé #40403F, gris clair #F1F1F1, fond #F4F4F4.
   ========================================================================== */
:root, body {
	--pb-accent: #EA2328;
	--pb-accent-survol: #AD1518;
	--pb-texte: #000000;
	--pb-gris-fonce: #40403F;
	--pb-gris-clair: #F1F1F1;
	--pb-fond: #F4F4F4;
	--pb-bms: #006BDE;
	--pb-bms-contour: linear-gradient(90deg, #006BDE 7%, #FFFFFF 50%, #EA2328 98%);
	--pb-demi-contenu: 693px;
	--pb-marge-tablette: 40px;
	--pb-ico-chevron-bas: url("/img/cms/socma/commun/chevron-bas-blanc.svg");
}

/* ==========================================================================
   Header (Theme Builder #2) : bandeau du haut, ligne logo / recherche / panier / compte, barre de navigation.
   Au scroll, le bandeau du haut (32 px) sort de l'écran avec la page : le header colle à -32 px, sans changer de
   hauteur. Replier le bandeau en hauteur décalait toute la page d'un coup ; ici il suit la molette dans les deux sens.
   ========================================================================== */
#header {
	background: transparent;
}

#header:has(.pb-header-bandeau) {
	top: -32px;
}

/* Ombre légère sous la barre une fois le contenu passé dessous (le CE anime déjà box-shadow sur ses sections). */
body.pb-defile .pb-header-nav {
	box-shadow: 0 8px 16px -12px rgba(0, 0, 0, .3);
}

.pb-header-principal .pb-header-logo img {
	transition: width .3s ease;
}

.pb-header-coordonnees .elementor-icon-list-item a,
.pb-header-coordonnees .elementor-icon-list-text {
	color: inherit;
}

/* Ligne logo / recherche / panier / compte au-dessus de la barre de navigation : le sous-menu du compte et les
   suggestions de la recherche descendent sur la barre, peinte après elle et dont le menu de CE est en z-index 2. */
.pb-header-principal {
	z-index: 3;
}

/* Barre de navigation : opaque (fond de page), méga menu et menu sur une ligne. */
.pb-header-nav {
	background-color: var(--pb-fond);
}

.pb-header-nav .pb-col-nav > .elementor-column-wrap > .elementor-widget-wrap,
.pb-header-nav .pb-col-nav > .elementor-widget-wrap {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 38px;
}

.pb-header-nav .elementor-widget-logia-nav-menu {
	flex: 1 1 auto;
	min-width: 0;
}

.pb-header-menu .elementor-nav--main,
.pb-header-menu .elementor-nav--main > ul.elementor-nav {
	width: 100%;
}

.pb-header-menu .elementor-nav--main > ul.elementor-nav {
	display: flex;
	align-items: center;
	gap: 38px;
}

/* Clearfix de CE (::after) : en flex, il recevait un écart de 38 px et décalait « Contact » du bord du contenu. */
.pb-header-menu .elementor-nav--main > ul.elementor-nav::after {
	content: none;
}

.pb-header-menu .elementor-nav--main > ul.elementor-nav > li.pb-menu-droite {
	margin-inline-start: auto;
}

/* Pastilles du header : le texte en Amiko sort 1,2 px plus haut que dans la maquette (métriques de la police). Seul le
   texte descend : les chevrons et l'icône du panier sont centrés dans la maquette. */
.pb-header-mega .lmm-bouton-texte,
.pb-header-compte .elementor-nav--main > ul > li > a.elementor-item > span:not(.sub-arrow),
.pb-header-panier .elementor-cart__toggle .elementor-button::after {
	position: relative;
	top: .09em;
}

/* « Solutions BMS » : pastille blanche au contour tricolore (maquette : dégradé horizontal bleu BMS, blanc, rouge). Le contour est le fond de la boîte de bordure, le blanc celui de la boîte de padding. Texte sans icône :
   padding décalé de 1,2 px. Survol : pastille pleine bleu BMS. */
.pb-header-menu .elementor-nav--main > ul.elementor-nav > li.pb-menu-bms > a.elementor-item {
	padding: 9.2px 20px 6.8px !important;
	font-weight: 700;
	border: 1px solid transparent;
	border-radius: 100px;
	background: linear-gradient(#fff, #fff) padding-box, var(--pb-bms-contour) border-box;
}

.pb-header-menu .elementor-nav--main > ul.elementor-nav > li.pb-menu-bms > a.elementor-item:is(:hover, :focus-visible, .highlighted) {
	color: #fff !important;
	background: var(--pb-bms);
}

/* Bouton du méga menu fermé : chevron vers le bas de la maquette (la croix du widget reste à l'ouverture). */
.pb-header-mega .lmm-bouton[aria-expanded="false"] .lmm-icone::before,
.pb-header-mega .lmm-bouton[aria-expanded="false"] .lmm-icone::after,
.pb-header-mega .lmm-bouton[aria-expanded="false"] .lmm-icone > span {
	display: none;
}

.pb-header-mega .lmm-bouton[aria-expanded="false"] .lmm-icone {
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: var(--pb-ico-chevron-bas) center / contain no-repeat;
	mask: var(--pb-ico-chevron-bas) center / contain no-repeat;
}

/* Panier et compte : 17 px d'écart (maquette), 10 px en tablette et mobile. */
.pb-header-principal .pb-col-actions > .elementor-column-wrap > .elementor-widget-wrap,
.pb-header-principal .pb-col-actions > .elementor-widget-wrap {
	column-gap: 17px;
}

@media (max-width: 1024px) {
	.pb-header-principal .pb-col-actions > .elementor-column-wrap > .elementor-widget-wrap,
	.pb-header-principal .pb-col-actions > .elementor-widget-wrap {
		column-gap: 10px;
	}
}

/* Burger et bouton du méga menu : pas d'anneau natif après un clic, anneau accent arrondi au clavier. */
.pb-header-mega .lmm-bouton:focus:not(:focus-visible),
.pb-header-menu .elementor-menu-toggle:focus:not(:focus-visible) {
	outline: none;
}

.pb-header-menu .elementor-menu-toggle:focus-visible {
	outline: 2px solid var(--pb-accent);
	outline-offset: 2px;
	border-radius: 8px;
}

/* Burger (tablette et mobile) : menu sur toute la largeur de l'écran (réglage full_width du widget : CE l'étire et le
   place sous le bouton, par rapport au widget du menu), collé sous la barre (padding bas de la section : 6 px), coins
   bas arrondis, page assombrie dessous (ombre coupée au ras du haut du menu pour ne pas voiler le header). En absolu :
   le panneau de CE resterait sinon dans le flux et agrandirait la barre. Liens alignés sur le contenu du header
   (marges de 40 px en tablette, 20 px en mobile). */
@media (max-width: 1024px) {
	.pb-header .pb-header-menu nav.elementor-nav--dropdown.elementor-nav__container {
		position: absolute;
		z-index: 9995;
		margin-top: 6px !important;
		border-top: 1px solid #E2E2E2;
		border-radius: 0 0 24px 24px;
		box-shadow: 0 24px 48px rgba(0, 0, 0, .2), 0 0 0 100vmax rgba(0, 0, 0, .35);
		clip-path: inset(0 0 -100vmax 0);
	}

	.pb-header .pb-header-menu nav.elementor-nav--dropdown.elementor-nav__container > ul.elementor-nav {
		padding: 16px 20px 24px !important;
	}

	.pb-header-menu nav.elementor-nav--dropdown a:is(.elementor-item, .elementor-sub-item) {
		padding-block: 14px !important;
		font-size: 1.125rem !important;
	}

	.pb-header-menu nav.elementor-nav--dropdown a:focus:not(:focus-visible) {
		outline: none;
	}

	.pb-header-menu nav.elementor-nav--dropdown .sub-arrow {
		transition: transform .2s ease;
	}

	.pb-header-menu nav.elementor-nav--dropdown a.highlighted .sub-arrow {
		transform: rotate(180deg);
	}
}

@media (max-width: 767px) {
	.pb-header .pb-header-menu nav.elementor-nav--dropdown.elementor-nav__container > ul.elementor-nav {
		padding: 12px 8px 20px !important;
	}

	.pb-header-menu nav.elementor-nav--dropdown a:is(.elementor-item, .elementor-sub-item) {
		padding-inline: 12px !important;
	}
}

/* Méga menu en desktop : colonnes alignées sur le contenu du header (titres à 40 px du bord en desktop étroit, 63 px à
   1 512 px comme la maquette). */
@media (min-width: 1025px) {
	.pb-header-mega .lmm-conteneur {
		width: min(87.875rem, calc(100% - 60px));
	}

	/* Trait de séparation sous la barre (maquette : 1,44 px #989898) et logos qui remplissent leur case de 155 × 90. */
	.pb-header-mega .lmm-panneau {
		border-top: 1px solid #989898;
	}

	.pb-header-mega .lmm-marque {
		padding: 0;
	}
}

/* « Mon compte » : pastille de 47 px, contenu centré, chevron de la maquette (13,7 × 7,8, à 10 px du texte) en
   indicateur du sous-menu ; sous-menu aligné sur le bord droit du bouton (le bouton est au bord droit du contenu). */
.pb-header-compte .elementor-nav--main > ul > li > a.elementor-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

@media (min-width: 1025px) {
	.pb-header-compte .elementor-nav--main > ul > li > a.elementor-item {
		min-height: 47px;
	}
}

.pb-header-compte a:focus:not(:focus-visible) {
	outline: none;
}

.pb-header-compte .elementor-nav--main > ul > li > a.elementor-item > .sub-arrow {
	width: 13.7px;
	height: 7.8px;
	margin: 0 !important;
	padding: 0 !important;
	background-color: currentColor;
	-webkit-mask: var(--pb-ico-chevron-bas) center / contain no-repeat;
	mask: var(--pb-ico-chevron-bas) center / contain no-repeat;
	transition: transform .25s ease;
}

.pb-header-compte .elementor-nav--main > ul > li > a.elementor-item > .sub-arrow::before {
	content: none;
}

.pb-header-compte .elementor-nav--main > ul > li > a.elementor-item:is(.highlighted, [aria-expanded="true"]) > .sub-arrow {
	transform: rotate(180deg);
}

.pb-header-compte .elementor-nav--main .sub-menu {
	left: auto !important;
	right: 0;
	min-width: 220px;
	margin-top: 8px !important;
}

/* Panier : libellé « Mon panier » de la maquette (le widget n'affiche que le montant, gardé pour les lecteurs d'écran). */
.pb-header-panier .elementor-cart__toggle .elementor-button-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pb-header-panier .elementor-cart__toggle .elementor-button::after {
	content: "Mon panier";
	font-family: "Amiko", sans-serif;
	font-weight: 700;
	font-size: .875rem;
}

/* Desktop étroit (1025-1280 px) : menu du header sur une ligne, écarts resserrés. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.pb-header-nav .pb-col-nav > .elementor-column-wrap > .elementor-widget-wrap,
	.pb-header-nav .pb-col-nav > .elementor-widget-wrap {
		gap: 16px;
	}
	/* !important : l'écart du réglage du widget (38 px) est plus spécifique. */
	.pb-header-menu .elementor-nav--main > ul.elementor-nav {
		gap: 10px !important;
	}
	.pb-header-menu .elementor-nav--main > ul.elementor-nav > li > a.elementor-item {
		padding-inline: 8px !important;
	}
	.pb-header-menu .elementor-nav--main > ul.elementor-nav > li.pb-menu-bms > a.elementor-item {
		padding-inline: 14px !important;
	}
}

/* Tablette et téléphone : panier et compte en boutons icône seule (jamais masqués), le texte reste lu par les lecteurs
   d'écran (libellé du panier en aria-label, « Mon compte » masqué visuellement). */
@media (max-width: 1024px) {
	.pb-header-panier .elementor-cart__toggle .elementor-button::after {
		content: none;
	}
	.pb-header-compte .elementor-item {
		font-size: 0 !important;
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}
	.pb-header-compte .elementor-item::before {
		content: "\f007";
		font-family: "Font Awesome 6 Free";
		font-weight: 400;
		font-size: 1.125rem;
		margin: 0;
		position: static !important;
		opacity: 1 !important;
	}
	.pb-header-compte .elementor-nav--main > ul > li > a.elementor-item {
		gap: 8px;
	}
}

.pb-header-panier .elementor-cart__toggle .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.pb-header-panier .elementor-cart__toggle .elementor-button-icon {
	order: -1;
}

/* Bandeau du haut en tablette étroite : « Suivez-nous sur les réseaux sociaux » ne tient plus avec les icônes sur une
   ligne, les icônes restent seules (libellés en aria-label). */
@media (max-width: 900px) {
	.pb-header-suivez {
		display: none;
	}
}

/* Tablette et mobile : burger au bord droit de la barre, aligné sur le bouton du compte au-dessus. */
@media (max-width: 1024px) {
	.pb-header-nav .pb-header-menu {
		margin-left: auto;
	}
}

/* Recherche : texte d'aide en 14 px (maquette), la saisie reste à 16 px (sous 16 px, iOS zoome sur le champ). */
.pb-header-recherche input::placeholder {
	font-size: .875rem;
}

/* Recherche en tablette et mobile (widget « topbar », masqué en desktop) : loupe ronde de la hauteur du panier, qui
   ouvre un panneau plein écran, champ et bouton de fermeture en haut, suggestions dessous (seules à défiler). */
.pb-header-recherche-bouton .elementor-search__toggle {
	display: inline-flex;
	width: 46px;
	height: 46px;
	--ce-search-toggle-icon-size: 1.25rem;
	color: var(--pb-texte);
	background: #fff;
	border: 1px solid var(--pb-accent);
	border-radius: 100px;
	transition: transform .25s ease, box-shadow .25s ease, background-color .3s ease, color .3s ease;
}

.pb-header-recherche-bouton .elementor-search__toggle:is(:hover, :focus-visible, [aria-expanded="true"]) {
	color: #fff;
	background: var(--pb-accent);
}

.pb-header-recherche-bouton .elementor-search__toggle:is(:hover, :focus-visible) {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .35);
}

.pb-header-recherche-bouton .elementor-search__toggle:focus:not(:focus-visible) {
	outline: none;
}

.pb-header .pb-header-recherche-bouton .elementor-search__container {
	bottom: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto minmax(0, 1fr);
	align-items: center;
	gap: 16px 12px;
	padding: 16px var(--pb-marge-tablette) 0;
	border: 0;
	box-shadow: none;
	background: #fff;
	visibility: visible;
	transition: transform .3s ease;
}

.pb-header .pb-header-recherche-bouton .elementor-search__container:not(.elementor-search--topbar) {
	visibility: hidden;
	transition: transform .3s ease, visibility 0s .3s;
}

.pb-header-recherche-bouton .elementor-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pb-header-recherche-bouton .elementor-search__input-wrapper {
	flex: none;
	grid-area: 1 / 1;
}

.pb-header .pb-header-recherche-bouton input[type="search"].elementor-search__input {
	height: 48px;
	padding: 0 48px 0 20px;
	font-size: 1rem;
	line-height: normal;
	color: var(--pb-texte);
	background: #fff;
	border: 1px solid var(--pb-accent);
	border-radius: 100px;
}

.pb-header-recherche-bouton .elementor-search__clear {
	padding-inline-end: 18px;
}

.pb-header .pb-header-recherche-bouton .dialog-lightbox-close-button {
	position: static;
	grid-area: 1 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-size: 1.125rem;
	color: #fff;
	background: var(--pb-accent);
	border-radius: 50%;
	opacity: 1;
	cursor: pointer;
	transition: background-color .3s ease;
}

.pb-header .pb-header-recherche-bouton .dialog-lightbox-close-button:is(:hover, :focus-visible) {
	background: var(--pb-accent-survol);
}

.pb-header .pb-header-recherche-bouton .elementor-search__products {
	grid-area: 2 / 1 / 3 / 3;
	align-self: stretch;
	position: static !important;
	width: auto !important;
	max-width: none;
	max-height: none !important;
	margin: 0 calc(-1 * var(--pb-marge-tablette)) !important;
	padding: 0 var(--pb-marge-tablette) 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pb-header-recherche-bouton .elementor-search__product + .elementor-search__product {
	border-top: 1px solid #E2E2E2;
}

.pb-header-recherche-bouton .elementor-search__products .elementor-search__product a.elementor-search__product-link {
	gap: 14px;
	padding: 12px 8px;
	border-radius: 12px;
}

.pb-header-recherche-bouton .elementor-search__products .elementor-search__product a.elementor-search__product-link.ui-state-focus {
	background: var(--pb-gris-clair);
}

.pb-header-recherche-bouton .elementor-search__products .elementor-search__product-image {
	width: 64px;
	height: 64px;
	margin: 0;
	object-fit: contain;
	border-radius: 8px;
}

.pb-header-recherche-bouton .elementor-search__product-name {
	font-family: "Amiko", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: var(--pb-texte);
}
html.pb-recherche-ouverte {
	overflow: hidden;
}

@media (max-width: 767px) {
	.pb-header .pb-header-recherche-bouton .elementor-search__container {
		padding-inline: 20px;
	}
	.pb-header .pb-header-recherche-bouton .elementor-search__products {
		margin-inline: -20px !important;
		padding-inline: 12px;
	}
}

/* Pastille du compteur : 18 px, contour blanc 1,7 px, en haut à droite de l'icône de 31 px (maquette). */
.pb-header-panier .elementor-cart__toggle .elementor-button-icon[data-counter]::before {
	top: -6px;
	right: -8px;
	min-width: 18px;
	height: 18px;
	padding: 0 3px;
	box-sizing: border-box;
	border: 1.7px solid #fff;
	border-radius: 9px;
	font-family: "Amiko", sans-serif;
	font-size: .75rem;
	font-weight: 700;
	line-height: 14.6px;
}

.pb-header-menu .elementor-menu-toggle {
	background: transparent;
}


/* ==========================================================================
   Footer (Theme Builder #5)
   ========================================================================== */
.pb-footer-legal .elementor-icon-list-item::after {
	display: none !important;
}

.pb-footer-legal .elementor-icon-list-item:not(:last-child) > a::after {
	content: "\00a0-\00a0";
	color: #fff;
}

/* Page courante dans les menus du footer : rouge éclairci (#EA2328 sur le gris du footer : 2,4:1 ; #FF8A8E : 4,6:1). */
#footer .pb-footer-menu :is(.current-menu-item, .current-menu-ancestor) > a {
	color: #FF8A8E !important;
}

/* Décor du footer (image en absolu dans la colonne) derrière les textes : en tablette et mobile il passait sur la ligne
   légale et teintait les liens. */
#footer .elementor-section .elementor-section {
	position: relative;
	z-index: 1;
}

#footer .elementor-text-editor p:last-child {
	margin-bottom: 0;
}

.pb-footer-elevages {
	margin-top: -14px;
	padding-inline-start: 9px;
}

.pb-footer-copyright {
	margin-inline-start: 6px;
}

/* Consentement de la newsletter : 9 px dans la maquette, porté au minimum lisible. */
#footer .elementor-widget-email-subscription label,
#footer .elementor-widget-email-subscription label :not(input),
#footer .elementor-widget-email-subscription .elementor-field-option label {
	font-size: .875rem !important;
	line-height: 1.4;
}

/* Bouton « S’inscrire » : 0,875rem à toutes les largeurs (le widget le réduisait à 12,8 px en mobile). */
#footer .elementor-widget-email-subscription :is(button, .elementor-button) {
	font-family: "Oxanium", sans-serif;
	font-size: .875rem !important;
	transition: background-color .3s ease, color .3s ease, transform .25s ease, box-shadow .25s ease;
}

/* Survol de « S’inscrire » : inversion des couleurs et soulèvement, comme les autres boutons (choix du client). */
#footer .elementor-widget-email-subscription :is(button, .elementor-button):is(:hover, :focus-visible) {
	color: var(--pb-accent) !important;
	background-color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .35);
}

/* Consentement sur une ligne quand la colonne le permet (sinon « moment » restait seul sur la 2e ligne). */
@media (min-width: 1281px) {
	#footer .elementor-widget-email-subscription .elementor-field-option {
		white-space: nowrap;
	}
}

/* ==========================================================================
   Repris du CSS personnalisé du Kit (sauvegarde : ~/build/sauvegardes/kit-custom-css-*.css), sans les doublons ni
   « html, body { overflow-x: hidden } » (body défilait à la place de la fenêtre : header collant cassé, menu burger
   coupé sous Safari iOS ; la racine seule suffit, voir socle.css).
   ========================================================================== */
/* Mots en valeur des titres (maquette : rouge). */
h1 span:not([class]),
h2 span:not([class]),
h3 span:not([class]),
h4 span:not([class]),
h5 span:not([class]),
h6 span:not([class]) {
	color: var(--pb-accent);
}

.carousel-fade {
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* Puces des avantages du BMS. */
.avantages-badges .elementor-icon-list-items {
	display: flex !important;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: flex-start;
	padding: 0 !important;
	margin: 0 !important;
}

.avantages-badges .elementor-icon-list-item {
	display: inline-flex !important;
	align-items: center;
	width: fit-content !important;
	margin: 0 !important;
	padding: 10px 18px !important;
	border-radius: 10px;
	background: #F6F6F6;
}

.avantages-badges .elementor-icon-list-item a {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 0 !important;
	margin: 0 !important;
}

.avantages-badges .elementor-icon-list-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center;
	padding: 5px !important;
	margin: 0 !important;
}

.avantages-badges .elementor-icon-list-icon :is(svg, img) {
	width: 22px !important;
	height: auto !important;
	margin: 0 !important;
}

.avantages-badges .elementor-icon-list-text {
	padding: 0 !important;
	margin: 0 !important;
	font-family: "Amiko", sans-serif;
	font-weight: 700;
	font-size: 1rem !important;
	line-height: 1.2 !important;
	color: #000;
}

.block_newsletter input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--pb-accent);
	outline-offset: 2px;
}

/* Cartes de réassurance de même hauteur quand un texte passe sur 2 lignes (desktop étroit) : la carte suit sa colonne. */
.pb-reassurance .elementor-column-wrap > .elementor-widget-wrap,
.pb-reassurance .elementor-widget-icon-box,
.pb-reassurance .elementor-widget-icon-box > .elementor-widget-container {
	height: 100%;
}

/* Dates des contenus logia_blog : #6F6F6F partout (contraste 5:1 ; la maquette #808080, l'existant #999 à 2,8:1). */
.logia-blog-meta__date {
	color: #6F6F6F !important;
}

/* ==========================================================================
   Accueil
   ========================================================================== */
/* Vignettes des « Articles récents » : rayon de 10 px (maquette 9,9). */
.pb-actus-recents .logia-blog-featured-image img {
	border-radius: 10px;
}

/* Encart « Plusieurs coloris disponibles » (widget HTML de l'existant) : Oxanium Bold 14 px à toutes les largeurs
   (maquette) ; son CSS le réduisait à 11,2 px en mobile. */
body .coloris-bar .coloris-label {
	font-family: "Oxanium", sans-serif;
	font-size: .875rem;
}

/* Actualités : carte à la une et panneau « Articles récents » de 455 px tous les deux (la carte suit la rangée). */
@media (min-width: 1025px) {
	.pb-actus-recents {
		min-height: 455px;
	}
}

/* ==========================================================================
   Composants communs (spec 01, partie A)
   ========================================================================== */
/* Surtitre : Oxanium Bold, majuscules, 1re lettre rouge (blanc sur fond sombre, 1re lettre toujours rouge). */
.pb-surtitre .elementor-heading-title {
	font-family: "Oxanium", sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.2;
	text-transform: uppercase;
	color: #000;
}

.pb-surtitre .elementor-heading-title::first-letter {
	color: var(--pb-accent);
}

.pb-surtitre--clair .elementor-heading-title {
	color: #fff;
}

/* Boutons : pilule, inversion des couleurs au survol (choix du client) + soulèvement (pb-hover-leve, socle). */
.pb-bouton .elementor-button {
	border: 1px solid var(--pb-accent);
	border-radius: 300px;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .25s ease, box-shadow .25s ease;
}

.pb-bouton .elementor-button .elementor-button-icon :is(svg, img) {
	width: 22px;
	height: 22px;
}

/* Boutons du contenu en Oxanium Bold 14 (famille « Bouton » de la maquette, la plus courante ; le Kit : Amiko, gardé
   pour les boutons du header). */
.pb-bouton .elementor-button {
	font-family: "Oxanium", sans-serif;
}

/* Tous les boutons à 48 px de haut (maquette), avec ou sans flèche, quelle que soit la taille de texte du widget repris ;
   le disque de 22 px est centré sur le texte. Un libellé sur 2 lignes (mobile) agrandit le bouton. !important : le
   theme.css retouché de classic impose 54 px aux boutons secondaires. */
.pb-bouton .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px !important;
	padding-block: 6px !important;
	box-sizing: border-box;
}

.pb-bouton .elementor-button-content-wrapper {
	align-items: center;
}

/* « Lire l'article » de la carte à la une (miniature #7, widget de logia_blog) : même hauteur que les boutons. */
.elementor-widget-logia_blog_read_more.btn-icon .logia-blog-read-more {
	display: inline-flex;
	align-items: center;
	min-height: 48px !important;
	padding-block: 6px !important;
	box-sizing: border-box;
}

.elementor-widget-logia_blog_read_more.btn-icon .logia-blog-read-more :is(svg, img, i) {
	display: block;
}

.pb-bouton .elementor-button .elementor-button-icon {
	display: flex;
	line-height: 0;
}

.pb-bouton--plein .elementor-button {
	--ce-btn-bg-color: var(--pb-accent);
	background-color: var(--pb-accent);
	color: #fff;
}

.pb-bouton--plein .elementor-button:is(:hover, :focus-visible) {
	--ce-btn-bg-color: #fff;
	background-color: #fff;
	color: var(--pb-accent) !important;
}

.pb-bouton--gris .elementor-button {
	--ce-btn-bg-color: var(--pb-gris-fonce);
	background-color: var(--pb-gris-fonce);
	border-color: var(--pb-gris-fonce);
	color: #fff;
}

.pb-bouton--gris .elementor-button:is(:hover, :focus-visible) {
	--ce-btn-bg-color: #fff;
	background-color: #fff;
	color: var(--pb-gris-fonce) !important;
}

/* Rangée de boutons centrés (sous les produits phares). */
.pb-rangee-boutons > .elementor-column-wrap > .elementor-widget-wrap,
.pb-rangee-boutons > .elementor-widget-wrap {
	justify-content: center;
}

/* Bandeau de logos des marques : défilement continu (socle : pb-logos), fond #F6F6F6 de la maquette. */
.pb-bandeau-marques {
	background-color: #F6F6F6;
}

/* Logos de 241,6 × 140 px (6 visibles à 1512 px, maquette) : le défilement continu prend la largeur des diapositives en
   CSS, sinon chaque logo garde sa taille d'image (316 × 183). */
.pb-logos .swiper-slide {
	width: 241.6px !important;
}

.pb-logos .swiper-slide img {
	width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	.pb-logos .swiper-slide {
		width: 190px !important;
	}
}

@media (max-width: 767px) {
	.pb-logos .swiper-slide {
		width: 140px !important;
	}
}

/* ==========================================================================
   Thème classic retouché à la main avant l'intégration (theme.css, bloc « Global » en fin de fichier ; head.tpl charge
   header-height.js) : ce CSS serait perdu à la mise à jour du thème. Repris ici ; la remontée de la page sous le header
   (#header { margin-bottom: -var(--header-height) }) est annulée : le header ne passe plus sur le contenu.
   ========================================================================== */
#header {
	margin-bottom: 0 !important;
}

.bg-decor {
	z-index: -1 !important;
}

.bg-decor.bg-decor-carousel {
	z-index: 2 !important;
	pointer-events: none !important;
}

.btn-icon svg {
	width: 24px !important;
	height: 24px !important;
}

.btn-icon span.elementor-button-content-wrapper {
	align-items: center !important;
}

.add-to-cart-btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px !important;
	height: 40px !important;
}

.add-to-cart-btn a i {
	font-size: 1.25rem;
}

/* Carte d'avis (miniature #9) : fond blanc, étoiles rouges, qualité de l'auteur en gris. */
.pb-carte-avis {
	background-color: #fff;
}

.pb-avis-etoiles,
.pb-avis-etoiles * {
	color: var(--pb-accent) !important;
}

.pb-avis-etoiles svg {
	fill: currentColor;
}

/* ==========================================================================
   Pages CMS construites en Creative Elements : ni titre ni marges du thème classic (le bandeau titre de la page les porte).
   Les pages en texte simple (mentions légales…) gardent la mise en page du thème.
   ========================================================================== */
#main:has(.page-content .elementor-section) > .page-header {
	display: none;
}

#main:has(.page-content .elementor-section) .page-content {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* Pied de page vide du thème (25 px de marge) : l'écart avant le footer reste celui du rythme (104 px). */
#main .page-footer:not(:has(*)) {
	display: none;
}

/* Bandeau titre des pages intérieures : aplat rgba(37,37,37,.65) (réglage CE) sous le dégradé de la maquette, sombre à
   gauche derrière le titre. */
.pb-hero-interieur > .elementor-background-overlay {
	background-image: linear-gradient(94.03deg, rgb(37, 37, 37) .56%, rgba(41, 41, 41, .772) 23.3%, rgba(45, 45, 45, .5) 38.27%, rgba(54, 54, 54, 0) 54.19%);
}

/* Photo retournée en miroir quand la maquette le demande (contenu et voile remis à l'endroit). */
.pb-hero-miroir {
	transform: scaleX(-1);
}

.pb-hero-miroir > .elementor-container,
.pb-hero-miroir > .elementor-background-overlay {
	transform: scaleX(-1);
}

/* ==========================================================================
   Accordéon FAQ (widget logia_blog_accordion) : un seul style sur tout le site (spec 02 § 8, uniformisé).
   Item : bordure 1 px gris foncé, rayon 10 px, fond #F4F4F4 fermé, blanc ouvert ; question Amiko Bold 1rem.
   ========================================================================== */
.pb-faq .logia-blog-accordion__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pb-faq .logia-blog-accordion__item {
	border: 1px solid var(--pb-gris-fonce);
	border-radius: 10px;
	background-color: var(--pb-fond);
	overflow: hidden;
	transition: background-color .25s ease;
}

.pb-faq .logia-blog-accordion__item:has(.logia-blog-accordion__button[aria-expanded="true"]) {
	background-color: #fff;
}

.pb-faq .logia-blog-accordion__heading {
	margin: 0;
}

.pb-faq .logia-blog-accordion__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	min-height: 69px;
	padding: 18px 28px;
	border: 0;
	background: transparent;
	color: #000;
	font-family: "Amiko", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.pb-faq .logia-blog-accordion__button:is(:hover, :focus-visible) {
	color: var(--pb-accent);
}

.pb-faq .logia-blog-accordion__icon svg {
	width: 20px;
	height: auto;
}

/* Réponse alignée sur la question (28 px) ; __panel est le panneau d'onglet qui contient toute la liste : sans retrait. */
.pb-faq .logia-blog-accordion__panel {
	padding: 0;
}

.pb-faq .logia-blog-accordion__answer {
	padding-inline: 0 !important;
	font-size: 1rem !important;
	line-height: 1.3;
}

/* Focus clavier : anneau accent comme les autres composants (le natif, carré, mordait sur la réponse). */
.pb-faq .logia-blog-accordion__button:focus-visible,
.logia-blog-accordion__tab:focus-visible {
	outline: 2px solid var(--pb-accent);
	outline-offset: -4px;
	border-radius: 10px;
}

.pb-faq .logia-blog-accordion__content {
	padding: 0 28px;
	font-family: "Amiko", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

.pb-faq .logia-blog-accordion__item {
	padding: 0 !important;
	margin: 0 !important;
}

.pb-faq .logia-blog-accordion__icon svg {
	fill: none !important;
}

.pb-faq .logia-blog-accordion__item:has(.logia-blog-accordion__button[aria-expanded="true"]) .logia-blog-accordion__content {
	padding-bottom: 24px;
}

/* Fondu des carrousels qui vont au bord de l'écran : largeur = marge de la maquette (la première carte n'est pas estompée
   à 1512 px), au lieu des 120 px minimum du socle. */
@media (min-width: 1025px) {
	.pb-carrousel-fondu .swiper {
		--pb-fondu-largeur: max(40px, calc(50vw - var(--pb-demi-contenu, 693px)));
	}
}

/* Rangée de boutons côte à côte : 20 px entre deux boutons (maquette), passage à la ligne sur petit écran. */
.pb-rangee-boutons > .elementor-column-wrap > .elementor-widget-wrap,
.pb-rangee-boutons > .elementor-widget-wrap {
	flex-wrap: wrap;
	column-gap: 20px;
}

/* Pages rendues dans la mise en page de classic (blog, gabarits) : son #wrapper #F6F6F6 recouvrait les décors en
   z-index -1 et décalait le fond de page (#F4F4F4, maquette). */
#wrapper {
	background: transparent;
}

/* Hero collé au header sur ces gabarits aussi (404, contact) : même écart sous les boutons de la barre qu'au scroll. */
#wrapper:has(.pb-hero) {
	padding-top: 0;
}

/* Texte courant : interligne « normal » d'Amiko de la maquette (≈ 1,3 ; le Kit : 1,2), sauf réglage propre au widget. */
body.ce-kit-1 .elementor-widget-text-editor {
	line-height: 1.3;
}

/* Interlignes du Kit (H1 55/65, H2 50/55) : Creative Elements les écrase par `.elementor .elementor-heading-title
   { line-height: 1 }`, plus spécifique que `.ce-kit-1 h2`. Un réglage propre au widget reste prioritaire. */
body.ce-kit-1 h1.elementor-heading-title {
	line-height: 1.18em;
}

body.ce-kit-1 h2.elementor-heading-title {
	line-height: 1.1em;
}

/* Titres de section (H2 du Kit, 50 px) : tailles tablette et mobile (le Kit de CE n'en a pas). */
@media (max-width: 1024px) {
	body.ce-kit-1 h2 {
		font-size: 2.5rem;
	}
}

@media (max-width: 767px) {
	body.ce-kit-1 h2 {
		font-size: 2rem;
	}
}