/* ==========================================================================
   Expoz - Refonte 2026 - Page détail produit (prototype)
   ========================================================================== */

:root{
	--navy:        #10577A;
	--navy-dark:   #0B3D57;
	--navy-darker: #002740;
	--navy-footer: #004461;
	--cyan:        #3EC6EA;
	--cyan-strong: #00B3E3;
	--btn-grad-a:  #1789C9;
	--btn-grad-b:  #00B3E3;
	--grey-bg:     #F8F8F8;
	--border:      #E3E7EA;
	--text-muted:  #6B808A;
	--radius-lg:   20px;
	--radius-md:   14px;
}

.pd26{ font-family:'Red Hat Display', sans-serif; color:#1c2b33; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
.pd26 a{ transition:all .2s ease; }
.pd26 h1,.pd26 h2,.pd26 h3{ font-family:'Red Hat Display', sans-serif; margin:0; }
.pd26 img{ max-width:100%; }

/* Bootstrap ne fixe le container qu'en `width` (1170px à partir de 1200px) : notre
   `max-width` seul ne le contraint donc jamais. On surcharge aussi en `width`,
   avec deux paliers supplémentaires pour les très grands écrans (façon Bootstrap 5.3). */
@media (min-width: 1200px){ .pd26 .container{ width:1300px; } }
@media (min-width: 1400px){ .pd26 .container{ width:1320px; } }
@media (min-width: 1600px){ .pd26 .container{ width:1520px; } }

/* ---------- Header ---------- */
.pd26-topbar{ background:#fff; padding:18px 0; }
.pd26-topbar .row{ display:flex; align-items:center; margin-left:0; margin-right:0; }
.pd26-logo img{ height:44px; }
.pd26-top-actions{ display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-left:auto; }
.pd26-icon-circle{ width:42px; height:42px; border-radius:50%; border:2px solid var(--navy); display:flex; align-items:center; justify-content:center; color:var(--navy); font-size:16px; flex:0 0 auto; }
.pd26-icon-circle:hover{ background:var(--navy); color:#fff; }
.pd26-search{ position:relative; flex:0 0 auto; width:220px; }
.pd26-search input{ width:100%; height:42px; border:1px solid var(--border); border-radius:21px; padding:0 46px 0 18px; font-size:13px; background:var(--grey-bg); }
.pd26-search button{ position:absolute; right:4px; top:4px; width:34px; height:34px; border-radius:50%; border:0; background:var(--navy); color:#fff; }
.pd26-search-nav{ display:none; }
.pd26-badge-icon{ position:relative; color:var(--navy); font-size:20px; }
.pd26-badge-icon .badge{ position:absolute; top:-8px; right:-10px; background:var(--cyan-strong); color:#fff; font-size:10px; font-weight:700; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
.pd26-lang{ display:flex; align-items:center; gap:5px; font-weight:700; color:var(--navy); font-size:13px; cursor:pointer; }
.pd26-lang img{ width:18px; }

.pd26-nav{ background:var(--navy-darker); }
.pd26-nav > .container{ display:flex; align-items:stretch; justify-content:space-between; position:relative; }
.pd26-nav > .container > ul{ list-style:none; margin:0; padding:0; display:flex; align-items:stretch; }
.pd26-nav > .container > ul > li{ display:flex; align-items:stretch; }
.pd26-nav > .container > ul > li > a{ display:flex; align-items:center; padding:16px 26px; color:#fff; font-weight:700; text-decoration:none; font-size:14px; white-space:nowrap; }
.pd26-nav > .container > ul > li > a:hover{ color:var(--cyan); }
.pd26-nav > .container > ul > li > a.active{ background:var(--cyan); color:var(--navy-darker); }
.pd26-nav > .container > ul > li > a .fa{ font-size:11px; margin-left:6px; transition:transform .2s ease; }
.pd26-nav > .container > ul > li > a.open .fa-chevron-down{ transform:rotate(180deg); }
.pd26-nav > .container > ul > li.pd26-nav-extra{ display:none; }
.pd26-nav > .container > ul > li > a{ outline:none; }
.pd26-nav > .container > ul > li > a:focus{ outline:none; }
.pd26-nav-toggle{ display:none; align-self:center; margin-left:auto; margin-right:15px; border:2px solid #fff; border-radius:8px; background:transparent; padding:8px 10px; color:#fff; width:42px; height:38px; text-align:center; }

/* ---------- Méga-menu "Nos produits" ---------- */
.pd26-megamenu{ position:absolute; left:0; right:0; top:100%; background:#fff; border-top:3px solid var(--cyan-strong); box-shadow:0 18px 34px rgba(0,20,35,.18); z-index:50; padding:30px 0 10px; max-height:calc(100vh - 140px); overflow-y:auto;
	opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
	transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.pd26-megamenu.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:opacity .22s ease, transform .22s ease, visibility 0s linear 0s; }
.pd26-mega-row{ display:flex; flex-wrap:wrap; margin-bottom:10px; }
.pd26-mega-col{ width:25%; padding:0 15px 20px; box-sizing:border-box; }
.pd26-mega-title{ margin-bottom:10px; }
.pd26-mega-title a{ color:var(--navy); font-size:15px; font-weight:800; text-transform:uppercase; text-decoration:none; letter-spacing:.2px; }
.pd26-mega-title a:hover{ color:var(--cyan-strong); }
.pd26-mega-col ul{ list-style:none; margin:0; padding:0; }
.pd26-mega-col li{ margin-bottom:5px; }
.pd26-mega-col a{ display:block; color:#3a4a52; font-size:12.5px; line-height:17px; text-decoration:none; }
.pd26-mega-col a:hover{ color:var(--cyan-strong); }
.pd26-mega-col a .fa{ font-size:10px; margin-right:6px; color:var(--cyan-strong); }

/* ---------- Breadcrumb (within hero) ---------- */
.pd26-breadcrumb{ font-size:12px; color:var(--navy-darker); }
.pd26-breadcrumb a{ color:var(--navy-darker); text-decoration:none; }
.pd26-breadcrumb a:after{ content:"›"; margin:0 6px; }
.pd26-breadcrumb span{ font-weight:700; }

/* ---------- Gallery ---------- */
.pd26-gallery{ background:var(--cyan); border-radius:var(--radius-lg); padding:26px; position:relative; margin-bottom:20px; }
.pd26-gallery-stage{ position:relative; min-height:420px; display:flex; align-items:center; justify-content:center; padding:40px 60px; }
.pd26-gallery-stage img{ max-height:480px; width:auto; }
.pd26-top-badge{ position:absolute; left:20px; top:10px; width:110px; height:110px; border-radius:50%; border:2px solid var(--navy-darker); display:flex; align-items:center; justify-content:center; text-align:center; font-weight:800; color:var(--navy-darker); font-size:14px; line-height:1.25; text-transform:uppercase; background:rgba(255,255,255,.15); }
.pd26-arrow{ position:absolute; top:50%; margin-top:-21px; width:42px; height:42px; border-radius:50%; background:var(--navy-darker); color:#fff; border:0; display:flex; align-items:center; justify-content:center; font-size:16px; }
.pd26-arrow:hover{ background:var(--navy); }
.pd26-arrow.prev{ left:10px; }
.pd26-arrow.next{ right:10px; }
.pd26-thumbs{ display:flex; gap:14px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.pd26-thumb{ width:84px; height:84px; border-radius:12px; background:#fff; border:2px solid transparent; padding:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.pd26-thumb img{ max-width:100%; max-height:100%; }
.pd26-thumb.empty{ background:transparent; border:2px solid var(--navy-darker); opacity:.5; }
.pd26-thumb.active{ border-color:var(--navy-darker); }

/* ---------- Product info / configurator ---------- */
.pd26-title{ font-size:30px; font-weight:800; color:var(--navy); margin-bottom:14px; }
.pd26-lead{ color:#3a4a52; font-size:15px; line-height:1.6; margin-bottom:24px; }

.pd26-config-heading{ font-size:19px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.pd26-config-heading + hr{ border:0; border-top:2px solid var(--navy); margin:0 0 20px; opacity:.25; }

.pd26-config-card{ display:flex; align-items:center; gap:16px; border:1px solid var(--border); background:var(--grey-bg); border-radius:var(--radius-md); padding:14px 18px; margin-bottom:14px; cursor:pointer; text-align:left; width:100%; }
.pd26-config-card:hover{ border-color:var(--cyan-strong); }
.pd26-config-card .thumb{ width:56px; height:56px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.pd26-config-card .thumb img{ max-width:100%; max-height:100%; }
.pd26-config-card .thumb .fa{ font-size:30px; color:var(--navy); }
.pd26-config-card .body{ flex:1 1 auto; }
.pd26-config-card .label-row{ display:flex; justify-content:space-between; align-items:baseline; }
.pd26-config-card .label{ font-weight:800; color:var(--navy); font-size:16px; }
.pd26-config-card .meta{ font-size:12px; color:var(--cyan-strong); font-weight:700; text-transform:none; }
.pd26-config-card .value{ color:#3a4a52; font-size:14px; margin-top:2px; }
.pd26-config-card .value b{ color:var(--navy-darker); }

.pd26-qty-cta{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:8px; }
.pd26-qty{ display:flex; align-items:center; gap:14px; font-weight:700; color:var(--navy-darker); }
.pd26-qty .stepper{ display:flex; align-items:center; gap:10px; }
.pd26-qty button{ width:32px; height:32px; border-radius:50%; border:2px solid var(--navy-darker); background:#fff; color:var(--navy-darker); font-size:14px; line-height:1; }
.pd26-qty input{ width:56px; text-align:center; border:0; font-weight:800; font-size:16px; color:var(--navy-darker); background:transparent; }
.pd26-btn-primary{ background:linear-gradient(90deg, var(--btn-grad-a), var(--btn-grad-b)); color:#fff; border:0; border-radius:30px; padding:15px 32px; font-weight:800; font-size:15px; text-decoration:none; display:inline-block; box-shadow:0 10px 20px rgba(0,150,210,.25); }
.pd26-btn-primary:hover{ color:#fff; opacity:.92; }
.pd26-contact-icons{ display:flex; gap:16px; margin-top:22px; }

/* ---------- Overlay popup (configurator choices) ---------- */
.pd26-overlay{
	position:fixed; inset:0; background:rgba(11,20,25,.55); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;
	opacity:0; visibility:hidden; pointer-events:none;
	transition:opacity .22s ease, visibility 0s linear .22s;
}
.pd26-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .22s ease, visibility 0s linear 0s; }
.pd26-popup{
	background:#fff; border-radius:var(--radius-lg); max-width:520px; width:100%; max-height:86vh; overflow-y:auto; padding:30px; position:relative;
	transform:translateY(-10px); transition:transform .22s ease;
}
.pd26-overlay.open .pd26-popup{ transform:translateY(0); }
.pd26-popup h3{ color:var(--navy); font-size:20px; font-weight:800; margin-bottom:18px; }
.pd26-popup-close{ position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:#fff; color:var(--navy-darker); }
.pd26-option{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--border); border-radius:12px; padding:12px 16px; margin-bottom:10px; cursor:pointer; }
.pd26-option:hover{ border-color:var(--cyan-strong); }
.pd26-option.selected{ border-color:var(--cyan-strong); background:rgba(62,198,234,.08); }
.pd26-option .txt strong{ display:block; color:var(--navy-darker); font-size:14px; }
.pd26-option .txt span{ color:var(--text-muted); font-size:12px; }
.pd26-option .radio-dot{ width:20px; height:20px; border-radius:50%; border:2px solid var(--navy); flex:0 0 auto; position:relative; }
.pd26-option.selected .radio-dot:after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--navy); }
.pd26-option .qty-inline{ display:flex; align-items:center; gap:8px; }
.pd26-option .qty-inline button{ width:26px; height:26px; border-radius:50%; border:1px solid var(--navy); background:#fff; }
.pd26-option-info{ margin-top:6px; }
.pd26-option-info summary{ display:inline-flex; align-items:center; gap:5px; list-style:none; cursor:pointer; color:var(--cyan-strong); font-size:12px; font-weight:700; }
.pd26-option-info summary::-webkit-details-marker{ display:none; }
.pd26-option-info summary .fa{ font-size:12px; }
.pd26-option-info[open] summary{ margin-bottom:8px; }
.pd26-option-info > div{ color:var(--text-muted); font-size:12.5px; line-height:1.6; font-weight:400; }

/* ---------- Tabs / descriptif ---------- */
.pd26-tabs{ margin-top:0; }
.pd26-tab-nav{ display:flex; gap:28px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:22px; }
.pd26-tab-nav button{ border:0; background:none; padding:10px 0 16px; font-size:16px; font-weight:700; color:var(--text-muted); position:relative; }
.pd26-tab-nav button.active{ color:var(--navy); }
.pd26-tab-nav button.active:after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--navy); border-radius:3px; }
.pd26-tab-panel{ display:none; background:var(--grey-bg); border-radius:var(--radius-lg); padding:28px; }
.pd26-tab-panel.active{ display:block; }
.pd26-tab-panel h4{ color:var(--navy); font-weight:800; font-size:18px; margin-bottom:14px; }
.pd26-tab-panel ul{ list-style:none; padding:0; margin:0 0 30px; }
.pd26-tab-panel ul li{ padding:5px 0; color:#3a4a52; }
.pd26-fiche-link{ display:inline-flex; align-items:center; gap:8px; color:var(--navy); font-weight:700; text-decoration:none; }
.pd26-fiche-link .fa{ font-size:18px; }
.pd26-tab-head-row{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; }

/* ---------- Related products ---------- */
.pd26-related{ margin-top:60px; }
.pd26-related-heading{ font-size:19px; font-weight:800; color:var(--navy); margin-bottom:18px; border-bottom:2px solid var(--navy); padding-bottom:14px; opacity:.95; }
.pd26-related-track{ display:flex; gap:18px; overflow:hidden; }
.pd26-related-track a{ flex:0 0 auto; width:170px; display:block; border-radius:var(--radius-md); overflow:hidden; }
.pd26-related-track img{ width:100%; display:block; }
.pd26-related-wrap{ position:relative; }
.pd26-related-arrow{ width:38px; height:38px; border-radius:50%; background:var(--navy-darker); color:#fff; border:0; position:absolute; top:50%; margin-top:-19px; z-index:5; }
.pd26-related-arrow:hover{ background:var(--navy); }
.pd26-related-arrow.prev{ left:-10px; }
.pd26-related-arrow.next{ right:-10px; }
.pd26-related .owl-stage{ display:flex; }
.pd26-related .owl-item{ padding:0 8px; }
.pd26-related .owl-item > a{ display:block; border-radius:var(--radius-md); overflow:hidden; }

/* ---------- Footer ---------- */
.pd26-footer{ background:var(--navy-footer); color:#fff; margin-top:70px; padding-top:50px; }
.pd26-footer a{ color:#fff; }
.pd26-footer-logo{ height:46px; margin-bottom:16px; }
.pd26-footer-address{ font-size:13px; line-height:1.9; opacity:.9; }
.pd26-footer-address a{ opacity:.95; }
.pd26-newsletter{ margin-top:16px; }
.pd26-newsletter .title{ font-size:22px; font-weight:800; margin-bottom:6px; }
.pd26-newsletter .sub{ font-size:12px; opacity:.75; margin-bottom:16px; }
.pd26-newsletter form{ display:flex; gap:10px; flex-wrap:wrap; }
.pd26-newsletter input[type=email]{ flex:1 1 260px; height:44px; border-radius:22px; border:0; padding:0 20px; font-size:13px; }
.pd26-newsletter button{ height:44px; padding:0 28px; border-radius:22px; border:0; background:var(--cyan-strong); color:#fff; font-weight:800; }
.pd26-footer-bottom{ border-top:1px solid rgba(255,255,255,.15); margin-top:40px; padding:18px 0; font-size:12px; opacity:.85; }
.pd26-footer-bottom a{ margin-right:16px; text-decoration:none; }
.pd26-footer-bottom a:hover{ text-decoration:underline; }

@media (max-width: 991px){
	.pd26-nav > .container{ flex-wrap:wrap; justify-content:flex-end; position:relative; }
	.pd26-nav > .container > ul{
		position:absolute; left:0; right:0; top:100%; width:100%; flex-direction:column;
		background:var(--navy-darker); box-shadow:0 18px 34px rgba(0,20,35,.18);
		max-height:calc(100vh - 70px); overflow-y:auto; z-index:60;
		opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
		transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
	}
	.pd26-nav > .container > ul.open{
		opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
		transition:opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
	}
	.pd26-nav > .container > ul > li{ width:100%; flex-direction:column; align-items:stretch; }
	.pd26-nav > .container > ul > li > a{ padding:14px 15px; }
	.pd26-nav > .container > ul > li > a.active{ padding:14px 15px; }
	.pd26-nav > .container > ul > li.pd26-nav-extra{ display:flex; border-top:1px solid rgba(255,255,255,.15); margin-top:6px; padding-top:6px; }
	.pd26-nav-extra a{ gap:10px; }
	.pd26-nav-extra a .fa{ font-size:15px; width:18px; text-align:center; margin-left:0; }
	.pd26-nav-lang img{ width:18px; }
	.pd26-nav-lang .fa-caret-down{ margin-left:auto; font-size:12px; }
	.pd26-nav-toggle{ display:inline-block; margin:10px 0; }
	.pd26-topbar .pd26-icon-circle,
	.pd26-topbar .pd26-lang{ display:none; }
	.pd26-topbar .pd26-search{ display:none; }
	.pd26-search-nav{ display:block; flex:1 1 auto; width:auto; margin:10px 12px 10px 0; }
	.pd26-search-nav input{ background:#fff; }
	.pd26-search-nav button{ background:var(--cyan-strong); }
	.pd26-title{ font-size:24px; }

	.pd26-megamenu{ display:none; position:static; box-shadow:none; border-top:1px solid rgba(255,255,255,.15); background:var(--navy-dark); padding:6px 0; max-height:none; overflow:visible;
		opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:none;
	}
	.pd26-megamenu.open{ display:block; }
	.pd26-mega-row{ flex-direction:column; margin-bottom:0; }
	.pd26-mega-col{ width:100%; padding:12px 15px; border-bottom:1px solid rgba(255,255,255,.1); }
	.pd26-mega-title a{ color:#fff; }
	.pd26-mega-col a{ color:rgba(255,255,255,.75); padding:4px 0; }
	.pd26-mega-col a:hover{ color:var(--cyan); }

	/* Ordre d'affichage : galerie, puis configurateur, puis descriptif (onglets) */
	.pd26-main-row{ display:flex; flex-direction:column; }
	.pd26-main-row > .col-md-6:first-child{ display:contents; }
	/* `display:contents` supprime le padding de 15px de la colonne : on le restitue ici */
	.pd26-gallery{ order:1; margin-left:15px; margin-right:15px; }
	.pd26-main-row > .col-md-6:last-child{ order:2; }
	.pd26-tabs{ order:3; margin-top:40px; margin-left:15px; margin-right:15px; }
}
@media (max-width: 767px){
	.pd26-top-actions{ gap:8px; }
	.pd26-icon-circle{ width:36px; height:36px; font-size:14px; }
	.pd26-gallery-stage{ min-height:280px; padding:20px; }
	.pd26-gallery-stage img{ max-height:280px; }
	.pd26-tab-panel{ padding:22px; }
}