/* =========================================================================
   LPP — Fiche produit machine : retouches MOBILE du modèle « Fiche produit : Machine ».
   Le design d'origine est conservé ; on gagne de la hauteur au-dessus du prix
   et du bouton de devis, et on ajoute une barre de rappel en bas d'écran.
   Les éléments sont désignés par des classes stables (lppf-…) posées par scripts/fiche-classes.php :
   la préprod (modèle 4599) et la production (modèle 6747) n'ont pas les mêmes ID Elementor.
   Jetons (couleurs, polices) : lpp-cartes.css (.lpp-t).
   ========================================================================= */

@media (max-width: 767px) {

	/* ---------- Bandeau photo + titre : bien plus court, titre lisible ---------- */
	.lppf-bandeau {
		padding-top: 18px !important; padding-bottom: 18px !important;
		min-height: 0 !important; background-position: center center !important;
	}
	/* Le titre est repris en bleu nuit au-dessus de la photo (widget lppftitre) : sur la photo du bandeau, il se lisait mal. */
	.lppf-bandeau-titre { display: none !important; }
	.lppf-bandeau { min-height: 78px !important; }
	.lppf-titre-mobile .elementor-heading-title { color: #030F27 !important; text-transform: none !important; }

	/* ---------- Encadré RIPPA : compact, titre en double retiré (il est déjà dans le bandeau) ---------- */
	.lppf-marque { padding: 8px !important; }
	/* Logo sur toute la largeur, puis Detail + Fiche technique, puis WhatsApp bien visible. */
	.lppf-marque-boutons {
		display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; padding: 0 !important; width: 100%;
	}
	.lppf-marque-boutons > * { width: auto !important; max-width: none !important; margin: 0 !important; }
	.lppf-logo { grid-column: 1 / -1; order: 0; }
	.lppf-btn1 { order: 1; }   /* Detail */
	.lppf-btn2 { order: 2; }   /* Fiche technique */
	.lppf-wa { order: 3; grid-column: 1 / -1; }   /* WhatsApp */
	.lppf-marque-boutons .elementor-button { width: 100%; font-size: 13px !important; padding-left: 6px !important; padding-right: 6px !important; }
	.lppf-titre-double { display: none !important; }
	.lppf-logo { margin: 0 auto 2px !important; }
	.lppf-logo img { max-width: 62px !important; }
	.lppf-marque .elementor-widget-button { margin-bottom: 0 !important; }
	.lppf-marque .elementor-button { padding-top: 7px !important; padding-bottom: 7px !important; }

	/* ---------- Colonne infos : prix et bouton juste sous la photo ----------
	   Ordre d'origine : catégories, description, prix, bouton, encadrés techniques.
	   Ordre mobile    : prix, bouton, description, catégories, encadrés techniques. */
	.lppf-col-infos > .elementor-widget-wrap { display: flex; flex-direction: column; }
	/* Tout bloc non nomme (contenu long, descriptions, suggestions) passe apres le prix et le bouton. */
	.lppf-col-infos > .elementor-widget-wrap > *:not([class*="lppf-"]) { order: 7; }
	.lppf-prix { order: 1; }   /* prix */
	.lppf-devis { order: 2; padding-bottom: 14px !important; } /* bouton devis */
	.lppf-resume { order: 3; }   /* description courte */
	.lppf-meta { order: 4; padding-top: 14px !important; padding-bottom: 14px !important; } /* catégories */
	.lppf-donnees-1 { order: 5; }    /* encadrés techniques 1-2 */
	.lppf-donnees-2 { order: 6; }    /* encadrés techniques 3-4 */

	/* Bouton de devis : pleine largeur, zone de clic confortable. */
	.lppf-devis form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
	.lppf-devis .quantity { flex: 0 0 66px; }
	.lppf-devis .single_add_to_cart_button {
		flex: 1 1 auto; min-width: 0; min-height: 52px; padding-left: 10px !important; padding-right: 10px !important;
		font-size: 15px !important; line-height: 1.2 !important; white-space: normal !important;
	}

	/* Photo produit : plafonnée (toutes les photos restent dans la galerie plus bas) pour garder prix et bouton en vue. */
	.lppf-photo img { max-height: 30vh; width: auto !important; margin: 0 auto; }
	/* Espaces resserrés entre titre, photo, prix et bouton (le reste de la page garde ses espacements). */
	.lppf-photo { padding: 4px 0 0 !important; margin: 0 !important; }
	.lppf-col-photo { padding-bottom: 0 !important; }
	.lppf-col-infos { padding-top: 2px !important; }
	.lppf-titre-mobile { padding-bottom: 0 !important; }
	.lppf-photos-btn { order: 3; padding: 2px 15px 0 !important; }
	.lppf-photos-btn .elementor-button { padding: 5px 10px !important; font-size: 13px !important; border: 0 !important; text-decoration: underline; text-underline-offset: 3px; }
	.lppf-prix { margin-bottom: 0 !important; }
	.lppf-prix { margin-top: 0 !important; }
}

/* ---------- Barre de rappel en bas d'écran (mobile et tablette) ---------- */
.lpp-f-barre {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: center; gap: 10px;
	padding: 9px 12px calc(9px + env(safe-area-inset-bottom)) 14px;
	background: var(--nuit); border-top: 2px solid var(--or);
	box-shadow: 0 -6px 20px rgba(3, 15, 39, .25);
	transform: translateY(115%); transition: transform .25s ease; visibility: hidden;
}
.lpp-f-barre.est-visible { transform: none; visibility: visible; }
.lpp-f-barre-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.lpp-f-barre-txt span { font: 500 12px/1.3 var(--corps); color: #C7CEDB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpp-f-barre-txt b { font: 800 17px/1.2 var(--titre); color: #fff; white-space: nowrap; }
.lpp-f-barre-txt small { font-size: 11px; font-weight: 600; color: #C7CEDB; }
.lpp-t .lpp-f-barre-wa {
	flex: 0 0 42px; height: 42px; display: flex; align-items: center; justify-content: center;
	border-radius: 3px; background: #1C8C4E; color: #fff; text-decoration: none;
}
.lpp-t .lpp-f-barre-wa:hover, .lpp-t .lpp-f-barre-wa:focus { background: #15703D; color: #fff; }
.lpp-t .lpp-f-barre-cta {
	flex: 0 0 auto; min-height: 42px; padding: 10px 16px; border: 0; border-radius: 3px;
	background: var(--or); color: #fff; font: 700 14.5px/1.2 var(--corps); text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
}
.lpp-t .lpp-f-barre-cta:hover, .lpp-t .lpp-f-barre-cta:focus { background: var(--or-fonce); color: #fff; }
body.lpp-f-avec-barre { padding-bottom: 68px; }
@media (prefers-reduced-motion: reduce) { .lpp-f-barre { transition: none; } }
@media (min-width: 1025px) { .lpp-f-barre { display: none; } body.lpp-f-avec-barre { padding-bottom: 0; } }

/* Bouton « Voir toutes les photos » (mobile) : la galerie s'arrête sous l'en-tête fixe, pas dessous. */
#photos { scroll-margin-top: 74px; }
@media (min-width: 1025px) { #photos { scroll-margin-top: 118px; } }

/* ---------- Modèle « Fiche produit : Équipement » ----------
   Même principe, une différence : la galerie est dans la colonne de la photo, donc sur mobile
   elle s'intercalait entre la photo et le prix. « display: contents » sort la colonne du flux
   pour pouvoir replacer la galerie après le bouton de devis. */
@media (max-width: 767px) {
	/* La colonne ET son conteneur interne sortent du flux : les widgets deviennent alors des items
	   du conteneur de la section, donc réordonnables. */
	.lppf-col-photo:has(.lppf-galerie),
	.lppf-col-photo:has(.lppf-galerie) > .elementor-widget-wrap { display: contents; }
	.elementor-container:has(> .lppf-col-photo:has(.lppf-galerie)) { flex-wrap: wrap; }
	.lppf-col-photo:has(.lppf-galerie) ~ *, .lppf-titre-mobile, .lppf-photo, .lppf-galerie { width: 100%; flex: 0 0 100%; }
	.lppf-col-photo:has(.lppf-galerie) ~ .lppf-col-infos, .lppf-titre-mobile, .lppf-photo, .lppf-galerie { min-width: 0; }
	.lppf-titre-mobile { order: 1; }
	.lppf-photo { order: 2; }
	.lppf-col-infos { order: 3; }
	.lppf-galerie { order: 4; padding-top: 6px !important; }
	.lppf-galerie .elementor-widget-container { padding: 0 15px; }
}

/* ---------- Encart d'aide à côté de la FAQ (modèle Équipement) ---------- */
.lpp-f-aide { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 26px 24px; }
.lpp-t.lpp-f-aide h3 { font: 800 21px/1.25 var(--titre); color: var(--nuit); margin: 0 0 10px; text-transform: none; }
.lpp-t .lpp-f-aide-txt { font-size: 15px; line-height: 1.6; color: var(--texte); margin: 0 0 18px; }
.lpp-t .lpp-f-aide-pts { list-style: none; margin: 0 0 20px; padding: 16px 0 0; border-top: 1px solid var(--doux-2); display: grid; gap: 12px; }
.lpp-t .lpp-f-aide-pts li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0; font-size: 14.5px; line-height: 1.45; color: var(--texte); }
.lpp-t .lpp-f-aide-pts .lpp-f-ico { flex: 0 0 auto; color: var(--or); margin-top: 1px; }
.lpp-f-aide-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lpp-t .lpp-f-aide-actions .lpp-t-btn { min-height: 48px; font-size: 15px; }
@media (max-width: 767px) { .lpp-f-aide { margin-top: 18px; padding: 22px 18px; } .lpp-f-aide-actions { grid-template-columns: 1fr; } }
/* Bouton WhatsApp de l'encart d'aide (même vert que la barre de rappel). */
.lpp-t .lpp-f-btn-wa { background: #1C8C4E; color: #fff; }
.lpp-t .lpp-f-btn-wa:hover, .lpp-t .lpp-f-btn-wa:focus { background: #15703D; color: #fff; }
/* Écrans étroits (360 px) : le titre passe sur deux lignes, on reprend un peu sur la photo
   pour que le bouton de devis reste entièrement visible. */
@media (max-width: 379px) { .lppf-photo img { max-height: 27vh; } }

/* ---------- Tout bouton « Ajouter à ma demande de devis » de la page ----------
   Le modèle en place un second au milieu des blocs « atouts ». Son libellé ne se coupait pas :
   la page prenait 388 px de large minimum, donc elle se décalait latéralement sur les téléphones
   de 360 px, barre de rappel comprise (signalé par Pash le 22/09/2026). */
@media (max-width: 767px) {
	.elementor-add-to-cart form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
	.elementor-add-to-cart form.cart > * { min-width: 0; }
	.elementor-add-to-cart .quantity { flex: 0 0 62px; }
	.elementor-add-to-cart .single_add_to_cart_button {
		flex: 1 1 auto; min-width: 0; padding-left: 10px !important; padding-right: 10px !important;
		white-space: normal !important; overflow-wrap: break-word;
	}
	/* Filet de sécurité : rien ne doit dépasser la largeur de l'écran sur une fiche produit. */
	.elementor-location-single, .elementor-location-single > * { max-width: 100vw; }
}