/* général  */
#header a:hover{
  color:#2D495F;
}

a{
  color:#2D495F;
}

a:hover{
  color:#F59D19;
}

.btn-primary {
    color: #F59D19;
    background-color: #2D495F;
    border-color: transparent;
}

/* === BOUTON NORMAL === */
.btn-primary {
  background-color: #2D495F;
  border-color: transparent !important;
  color: #ffffff;
}

/* === HOVER (visible) === */
.btn-primary:hover {
  background-color: #244056;   /* un peu plus foncé */
  border-color: transparent !important;
  color: #ffffff;
}

/* === ACTIVE / CLICK / LOADING (PAS DE BLEU) === */
.btn-primary:active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: #65768B !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: #ffffff;
}

/* === FOCUS CLAVIER (accessibilité) === */
.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(245,157,25,.35); /* orange charte */
}

/* === MOBILE : supprimer le flash bleu === */
.btn,
button,
a.btn {
  -webkit-tap-highlight-color: transparent;
}







@media (max-width:720px){
.btn-primary {
    width: 100% !important;
}
}

.btn-primary:hover {
    background-color: #F59D19;
    color: #2D495F;
}

/* Couleur par défaut (icône + texte) */
.page-my-account #content .links a,
.page-my-account #content .links a span,
.page-my-account #content .links a i {
    color: #2D495F !important;
}

/* Hover : seul l’icône change de couleur */
.page-my-account #content .links a:hover i {
    color: #F59D19 !important;
}






/**** page produit   ****/
.product-price {
    display: inline-block;
    max-width: 100%;
    color: #F59D19;
}


.btn-primary:disabled:hover,
.btn-primary.disabled:hover {
  background-color: #65768B !important;  /* couleur au hover */
  color: #F6EBD9 !important;
}


.tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link:hover {
    border: 0;
    border-bottom: #2D495F 3px solid;
}

.tabs .nav-tabs .nav-link.active {
    color: #2D495F;
}

/***************   *********************/


/*************** Formulaires  *********************/

input,
textarea,
select {
  background-color: #fff !important; /* évite un gris forcé */
}


/* Couleur du contour focus des champs */
input:focus,
textarea:focus,
select:focus {
  border-color: #2D495F !important; /* couleur de bordure */
  box-shadow: 0 0 0 3px rgba(45, 73, 95, 0.25) !important; /* halo doux */
  outline: none !important;
}

.input-group .input-group-btn>.btn[data-action=show-password] {

  background-color: #2D495F !important;
}

.input-group:focus{
  border-color: #2D495F !important; /* couleur de bordure */
  box-shadow: 0 0 0 3px rgba(45, 73, 95, 0.25) !important; /* halo doux */
  outline: none !important;
}

.input-group .form-control:focus {
  border-color: #2D495F !important; /* couleur de bordure */
  box-shadow: 0 0 0 3px rgba(45, 73, 95, 0.25) !important; /* halo doux */
  outline: none !important;
}



.input-group .js-parent-focus .focus{

  outline: none !important;
  box-shadow: none !important;
}


/***************   *********************/




/* Étiquette "Nouveau" */
.product-flags .new {
  background-color: #F59D19 !important; /* vert */
  color: white !important;
}

/* Étiquette "En promo" */
.product-flags .on-sale {
  background-color: #F59D19 !important; /* rouge */
  color: white !important;
}

/* Étiquette "Exclusivité internet" */
.product-flags .online-only {
  background-color: #F6EBD9 !important; /* bleu */
  color: white !important;
}


/* aperçu rapide sur les miniatures produits */
.product-miniature .highlighted-informations .quick-view{
    color : #2D495F !important;
}


/* page contact  */

/* Contact – mise en page charte (front only)
   Palette : #2d495f (ink), #65768b (muted), #f59d19 (accent), #f6ebd9 (paper) */
#contact section.login-form{
  --ink:#2d495f; --muted:#65768b; --accent:#f59d19; --paper:#f6ebd9;
  max-width:780px; margin:0 auto; padding:28px; border-radius:16px;
}

/* En-tête */
#contact section.login-form > form > header{ margin:0 0 16px }
#contact section.login-form > form > header h1{ margin:0 0 6px }
#contact section.login-form > form > header p{ margin:0; color:var(--muted) }
#contact section.login-form > form > header::before{
  content:""; display:block; width:64px; height:6px;
  background:var(--accent); border-radius:999px; margin-bottom:12px;
}

/* Champs */
#contact .form-fields{ display:grid; gap:14px }
#contact .form-fields label{ display:grid; gap:6px }
#contact .form-fields label span{ font-weight:600; color:var(--ink) }

#contact .form-fields input[type="email"],
#contact .form-fields select,
#contact .form-fields textarea{
  width:100%; padding:12px 14px; border:1px solid var(--muted);
  border-radius:12px; background:#fff; color:var(--ink); line-height:1.4;
  transition:border-color .2s ease, box-shadow .2s ease;
}
#contact .form-fields textarea{ min-height:160px; resize:vertical }

#contact .form-fields input:focus,
#contact .form-fields select:focus,
#contact .form-fields textarea:focus{
  outline:0; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(245,157,25,.25);
}

/* Bouton envoyer */
#contact .form-footer{ margin-top:8px }
#contact .form-footer button[name="submitMessage"]{
  display:inline-block; border:0; border-radius:3px; padding:12px 22px;
  background:var(--accent); color:#2D495F; font-weight:700; cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
#contact .form-footer button[name="submitMessage"]:hover{
  transform:translateY(-1px); box-shadow:0 6px 16px rgba(245,157,25,.35);
}
#contact .form-footer button[name="submitMessage"]:active{ transform:translateY(0) }

