/* =====================================================================
   RUBACO – EN-TÊTE, LISTINGS ET FORMULAIRES
   Version propre du 29/10/2026 (regroupe les réglages du jour).
   Pages : devis 10241 · retirage 10237 · règlement de facture 10156 · contact 10158
   Formulaires : Gravity Forms 9 (devis), 4 (facture) · WPForms 20439 (contact), 20457 (retirage)
   ===================================================================== */

/* =============== 1. EN-TÊTE =============== */

/* Menu hamburger : « Nous contacter » aligné à gauche comme les autres liens */
.site-header .sh-mobile-menu .sh-btn-cta { justify-content: flex-start !important; margin-top: 0 !important; }

/* Mobile : logo Rubaco plus petit (40 px de haut), en-tête fixe moins haut */
@media (max-width: 767.98px) {
	header.site-header .site-header__inner { height: 52px !important; min-height: 0 !important; }
	header.site-header .site-header__logo,
	header.site-header .site-header__logo a { height: 40px !important; }
	header.site-header .site-header__logo img { height: 40px !important; width: auto !important; max-height: 40px !important; }
}

/* =============== 1 bis. PAGE D’ACCUEIL : bandeau bleu au plus compact (30/10/2026) =============== */
/* Mobile : sans la bobine décorative ; ordinateur : bobines conservées sur les côtés. Moins d’espace avant « Choisissez votre parcours ». */
@media (max-width:767.98px){
html body.home section.hero{padding:12px 0 14px!important}
html body.home section.hero .hero__titles{margin-bottom:8px!important}
html body.home section.hero .hero__separator{padding:8px 0!important}
html body.home section.hero .hero__tagline{margin:4px 0 8px!important}
html body.home section.hero .hero__cta{margin:12px 0 4px!important}
html body.home section.hero .rubaco-hero-note{margin:10px 0 0!important}
html body.home section.parcours{padding-top:22px!important}
}
@media (min-width:768px){
html body.home section.hero{padding:18px 0 20px!important}
html body.home section.hero .hero__titles{margin-bottom:8px!important}
html body.home section.hero .hero__separator{padding:8px 0!important}
html body.home section.hero .hero__tagline{margin:4px 0 10px!important}
html body.home section.hero .hero__cta{margin:14px 0 4px!important}
html body.home section.hero .rubaco-hero-note{margin:10px 0 0!important}
html body.home section.parcours{padding-top:28px!important}
}

/* =============== 2. LISTINGS PRODUITS (catégories) =============== */

/* Pictos des variétés (miel…) dans le bandeau : blanc pur.
   (L'ancien filtre du thème donnait du rose sur iPhone ; certains pictos restaient noirs.) */
.list-models .header-wrapper .works-wrapper a svg,
.list-models .header-wrapper .works-wrapper a:hover svg { filter: brightness(0) invert(1) !important; -webkit-filter: brightness(0) invert(1) !important; }

/* Ordinateur : bandeau des variétés (pictos miel…) à sa hauteur finale dès le chargement (le carrousel s'initialisait
   après coup et poussait la liste des produits de ~40 px vers le bas). */
@media (min-width: 768px) {
	.works-wrapper.sectors-swiper { min-height: 108px; }
}

