/* ==========================================================================
   Socle de l'agence (skill integration-figma-elementor), portage PrestaShop + Creative Elements : CSS des conventions
   par défaut. Module logia_socle, chargé après le CSS de Creative Elements et avant views/css/projet.css.
   Ne contient que ce qui vaut pour tous les sites ; les couleurs passent par les variables ci-dessous, à régler dans
   projet.css (le Kit de Creative Elements ne publie pas ses couleurs en variables CSS).
   NE PAS MODIFIER CE FICHIER dans un projet (une mise à jour du socle l'écrase) : surcharger dans projet.css,
   par exemple :root, body { --pb-accent: #EA2328; --pb-form-etiquette-gauche: 12px; }.
   Balisage de Creative Elements : sections > .elementor-container > .elementor-row > colonnes ; menus : nav.elementor-nav--main
   > ul.elementor-nav, burger : nav.elementor-nav--dropdown ; sous-menus : ul.sub-menu.
   ========================================================================== */

:root, body {
	/* Couleur d'accent (boutons, page courante du menu, focus, marque des champs requis) et son survol. */
	--pb-accent: var(--e-global-color-primary, #00256F);
	--pb-accent-survol: var(--e-global-color-accent, #001D59);
	--pb-texte: var(--e-global-color-text, #1A1A1A);
	/* Fond de survol des pastilles de sous-menu et du burger, et fond des liens du chemin de la page courante. */
	--pb-pastille-survol: color-mix(in srgb, var(--pb-accent) 10%, transparent);
	--pb-pastille-active: var(--pb-pastille-survol);
	/* Écart entre un sous-menu et le sous-menu qu'il ouvre (socle.js le donne à SmartMenus). */
	--pb-sous-menu-ecart: 8px;
	/* Bas du header fixe (barre d'admin comprise), recalculé par socle.js ; micro-marge sous le menu. */
	--nav-height: 104px;
	--nav-gap: 12px;
	/* Bas du menu du burger : 90 % de la hauteur de l'écran au plus, jamais collé au bord. */
	--pb-burger-max: 90vh;
}

@supports (height: 100dvh) {
	:root {
		--pb-burger-max: 90dvh;
	}
}

/* Aucun débordement horizontal (décors, carrousels qui débordent) : sur la racine seulement (Safari iOS).
   Jamais d'overflow-x sur body, les sections ou le header (menu burger coupé, sticky cassé). */
html {
	overflow-x: hidden;
	scroll-padding-top: calc(var(--nav-height) + var(--nav-gap));
}

/* En mobile (Chrome Android), html { overflow-x: hidden } n'empêche pas la fenêtre de mise en page de s'élargir à la
   largeur des carrousels qui débordent : le site se dézoome et défile de côté. Coupe au plus près, sur le contenu et le
   pied de page (pas sur le header : sous-menus, méga menu, burger). clip, et non hidden : pas de zone défilante, le
   header collant et les éléments sticky restent intacts. */
body > main > :not(#header),
#wrapper {
	overflow-x: clip;
}

/* ==========================================================================
   Header (classe pb-header sur la section, id navBar pour le snippet « Scroll NavBar »)
   ========================================================================== */
.pb-header,
.pb-header .elementor-container,
.pb-header .elementor-row,
.pb-header .elementor-column-wrap,
.pb-header .elementor-widget-wrap,
#header {
	overflow: visible !important;
}

/* Le header fixe laisse passer les clics vers la page : seuls ses éléments interactifs les captent (liens, boutons,
   champs de formulaire et listes de suggestions : sans eux, la recherche du header ne reçoit jamais le clic ; panneaux
   role="dialog" comme la recherche plein écran).
   Une surface opaque (capsule au scroll, barre du téléphone) garde ses clics. */
.pb-header {
	pointer-events: none;
}

.pb-header a,
.pb-header button,
.pb-header input,
.pb-header select,
.pb-header textarea,
.pb-header label,
.pb-header [role="listbox"],
.pb-header .elementor-search__products,
.pb-header [role="button"],
.pb-header [role="dialog"],
.pb-header .elementor-menu-toggle,
.pb-header .sub-menu,
.pb-header nav.elementor-nav--dropdown,
.pb-header .pb-lang,
.pb-header .pb-lang *,
.pb-header.scrollHeader > .elementor-container {
	pointer-events: auto;
}

.elementor-editor-active .pb-header {
	pointer-events: auto;
}

/* Page courante toujours repérable, avec tout son chemin : un parent « # » n'a jamais la classe elementor-item-active.
   Un lien d'ancre vers la page affichée (« Particuliers » → /#particuliers sur l'accueil) n'est pas une page courante :
   seul compte un parent qui contient la vraie page courante (:has). */
.pb-header .elementor-nav--main > ul.elementor-nav > li:has(.current-menu-item > a:not(.elementor-item-anchor)) > a.elementor-item {
	color: var(--pb-accent) !important;
}

/* Menu du burger : il défile s'il dépasse, et s'arrête à --pb-burger-max (90 % de l'écran), jamais collé au bord :
   max-height = 90dvh - haut du menu (bas du header + écart sous le header). socle.js mesure ce haut à l'ouverture et quand
   le header change de taille (--pb-burger-haut) : l'écart cumule souvent un top du thème et l'« écart » du widget
   (dropdown_top_distance, en !important), qu'une formule en dur oublierait. */
.pb-header .elementor-menu-toggle.elementor-active + nav.elementor-nav__container {
	max-height: calc(var(--pb-burger-max) - var(--pb-burger-haut, calc(var(--nav-height) + var(--nav-gap))));
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ==========================================================================
   Sous-menu et menu burger : chaque lien est une pastille, en retrait de 8 px des bords du panneau, 2 px entre
   deux liens. Rayon de la pastille = rayon du panneau moins le retrait (8 px dans le sous-menu de 16 px, 16 px
   dans la carte du burger de 24 px). SmartMenus affiche le sous-menu par un display en ligne : l'espace passe
   par une marge (li + li), pas par gap. Rendu de référence : exemples/sous-menu-pastilles.jpg.
   ========================================================================== */
.pb-header .elementor-nav--main .sub-menu {
	padding: 8px !important;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .14);
}

.pb-header nav.elementor-nav--dropdown.elementor-nav__container {
	border-radius: 24px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, .2);
	overflow: hidden;
}

.pb-header nav.elementor-nav--dropdown.elementor-nav__container > ul.elementor-nav {
	padding: 8px !important;
	background: #fff;
}

.pb-header .elementor-nav--main .sub-menu li + li,
.pb-header nav.elementor-nav--dropdown.elementor-nav__container > ul.elementor-nav > li + li,
.pb-header nav.elementor-nav--dropdown.elementor-nav__container .sub-menu li + li {
	margin-top: 2px;
}

/* Elementor indente les liens de sous-menu par une bordure gauche transparente de 8 px : texte et pastille décalés. */
.pb-header .elementor-nav--main .sub-menu a.elementor-sub-item,
.pb-header nav.elementor-nav--dropdown.elementor-nav__container a.elementor-sub-item {
	border-inline-start: 0 !important;
}

.pb-header .elementor-nav--main .sub-menu a.elementor-sub-item {
	border-radius: 8px;
}

.pb-header nav.elementor-nav--dropdown.elementor-nav__container a.elementor-item,
.pb-header nav.elementor-nav--dropdown.elementor-nav__container a.elementor-sub-item {
	border-radius: 16px;
}

.pb-header .elementor-nav--main .sub-menu a.elementor-sub-item:is(:hover, :focus-visible),
.pb-header nav.elementor-nav--dropdown.elementor-nav__container a:is(.elementor-item, .elementor-sub-item):is(:hover, :focus-visible) {
	background-color: var(--pb-pastille-survol) !important;
	color: var(--pb-accent) !important;
}

/* Chemin de la page courante coloré à chaque niveau : parent dans le sous-menu, parents dans le burger, page elle-même
   (Prestations > Particuliers > Portes de garage). */
.pb-header .elementor-nav--main .sub-menu li:has(.current-menu-item > a:not(.elementor-item-anchor)) > a.elementor-sub-item,
.pb-header .elementor-nav--main .sub-menu .current-menu-item > a.elementor-sub-item:not(.elementor-item-anchor),
.pb-header nav.elementor-nav--dropdown li:has(.current-menu-item > a:not(.elementor-item-anchor)) > a,
.pb-header nav.elementor-nav--dropdown .current-menu-item > a:not(.elementor-item-anchor) {
	color: var(--pb-accent) !important;
	background-color: var(--pb-pastille-active) !important;
}

/* Flèche d'un parent au bord droit du lien (sous-menus et burger), pas collée au texte. Les liens sont en flex. */
.pb-header .elementor-nav--main .sub-menu a.has-submenu .sub-arrow,
.pb-header nav.elementor-nav--dropdown a.has-submenu .sub-arrow {
	margin-inline-start: auto !important;
	padding-inline-start: 16px !important;
}

/* Sous-menu de 2e niveau : jamais de margin-left forcée sur .sub-menu .sub-menu. SmartMenus le place par margin-left
   (à droite du lien parent, ou à gauche s'il n'a pas la place) : socle.js lui donne seulement le décalage. */

/* ==========================================================================
   Formulaires Elementor (tous) : libellés flottants et champ fichier en bouton.
   Libellés activés dans le widget (show_labels, mark_required). Sur les champs de saisie, le libellé reste masqué
   tant que le champ est vide (le placeholder sert d'invite), puis apparaît en étiquette sur le bord haut du champ
   dès qu'il est rempli ou actif. Le champ fichier devient un bouton pleine largeur (formats et fichiers : socle.js).
   Rendu de référence : exemples/formulaire-vide.jpg, exemples/formulaire-rempli.jpg.
   ========================================================================== */
:is(.elementor-widget-form, .elementor-widget-logia-form) {
	--pb-form-accent: var(--pb-accent);
	--pb-form-accent-survol: var(--pb-accent-survol);
	--pb-form-focus: var(--pb-accent);
	/* Fond de l'étiquette = fond derrière le champ. */
	--pb-form-etiquette-fond: #fff;
	--pb-form-etiquette-texte: var(--pb-texte);
	/* Padding gauche du champ − 8 px. */
	--pb-form-etiquette-gauche: 16px;
	/* Moitié de l'« Espace entre les colonnes » du widget. */
	--pb-form-demi-gouttiere: 12px;
	/* Rayon des champs. */
	--pb-form-rayon-fichier: 12px;
}

:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-group {
	position: relative;
}

:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-group:has(.elementor-field-textual) > .elementor-field-label {
	position: absolute;
	top: 0;
	left: calc(var(--pb-form-demi-gouttiere) + var(--pb-form-etiquette-gauche));
	z-index: 2;
	max-width: calc(100% - 2 * (var(--pb-form-demi-gouttiere) + var(--pb-form-etiquette-gauche)));
	margin: 0;
	padding: 4px 8px !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: .875rem !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: .01em;
	color: var(--pb-form-etiquette-texte) !important;
	background-color: var(--pb-form-etiquette-fond);
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
	transform: translateY(-50%) translateY(8px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, color .2s ease, border-color .2s ease;
}

:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-group:has(.elementor-field-textual):focus-within > .elementor-field-label,
:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-group:has(input.elementor-field-textual:not(:placeholder-shown)) > .elementor-field-label,
:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-group:has(textarea:not(:placeholder-shown)) > .elementor-field-label,
:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-group:has(select option[value=""]:not(:checked)) > .elementor-field-label,
:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-group:has(select):not(:has(option[value=""])) > .elementor-field-label {
	opacity: 1;
	transform: translateY(-50%);
}

:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-group:has(.elementor-field-textual):focus-within > .elementor-field-label {
	color: var(--pb-form-focus) !important;
	border-color: color-mix(in srgb, var(--pb-form-focus) 30%, transparent);
}

:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-mark-required .elementor-field-label::after {
	padding-inline-start: 2px;
	color: var(--pb-form-accent);
}

/* Sur le bouton du champ fichier (fond foncé), l'astérisque à la couleur d'accent ne se lit pas : couleur du texte. */
:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-mark-required.elementor-field-type-upload > .elementor-field-label::after {
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-group:has(.elementor-field-textual) > .elementor-field-label {
		transition: opacity .2s ease;
	}
}

/* Le select affiche son option vide en gris, comme un placeholder (classe posée par socle.js). */
:is(.elementor-widget-form, .elementor-widget-logia-form) select.is-vide {
	color: rgba(0, 0, 0, .45);
}

/* Champ fichier : l'input reste dans le DOM (validation native, focus clavier), l'étiquette sert de bouton. */
:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-type-upload input[type="file"] {
	position: absolute;
	top: -1px;
	left: 0;
	z-index: -1;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0 !important;
	opacity: 1;
}

/* En flex : la ligne des formats passe dessous (order), l'astérisque des champs requis reste après le libellé. */
:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-type-upload > .elementor-field-label {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 14px 16px !important;
	font-size: 1rem !important;
	line-height: 1.4 !important;
	text-align: center;
	color: #fff !important;
	background-color: var(--pb-form-accent);
	border: 0 !important;
	border-radius: var(--pb-form-rayon-fichier);
	cursor: pointer;
	transition: background-color .3s ease;
}

/* Trombone en masque SVG (la police Font Awesome n'est pas toujours chargée). */
:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-type-upload > .elementor-field-label::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	vertical-align: -4px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-type-upload > .elementor-field-label:hover {
	background-color: var(--pb-form-accent-survol);
}

:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-type-upload:has(input:focus-visible) > .elementor-field-label {
	outline: 2px solid var(--pb-form-accent);
	outline-offset: 3px;
}

:is(.elementor-widget-form, .elementor-widget-logia-form) .pb-upload-formats {
	display: block;
	flex-basis: 100%;
	order: 1;
	margin-top: 4px;
	font-family: inherit;
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.3;
	opacity: .85;
}

/* Formats acceptés en une ligne de texte (« pdf, doc, docx… ») : lisible (0,875rem minimum), sans pastilles qui font
   passer le bouton sur plusieurs lignes en mobile. */
:is(.elementor-widget-form, .elementor-widget-logia-form) .pb-format {
	text-transform: lowercase;
}

:is(.elementor-widget-form, .elementor-widget-logia-form) .pb-format + .pb-format::before {
	content: ", ";
}

/* Cases à cocher (RGPD, options) : 20 px à la couleur d'accent, au lieu de la case native de 13 px (cible tactile). */
:is(.elementor-widget-form, .elementor-widget-logia-form) .elementor-field-option input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 1px 10px 0 0;
	flex: none;
	accent-color: var(--pb-form-accent, var(--pb-accent));
}

/* ==========================================================================
   Navigation des carrousels de boucle (classe pb-carrousel-nav, réglages nav_carrousel() du générateur) :
   flèches rondes et points sur une ligne sous les cartes, flèches à gauche, point actif allongé.
   Quand tout tient à l'écran, Swiper verrouille le carrousel (swiper-button-lock) : navigation masquée, sans espace.
   Rendu de référence : exemples/carrousel-nav.jpg. Variante sur fond sombre : pb-carrousel-nav--clair.
   ========================================================================== */
.pb-carrousel-nav.elementor-widget {
	--pb-nav-taille: 48px;
	--pb-nav-espace: 40px;
	--pb-nav-couleur: var(--pb-accent);
	--pb-nav-fond: color-mix(in srgb, var(--pb-accent) 7%, transparent);
	--pb-nav-point: color-mix(in srgb, var(--pb-accent) 25%, transparent);
	--pb-nav-texte-survol: #fff;
	--arrow-normal-color: var(--pb-nav-couleur);
	--arrow-hover-color: var(--pb-nav-texte-survol);
	--arrow-size: 16px;
	--dots-normal-color: var(--pb-nav-point);
	--dots-hover-color: var(--pb-nav-couleur);
	--swiper-pagination-size: 8px;
	--swiper-pagination-spacing: 0px;
	position: relative;
	padding-bottom: calc(var(--pb-nav-taille) + var(--pb-nav-espace));
}

.pb-carrousel-nav--clair.elementor-widget {
	--pb-nav-couleur: #fff;
	--pb-nav-fond: rgba(255, 255, 255, .12);
	--pb-nav-point: rgba(255, 255, 255, .35);
	--pb-nav-texte-survol: var(--pb-accent);
}

/* Creative Elements place flèches et points DANS le .swiper (Elementor Pro : à côté) : le .swiper ne doit pas leur servir
   de repère, sinon ils se posent sur les cartes au lieu de la place réservée sous elles (et le widget capte les clics). */
.pb-carrousel-nav.elementor-widget .swiper {
	position: static;
}

/* Avec le fondu des bords (masque sur le .swiper), la navigation doit rester DANS la boîte du .swiper : un masque rend
   invisible et non cliquable tout ce qui dépasse de la boîte de son élément. La place réservée passe donc du widget au
   .swiper. */
.pb-carrousel-nav.pb-carrousel-fondu.elementor-widget {
	padding-bottom: 0;
}

.pb-carrousel-nav.pb-carrousel-fondu.elementor-widget .swiper {
	padding-bottom: calc(var(--pb-nav-taille) + var(--pb-nav-espace)) !important;
}

.pb-carrousel-nav.pb-carrousel-fondu.elementor-widget .swiper:has(.swiper-button-lock) {
	padding-bottom: 0 !important;
}

/* Toutes les cartes tiennent (pb-carrousel-tient, socle.js) : rangée centrée, pas une carte seule à gauche. */
.pb-carrousel-tient .swiper-wrapper {
	justify-content: center;
}

/* L'écart que Swiper pose à droite de chaque carte décalerait la rangée centrée vers la gauche. */
.pb-carrousel-tient .swiper-slide:last-child {
	margin-right: 0 !important;
}

.pb-carrousel-nav.elementor-widget .elementor-swiper-button {
	position: absolute;
	top: auto !important;
	bottom: 0 !important;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pb-nav-taille);
	height: var(--pb-nav-taille);
	margin: 0 !important;
	border-radius: 50%;
	font-size: 1rem;
	color: var(--pb-nav-couleur);
	background: var(--pb-nav-fond);
	transform: none !important;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
	cursor: pointer;
}