/* Notifications du module */
#contact .notification{ margin:12px 0; padding:12px 14px; border-radius:12px }
#contact .notification-success{ background:#e8f7e9; border:1px solid #bde3c1 }
#contact .notification-error{ background:#fdeaea; border:1px solid #f7c7c7 }

/* GDPR hook (si présent) */
#contact #gdpr_consent label{ color:var(--muted) }

/* Option : largeur confortable sur grands écrans (on garde 1 colonne) */
@media (min-width:720px){
  #contact .form-fields{ grid-template-columns:1fr; }
}


.label, label {
    text-align:left;
}

.label, label:hover {
    color: #2D495F !important;
}

/* Formulaire de contact : remettre le label RGPD en mode normal */
#contact .gdpr_consent .custom-checkbox label.psgdpr_consent_message {
  display: inline-block !important;
}
#contact .gdpr_consent {
  margin-top: 10px;
}








.d-none{
  display: none !important;
}

/* Pagination pages catégories */
.pagination .current a {
    color: #F59D19;
}



.input-group.focus{
  border-color: #2D495F !important; /* couleur de bordure */
  box-shadow: 0 0 0 3px rgba(45, 73, 95, 0.25) !important; /* halo doux */
  outline: none !important;
}

.custom-radio input[type=radio]:checked+span {
    background-color: #2D495F;

}


/* Neutralise l'effet du ::after sur les vignettes produit */
 .js-product-miniature .product-description::after,
.product-miniature:hover .product-description::after,
.thumbnail-container:hover + .product-description::after {
  transform: none !important;
  transition: none !important;
  opacity: 0 !important;
  display: none !important;
} 

.product-miniature .thumbnail-top {
  display: flex;          /* au cas où, mais il l’est déjà */
  flex-direction: column; /* image au-dessus, texte en dessous */
  align-items: center;    /* centrage horizontal */
}




/*******************************************************************************/
/****** Configurateur page produit  **************/

#configurator_block .info, #configurator_block .info-fb{
  background-color: #F59D19 !important;
  color: #2D495F !important;
}


#configurator_block label span.label-default{
  background-color: white !important;
  border:1px solid #2D495F !important;
}


#configurator_block .step_group{
  border:none;
}

input[type="radio"] {
  accent-color: #2D495F !important;
}

/* Réduit la largeur des champs du configurateur */
#configurator_block input.form-control.grey {
  width: 150px !important;   /* adapte la taille à ton goût */
  max-width: 100%;           /* empêche qu’il dépasse son parent */
  display: inline-block;     /* pour éviter qu’il prenne toute la ligne */
}



/* ===== Champ composite: [ Largeur : |input| mm ] ===== */
#configurator_block .input-group{
  display:inline-flex;               /* une seule ligne */
  align-items:center;
  flex-wrap:nowrap;
  gap:0;                             /* pas d’espace entre les pièces */
  margin:6px 0 10px;
}

/* Pastilles "Largeur :" et "mm" */
#configurator_block .input-group .input-group-addon{
  height:38px;
  display:flex;
  align-items:center;
  padding:0 12px;
  background:#f6f7f9;
  border:1px solid #dcdcdc;
  color:#444;
  font-weight:600;
  line-height:1;
}

/* Pastille gauche (Largeur :) – fusionne la bordure avec l'input */
#configurator_block .input-group .input-group-addon:first-child{
  border-right:0;
  border-radius:8px 0 0 8px;
  min-width:92px;                    /* aligne joliment les lignes */
}

/* Pastille droite (mm) – fusionne la bordure avec l'input */
#configurator_block .input-group .input-group-addon:last-child{
  border-left:0;
  border-radius:0 8px 8px 0;
  min-width:52px;
  font-weight:500;
  color:#666;
}

/* Le champ au centre */
#configurator_block .input-group input.form-control.grey{
  width:180px !important;            /* ajuste à ton goût */
  height:38px;
  line-height:38px;
  text-align:center;
  border:1px solid #dcdcdc;
  border-left:0;                     /* fusion visuelle avec la pastille gauche */
  border-right:0;                    /* fusion visuelle avec la pastille droite */
  border-radius:0;                   /* pas d’angles ici */
  box-shadow:none;
}

/* Focus propre et discret */
#configurator_block .input-group input.form-control.grey:focus{
  border-color:#b5b5b5;
  box-shadow:none;
}

/* Aide sous le champ (valeurs disponibles) */
#configurator_block small{
  margin-top:4px;
  color:#666;
}

/* Le groupe doit être un bloc, pas inline */
#configurator_block .input-group{
  display:flex;              /* au lieu de inline-flex */
  align-items:center;
  flex-wrap:nowrap;
  gap:0;
  margin:6px 0 10px;
}

/* Input au centre : aligner à gauche + padding normal */
#configurator_block .input-group input.form-control.grey{
  width:180px !important;
  height:38px;
  padding:0 12px;            /* espace intérieur */
  text-align:left;           /* curseur à gauche */
  line-height:normal;        /* évite un centrage vertical bizarre */
  box-sizing:border-box;
  border:1px solid #dcdcdc;
  border-left:0;
  border-right:0;
  border-radius:0;
  box-shadow:none;
}

/* “Valeurs disponibles …” sur une seule ligne */
#configurator_block small{
  margin-top:4px;
  color:#666;
  white-space:nowrap;        /* force une ligne */
}

/* Configurateur : autoriser le retour à la ligne dans les textes d'info */
#configurator_block .info-text small,
#configurator_block .col-xs-12.info-text small {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* Séparateur visuel entre les étapes du configurateur */
#configurator_block .step_group {
  border-top: 1px solid #e2e2e2;
  padding-top: 15px;
  margin-top: 20px;
}

