/* ===========================================================================
   ADS Bricks Bridge — reproduit le rendu Storefront manquant sous Bricks.
   Chargé UNIQUEMENT sur le front rendu Bricks (cf. ads_enqueue_bridge()).
   Cible des IDs #brxe-<id> réels des templates header (151105) / footer (151106)
   et des classes de pont (shortcodes, nav-menu, widgets).
   =========================================================================== */

/* Base rem + police de corps. SCOPÉ au rendu Bricks (jamais html{} global qui
   fuiterait dans l'admin/éditeur — cf. skill §4). Corps = myriad-pro (Typekit),
   comme la prod ; couleur dark #464646 ; base 16px. */
body.bricks-is-frontend {
	font-family: "myriad-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #464646;
}
#brx-content, #brx-header, #brx-footer {
	font-size: 16px;
	font-family: "myriad-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #464646;
}
/* Le texte courant (paragraphes, listes, liens) hérite de myriad-pro 16px. */
#brx-content p, #brx-content li, #brx-content span, #brx-content a,
#brx-content .brxe-text-basic, #brx-content .brxe-text {
	font-family: "myriad-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   Header — pastilles CTA (pictos en ::before).
   --------------------------------------------------------------------------- */
#brxe-hbtn1::before,
#brxe-hbtn2::before,
#brxe-hbtn3::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
#brxe-hbtn1::before { background-image: url('../images/rendez-vous.png'); }
#brxe-hbtn2::before { background-image: url('../images/devis.png'); }
#brxe-hbtn3::before { background-image: url('../images/catalogue.png'); }

/* ---------------------------------------------------------------------------
   Header — nav-menu Bricks rendu brut (frontend.min.css absent).
   Reset en barre horizontale blanche, burger masqué en desktop.
   --------------------------------------------------------------------------- */
#brxe-hburger ul.bricks-nav-menu {
	list-style: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
#brxe-hburger ul.bricks-nav-menu > li { position: relative; }
#brxe-hburger ul.bricks-nav-menu a {
	display: block;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.95rem;
	padding: 14px 18px;
	line-height: 1;
}
#brxe-hburger ul.bricks-nav-menu a:hover { background: rgba(0,0,0,0.12); }

/* Sous-menu standard (non product_cat) : déroulant au survol. */
#brxe-hburger ul.bricks-nav-menu ul.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: #2e8b57;
	list-style: none;
	margin: 0;
	padding: 6px 0;
	z-index: 999;
}
#brxe-hburger ul.bricks-nav-menu li.menu-item-has-children:hover > ul.sub-menu { display: block; }
#brxe-hburger ul.bricks-nav-menu ul.sub-menu a { color: #fff; padding: 10px 16px; }

/* Burger masqué en desktop, menu visible. */
@media (min-width: 992px) {
	#brxe-hburger .bricks-mobile-menu-toggle { display: none !important; }
}
@media (max-width: 991px) {
	#brxe-hburger ul.bricks-nav-menu { display: none; }
	#brxe-hburger .bricks-mobile-menu-toggle { display: inline-flex !important; }
}

/* ---------------------------------------------------------------------------
   Mega-menu — la 1re entrée "Serres de jardin" déploie une grille de tuiles.
   Les tuiles sont produites par walker_nav_menu_start_el (.ads-mm__tile).
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
	#brxe-hburger ul.bricks-nav-menu > li.menu-item-has-children:hover > ul.sub-menu {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 12px;
		padding: 16px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: max-content;
		max-width: 1470px;
		background: #fff;
		box-shadow: 0 12px 28px rgba(0,0,0,0.18);
	}
	#brxe-hburger ul.bricks-nav-menu > li.menu-item-has-children:hover > ul.sub-menu > li { list-style: none; }
}
.ads-mm__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 294px;
	max-width: 100%;
	height: 200px;
	padding: 16px;
	color: #fff !important;
	text-decoration: none;
	text-align: center;
	text-transform: none !important;
	transition: filter .2s;
}
.ads-mm__tile:hover { filter: brightness(1.06); }
.ads-mm__icon { width: 76px; height: 76px; object-fit: contain; }
.ads-mm__label { font-size: 1.25rem; line-height: 1.2; font-family: 'Volkhov', Georgia, serif; }

/* ---------------------------------------------------------------------------
   Header sticky compact (Bricks ajoute .brx-sticky.scrolling).
   --------------------------------------------------------------------------- */