.pb-carrousel-nav.elementor-widget .elementor-swiper-button svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.pb-carrousel-nav.elementor-widget .elementor-swiper-button-prev {
	left: 0 !important;
	right: auto !important;
}

.pb-carrousel-nav.elementor-widget .elementor-swiper-button-next {
	left: calc(var(--pb-nav-taille) + 12px) !important;
	right: auto !important;
}

.pb-carrousel-nav.elementor-widget .elementor-swiper-button:is(:hover, :focus-visible) {
	color: var(--pb-nav-texte-survol);
	background: var(--pb-nav-couleur);
}

.pb-carrousel-nav.elementor-widget .elementor-swiper-button.swiper-button-disabled {
	opacity: .45;
	pointer-events: none;
}

/* La barre des points d'un carrousel laisse passer les clics, seuls les points sont cliquables : élargie (centrage des
   points), elle passe sinon sur les flèches (Elementor lui donne le z-index 3, aux flèches le 2). */
.elementor-widget .swiper-pagination {
	pointer-events: none;
}

.elementor-widget .swiper-pagination-bullet {
	pointer-events: auto;
}

.pb-carrousel-nav.elementor-widget .swiper-pagination {
	position: absolute !important;
	top: auto !important;
	bottom: 0 !important;
	left: calc(2 * var(--pb-nav-taille) + 36px) !important;
	right: auto !important;
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto !important;
	height: var(--pb-nav-taille);
	margin: 0 !important;
	transform: none !important;
}