/* On supprime la bordure sur la première étape */
#configurator_block .step_group:first-child {
  border-top: none;
  margin-top: 0;
}

#configurator_block .step_group .title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
  text-transform: uppercase;
  border-left: 4px solid #F59D19;
  padding-left: 8px;
  margin-left:-12px;
}

/* ou la version steps encadrées */
/* #configurator_block .step_group {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 25px;
  background-color: #fafafa;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
} */

#configurator-progress:after {
  background: none !important;
}

#configurator-progress strong {
  color: #2D495F !important;
}

/************************/



/* === Harmonise le SELECT "Uniform" avec notre champ composite === */
#configurator_block .input-group{
  display:flex; align-items:center; flex-wrap:nowrap; gap:0; margin:6px 0 10px;
}

/* Pastilles gauche/droite (inchangé) */
#configurator_block .input-group .input-group-addon{
  height:38px; display:flex; align-items:center;
  padding:0 12px; background:#f6f7f9; border:1px solid #dcdcdc; color:#444;
  font-weight:600; line-height:1;
}
#configurator_block .input-group .input-group-addon:first-child{ border-right:0; border-radius:8px 0 0 8px; min-width:92px; }
#configurator_block .input-group .input-group-addon:last-child { border-left:0;  border-radius:0 8px 8px 0;  min-width:52px; color:#666; font-weight:500; }

/* Champ central — INPUT (déjà OK) */
#configurator_block .input-group input.form-control.grey{
  width:180px !important; 
  height:38px; 
  padding:0 12px; 
  text-align:left; 
  box-sizing:border-box;
  border:1px solid #dcdcdc; 
  border-left:0; 
  /* border-right:0;  */
  border-radius:0; 
  box-shadow:none;
}

/* Champ central — SELECT avec Uniform */
#configurator_block .input-group .selector{
  position:relative;
  flex:0 0 160px; height:38px; box-sizing:border-box;
  border:1px solid #dcdcdc; border-left:0; 
  
  /* border-right:0;  */
  border-radius:0; 
  background:#fff;
  display:flex; 
  align-items:center;
}

/* On neutralise le style par défaut d'Uniform (span + pseudo) */
#configurator_block .input-group .selector span{
  display:block; width:100%; height:100%;
  line-height:38px; padding:0 32px 0 12px;
  background:transparent !important; border:0 !important; color:#333;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  width: auto !important;
}
#configurator_block .input-group .selector span:after,
#configurator_block .input-group .selector:before{
  content:none !important; display:none !important; /* cache le petit carré/triangle d’Uniform */
}

/* On crée notre flèche propre */
#configurator_block .input-group .selector::after{
  content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #666;
  pointer-events:none;
}

/* Le vrai <select> recouvre tout mais est invisible (clic OK) */
#configurator_block .input-group .selector select{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
}

/* Focus cohérent */
#configurator_block .input-group .selector:focus-within,
#configurator_block .input-group input.form-control.grey:focus{
  border-color:#b5b5b5; box-shadow:none;
}



/* Empêche tout rognage */
#configurator_block .option_block{
  position: relative;
  overflow: visible !important;
}

/* Bordure de sélection => on passe en outline (toujours visible) */
#configurator_block .option_block.selected{
  border-color: transparent !important;           /* on neutralise la bordure */
  outline: 2px solid #2fbf71 !important;          /* vert Prestashop-ish */
  outline-offset: 0;                               /* à l’extérieur du bloc */
}


/* pour le border des img du configurateur */

#configurator_block .option_block.colortexture img {
  height:auto;
}


/* Bouton du configurateur : ajout / mise à jour panier */
#configurator_block .btn,
#configurator_block .btn-primary {
  display: inline-flex;      /* contenu flexible */
  align-items: center;       /* icône + texte centrés verticalement */
  justify-content: center;   /* texte centré dans le bouton */
  white-space: normal;       /* autorise le retour à la ligne si besoin */
  width: auto;               /* laisse la largeur s’adapter au texte */
  max-width: 100%;           /* ne déborde pas du bloc */
  box-sizing: border-box;
}

/* Icône du panier dans ce bouton */
#configurator_block .btn i,
#configurator_block .btn-primary i {
  position: static;          /* on enlève les positions absolues éventuelles */
  margin-right: 8px;         /* un peu d’espace entre l’icône et le texte */
}



/* ===== Style des input recherhes toiles configurateur ===== */

.searchable-select-container {
  margin-bottom: 5px;
}

.searchable-select-input {
  width: 100%;
  padding: 6px 8px;
  box-sizing: border-box;
}

.searchable-select-results {
  position: absolute;
  z-index: 10;
  background: #fff;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 2px 0 0 0;
  width: 100%;
}

.searchable-select-item {
  padding: 4px 8px;
  cursor: pointer;
}

.searchable-select-item:hover {
  background: #f0f0f0;
}

.searchable-select-item.is-active {
  background: #f0f0f0;
}



/* Masquer la liste déroulante "Uniform" sur les steps en mode recherche */
.step_group.recherche-mode .selector {
   display: none !important; 
}

/****responsive configurateur****/


/* Images responsive dans les tabs produit (Description / Détails / Documents) */
@media (max-width: 768px) {
#tab-content img,
.tab-content img {
  max-width: 100%;
  height: auto;
 
}

#tab-content figure,
#tab-content picture,
#tab-content p,
#tab-content div {
  max-width: 100%;
}

/* Sécurité anti-débordement : pas de scroll horizontal dans le configurateur */
#configurator_block {
  overflow-x: hidden;
}
 