/* Mobile / tablette : bandeau « Filtrer les résultats » compact, filtres sur une seule ligne */
@media (max-width: 991.98px) {
	html body .filter-trigger-wrapper,
	html body .filter-trigger-wrapper span { font-size: 12px !important; }
	html body .filter-trigger-wrapper svg { width: 15px !important; height: 15px !important; }

	html body #filters-container .filter-items { flex-wrap: nowrap !important; gap: 4px !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; }
	html body #filters-container .filter-items .dropdown-filter { margin: 0 !important; flex-shrink: 0 !important; }
	html body #filters-container .filter-items .btn.btn-filter { font-size: 9.5px !important; padding: 2px 6px !important; margin: 0 !important; min-height: 0 !important; line-height: 1.4 !important; column-gap: 3px !important; white-space: nowrap !important; flex-shrink: 0 !important; }
	html body #filters-container .filter-items > .btn.btn-filter { margin: 3px 0 !important; }
	html body #filters-container .filter-items .btn-filter svg { width: 10px !important; height: 10px !important; margin: 0 !important; }
	html body #filters-container .filter-items .btn.btn-filter.dropdown-toggle::after { margin-left: 4px !important; }
	html body #filters-container .filter-items .apply_filters { font-size: 9.5px !important; padding: 2px 4px !important; line-height: 1.4 !important; white-space: nowrap !important; flex-shrink: 0 !important; }

	/* « Meilleures ventes » affiché « Top ventes » pour tenir sur une ligne */
	html body #filters-container .filter-items .btn-filter.btn-bestseller { font-size: 0 !important; }
	html body #filters-container .filter-items .btn-filter.btn-bestseller::after { content: "Top ventes"; font-size: 9.5px; line-height: 1.4; }

	/* iPhone : un filtre non sélectionné reste blanc (pas de survol « collant ») */
	html body #filters-container .btn-filter:not(.active),
	html body #filters-container .btn-filter:not(.active):hover,
	html body #filters-container .btn-filter:not(.active):focus,
	html body #filters-container .btn-filter:not(.active):active { background: #fff !important; border-color: #fff !important; box-shadow: none !important; opacity: 1 !important; }
	html body #filters-container .btn-filter:not(.active) svg { color: #1a3a6b !important; }
	html body #filters-container .btn-filter,
	html body #filters-container .apply_filters,
	html body .filter-trigger-wrapper { -webkit-tap-highlight-color: transparent; }
}

/* Pages de contenu (ex. « Étiquette kraft ») : titres de section entièrement en bleu.
   Le rouge du thème faisait croire à un lien (Clarity : clics sans effet sur ces titres). Le rouge reste réservé aux boutons. */