.pb-carrousel-nav.elementor-widget .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0 !important;
	border-radius: 100px;
	background: var(--pb-nav-point);
	opacity: 1;
	transition: width .3s ease, background-color .3s ease;
}

.pb-carrousel-nav.elementor-widget .swiper-pagination-bullet.swiper-pagination-bullet-active {
	width: 28px;
	background: var(--pb-nav-couleur);
}

.pb-carrousel-nav.elementor-widget .swiper-button-lock,
.pb-carrousel-nav.elementor-widget .swiper-pagination-lock {
	display: none !important;
}

.pb-carrousel-nav.elementor-widget:has(.swiper-button-lock) {
	padding-bottom: 0;
}

@media (max-width: 767px) {
	.pb-carrousel-nav.elementor-widget {
		--pb-nav-taille: 44px;
		--pb-nav-espace: 28px;
	}
}

/* ==========================================================================
   Carrousels qui débordent à droite jusqu'au bord de l'écran (pb-carrousel-deborde, pb-timeline) : les cartes
   passées restent visibles à gauche, l'amorce de la suivante dépasse à droite (mobile compris). Le widget va
   jusqu'au bord droit du contenu (pas de largeur fixe de la maquette) ; socle.js aligne la dernière carte dessus.
   ========================================================================== */
