/* Modale du configurateur — composant partagé (catalogue et fiches). */
/* ---- modale du configurateur -------------------------------------------
   Le configurateur est rendu dans la page, replié : l'ouvrir ne coûte donc
   aucun chargement. Le voile reste sous le panier flottant (z-index 99990)
   pour qu'on puisse suivre ses ajouts sans fermer la fenêtre. */
.lpb-modale{position:fixed;inset:0;z-index:99970;display:flex;align-items:center;justify-content:center;
 padding:24px;box-sizing:border-box}
.lpb-modale[hidden]{display:none!important}
.lpb-voile{position:absolute;inset:0;background:rgba(15,24,27,.55);backdrop-filter:blur(2px)}
.lpb-boite{position:relative;z-index:1;display:flex;flex-direction:column;
 width:min(980px,100%);max-height:min(880px,92vh);
 background:#fff;border-radius:16px;overflow:hidden;
 box-shadow:0 24px 70px -18px rgba(15,24,27,.5);
 animation:lpb-apparait .18s ease-out}
@keyframes lpb-apparait{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lpb-boite{animation:none}}
.lpb-modale-tete{display:flex;align-items:center;justify-content:space-between;gap:16px;
 padding:17px 20px;border-bottom:1px solid #DCE5E7;flex:0 0 auto;background:#fff}
.lpb-modale-tete h2{margin:0;font:600 17px/1.3 "IBM Plex Sans",-apple-system,sans-serif;
 letter-spacing:-.012em;color:#0F181B}
.lpb-fermer{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
 width:38px;height:38px;flex:0 0 auto;border-radius:9px;cursor:pointer;color:#3B4E54;
 transition:background .14s ease,color .14s ease}
.lpb-fermer:hover{background:#EDF2F3;color:#0F181B}
.lpb-fermer:focus-visible{outline:2px solid #0A7C91;outline-offset:2px}
.lpb-fermer svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lpb-modale-corps{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0;background:#fff}
.lpb-modale-corps .lpsel{margin:0}
/* Le défilement de la page derrière la fenêtre est neutralisé. */
body.lpb-fige{overflow:hidden!important}
@media(max-width:640px){
 .lpb-modale{padding:0}
 .lpb-boite{width:100%;max-height:100vh;height:100%;border-radius:0}
}


/* ---- modale sur écran étroit -------------------------------------------
   Le configurateur n'a pas de marge horizontale propre : c'est la fenêtre
   qui la lui donne, sinon son contenu touche les bords. */
.lpb-modale-corps{padding:0 20px}
.lpb-modale-corps .lpsel{max-width:860px;margin:0 auto}
@media(max-width:640px){
 .lpb-modale-corps{padding:0 14px}
 .lpb-modale-tete{padding:13px 14px}
 .lpb-modale-tete h2{font-size:15.5px}
}
@media(max-width:420px){
 .lpb-modale-corps{padding:0 10px}
}
/* ---- fermeture de la fenêtre -------------------------------------------
   La croix passait inaperçue, et sur mobile la barre d'administration de
   WordPress — fixée en haut, au-dessus de tout — recouvrait purement et
   simplement l'en-tête de la fenêtre. On décale donc la fenêtre d'autant. */
.lpb-modale{--lpb-haut:0px;top:var(--lpb-haut)}
body.admin-bar .lpb-modale{--lpb-haut:32px}
@media(max-width:782px){ body.admin-bar .lpb-modale{--lpb-haut:46px} }

.lpb-fermer{
 width:44px;height:44px;border-radius:10px;
 color:#C0341A;background:#FDECE6;border:1px solid #F3CFC3;
}
.lpb-fermer svg{width:22px;height:22px;stroke-width:2.4}
.lpb-fermer:hover,.lpb-fermer:focus-visible{background:#C0341A;color:#fff;border-color:#C0341A}
.lpb-fermer:focus-visible{outline:2px solid #C0341A;outline-offset:2px}

/* Le panier flottant occupe le même coin que la croix de fermeture. Sur une
   fenêtre étroite, il se posait dessus et la rendait introuvable. Il
   s'efface le temps de la fenêtre — le configurateur affiche de son côté
   ce qui est déjà au panier — et revient à jour à la fermeture. */
body.lpb-modale-ouverte .lps-flot{display:none!important}

/* La fenêtre couvre tout l'écran, mais la barre d'achat des fiches produit
   a un plan supérieur au sien : elle flotterait par-dessus. Elle s'efface
   aussi, et revient à la fermeture. */
body.lpb-modale-ouverte .lpaf-barre{display:none!important}