.col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
.col-lg-7, .col-lg-8, .col-lg-9, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, 
.col-md-4, .col-md-5, .col-md-7, .col-md-8, .col-md-9, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, 
.col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl, 
.col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, 
.col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xs, .col-xs-1, .col-xs-10, .col-xs-11, 
.col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, 
.col-xs-8, .col-xs-9 { 
  padding-left: 5px;
}





/* Espace sous le premier container info produit */
#product-tabs-under-images{
  margin-bottom: 20px;
}

#configurator_block .step_options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }


  .searchable-select-input {
    width: auto;
}

}

@media (max-width: 768px) {
  .product-tabs-under-images .nav-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .product-tabs-under-images .nav-tabs > li {
    float: none;
    width: auto;
  }

  .product-tabs-under-images .nav-tabs > li > a {
    display: block;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    padding: 10px 12px;
  }

#tab-content .tab-pane {
  padding-top: 120px;
  margin-top: -120px;
}


}





/************************* Menu pièces détachées ***************************************************/

/* Masquer les sous-catégories pour la catégorie ID 15 uniquement */
.menu-item-category-15 > .sub-menu,
.menu-item-category-15 .elementor-nav-dropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Empêcher l'ouverture au survol/clic sur le dropdown (mais pas sur le lien) */
.menu-item-category-15:hover > .sub-menu,
.menu-item-category-15:hover .elementor-nav-dropdown {
    display: none !important;
}

/* Cacher visuellement la flèche sans casser le reste */
.menu-item-category-15 .sub-arrow,
.menu-item-category-15 .elementor-item .sub-arrow {
    font-size: 0 !important;
    line-height: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}

/* Pièces détachées (catégorie 15) : 
   si l'item est "highlighted" mais PAS survolé, on cache la barre */
header .menu-item-category-15 > a.elementor-item.highlighted:not(:hover)::before,
header .menu-item-category-15 > a.elementor-item.highlighted:not(:hover)::after {
    transform: scaleX(0) !important;
    opacity: 0 !important;
}

/* Pièces détachées : corriger la couleur bloquée */
header .menu-item-category-15 > a.elementor-item.highlighted:not(:hover) {
    color: #2D495F !important; /* couleur normale */
}






/************************************/

/************************************/



/* ajoute un espace au dessus de produits associés*/
.product-accessories {
    margin-top: 40px;
}


.product-detachees-link {
    text-align: right;
    margin-bottom: 15px;
}

.product-detachees-link a,
.product-detachees-link a:visited,
.product-detachees-link a:focus,
.product-detachees-link a:active {
    display: inline-block;
    padding: 8px 16px;
    background-color: #2D495F;   /* bleu du site */
    color: #fff !important;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    text-decoration: none !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    transition: background-color 0.2s ease-in-out;
    border:1px solid #F59D19;
}

.product-detachees-link a:hover {
    background-color: #1f3444;
    color: #fff !important;
}



/* back to top*/
#back-to-top {
    position: fixed;
    bottom: 15px;
    right: 30px;
    background-color: #2D495F; /* bleu du footer */
    color: white;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    font-size: 22px;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    z-index: 999;

    /* IMPORTANT : caché par défaut */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Quand on scrolle assez → on ajoute .show en JS */
#back-to-top.show {
    opacity: 1;
    visibility: visible;
}



#back-to-top:hover {
    background-color: #1f3444;
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
  #back-to-top {
    bottom: 15px; /* ajuste : 80 / 100 selon Axeptio */
  }
}


/*****responsive header******/


/* Mobile : le menu déroulé passe par-dessus le contenu */
@media (max-width: 767px) {

  /* Le widget burger sert de référence */
  .elementor-element-084714e.elementor-widget-nav-menu {
    position: relative !important;
    z-index: 1000;
  }

  /* Le bloc qui contient les liens du menu en mode déroulé */
  .elementor-element-084714e nav.elementor-nav--dropdown.elementor-nav__container {
    position: absolute !important;
    top: 100%;          /* juste sous le burger */
    left: 0;
    right: 0;
    z-index: 9999;      /* au-dessus du reste */
    margin: 0 !important;
  }

  /* Largeur interne sécurisée */
  .elementor-element-084714e nav.elementor-nav--dropdown.elementor-nav__container > .elementor-nav-menu {
    width: 100% !important;
  }
}

/* Mobile : n’afficher que les catégories de 1er niveau */
@media (max-width: 767px) {
  /* Masque les sous-menus dans le menu déroulant */
  .elementor-element-084714e nav.elementor-nav--dropdown .sub-menu {
    display: none !important;
  }

  /* Optionnel : enlever la petite flèche des éléments qui ont des enfants */
  .elementor-element-084714e nav.elementor-nav--dropdown .menu-item-has-children .sub-arrow {
    display: none !important;
  }
}