.pb-carrousel-deborde .swiper,
.pb-timeline .swiper {
	overflow: visible !important;
}

@media (max-width: 767px) {
	.pb-carrousel-deborde .swiper,
	.pb-timeline .swiper {
		margin-right: 56px;
	}
}

/* ==========================================================================
   Fondu des bords : masque de transparence (pas un calque de la couleur du fond), valable sur tout fond.
   pb-fondu-bords : deux côtés (bandeau de logos, défilement continu) ; pb-fondu-droite : bord droit seul
   (rangée qui défile au doigt et continue hors champ). Pas sur les carrousels de cartes à flèches.
   Rendu de référence : exemples/fondu-logos.jpg.
   ========================================================================== */
.pb-fondu-bords,
.pb-fondu-droite {
	--pb-fondu-plein: 3%;
	--pb-fondu-net: 20%;
}

.pb-fondu-bords {
	-webkit-mask-image: linear-gradient(90deg, transparent var(--pb-fondu-plein), #000 var(--pb-fondu-net), #000 calc(100% - var(--pb-fondu-net)), transparent calc(100% - var(--pb-fondu-plein)));
	mask-image: linear-gradient(90deg, transparent var(--pb-fondu-plein), #000 var(--pb-fondu-net), #000 calc(100% - var(--pb-fondu-net)), transparent calc(100% - var(--pb-fondu-plein)));
}

.pb-fondu-droite {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--pb-fondu-net)), transparent calc(100% - var(--pb-fondu-plein)));
	mask-image: linear-gradient(90deg, #000 calc(100% - var(--pb-fondu-net)), transparent calc(100% - var(--pb-fondu-plein)));
}