#brx-header.brx-sticky.scrolling #brxe-hshow,
#brx-header.brx-sticky.scrolling #brxe-htop { display: none; }
#brx-header.brx-sticky.scrolling #brxe-hmain { padding-top: 4px; padding-bottom: 4px; }
#brx-header.brx-sticky.scrolling #brxe-hlogo img { height: 60px !important; }
#brx-header.brx-sticky.scrolling { box-shadow: 0 2px 10px rgba(0,0,0,0.12); }

/* ---------------------------------------------------------------------------
   Footer — menus nav verticaux en blanc.
   --------------------------------------------------------------------------- */
#brxe-fInfoM ul.bricks-nav-menu,
#brxe-fSerresM ul.bricks-nav-menu,
#brxe-fAproposM ul.bricks-nav-menu {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
}
#brxe-fInfoM ul.bricks-nav-menu .bricks-mobile-menu-toggle,
#brxe-fSerresM ul.bricks-nav-menu .bricks-mobile-menu-toggle,
#brxe-fAproposM ul.bricks-nav-menu .bricks-mobile-menu-toggle { display: none !important; }
#brxe-fInfoM a, #brxe-fSerresM a, #brxe-fAproposM a {
	color: #fff;
	text-decoration: none;
	font-size: 0.9rem;
}
#brxe-fInfoM a:hover, #brxe-fSerresM a:hover, #brxe-fAproposM a:hover { text-decoration: underline; }
.ads-addr i { color: var(--brand-green); width: 18px; text-align: center; margin-right: 6px; }

/* ---------------------------------------------------------------------------
   Coups de cœur — boucle WooCommerce [products] (4-5 colonnes).
   --------------------------------------------------------------------------- */