/* Mobile : mettre le menu burger à gauche et le logo à droite */
@media (max-width: 767px) {

  /* On active le mode flex sur la row */
  .elementor-element-11ad848 .elementor-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* BURGER en premier (à gauche) */
  .elementor-element-33e554b {
    order: 1 !important;
    width: 50% !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  /* LOGO ensuite (à droite) */
  .elementor-element-9eee4a4 {
    order: 2 !important;
    width: 50% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  /* RECHERCHE en dessous, en pleine largeur */
  .elementor-element-466a7da {
    order: 3 !important;
    width: 100% !important;
  }
}


/******** Responsive footer *******/


@media (max-width: 767px) {

  footer .elementor-heading-title.ce-display-large {
      font-size: 22px !important;
      line-height: 1.3 !important;
  }

  footer .elementor-widget-text-editor {
      font-size: 16px !important;
      line-height: 1.5 !important;
  }
}

/* Mobile : restructuration de la zone "Vous avez des questions ?" */
@media (max-width: 767px) {

  /* Les deux colonnes passent en pleine largeur */
  .elementor-element-521cd7bd,
  .elementor-element-5fae396d {
    width: 100% !important;
  }

  /* Texte sur une ligne propre + centré */
  .elementor-element-521cd7bd .elementor-widget-container {
    text-align: center !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
  }

  /* Le bouton "Formulaire de contact" prend toute la largeur */
  .elementor-element-5fae396d .elementor-widget-container {
    display: flex !important;
    justify-content: center !important;  /* centré (ou flex-start si tu veux à gauche) */
  }

  /* Le texte du bouton sur une seule ligne */
  .elementor-element-5fae396d .elementor-button {
    
  }
}




/* ===== Bas du footer : section "La qualité française" ===== */

/* Titres centrés dans cette section uniquement */
footer .elementor-element-528f6314 .elementor-widget-heading .elementor-heading-title {
  text-align: center !important;
}

/* Textes & liens centrés dans cette section uniquement */
footer .elementor-element-528f6314 .elementor-widget-text-editor,
footer .elementor-element-528f6314 .elementor-widget-text-editor p,
footer .elementor-element-528f6314 .elementor-widget-text-editor a,
footer .elementor-element-528f6314 .elementor-nav-menu a {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Séparateur entre les blocs du bas du footer (mobile uniquement) --- */
@media (max-width: 767px) {
  footer .elementor-element-528f6314 .elementor-column {
    position: relative;
    padding-top: 20px;
  }

  /* Ajoute une ligne au-dessus de chaque colonne SAUF la première */
  footer .elementor-element-528f6314 .elementor-column + .elementor-column::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;              /* longueur de la ligne */
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
  }

  /* Centrer tout le contenu du bas du footer */
footer .elementor-element-528f6314 {
  text-align: center !important;
}

/* Forcer les colonnes à se centrer visuellement */
footer .elementor-element-528f6314 .elementor-column,
footer .elementor-element-528f6314 .elementor-widget,
footer .elementor-element-528f6314 .elementor-widget-wrap {
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Centrer les menus */
footer .elementor-element-528f6314 .elementor-nav-menu a {
  text-align: center !important;
  justify-content: center !important;
}
}


/* Modale ajout rapide au panier*/
#blockcart-modal .product-name {
    color: #2D495F;
}


/******* Style partie tech fiche produit******/
.section-fiche-tech {
  font-size: 14px;
  line-height: 1.5;
  background-color:#F6EBD9;
}

/* Titres */
.section-fiche-tech h3 {
  color: #1f3444;
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 700;
}

/* Listes */
.section-fiche-tech  ul {
  list-style: disc;
  padding-left: 1.2em;
  margin: 0 0 16px 0;
}

/* Items */
.section-fiche-tech  li {
  color: #1f3444;
  margin: 2px 0;
}

/* Couleur et style des puces */
.section-fiche-tech  li::marker {
  color: #F59D19;
  font-weight: bold;
}


/***************** Fiche produit ******************/
/* Images responsive dans les tabs produit (Description / Détails / Documents) */


.product-images>li.thumb-container .thumb.selected, .product-images>li.thumb-container .thumb:hover {
    border: #F59D19 3px solid;
}

@media (max-width: 768px) {


.product-cover{
  padding-left:15px !important;
}


#main .images-container .js-qv-mask{
 padding-left:15px !important;

}


#configurator_block .btn, #configurator_block .btn-primary {
  width: 100% !important; 
}
}

/* Produits associés : 2 par ligne en mobile */
@media (max-width: 768px) {
  #pieces-detachees .products.row {
    display: flex;
    flex-wrap: wrap;

  }

  #pieces-detachees .products.row > .js-product.product {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }

  .product-accessories{
    padding-left:20px;
  }

   #kit-contains .products.row {
    display: flex;
    flex-wrap: wrap;

  }

  #kit-contains .products.row > .js-product.product {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }

  .product-accessories{
    padding-left:20px;
  }
}

#wrapper{
  padding-left:7px;
}

@media (max-width: 767px) {
  #wrapper{
  padding-left:16px;
}
}

@media (max-width: 767px) {
    #category #left-column #search_filters {

        padding-left: 20px;
        padding-right: 20px;
    }

    .row .sort-by-row{
      padding-left:22px;
    }
}

/* Popovers "INFO" du configurateur : taille max + images responsive */
.popover {
  max-width: 320px; /* ajuste si tu veux (280/320/360) */
}

#configurator_block .popover img,
.popover img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* RGPD - boutons export : permettre le retour à la ligne */
#exportDataToCsv,
#exportDataToPdf {
  white-space: normal !important;
  text-align: center;
  line-height: 1.2;
  height: auto;
}

/* Optionnel : éviter que le bouton devienne trop étroit */
#exportDataToCsv,
#exportDataToPdf {
  display: block;          /* sur mobile c’est souvent mieux */
  
}

@media (max-width: 720px) {
  #exportDataToCsv,
  #exportDataToPdf {
    display: block;
    width: 100%;
  }

   #exportDataToCsv {
    margin-bottom: 10px;
  }
}

/* Nom du produit */
#product h1[itemprop="name"] {
  font-size: 2rem;              /* + visible */
  font-weight: 700;             /* plus fort */
  color: #2D495F;               /* cohérent avec ta charte */
  margin-bottom: 10px;
  line-height: 1.2;
}

/* Mobile : encore un peu plus lisible */
@media (max-width: 768px) {
  #product h1[itemprop="name"] {
    font-size: 1.6rem;
    text-align: left;           /* ou center si tu préfères */
  }
}

#product h1[itemprop="name"] {
  position: relative;
  padding-bottom: 8px;
}