/* Carrousel de cartes que la maquette estompe au bord (pb-carrousel-fondu, avec pb-carrousel-deborde) : carte coupée
   en transparence ou à opacité réduite dans la marge = ce fondu, à tous les paliers, jamais une opacité par carte.
   Le .swiper couvre l'écran (la piste reste sur le contenu par son padding, que Swiper retire de la largeur des cartes)
   et son masque va du bord de l'écran (transparent) au bord du contenu (opaque), 120 px minimum (la marge en tablette), 40 px en mobile.
   --pb-demi-contenu : moitié de la largeur du contenu (style.css du projet). */
.pb-carrousel-fondu .swiper {
	--pb-fondu-largeur: max(120px, calc(50vw - var(--pb-demi-contenu, 640px)));
	margin-inline: calc(50% - 50vw) !important;
	padding-inline: calc(50vw - 50%) !important;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--pb-fondu-largeur), #000 calc(100% - var(--pb-fondu-largeur)), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--pb-fondu-largeur), #000 calc(100% - var(--pb-fondu-largeur)), transparent);
}

/* Tablette : le fondu ne dépasse pas la marge du contenu, où la première carte est au repos (sinon elle est délavée
   alors que rien n'a défilé). --pb-marge-tablette : marge latérale des sections en tablette (style.css du projet). */
