/* ---------- Barre de chargement (fine, discrete, non bloquante) ---------- */
#bp-barre-chargement {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 999;
  background: linear-gradient(90deg, var(--couleur-primaire), var(--couleur-secondaire));
  box-shadow: 0 0 10px 0 var(--couleur-primaire);
  transition: width .35s ease, opacity .3s ease .15s;
}
#bp-barre-chargement.bp-terminee { opacity: 0; }

:root {
  --couleur-primaire: #4154f1;
  --couleur-secondaire: #2d3a7a;
  --couleur-texte: #1a2332;
  --couleur-fond: #f7f8fc;
  --rayon: 12px;
  --ombre-douce: 0 4px 18px rgba(15,23,42,.06);
  --ombre-hover: 0 14px 32px rgba(15,23,42,.1);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--couleur-texte); background: var(--couleur-fond); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* ---------- Header ---------- */
/* CORRIGE : vrai degrade base sur la palette extraite du logo (primaire ->
   secondaire), au lieu d'un bleu fixe qui ne refletait jamais le logo. */
.bp-header { background: linear-gradient(120deg, var(--couleur-secondaire), var(--couleur-primaire)); }
.bp-header-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 24px; flex-wrap: wrap; }
.bp-logo img { max-height: 42px; }
.bp-logo-texte { color: #fff; font-weight: 700; font-size: 19px; }

.bp-menu ul { list-style: none; display: flex; flex-wrap: wrap; gap: 26px; margin: 0; padding: 0; }
.bp-menu li { position: relative; }
.bp-menu > ul > li > a { color: #fff; font-size: 15px; font-weight: 500; }
.bp-menu .bp-sous-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 200px; border-radius: 8px; box-shadow: 0 14px 30px rgba(0,0,0,.18); padding: 14px 0 8px; margin-top: 0; z-index: 10; }
.bp-menu .bp-sous-menu a { color: #222; display: block; padding: 9px 16px; font-size: 14px; }
.bp-menu .bp-sous-menu a:hover { background: #f2f4ff; color: var(--couleur-primaire); }
.bp-menu li.bp-a-sous-menu:hover > .bp-sous-menu { display: block; }

/* CORRIGE (bug reel) : un sous-menu IMBRIQUE (sous-sous-menu) heritait de
   "top:100%" comme le premier niveau - il s'affichait donc EN DESSOUS de
   son parent, a l'interieur meme du sous-menu qui le contient, superpose
   aux autres liens de ce sous-menu. Deplacer la souris vers lui traversait
   alors d'autres liens qui volaient le survol et fermaient tout
   brutalement. Un sous-menu imbrique doit s'ouvrir SUR LE COTE (a droite,
   ou a gauche en RTL), jamais en dessous - meme principe "zero jeu" :
   colle directement au parent (left:100%, aucune marge), l'espace visuel
   vient du padding interne, jamais d'une marge exterieure au survol.
   Selecteur a 3 classes, plus specifique que la regle generale a 2 classes
   ci-dessus : s'applique donc automatiquement en priorite, sans
   "!important". */
.bp-menu .bp-sous-menu .bp-sous-menu { top: -14px; left: 100%; margin: 0; padding-left: 4px; }
.bp-menu .bp-sous-menu li.bp-a-sous-menu > a::after { content: "▸"; }

.bp-header-droite { display: flex; align-items: center; gap: 18px; }
.bp-langues { position: relative; }
.bp-langues-bouton { background: rgba(255,255,255,.15); border: none; color: #fff; height: 36px; padding: 0 12px; border-radius: 18px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.bp-langue-code { letter-spacing: .5px; }
.bp-langues-liste { display: none; position: absolute; top: 100%; right: 0; margin-top: 8px; background: #fff; list-style: none; padding: 6px 0; border-radius: 8px; box-shadow: 0 14px 30px rgba(0,0,0,.18); min-width: 160px; }
.bp-langues.bp-ouvert .bp-langues-liste { display: block; }
.bp-langues-liste a { display: block; padding: 8px 16px; color: #222; font-size: 14px; }

.bp-icone-panier { position: relative; color: #fff; font-size: 20px; }
.bp-badge { position: absolute; top: -8px; right: -10px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 6px; display: inline-flex; }

.bp-burger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; }
.bp-burger span { width: 22px; height: 2px; background: #fff; display: block; }
@media (max-width: 860px) {
  .bp-menu ul { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #1e2a5e; padding: 10px 24px; gap: 4px; }
  .bp-menu ul.bp-menu-ouvert { display: flex; }
  .bp-burger { display: flex; }
  .bp-menu .bp-sous-menu { position: static; box-shadow: none; background: rgba(255,255,255,.06); margin-top: 4px; }
  .bp-menu .bp-sous-menu a { color: #fff; }
}

/* ---------- Contenu / mise en page generale ---------- */
main#bp-app { min-height: 60vh; max-width: none; margin: 0; padding: 0; }
.bp-section { padding: 40px 0; width: 100%; }
.bp-section-inner { display: flex; flex-wrap: wrap; gap: 24px; max-width: 1140px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.bp-section-pleine { padding: 0; }
.bp-section-pleine .bp-section-inner { max-width: none; padding: 0; gap: 0; display: block; }
.bp-section-pleine .bp-zone { min-width: 0; width: 100%; }
.bp-zone { box-sizing: border-box; min-width: 0; flex: 0 0 auto; width: calc((100% - 11 * 24px) * var(--n, 12) / 12 + (var(--n, 12) - 1) * 24px); max-width: 100%; }
@media (max-width: 767px) { .bp-zone { width: 100%; } }
.bp-titre { font-size: 2rem; font-weight: 500; line-height: 1.2; margin: 0 0 .5rem; padding: 0; }
.bp-titre::after { content: none; }

/* Animation de reveal au defilement (IntersectionObserver, main.js) -
   discrete, jamais bloquante si le JS echoue (bp-reveal reste visible par
   defaut, seule la classe bp-reveal-actif ajoute la transition). */
.bp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.bp-reveal.bp-reveal-actif { opacity: 1; transform: translateY(0); }
.bp-texte-riche { line-height: 1.7; font-size: 15.5px; }
.bp-image { border-radius: var(--rayon); }
.bp-bouton, .bp-bouton-panier {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(120deg, var(--couleur-primaire), var(--couleur-secondaire));
  color: #fff !important; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14.5px;
  cursor: pointer; margin: 8px 0; box-shadow: 0 6px 16px rgba(65,84,241,.25); transition: transform .18s ease, box-shadow .18s ease;
}
.bp-bouton:hover, .bp-bouton-panier:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(65,84,241,.32); }
.bp-separateur { border: none; border-top: 1px solid #e2e6f0; margin: 20px 0; }
.bp-icone-texte { display: flex; align-items: center; gap: 12px; font-size: 15px; padding: 10px 0; }
.bp-icone-texte i { font-size: 22px; color: var(--couleur-primaire); }
.bp-carte-adresse iframe { width: 100%; height: 320px; border: 0; border-radius: var(--rayon); }
.bp-hero-slider { height: 380px; border-radius: var(--rayon); overflow: hidden; position: relative; }
.bp-hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; display: none; }
.bp-hero-slide.bp-actif { display: block; }
.bp-hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.05)); }
.bp-hero-caption { position: absolute; left: 40px; bottom: 40px; right: 40px; z-index: 2; color: #fff; }
.bp-hero-caption h2 { font-size: 30px; margin: 0 0 8px; }
.bp-hero-caption p { font-size: 15.5px; margin: 0 0 14px; max-width: 560px; }

/* ---------- Grilles / carrousels ---------- */
.bp-grille { display: grid; gap: 20px; }
.bp-grille-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .bp-grille-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bp-grille-4 { grid-template-columns: 1fr; } }

.bp-carrousel { position: relative; }
.bp-carrousel-page { display: none; }
.bp-carrousel-page.bp-actif { display: block; }
.bp-carrousel-prev, .bp-carrousel-next {
  position: absolute; top: 50%; transform: translateY(-50%); background: #fff; border: 1px solid #e2e6f0;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.bp-carrousel-prev { left: -18px; } .bp-carrousel-next { right: -18px; }

/* ---------- Cartes produit / partenaire / equipe ---------- */
.bp-carte-produit, .bp-carte-partenaire, .bp-carte-equipe {
  background: #fff; border: 1px solid #eef0f6; border-radius: var(--rayon); padding: 18px; text-align: center;
  position: relative; overflow: hidden; box-shadow: var(--ombre-douce); transition: box-shadow .25s ease, transform .25s ease;
}
.bp-carte-produit:hover, .bp-carte-partenaire:hover, .bp-carte-equipe:hover { box-shadow: var(--ombre-hover); transform: translateY(-4px); }
.bp-carte-produit img, .bp-carte-partenaire img, .bp-carte-equipe img { width: 100%; height: 150px; object-fit: cover; border-radius: 6px; margin-bottom: 10px; background: #f2f4fb; }
.bp-carte-partenaire img, .bp-carte-equipe img { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px; }
.bp-avatar { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px; background: linear-gradient(135deg, var(--couleur-primaire), #6a3bf5); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; }
.bp-carte-produit h6, .bp-carte-partenaire h6, .bp-carte-equipe h6 { font-size: 14.5px; margin: 4px 0; }
.bp-souscritre { color: #6c7a8a; font-size: 13px; margin: 0; }
.bp-prix { color: #2d7d46; font-weight: 700; }
.bp-devis { color: #64748b; font-size: 12.5px; font-style: italic; }

.bp-icone { position: absolute; top: -46px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 4px 12px rgba(15,23,42,.18); display: flex; align-items: center; justify-content: center; color: var(--couleur-primaire); transition: top .25s ease; z-index: 3; }
.bp-icone-catalogue { left: 10px; } .bp-icone-detail { right: 10px; }
.bp-carte-produit:hover .bp-icone { top: 10px; }

/* ---------- Fiche produit ---------- */
.fp-conteneur { background: #fff; border-radius: 16px; padding: 26px; box-shadow: 0 4px 20px rgba(0,0,0,.04); }
.fp-entete { display: flex; flex-wrap: wrap; gap: 28px; }
.fp-galerie { flex: 0 0 320px; }
.fp-image-principale { width: 100%; height: 280px; object-fit: cover; border-radius: 14px; }
.fp-image-vide { display: flex; align-items: center; justify-content: center; background: #f2f4fb; color: #a3aec2; font-size: 40px; }
.fp-miniatures { display: flex; gap: 8px; margin-top: 10px; }
.fp-miniatures img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.fp-infos { flex: 1; min-width: 260px; }
.fp-infos h1 { font-size: 26px; margin: 0 0 6px; }
.fp-marque { color: #6c7a8a; }
.fp-prix { color: #2d7d46; font-size: 20px; font-weight: 700; margin: 8px 0; }
.fp-devis { background: #eef0f6; color: #64748b; padding: 8px 14px; border-radius: 20px; display: inline-block; font-size: 13.5px; }
.fp-description { line-height: 1.6; }
.fp-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
@media (max-width: 760px) { .fp-grille { grid-template-columns: 1fr; } }
.fp-carte { background: #fafbff; border: 1px solid #eef0f6; border-radius: 12px; padding: 18px 22px; }
.fp-carte h3 { font-size: 13px; text-transform: uppercase; color: var(--couleur-primaire); border-bottom: 2px solid #eef0f6; padding-bottom: 8px; margin: 0 0 12px; }
.fp-item { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; border-bottom: 1px solid #f2f4fb; }
.fp-item:last-child { border-bottom: none; }
.fp-label { color: #6c7a8a; } .fp-valeur { font-weight: 600; text-align: right; max-width: 60%; }

/* ---------- Panier ---------- */
.bp-panier-page { background: #fff; border-radius: 14px; padding: 24px; }
.bp-panier-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.bp-panier-table th, .bp-panier-table td { padding: 10px; border-bottom: 1px solid #eef0f6; text-align: left; font-size: 14px; }
.bp-panier-miniature { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-right: 8px; }
.bp-panier-qte { width: 60px; padding: 4px; }
.bp-panier-retirer { border: none; background: none; color: #ef4444; cursor: pointer; font-size: 16px; }
.bp-panier-total { font-size: 17px; text-align: right; margin: 14px 0; }
.bp-panier-vide { text-align: center; padding: 60px 20px; color: #94a3b8; }
.bp-panier-vide i { font-size: 48px; }
.bp-panier-emplacement a { display: inline-flex; align-items: center; gap: 8px; }

.bp-formulaire-visiteur { margin-top: 24px; padding-top: 20px; border-top: 1px solid #eef0f6; }
.bp-form-row { display: flex; gap: 20px; margin-bottom: 14px; }
.bp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .bp-form-grid { grid-template-columns: 1fr; } }
.bp-formulaire-visiteur label { display: block; font-size: 13px; color: #475569; margin-bottom: 4px; }
.bp-formulaire-visiteur input[type=text], .bp-formulaire-visiteur input[type=email] { width: 100%; padding: 9px 12px; border: 1px solid #d8dee8; border-radius: 8px; font-size: 14px; }
.bp-erreur { background: #fef2f2; color: #b91c1c; padding: 10px 14px; border-radius: 8px; margin: 12px 0; font-size: 13.5px; }
.bp-confirmation { text-align: center; padding: 70px 20px; }
.bp-confirmation i { font-size: 56px; color: #2d7d46; }

/* ---------- Header : sticky / transparent / bouton CTA ---------- */
.bp-header { transition: background .25s ease, box-shadow .25s ease; }
.bp-header-sticky { position: sticky; top: 0; z-index: 50; }
.bp-header-transparent { background: transparent; box-shadow: none; }
.bp-header-transparent.bp-scrolled { background: linear-gradient(120deg, #1e2a5e, #2d3a7a); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.bp-header-cta-bouton { display: inline-flex; align-items: center; background: var(--couleur-primaire); color: #fff !important; padding: 9px 18px; border-radius: 6px; font-size: 13.5px; font-weight: 600; }
.bp-langue-active { color: var(--couleur-primaire) !important; font-weight: 700; }

/* ---------- Footer : reseaux sociaux / newsletter ---------- */
.bp-footer-social { display: flex; gap: 12px; margin-top: 12px; }
.bp-footer-social a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; }
.bp-footer-social a:hover { background: var(--couleur-primaire); }
.bp-footer-newsletter { display: flex; gap: 6px; }
.bp-footer-newsletter input { flex: 1; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; }
.bp-footer-newsletter button { background: var(--couleur-primaire); color: #fff; border: none; border-radius: 6px; padding: 0 14px; cursor: pointer; }
.bp-newsletter-merci { color: #34d399; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Icone + texte (couleur dynamique, compteur anime) ---------- */
.bp-icone-texte i { color: var(--couleur-icone, var(--couleur-primaire)); }
.bp-icone-titre { font-size: 22px; font-weight: 700; }
.bp-icone-texte-desc { color: #6c7a8a; font-size: 13.5px; }
/* ---------- RTL (arabe et langues assimilees) ---------- */
/* Le dir="rtl" sur <html> inverse deja automatiquement le texte et les
   marges "logiques" - ces regles couvrent ce qui reste fige en
   left/right et doit etre inverse deliberement. */
[dir="rtl"] .bp-menu .bp-sous-menu { left: auto; right: 0; }
[dir="rtl"] .bp-menu .bp-sous-menu .bp-sous-menu { left: auto; right: 100%; margin: 0; padding-left: 0; padding-right: 4px; }
[dir="rtl"] .bp-menu .bp-sous-menu li.bp-a-sous-menu > a::after { content: "◂"; }
[dir="rtl"] .bp-icone-catalogue { left: auto; right: 10px; }
[dir="rtl"] .bp-icone-detail { right: auto; left: 10px; }
[dir="rtl"] .bp-langues-liste { left: auto; right: 0; }
[dir="rtl"] .bp-carrousel-prev { right: -18px; left: auto; }
[dir="rtl"] .bp-carrousel-next { left: -18px; right: auto; }
[dir="rtl"] .bp-hero-caption { text-align: right; }
[dir="rtl"] .bp-titre::after { left: auto; right: 0; }
[dir="rtl"] .bp-icone-texte { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .fp-item .fp-valeur { text-align: left; }
[dir="rtl"] .bp-panier-table th, [dir="rtl"] .bp-panier-table td { text-align: right; }
[dir="rtl"] .bp-panier-total { text-align: left; }
[dir="rtl"] .bp-formulaire-visiteur label { text-align: right; }

.bp-chargement { display: flex; justify-content: center; padding: 80px 0; }
.bp-spinner { width: 40px; height: 40px; border: 4px solid #e2e6f0; border-top-color: var(--couleur-primaire); border-radius: 50%; animation: bp-tourner .8s linear infinite; }

/* NOUVEAU (demande explicite - "telechargements PDF", manquait cote site
   public) : meme presentation que l'apercu admin. */
.bp-pdf-carte { background: #fff; border: 1px solid #e2e6f0; border-radius: 8px; padding: 20px 14px; text-align: center; height: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.bp-pdf-carte i { font-size: 36px; color: #dc3545; }
.bp-pdf-titre { font-size: 14px; font-weight: 600; color: #1e293b; min-height: 36px; }
.bp-bouton-pdf { width: 100%; }

/* NOUVEAU (demande explicite - "video YouTube", manquait cote site public) */
.bp-video-vignette { position: relative; width: 100%; padding-top: 56.25%; background-size: cover; background-position: center; border-radius: 8px; cursor: pointer; overflow: hidden; }
.bp-video-bouton-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bp-video-bouton-play i { width: 64px; height: 64px; border-radius: 50%; background: rgba(220,53,69,.92); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.bp-video-vignette:hover .bp-video-bouton-play i { transform: scale(1.1); }

.bp-lecteur-video-overlay { position: fixed; inset: 0; z-index: 99998; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; padding: 20px; }
.bp-lecteur-video-overlay.bp-ouvert { display: flex; }
.bp-lecteur-video-cadre { position: relative; width: 100%; max-width: 900px; padding-top: 50.625%; background: #000; }
.bp-lecteur-video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bp-lecteur-video-fermer { position: absolute; top: -40px; right: 0; color: #fff; font-size: 28px; background: none; border: none; cursor: pointer; }

/* NOUVEAU (demande explicite) : ecran de chargement plein ecran avec le
   logo de la societe - visible des l'arrivee sur le site (contrairement
   a la fine barre de progression, trop discrete pour servir d'accueil). */
#bp-ecran-chargement {
    position: fixed; inset: 0; z-index: 99999; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
    transition: opacity .4s ease, visibility .4s ease;
}
#bp-ecran-chargement.bp-masque { opacity: 0; visibility: hidden; pointer-events: none; }
#bp-logo-chargement { max-width: 180px; max-height: 90px; object-fit: contain; animation: bp-respirer 1.6s ease-in-out infinite; }
@keyframes bp-respirer { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(.96); } }

@keyframes bp-tourner { to { transform: rotate(360deg); } }
.bp-erreur-page { text-align: center; padding: 60px 20px; color: #64748b; }

/* ---------- Footer ---------- */
.bp-footer { background: #1a2332; color: #cbd5e1; margin-top: 40px; }
.bp-footer-inner { max-width: 1280px; margin: 0 auto; padding: 40px 24px; display: flex; flex-wrap: wrap; gap: 40px; }
.bp-footer h5 { color: #fff; margin: 0 0 10px; }
.bp-footer h6 { color: #fff; font-size: 13px; text-transform: uppercase; margin: 0 0 10px; }
.bp-footer p { line-height: 1.7; font-size: 14px; margin: 0; }
.bp-footer-bas { text-align: center; padding: 14px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; }

/* NOUVEAU : bandeau neutre ajoute APRES un footer de theme (plan du
   site/newsletter) - couleurs sobres, compatibles avec n'importe quel
   design de theme. */
.site-footer-supplement-theme { display: flex; flex-wrap: wrap; gap: 30px; background: #1a1a2e; color: #cbd5e1; padding: 24px 32px; }
.site-footer-supplement-col { flex: 1; min-width: 180px; }
.site-footer-supplement-col h6 { color: #fff; font-weight: 700; margin-bottom: 10px; font-size: 13px; }
.site-footer-supplement-col ul { list-style: none; padding: 0; margin: 0; }
.site-footer-supplement-col ul li { margin-bottom: 6px; }
.site-footer-supplement-col ul a { color: #cbd5e1; text-decoration: none; font-size: 12.5px; }
.site-footer-supplement-col ul a:hover { color: #fff; text-decoration: underline; }
.site-footer-newsletter { display: flex; gap: 6px; }
.site-footer-newsletter input { border: none; border-radius: 4px; padding: 8px 10px; font-size: 13px; flex: 1; }
.site-footer-newsletter button { border: none; background: var(--couleur-primaire, #4154f1); color: #fff; border-radius: 4px; padding: 8px 16px; font-size: 13px; font-weight: 600; }

/* NOUVEAU : styles du selecteur de langue - manquaient ENTIEREMENT du site
   public jusqu'ici (uniquement presents dans l'apercu admin), le bouton et
   la liste deroulante s'affichaient donc sans aucun style reel sur le
   vrai site. Z-index eleve (au-dessus de n'importe quel slide/carrousel
   de template) et alignement a droite du menu (convention standard du
   web), comme demande explicitement. */
.site-header-langues { position: relative; }
.site-header-langues-theme { margin-left: auto; }
.site-header-langues-bouton { background: rgba(255,255,255,.12); border: none; color: inherit; padding: 7px 12px; border-radius: 20px; font-size: 14px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.site-header-langues-liste { display: none; position: absolute; top: 100%; right: 0; margin-top: 8px; background: #fff; list-style: none; padding: 6px 0; margin-left: 0; min-width: 180px; border-radius: 8px; box-shadow: 0 14px 30px rgba(0,0,0,.18); z-index: 99999; }
.site-header-langues:hover .site-header-langues-liste, .site-header-langues.ouverte .site-header-langues-liste { display: block; }
.site-header-langues-liste a { display: block; padding: 9px 16px; color: #222; text-decoration: none; font-size: 14.5px; }

/* ---------- Mini-panier : petit bloc ouvert au SURVOL de l'icone panier ---------- */
#bp-minipanier { position: fixed; z-index: 10050; background: #fff; color: #1e293b; border-radius: 12px;
  box-shadow: 0 14px 38px rgba(15,23,42,.25), 0 2px 6px rgba(15,23,42,.12); overflow: hidden; display: none;
  flex-direction: column; font-family: inherit; line-height: 1.3; text-align: start; font-size: 13px; }
#bp-minipanier.bp-mp-ouvert { display: flex; animation: bp-mp-entree .14s ease-out; }
@keyframes bp-mp-entree { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#bp-minipanier .bp-mp-entete { padding: 9px 12px; font-weight: 700; font-size: 13px; border-bottom: 1px solid #eef0f6; display: flex; align-items: center; justify-content: space-between; }
#bp-minipanier .bp-mp-compte { background: #eef2ff; color: #3b4cca; border-radius: 999px; font-size: 11px; padding: 1px 8px; }
#bp-minipanier .bp-mp-liste { list-style: none; margin: 0; padding: 2px 0; overflow-y: auto; flex: 1 1 auto; max-height: 260px; }
#bp-minipanier .bp-mp-ligne { display: flex; align-items: center; gap: 9px; padding: 7px 12px; position: relative; }
#bp-minipanier .bp-mp-ligne + .bp-mp-ligne { border-top: 1px solid #f3f4f8; }
#bp-minipanier .bp-mp-img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #f1f5f9; }
#bp-minipanier .bp-mp-img-vide { display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 18px; }
#bp-minipanier .bp-mp-infos { flex: 1; min-width: 0; }
#bp-minipanier .bp-mp-nom { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline-end: 16px; }
#bp-minipanier .bp-mp-prix { display: block; font-size: 11.5px; color: #15803d; font-weight: 700; margin: 1px 0 4px; }
#bp-minipanier .bp-mp-devis { color: #64748b; font-weight: 500; }
#bp-minipanier .bp-mp-qte { display: inline-flex; align-items: center; border: 1px solid #dbe0ea; border-radius: 999px; overflow: hidden; }
#bp-minipanier .bp-mp-qte button { width: 24px; height: 24px; border: 0; background: #f8fafc; color: #1e293b; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
#bp-minipanier .bp-mp-qte button:hover { background: #e8edf7; }
#bp-minipanier .bp-mp-valeur { width: 32px; height: 24px; border: 0; text-align: center; font-weight: 600; font-size: 12.5px; -moz-appearance: textfield; background: #fff; color: #1e293b; padding: 0; }
#bp-minipanier .bp-mp-valeur::-webkit-outer-spin-button, #bp-minipanier .bp-mp-valeur::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#bp-minipanier .bp-mp-retirer { position: absolute; top: 6px; inset-inline-end: 8px; border: 0; background: none; color: #94a3b8; cursor: pointer; font-size: 11px; padding: 3px; }
#bp-minipanier .bp-mp-retirer:hover { color: #ef4444; }
#bp-minipanier .bp-mp-pied { padding: 9px 12px 11px; border-top: 1px solid #eef0f6; background: #fafbfd; }
#bp-minipanier .bp-mp-total { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; }
#bp-minipanier .bp-mp-lien { display: flex; align-items: center; justify-content: center; gap: 6px; background: #1d4ed8; color: #fff !important;
  text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; }
#bp-minipanier .bp-mp-lien:hover { background: #1e40af; }
#bp-minipanier .bp-mp-vide { text-align: center; padding: 20px 14px; color: #94a3b8; }
#bp-minipanier .bp-mp-vide i { font-size: 30px; }
#bp-minipanier .bp-mp-vide p { margin: 6px 0 0; }

/* Contenu hors "section" (panier, fiche produit, messages) : centre dans un
   conteneur, comme avant que le fond des sections passe en pleine largeur. */
main#bp-app > :not(.bp-section) { max-width: 1140px; margin-left: auto; margin-right: auto; padding: 30px 20px 60px; box-sizing: border-box; }

/* Panier : deux boutons d'envoi (commande / demande de prix) */
.bp-boutons-envoi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.bp-bouton-secondaire { background: transparent; color: var(--bp-couleur-principale, #263420); border: 2px solid currentColor; }

/* Sous-menus du header de theme (hierarchie du menu, survol) */
.bp-mi { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.bp-mi > .bp-caret { cursor: pointer; font-style: normal; font-size: .8em; line-height: 1; padding: 4px 3px; user-select: none; }
.bp-mi-doublon { display: none !important; }
.bp-dd { display: none; position: absolute; top: 100%; left: 0; min-width: 230px; margin: 0 !important; padding: 6px 0 !important; list-style: none; background: #fff; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.18); z-index: 3000; text-align: left; }
.bp-dd li { position: relative; display: block !important; margin: 0 !important; padding: 0 !important; list-style: none; }
.bp-dd a { display: block !important; margin: 0 !important; padding: 9px 18px !important; color: #263420 !important; background: transparent !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: nowrap; text-decoration: none !important; border: 0 !important; border-radius: 0 !important; }
.bp-dd a:hover { background: rgba(0,0,0,.07) !important; }
.bp-dd .bp-dd { top: -6px; left: 100%; }
.bp-caret-sub { float: right; margin-left: 14px; opacity: .7; }
.bp-mi:hover > .bp-dd, .bp-mi.bp-ouvert > .bp-dd, .bp-dd li:hover > .bp-dd { display: block; }
[dir="rtl"] .bp-dd { left: auto; right: 0; text-align: right; }
[dir="rtl"] .bp-dd .bp-dd { left: auto; right: 100%; }
@media (max-width: 900px) { .bp-dd { position: static; box-shadow: none; background: rgba(0,0,0,.04); } .bp-mi { flex-wrap: wrap; } }

.bp-panier-groupe td { background: rgba(0,0,0,.05); font-size: .9em; padding: 8px 12px !important; }
.bp-info-envoi { flex-basis: 100%; margin: 0 0 4px; font-size: .92em; opacity: .85; }

/* Formulaire de contact (widget "Formulaire de contact (BEST)") */
.bp-contact-form { position: relative; display: flex; flex-wrap: wrap; gap: 14px; max-width: 760px; margin: 0 auto; }
.bp-contact-form .bp-cf-champ { flex: 1 1 calc(50% - 14px); min-width: 220px; }
.bp-contact-form .bp-cf-large { flex-basis: 100%; }
.bp-contact-form input, .bp-contact-form textarea, .bp-contact-form select{width:100%;padding:13px 16px;border:1px solid rgba(100,116,139,.32);border-radius:14px;font:inherit;background:#fff;color:#1e293b;box-sizing:border-box;outline:0;transition:border-color .15s,box-shadow .15s}.bp-contact-form input:focus, .bp-contact-form textarea:focus, .bp-contact-form select:focus{border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.18)}
.bp-contact-form textarea { resize: vertical; }

/* Champs et boutons des blocs importes : toujours utilisables, quel que soit le CSS du modele. */
/* Cause confirmee : la bibliotheque d'animation AOS du modele pose "pointer-events:none" sur tout element [data-aos]
   tant que son animation n'a pas demarre - ici elle ne demarre jamais, donc champs, boutons et liens restaient inertes. */
#bp-app [data-aos], #bp-app form, #bp-app input, #bp-app textarea, #bp-app select, #bp-app button, #bp-app a { pointer-events: auto !important; }
#bp-app input:not([type="hidden"]), #bp-app textarea, #bp-app select { -webkit-user-select: text !important; user-select: text !important; }

/* Formulaire de demande : lignes produit / service */
.bp-cf-produits{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.22);border-radius:18px;padding:18px;box-sizing:border-box}
.bp-cf-produits .bp-cf-prod-titre{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin:0 0 12px;color:inherit}
.bp-cf-produits .bp-cf-prod-titre i{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#4f46e5;color:#fff;font-size:14px}
.bp-cf-produits .bp-cf-ligne{display:flex;align-items:center;gap:10px;background:#fff;color:#1e293b;border:1px solid rgba(100,116,139,.28);border-radius:14px;padding:8px 10px;margin:0 0 10px;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:border-color .15s,box-shadow .15s}
.bp-cf-produits .bp-cf-ligne:focus-within{border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.18)}
.bp-cf-produits .bp-cf-pic{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:rgba(79,70,229,.1);color:#4f46e5;font-size:17px}
.bp-cf-produits .bp-cf-ligne select{flex:1 1 auto;min-width:0;border:0 !important;background:transparent !important;box-shadow:none !important;outline:0;font:inherit;color:inherit;padding:8px 4px;height:auto;cursor:pointer}
.bp-cf-produits .bp-cf-qte{flex:0 0 auto;display:inline-flex;align-items:center;border:1px solid rgba(100,116,139,.35);border-radius:999px;overflow:hidden;background:#f8fafc}
.bp-cf-produits .bp-cf-qte button{width:32px;height:34px;padding:0;margin:0;border:0 !important;background:transparent !important;color:#4f46e5 !important;font-size:18px;line-height:1;cursor:pointer;box-shadow:none !important}
.bp-cf-produits .bp-cf-qte button:hover{background:rgba(79,70,229,.12) !important}
.bp-cf-produits .bp-cf-qte input{width:44px;height:34px;padding:0;margin:0;text-align:center;border:0 !important;background:transparent !important;box-shadow:none !important;outline:0;font:inherit;font-weight:700;color:#1e293b;-moz-appearance:textfield}
.bp-cf-produits .bp-cf-qte input::-webkit-outer-spin-button,.bp-cf-produits .bp-cf-qte input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bp-cf-produits .bp-cf-retirer{flex:0 0 32px;width:32px;height:32px;padding:0;margin:0;border:0 !important;border-radius:50%;background:rgba(229,72,77,.1) !important;color:#e5484d !important;font-size:18px;line-height:1;cursor:pointer;box-shadow:none !important}
.bp-cf-produits .bp-cf-retirer:hover{background:#e5484d !important;color:#fff !important}
.bp-cf-produits .bp-cf-ajout{width:100%;padding:11px 14px;margin:2px 0 0;border:2px dashed rgba(79,70,229,.5) !important;border-radius:14px;background:rgba(79,70,229,.05) !important;color:#4f46e5 !important;font-weight:700;font-size:14px;cursor:pointer;box-shadow:none !important;transition:background .15s}
.bp-cf-produits .bp-cf-ajout:hover{background:rgba(79,70,229,.13) !important}
@media (max-width:560px){.bp-cf-produits .bp-cf-ligne{flex-wrap:wrap}
.bp-cf-produits .bp-cf-ligne select{flex:1 1 calc(100% - 100px)}
}


.bp-contact-form .bp-bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 22px;border:0;border-radius:14px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font:inherit;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 10px 24px rgba(79,70,229,.32);transition:transform .15s,box-shadow .15s}
.bp-contact-form .bp-bouton:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(79,70,229,.4)}
.bp-contact-form .bp-bouton:disabled{opacity:.6;cursor:wait;transform:none}

/* Bouton d'envoi des formulaires du site (themes inclus) */
form[data-bp-formulaire] button[type="submit"],form[data-bp-formulaire] input[type="submit"]{display:inline-flex !important;align-items:center;justify-content:center;gap:10px;width:100% !important;box-sizing:border-box;padding:15px 22px !important;margin-top:8px;border:0 !important;border-radius:14px !important;background:linear-gradient(135deg,#4f46e5,#7c3aed) !important;color:#fff !important;font:inherit;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 10px 24px rgba(79,70,229,.32) !important;transition:transform .15s,box-shadow .15s}
form[data-bp-formulaire] button[type="submit"]:hover,form[data-bp-formulaire] input[type="submit"]:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(79,70,229,.4) !important}
form[data-bp-formulaire] button[type="submit"]:disabled{opacity:.6;cursor:wait;transform:none}

/* Champ piece jointe */
.bp-cf-fichier{box-sizing:border-box}
.bp-cf-fichier .bp-cf-fichier-zone{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:14px 16px;border:2px dashed rgba(79,70,229,.45);border-radius:14px;background:rgba(79,70,229,.05);color:#4f46e5;font-weight:600;cursor:pointer;transition:background .15s}
.bp-cf-fichier .bp-cf-fichier-zone:hover{background:rgba(79,70,229,.12)}
.bp-cf-fichier .bp-cf-fichier-zone i{display:inline-grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:11px;background:rgba(79,70,229,.12);font-size:17px}
.bp-cf-fichier .bp-cf-fichier-txt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-cf-fichier input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}

/* Header de THEME : le deroulant genere par le serveur (.dropdown > .dropdown-menu, comme dans l'apercu) s'ouvre aussi au survol
   (le JS Bootstrap n'existe pas sur la vitrine ; le clic reste gere par main.js). */
#bp-header .dropdown { position: relative; }
#bp-header .dropdown:hover > .dropdown-menu,
#bp-header .dropdown.show > .dropdown-menu { display: block; margin-top: 0; }