#product h1[itemprop="name"]::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #F59D19; /* ton orange */
  margin-top: 6px;
}

#product h1[itemprop="name"] {
  letter-spacing: 0.5px;
  text-transform: uppercase;
}


.price-tax-label{
  color:#2D495F;
  margin-left: .25rem;
  font-weight: 600;
  font-size: .9em;
}

/* Page cms toiles*/
.toile-no-result {
  display: none;
  margin: 0.75rem 0 1.25rem;
  padding: 0.75rem 1rem;
  background: #f5f7fa;
  border-left: 3px solid #2D495F;
  color: #2D495F;
  font-size: 0.9rem;
  border-radius: 4px;
}


/* panier pop up side*/

.elementor-button--view-cart{
  background-color: #2D495F !important;
  color: #FFFFFF !important;
  border:1px solid transparent !important;
}

.elementor-button--view-cart:hover{
  color: #F59D19 !important;
  border:1px solid #F59D19 !important;
}


.elementor-button--checkout{
  background-color: #F59D19 !important;
  color: #2D495F !important;
   border:1px solid transparent !important;
}

.elementor-button--checkout:hover{
  border:1px solid #2D495F !important;
}


@media (max-width: 768px) {
  .elementor-cart__main .elementor-cart__title{
    margin: 0 !important;
    padding: 20px 56px 14px 16px !important; /* haut droite bas gauche */
    line-height: 1.2;
    text-align: left !important;
  }
}



/**************************** Liste produits : bloc texte de hauteur uniforme */
#products .product-miniature .product-description {
  display: flex;
  flex-direction: column;
}


#products .product-miniature .product-title {
  min-height: 2.6em; 
  line-height: 1.3;
  overflow: hidden;
}

#products .product-miniature .product-price-and-shipping {
  margin-top: auto;
}

/* Forcer le titre à casser plus tôt (sans changer la largeur de la card) */
#products .product-miniature .product-title a{
  display: inline-block;
  max-width: 180px;     /* ajuste: 180 / 200 / 220 */
  white-space: normal;
  word-break: normal;
}

/* Miniatures catalogue : "À partir de" discret + prix mis en valeur */
#products .product-miniature .from-price{
  display: inline-block;
  margin-right: .35rem;
  font-size: .85em;
  font-weight: 500;
  color: #2D495F;
  opacity: .65;
  letter-spacing: .02em;
  text-transform: lowercase; /* garde "à partir de" sobre */
  white-space: nowrap;
}

#products .product-miniature .product-price-and-shipping{
  margin-top: auto;
  text-align: center; /* comme sur ta capture */
}

#products .product-miniature .product-price-and-shipping .price,
#products .product-miniature .product-price-and-shipping .product-price{
  font-size: 1.15rem;       /* un peu plus gros */
  font-weight: 800;         /* plus “premium” */
  color: #2D495F;
  line-height: 1.2;
  display: inline-block;
}



/***************************************************/

/****** Configurateur page produit  **************/
#configurator_block .info-step p
 {
    color: #F59D19; 
    background-color: #2D495F;
    padding-left:3px;
}

#configurator_block .step_group.info-on-this-step {
    border-color: #2D495F;
}

#configurator_block .step_options > .row {
  display: flex;
  flex-direction: column;
}

#configurator_block .step_options > .row > [class*="col-"] {
  width: 100%;
}


.label .label-default .amount:hover{
    color:#F59D19;
}


/*Messages sur les pièces par paires*/
.pair-advice{
  background: #f6ebd9;
  border: 1px solid rgba(45,73,95,.25); /* #2d495f */
  border-left: 6px solid #2d495f;
  border-radius: 8px;
  padding: 12px 14px;
  color: #2d495f;
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 16px;
}

.pair-advice__label{
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f59d19;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.85rem;
}

.pair-advice strong{
  font-weight: 700;
}

/*tableau prix spécifique page produit*/
.quantity-discount-box{
  border: 1px solid rgba(45,73,95,.25);
  background: rgba(45,73,95,.05);
  padding: 12px 14px;
  border-radius: 10px;
  color: #2D495F;
  line-height: 1.35;
  font-size: .95rem;
  margin-top: 10px;
}

.quantity-discount-box strong{
  font-weight: 700;
  margin-right: .35rem;
}


/* Paiements logos*/

/* Masquer le badge/logo PayPal injecté par le SDK (celui qui casse l'alignement) */
.payment-option.paypal-option span[paypal-mark-container]{
  display: none !important;
}

/* --- PayPal : forcer l'info secondaire sur une nouvelle ligne --- */

/* Le label reste simple */
.payment-option.paypal-option label{
  display: block !important;
}

/* 1ère ligne : texte principal */
.payment-option.paypal-option label > span{
  display: inline-block;
  vertical-align: middle;
}

/* 2ème ligne : phrase + logos */
.payment-option.paypal-option .paypal-card-badges{
  display: block !important;
  margin-top: 4px !important;
  margin-left: 0 !important;
}

/* Contenu de la 2ème ligne */
.payment-option.paypal-option .paypal-card-badges > *{
  display: inline-block;
  vertical-align: middle;
}

/* Ta phrase */
.payment-option.paypal-option .paypal-card-text{
  margin-right: 6px;
  font-size: 13px;
  color: #666;
}

/* Logos */
.payment-option.paypal-option .paypal-card-badges img{
  height: 18px;
  width: auto;
  margin-right: 6px;
}

/* Dernier logo : pas de marge */
.payment-option.paypal-option .paypal-card-badges img:last-child{
  margin-right: 0;
}


body#checkout #footer {
  padding:0 !important;
}


/*Liens dans le panier*/

.product-line-grid-body>.product-line-info>.label {
  color: #2D495F;
 
}