@media (max-width: 1024px) {
	.pb-carrousel-fondu .swiper {
		--pb-fondu-largeur: var(--pb-marge-tablette, 120px);
	}
}

@media (max-width: 767px) {
	.pb-carrousel-fondu .swiper {
		--pb-fondu-largeur: 40px;
		padding-inline: 40px !important;
	}
}

/* Bandeau de logos (Carrousel d'images en défilement continu) : transition linéaire, sinon chaque logo accélère
   puis freine. */
.pb-logos .swiper-wrapper {
	transition-timing-function: linear !important;
	align-items: center;
}

.pb-logos .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   Cartes et images
   ========================================================================== */
/* Cartes de même hauteur dans une rangée ou un carrousel : la miniature (document CE de la carte) remplit sa diapositive,
   et sa première section remplit la miniature. Classe pb-carte sur la section de la miniature. */
.swiper-slide > .elementor,
.swiper-slide > .elementor > .elementor-section-wrap,
.swiper-slide .pb-carte,
.elementor-column-wrap > .elementor-widget-wrap > .pb-carte-pleine {
	height: 100%;
}

.pb-carte > .elementor-container,
.pb-carte > .elementor-container > .elementor-row,
.pb-carte .elementor-column-wrap {
	height: 100%;
}

/* Image zoomée au survol : le cadre coupe, avec le même rayon que l'image (widget() de la lib les recopie), sinon
   les coins redeviennent carrés pendant le zoom. isolation : Safari perd l'arrondi pendant la transition. */
.pb-zoom,
.pb-zoom > .elementor-widget-container {
	overflow: hidden;
	isolation: isolate;
}

.pb-zoom img {
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.pb-carte:is(:hover, :focus-within) .pb-zoom img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.pb-zoom img {
		transition: none;
	}
}

/* Image liée : le lien inline-block réduirait l'image. */
.elementor-widget-image a {
	display: block;
}

/* Boutons : la couleur du texte du Kit pose aussi fill sur .elementor-button ; l'icône SVG suit le texte. */
.elementor-button .elementor-button-icon svg {
	fill: currentColor;
}

/* ==========================================================================
   Textes repliés « Voir plus » (extension Fold Content, cartes d'avis) : le bouton est un lien, comme « En savoir
   plus » des cartes, jamais le bouton du Kit (ses styles visent tous les <button> et passent devant ceux de
   l'extension : fond plein, capitales). Couleurs : réglages du widget, sinon l'accent.
   ========================================================================== */
.lwfc .lwfc__btn,
.lwfc .lwfc__btn:is(:hover, :focus, :focus-visible, :active) {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--lwfc-btn-bg, transparent);
	text-transform: none;
	letter-spacing: normal;
}

.lwfc .lwfc__btn {
	color: var(--lwfc-btn-color, var(--pb-accent));
}

.lwfc .lwfc__btn:is(:hover, :focus-visible) {
	color: var(--lwfc-btn-color-hover, var(--pb-accent-survol));
}

/* ==========================================================================
   Sommaire d'article (.pb-sommaire dans .pb-colonne-sommaire) : collé sous le menu en desktop seulement.
   ========================================================================== */
.pb-sommaire .elementor-toc__list-item-text-wrapper::before {
	display: none;
}

@media (min-width: 1025px) {
	.pb-colonne-sommaire {
		align-self: stretch;
	}

	.pb-colonne-sommaire > .pb-sommaire {
		position: sticky;
		top: calc(var(--nav-height) + var(--nav-gap));
	}
}

/* Ancre du sommaire, déplacée dans son titre par socle.js : un bloc de hauteur nulle, aligné sur le haut du titre. */
.elementor-widget-theme-post-content .elementor-menu-anchor {
	display: block;
	height: 0;
}

/* ==========================================================================
   Textes et accessibilité
   ========================================================================== */
