.product_meta .tagged_as{display:none;}
.product_meta .sku_wrapper{display:none;}

/* ===== CADRE DE FILTRES PAR PILULES (Maintenance industrielle + Rubans) =====
   Regle globale (audit 13/08) : etait auparavant injectee seulement sur les archives
   Maintenance industrielle (eticzen-maintenance-filters.php), donc absente sur la page
   Rubans (4800) qui utilise le meme markup via une autre fonction — filtres non stylés. */
.eticzen-maint-filters{
  background:var(--gray-bg,#f7f7f7);
  border:1px solid var(--border-strong,#ddd);
  padding:18px 22px;
  margin-bottom:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  /* Audit 28/08 : le max-width:760px pose (audit 14/08) laissait un vide flagrant a
     droite du bloc sur les pages a colonne de contenu large (ex. Rubans transfert
     thermique) -- redemande explicitement en pleine largeur, revert du resserrement. */
  max-width:100%;
}
/* Grille 2-3 colonnes (au lieu d'un empilement vertical sur une seule colonne, qui
   laissait la largeur du bloc inexploitée et donnait un rendu déséquilibré/décalé —
   ex. "Diamètre mandrin" sur Rubans) : chaque filtre devient une cellule de grille,
   label au-dessus du select plutôt qu'à côté (plus compact, s'aligne proprement en
   colonnes). auto-fit calcule lui-même 2 ou 3 colonnes selon la largeur disponible. */
.eticzen-maint-filters .eticzen-filter-form{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:16px 20px;
  align-items:end;
}
.eticzen-maint-filters .eticzen-filter-group{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.eticzen-maint-filters .eticzen-filter-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; min-width:0; padding-top:0; }
.eticzen-maint-filters .eticzen-filter-input{
  width:100%; min-width:0; padding:7px 10px;
  border:1px solid #ccc; font-size:13px; box-sizing:border-box;
}
.eticzen-maint-filters .eticzen-filter-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.eticzen-maint-filters .eticzen-checkbox-pill{
  display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border:1px solid #ccc;
  border-radius:14px; font-size:12px; cursor:pointer;
}
.eticzen-maint-filters .eticzen-checkbox-pill input{ margin:0; }
/* Listes deroulantes (audit 13/08 §6.2 : "privilegier des listes deroulantes plutot
   qu'une succession de cases a cocher") — remplace les pilules a cocher, reutilise sur
   Rubans/Etiquettes/Maintenance pour l'uniformite demandee en objectif general. */
.eticzen-maint-filters .eticzen-filter-select{
  width:100%; min-width:0; padding:8px 10px; border:1px solid #ccc; font-size:13px;
  font-family:inherit; background:#fff; color:var(--black); box-sizing:border-box;
}
/* Ces indices reprenaient le nom du terme technique tel quel sous le menu déroulant
   (impossible d'y mettre une infobulle HTML dans une <option>) — sans habillage, ça
   ressemble à un libellé dupliqué plutôt qu'à un lexique (audit 20/08). Un style de
   petite pastille clarifie qu'il s'agit d'une aide, pas d'une répétition. */
/* Correctif 28/08 : quand un groupe a plusieurs termes techniques (ex. "Near Edge" ET
   "Tête plate" dans Technologie), chaque pastille etait un item de flex-column separe et
   s'empilait donc verticalement, juste au-dessus/en-dessous de sa voisine -- la bulle de
   definition (position:absolute, bottom:130%) d'une pastille survolee se retrouvait
   plaquee exactement sur la pastille voisine, donnant l'impression que les deux bulles
   s'ouvraient en meme temps et rendant "Tête plate" illisible seule. Les pastilles sont
   maintenant les enfants d'une rangee flex-wrap unique (.eticzen-filter-hint) au lieu
   d'etre chacune leur propre ligne. */
.eticzen-maint-filters .eticzen-filter-hint{
  margin:2px 0 0; display:flex; flex-wrap:wrap; gap:6px;
}
.eticzen-maint-filters .eticzen-filter-hint-item{
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:400; text-transform:none; letter-spacing:normal;
  color:var(--gray-text,#666); background:var(--gray-bg,#f0efe8);
  border:1px solid var(--border,#e4e4e4); padding:2px 8px 2px 6px; border-radius:10px;
}
.eticzen-maint-filters .eticzen-filter-apply{
  grid-column:1/-1; justify-self:start; background:var(--red,#C81E2C); color:#fff; border:none;
  padding:8px 18px; font-size:12px; font-weight:700; text-transform:uppercase; cursor:pointer;
}
.eticzen-maint-filters .eticzen-filter-reset{ grid-column:1/-1; justify-self:start; font-size:12px; color:var(--gray-text,#666); margin-top:-6px; }
.eticzen-maint-no-results{
  text-align:center; max-width:560px; margin:32px auto; padding:28px 24px;
  border:1px solid var(--border-strong,#ddd); background:var(--gray-bg,#f7f7f7);
}
.eticzen-maint-no-results-title{ font-weight:700; font-size:16px; margin-bottom:8px; }
.eticzen-maint-no-results .btn{ display:inline-block; margin-top:16px; }

.eticzen-preloader{position:fixed;inset:0;z-index:9999;background:#fff;display:flex;align-items:center;justify-content:center;transition:opacity .4s ease;}
.eticzen-preloader img{width:280px;max-width:60vw;height:auto;animation:eticzen-pulse 1.4s ease-in-out infinite;}
.eticzen-preloader.is-hidden{opacity:0;pointer-events:none;}
@keyframes eticzen-pulse{0%,100%{opacity:1;}50%{opacity:.5;}}

:root{
  --red:#C81E2C;
  --red-light:#FBD3D6;
  --black:#1A1A1A;
  --gray-bg:#F4F4F4;
  --gray-text:#6B6B6B;
  --gray-muted:#8A8A8A;
  --border:#E4E4E4;
  --border-strong:#D8D8D8;
}

body, .entry-content, p, li{
  font-family:'IBM Plex Sans',sans-serif !important;
  color:var(--black);
}
h1,h2,h3,h4,h5,h6,.entry-title,.site-title,.main-title{
  font-family:'IBM Plex Sans',sans-serif !important;
  font-weight:600;
  letter-spacing:-0.5px;
  color:var(--black);
}
.mono{font-family:'IBM Plex Mono',monospace;}

a{color:var(--red);}
a:hover,a:focus,a:active{color:var(--black);}

/* ===== ICONES DE MENU (reprise du header de l'ancien site) ===== */
.eticzen-menu-icon{width:10px;height:10px;margin-right:3px;vertical-align:-1px;flex-shrink:0;color:var(--gray-text);}
.main-navigation .main-nav ul li a{display:inline-flex;align-items:center;}
.main-navigation .main-nav ul li a:hover .eticzen-menu-icon{color:var(--red);}
.dropdown-menu-toggle{width:8px !important;height:8px !important;padding:0 !important;margin-left:3px !important;}
.dropdown-menu-toggle .gp-icon{width:8px !important;height:8px !important;}
.dropdown-menu-toggle svg{width:8px !important;height:8px !important;}

/* ===== HEADER (GeneratePress) ===== */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--black);
}

/* Header sur une seule ligne (audit 11/08 §2) : GeneratePress place par défaut le logo
   et le menu sur deux rangées empilées (.inside-header puis #site-navigation en
   siblings). On les met côte à côte en une seule ligne au-delà du breakpoint mobile,
   sans toucher au comportement mobile (menu hamburger) qui reste intact en dessous. */
@media (min-width:769px){
  .site-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
    padding:0 24px;
  }
  .site-header .inside-header.grid-container{padding:8px 0;max-width:none;width:auto;}
  .site-header #mobile-menu-control-wrapper{display:none;}
  .site-header #site-navigation{width:auto;flex-shrink:0;}
  .site-header #site-navigation .inside-navigation.grid-container{padding:0;max-width:none;width:auto;}
}
.main-navigation, .main-navigation ul ul{background:#fff;}
.main-navigation .main-nav ul li a{
  font-size:12px;
  letter-spacing:0.1px;
  text-transform:uppercase;
  color:var(--black);
  padding-top:12px;
  padding-bottom:12px;
  padding-left:10px !important;
  line-height:1 !important;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a{color:var(--red) !important;}
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a,
.main-navigation .main-nav ul li.current-menu-parent > a,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li.current_page_parent > a,
.main-navigation .main-nav ul li.current_page_ancestor > a{color:var(--red) !important;}

/* Bouton CTA "Demander un devis" dans le header (dernier element du menu) */
#primary-menu > li:last-child > a{
  background:var(--black);
  color:#fff !important;
  padding:10px 12px !important;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.5px;
  transition:background .15s;
}
#primary-menu > li:last-child > a:hover{background:var(--red) !important;}
.site-branding{display:none;} /* le logo image suffit, evite le doublon logo+texte */

/* Logo redimensionne : l'image source est enorme (320x112), ce qui ecrasait le menu sur 2 lignes et gonflait la hauteur du header */
.site-logo{display:flex;align-items:center;}
.site-logo img{
  max-height:52px !important;
  width:auto !important;
  height:auto !important;
}

/* ===== BARRE DE CONTACT ROUGE (reprise du header de l'ancien site, audit 13/08) =====
   Habillage visuel uniquement : bande rouge mail/tel au-dessus du header blanc existant
   (logo + menu inchangés, cf. §2 "header sur une seule ligne"). Injectée via le hook
   GeneratePress generate_before_header (eticzen-header-topbar.php). */
#eticzen-topbar{background:var(--red);}
#eticzen-topbar-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:flex-end;gap:22px;
  padding:7px 24px;
}
.eticzen-topbar-link{
  display:inline-flex;align-items:center;gap:6px;
  color:#fff !important;text-decoration:none;
  font-size:12px;font-weight:600;letter-spacing:.2px;
}
.eticzen-topbar-link:hover{text-decoration:underline;}
.eticzen-topbar-link svg{width:14px;height:14px;flex-shrink:0;}
@media (max-width:768px){
  #eticzen-topbar-inner{justify-content:center;flex-wrap:wrap;gap:14px;padding:7px 12px;}
  .eticzen-topbar-link{font-size:11px;}
}

/* ===== LARGEUR ET CENTRAGE GENERAL (toutes les pages) ===== */
/* Le theme reservait une colonne "sidebar" vide a droite sur chaque page : on repasse en pleine largeur, centre a 1200px comme l'accueil */
.site-content .content-area,
body.right-sidebar .content-area,
body.left-sidebar .content-area{
  width:100% !important;
  float:none !important;
}
.sidebar.widget-area,.inside-right-sidebar,.inside-left-sidebar{display:none !important;}

/* ===== FOOTER : taille de police des liens/textes (largeur du footer inchangee) ===== */
.footer-widgets, .footer-widgets p, .footer-widgets li, .footer-widgets a{
  font-size:16px;
  line-height:1.7;
}
.footer-widgets strong{font-size:17px;}
.site-content .grid-container,
.entry-content,
.page-header,
.woocommerce-products-header{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
body{background:#fff;}

/* ===== CATEGORIES PRODUIT : produits en premier, texte descriptif long en dessous ===== */
/* Le bloc titre+description (tres riche en texte pour le SEO) faisait descendre les produits
   tres bas dans la page. Le contenu textuel reste present et indexable pour les moteurs de
   recherche (qui lisent l'ensemble du HTML quel que soit l'ordre visuel) ; seul l'ordre
   d'affichage change pour presenter les produits en priorite. */
body.tax-product_cat .entry-content,
body.post-type-archive-product .entry-content{
  display:flex;
  flex-direction:column;
}
body.tax-product_cat .entry-content > .woocommerce-breadcrumb,
body.post-type-archive-product .entry-content > .woocommerce-breadcrumb{order:1;}
body.tax-product_cat .entry-content > .woocommerce-notices-wrapper,
body.tax-product_cat .entry-content > .woocommerce-result-count,
body.tax-product_cat .entry-content > .woocommerce-ordering,
body.tax-product_cat .entry-content > .eticzen-search-filters,
body.post-type-archive-product .entry-content > .woocommerce-notices-wrapper,
body.post-type-archive-product .entry-content > .woocommerce-result-count,
body.post-type-archive-product .entry-content > .woocommerce-ordering,
body.post-type-archive-product .entry-content > .eticzen-search-filters{order:2;}
body.tax-product_cat .entry-content > ul.products,
body.post-type-archive-product .entry-content > ul.products{order:3;}
body.tax-product_cat .entry-content > .woocommerce-pagination,
body.post-type-archive-product .entry-content > .woocommerce-pagination{order:4;}
body.tax-product_cat .entry-content > .woocommerce-products-header,
body.post-type-archive-product .entry-content > .woocommerce-products-header{
  order:5;
  margin-top:40px;
  padding-top:32px;
  border-top:0.5px solid var(--border);
}
/* Correctif 28/08 : le bloc "vous ne trouvez pas votre X ?" (.eticzen-custom-card,
   utilise sur toutes les pages categorie) n'avait aucune regle d'ordre et retombait
   donc a order:0 par defaut -- il remontait tout en haut, avant meme les filtres,
   au lieu de rester apres la liste produit + pagination comme prevu. */
body.tax-product_cat .entry-content > .eticzen-custom-card,
body.post-type-archive-product .entry-content > .eticzen-custom-card{order:6;}

/* ===== UNIFORMISATION DES CARTES PRODUIT (audit 11/08 §5), site-wide =====
   Deux problèmes cumulés avant ce correctif :
   1) Le bouton "Ajouter au devis" se retrouvait a des hauteurs differentes selon la
      longueur du titre de chaque fiche (deja corrige par le flex-grow ci-dessous).
   2) Les images produit n'avaient AUCUNE contrainte de ratio : une photo portrait
      (ex. 171x280) s'affichait ~397px de haut a cote d'une photo paysage (280x210)
      a ~182px de haut dans la MEME rangee — la rangee entiere gonflait a la hauteur
      de la plus grande image, et la rangee suivante (sans photo portrait) restait
      bien plus courte. Résultat : cartes et rangées très inégales sur tout le site.
   Fix : conteneur image à ratio fixe (carré) + object-fit:contain, identique partout,
   quelle que soit la taille/orientation de la photo source. */
ul.products{display:flex !important;flex-wrap:wrap;}
ul.products li.product{
  display:flex !important;
  flex-direction:column;
}
ul.products li.product a.woocommerce-loop-product__link{
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
ul.products li.product a.woocommerce-loop-product__link > img,
ul.products li.product > img{
  aspect-ratio:1/1;
  width:100%;
  height:auto;
  object-fit:contain;
  background:var(--gray-bg, #f4f4f4);
  padding:8px;
  box-sizing:border-box;
}
ul.products li.product .woocommerce-loop-product__title{
  flex-grow:1;
}
ul.products li.product .yith-ywraq-add-to-quote,
ul.products li.product .add_to_cart_button,
ul.products li.product .single_add_to_quote_button{
  margin-top:auto;
}

/* ===== TABLE D'EQUIVALENCE IMPRIMANTES ===== */
.eticzen-equiv-table{width:100%;border-collapse:collapse;font-size:13px;}
.eticzen-equiv-table th,.eticzen-equiv-table td{border:0.5px solid var(--border-strong);padding:10px 14px;text-align:left;}
.eticzen-equiv-table th{background:var(--gray-bg);font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:0.3px;color:var(--gray-text);}

/* ===== ACCES RAPIDES HOMEPAGE (pieces / consommables / imprimantes) ===== */
.eticzen-quick-tools{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:0.5px solid var(--border);}
.eticzen-quick-tool{padding:32px 40px;border-right:0.5px solid var(--border);}
.eticzen-quick-tool:last-child{border-right:none;}
.eticzen-quick-tool-title{font-size:16px;font-weight:600;margin-bottom:8px;}
.eticzen-quick-tool-desc{font-size:13px;color:var(--gray-text);line-height:1.5;margin-bottom:16px;min-height:40px;}
.eticzen-quick-tool-link{font-size:12px;font-weight:500;color:var(--red);}
.eticzen-quick-tool-links{display:flex;flex-wrap:wrap;gap:8px;}
.eticzen-quick-tool-links a{
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.3px;
  border:0.5px solid var(--border-strong);
  padding:6px 12px;
  color:var(--black);
}
.eticzen-quick-tool-links a:hover{border-color:var(--red);color:var(--red);}
@media (max-width:860px){
  .eticzen-quick-tools{grid-template-columns:1fr;}
  .eticzen-quick-tool{border-right:none;border-bottom:0.5px solid var(--border);}
}

/* ===== FOOTER ETOFFE : colonnes mirroir du menu principal ===== */
.footer-widgets .widget_custom_html ul{margin:0;padding:0;list-style:none;}
.footer-widgets .footer-submenu{margin-top:4px;margin-bottom:14px;padding-left:14px;}
.footer-widgets .footer-submenu li{font-size:14px;}
.footer-widgets .footer-submenu a{color:var(--black);text-decoration:none;}
.footer-widgets .footer-submenu a:hover{text-decoration:underline;}
.footer-widgets .footer-col-title{font-weight:700;display:block;margin-bottom:6px;color:var(--red) !important;}
.footer-widgets .footer-col-title a{color:var(--red) !important;}
.footer-widgets .textwidget > p:not(:first-child) .footer-col-title{margin-top:24px;}
.footer-widgets .eticzen-footer-contact{text-align:center;margin-top:14px;}

/* ===== HUB DEMANDER UN DEVIS : choix du type de besoin ===== */
.eticzen-hub-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:0.5px solid var(--border);border-left:0.5px solid var(--border);}
.eticzen-hub-card{display:block;padding:28px 26px;border-right:0.5px solid var(--border);border-bottom:0.5px solid var(--border);color:var(--black);transition:box-shadow .2s;}
.eticzen-hub-card:hover{box-shadow:inset 0 0 0 1px var(--red);}
.eticzen-hub-card:hover .eticzen-hub-card-title{color:var(--red);}
.eticzen-hub-card-title{font-size:16px;font-weight:600;margin-bottom:8px;}
.eticzen-hub-card-desc{font-size:13px;color:var(--gray-text);line-height:1.5;}
.eticzen-hub-card-wide{grid-column:1 / -1;}
.eticzen-hub-grid-4{grid-template-columns:1fr 1fr 1fr 1fr;}
@media (max-width:900px){ .eticzen-hub-grid-4{grid-template-columns:1fr 1fr;} }
@media (max-width:860px){
  .eticzen-hub-grid{grid-template-columns:1fr;}
  .eticzen-hub-card-wide{grid-column:span 1;}
}

/* ===== GUIDE DE CHOIX (rubans, consommables) ===== */
.eticzen-guide{max-width:760px;}
.eticzen-guide-intro{font-size:16px;line-height:1.6;color:var(--gray-text);margin-bottom:40px;}
.eticzen-guide-section{padding:28px 0;border-top:0.5px solid var(--border);}
.eticzen-guide-section:first-of-type{border-top:none;}
.eticzen-guide-section h2{font-size:19px;font-weight:600;margin-bottom:12px;}
.eticzen-guide-section p{font-size:14px;line-height:1.7;color:var(--gray-text);margin-bottom:10px;}
.eticzen-guide-note{font-style:italic;font-size:13px !important;}
.eticzen-guide-warning{border-left:2px solid var(--red);padding-left:14px;color:var(--black) !important;}
.eticzen-guide-compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:0.5px solid var(--border);margin:16px 0;}
.eticzen-guide-compare-card{padding:20px 22px;border-right:0.5px solid var(--border);}
.eticzen-guide-compare-card:last-child{border-right:none;}
.eticzen-guide-compare-title{font-size:15px;font-weight:600;margin-bottom:8px;}
.eticzen-guide-compare-card p{margin-bottom:0;}
@media (max-width:640px){
  .eticzen-guide-compare{grid-template-columns:1fr;}
  .eticzen-guide-compare-card{border-right:none;border-bottom:0.5px solid var(--border);}
  .eticzen-guide-compare-card:last-child{border-bottom:none;}
}
.eticzen-guide-table-wrap{overflow-x:auto;}
.eticzen-guide-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px;}
.eticzen-guide-table th,.eticzen-guide-table td{border:0.5px solid var(--border);padding:10px 12px;text-align:left;}
.eticzen-guide-table th{background:var(--gray-bg);text-transform:uppercase;font-size:11px;letter-spacing:0.3px;color:var(--gray-text);}
.eticzen-guide-cta{padding:36px 0 8px;text-align:center;}
.eticzen-guide-cta h2{font-size:20px;margin-bottom:8px;}
.eticzen-guide-cta p{font-size:14px;color:var(--gray-text);margin-bottom:20px;}

/* ===== ASSISTANT ETAPE PAR ETAPE (rubans, etc.) ===== */
.eticzen-wizard{max-width:760px;border:0.5px solid var(--border-strong);padding:32px;margin-bottom:44px;background:var(--gray-bg);}
.eticzen-wizard h2{font-size:20px;margin-bottom:8px;}
.eticzen-wizard-intro{font-size:14px;color:var(--gray-text);margin-bottom:24px;}
.eticzen-wizard-time{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;color:var(--red);border:0.5px solid var(--red-light);padding:5px 12px;margin-bottom:14px;}
.eticzen-delay-badge{display:inline-block;font-size:12px;font-weight:500;color:var(--gray-text);border:0.5px solid var(--border-strong);padding:6px 12px;margin:12px 0;}
.eticzen-wizard-box{background:#fff;border:0.5px solid var(--border);padding:24px;}
.eticzen-wizard-step{margin-bottom:20px;padding-bottom:20px;border-bottom:0.5px solid var(--border);}
.eticzen-wizard-step:last-of-type{border-bottom:none;}
.eticzen-wizard-label{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;margin-bottom:10px;color:var(--gray-text);}
.eticzen-wizard-options{display:flex;flex-wrap:wrap;gap:8px;}
.eticzen-wizard-btn{border:0.5px solid var(--border-strong);background:#fff;padding:9px 16px;font-size:13px;cursor:pointer;color:var(--black);}
.eticzen-wizard-btn:hover{border-color:var(--black);}
.eticzen-wizard-btn.active{background:var(--black);color:#fff;border-color:var(--black);}
.eticzen-wizard-btn-wide{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;text-align:left;text-decoration:none;padding:14px 18px;}
.eticzen-wizard-btn-wide strong{font-size:14px;color:var(--black);}
.eticzen-wizard-btn-wide span{font-size:12px;color:var(--gray-text);line-height:1.5;}
.eticzen-wizard-btn-wide:hover{border-color:var(--red);}
.eticzen-wizard-btn-wide:hover strong{color:var(--red);}
.eticzen-wizard-result{margin-top:8px;padding-top:20px;border-top:0.5px solid var(--border);text-align:center;}
.eticzen-wizard-result p{font-size:15px;margin-bottom:14px;}
.eticzen-wizard-recap{display:inline-block;text-align:left;background:var(--gray-bg);padding:16px 20px;font-size:13px;line-height:1.9;}
.eticzen-wizard-add-status{ font-size:13px; font-weight:600; margin-top:10px; max-width:360px; margin-left:auto; margin-right:auto; }
.eticzen-wizard-add-status.is-success{ color:#1a7a3c; }
.eticzen-wizard-add-status.is-error{ color:var(--red); }
.eticzen-wizard-text-input{width:100%;max-width:320px;padding:10px 14px;font-size:14px;border:0.5px solid var(--border-strong);margin-bottom:12px;font-family:inherit;}
.eticzen-wizard-text-input:focus{outline:none;border-color:var(--black);}
.eticzen-wizard-dims-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:400px;margin:0 auto;}
.eticzen-wizard-dims-row .eticzen-wizard-text-input{max-width:130px;margin-bottom:12px;}
.eticzen-wizard-next-btn{background:var(--black);color:#fff;border:none;padding:10px 20px;font-size:13px;font-weight:500;cursor:pointer;}
.eticzen-wizard-next-btn:hover{background:var(--red);}
.eticzen-wizard-restart{display:block;text-align:center;font-size:12px;margin-top:16px;color:var(--gray-text);}
.eticzen-wizard-restart:hover{color:var(--red);}

/* ===== MASQUAGE PRIX PRODUITS VARIABLES (site 100% devis) =====
   Les produits simples n'ont jamais de _price defini donc n'affichent naturellement rien.
   Les variations de produits variables doivent porter un prix placeholder (WooCommerce
   l'exige pour etre achetables) : on le masque visuellement ici. */
.single-product .summary .price,
.single-product .woocommerce-variation-price,
.single-product .woocommerce-variation-availability { display:none !important; }

/* ===== MOTEUR DE RECHERCHE DE REFERENCES ===== */
.eticzen-search-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}
.eticzen-search-filter{
  border:0.5px solid var(--border-strong);
  padding:8px 16px;
  font-size:12px;
  font-weight:500;
  color:var(--gray-text);
  text-transform:uppercase;
  letter-spacing:0.3px;
}
.eticzen-search-filter:hover{border-color:var(--black);color:var(--black);}
.eticzen-search-filter.active{background:var(--black);color:#fff !important;border-color:var(--black);}
.eticzen-search-filter-clear{color:var(--red);border-color:var(--red-light);}
.eticzen-search-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}
.eticzen-search-card{
  border:0.5px solid var(--border-strong);
  background:#fff;
  display:block;
  color:var(--black);
}
.eticzen-search-card:hover{border-color:var(--black);}
.eticzen-search-card-image{background:var(--gray-bg);height:150px;display:flex;align-items:center;justify-content:center;border-bottom:0.5px solid var(--border-strong);}
.eticzen-search-card-image img{max-width:100%;max-height:100%;object-fit:contain;}
/* Cartes catalogue (Rubans/Étiquettes/Équipements) sans photo produit : un rectangle
   gris totalement vide ressemble à un bug pour un visiteur (audit 20/08 — "perte de
   confiance"). Un repère texte discret suffit à signaler que c'est un état attendu.
   (:empty ne suffisait pas : le template laisse un texte blanc/retour à la ligne dans
   la div, ce qui l'empêche de matcher :empty — d'où ce span explicite à la place.) */
.eticzen-search-card-noimg{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--gray-muted,#8A8A8A);
}
.eticzen-search-card-body{padding:16px;}
.eticzen-search-card-title{font-size:14px;font-weight:500;margin-top:6px;line-height:1.4;}
.eticzen-search-empty{font-size:15px;color:var(--gray-text);max-width:560px;line-height:1.65;margin-bottom:24px;}

.eticzen-search-refine{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}
.eticzen-search-refine-input{border:0.5px solid var(--border-strong);padding:10px 14px;font-size:13px;flex:1;min-width:180px;}
.eticzen-search-refine-btn{border:0.5px solid var(--black);background:var(--black);color:#fff;padding:10px 18px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;}
.eticzen-search-refine-btn:hover{background:var(--red);border-color:var(--red);}
.eticzen-search-count{font-size:13px;color:var(--gray-text);margin-bottom:14px;}
.eticzen-search-pagination{display:flex;flex-wrap:wrap;gap:6px;margin-top:32px;}
.eticzen-search-page-link{border:0.5px solid var(--border-strong);padding:8px 14px;font-size:13px;color:var(--black);}
.eticzen-search-page-link:hover{border-color:var(--black);}
.eticzen-search-page-link.active{background:var(--black);color:#fff !important;border-color:var(--black);}
@media (max-width:600px){
  .eticzen-search-refine-input{min-width:100%;}
}

/* ===== PAGE DEVIS / CONTACT : intro + carte (evite l'effet "page nue" de l'ancien site) ===== */
.eticzen-quote-intro{
  font-size:15px;
  color:var(--gray-text);
  max-width:560px;
  line-height:1.65;
  margin:-8px 0 32px;
}
.eticzen-quote-card{
  border:0.5px solid var(--border-strong);
  max-width:640px;
  padding:32px;
  background:#fff;
}
.eticzen-quote-card .ywraq-form-table-wrapper{
  width:100% !important;
}
/* L'etat vide est desormais affiche (icone + bouton, meme traitement que le panneau
   lateral) plutot que masque — voir le bloc "PAGE DE DEVIS COMPLETE" plus bas, qui
   remplace cette ancienne regle. */
.eticzen-quote-card .yith-ywraq-mail-form-wrapper{
  width:100% !important;
}
/* Page 3551 uniquement : la carte generique ".eticzen-quote-card" (cadre + padding
   32px, utilisee aussi par des formulaires WPForms simples ailleurs sur le site)
   fait doublon avec le cadre + bandeau sombre du nouveau bloc "PAGE DE DEVIS COMPLETE"
   ci-dessous, qui a sa propre bordure — on retire celle de la carte generique ici pour
   eviter un effet "cadre dans un cadre". */
body.page-id-3551 .eticzen-quote-card{ border:none; padding:0; max-width:none; }
/* Bandeau titre sombre "2. Vos coordonnées" (texte pose par JS, cf. eticzen-devis-form-
   redesign.php) -- meme traitement que le bandeau "1. Votre selection" de la colonne
   produits, pour former les deux en-tetes numerotes cote a cote demandes le 31/08. */
.eticzen-quote-card .yith-ywraq-mail-form-wrapper h3{
  margin:0 0 20px; padding:16px 20px;
  background:var(--black); color:#fff;
  font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; font-weight:700;
  border-bottom:none;
}

/* ===== FORMULAIRES (devis YITH + contact WPForms) : alignement avec le design system ===== */
#yith-ywraq-default-form .form-row,
.wpforms-container .wpforms-field{
  margin-bottom:20px;
}
#yith-ywraq-default-form label,
.wpforms-container .wpforms-field-label{
  display:block;
  font-size:13px;
  font-weight:500;
  margin-bottom:6px;
  color:var(--black);
}
/* WooCommerce masque ".optional" par defaut (woocommerce.css) : on le reaffiche pour
   que "Message (facultatif)" soit visible, comme demande par le client le 13/08. */
#yith-ywraq-default-form label .optional{ display:inline !important; visibility:visible !important; }
#yith-ywraq-default-form label .required,
#yith-ywraq-default-form label .optional,
.wpforms-container .wpforms-required-label{
  color:var(--gray-muted);
  font-weight:400;
}
#yith-ywraq-default-form .input-text,
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container select,
.wpforms-container textarea{
  width:100%;
  border:0.5px solid var(--border-strong) !important;
  padding:12px 14px !important;
  font-size:14px !important;
  font-family:'IBM Plex Sans',sans-serif !important;
  color:var(--black) !important;
  background:#fff !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#yith-ywraq-default-form .input-text:focus,
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus{
  outline:none;
  border-color:var(--black) !important;
}
#yith-ywraq-default-form textarea.input-text,
.wpforms-container textarea{resize:vertical;}
#yith-ywraq-default-form .raq-send-request,
.wpforms-container button[type="submit"]{margin-top:8px;}

/* ===== BOUTONS ===== */
button, .btn, a.button, .wp-block-button__link, input[type="submit"]{
  font-size:12px;
  font-weight:500;
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding:14px 24px;
  border-radius:0 !important;
  background:var(--black);
  color:#fff;
  border:none;
  transition:opacity .15s;
}
button:hover, .btn:hover, a.button:hover, .wp-block-button__link:hover, input[type="submit"]:hover{
  opacity:0.85;
  background:var(--black);
  color:#fff;
}
.btn-red, .add-quote, .ywraq-button, .single_add_to_quote_button, a.add_to_cart_button, button.single_add_to_quote_button{
  background:var(--red) !important;
  color:#fff !important;
}

/* ===== ACCUEIL : masque le titre de page WordPress (le H1 vient du contenu) ===== */
.home .entry-header,.page-id-5625 .entry-header{display:none;}

/* ===== SECTION HOMEPAGE ===== */
.eticzen-home{max-width:1200px;margin:0 auto;background:#fff;}
.eticzen-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--red);letter-spacing:1px;margin-bottom:20px;text-transform:uppercase;}

.eticzen-hero{display:grid;grid-template-columns:1.3fr 1fr;border-bottom:0.5px solid var(--border);}
.eticzen-hero-left{padding:72px 48px 48px;border-right:0.5px solid var(--border);}
.eticzen-hero h1{font-size:44px;font-weight:600;line-height:1.15;letter-spacing:-1px;margin:0;}
.eticzen-hero h1 .accent{color:var(--red);}
.eticzen-hero-sub{font-size:15px;color:var(--gray-text);margin-top:22px;max-width:420px;line-height:1.65;}
.eticzen-hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.eticzen-hero-actions a{display:inline-flex;align-items:center;gap:8px;}
.eticzen-btn-secondary{background:#fff !important;color:var(--black) !important;border:0.5px solid var(--black) !important;}
.eticzen-btn-secondary:hover{background:var(--gray-bg) !important;}

.eticzen-hero-right{padding:40px;display:flex;align-items:center;justify-content:center;}
.eticzen-product-card{border:0.5px solid var(--border-strong);width:100%;max-width:320px;background:#fff;}
.eticzen-product-image{background:var(--gray-bg);height:160px;display:flex;align-items:center;justify-content:center;border-bottom:0.5px solid var(--border-strong);font-size:40px;color:#B8B8B8;}
.eticzen-product-body{padding:20px;}
.eticzen-product-ref{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gray-muted);margin-bottom:6px;}
.eticzen-product-name{font-size:15px;font-weight:500;margin-bottom:16px;}
.eticzen-product-footer{display:flex;justify-content:space-between;align-items:center;border-top:0.5px solid var(--border);padding-top:14px;}
.eticzen-stock{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--red);}
.eticzen-add-quote{background:var(--red) !important;color:#fff !important;font-size:11px;padding:9px 16px;letter-spacing:0.3px;}

.eticzen-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:0.5px solid var(--border);}
.eticzen-stat{padding:20px 32px;border-right:0.5px solid var(--border);}
.eticzen-stat:last-child{border-right:none;}
.eticzen-stat-num{font-size:26px;font-weight:600;font-family:'IBM Plex Mono',monospace;}
.eticzen-stat-num.accent{color:var(--red);}
.eticzen-stat-label{font-size:11px;color:var(--gray-text);letter-spacing:0.5px;margin-top:2px;text-transform:uppercase;}

/* Cahier des charges 21/08 : le bloc "Trouver la pièce pour votre machine" passait
   inaperçu — le label était centré (text-align:center) mais le formulaire et la note
   en dessous n'avaient pas de margin:auto, donc restaient collés au bord gauche du
   bloc : l'ensemble paraissait décalé/mal aligné au lieu d'être un vrai module centré.
   On centre tout (label, formulaire, note) via un fond flex en colonne, on lui donne
   un fond teinté + une bordure pour qu'il ressorte visuellement de la page, et on
   agrandit nettement le titre pour qu'il se lise comme une vraie fonctionnalité et
   non comme une légende secondaire. */
.eticzen-finder{
  padding:56px 48px;border-bottom:0.5px solid var(--border);
  transition:box-shadow .3s ease, background-color .3s ease;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--gray-bg);
}
.eticzen-finder.eticzen-finder-highlight{
  box-shadow:inset 0 0 0 2px var(--red);
  background-color:rgba(200,30,44,0.05);
}
.eticzen-finder-cue{
  text-align:center;font-size:13px;font-weight:700;color:var(--red);
  margin:0 0 12px;animation:eticzen-finder-cue-pulse 1s ease-in-out 2;
}
@keyframes eticzen-finder-cue-pulse{ 0%,100%{opacity:1;} 50%{opacity:.5;} }
.eticzen-finder-label{font-size:26px;font-weight:700;color:var(--black);margin-bottom:20px;text-align:center;letter-spacing:-0.01em;}
.eticzen-finder-row{display:flex;gap:10px;max-width:820px;width:100%;flex-wrap:wrap;margin:0 auto;justify-content:center;}
.eticzen-finder-input{flex:1;min-width:180px;border:0.5px solid var(--border-strong);padding:12px 14px;font-size:13px;font-family:'IBM Plex Mono',monospace;color:var(--black);background:#fff;}
.eticzen-finder-input:focus{outline:none;border-color:var(--black);}
/* Demande client 21/08 : les 3 champs (marque / modèle / référence) sont des chemins de
   recherche alternatifs (un seul suffit) et non une saisie cumulative — le mot "ou"
   entre chaque champ rend cette logique explicite au lieu de laisser croire qu'il faut
   tout remplir. align-self:center pour rester bien positionné même quand flex-wrap
   passe les champs à la ligne sur mobile. */
.eticzen-finder-or{align-self:center;font-size:12px;color:var(--gray-muted);font-style:italic;white-space:nowrap;}
.eticzen-finder-btn{background:var(--red) !important;color:#fff !important;font-size:12px;font-weight:500;padding:12px 22px !important;white-space:nowrap;}
.eticzen-finder-note{font-size:12px;color:var(--gray-muted);margin:14px auto 0;max-width:520px;line-height:1.5;}

.eticzen-poles{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.eticzen-poles-3{grid-template-columns:1fr 1fr 1fr;}
.eticzen-poles-3 .eticzen-pole{border-right:0.5px solid var(--border);}
.eticzen-poles-3 .eticzen-pole:last-child{border-right:none;}
/* display:flex forces equal-height cards regardless of description length — grid's
   align-items:stretch alone wasn't reliably equalizing these block-level children. */
.eticzen-pole{padding:40px 48px;background:#fff;transition:box-shadow .2s;display:flex;flex-direction:column;}
.eticzen-pole-num{font-family:'IBM Plex Mono',monospace;font-size:12px;margin-bottom:12px;color:var(--gray-text);}
.eticzen-pole-accent .eticzen-pole-num{color:var(--red);}
.eticzen-pole-title{display:block;font-size:22px;font-weight:600;margin-bottom:10px;color:var(--black);text-decoration:none;}
.eticzen-pole-accent .eticzen-pole-title{color:var(--red);}
.eticzen-pole-desc{font-size:13px;line-height:1.65;max-width:340px;color:var(--gray-text);}
.eticzen-pole-desc a{font-weight:500;}
.eticzen-pole-link{font-size:12px;font-weight:500;margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:6px;transition:gap .2s;color:var(--black);}
.eticzen-pole-accent .eticzen-pole-link{color:var(--red);}
/* Audit 14/08 priorité 4 : liens directs repris de l'ancien bloc "Une pièce détachée /
   Un consommable / Une imprimante ?" (fusionné dans les pôles), même style pilule que
   .eticzen-quick-tool-links pour rester cohérent avec le reste du site. */
.eticzen-pole-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:20px;}
.eticzen-pole-links a{
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.3px;
  border:0.5px solid var(--border-strong);padding:6px 12px;color:var(--black);
}
.eticzen-pole-links a:hover{border-color:var(--red);color:var(--red);}
.eticzen-pole-accent .eticzen-pole-links a:hover{border-color:var(--red);color:var(--red);}
.eticzen-pole:hover{box-shadow:inset 0 0 0 1px var(--black);}
.eticzen-pole-accent:hover{box-shadow:inset 0 0 0 1px var(--red);}
.eticzen-pole:hover .eticzen-pole-link{gap:10px;}
.eticzen-product-card{transition:box-shadow .2s;}
.eticzen-product-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);}
.eticzen-product-image img{transition:transform .3s;}
.eticzen-product-card:hover .eticzen-product-image img{transform:scale(1.04);}
.eticzen-search-card{transition:box-shadow .2s,transform .2s;}
.eticzen-search-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-2px);}

@keyframes eticzenFadeUp{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
.eticzen-hero-left > *{animation:eticzenFadeUp .5s ease both;}
.eticzen-hero-left .eticzen-eyebrow{animation-delay:0s;}
.eticzen-hero-left h1{animation-delay:.08s;}
.eticzen-hero-left .eticzen-hero-sub{animation-delay:.16s;}
.eticzen-hero-left .eticzen-hero-actions{animation-delay:.24s;}
.eticzen-hero-right{animation:eticzenFadeUp .6s ease .1s both;}

@media (max-width:860px){
  .eticzen-hero,.eticzen-stats,.eticzen-poles{grid-template-columns:1fr;}
  .eticzen-hero-left{padding:40px 24px;border-right:none;border-bottom:0.5px solid var(--border);}
  .eticzen-hero h1{font-size:32px;}
  .eticzen-stat{border-right:none;border-bottom:0.5px solid var(--border);}
  .eticzen-poles-3 .eticzen-pole{border-right:none;border-bottom:0.5px solid var(--border);}
  .eticzen-finder{padding:32px 24px;}
}

/* Vignettes "familles de produits" (étiquettes adhésives, etc.) — chaque vignette
   ouvre le catalogue déjà filtré sur la catégorie concernée. Audit 11/08 §14 : miniatures
   réduites (ratio 16/9 au lieu de carrés pleine hauteur) pour un choix de famille plus
   compact ; le placeholder "pas de photo" est stylé comme une icône neutre plutôt que
   comme un bloc de texte brut sur fond gris. */
.eticzen-family-grid{
  display:grid;
  /* Colonnes fixes plutôt qu'auto-fill (audit 13/08 §6.1) : le nombre de colonnes
     variait avec la largeur exacte du conteneur et donnait "7 en haut puis 3" sur les
     10 familles d'étiquettes — rendu déséquilibré et imprévisible. 5 colonnes donne un
     rectangle plein (5+5) pour ce cas, et reste raisonnable pour les autres grilles
     (têtes/rouleaux/bandes/moteurs, families avec moins d'entrées) grâce aux paliers
     ci-dessous. */
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin:16px 0 24px;
}
@media (max-width:900px){ .eticzen-family-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .eticzen-family-grid{ grid-template-columns:repeat(2,1fr); } }
.eticzen-family-card{
  display:flex;flex-direction:column;
  border:0.5px solid var(--border-strong,#ddd);
  background:var(--panel,#fff);
  text-decoration:none;color:inherit;
  transition:box-shadow .2s,transform .2s;
}
.eticzen-family-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-2px);}
.eticzen-family-thumb{
  width:100%;aspect-ratio:16/9;background:var(--gray-bg,#f2f2f2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.eticzen-family-thumb img{width:100%;height:100%;object-fit:cover;}
.eticzen-family-thumb.eticzen-family-noimg{
  font-size:0; /* la légende est déjà affichée sous la vignette, on masque le texte dupliqué */
  display:flex;align-items:center;justify-content:center;
}
.eticzen-family-thumb.eticzen-family-noimg::before{
  content:"🏷";font-size:22px;opacity:.3;
}
.eticzen-family-name{
  padding:8px 10px;font-size:12.5px;font-weight:600;text-align:center;line-height:1.25;
}

/* ===== Panier de devis façon Betclic =====
   Desktop : colonne TOUJOURS VISIBLE à droite (comme le bet-slip Betclic — pas de bouton à
   ouvrir), construite sur une instance dédiée du widget mini-liste YITH
   (eticzen-devis-panel.php). Mobile : barre fixe en bas qui ouvre un tiroir (pas de place
   pour une colonne permanente sur petit écran). Le bouton natif du widget ("raq-info") est
   masqué — sur mobile, notre propre bouton sert de déclencheur unique. */

#eticzen-devis-trigger{
  position:fixed; z-index:9998; display:flex; align-items:center; gap:8px;
  background:var(--black,#1A1A1A); color:#fff; border:none; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:13px;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
#eticzen-devis-trigger .eticzen-devis-trigger-icon svg{ width:18px; height:18px; display:block; }
#eticzen-devis-trigger .eticzen-devis-trigger-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--red,#C81E2C); color:#fff; font-size:11px; font-weight:800;
}

#eticzen-devis-backdrop{
  position:fixed; inset:0; z-index:9996; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
}
/* Classe appliquée directement sur le backdrop (jamais via body) : une règle combinant
   body.xxx + plusieurs descendants + !important s'est révélée peu fiable ici (cf. incident
   du 13/08) — un simple sélecteur de classe sur l'élément lui-même est sans ambiguïté. */
#eticzen-devis-backdrop.eticzen-panel-open{ opacity:1; pointer-events:auto; }

/* Le panneau natif (.yith-ywraq-list-wrapper) est entièrement re-stylé en position fixe,
   indépendamment de tout CSS de thème YITH tiers (règles !important). Habillage inspiré du
   bet-slip Betclic (bandeau compteur, cartes d'articles arrondies, état vide illustré, CTA
   final proéminent) adapté aux couleurs et au ton B2B d'ETICZEN. */
#eticzen-devis-panel-wrap .raq-info{ display:none !important; }
#eticzen-devis-panel-wrap .yith-ywraq-list-wrapper{
  position:fixed !important; z-index:9997; background:#fff;
  box-shadow:-4px 0 24px rgba(0,0,0,.18);
  border:1px solid var(--border-strong,#ddd);
  display:flex; flex-direction:column;
  margin:0 !important; padding:0 !important; width:auto !important;
  box-sizing:border-box;
}
#eticzen-devis-panel-wrap .yith-ywraq-list-content{
  position:static !important; opacity:1 !important; visibility:visible !important;
  box-shadow:none !important; background:none !important; width:100% !important;
  min-width:0 !important; padding:0 !important;
  /* flex:1 (pas seulement height:100%, insuffisant dans un parent flex-column) pour que
     ce bloc occupe reellement toute la hauteur du panneau et que le bouton final se
     retrouve ancre en bas — audit 13/08 §1, point 2. */
  flex:1; min-height:0;
  display:flex; flex-direction:column; overflow:hidden;
}
/* Bandeau marque (logo), au-dessus du bandeau compteur — audit 13/08 §1, point 1.
   Inseree en JS (voir eticzen-devis-panel.php, insertBrand()) car premier enfant de
   .yith-ywraq-list-wrapper, hors de .yith-ywraq-list-content genere par YITH. */
#eticzen-devis-panel-wrap .eticzen-devis-brand{
  flex-shrink:0; background:#fff; border-bottom:1px solid var(--border);
  padding:12px 20px;
}
#eticzen-devis-panel-wrap .eticzen-devis-brand img{ display:block; height:28px; width:auto; }
/* Bandeau compteur — équivalent du "0 sélection" Betclic, fond sombre pour bien séparer
   le panneau du reste de la page (le panneau est en permanence à l'écran sur desktop). */
#eticzen-devis-panel-wrap .items-count{
  background:var(--black,#1A1A1A); color:#fff; flex-shrink:0;
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  margin:0; padding:18px 20px;
}
/* Croix de fermeture retiree (audit 13/08 §1, point 6) : le panneau reste actif en
   permanence façon Betclic — se ferme (mobile/tablette) en re-cliquant le declencheur
   ou en touchant le fond assombri, sans bouton de fermeture pretant a confusion. */
#eticzen-devis-panel-wrap .close{ display:none !important; }

#eticzen-devis-panel-wrap ul.yith-ywraq-list{
  flex:0 1 auto; max-height:45vh; margin:0; padding:14px; overflow-y:auto;
  display:flex; flex-direction:column; gap:10px;
}
/* Recap + rassurance : absorbe l'espace restant entre la liste et le bouton final
   plutot que de le laisser vide (audit 13/08 §1, points 3-5). Inseree en JS a chaque
   rafraichissement (voir insertTrustBlock()). */
#eticzen-devis-panel-wrap .eticzen-devis-trust{
  flex:1; min-height:60px; display:flex; flex-direction:column; justify-content:center;
  gap:14px; padding:18px 20px; border-top:1px solid var(--border);
}
#eticzen-devis-panel-wrap .eticzen-devis-recap{
  margin:0; font-size:12.5px; font-weight:700; color:var(--black); text-align:center;
}
#eticzen-devis-panel-wrap .eticzen-devis-reassurance{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;
}
#eticzen-devis-panel-wrap .eticzen-devis-reassurance li{
  font-size:12px; color:var(--gray-text); display:flex; align-items:flex-start; gap:8px; line-height:1.4;
}
#eticzen-devis-panel-wrap .eticzen-devis-reassurance li:before{
  content:"✓"; color:var(--red); font-weight:700; flex-shrink:0;
}
/* Detail d'une demande personnalisee (carton sur mesure, etc.) affiche sous le nom du
   produit dans la liste — audit 13/08 §1, point 7. */
#eticzen-devis-panel-wrap .eticzen-custom-request-detail{
  display:block; font-size:11.5px; color:var(--gray-text); font-weight:400; margin-top:2px;
}
#eticzen-devis-panel-wrap .eticzen-custom-request-detail-data{ display:none !important; }
#eticzen-devis-panel-wrap ul.yith-ywraq-list li.yith-ywraq-list-item{
  display:flex !important; align-items:flex-start; gap:10px;
  padding:12px !important; margin:0 !important; border-bottom:none !important;
  background:var(--gray-bg,#f4f4f4); border-radius:10px;
}
#eticzen-devis-panel-wrap .yith-ywraq-item-remove{
  order:3; margin-left:auto; flex-shrink:0;
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:1px solid var(--border-strong,#ddd);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1; color:var(--gray-text,#999); text-decoration:none;
}
#eticzen-devis-panel-wrap .yith-ywraq-item-remove:hover{ background:var(--red,#C81E2C); border-color:var(--red,#C81E2C); color:#fff; }
#eticzen-devis-panel-wrap .yith-ywraq-list-item-info img{ width:42px; height:42px; object-fit:contain; background:#fff; border-radius:6px; padding:4px; flex-shrink:0; }
#eticzen-devis-panel-wrap .yith-ywraq-list-item-product-info{ font-size:12.5px; line-height:1.4; font-weight:600; color:var(--black,#1A1A1A); }
#eticzen-devis-panel-wrap .yith-ywraq-list-item-product-info .quantity{ display:block; font-size:11.5px; color:var(--gray-text,#777); font-weight:400; margin-top:3px; }

/* État vide (14/08) : plus de bloc icône/texte distinct — le bandeau ".items-count"
   recréé en JS ("0 référence sélectionnée") porte toute l'info ; <li class="no-product">
   reste vide dans le markup, on le masque simplement pour ne rien laisser flotter. */
#eticzen-devis-panel-wrap li.no-product{ display:none; }

#eticzen-devis-panel-wrap a.button{
  display:block; text-align:center; background:var(--red,#C81E2C); color:#fff;
  padding:15px; font-weight:700; text-transform:uppercase; font-size:13px;
  text-decoration:none; letter-spacing:.5px; flex-shrink:0; margin:14px !important;
  border-radius:8px; box-shadow:0 3px 10px rgba(200,30,44,.3);
}
#eticzen-devis-panel-wrap a.button:hover{ background:#a91824; }

/* Bouton "Finaliser" désactivé, affiché même à 0 référence (demande du 14/08) : sert
   de repère visuel — l'utilisateur comprend d'emblée à quoi sert ce bloc — sans être
   cliquable tant que la liste est vide. Vit à l'intérieur de .eticzen-devis-trust (flex,
   gap:14px déjà présent) : pas de margin propre, l'espacement vient du gap du parent. */
#eticzen-devis-panel-wrap .eticzen-devis-trust-btn-disabled{
  display:block; text-align:center; background:var(--gray-bg,#e8e8e8); color:var(--gray-muted,#999);
  padding:15px; font-weight:700; text-transform:uppercase; font-size:13px;
  letter-spacing:.5px; flex-shrink:0; border-radius:8px;
  cursor:not-allowed; pointer-events:none; user-select:none;
}

/* L'icone "Voir mon devis" du header (eticzen-quote-icon.php) fait double emploi
   depuis l'ajout du panier "Betclic" (audit 13/08) : sur desktop la colonne de devis
   est deja en permanence a l'ecran, et sur mobile/tablette le bouton flottant "MON
   DEVIS" existe deja. On la masque en CSS plutot que toucher au fichier PHP source
   (deja implique dans un incident 500 plus tot dans le projet, cf. historique). */
#eticzen-quote-icon{ display:none !important; }

/* ===== PAGE DE DEVIS COMPLETE (id 3551) — meme identite visuelle que le panier
   "Betclic" (bandeau sombre, cartes articles arrondies, bouton rouge plein), demandee
   par le client pour que le clic sur "Finaliser ma demande de devis" prolonge la meme
   experience au lieu d'atterrir sur un tableau WooCommerce par defaut. ===== */
.ywraq-wrapper{ max-width:820px; margin:24px auto 48px; font-family:'IBM Plex Sans',sans-serif; }
/* "Retourner a nos produits" (liste non vide) : rendu en texte brut non stylise avant ce
   correctif -- meme traitement discret que "Mettre a jour la liste". */
.yith-ywraq-before-table{ max-width:820px; margin:0 auto 8px; }
.yith-ywraq-before-table .yith-ywraq-before-table-wc-backward{
  display:inline-block; background:none !important; border:none; box-shadow:none;
  color:var(--gray-text) !important; font-size:12px; font-weight:600; text-decoration:underline;
  text-transform:none; padding:0 !important;
}
.yith-ywraq-before-table .yith-ywraq-before-table-wc-backward:hover{ color:var(--red) !important; }
.ywraq-form-table-wrapper{
  border:1px solid var(--border-strong); background:#fff; overflow:hidden;
}
/* Bandeau titre "1. Votre sélection", equivalent du bandeau "N reference(s)" du
   panneau lateral. Element reel (.eticzen-col-header, insere par JS -- cf.
   eticzen-devis-form-redesign.php) et non plus un ::before du conteneur : necessaire
   pour que la colonne "sélection" et la colonne "coordonnées" (ajoutee a cote en
   desktop) restent 2 blocs independants en hauteur, chacun avec son propre bandeau. */
.eticzen-col-header{
  display:block; background:var(--black); color:#fff;
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:16px 20px;
}
.wc-backward.yith-ywraq-before-table-wc-backward{
  display:inline-block; margin:14px 0 0 20px; background:none !important; border:none;
  color:var(--gray-text) !important; font-size:12px; font-weight:600; text-decoration:underline;
  text-transform:none; padding:0 !important; box-shadow:none;
}
table.shop_table{ width:100%; border-collapse:separate; border-spacing:0; margin:0; background:none; }
table.shop_table thead{ display:none; }
table.shop_table tbody{ display:flex; flex-direction:column; gap:10px; padding:16px 20px 4px; }
/* Carte produit en grille nommee (et non plus flex-wrap) -- corrige un debordement
   constate en verification live : avec flex-wrap, la cellule "Supprimer" se retrouvait
   ecrasee a une largeur quasi nulle sur la derniere ligne quand elle manquait de place,
   et son texte depassait alors du cadre de la carte au lieu de se redimensionner. La
   grille reserve une vraie colonne a droite qui ne peut pas etre ecrasee de cette
   maniere, et aligne image / nom / quantite / suppression les uns sous les autres de
   facon previsible. Largeur de cette 3e colonne fixee en pixels (et non "auto") : la
   verification live a montre qu'un navigateur peut mal calculer la largeur intrinseque
   d'un lien dont le texte reel ("×") est masque en font-size:0 au profit d'un texte
   genere par ::after ("Supprimer") -- "auto" retombait alors sur une colonne trop
   etroite et le lien depassait quand meme du cadre malgre la grille. */
table.shop_table tr.cart_item{
  display:grid !important;
  grid-template-columns:56px 1fr 84px;
  grid-template-areas:
    "thumb name   remove"
    "thumb qty    remove";
  column-gap:14px; row-gap:8px; align-items:start;
  background:var(--gray-bg); border-radius:10px; padding:12px; border:none !important;
}
table.shop_table tr.cart_item td{ border:none !important; padding:0 !important; }
table.shop_table .product-thumbnail{ grid-area:thumb; }
table.shop_table .product-name{ grid-area:name; min-width:0; }
table.shop_table .product-quantity{ grid-area:qty; }
/* width:auto !important necessaire : ywraq-frontend.css (le plugin) fixe
   ".product-remove{width:1%}" pour son propre tableau en layout table normal (et, en
   dessous de 768px, une regle encore plus specifique "table.shop_table.ywraq_responsive
   .product-remove{max-width:20px}") -- sur notre grille, ces regles reduisent la cellule
   a moins d'1px (largeur resolue independamment de la piste de grille de 84px) et le
   lien "Supprimer" depasse alors du cadre malgre la grille. Trouve en verification live :
   la 3e colonne restait ecrasee meme apres etre passee de "auto" a "84px" fixe -- ce
   n'etait pas un probleme de piste de grille mais bien cette regle du plugin. */
table.shop_table .product-remove{
  grid-area:remove; align-self:start; justify-self:end;
  width:auto !important; max-width:none !important;
}
/* Lien "Supprimer" texte (au lieu de l'icone ronde "×" seule) -- demande du 31/08.
   Le caractere "×" reste dans le DOM (genere par YITH, sert de libelle accessible au
   lien) mais est visuellement masque via font-size:0 ; le texte affiche vient du
   pseudo-element ci-dessous. */
table.shop_table .product-remove a.yith-ywraq-item-remove{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:auto; border-radius:0; background:none; border:none;
  color:var(--gray-text); font-size:0; text-decoration:none; line-height:1; padding:4px 0;
  white-space:nowrap;
}
table.shop_table .product-remove a.yith-ywraq-item-remove:after{
  content:"Supprimer"; font-size:12px; font-weight:600; text-decoration:underline;
}
table.shop_table .product-remove a.yith-ywraq-item-remove:hover{ background:none; color:var(--red); }
table.shop_table .product-thumbnail img{ width:56px; height:56px; object-fit:contain; background:#fff; border-radius:6px; border:1px solid var(--border); }
table.shop_table .product-name a{ font-weight:600; font-size:14px; color:var(--black); text-decoration:none; }
table.shop_table .product-name a:hover{ color:var(--red); }
table.shop_table .eticzen-custom-request-detail{ display:block; font-size:11.5px; color:var(--gray-text); font-weight:400; margin-top:3px; }
table.shop_table .product-quantity input{ width:56px; text-align:center; border:1px solid var(--border-strong); padding:8px; font-size:13px; font-family:inherit; }

/* "Nettoyer la liste" retiré (redondant : chaque ligne a deja sa propre croix de
   suppression) — "Mettre à jour la liste" repositionné au-dessus des articles, en
   discret (demande client du 13/08). Le formulaire n'a que ces deux boutons comme
   enfants directs : on le passe en colonne inversee pour faire remonter visuellement
   .update-list-wrapper (2e enfant DOM) au-dessus de table.shop_table (1er enfant DOM)
   sans dupliquer de markup. Selecteur par id (et non plus ">form" enfant direct du
   wrapper) : le formulaire est desormais imbrique dans .eticzen-col-selection. */
#yith-ywraq-form{ display:flex; flex-direction:column-reverse; }
.ywraq_clean_list{ display:none !important; }
.update-list-wrapper{ display:flex; justify-content:flex-end; padding:14px 20px 0; }
input[name="update_raq"]{
  background:none !important; border:none !important; color:var(--gray-text) !important;
  font-size:12px; font-weight:600; text-transform:none; letter-spacing:0;
  padding:0 !important; cursor:pointer; box-shadow:none; text-decoration:underline;
}
input[name="update_raq"]:hover{ color:var(--red) !important; }

.yith-ywraq-mail-form-wrapper{ border-top:1px solid var(--border); padding:0 0 24px; }
.yith-ywraq-mail-form-wrapper h3{
  margin:0 0 20px; padding:16px 20px;
  background:var(--black); color:#fff;
  font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; font-weight:700;
}
#yith-ywraq-default-form{ padding:0 20px; }
#yith-ywraq-default-form .form-row{ margin:0 0 16px; }
#yith-ywraq-default-form label{ font-size:13px; font-weight:600; margin-bottom:6px; display:block; color:var(--black); }
#yith-ywraq-default-form .input-text, #yith-ywraq-default-form textarea{
  border:1px solid var(--border-strong); padding:11px 12px; width:100%; font-size:14px; font-family:inherit; box-sizing:border-box;
}
#yith-ywraq-default-form .input-text:focus, #yith-ywraq-default-form textarea:focus{ outline:none; border-color:var(--red); }
.raq-send-request-row{ margin-top:8px; }
input.raq-send-request{
  background:var(--red) !important; color:#fff !important; border:none !important;
  padding:15px 28px !important; font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.5px;
  cursor:pointer; width:100%; box-shadow:none !important; opacity:1 !important;
}
input.raq-send-request:hover{ background:#a91824 !important; }

/* Etat vide : icone + texte, meme traitement que le panneau lateral vide.
   !important necessaire : la CSS du plugin (ywraq-frontend.css) contient une regle
   ".ywraq-wrapper.ywraq-with-form .ywraq-before-form{display:none}" de meme specificite
   que celle qui l'affiche pour ".ywraq-empty", et gagne car placee apres dans la feuille
   — les deux classes cohabitent des qu'une demande a deja ete envoyee dans la session. */
/* Correctif 31/08 : la regle !important ci-dessous, ecrite pour forcer l'affichage du
   message "liste vide" quand ".ywraq-empty" et ".ywraq-with-form" cohabitent (situation
   decrite plus haut), s'appliquait aussi bien quand la liste est REELLEMENT vide que
   quand elle a deja ete envoyee une fois dans la session -- dans ce 2e cas, .ywraq-before-form
   est present mais VIDE (le message conditionnel de YITH ne s'y affiche pas), et ses 36px
   de padding haut+bas devenaient un grand bloc blanc vide au-dessus du produit. On ne
   force plus l'affichage QUE si le message vide y est reellement present. */
.ywraq-before-form:has(.ywraq_list_empty_message){ display:block !important; padding:36px 20px !important; text-align:center; border:none !important; }
.ywraq-before-form:not(:has(.ywraq_list_empty_message)){ display:none !important; }
.ywraq-before-form:before{ display:none !important; } /* icone SVG par defaut du plugin, remplacee par l'emoji ci-dessous */
.ywraq_list_empty_message{ margin:0 0 4px; font-weight:700; font-size:15px; color:var(--black); }
.ywraq_list_empty_message:before{ content:"🧾"; display:block; font-size:38px; margin-bottom:10px; opacity:.8; }
.ywraq-before-form .wc-backward{
  display:inline-block; margin-top:14px; background:var(--red) !important; color:#fff !important;
  border:none; padding:12px 22px; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; text-decoration:none; box-shadow:none;
}
.ywraq-before-form .wc-backward:hover{ background:#a91824 !important; }

/* Stepper de quantite +/- (remplace le simple champ nombre) et lien "Ajouter un autre
   produit" -- markup ajoute par JS (eticzen-devis-form-redesign.php), CSS seule ici. */
.eticzen-qty-stepper{
  display:inline-flex; align-items:center; border:1px solid var(--border-strong);
  border-radius:6px; overflow:hidden; background:#fff;
}
.eticzen-qty-stepper button{
  width:28px; height:28px; border:none; background:var(--gray-bg); color:var(--black);
  font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center;
  justify-content:center; padding:0; line-height:1; font-family:inherit;
}
.eticzen-qty-stepper button:hover{ background:var(--border); }
.eticzen-qty-stepper input{
  width:38px !important; text-align:center; border:none !important; padding:0 !important;
  font-size:13px; -moz-appearance:textfield;
}
.eticzen-qty-stepper input::-webkit-outer-spin-button,
.eticzen-qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.eticzen-add-more-link{
  display:inline-flex; align-items:center; gap:6px; margin:2px 20px 18px;
  color:var(--red); font-size:12.5px; font-weight:700; text-decoration:none;
}
.eticzen-add-more-link:hover{ text-decoration:underline; }
.eticzen-add-more-link:before{ content:"+"; font-size:16px; line-height:1; }

.eticzen-trust-badges{
  display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:center;
  padding:18px 20px; border-top:1px solid var(--border); background:var(--gray-bg);
  font-size:12px; font-weight:600; color:var(--black);
}
.eticzen-trust-badges span{ display:inline-flex; align-items:center; gap:6px; }
.eticzen-trust-badges span:before{ content:"✓"; color:var(--red); font-weight:700; }

/* Mise en page 2 colonnes "1. Votre selection" / "2. Vos coordonnees" -- demande du
   31/08 (calquee sur une capture de reference), a partir de 900px de large seulement :
   en dessous, tout reste empile comme avant (ordre DOM naturel : colonne selection,
   colonne coordonnees, bandeau de rassurance). Flexbox plutot que CSS Grid : chaque
   colonne (.eticzen-col-selection / .eticzen-col-contact, cf. JS) garde sa hauteur
   propre independamment de l'autre -- avec Grid, la colonne "coordonnees" (plus haute)
   partageait ses lignes avec la colonne "selection" et poussait le tableau produits
   loin sous son bandeau (bug constate en verification live, corrige par ce changement
   de structure). Specificite egale a ".eticzen-quote-card .ywraq-form-table-wrapper{
   width:100% !important }" (regle plus haut) pour ne pas etre ecrasee : meme prefixe. */
@media (min-width:900px){
  .ywraq-wrapper{ max-width:980px; }
  .eticzen-quote-card .ywraq-form-table-wrapper{
    display:flex !important; flex-wrap:wrap; align-items:flex-start;
  }
  .eticzen-col-selection{ flex:1.3 1 0; min-width:0; }
  .eticzen-col-contact{ flex:1 1 0; min-width:0; border-left:1px solid var(--border); }
  .yith-ywraq-mail-form-wrapper{ border-top:none; }
  .eticzen-trust-badges{ flex-basis:100%; order:3; }
}

@media (max-width:600px){
  .ywraq-wrapper{ margin:12px 12px 32px; max-width:none; }
  /* Colonnes resserrees sur petit ecran : la grille (cf. table.shop_table tr.cart_item
     plus haut) reste a 3 colonnes, juste plus etroites, pour garder "Supprimer" toujours
     entierement visible sans repasser en flex-wrap (source du debordement corrige). */
  table.shop_table tr.cart_item{ grid-template-columns:44px 1fr 78px; column-gap:10px; }
  table.shop_table .product-thumbnail img{ width:44px; height:44px; }
}

/* Petite bande de réduction (demande du 14/08) : le panneau desktop reste sans croix de
   fermeture (choix volontaire du 13/08), mais doit pouvoir se réduire sur le côté droit
   plutôt que de rester ouvert en permanence — sans jamais perdre la sélection en cours.
   Masquée par défaut : n'a de sens qu'en mode desktop permanent (media query ci-dessous). */
#eticzen-devis-panel-wrap .eticzen-devis-collapse-rail{ display:none; }

/* Desktop : pas de bouton, pas de backdrop — le panneau est une colonne fixe, toujours
   visible, ancrée à droite (comme la capture Betclic fournie). On réserve réellement cet
   espace (padding-right sur body) plutôt que de superposer le panneau au contenu : sans
   ça, la colonne recouvre les éléments alignés à droite (carte produit de l'accueil,
   etc.) sur la plupart des résolutions desktop courantes. */
@media (min-width:1101px){
  body{ padding-right:330px; transition:padding-right .25s ease; }
  /* Page devis (id 3551) : le panneau lateral "Ma selection" est deja masque sur
     cette page (cf. eticzen-devis-panel.php, wp_footer), le formulaire complet en
     tenant lieu -- l'espace reserve pour lui doit donc etre libere, sinon la page
     se retrouve inutilement retrecie de 330px pour un panneau qui n'existe pas. */
  body.page-id-3551{ padding-right:0 !important; }
  #eticzen-devis-trigger, #eticzen-devis-backdrop{ display:none !important; }
  #eticzen-devis-panel-wrap .yith-ywraq-list-wrapper{
    top:0; right:0; bottom:0; width:330px !important;
    transition:width .25s ease;
  }
  /* La barre d'admin WordPress (visible seulement en étant connecté) passe au-dessus de
     tout avec un z-index très élevé : on décale le panneau sous elle pour ne jamais avoir
     son propre contenu (bouton retirer, etc.) masqué pendant les vérifications internes. */
  body.admin-bar #eticzen-devis-panel-wrap .yith-ywraq-list-wrapper{ top:32px; }

  /* Bande accolée au bord gauche du panneau, toujours visible en mode ouvert — c'est le
     "poignée" qui permet de réduire. */
  #eticzen-devis-panel-wrap .eticzen-devis-collapse-rail{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    position:absolute; left:-29px; top:50%; transform:translateY(-50%);
    width:28px; padding:10px 0; background:#fff;
    border:1px solid var(--border-strong,#ddd); border-right:none;
    border-radius:8px 0 0 8px; box-shadow:-2px 0 8px rgba(0,0,0,.08); z-index:1;
  }
  #eticzen-devis-panel-wrap .eticzen-devis-collapse-toggle{
    background:none; border:none; cursor:pointer; padding:2px;
    color:var(--gray-text,#666); font-size:16px; line-height:1;
  }
  #eticzen-devis-panel-wrap .eticzen-devis-collapse-toggle:hover{ color:var(--red,#C81E2C); }
  #eticzen-devis-panel-wrap .eticzen-devis-collapse-badge{
    display:none; background:var(--red,#C81E2C); color:#fff; font-size:10px; font-weight:700;
    min-width:16px; height:16px; border-radius:50%; align-items:center; justify-content:center; line-height:1;
  }

  /* État réduit : le panneau devient une fine bande (40px) — pas fermé, juste réduit.
     Tout son contenu (logo, liste, rassurance, bouton) est masqué, seule la poignée
     (icône + pastille de compteur) reste visible et cliquable pour ré-ouvrir. */
  body.eticzen-panel-collapsed{ padding-right:40px !important; }
  body.eticzen-panel-collapsed #eticzen-devis-panel-wrap .yith-ywraq-list-wrapper{ width:40px !important; }
  body.eticzen-panel-collapsed #eticzen-devis-panel-wrap .yith-ywraq-list-wrapper > *:not(.eticzen-devis-collapse-rail){
    display:none !important;
  }
  /* La poignée garde exactement le même aspect "languette qui dépasse" qu'à l'état
     ouvert (demande du 14/08) — pas de règle spécifique à l'état réduit qui la
     transformerait en bande pleine hauteur : seule la largeur du panneau change
     (330px ↔ 40px), la poignée absolute reste identique et suit le bord gauche. */
  body.eticzen-panel-collapsed #eticzen-devis-panel-wrap .eticzen-devis-collapse-badge{ display:flex; }
}
/* Desktop étroit (769-1100px) : pas assez de place pour réserver une colonne sans casser
   la mise en page existante — on revient au comportement à ouvrir/fermer au clic. */
@media (min-width:769px) and (max-width:1100px){
  #eticzen-devis-trigger{ right:24px; bottom:24px; padding:12px 18px; border-radius:28px; }
  #eticzen-devis-panel-wrap .yith-ywraq-list-wrapper{
    top:0; right:0; bottom:0; width:340px !important; max-width:85vw;
    transform:translateX(100%) !important;
  }
  #eticzen-devis-panel-wrap .yith-ywraq-list-wrapper.eticzen-panel-open{ transform:translateX(0) !important; }
  #eticzen-devis-trigger.eticzen-panel-open{ display:none; }
}

/* Mobile : barre pleine largeur en bas + panneau en tiroir depuis le bas */
@media (max-width:768px){
  #eticzen-devis-trigger{
    left:0; right:0; bottom:0; width:100%; justify-content:center;
    padding:14px 16px; border-radius:0;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
  }
  #eticzen-devis-panel-wrap .yith-ywraq-list-wrapper{
    left:0; right:0; bottom:0; max-height:82vh;
    border-radius:16px 16px 0 0;
    transform:translateY(100%) !important;
    padding-bottom:env(safe-area-inset-bottom);
  }
  #eticzen-devis-panel-wrap .yith-ywraq-list-wrapper.eticzen-panel-open{ transform:translateY(0) !important; }
  /* La barre flottante ne doit pas rester visible par-dessus le tiroir une fois ouvert */
  #eticzen-devis-trigger.eticzen-panel-open{ display:none; }
}

/* ===== SELECTEUR "QUE RECHERCHEZ-VOUS ?" SUR LA PAGE CATEGORIE ETIQUETTES ADHESIVES =====
   Ajoute en tete de l'archive de categorie (champ description WooCommerce, affiche
   au-dessus de la grille produits) pour orienter par technologie d'impression (bloc
   principal, le plus strategique pour l'activite imprimantes industrielles) puis par
   format/caracteristique (bloc secondaire). Cf. restructuration taxonomie du 25/08 :
   avant cette date un produit ne portait qu'un seul axe de classement (format OU
   techno), jamais les deux -- desormais chaque produit peut porter les deux. */
.eticzen-cat-finder{margin:0 0 36px;}
.eticzen-cat-finder-title{font-size:22px;font-weight:700;color:var(--black);margin:0 0 18px;text-align:center;letter-spacing:-0.01em;}
.eticzen-cat-finder-primary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);border:0.5px solid var(--border);margin-bottom:10px;}
.eticzen-cat-finder-primary a{display:flex;align-items:center;justify-content:center;text-align:center;padding:26px 18px;background:#fff;color:var(--black);font-weight:600;font-size:16px;text-decoration:none;transition:background .2s,color .2s;}
.eticzen-cat-finder-primary a:hover{background:var(--red);color:#fff;}
.eticzen-cat-finder-secondary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.eticzen-cat-finder-secondary a{display:flex;align-items:center;justify-content:center;text-align:center;padding:14px 12px;border:0.5px solid var(--border-strong);color:var(--gray-text);font-size:13px;font-weight:500;text-decoration:none;transition:border-color .2s,color .2s;}
.eticzen-cat-finder-secondary a:hover{border-color:var(--red);color:var(--red);}
@media (max-width:700px){
  .eticzen-cat-finder-primary,.eticzen-cat-finder-secondary{grid-template-columns:1fr 1fr;}
}

/* Variante du bloc precedent pour une liste de marques plus longue et sans ordre de
   priorite impose (ex. Rubans transfert thermique, filtre par marque d'imprimante
   compatible) : simple rangee de pilules qui s'enroule, pas de grille a 3 colonnes fixe. */
.eticzen-cat-finder-wrap{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.eticzen-cat-finder-wrap a{flex:none;padding:10px 16px;}