.product-line-grid-body>.product-line-info>.label:hover{
  text-decoration: underline !important;
  color: #65768B !important;
 
}

#configurator_block h1 span {
  display:none;
}


#configurator_block sup {
  display:none;
}

#configurator_block .option_block.colortexture .option_block_content .label {
  padding-right:1px;
  color:black !important;
}

.product-features>dl.data-sheet dd.value, .product-features>dl.data-sheet dt.name
 {
  text-transform:none;
 }


@media (max-width: 768px){

  /* Le bon conteneur à faire scroller */
  .elementor-widget-text-editor .elementor-widget-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block;
  }

  /* Le tableau descendant (pas enfant direct) */
  .elementor-widget-text-editor .elementor-widget-container table {
    width: max-content !important;
    min-width: 900px !important;
  }

  /* Empêche la compression des cellules */
  .elementor-widget-text-editor th,
  .elementor-widget-text-editor td {
    white-space: nowrap;
  }

  /* Vos règles existantes */
  #order-items .order-line {
    padding-left: 20px;
  }

  .page-order-detail .order-items .order-item .desc,
  .page-order-detail .order-items .order-item .qty {
    padding-left: 11px;
  }
}


/* Bloc téléchargements produit */
.product-attachments {
  margin-top: 2rem;
}

.product-attachments .attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #e5e5e5;
  gap: 16px;
}

/* Nom du fichier */
.product-attachments .attachment h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.product-attachments .attachment h4 a {
  color: #2d495f;
  text-decoration: none;
}

.product-attachments .attachment h4 a:hover {
  text-decoration: underline;
}

/* Lien téléchargement */
.product-attachments .attachment > a {
  white-space: nowrap;
  font-size: 14px;
  color: #f59d19;
  font-weight: 500;
  text-decoration: none;
}

.product-attachments .attachment > a:hover {
  text-decoration: underline;
}



/*recherche dans configurateur attributs*/
.searchable-no-result {
  padding: 6px 8px;
  color: #999;
  font-style: italic;
  cursor: default;
}



/* === Encart information clients existants (page connexion) === */
.mitjavila-info-box{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 16px;
  margin: 20px 0 20px 0;
  background:#ffffff;
  border:2px solid #d8e0ea;
  border-left:6px solid #f59d19;
  border-radius:14px;
  box-shadow:0 8px 22px rgba(45,73,95,.06);
}

.mitjavila-info-icon{
  flex:0 0 auto;
  width:26px;
  height:26px;
  border-radius:8px;
  background:#f59d19;
  color:#ffffff;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:2px;
}

.mitjavila-info-title{
  margin:0 0 4px 0;
  font-size:15px;
  font-weight:700;
  color:#2d495f;
}

.mitjavila-info-text{
  margin:0;
  font-size:13px;
  color:#65768b;
  line-height:1.55;
}

/* page RAL*/
.ral-swatch-page{padding:40px 0}
.ral-title{text-align:center;margin:0 0 18px}

.ral-toolbar{
  display:flex; flex-direction:column; gap:10px;
  align-items:center; margin:0 0 18px;
}