/* Retours à la ligne forcés de la maquette desktop : ignorés en mobile. */
@media (max-width: 767px) {
	.elementor-widget-heading .elementor-heading-title br {
		display: none;
	}
}

/* Titre dont la coupure desktop laisse un mot seul sur sa ligne en tablette (colonne plus étroite) : ignorée dès 1024 px. */
@media (max-width: 1024px) {
	.pb-br-desktop br {
		display: none;
	}
}

a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
	outline: 2px solid var(--pb-accent);
	outline-offset: 3px;
}

.screen-reader-text:focus {
	z-index: 100000;
}

/* ==========================================================================
   Boutons d'action du header (réserver, carte cadeau, devis, compte…) : jamais masqués en responsive. Faute de
   place, icône seule (le texte reste lu par les lecteurs d'écran). Classes sur le widget Bouton :
   pb-icone-large (sous 1441 px, tous paliers inférieurs compris), pb-icone-etroit (1025-1280 px seulement),
   pb-icone-tablette (sous 1025 px), pb-icone-mobile (sous 768 px). Typiquement : action secondaire en
   pb-icone-large, action principale en pb-icone-etroit + pb-icone-mobile (texte gardé en tablette, où le menu
   principal est replié dans le burger).
   Dans le menu du burger, ces actions ressortent : classes de l'élément de menu pb-menu-action, avec
   pb-menu-action--plein ou pb-menu-action--contour, et --pb-menu-icone: url(…) (style.css du projet).
   ========================================================================== */
@media (max-width: 1440px) {
	.pb-icone-large .elementor-button-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.pb-icone-large .elementor-button {
		min-width: 44px;
		min-height: 44px;
		padding: 10px !important;
	}
	.pb-icone-large .elementor-button-content-wrapper {
		gap: 0;
		justify-content: center;
	}
}

@media (min-width: 1025px) and (max-width: 1280px) {
	.pb-icone-etroit .elementor-button-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.pb-icone-etroit .elementor-button {
		min-width: 44px;
		min-height: 44px;
		padding: 10px !important;
	}
	.pb-icone-etroit .elementor-button-content-wrapper {
		gap: 0;
		justify-content: center;
	}
}