body:not(.home) .title.title-regular { color: #1a3a6b !important; }

/* Bandeaux bleus en haut des pages (formulaires, listings…) : l'extension Smush les traitait comme des images
   « en attente » (largeur 100 px et invisibles) puis les remettait en pleine largeur : le contenu sautait de ~70 px. */
header.bcover.lazyload,
header.bcover.lazyloading { width: auto !important; max-width: none !important; height: auto !important; aspect-ratio: auto !important; opacity: 1 !important; }

/* =============== 3. BANDEAU BLEU DES PAGES FORMULAIRES =============== */
/* Sans fil d'Ariane et compact, sur devis, retirage, règlement de facture et contact */
.page-id-10241 .header-page-wrapper .breadcrumb-wrapper,
.page-id-10237 .header-page-wrapper .breadcrumb-wrapper,
.page-id-10156 .header-page-wrapper .breadcrumb-wrapper,
.page-id-10158 .header-page-wrapper .breadcrumb-wrapper { display: none !important; }
.page-id-10241 .header-page-wrapper header.bcover,
.page-id-10237 .header-page-wrapper header.bcover,
.page-id-10156 .header-page-wrapper header.bcover,
.page-id-10158 .header-page-wrapper header.bcover { padding: 12px 0 !important; min-height: 0 !important; height: auto !important; }
.page-id-10241 .header-page-wrapper .row,
.page-id-10237 .header-page-wrapper .row,
.page-id-10156 .header-page-wrapper .row,
.page-id-10158 .header-page-wrapper .row { min-height: 0 !important; }

/* =============== 4. PAGE « DEMANDER UN DEVIS » (mise en page) =============== */

/* La colonne du formulaire ne dépasse jamais l'écran (Android) */
.page-id-10241 .devis-layout { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 992px) { .page-id-10241 .devis-layout { grid-template-columns: minmax(0, 1fr) 320px !important; } }
#gform_wrapper_9 select,
#gform_wrapper_9 input,
#gform_wrapper_9 textarea { max-width: 100% !important; }

/* Cadre blanc du formulaire */
.page-id-10241 .devis-form-card { padding-top: 14px !important; padding-bottom: 16px !important; }

/* Mobile / tablette : carte « Produit sélectionné » tout en haut, juste sous le bandeau */
@media (max-width: 991.98px) {
	.page-id-10241 .devis-page-wrapper { padding-top: 10px !important; }
	.page-id-10241 .devis-layout { row-gap: 12px !important; }
	.page-id-10241 .devis-layout .devis-sidebar { display: contents !important; }
	.page-id-10241 .devis-layout .devis-sidebar__product { order: -1 !important; margin: 0 !important; }
}

/* Formulaire de devis affiché dès le chargement (Gravity Forms le cachait jusqu'à la fin du chargement,
   puis l'affichait d'un coup : les blocs en dessous « sautaient » vers le bas, mesuré par Clarity). */
html body #gform_wrapper_9.gform_wrapper { display: block !important; }

/* Avant que Gravity Forms ait fini de se charger, on masque déjà les champs qu'il va masquer
   (sinon ils s'affichent une seconde puis disparaissent) :
   - devis depuis un modèle : Forme et Dimensions ; - « J'ai déjà mon étiquette » : police, impression, couleurs. */
#gform_wrapper_9[style*="display:none"]:has(#input_9_22:not([value=""]):not([value="Mon propre modèle"])) :is(#field_9_56, #field_9_57, #field_9_58),
#gform_wrapper_9[style*="display:none"]:has(#input_9_22[value="Mon propre modèle"]) :is(#field_9_54, #field_9_40, #field_9_41, #field_9_26, #field_9_25) { display: none !important; }

/* =============== 5. FORMULAIRE DE DEVIS (Gravity Forms 9) =============== */

/* « Étape x sur 3 », puis « * indique les champs nécessaires » en petit dessous */
#gform_wrapper_9 #gform_9 { margin-top: 0 !important; }
#gform_wrapper_9 .gform_heading .gform_required_legend { display: none !important; }
#gform_wrapper_9 #gf_progressbar_wrapper_9 { margin-bottom: 12px !important; }
#gform_wrapper_9 #gf_progressbar_wrapper_9::after { content: "\00AB\00A0*\00A0\00BB\00A0indique les champs nécessaires"; display: block; margin-top: 16px; font-size: 11px; line-height: 1.3; color: #6b7280; font-weight: 400; text-transform: none; letter-spacing: normal; }

/* Titres de section : « Modèle retenu » masqué, les autres sans gras */
#gform_wrapper_9 #field_9_20,
#gform_wrapper_9 #field_9_55 { display: none !important; }
#gform_wrapper_9 .gfield--type-section .gsection_title { font-weight: 400 !important; margin-top: 2px !important; }

/* Champs resserrés */
#gform_wrapper_9 .gform_fields { row-gap: 12px !important; }
#gform_wrapper_9 .gfield .ginput_container { margin-bottom: 4px !important; }
#gform_wrapper_9 .gform_page_fields .gfield:last-child .ginput_container { margin-bottom: 10px !important; }

/* Civilité : « Mme. » visible (une ancienne règle du thème masquait le 1er choix) */
#gform_wrapper_9 #field_9_15 .gchoice_9_15_0 { display: block !important; }

/* Mobile : textes d'aide des champs (« Longueur en mm », « Largeur en mm », « ex. 1 000 », téléphone) à 13 px, lisibles en entier.
   Seul le texte d'aide rapetisse : la saisie reste à 16 px pour éviter le zoom automatique sur iPhone. */
@media (max-width: 767.98px) {
	#gform_wrapper_9 #input_9_57,
	#gform_wrapper_9 #input_9_58 { padding-left: 12px !important; padding-right: 12px !important; }
	#gform_wrapper_9 input::placeholder,
	#gform_wrapper_9 textarea::placeholder { font-size: 13px !important; }
}

/* Case RGPD « J'accepte… » plus petite */
html body #gform_wrapper_9 #field_9_14 .gfield_consent_label { font-size: 11.5px !important; line-height: 1.4 !important; font-weight: 500 !important; }

/* Pied de chaque étape : pas de trait gris, peu d'espace */
#gform_wrapper_9 .gform_page_footer,
#gform_wrapper_9 .gform_footer { border-top: 0 !important; margin-top: 0 !important; padding: 4px 0 0 !important; }
#gform_wrapper_9 .gform_page_footer button,
#gform_wrapper_9 .gform_footer button { margin-bottom: 0 !important; }

/* Mention reCAPTCHA seulement à la dernière étape */
.devis-form-card .rbc-recaptcha-note { display: none !important; }
.devis-form-card:has(#gform_page_9_3:not([style*="none"])) .rbc-recaptcha-note { display: block !important; }

/* =============== 6. BOUTONS DES FORMULAIRES (même gabarit partout) =============== */

/* Gravity Forms : devis (Suivant / Précédent / Envoyer) et règlement de facture (Envoyer) */
html body #gform_wrapper_9 #gform_9 button.btn,
html body #gform_wrapper_9 #gform_9 .gform_next_button,
html body #gform_wrapper_9 #gform_9 .gform_previous_button,
html body #gform_wrapper_4 #gform_4 button.btn { min-width: 120px !important; padding: 7px 22px !important; font-size: 11.5px !important; border-radius: 8px !important; height: auto !important; min-height: 0 !important; line-height: 1.4 !important; }

/* WPForms : « Envoyer » (contact) au style de « Commander » (retirage), tous deux compacts */
#wpforms-20439 .wpforms-submit-container { text-align: center !important; }
#wpforms-20439 #wpforms-form-20439 button.wpforms-submit { width: auto !important; background: #e62c17 !important; border: 1px solid #e62c17 !important; color: #fff !important; font-weight: 600 !important; text-transform: uppercase !important; }
#wpforms-20439 #wpforms-form-20439 button.wpforms-submit:hover,
#wpforms-20439 #wpforms-form-20439 button.wpforms-submit:focus { background: #c52412 !important; border-color: #c52412 !important; }
#wpforms-20439 #wpforms-form-20439 button.wpforms-submit,
#wpforms-20457 #wpforms-form-20457 button.wpforms-submit { min-width: 120px !important; padding: 7px 22px !important; font-size: 11.5px !important; border-radius: 8px !important; height: auto !important; line-height: 1.4 !important; }

/* =============== 7. CASES « J'ACCEPTE… » (contact, retirage, facture) =============== */
html body #wpforms-20439 .wpforms-field-checkbox label.wpforms-field-label-inline,
html body #wpforms-20457 .wpforms-field-checkbox label.wpforms-field-label-inline,
html body #gform_wrapper_4 .gfield_consent_label { font-size: 11.5px !important; line-height: 1.4 !important; font-weight: 500 !important; }
html body #wpforms-20439 .wpforms-field-checkbox label.wpforms-field-label-inline em,
html body #wpforms-20439 .wpforms-field-checkbox label.wpforms-field-label-inline i,
html body #wpforms-20457 .wpforms-field-checkbox label.wpforms-field-label-inline em,
html body #wpforms-20457 .wpforms-field-checkbox label.wpforms-field-label-inline i { font-size: 10px !important; line-height: 1.4 !important; font-weight: 400 !important; }

/* =============== 8. ARTICLES ET TEXTES (blog, pages de contenu, présentations des listings) =============== */
/* Mots en gras : le thème les affichait tous en rouge (ancienne mise en avant de mots-clés pour le référencement).
   Partout : plus de rouge, couleur du texte. Dans les textes d'articles, de pages de contenu et de présentation des listings :
   plus de gras non plus à l'écran (demande de Thibaud). Les balises restent dans le code de la page (utiles pour Google et les IA). */
html body :is(p, li, td, dd, blockquote, h1, h2, h3, h4, h5, h6) :is(b, strong) { color: inherit; }
html body :is(.entry-content, .content-wrapper, .up-content-wrapper, .description-wrapper) :is(p, li) :is(b, strong) { font-weight: inherit; }
/* Liens dans le texte des articles : bleus et soulignés, pour être reconnus comme des liens (au lieu du rouge). */
html body :is(.entry-content, .content-wrapper, .up-content-wrapper) :is(p, li) a:not(.btn) { color: #1a3a6b !important; text-decoration: underline !important; text-underline-offset: 2px; }

/* ===== 9. ZONES CLIQUABLES MOBILE (04/11, demandé par Thibaud : clics difficiles sur iPhone) =====
   Seule la zone qu'on peut toucher grandit ; l'apparence ne change pas. */
@media (max-width:767.98px){
/* Accueil : les 2 gros boutons du haut. Zone invisible de 12 px en haut/bas et 14 px sur les côtés (l'écart de 32 px entre eux est conservé, les zones ne se touchent pas). */
html body.home section.hero .rbx-m-btns a{position:relative}
html body.home section.hero .rbx-m-btns a::before{content:"";position:absolute;top:-12px;bottom:-12px;left:-14px;right:-14px}
/* « Découvrir notre gamme » : chaque catégorie fait au moins 44 px de haut, et sa zone cliquable couvre toute la case (jusqu'au bord du bloc). */
html body .sector-submenu-grid a.sector-subitem{min-height:44px;position:relative}
html body .sector-submenu-grid a.sector-subitem::before{content:"";position:absolute;top:-1.5px;bottom:-1.5px;left:-1.5px;right:-1.5px}
html body .sector-submenu-grid a.sector-subitem:nth-child(odd)::before{left:-7px}
html body .sector-submenu-grid a.sector-subitem:nth-child(even)::before{right:-7px}
}

/* ===== 10. « DÉCOUVRIR NOTRE GAMME » MOBILE (04/11, demandé par Thibaud) : sans traits gris (cadre du bloc et lignes entre secteurs), espace réduit sous le titre. ===== */
@media (max-width:767.98px){
html body .rbx-gamme-page .parcours__card{border:none!important;padding-top:6px!important}
html body .rbx-gamme-page .sector-list{border-top:none!important;margin-top:2px!important}
html body .rbx-gamme-page .sector-item{border-bottom:none!important}
html body .rbx-gamme-page .rbx-gamme-intro{margin-bottom:4px!important}
html body .rbx-gamme-page section.parcours{padding-top:4px!important}
html body .content-page-wrapper:has(.rbx-gamme-page){margin-top:0!important}
}
/* Titres des bandeaux bleus centrés sur TOUTES les pages et tous les formulaires, mobile et ordinateur (04/11, demandé par Thibaud). */
html body header.bcover .page-title, html body header.bcover h1{text-align:center!important}


/* ===== 11. LISTINGS CATÉGORIE (04/11, validé par Thibaud) =====
   - « J'ai déjà mon étiquette » devient un petit bouton bleu (sans icône ni flèche), zone tactile agrandie de façon invisible
   - « Filtrer les résultats » (mobile) : plus de bandeau bleu, texte et icône en bleu
   - « 92 produits » masqué */
html body.tax-works_model div.text-center:has(> #header-description-links-t){margin:12px 0 6px!important}
html body.tax-works_model #header-description-links-t{display:inline-flex!important;box-sizing:border-box;min-height:30px;padding:0 12px;border-radius:7px;background:#1A3A6B;white-space:nowrap;position:relative;cursor:pointer;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.25)}
html body.tax-works_model #header-description-links-t::before{content:"";position:absolute;top:-8px;bottom:-8px;left:-6px;right:-6px}
html body.tax-works_model #header-description-links-t > svg{display:none!important}
html body.tax-works_model #header-description-links-t > span{font-size:0!important;padding:0!important}
html body.tax-works_model #header-description-links-t > span::after{content:"J’ai déjà mon étiquette : demander un devis";font-size:12px;font-weight:600;color:#fff}
html body .filter-trigger-wrapper{background:transparent!important}
html body .filter-trigger-wrapper a, html body .filter-trigger-wrapper span{color:#1A3A6B!important}
html body .filter-trigger-wrapper span{font-weight:600}
html body .filter-trigger-wrapper svg, html body .filter-trigger-wrapper svg *{fill:#1A3A6B!important}
html body .nb_products{display:none!important}
html body div.my-3:has(> .container > .nb_products:only-child){display:none!important}