.brxe-shortcode ul.products {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 1199px) { .brxe-shortcode ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .brxe-shortcode ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .brxe-shortcode ul.products { grid-template-columns: 1fr; } }
.brxe-shortcode ul.products li.product { text-align: center; }
.brxe-shortcode ul.products li.product img { margin: 0 auto 10px; }
/* Titre produit : myriad-pro 20px 600 (prod), PAS Volkhov. Taille en px (indép. base rem). */
.brxe-shortcode ul.products li.product .woocommerce-loop-product__title {
	font-family: "myriad-pro", Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: #464646;
}
.brxe-shortcode ul.products li.product .price {
	font-family: "myriad-pro", Helvetica, Arial, sans-serif;
	font-size: 20px;
	color: var(--brand-green);
	font-weight: 600;
}
.brxe-shortcode ul.products li.product .price .ads-price-from { font-size: 14px; font-weight: 400; color: #464646; }
.ads-loop-subtitle { font-family: "myriad-pro", Helvetica, Arial, sans-serif; color: #464646; font-size: 14px; margin: 2px 0; }
.ads-loop-excerpt { font-family: "myriad-pro", Helvetica, Arial, sans-serif; font-size: 14px; color: #464646; margin: 6px 0; }
.brxe-shortcode ul.products li.product .button {
	font-family: "myriad-pro", Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: var(--brand-green);
	background: transparent;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Slider hero (widget diaporama) — largeur 1470 centrée, sans voile/caption.
   --------------------------------------------------------------------------- */
.ads-hero-slider .slideshow,
.ads-hero-slider .owl-carousel {
	max-width: 1470px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}
.ads-hero-slider .slideshow__img img,
.ads-hero-slider .slideshow__item-media img {
	width: 100%;
	height: 597px;
	object-fit: cover;
	display: block;
}
/* Voile + caption (titre gravé dans le markup) masqués comme en prod. */
.ads-hero-slider .slideshow__item-media::before { display: none !important; }
.ads-hero-slider .slideshow__item-content { display: none !important; }
/* Contrôles owl + flèches : superposés au slider (above-inside), pas en dessous,
   pour ne pas ajouter de hauteur (slider = 597px net). */
.ads-hero-slider .owl-dots {
	position: absolute;
	left: 0; right: 0; bottom: 14px;
	display: flex; justify-content: center; gap: 8px;
	margin: 0; z-index: 3;
}
.ads-hero-slider .owl-dots .owl-dot span { background: rgba(255,255,255,0.6); }
.ads-hero-slider .owl-dots .owl-dot.active span { background: #fff; }
.ads-hero-slider .owl-nav,
.ads-hero-slider .slideshow__controls { position: absolute; inset: 0; pointer-events: none; margin: 0; z-index: 2; }
.ads-hero-slider .owl-nav button,
.ads-hero-slider .slideshow__control { pointer-events: auto; }

/* ---------------------------------------------------------------------------
   FAQ accordéon — état ouvert/fermé + icône +/-.
   --------------------------------------------------------------------------- */
.faq .accordion-v2__item { border-bottom: 1px solid rgba(0,0,0,0.12); background: transparent; }
.faq .accordion-v2__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 16px 0;
	font-family: 'Volkhov', Georgia, serif;
	font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
	color: var(--dark);
	text-align: left;
}
.faq .accordion-v2__panel { display: none; }
.faq .accordion-v2__item--is-open .accordion-v2__panel,
.faq .accordion-v2__item--is-open .js-accordion__panel { display: block; }
.faq .accordion-v2__content { padding: 0 0 16px; }
.faq .accordion__icon { position: relative; width: 18px; height: 18px; flex: 0 0 18px; }
.faq .accordion__icon-bar { position: absolute; top: 50%; left: 0; width: 18px; height: 2px; background: var(--brand-green); }
.faq .accordion__icon-bar.vertical { transform: rotate(90deg); transition: opacity .2s; }
.faq .accordion-v2__item--is-open .accordion__icon-bar.vertical { opacity: 0; }

/* ---------------------------------------------------------------------------
   Réalisations — grille 4 colonnes de vignettes carrées + bouton.
   --------------------------------------------------------------------------- */
.ads-realisations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 991px) { .ads-realisations-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .ads-realisations-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------------------
   Réalisations — ARCHIVE (CPT a3web_realisation, slug nos-realisations).
   Le corps est rendu par le plugin (archive-a3web_realisation.php) dans le
   markup Storefront #primary > #main, enveloppé du header/footer Bricks.
   La grille .posts-wrapper.grid, les cartes, les filtres accordéon et la
   pagination .page-numbers sont DÉJÀ stylés par a3web-realisations-public.css.
   Le pont se limite donc à : (1) contenir le contenu à 1470px centré (prod
   = .col-full, sinon il déborde plein écran 1920), (2) titre Volkhov.
   NOTE DOM : #primary.content-area est enfant DIRECT de <body> (le template
   d'archive du plugin n'est PAS enveloppé dans #brx-content) → on cible
   #primary directement, scopé à la classe body de l'archive. */
body.post-type-archive-a3web_realisation #primary,
body.post-type-archive-a3web_realisation .content-area {
	max-width: 1470px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	float: none;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}
/* Base rem = 16px (comme prod) UNIQUEMENT sur l'archive. Bricks pose
   html{font-size:10px} (62.5%) → le CSS du plugin, en rem (libellés filtres
   0.9rem, compteurs 0.75rem, titres de cartes 1rem), rendait ~9px/7.5px au lieu
   de 14.4px/12px. `rem` se réfère à <html>, pas à #primary, d'où le ciblage
   racine. Scopé par :has(body de l'archive) → ne touche ni l'admin ni l'éditeur
   (bridge non chargé en ?bricks=run), pas de html{} global (cf. note §base). */
html:has(body.post-type-archive-a3web_realisation) { font-size: 16px; }
/* Le header Bricks est position:fixed (~297px déroulé) et recouvre le haut de
   #primary (enfant direct de body, hors flux du contenu Bricks). Sans header
   en flux comme Storefront, le H1 + filtres + 1res vignettes passaient SOUS le
   header. On décale donc le contenu d'archive sous le header fixe. */
body.post-type-archive-a3web_realisation #primary {
	padding-top: 65px;
}
@media (max-width: 991px) {
	body.post-type-archive-a3web_realisation #primary { padding-top: 140px; }
}
/* H1 « Nos réalisations » en Volkhov (cohérence titres prod), couleur dark. */
body.post-type-archive-a3web_realisation .page-header .page-title,
body.post-type-archive-a3web_realisation h1.archive-title {
	font-family: 'Volkhov', Georgia, serif;
	color: var(--dark, #464646);
}

/* ---------------------------------------------------------------------------
   Avis Google (Trustindex) — étoiles hydratées.
   --------------------------------------------------------------------------- */
.ti-star-img { display: inline-block; height: 18px; width: auto; }