@media (max-width: 1024px) {
	.pb-icone-tablette .elementor-button-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.pb-icone-tablette .elementor-button {
		min-width: 44px;
		min-height: 44px;
		padding: 10px !important;
	}
	.pb-icone-tablette .elementor-button-content-wrapper {
		gap: 0;
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.pb-icone-mobile .elementor-button-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.pb-icone-mobile .elementor-button {
		min-width: 44px;
		min-height: 44px;
		padding: 10px !important;
	}
	.pb-icone-mobile .elementor-button-content-wrapper {
		gap: 0;
		justify-content: center;
	}
}

nav.elementor-nav--dropdown .menu-item.pb-menu-action > a.elementor-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0;
	border-radius: var(--pb-menu-action-rayon, 10px);
	font-weight: 700 !important;
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

nav.elementor-nav--dropdown .menu-item.pb-menu-action > a.elementor-item::before {
	content: "";
	position: static !important;
	flex: none;
	width: 22px;
	height: 22px;
	opacity: 1 !important;
	background-color: currentColor;
	-webkit-mask: var(--pb-menu-icone) center / contain no-repeat;
	mask: var(--pb-menu-icone) center / contain no-repeat;
}

nav.elementor-nav--dropdown .menu-item.pb-menu-action--plein > a.elementor-item {
	color: var(--pb-menu-action-texte, #fff) !important;
	background-color: var(--pb-menu-action-fond, var(--pb-accent)) !important;
}

nav.elementor-nav--dropdown .menu-item.pb-menu-action--contour > a.elementor-item {
	color: var(--pb-menu-action-contour-texte, inherit) !important;
	background-color: transparent !important;
	box-shadow: inset 0 0 0 2px var(--pb-menu-action-fond, var(--pb-accent));
}

nav.elementor-nav--dropdown .menu-item.pb-menu-action--plein > a.elementor-item:is(:hover, :focus-visible) {
	color: var(--pb-menu-action-contour-texte, inherit) !important;
	background-color: transparent !important;
	box-shadow: inset 0 0 0 2px var(--pb-menu-action-fond, var(--pb-accent));
}

nav.elementor-nav--dropdown .menu-item.pb-menu-action--contour > a.elementor-item:is(:hover, :focus-visible) {
	color: var(--pb-menu-action-texte, #fff) !important;
	background-color: var(--pb-menu-action-fond, var(--pb-accent)) !important;
}

/* ==========================================================================
   Rangées de cartes en carrousel tactile (classe sur la section des cartes, une colonne par carte) :
   pb-scroll-mobile (sous 768 px, cartes à 82 % et amorce) et pb-scroll-tablette (768-1024 px, bord à bord, 3 cartes
   dès 900 px, 2 et une amorce dessous). --pb-bord-tablette / --pb-bord-mobile : marge latérale du contenu à ce palier,
   que la rangée traverse pour aller jusqu'au bord de l'écran.
   ========================================================================== */
.pb-scroll-mobile,
.pb-scroll-tablette {
	--pb-bord-tablette: 40px;
	--pb-bord-mobile: 20px;
	--pb-scroll-gap: 24px;
}

@media (max-width: 767px) {
	.pb-scroll-mobile > .elementor-container > .elementor-row {
		flex-wrap: nowrap !important;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-right: calc(-1 * var(--pb-bord-mobile));
		padding-right: var(--pb-bord-mobile);
		padding-bottom: 8px;
	}
	.pb-scroll-mobile > .elementor-container > .elementor-row::-webkit-scrollbar {
		display: none;
	}
	.pb-scroll-mobile > .elementor-container > .elementor-row > .elementor-column {
		flex: 0 0 82% !important;
		width: 82% !important;
		max-width: 82%;
		scroll-snap-align: start;
	}
	/* Marges des cartes empilées (écart vertical en mobile) : en rangée qui défile, elles feraient déborder la carte de sa
	   colonne et le défilement la rognerait en bas. */
	.pb-scroll-mobile > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap {
		margin-block: 0 !important;
	}
}

@media (max-width: 1024px) and (min-width: 768px) {
	.pb-scroll-tablette > .elementor-container > .elementor-row {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: var(--pb-scroll-gap);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		width: calc(100% + 2 * var(--pb-bord-tablette)) !important;
		max-width: none !important;
		margin: -8px calc(-1 * var(--pb-bord-tablette)) -32px !important;
		padding: 8px var(--pb-bord-tablette) 40px !important;
		scroll-padding-inline: var(--pb-bord-tablette);
	}
	.pb-scroll-tablette > .elementor-container > .elementor-row::-webkit-scrollbar {
		display: none;
	}
	.pb-scroll-tablette > .elementor-container > .elementor-row > .elementor-column {
		flex: 0 0 calc((100% - 2 * var(--pb-scroll-gap)) / 3) !important;
		width: auto !important;
		max-width: none !important;
		scroll-snap-align: start;
	}
}

@media (max-width: 899px) and (min-width: 768px) {
	.pb-scroll-tablette > .elementor-container > .elementor-row > .elementor-column {
		flex-basis: 44% !important;
	}
}

/* ==========================================================================
   Spécifique Creative Elements
   ========================================================================== */
/* Header fixe en haut de l'écran (classe pb-header sur la section du header CE) : le conteneur #header du thème
   classic devient collant ; socle.js pose scrollHeader dès que la page défile (le header rétrécit en CSS projet). */
#header:has(.pb-header) {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: transparent;
}

/* Fil d'Ariane et titre de page du thème classic masqués sur les pages construites en CE (le gabarit les porte). */
body:has(.pb-sans-titre-theme) #wrapper .breadcrumb,
body:has(.pb-sans-titre-theme) .page-header {
	display: none;
}

/* Image en ligne dans son widget : la hauteur de ligne du texte ajoutait une ligne fantôme sous les petites images. */
.elementor-widget-image .elementor-image {
	line-height: 0;
}

.elementor-widget-image figcaption {
	line-height: 1.4;
}

/* Titre en <p> (surtitre, mention) : pas de marge du thème. */
p.elementor-heading-title {
	margin: 0;
}

/* Effet de soulèvement des boutons (option du client) : classe pb-hover-leve sur le widget ou un conteneur. */
.pb-hover-leve .elementor-button,
.elementor-button.pb-hover-leve {
	transition: transform .25s ease, box-shadow .25s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}

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

@media (prefers-reduced-motion: reduce) {
	.pb-hover-leve .elementor-button:is(:hover, :focus-visible),
	.elementor-button.pb-hover-leve:is(:hover, :focus-visible) {
		transform: none;
	}
}

/* Flèches déportées (Remote Arrow) : masquées quand tout tient à l'écran (socle.js pose disabled sur chaque flèche et
   pb-fleches-verrouillees sur le widget), grisées au début et à la fin. */
.elementor-widget-remote-arrow:has(.remote-arrow-button[data-direction="left"][disabled]):has(.remote-arrow-button[data-direction="right"][disabled]),
.elementor-widget-remote-arrow.pb-fleches-verrouillees {
	display: none;
}

.remote-arrow-button[disabled] {
	opacity: .35;
	pointer-events: none;
}