.ral-search{
  width:min(720px, 100%);
  border:1px solid #d9dee5;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
}
.ral-search:focus{border-color:#2d495f}

.ral-pills{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
}
.ral-pill{
  border:1px solid #2d495f; background:#fff; color:#2d495f;
  padding:6px 10px; border-radius:999px; cursor:pointer;
  font-size:13px; line-height:1;
}
.ral-pill.is-active, .ral-pill:hover{background:#2d495f;color:#fff}

.ral-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:10px 14px;
}

.ral-item{
  display:flex; align-items:flex-start; gap:10px;
  border:1px solid #e6e6e6; background:#fff;
  border-radius:10px; padding:9px 10px;
}

.ral-chip{
  width:18px; height:18px; border-radius:4px;
  border:1px solid rgba(0,0,0,.18);
  flex:0 0 18px;
  margin-top:2px;
}

.ral-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.ral-top{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.ral-code{font-weight:700; color:#2d495f; font-size:13px; line-height:1.1}
.ral-name{font-size:13px; color:#333; line-height:1.2}
.ral-meta{font-size:12px; color:#777; line-height:1.2}
.ral-empty{margin-top:12px;text-align:center;color:#777}

.ral-name{font-size:13px;color:#333}
.ral-top{display:flex;gap:8px;flex-wrap:wrap}


.ral-section {
  margin-bottom: 40px;
}

.ral-section h2 {
  font-size: 18px;
  margin-bottom: 15px;
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 6px;
  color: #2d495f;
}

.ral-text {
  display: flex;
  align-items: center;
}

/* Alignement pastille + texte (force override thème) */
.ral-section .ral-list .ral-item{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.ral-section .ral-list .ral-chip{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:4px !important;
  line-height:18px !important;
  vertical-align:middle !important;
}

.ral-section .ral-list .ral-text,
.ral-section .ral-list .ral-top{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap;
}

.ral-section .ral-list .ral-code,
.ral-section .ral-list .ral-name,
.ral-section .ral-list .ral-meta{
  line-height:18px !important; /* même hauteur que la pastille */
}



/* ── Bouton "Voir le panier" ── */
.elementor-cart__footer-buttons .elementor-button--cart {
  background-color: #24495f !important;
  border: 1px solid #24495f !important;
  color: #ffffff !important;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.elementor-cart__footer-buttons .elementor-button--cart:hover {
  background-color: #1a3648 !important;
  border-color: #1a3648 !important;
  color: #ffffff !important;
}

/* ── Bouton "Commander" ── */
.elementor-cart__footer-buttons .elementor-button--checkout {
  background-color: #f5a410 !important;
  border-color: #f5a410 !important;
  color: #ffffff !important;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.elementor-cart__footer-buttons .elementor-button--checkout:hover {
  background-color: #d48c00 !important;
  border-color: #d48c00 !important;
  color: #ffffff !important;
}

/* ── État focus (accessibilité) ── */
.elementor-cart__footer-buttons .elementor-button--cart:focus,
.elementor-cart__footer-buttons .elementor-button--checkout:focus {
  outline: 2px solid #f5a410 !important;
  outline-offset: 2px !important;
}


/* #configurator_block .option_group .label{
color:white !important;
} */

.group-discount-header{

  color:white !important;

}


@media (max-width: 768px) {

  /* Dropdown menu utilisateur au-dessus du menu burger */
  ul.sub-menu.elementor-nav--dropdown.sm-nowrap {
    z-index: 99999 !important;
  }

  /* Si le conteneur parent a aussi besoin d'être remonté */
  .elementor-nav__container {
    z-index: 99998 !important;
  }

    ul.sub-menu.elementor-nav--dropdown.sm-nowrap {
    z-index: 99999 !important;
    position: absolute !important;
  }
}


body#registration #field-company,
body#registration #field-siret {
  border: none;
}

label[for="field-company"],
label[for="field-siret"] {
  font-weight: 700;
}

body#registration .pro-info-banner {
  background-color: #1a3648;
  color: #ffffff;
  padding: 10px 16px;
  font-size: 0.85rem;
  border-radius: 4px 4px 0 0;
  margin-bottom: 0;
  margin-left: -15px;
  margin-right: -15px;
}

body#registration .form-group:has(#field-company) {
  background-color: #f0f7ff;
  padding: 12px 16px 4px 16px;
  margin-bottom: 0;
  border-top: none;
  border-left: 3px solid #1a3648;
  border-right: 3px solid #1a3648;
  border-radius: 0;
}

body#registration .form-group:has(#field-siret) {
  background-color: #f0f7ff;
  padding: 4px 16px 12px 16px;
  margin-top: 0;
  border-top: none;
  border-bottom: 3px solid #1a3648;
  border-left: 3px solid #1a3648;
  border-right: 3px solid #1a3648;
  border-radius: 0 0 4px 4px;
}

/******************************************/

/* ============================================================
   CONFIGURATOR PREVIEW - CSS safe (ne touche pas aux classes génériques)
   Utilise uniquement des IDs et sélecteurs très spécifiques
   ============================================================ */

/* === LAYOUT GÉNÉRAL === */
#configurator_preview > .row {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: center;
}

#configurator_preview > .row > .col-lg-6:first-child {
  flex: 0 0 110px;
  width: 110px;
  max-width: 110px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#configurator_preview_buttons {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* === TITRE === */
#configurator_preview .page-subheading {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}

/* === CERCLE DE PROGRESSION === */
#configurator-progress {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

#configurator-progress canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#configurator-progress strong {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #1e3a6e;
}

/* === PRIX === */
#dl-final-price-tax-excl,
#dl-final-price-tax-incl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 10px;
  margin-bottom: 0;
}

#dl-final-price-tax-excl dt,
#dl-final-price-tax-incl dt {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  line-height: 1.3;
}

#dl-final-price-tax-excl #final_price,
#dl-final-price-tax-incl #final_price {
  font-size: 22px;
  font-weight: 800;
  color: #1e3a6e;
  white-space: nowrap;
  margin: 0;
  letter-spacing: -0.5px;
}

/* === QUANTITÉ === */
#quantity-configurator-label {
  display: inline-block;
  font-size: 13px;
  color: #555;
  margin-right: 8px;
  vertical-align: middle;
}

#configurator_preview .configurator-qty {
  display: inline-block;
  vertical-align: middle;
}

#configurator_preview .configurator-qty .form-group {
  margin-bottom: 0;
}

#quantity-configurator {
  width: 68px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 14px;
}

/* === ESPACEMENT BOUTONS === */
#configurator_preview_buttons .configurator-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* === BOUTON AJOUTER AU PANIER === */
#add_configurator_to_cart {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  border-radius: 4px;
}

/* === BOUTON AJOUTER AU DEVIS === */
#add-to-quote-tpl {
  margin-top: 0;
}

#add-to-quote-tpl br {
  display: none;
}

#openModalAddToQuote {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  border-radius: 4px;
}

/* === BLOC CONNEXION === */
#connexion-devis-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f7f9fc;
  border: 1px solid #e0e8f0;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
}

#connexion-devis-block h3 {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.4;
  flex: 1;
}

#connexion-devis-block a {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #1e3a6e;
  text-decoration: none;
  flex-shrink: 0;
}

#connexion-devis-block a:hover span {
  text-decoration: underline;
}

#connexion-devis-block .material-icons {
  font-size: 20px;
}

/* === MOBILE === */
@media (max-width: 768px) {
  #configurator_preview > .row {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Cacher la colonne gauche (cercle) sur mobile */
  #configurator_preview > .row > .col-lg-6:first-child {
    display: none;
  }

  /* Colonne droite pleine largeur */
  #configurator_preview_buttons {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Prix centré sur mobile */
  #dl-final-price-tax-excl,
  #dl-final-price-tax-incl {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding-bottom: 16px;
  }

  #dl-final-price-tax-excl dt,
  #dl-final-price-tax-incl dt {
    font-size: 13px;
    color: #666;
  }

  #dl-final-price-tax-excl #final_price,
  #dl-final-price-tax-incl #final_price {
    font-size: 30px;
    font-weight: 800;
    color: #1e3a6e;
  }

  #add_configurator_to_cart {
    width: 100%;
  }

  #openModalAddToQuote {
    width: 100%;
  }
}