/* ==========================================================================
   BARQUE DE PECHE - Refonte design (2026)
   Feuille de style principale du theme enfant "barquedepeche"
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. PLACEHOLDER VISUALS (paths relative to this CSS file, domain-safe)
   -------------------------------------------------------------------------- */
[class*="bdp-ph-"] {
    background-color: #e6e9e8;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bdp-ph-wide {
    background-image: url("../img/placeholders/placeholder-wide.jpg");
}
.bdp-ph-landscape {
    background-image: url("../img/placeholders/placeholder-landscape.jpg");
}
.bdp-ph-landscape-sm {
    background-image: url("../img/placeholders/placeholder-landscape-sm.jpg");
}
.bdp-ph-square {
    background-image: url("../img/placeholders/placeholder-square.jpg");
    background-size: contain;
}
.bdp-ph-portrait {
    background-image: url("../img/placeholders/placeholder-portrait.jpg");
}
.bdp-ph-gallery-main {
    background-image: url("../img/placeholders/placeholder-gallery-main.jpg");
    background-size: contain;
}
.bdp-ph-gallery-thumb {
    background-image: url("../img/placeholders/placeholder-gallery-thumb.jpg");
    background-size: contain;
}

/* --------------------------------------------------------------------------
   1. FONTS & DESIGN TOKENS
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Bebas Neue";
    src: url("../fonts/BebasNeue-Regular.woff2") format("woff2");
    font-display: swap;
}

:root {
    --bdp-teal: #00a19a;
    --bdp-teal-dark: #007b76;
    --bdp-teal-light: #e3f4f3;
    --bdp-orange: #fa7e25;
    --bdp-dark: #2c2c2b;
    --bdp-dark-soft: #3c3c3b;
    --bdp-grey: #6e7675;
    --bdp-grey-light: #f4f6f6;
    --bdp-border: #e1e6e5;
    --bdp-font-title: "Bebas Neue", "Arial Narrow", sans-serif;
    --bdp-font-mono: "JetBrains Mono", "Courier New", monospace;
    --bdp-radius: 2px;
}

body,
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    color: #333;
}

#wrapper {
    padding-top: 0;
}

.container {
    width: 1400px;
}
.breadcrumb,
#js-product-list-header,
#subcategories,
#products,

/* .page-category #main, */
.page-authentication #main {
    width: 1400px;
    margin: 0 auto;
}

/* .bdp-cat-content-grid {
    width: 1400px;
} */

#wrapper .breadcrumb {
    padding: 15px 0;
}

#wrapper > .container {
    width: 100% !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.bdp-title,
.page-header h1,
.h1,
.h2 {
    font-family: var(--bdp-font-title);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--bdp-dark);
}

a {
    color: var(--bdp-teal);
}

a:hover,
a:focus {
    color: var(--bdp-teal-dark);
}

/* Generic buttons used across the new design */
.bdp-btn {
    display: inline-block;
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
    padding: 0.75em 1.6em;
    border-radius: var(--bdp-radius);
    border: 1px solid transparent;
    text-align: center;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}
.bdp-btn-dark {
    background: var(--bdp-dark-soft);
    color: #fff !important;
    border-color: var(--bdp-dark-soft);
}
.bdp-btn-dark:hover {
    background: #111;
    border-color: #111;
    color: #fff !important;
}
.bdp-btn-outline {
    background: #fff;
    color: var(--bdp-dark) !important;
    border-color: #d7dbdb;
}
.bdp-btn-outline:hover {
    border-color: var(--bdp-dark);
}
.bdp-btn-teal {
    background: var(--bdp-teal);
    color: #fff !important;
    border-color: var(--bdp-teal);
}
.bdp-btn-teal:hover {
    background: var(--bdp-teal-dark);
    border-color: var(--bdp-teal-dark);
}
.bdp-btn-orange {
    background: var(--bdp-orange);
    color: #fff !important;
    border-color: var(--bdp-orange);
}
.bdp-btn-orange:hover {
    background: #e0691a;
    border-color: #e0691a;
}
.bdp-btn-block {
    display: block;
    width: 100%;
}

/* Section wave / texture background (used to echo the concentric circles in the mockup) */
.bdp-section-wave {
    position: relative;
    background-color: var(--bdp-teal-light);
    background-image: url("../img/sections/bateaux.png");
    /* radial-gradient(
            circle at 15% 30%,
            rgba(0, 161, 154, 0.08) 0,
            rgba(0, 161, 154, 0.08) 2px,
            transparent 3px
        ),
        radial-gradient(
            circle at 15% 30%,
            rgba(0, 161, 154, 0.06) 0,
            transparent 60%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(0, 161, 154, 0.06) 0,
            transparent 55%
        ); */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
.bdp-section-teal {
    background: linear-gradient(135deg, #00a19a 0%, #00c2b8 100%);
    color: #fff;
}
.bdp-section-teal h1,
.bdp-section-teal h2,
.bdp-section-teal h3 {
    color: #fff;
}
.bdp-section-white {
    background: #fff;
}
.bdp-section {
    padding: 3.5rem 0;
}

.bdp-eyebrow {
    display: block;
    font-family: var(--bdp-font-title);
    color: var(--bdp-teal);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   2. HEADER
   -------------------------------------------------------------------------- */
.header-banner {
    background: var(--bdp-dark);
}

/* Top teal preheader bar : phone + "devis gratuit" */
.header-nav {
    background-color: var(--bdp-teal);
}
.custom-preheader {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
}
.custom-preheader .left-nav {
    color: #fff;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    min-height: 40px;
}
.custom-preheader .left-nav a {
    color: #fff;
    font-weight: 700;
}
.custom-preheader .right-nav {
    display: flex;
    justify-content: flex-end;
    padding: 0;
}

#_desktop_contact_link {
    display: flex;
    align-items: center;
}

#contact-link {
    margin-top: 0 !important;
}
.devis-gratuit {
    display: flex;
    align-items: center;
    background: var(--bdp-dark-soft);
    height: 40px;
}
.devis-gratuit > a {
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 1.5rem;
    color: #fff !important;
}
.devis-gratuit:hover {
    background: #111;
}

/* Main header row : logo / search / account+cart */
.header-top {
    background: #fff;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--bdp-border);
}
.header-top .row {
    align-items: center;
}
#_desktop_logo img {
    max-height: 55px;
}

.header-top-right {
    display: flex;
    align-items: center;
}

.custom-user-info-container {
    display: flex;
    gap: 15px;
    width: 30%;
    align-items: center;
    justify-content: flex-end;
}

.user-info .hidden-sm-down,
.header .hidden-sm-down {
    display: none;
}
.custom-search-container {
    display: flex;
    width: 70%;
    align-items: center;
    justify-content: center;
}
.custom-search-container .search-widgets {
    background: var(--bdp-grey-light);
    border: 1px solid var(--bdp-border);
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 0.25rem 0 1rem;
}

#search_widget {
    width: 100%;
}
.search-widgets form {
    display: flex;
    align-items: center;
    width: 100%;
}
.search-widgets input[type="text"] {
    border: none;
    background: transparent;
    flex: 1;
    padding: 0.55rem 0.5rem;
    font-size: 0.9rem;
}
.search-widgets input[type="text"]:focus {
    outline: none;
}

.search-widgets i.material-icons.search {
    color: var(--bdp-grey);
}

#search_widget form i {
    padding: 0;
}

#bdp-user-info-widget .user-info a,
#bdp-cart-widget .cart-preview .header a {
    color: var(--bdp-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}
#bdp-cart-widget .blockcart.cart-preview > .header {
    background: transparent;
}
#bdp-cart-widget .blockcart.cart-preview > .header a {
    padding: 0;
}

/* Main navigation (categories) - full width bar under the header */
#_desktop_top_menu,
.js-top-menu {
    background: #fff;
    border-top: 1px solid var(--bdp-border);
    border-bottom: 3px solid var(--bdp-dark);
    width: 100%;
}
#_desktop_top_menu #top-menu {
    display: flex;
    flex-wrap: wrap;
    width: 1400px;
    justify-content: flex-end;
    margin: 0 auto 0 auto;
    gap: 15px;
}
#_desktop_top_menu > ul > li > a,
#_desktop_top_menu #top-menu > li > a {
    font-family: var(--bdp-font-title);
    font-size: 1.2rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bdp-dark);
    padding: 0.9rem 0.9rem;
    font-weight: 500 !important;
}
#_desktop_top_menu #top-menu > li > a:hover {
    color: var(--bdp-teal);
}
/* Highlight "Promos" like in the mockup (last menu item) */
#_desktop_top_menu #top-menu > li:last-child > a {
    color: var(--bdp-orange) !important;
    font-weight: 700;
}

/* Mega menu : miniatures des (sous-)categories dans le menu deroulant.
   $node.image_urls (module ps_mainmenu) fournit un <img> par categorie ;
   par defaut le theme classic ne le stylait pas du tout (image brute, non
   dimensionnee). On transforme la liste des sous-categories en grille de
   cartes avec vignette. */
#_desktop_top_menu .sub-menu {
    background: #fff;
    border: 1px solid var(--bdp-border);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
}
@media (min-width: 768px) {
    #_desktop_top_menu .top-menu[data-depth="0"] > li {
        position: static;
    }
    #_desktop_top_menu .top-menu[data-depth="0"] .sub-menu {
        left: 50%;
        width: 1400px;
        max-width: calc(100vw - 40px);
        margin-left: 0;
        transform: translateX(-50%);
    }
}
#_desktop_top_menu .sub-menu ul[data-depth="1"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.25rem;
}
#_desktop_top_menu .sub-menu ul[data-depth="1"] > li {
    float: none;
    margin: 0;
    border-bottom: 0;
}
#_desktop_top_menu .sub-menu ul[data-depth="1"] > li > a.dropdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 0.6rem;
    white-space: normal;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: var(--bdp-dark);
    font-family: "Bebas Neue", "Arial Narrow", sans-serif;
    font-weight: 500;
}
#_desktop_top_menu .sub-menu ul[data-depth="1"] > li > a.dropdown-item:hover {
    border-color: var(--bdp-teal);
    background: var(--bdp-teal-light);
    color: var(--bdp-teal-dark);
}
#_desktop_top_menu .sub-menu ul[data-depth="1"] > li > a.dropdown-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--bdp-border);
    background: #fff;
}

/* Panneau lateral (3e niveau) : au survol d'une sous-categorie DANS le mega
   menu deja ouvert, un panneau apparait a droite de sa carte pour afficher
   les sous-categories du niveau suivant. Le mega menu (depth 0 -> 1)
   ci-dessus n'est pas modifie. */
#_desktop_top_menu .sub-menu ul[data-depth="1"] > li {
    position: relative;
}
#_desktop_top_menu .bdp-sub-flyout {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 5;
    min-width: 260px;
    max-width: 320px;
    max-height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-left: 0.75rem;
    background: #fff;
    border: 1px solid var(--bdp-border);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-6px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;
}
#_desktop_top_menu .sub-menu ul[data-depth="1"] > li:hover > .bdp-sub-flyout {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}
#_desktop_top_menu .bdp-sub-flyout ul[data-depth="2"] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
#_desktop_top_menu .bdp-sub-flyout ul[data-depth="2"] > li {
    float: none;
    margin: 0;
    border-bottom: 0;
}
#_desktop_top_menu .bdp-sub-flyout ul[data-depth="2"] > li > a.dropdown-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 0.7rem;
    padding: 0.45rem 0.5rem;
    white-space: normal;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--bdp-dark);
}
#_desktop_top_menu
    .bdp-sub-flyout
    ul[data-depth="2"]
    > li
    > a.dropdown-item:hover {
    border-color: var(--bdp-teal);
    background: var(--bdp-teal-light);
    color: var(--bdp-teal-dark);
}
#_desktop_top_menu
    .bdp-sub-flyout
    ul[data-depth="2"]
    > li
    > a.dropdown-item
    img {
    width: 66px;
    height: 66px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--bdp-border);
    background: #fff;
}

/* --------------------------------------------------------------------------
   3. HOMEPAGE
   -------------------------------------------------------------------------- */
.page-home #wrapper > .container {
    max-width: 100%;
    padding: 0;
}
.page-home #content-wrapper,
.page-home #content {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
    margin: 0;
}
.page-home .breadcrumb {
    display: none;
}

.bdp-home-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Hero "bento" : 2 rangees en flexbox, chaque rangee = 1 tuile large (2fr) + 2 tuiles
   etroites (1fr chacune), comme sur la maquette (pas une grille uniforme). */
.bdp-hero {
    display: flex;

    gap: 4px;
    background: var(--bdp-dark);
    min-height: 60vh;
}

.bdp-hero-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#content > div > div.bdp-hero > div:nth-child(1) {
    width: 50%;
}
.hero-barques {
    background-image: url("../img/hero/bassboat.png");
}
#content > div > div.bdp-hero > div:nth-child(2) {
    width: 25%;
}
.hero-remorques {
    background-image: url("../img/hero/remorque.png");
}

#content > div > div.bdp-hero > div:nth-child(3) {
    width: 25%;
}
.hero-moteurs {
    background-image: url("../img/hero/thermique.png");
}
.hero-sondeurs {
    background-image: url("../img/hero/sondeur.png");
}

.bdp-hero-intro,
.bdp-hero-tile {
    flex: 1 1 0%;
    min-width: 0;
}
.bdp-hero-intro,
.bdp-hero-tile.bdp-hero-tile-wide {
    flex: 2 1 0%;
}
.bdp-hero-intro {
    background: linear-gradient(135deg, #00a19a 0%, #00b6ac 100%);
    color: #fff;
    padding: 2rem 1.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bdp-hero-intro .bdp-eyebrow {
    color: #fff;
    opacity: 0.85;
    font-size: 2rem;
}
.bdp-hero-intro > h1 {
    font-size: 0.375rem;
    max-width: 560px;
}

.barques-label {
    max-width: 100%;
}

.barques-label > span {
    display: block;
    width: 663px;
}

.bdp-card-img-link{
    text-align: center;
}

@media (min-width: 1200px) {
    .bdp-hero-intro > h1 {
        margin-left: auto;
        margin-right: 90px;
    }
    .barques-label > span {
        margin-left: auto;
        margin-right: 0px;
    }
}

@media (max-width: 1438px) {
    .bdp-hero-intro {
        padding: 2rem 1.8rem 2rem 15px;
    }
}
.bdp-hero-intro .bdp-main-h1 {
    color: #fff;
    font-size: 6.1rem;
    line-height: 1;
    margin: 0.2rem 0 0.4rem;
}
.bdp-hero-intro .bdp-hero-sub {
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    font-size: 2rem;
    letter-spacing: 0.02em;
    width: 585px;
    text-align: right;
    float: right;
}

.bdp-hero-tile {
    display: block;
    position: relative;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.bdp-hero-tile:hover {
    text-decoration: none;
}

.bdp-hero-tile .bdp-hero-tile-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
    color: #fff;
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    font-size: 1.1rem;
    padding: 1.5rem 1rem 0.8rem;
    overflow: hidden;
    z-index: 1;
}

.bdp-hero-tile .bdp-hero-tile-label::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 161, 154, 0.85), transparent);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: -1;
}

.bdp-hero-tile:hover .bdp-hero-tile-label::before {
    opacity: 1;
}
@media (max-width: 767px) {
    .bdp-hero-row {
        flex-direction: column;
        height: auto;
    }
    .bdp-hero-intro,
    .bdp-hero-tile,
    .bdp-hero-tile.bdp-hero-tile-wide {
        flex: 1 1 auto;
    }
    .bdp-hero-tile {
        min-height: 180px;
    }
}

/* Section headings */
.bdp-section-head {
    margin-bottom: 2rem;
}
.bdp-section-head h2 {
    font-size: 1.9rem;
    margin: 0.1rem 0 0.3rem;
}
.bdp-section-head .bdp-eyebrow {
    font-size: 1rem;
}
.bdp-section-head p {
    color: var(--bdp-grey);
    max-width: 640px;
}
.bdp-section-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}
.bdp-section-flex .bdp-section-text {
    max-width: 55%;
}
.bdp-section-flex .bdp-section-copy {
    color: var(--bdp-grey);
    max-width: 480px;
}

/* Product grid re-used on home + category */
.bdp-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    margin: 2rem 0;
}
@media (max-width: 991px) {
    .bdp-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575px) {
    .bdp-product-grid {
        grid-template-columns: 1fr;
    }
}

.bdp-card {
    background: #fff;
    border: 1px solid var(--bdp-border);
    position: relative;
    display: flex;
    flex-direction: column;
}
.bdp-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--bdp-orange);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.35em 0.7em;
    z-index: 2;
}
.bdp-card-img {
    height: 172px;
}
.bdp-card-body {
    padding: 0 1.1rem 1.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bdp-card-title {
    font-family: inherit;
    text-transform: none;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--bdp-dark);
    margin-bottom: 0.5rem;
    min-height: 2.4em;
}
.bdp-card-price {
    margin-bottom: 0.9rem;
}
.bdp-card-price .now {
    color: var(--bdp-teal);
    font-weight: 700;
    font-size: 1.05rem;
}
.bdp-card-price .old {
    color: #999;
    text-decoration: line-through;
    font-size: 0.85rem;
    margin-left: 0.4em;
}
.bdp-card-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.bdp-card-actions .bdp-btn {
    font-size: 0.78rem;
    padding: 0.6em 0.5em;
}

/* Config / feature block with pill buttons (Votre bass boat, quel moteur...) */
.bdp-pill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}
.bdp-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 1.1rem 0.5rem;
    text-align: center;
}

.bdp-pill-moteurs {
    color: #2c2c2b;
    border: 1px solid #2c2c2b;
}

.bdp-section-white .bdp-pill {
    background: var(--bdp-grey-light);
    border-color: var(--bdp-border);
    color: var(--bdp-dark);
}
.bdp-pill:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.bdp-pill-moteurs:hover {
    color: #2c2c2b;
}

/* Brand logos strip */
.bdp-brands {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}
.bdp-brand-logo {
    border: 1px solid var(--bdp-border);
    padding: 1.2rem 1.6rem;
    font-family: var(--bdp-font-title);
    font-size: 1.3rem;
    color: var(--bdp-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex: 1;
    text-align: center;
    min-width: 160px;
}

/* Team / expert banner */
.bdp-split-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}
.bdp-split-banner .bdp-split-text {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bdp-split-banner .bdp-split-text h2 {
    color: #fff;
}
.bdp-split-banner .bdp-split-text p {
    opacity: 0.92;
}
.bdp-split-banner .bdp-split-visual {
    min-height: 650px;
}
.bdp-ph-portrait {
    background-image: url("../img/sections/equipe-expert.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Video / big banner with play button */
.bdp-video-banner {
    position: relative;
    min-height: 340px;
}
@media (min-width: 768px) {
    .bdp-video-banner {
        min-height: 480px;
    }
}
.bdp-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--bdp-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bdp-play-btn::after {
    content: "";
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent var(--bdp-dark);
    margin-left: 4px;
}

/* FAQ accordion */
.bdp-faq {
    max-width: 100%;
    margin: 0 auto;
}
.bdp-faq-item {
    border-bottom: 1px solid var(--bdp-border);
    overflow: hidden;
}
.bdp-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.1rem 0.2rem;
    font-size: 0.95rem;
    color: var(--bdp-dark);
}
.bdp-faq-item summary::-webkit-details-marker {
    display: none;
}
.bdp-faq-item summary::before {
    content: "+";
    color: var(--bdp-orange);
    font-weight: 700;
    font-size: 1.2rem;
    width: 1.2rem;
}
.bdp-faq-item[open] summary::before {
    content: "\2212";
}
.bdp-faq-item p {
    padding: 0 0.2rem 1.1rem 2rem;
    color: var(--bdp-grey);
    margin: 0;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.bdp-faq-item[open] p {
    opacity: 1;
    transition: opacity 0.28s ease 0.08s;
}

/* Icon features row (paiement 3x, support client, ...) */
.bdp-icon-features {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    padding: 2.2rem 0;
    border-top: 1px solid var(--bdp-border);
    text-align: center;
}
.bdp-icon-features-wrap {
    position: relative;
}
.bdp-icon-arrow {
    display: none;
}
@media (max-width: 767px) {
    /* Carrousel horizontal (scroll-snap + fleches JS) pour la rangee de 5
       icones de reassurance du footer, 1 icone a la fois. La variante
       .bdp-icon-features-4 (page categorie) garde son grid 2 colonnes existant. */
    .bdp-icon-features-wrap {
        padding: 0 34px;
    }
    .bdp-icon-features:not(.bdp-icon-features-4) {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 5rem;
        padding-top: 5rem;
    }
    .bdp-icon-features:not(.bdp-icon-features-4)::-webkit-scrollbar {
        display: none;
    }
    .bdp-icon-features:not(.bdp-icon-features-4) .bdp-icon-item {
        flex: 0 0 100%;
        width: 100%;
        scroll-snap-align: start;
    }
    .bdp-icon-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        padding: 0;
        background: var(--bdp-dark);
        color: #fff;
        z-index: 2;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
    .bdp-icon-arrow i {
        font-size: 1.3rem;
    }
    .bdp-icon-arrow-prev {
        left: 0;
    }
    .bdp-icon-arrow-next {
        right: 0;
    }
    .bdp-icon-arrow[disabled] {
        opacity: 0.3;
        pointer-events: none;
    }
}
.bdp-icon-features .bdp-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.bdp-icon-features .bdp-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--bdp-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.bdp-icon-features .bdp-icon-item span {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bdp-dark);
    letter-spacing: 0.02em;
}

/* Feature icons used on category pages (4 items) */
.bdp-icon-features-4 {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 767px) {
    .bdp-icon-features-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
.bdp-icon-features-4 .bdp-icon-circle {
    background: var(--bdp-teal);
}

/* Contact / "un service client" */
.bdp-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding: 3rem 0;
    align-items: start;
}
.bdp-contact h2 {
    margin-bottom: 0.2rem;
}
.bdp-contact .bdp-contact-company {
    margin-top: 1.2rem;
    font-weight: 700;
}
.bdp-contact-form {
    border: 1px solid var(--bdp-border);
    padding: 1.6rem;
}
.bdp-contact-form .form-control {
    width: 100%;
    border: 1px solid var(--bdp-border);
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
}
.bdp-contact-form textarea.form-control {
    min-height: 130px;
}

.bdp-map {
    height: 340px;
    border: 0;
    width: 100%;
    display: block;
}

/* Footer */
#footer {
    background: var(--bdp-dark-soft);
    color: #cfd3d2;
    padding-top: 0;
}
#footer a {
    color: #cfd3d2;
}
#footer a:hover {
    color: #fff;
}
#footer .footer-container {
    background: transparent;
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
}
#footer .h3,
#footer .h4,
#footer h3,
#footer h4 {
    color: #fff;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-family: var(--bdp-font-title);
    letter-spacing: 0.03em;
}
#footer .links ul {
    background: transparent !important;
}
#footer .links ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-weight: 400;
    padding: 0.4rem 0 !important;
}
#footer .links ul > li a {
    color: #cfd3d2 !important;
    font-size: 0.85rem;
}
#footer .links ul > li a:hover {
    color: #fff !important;
}
#footer .copyright,
#footer .text-sm-center a {
    color: #8b9291;
    font-size: 0.8rem;
}

.page-footer {
    margin-bottom: 0 !important;
}

.bdp-footer-brand img {
    max-height: 42px;
    margin-bottom: 0.8rem;
}
.bdp-footer-brand p {
    color: #9aa0a0;
    font-size: 0.85rem;
    max-width: 320px;
}

/* Newsletter block (ps_emailsubscription) inside the dark footer */
#footer .email_subscription.block_newsletter {
    background: transparent;
    padding: 0;
    margin: 0;
}
#footer .email_subscription h4 {
    margin-bottom: 0.9rem;
}
#footer .email_subscription form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    position: static;
}
#footer .email_subscription input[type="email"] {
    background: transparent;
    border: 1px solid #55554f;
    color: #fff;
    flex: 1;
    min-width: 180px;
    height: 42px;
}
#footer .email_subscription input[type="submit"] {
    position: static;
    background: var(--bdp-teal);
    color: #fff !important;
    border: none;
    text-transform: uppercase;
    font-family: var(--bdp-font-title);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    padding: 0 1.2rem;
    height: 42px;
    white-space: nowrap;
}
#footer .email_subscription input[type="submit"]:hover {
    background: var(--bdp-teal-dark);
}

.bdp-social {
    margin-top: 1.2rem;
    display: flex;
    gap: 0.6rem;
}
.bdp-social a {
    width: 34px;
    height: 34px;
    border: 1px solid #55554f;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
}

/* Sections inserted above the dark footer: icon-features / FAQ / contact+map */
.bdp-footer-before {
    padding-top: 4rem;
    background: #fff;
}

/* --------------------------------------------------------------------------
   4. CATEGORY / LISTING PAGE
   -------------------------------------------------------------------------- */
.page-category #content-wrapper,
.page-search #content-wrapper,
.page-category #content,
.page-search #content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}
.page-category #left-column,
.page-category #right-column,
.page-search #left-column,
.page-search #right-column {
    display: none !important;
}

.block-category h1 {
    font-size: 2rem;
}
.block-category-inner #category-description {
    color: var(--bdp-grey);
    max-width: 760px;
    margin-bottom: 1.5rem;
}

/* Horizontal filter bar */
.bdp-filters-bar #search_filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 1.5rem 0 2rem;
}
.bdp-filters-bar #search_filters > p.h6 {
    display: none;
}
.bdp-filters-bar .facet {
    border: 1px solid var(--bdp-border);
    padding: 0;
    flex: 0 0 auto;
}
.bdp-filters-bar .facet .facet-title {
    display: none;
}
.bdp-filters-bar .facet .title {
    display: none !important;
}
.bdp-filters-bar .facet-dropdown.dropdown {
    padding: 0;
}
.bdp-filters-bar .select-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.1rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bdp-dark);
    white-space: nowrap;
}
.bdp-filters-bar .select-title i {
    font-size: 1.1rem;
    color: var(--bdp-grey);
}
.bdp-filters-bar #_desktop_search_filters_clear_all {
    margin-left: auto;
}
.bdp-filters-bar .clear-all-wrapper .btn {
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    font-size: 0.78rem;
}

.bdp-cat-content-card {
    display: flex;
    width: 50%;
}
.bdp-cat-content-infos {
    padding-top: 6.5em;
    padding-bottom: 6.5em;
    padding-right: 15px;
    padding-left: 15px;
    max-width: 660px;
}

.bdp-cat-content-card.first,
.bdp-cat-content-card.third {
    justify-content: right;
    padding-right: 2.5em;
}

.bdp-cat-content-card.second,
.bdp-cat-content-card.fourth {
    padding-left: 2.5em;
}

.bdp-cat-content-card.second,
.bdp-cat-content-card.third {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bdp-cat-content-card.second {
    background-image: url(../img/sections/second.png);
}

.bdp-cat-content-card.third {
    background-image: url(../img/sections/third.png);
}

.products-selection {
    border: none;
    margin-bottom: 1rem;
}

/* Product card override applied to core .product-miniature markup */
.js-product-list .products,
.product-accessories .products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    margin: 0;
}
@media (max-width: 991px) {
    .js-product-list .products,
    .product-accessories .products {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575px) {
    .js-product-list .products,
    .product-accessories .products {
        grid-template-columns: 1fr;
    }
}
.js-product-list .product,
.product-accessories .product {
    max-width: 100%;
    padding: 0;
}

.product-miniature {
    background: #fff;
    border: 1px solid var(--bdp-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}
.product-miniature .thumbnail-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-miniature .thumbnail-top {
    padding: 1.2rem;
    text-align: center;
    position: relative;
}
.product-miniature .product-thumbnail img {
    max-height: 150px;
    object-fit: contain;
}
.product-miniature .product-description {
    padding: 0 1.1rem 1.2rem;
    margin-top: auto;
}
.product-miniature .product-title {
    text-transform: none;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bdp-dark);
    margin-bottom: 0.5rem;
}
.product-miniature .product-title a {
    color: var(--bdp-dark);
}
.product-miniature .product-price-and-shipping {
    margin-bottom: 0.9rem;
}
.product-miniature .price {
    color: var(--bdp-teal);
    font-weight: 700;
    font-size: 1.05rem;
}
.product-miniature .regular-price {
    color: #999;
    text-decoration: line-through;
    font-size: 0.85rem;
    margin-right: 0.4em;
}
.product-miniature .product-flags {
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 3;
    list-style: none;
    margin: 0;
    padding: 0 0 0 12px;
}
.product-miniature .product-flags .product-flag {
    background: var(--bdp-orange);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.3em 0.6em;
    display: block;
    margin-bottom: 4px;
}
.product-miniature .highlighted-informations {
    display: none;
}

/* Two action buttons injected below the price (see miniatures/product.tpl override) */
.bdp-mini-actions {
    padding: 0 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.bdp-mini-actions .bdp-btn {
    font-size: 0.75rem;
    padding: 0.55em 0.4em;
    width: 100%;
}

.bdp-cat-content-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-self: center;
}
@media (max-width: 767px) {
    .bdp-cat-content-grid {
        grid-template-columns: 1fr;
    }
}
.bdp-cat-content-grid h3 {
    color: var(--bdp-teal);
    font-size: 1.25rem;
    text-transform: none;
    margin-bottom: 0.8rem;
}
.bdp-cat-content-grid ul {
    padding-left: 1.1rem;
    color: var(--bdp-grey);
}
.bdp-cat-content-grid p {
    color: var(--bdp-grey);
}
.bdp-cat-content-section {
    background-image: url(../img/sections/bateaux.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#js-product-list-top .up .btn {
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 1rem 0 2.5rem;
}
.pagination .page-list {
    display: flex;
    gap: 0.3rem;
    margin: 0;
}
.pagination .page-list li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border: 1px solid var(--bdp-border);
    color: var(--bdp-dark);
}
.pagination .page-list li.current a {
    background: var(--bdp-teal);
    border-color: var(--bdp-teal);
    color: #fff;
}

/* --------------------------------------------------------------------------
   5. PRODUCT PAGE
   -------------------------------------------------------------------------- */
.page-product #content-wrapper,
.page-product #content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}
.page-product #left-column,
.page-product #right-column {
    display: none !important;
}

.product-container .h1 {
    font-size: 1.7rem;
    margin-bottom: 1.2rem;
}

/* Gallery */
.product-cover-thumbnails {
    display: flex;
    gap: 1rem;
}
.product-cover-thumbnails img {
    border: 1px solid var(--bdp-border);
}

/* Price block */
.product-prices .current-price-value,
.product-prices .price {
    font-family: var(--bdp-font-title);
    font-size: 1.9rem;
    color: var(--bdp-dark);
}
.product-prices .regular-price {
    color: #999;
    text-decoration: line-through;
}

/* Reassurance badges row (paiement securise / livraison / 3x4x) */
.bdp-reassurance-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin: 1.6rem 0;
}
@media (max-width: 767px) {
    .bdp-reassurance-row {
        grid-template-columns: 1fr;
    }
}
.bdp-reassurance-row div {
    border: 1px solid var(--bdp-border);
    text-align: center;
    padding: 0.9rem 0.5rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bdp-dark);
}

/* Boxed info panel replacing the default tabs */
.bdp-product-info-box {
    border: 1px solid var(--bdp-teal-light);
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2.5rem;
    padding: 2rem;
    margin: 2.5rem 0;
    background: #fcfffe;
}
@media (max-width: 767px) {
    .bdp-product-info-box {
        grid-template-columns: 1fr;
    }
}
.bdp-product-info-box h3 {
    font-size: 1rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--bdp-border);
    padding-bottom: 0.6rem;
    margin-bottom: 0.9rem;
}
.bdp-product-info-box .bdp-brand-mark {
    font-family: var(--bdp-font-title);
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
.bdp-product-info-box ul {
    padding-left: 1.1rem;
    margin-bottom: 1rem;
}
.bdp-product-info-box .bdp-fiche-link {
    font-weight: 700;
}

.bdp-accessories-title {
    font-size: 1.4rem;
    margin: 3rem 0 0.5rem;
}

/* Bottom CTA split banner reused on product page */
.page-product .bdp-split-banner,
.page-category .bdp-split-banner {
    margin-top: 3rem;
}

/* Utility */
.bdp-mt-0 {
    margin-top: 0 !important;
}
.bdp-hidden {
    display: none !important;
}

/*CONFIGURATEUR*/

.cms-id-6 .page-cms {
    padding: 0 !important;
}
.cms-id-6 #_desktop_top_menu {
    border-bottom: none;
}

.bdp-configurator-body {
    padding: 0 1.25rem;
}

/*RESPONSIVE*/
.bdp-video-banner {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
}

.bdp-video-banner iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120vw;
    height: 67.5vw;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
}

@media (min-width: 576px) {
    .header-top .search-widgets {
        max-width: 30rem;
    }
}

@media (max-width: 767px) {
    .bdp-hero {
        flex-direction: column;
    }
    .bdp-hero-row {
        width: 100% !important;
    }

    .bdp-main-h1 {
        font-size: 4.1rem !important;
    }
    .bdp-hero-intro {
        min-height: 350px;
    }
    .bdp-section-flex .bdp-section-text {
        max-width: 100%;
    }
    .bdp-split-banner,
    .bdp-contact {
        display: flex;
    }
    .bdp-contact {
        flex-direction: column;
    }
    .bdp-contact-form {
        width: 100%;
    }
    .bdp-ph-portrait {
        background-size: contain;
    }
    .bdp-split-banner .bdp-split-text {
        padding: 3rem 15px;
    }
    .bdp-split-banner .bdp-split-visual {
        min-height: 335px;
        height: 335px;
        background-size: cover;
    }
    .bdp-split-banner {
        flex-direction: column-reverse;
    }
    .bdp-footer-before > .container {
        width: 100%;
    }
    #wrapper > .container,
    .page-category #main {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .breadcrumb,
    #js-product-list-header,
    #subcategories,
    #products,
    .page-authentication #main {
        width: 100%;
    }
    .bdp-cat-content-card {
        width: 100%;
    }
    .bdp-cat-content-infos {
        padding: 20px;
    }
    .bdp-cat-content-card.first,
    .bdp-cat-content-card.third {
        padding-right: 0;
    }
    .bdp-cat-content-card.second,
    .bdp-cat-content-card.fourth {
        padding-left: 0;
    }
    #subcategories ul {
        flex-wrap: wrap;
    }
    #subcategories ul li {
        width: 50%;
        margin: 0;
    }
    .col-xs-12 {
        padding-right: 0;
        padding-left: 0;
    }
    .bdp-video-banner {
        height: 220px;
        max-height: 220px;
        min-height: 0;
    }
    .bdp-video-banner iframe {
        width: 100vw;
        min-height: 100vh;
    }

    .header-top > .container {
        width: 100%;
    }
    .custom-search-container {
        width: 100%;
    }

    .dropdown-item > img {
        width: 80px;
        height: 80px;
    }
    .category > .dropdown-item {
        display: flex !important;
        gap: 10px;
        align-items: center;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
    }
    #header {
        position: fixed;
        width: 100%;
    }
    #header .header-top {
        padding: 0.5rem 0;
    }
    #header .header-nav {
        max-height: unset;
    }
    #search_widget {
        margin-bottom: 0;
    }
    #wrapper {
        padding-top: 110px;
    }
    .bdp-hero-intro .bdp-hero-sub {
        width: 100%;
        text-align: left;
    }
    #bdp-user-info-widget,
    #bdp-cart-widget {
        display: flex !important;
    }
    .bdp-footer-before > .container > .row {
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin: 0 auto;
    }
    #block-newsletter-label {
        text-align: center;
    }

    .bdp-footer-before {
        padding-top: 5rem;
    }
    .bdp-icon-features {
        padding: 2rem 0;
    }
    .cart-products-count {
        font-size: 0.6rem;
    }
}

/* Bouton "retour en haut", circulaire, bas droite, site entier (desktop + mobile) */
.bdp-scroll-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bdp-teal);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        background-color 0.2s ease,
        visibility 0.25s ease;
}
.bdp-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    border: 1px solid #404040;
}
.bdp-scroll-top:hover,
.bdp-scroll-top:focus {
    background: var(--bdp-orange);
    color: #fff;
}
.bdp-scroll-top i {
    font-size: 1.6rem;
}
@media (max-width: 767px) {
    .bdp-scroll-top {
        right: 14px;
        bottom: 14px;
        width: 42px;
        height: 42px;
    }
    .bdp-scroll-top i {
        font-size: 1.4rem;
    }
}

/* ==========================================================================
   CONFIGURATEUR DE BATEAU - "ATELIER" (cms/page-6.tpl)

   Parti pris : experience a part du reste du site (fond sombre, grille
   technique façon plan de construction, stations numerotees, fiche
   technique pour le recap). Tout est scope sous #content.bdp-atelier pour
   ne rien changer au reste du site (header/footer restent en theme clair).
   ========================================================================== */

.bdp-atelier {
    background: var(--bdp-dark);
    margin-top: -1px;
}
/* Immersion totale une fois dans l'atelier : un simple scroll ne peut pas
   masquer le header du site, car "#header { position: fixed; }" en mobile
   (regle plus haut dans ce fichier) le garde toujours visible quelle que
   soit la position de scroll. On le sort donc explicitement du rendu tant
   que l'atelier est ouvert (classe posee sur <body> par le JS du
   configurateur), et on annule le padding de compensation qui lui est
   associe en mobile pour que le bandeau colle bien en haut. */
body.bdp-atelier-active #header {
    display: none;
}
@media (max-width: 767px) {
    body.bdp-atelier-active #wrapper {
        padding-top: 0;
    }
}
/* Le theme parent applique ".page-content.page-cms { background:#fff }"
   (2 classes, plus specifique que .bdp-atelier seul) : sans ce renfort de
   specificite, le fond blanc du theme clair revient une fois le hero
   entierement opaque quitte (grille du corps du configurateur). On en
   profite pour poser ici l'ambiance "atelier" (grille technique + halos
   teal/orange) qui habille aussi bien le hero que le corps, pour que la
   transition entre les deux reste continue. */
#content.bdp-atelier {
    background:
        radial-gradient(
            ellipse 900px 560px at 10% -8%,
            rgba(0, 161, 154, 0.1),
            transparent 60%
        ),
        radial-gradient(
            ellipse 760px 520px at 104% 45%,
            rgba(250, 126, 37, 0.06),
            transparent 55%
        ),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        var(--bdp-dark);
    background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
    background-size:
        auto,
        auto,
        56px 56px,
        56px 56px,
        auto;
    background-position:
        0 0,
        0 0,
        0 0,
        0 0,
        0 0;
}

/* --- Hero plein ecran --- */
.bdp-atelier-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: radial-gradient(
        ellipse at 30% 20%,
        #1f3d3b 0%,
        var(--bdp-dark) 62%
    );
}
.bdp-atelier-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 85%);
}
.bdp-atelier-hero-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, var(--bdp-dark) 100%);
}
.bdp-atelier-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 15px;
    text-align: center;
}
.bdp-atelier-plate-tag {
    display: inline-block;
    font-family: var(--bdp-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bdp-teal);
    border: 1px solid rgba(0, 161, 154, 0.4);
    padding: 0.4rem 0.9rem;
    margin-bottom: 1.6rem;
}
.bdp-atelier-title {
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 3.4rem;
    line-height: 1.02;
    color: #fff;
    margin: 0 0 1.3rem;
}
.bdp-atelier-title span {
    color: var(--bdp-teal);
}
.bdp-atelier-intro {
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.05rem;
    max-width: 540px;
    margin: 0 auto 2rem;
}
.bdp-atelier-hero-price {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 3rem;
    width: 100%;
}
.bdp-atelier-hero-price span {
    font-family: var(--bdp-font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}
.bdp-atelier-hero-price strong {
    font-family: var(--bdp-font-title);
    font-size: 2.2rem;
    letter-spacing: 0.02em;
    color: var(--bdp-orange);
}
.bdp-atelier-scroll-cue {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-family: var(--bdp-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    animation: bdp-atelier-bounce 2.2s ease-in-out infinite;
}
.bdp-atelier-scroll-cue:hover {
    color: var(--bdp-teal);
}
.bdp-atelier-scroll-cue i {
    font-size: 1.6rem;
}
@keyframes bdp-atelier-bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
}
.bdp-atelier-hero.is-collapsed {
    display: none;
}

/* --- Bandeau compact (remplace le hero une fois l'atelier ouvert) --- */
.bdp-atelier-subheader {
    display: none;
    align-items: center;
    gap: 1.3rem;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bdp-dark-soft);
    border-top: 3px solid var(--bdp-teal);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.9rem 1.5rem;
}
.bdp-atelier.is-entered .bdp-atelier-subheader {
    display: flex;
}
.bdp-atelier-subheader-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-family: var(--bdp-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.45rem 0.8rem;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        color 0.2s ease;
}
.bdp-atelier-subheader-back:hover {
    border-color: var(--bdp-teal);
    color: var(--bdp-teal);
}
.bdp-atelier-subheader-back i {
    font-size: 1.1rem;
}
.bdp-atelier-subheader-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.bdp-atelier-subheader-tag {
    font-family: var(--bdp-font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bdp-teal);
}
.bdp-atelier-subheader-info strong {
    font-family: var(--bdp-font-title);
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bdp-atelier-subheader-price {
    flex: 0 0 auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.bdp-atelier-subheader-price span {
    font-family: var(--bdp-font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}
.bdp-atelier-subheader-price strong {
    font-family: var(--bdp-font-title);
    font-size: 1.3rem;
    color: var(--bdp-orange);
}

/* --- Layout general : stepper + options + fiche technique --- */
.bdp-configurator-body {
    display: none;
    grid-template-columns: 100px 1fr 300px;
    gap: 2.5rem;
    align-items: start;
    padding: 3.5rem 0 5rem;
    position: relative;
    opacity: 0;
}
.bdp-atelier.is-entered .bdp-configurator-body {
    display: grid;
    padding-left: 15px;
    padding-right: 15px;
}
.bdp-configurator-options {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    min-width: 0;
}

/* --- Stepper des stations --- */
.bdp-atelier-stepper {
    position: sticky;
    top: 100px;
}
.bdp-atelier-stepper ol {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.1rem;
    position: relative;
}
.bdp-atelier-stepper-track {
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
}
.bdp-atelier-stepper-track span {
    display: block;
    width: 100%;
    height: 0%;
    background: var(--bdp-teal);
    transition: height 0.15s linear;
}
.bdp-atelier-stepper li {
    position: relative;
    margin-bottom: 1.6rem;
}
.bdp-atelier-stepper li::before {
    content: "";
    position: absolute;
    left: -1.1rem;
    top: 0.35rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(-50%);
}
.bdp-atelier-stepper li a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.15s ease;
}
.bdp-atelier-stepper li a:hover {
    color: rgba(255, 255, 255, 0.75);
}
.bdp-atelier-stepper-num {
    font-family: var(--bdp-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}
.bdp-atelier-stepper-label {
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.95rem;
}
.bdp-atelier-stepper li a.is-active {
    color: #fff;
}
.bdp-atelier-stepper li a.is-active .bdp-atelier-stepper-num {
    color: var(--bdp-teal);
}
.bdp-atelier-stepper li:has(a.is-active)::before {
    background: var(--bdp-teal);
    box-shadow: 0 0 0 4px rgba(0, 161, 154, 0.25);
}

/* --- Carrousel des stations -------------------------------------------
   Les etapes de configuration se parcourent desormais une par une, en
   glissant horizontalement (doigt/molette/fleches/temoin de gauche),
   plutot qu'en descendant une longue page. Meme logique que le carrousel
   d'icones du footer (scroll-snap + fleches +/- desactivees en bout de
   course), adaptee pour piloter aussi le temoin. */
.bdp-config-carousel {
    position: relative;
}
.bdp-config-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bdp-config-carousel-track::-webkit-scrollbar {
    display: none;
}
.bdp-config-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bdp-dark-soft);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}
.bdp-config-carousel-arrow:hover {
    border-color: var(--bdp-teal);
    background: rgba(0, 161, 154, 0.18);
}
.bdp-config-carousel-arrow:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}
.bdp-config-carousel-prev {
    left: -22px;
}
.bdp-config-carousel-next {
    right: -22px;
}
.bdp-config-carousel-arrow i {
    font-size: 1.6rem;
}

/* --- Stations --- */
.bdp-config-station {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    background: var(--bdp-dark-soft);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.6);
    padding: 2rem 2rem 2.2rem;
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}
.bdp-config-station::before,
.bdp-config-station::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0, 161, 154, 0.5);
    pointer-events: none;
}
.bdp-config-station::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}
.bdp-config-station::after {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
}
.bdp-config-station.is-revealed {
    opacity: 1;
    transform: translateY(0);
}
.bdp-config-station-head {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}
.bdp-config-station-num {
    font-family: var(--bdp-font-title);
    font-size: 3.4rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}
.bdp-config-station-head-text h2 {
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.4rem;
    color: #fff;
    margin: 0 0 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.bdp-config-station-head-text p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.88rem;
    margin: 0;
}
.bdp-config-tag {
    font-family: var(--bdp-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.15rem 0.5rem;
}
.bdp-config-tag-required {
    color: var(--bdp-orange);
    border-color: rgba(250, 126, 37, 0.4);
}

/* display:grid (pas flex) : les cartes doivent pouvoir passer a la ligne
   selon la largeur disponible (auto-fill), ce qui n'etait pas le cas avant
   (flex + nowrap par defaut = une seule rangee qui deborde). C'est ce qui
   permet a la regle mobile ci-dessous (repeat(2, 1fr)) de fonctionner. */
.bdp-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}

/* --- Carte d'option --- */
.bdp-config-option {
    position: relative;
    display: flex;
    flex-direction: row;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--bdp-radius);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        background 0.15s ease;
    /* Remplit sa cellule de grille (voir .bdp-config-grid, desormais en
       display:grid) plutot qu'une largeur fixe : la taille reelle de la
       carte depend de auto-fill/minmax et des colonnes forcees en mobile. */
    width: 100%;
}
.bdp-config-option:hover {
    border-color: rgba(0, 161, 154, 0.6);
    transform: translateY(-2px);
}
.bdp-config-option.is-selected {
    border-color: var(--bdp-teal);
    background: rgba(0, 161, 154, 0.12);
    box-shadow:
        0 0 0 1px var(--bdp-teal),
        0 8px 20px rgba(0, 161, 154, 0.25);
}
.bdp-config-option-media {
    width: 50%;
    /* aspect-ratio: 4 / 3; */
    filter: grayscale(0.3) brightness(0.85);
}
/* Vignettes d'options : fond blanc plutot que le gris du placeholder
   generique du site (scope limite au configurateur, ne touche pas
   .bdp-ph-square utilise ailleurs). L'image produit reelle, quand elle
   existe, est posee par-dessus en background-image via JS (data-media). */
#bdp-configurator .bdp-ph-square {
    background-color: #fff;
}
.bdp-config-option-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    /* Comme .bdp-config-station plus haut : sans ca, un nom de produit
       long resterait sur sa largeur de contenu minimale (le mot le plus
       long) au lieu de se laisser retrecir/re-wrapper a la largeur reelle
       de la colonne de grille - .bdp-config-option a bien "overflow:
       hidden" qui absorbe ce genre de debordement, mais autant laisser le
       texte se re-wrapper proprement plutot que le laisser se faire
       couper. */
    min-width: 0;
    padding: 0.9rem 1rem 1.1rem;
    width: 50%;
}
.bdp-config-option-name {
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 0.95rem;
    color: #fff;
    margin: 0 auto;
}
.bdp-config-option-desc {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.3;
}
.bdp-config-option-price {
    margin-top: 0.4rem;
    font-family: var(--bdp-font-mono);
    font-size: 0.9rem;
    color: var(--bdp-teal);
}
.bdp-config-option.is-selected .bdp-config-option-price {
    color: var(--bdp-orange);
}

.bdp-config-check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bdp-teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}
.bdp-config-check i {
    font-size: 1rem;
}
.bdp-config-option.is-selected .bdp-config-check {
    opacity: 1;
    transform: scale(1);
}

.bdp-config-option-fixed {
    cursor: default;
    flex-direction: row;
    align-items: center;
    /* Seule carte de la station 00 : occupe toute la largeur de la grille
       quel que soit le nombre de colonnes forcees ailleurs (2 puis 1 en
       mobile, voir @media plus bas). Sans ca, elle se retrouvait
       compressee dans une seule colonne aux cotes d'une colonne vide, ce
       qui entrait en conflit avec la largeur fixe de sa vignette
       (120px) + le "width: 50%" herite de .bdp-config-option-body et
       provoquait un debordement sur les ecrans etroits. */
    grid-column: 1 / -1;
}
.bdp-config-option-fixed:hover {
    transform: none;
}
.bdp-config-option-fixed .bdp-config-option-media {
    width: 120px;
    flex: 0 0 120px;
    aspect-ratio: 1 / 1;
}
.bdp-config-option-fixed .bdp-config-option-body {
    padding: 0.8rem 1.2rem;
}

.bdp-config-option-none .bdp-config-option-body {
    padding: 1.4rem 1rem;
    align-items: flex-start;
    width: 100%;
}
.bdp-config-option-none .bdp-config-option-price {
    color: rgba(255, 255, 255, 0.4);
}
.bdp-config-option-none.is-selected .bdp-config-option-price {
    color: var(--bdp-teal);
    margin: auto;
}
.bdp-config-option-price-none {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}
.bdp-config-option-price-none .material-icons {
    font-size: 6rem;
    line-height: 1;
    color: currentColor;
}

/* --- Fiche technique (recap sticky) --- */
.bdp-atelier-recap {
    position: sticky;
    top: 100px;
}
.bdp-atelier-recap-inner {
    background: var(--bdp-dark-soft);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--bdp-teal);
    padding: 1.5rem;
}

/* --- Apercu du bateau : element central de l'atelier -------------------
   Sticky dans la colonne du milieu (celle des stations), au-dessus du
   flux qui defile, avec sa propre "plaque" (avant, il vivait dans la
   fiche technique / colonne de droite). Le z-index le maintient bien
   au-dessus des stations qui remontent derriere lui au scroll. */
.bdp-atelier-preview {
    position: sticky;
    top: 100px;
    z-index: 5;
    max-width: 100%;
    min-height: 430px;
    /* margin: 0 auto 2.5rem; */
    background: var(--bdp-dark-soft);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--bdp-teal);
    padding: 1.4rem 1.4rem 1.6rem;
    box-shadow: 0 32px 60px -26px rgba(0, 0, 0, 0.7);
}
.bdp-atelier-preview-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--bdp-font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.9rem;
}
.bdp-atelier-preview-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bdp-teal);
    box-shadow: 0 0 0 3px rgba(0, 161, 154, 0.25);
}
.bdp-atelier-preview-media {
    position: relative;
    /* aspect-ratio: 4 / 3; */
    border: 1px solid rgba(255, 255, 255, 0.15);
    height: 230px;
}
/* Regroupe bateau + reperes + overlays moteur/sondeur : se retrecit
   des qu'une remorque avec visuel est selectionnee (.has-remorque sur
   .bdp-atelier-preview-media), pour laisser la place au "+" puis a
   l'image de la remorque a droite.
   IMPORTANT : le retrecissement se fait via "transform: scale()", PAS
   en reduisant width/right. Une reduction de width changerait le
   ratio largeur/hauteur de ce bloc, ce qui deplacerait le "letterboxing"
   de l'image bateau (object-fit: contain) et desalignerait TOUS les
   reperes/overlays (moteur, sondeur...) positionnes en % dessus. Un
   "transform: scale()" ne touche pas au calcul de mise en page (les
   enfants en % sont toujours calcules sur la taille pleine, non
   reduite) : seul le rendu visuel final est reduit en bloc, donc les
   reperes restent mathematiquement colles a leur point sur le bateau
   quel que soit le facteur d'echelle - aucun recalcul de position n'est
   necessaire, ni maintenant ni si le facteur change plus tard.
   transform-origin au centre (50% 50%) : le bateau retrecit vers le
   centre du conteneur (et non vers un coin), pour rester aligne au
   centre comme le reste de la composition (+ et remorque) une fois
   retreci - cf. .bdp-atelier-preview-plus / -remorque plus bas,
   centres verticalement et positionnes dans l'espace ainsi libere. */
.bdp-atelier-preview-boat-wrap {
    position: absolute;
    inset: 0;
    transform: scale(1);
    transform-origin: 0% 50%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.bdp-atelier-preview-media.has-remorque .bdp-atelier-preview-boat-wrap {
    transform: scale(0.6);
}
.bdp-atelier-preview-boat-img {
    position: absolute;
    inset: 0;
    width: 80%;
    height: 80%;
    /* background-color: var(--bdp-dark-soft); */
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
    align-self: center;
}
/* Comportement partage par tous les visuels superposes cliquables
   (moteur, sondeur, remorque, finitions) : curseur pointer + leger
   effet de survol/focus. La taille/position reste sur des classes
   dediees par element ci-dessous (chacune sur le lien <a>, PAS sur
   l'<img> qu'il contient) ; l'<img> se contente de remplir son lien a
   100% (voir .bdp-atelier-preview-motor/-sondeur/-remorque plus bas). */
.bdp-atelier-preview-hover-link {
    cursor: pointer;
}
.bdp-atelier-preview-hover-link:hover,
.bdp-atelier-preview-hover-link:focus-visible {
    filter: brightness(1.2);
}
/* Visuel du moteur selectionne, superpose pres du tableau arriere.
   Repositionne/redimensionne suite aux ajustements CSS de
   .bdp-atelier-preview-boat-img (image reduite a 80%/80%, centree en
   largeur mais calee en haut, pas verticalement centree puisque son
   parent n'est pas un conteneur flex/grid) : left/bottom/height sont
   recalcules dans le meme rapport (x0.8, decale de la marge de 10% a
   gauche) pour rester au meme endroit relatif sur la coque. Le fond etant
   toujours en "contain", un letterboxing residuel reste possible selon
   les proportions reelles de la carte a l'ecran : ajuster a l'oeil via
   height/left/bottom si besoin.
   Position/taille/visibilite sont sur le lien <a> (width: max-content
   pour qu'il epouse la largeur reelle de l'image, calculee via son
   propre ratio par height:100%/width:auto sur l'<img> a l'interieur -
   un <a> n'a pas de ratio intrinseque comme un <img>, donc on ne peut
   pas mettre "height:59%; width:auto" directement dessus). */
.bdp-atelier-preview-motor-link {
    position: absolute;
    left: 10%;
    bottom: 9%;
    height: 59%;
    width: max-content;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        filter 0.2s ease;
}
.bdp-atelier-preview-motor-link.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.bdp-atelier-preview-motor {
    display: block;
    height: 100%;
    width: auto;
}
/* Visuel du sondeur selectionne, meme principe que le moteur
   ci-dessus : superpose au repere .bdp-atelier-preview-pin[data-pin-
   category="sondeur"] (left:44%, top:24%). Premiere approximation de
   position/taille (un sondeur est un boitier bien plus petit qu'un
   moteur) : a ajuster a l'oeil une fois affiche. */
.bdp-atelier-preview-sondeur-link {
    position: absolute;
    left: 42%;
    top: 4%;
    height: 26%;
    width: max-content;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        filter 0.2s ease;
}
.bdp-atelier-preview-sondeur-link.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.bdp-atelier-preview-sondeur {
    display: block;
    height: 100%;
    width: auto;
}
/* Finitions (accessoires) : contrairement au moteur/sondeur, plusieurs
   options peuvent etre choisies a la fois (checkbox) - donc une
   vignette par accessoire selectionne plutot qu'un seul visuel unique,
   regroupees pres du repere "Finitions". En px (pas en %) : avec le
   "transform: scale()" applique au parent .bdp-atelier-preview-boat-wrap
   quand une remorque est choisie, tout redimensionne uniformement de
   toute facon (voir commentaire de .bdp-atelier-preview-boat-wrap). */
.bdp-atelier-preview-accessoires {
    position: absolute;
    left: 57%;
    top: 15%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 110px;
    z-index: 2;
}
.bdp-atelier-preview-accessoire-link {
    display: block;
    width: 60px;
    height: 60px;
    transition: filter 0.2s ease;
}
.bdp-atelier-preview-accessoire-chip {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* --- Bande "extras" (remorque + finitions) : mobile uniquement ---------
   Sur desktop, la remorque est juxtaposee au bateau retreci et les
   finitions affichees pres de leur repere sur le schema (voir plus haut
   et plus bas, tous deux confines au @media (min-width: 992px)/(max-width:
   991px)). Ces deux habillages reposent sur un positionnement absolu en
   px/% pense pour un aperçu large ; ils ne passent pas a l'echelle sur un
   aperçu mobile beaucoup plus petit. En mobile, remorque et finitions
   sont donc affichees ici a la place, sous forme d'une simple rangee de
   vignettes qui defile horizontalement au doigt - flux normal, aucune
   coordonnee a calculer, ne peut jamais deborder quelle que soit la
   largeur d'ecran. Masquee par defaut (desktop) et quand elle est vide
   (:empty, aucune remorque/finition avec visuel selectionnee). */
.bdp-atelier-preview-mobile-extras {
    display: none;
}
.bdp-atelier-preview-extra-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    width: 66px;
    text-decoration: none;
    transition: filter 0.2s ease;
}
.bdp-atelier-preview-extra-chip-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
}
.bdp-atelier-preview-extra-chip-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bdp-atelier-preview-extra-chip-label {
    font-family: var(--bdp-font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* "+" puis visuel de la remorque, a droite du bateau retreci (voir
   .bdp-atelier-preview-boat-wrap ci-dessus). Transitions volontairement
   asymetriques : entree (via .has-remorque / .is-visible) plus lente et
   decalee dans le temps pour un enchainement "le bateau se retrecit,
   PUIS le + apparait, PUIS la remorque arrive" ; sortie plus rapide et
   sans decalage (les deux disparaissent ensemble pendant que le bateau
   regrandit), pour rester doux dans les deux sens sans etre lourd au
   retrait. Positions de premiere approximation, a ajuster a l'oeil. */
.bdp-atelier-preview-plus {
    position: absolute;
    top: 50%;
    left: 57%;
    transform: translate(-50%, -50%) scale(0.5);
    font-family: var(--bdp-font-mono);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bdp-teal);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}
.bdp-atelier-preview-media.has-remorque .bdp-atelier-preview-plus {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition:
        opacity 0.35s ease 0.15s,
        transform 0.35s ease 0.15s;
}
.bdp-atelier-preview-remorque-link {
    position: absolute;
    right: 4%;
    top: 50%;
    height: 350px;
    width: 350px;
    z-index: 2;
    opacity: 0;
    transform: translate(14px, -50%);
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        filter 0.2s ease;
}
.bdp-atelier-preview-remorque-link.is-visible {
    opacity: 1;
    transform: translate(0, -50%);
    pointer-events: auto;
    transition:
        opacity 0.4s ease 0.3s,
        transform 0.4s ease 0.3s,
        filter 0.2s ease;
}
.bdp-atelier-preview-remorque {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bdp-atelier-preview-media::before,
.bdp-atelier-preview-media::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--bdp-teal);
    opacity: 0.85;
}
.bdp-atelier-preview-media::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}
.bdp-atelier-preview-media::after {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
}
/* Fiche produit au survol/focus d'un visuel superpose cliquable (moteur,
   sondeur, remorque, finitions) : recouvre l'apercu entier (carte +
   fond assombri) plutot qu'une petite bulle qui suivrait le curseur -
   plus lisible vu l'espace restreint de l'apercu, et plus proche du
   look "fiche technique" deja utilise ailleurs dans l'atelier (memes
   coins teal, meme fond sombre) que d'un tooltip classique. Remplie et
   affichee/masquee par showPreviewTooltip()/hidePreviewTooltip() dans
   le JS, au survol ou au focus clavier d'un lien produit. */
/* Ancienne version : "lightbox" en pleine carte (inset:0 + fond assombri
   couvrant tout l'apercu) - remplacee car peu ergonomique : elle masquait
   tout le visualiseur et la carte apparaissait toujours au centre, loin
   du produit survole, obligeant a un grand deplacement de souris pour
   l'atteindre. Desormais : une petite fiche flottante positionnee PRES
   de l'element survole (calcul en JS, voir positionPreviewTooltip()),
   sans fond assombri - ca reste une info-bulle legere, pas un plein
   ecran. Position en left/top (px), pas de centrage flex : c'est le JS
   qui calcule ces valeurs pour coller au plus proche du produit. */
.bdp-atelier-preview-tooltip {
    position: absolute;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0s linear 0.15s;
    pointer-events: none;
}
.bdp-atelier-preview-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
    /* Accessible a la souris (et au clavier) une fois affichee : on peut
       y deplacer le curseur pour cliquer sur le bouton de suppression
       sans qu'elle se referme (voir gestion du delai dans le JS -
       showPreviewTooltip/scheduleHidePreviewTooltip). */
    pointer-events: auto;
}
.bdp-atelier-preview-tooltip-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 168px;
    background: var(--bdp-dark-soft);
    border: 1px solid rgba(0, 161, 154, 0.5);
    padding: 0.6rem 0.7rem 0.7rem;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.bdp-atelier-preview-tooltip-close {
    position: absolute;
    top: -11px;
    right: -11px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--bdp-dark-soft);
    background: var(--bdp-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition:
        filter 0.15s ease,
        transform 0.15s ease;
}
.bdp-atelier-preview-tooltip-close i {
    font-size: 16px;
}
.bdp-atelier-preview-tooltip-close:hover,
.bdp-atelier-preview-tooltip-close:focus-visible {
    filter: brightness(1.15);
    transform: scale(1.08);
}
.bdp-atelier-preview-tooltip-card::before,
.bdp-atelier-preview-tooltip-card::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--bdp-teal);
    opacity: 0.85;
}
.bdp-atelier-preview-tooltip-card::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}
.bdp-atelier-preview-tooltip-card::after {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
}
/* Image nettement agrandie (76px -> 140px) et posee en haut, pleine
   largeur de la carte : le produit doit se voir clairement, pas juste
   servir de petite vignette a cote du texte. */
.bdp-atelier-preview-tooltip-media {
    width: 100%;
    height: 140px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bdp-atelier-preview-tooltip-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bdp-atelier-preview-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.bdp-atelier-preview-tooltip-name {
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 1rem;
    color: #fff;
}
.bdp-atelier-preview-tooltip-desc {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
/* Suppression de l'element : bouton texte discret sous la description
   (la suppression n'est plus geree par l'icone du coin, devenue une
   simple fermeture - voir .bdp-atelier-preview-tooltip-close). */
.bdp-atelier-preview-tooltip-remove-btn {
    align-self: flex-start;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0.1rem 0 0;
    font-family: var(--bdp-font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.15s ease;
}
.bdp-atelier-preview-tooltip-remove-btn:hover,
.bdp-atelier-preview-tooltip-remove-btn:focus-visible {
    color: var(--bdp-orange);
}
.bdp-atelier-preview-tooltip-price {
    font-family: var(--bdp-font-mono);
    font-size: 0.92rem;
    color: var(--bdp-teal);
    margin-top: 0.1rem;
}
/* --- Fiche produit en mode tactile : "feuille du bas" -------------------
   Sur un ecran assez grand (souris/trackpad), positionner la fiche pres
   de l'element survole est fiable (voir positionPreviewTooltip() dans le
   JS). Sur tactile, refaire ce calcul dans un aperçu minuscule oblige a
   le borner en permanence a la taille reduite de la carte - c'est
   exactement le genre de "bricolage" a eviter. A la place : un motif
   natif et connu (feuille
   ancree en bas d'ecran, plein largeur, fond assombri) qui ne necessite
   AUCUNE coordonnee - il ne peut donc jamais deborder ni mal se
   positionner, quel que soit l'appareil. Le declencheur est une seule
   classe JS (html.bdp-touch-device, voir isTouchDevice dans le script) :
   CSS et JS lisent la meme source, impossible qu'ils se desynchronisent. */
html.bdp-touch-device .bdp-atelier-preview-tooltip-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(10, 15, 15, 0.55);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        visibility 0s linear 0.2s;
}
html.bdp-touch-device .bdp-atelier-preview-tooltip-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
}
html.bdp-touch-device .bdp-atelier-preview-tooltip {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    z-index: 901;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
html.bdp-touch-device .bdp-atelier-preview-tooltip.is-visible {
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
html.bdp-touch-device .bdp-atelier-preview-tooltip-card {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 3px solid var(--bdp-teal);
    padding: 1.2rem 1.3rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.5);
}
html.bdp-touch-device .bdp-atelier-preview-tooltip-card::before,
html.bdp-touch-device .bdp-atelier-preview-tooltip-card::after {
    display: none;
}
html.bdp-touch-device .bdp-atelier-preview-tooltip-media {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
}
html.bdp-touch-device .bdp-atelier-preview-tooltip-body {
    flex: 1 1 160px;
    min-width: 0;
}
.bdp-atelier-preview-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: var(--bdp-teal);
    color: #fff;
    font-family: var(--bdp-font-mono);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.55rem;
    transition: opacity 0.15s ease;
}

.has-remorque .bdp-atelier-preview-badge {
    right: 11rem !important;
}
/* Reperes lumineux poses sur le schema, façon plan technique annote :
   eteints par defaut, s'allument en teal (+ pulsation douce) des qu'une
   option de leur categorie est selectionnee. Positionnes en % (top/left)
   directement en inline-style dans le template, pour rester faciles a
   ajuster a l'oeil sans toucher au CSS. */
.bdp-atelier-preview-pin {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}
.bdp-atelier-preview-pin.is-active {
    background: var(--bdp-teal);
    border-color: var(--bdp-teal);
    animation: bdp-atelier-pin-pulse 1.8s ease-out infinite;
}
@keyframes bdp-atelier-pin-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 161, 154, 0.45);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 161, 154, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 161, 154, 0);
    }
}
.bdp-atelier-preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.8rem;
}
.bdp-atelier-preview-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--bdp-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(0, 161, 154, 0.1);
    border: 1px solid rgba(0, 161, 154, 0.35);
    padding: 0.25rem 0.55rem;
    animation: bdp-atelier-tag-in 0.25s ease;
}
.bdp-atelier-preview-tag b {
    color: var(--bdp-teal);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.62rem;
}
@keyframes bdp-atelier-tag-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bdp-atelier-recap-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}
.bdp-atelier-recap-label {
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.1rem;
    color: #fff;
}
.bdp-atelier-recap-ref {
    font-family: var(--bdp-font-mono);
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
}
.bdp-configurator-recap-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}
.bdp-configurator-recap-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.85);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bdp-configurator-recap-list li:first-child {
    font-weight: 700;
}
.bdp-configurator-recap-list li span:last-child {
    flex: 0 0 auto;
    font-family: var(--bdp-font-mono);
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}
.bdp-atelier-recap-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    padding: 0.8rem 0;
    border-top: 2px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 1.2rem;
    color: #fff;
}
.bdp-atelier-recap-total span:last-child {
    font-family: var(--bdp-font-mono);
    font-size: 1.4rem;
    color: var(--bdp-orange);
}
.bdp-atelier-recap-note {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin: 0.8rem 0 0;
}

/* --- Barre resume mobile --- */
.bdp-configurator-mobile-bar {
    display: none;
}

/* --- Modale de devis (volontairement claire : on quitte l'atelier pour
   "signer" la demande, contraste assume avec le reste de la page) --- */
.bdp-config-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}
.bdp-config-modal.is-open {
    visibility: visible;
    opacity: 1;
}
.bdp-config-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 15, 0.7);
}
.bdp-config-modal-dialog {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 2rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    transform: translateY(12px);
    transition: transform 0.2s ease;
}
.bdp-config-modal.is-open .bdp-config-modal-dialog {
    transform: translateY(0);
}
.bdp-config-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bdp-grey-light);
    color: var(--bdp-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.bdp-config-modal-dialog h2 {
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.5rem;
    color: var(--bdp-dark);
    margin: 0 0 1.2rem;
}
.bdp-config-modal-recap {
    background: var(--bdp-grey-light);
    border: 1px solid var(--bdp-border);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    max-height: 200px;
    overflow-y: auto;
}
.bdp-config-modal-recap-row {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--bdp-dark);
    padding: 0.35rem 0;
}
.bdp-config-modal-recap-total {
    font-family: var(--bdp-font-title);
    text-transform: uppercase;
    border-top: 1px solid var(--bdp-border);
    margin-top: 0.4rem;
    padding-top: 0.6rem;
}
.bdp-config-modal-recap-total span:last-child {
    color: var(--bdp-orange);
    font-size: 1.1rem;
}
.bdp-config-form textarea.form-control {
    min-height: 80px;
}
.bdp-config-modal-success {
    text-align: center;
    padding: 1.5rem 0;
}
.bdp-config-modal-success i {
    color: var(--bdp-teal);
    font-size: 3rem;
}
.bdp-config-modal-success p {
    color: var(--bdp-dark);
    margin-top: 0.6rem;
}

/* --- Atelier plein ecran (desktop) : tout tient dans la fenetre, sans
   scroll de page une fois entre dans l'atelier. Seul le contenu d'une
   station peut, si besoin, defiler A L'INTERIEUR de sa propre carte (grille
   d'options) : la structure generale (temoin, apercu, fiche technique)
   ne bouge jamais. Le mobile/tablette (<992px, deja empile verticalement)
   garde son comportement de defilement normal, inchange. */
@media (min-width: 992px) {
    .bdp-atelier.is-entered .bdp-configurator-body {
        /* height: calc(102vh - var(--bdp-atelier-subheader-h, 84px)); */
        align-items: stretch;
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
        overflow: hidden;
    }
    .bdp-atelier-stepper {
        position: static;
        overflow: hidden;
    }
    .bdp-configurator-options {
        height: 100%;
        /* overflow-x reste visible : les fleches du carrousel debordent
           volontairement de 22px de chaque cote (voir .bdp-config-carousel-
           prev/next) pour rester bien lisibles hors de la carte. Seul
           l'axe vertical est borne, en filet de securite. */
        overflow-x: visible;
        overflow-y: hidden;
        padding: 0px 25px;
    }
    .bdp-atelier-preview {
        position: static;
        flex: 0 0 auto;
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
    }
    .bdp-atelier-preview-media {
        aspect-ratio: auto;
        height: min(34vh, 310px);
        background:
            radial-gradient(
                ellipse 900px 560px at 10% -8%,
                rgba(0, 161, 154, 0.1),
                transparent 60%
            ),
            radial-gradient(
                ellipse 760px 520px at 104% 45%,
                rgba(250, 126, 37, 0.06),
                transparent 55%
            ),
            linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.035) 1px,
                transparent 1px
            ),
            var(--bdp-dark);
        background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
        background-size:
            auto,
            auto,
            56px 56px,
            56px 56px,
            auto;
        background-position:
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }
    .bdp-config-carousel {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .bdp-config-carousel-track {
        flex: 1;
        min-height: 0;
        align-items: stretch;
    }
    .bdp-config-station {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .bdp-config-grid {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        align-content: start;
        padding: 0.3rem;
    }
    .bdp-atelier-recap {
        position: static;
        height: 100%;
    }
    .bdp-atelier-recap-inner {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .bdp-configurator-recap-list {
        flex: 1;
        min-height: 0;
        max-height: none;
    }
}
/* --- Responsive --- */
@media (max-width: 1199px) {
    .bdp-configurator-body {
        grid-template-columns: 160px 1fr 300px;
        gap: 2rem;
    }
}
@media (max-width: 991px) {
    .bdp-configurator-body {
        grid-template-columns: 1fr;
    }
    /* top: sous le bandeau (.bdp-atelier-subheader, lui aussi sticky/top:0,
       z-index 20 > 10 ici) : sans ce decalage, les deux elements sticky
       se superposeraient exactement au meme endroit une fois colles en
       haut (le bandeau, plus prioritaire, cacherait alors le temoin en
       dessous). Hauteur reelle du bandeau lue dynamiquement en JS (meme
       variable --bdp-atelier-subheader-h que pour le mode plein ecran
       desktop, voir syncSubheaderHeight()) plutot qu'une valeur devinee,
       pour rester juste quelle que soit la taille d'ecran/police. */
    .bdp-atelier-stepper {
        position: sticky;
        top: 178px;
        z-index: 10;
        background: var(--bdp-dark);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.9rem 0;
        margin: 0 -15px 1rem;
        width: 100vw;
    }
    .bdp-atelier-stepper ol {
        display: flex;
        /* flex-direction: column; */
        gap: 1.6rem;
        overflow-x: scroll;
        padding: 10px 15px;
    }
    .bdp-atelier-stepper-track {
        display: none;
    }
    .bdp-atelier-stepper li {
        margin-bottom: 0;
        flex: 0 0 auto;
    }
    .bdp-atelier-stepper li::before {
        display: none;
    }
    .bdp-atelier-stepper li a {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        white-space: nowrap;
    }
    .bdp-atelier-recap {
        position: static;
    }
    /* L'apercu n'est plus sticky en mobile (<992px) : plus besoin de le
       faire suivre sous le bandeau + le temoin (eux restent sticky), il
       reprend simplement sa place normale dans le flux vertical - une
       seule chose reste fixee a l'ecran en mobile, le bandeau (total +
       retour), ce qui est suffisant et bien plus simple a raisonner que
       trois elements sticky empiles. */
    .bdp-atelier-preview {
        position: static;
        max-width: 100%;
        min-height: 0;
        margin-bottom: 1.6rem;
    }
    /* Le bateau retreci + "+" + remorque juxtaposee (voir plus haut,
       .has-remorque .bdp-atelier-preview-boat-wrap / -plus / -remorque-
       link) est un habillage pense pour un aperçu large : il suppose assez
       de place a droite du bateau pour un visuel de plusieurs centaines de
       pixels. Sur un aperçu mobile bien plus etroit, retenter ce mecanisme
       en le redimensionnant (essaye precedemment) revenait a s'enfermer
       dans des reglages en cascade fragiles - exactement le "bricolage" a
       eviter. Plus simple et plus solide : ce mecanisme reste reserve au
       desktop (>=992px, voir plus bas), et remorque + finitions sont
       affichees ici sous forme d'une bande de vignettes qui defile
       horizontalement (#bdp-atelier-preview-mobile-extras, voir plus haut
       et renderMobileExtras() dans le JS) - aucune coordonnee a calculer,
       aucun risque de debordement quelle que soit la largeur d'ecran. */
    .bdp-atelier-preview-media.has-remorque .bdp-atelier-preview-boat-wrap {
        transform: none;
    }
    .bdp-atelier-preview-plus,
    .bdp-atelier-preview-remorque-link {
        display: none;
    }
    .has-remorque .bdp-atelier-preview-badge {
        right: 0.6rem !important;
    }
    .bdp-atelier-preview-mobile-extras {
        display: flex;
        gap: 0.7rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-top: 0.9rem;
        padding-bottom: 0.1rem;
    }
    .bdp-atelier-preview-mobile-extras::-webkit-scrollbar {
        display: none;
    }
    .bdp-atelier-preview-mobile-extras:empty {
        display: none;
        margin-top: 0;
    }
    /* BUG TROUVE : les fleches du carrousel debordent volontairement de la
       carte en desktop (left/right: -22px, voir plus haut) - c'est prevu
       et contenu la-bas car "min-width: 992px" impose explicitement
       "overflow-x: visible" sur .bdp-configurator-options pour ca. En
       dessous de 992px (mode empile), rien ne prevoit ce debordement : les
       fleches depassaient donc de 22px de chaque cote de l'ecran des que
       la largeur de la station rejoint celle du viewport - provoquant un
       scroll horizontal de TOUTE la page (chaque section semble deborder,
       puisque c'est la page entiere qui devient scrollable horizontalement).
       Repris ici (au lieu de -22px) pour toute la plage <992px : les
       fleches restent a l'interieur de la carte, quelle que soit la
       largeur d'ecran. */
    .bdp-config-carousel-prev {
        left: 6px;
    }
    .bdp-config-carousel-next {
        right: 6px;
    }
}
@media (max-width: 767px) {
    .bdp-atelier-hero {
        min-height: 90vh;
    }
    .bdp-atelier-title {
        font-size: 2.3rem;
    }
    .bdp-atelier-intro {
        font-size: 0.92rem;
    }
    .bdp-atelier-subheader {
        gap: 0.8rem;
        padding: 0.7rem 1rem;
        top: 110px;
    }
    .bdp-atelier-subheader-back span {
        display: none;
    }
    .bdp-atelier-subheader-info strong {
        font-size: 0.95rem;
    }
    .bdp-atelier-subheader-price strong {
        font-size: 1.1rem;
    }
    .bdp-config-station {
        padding: 1.5rem 1.2rem 1.7rem;
        overflow-y: scroll;
    }
    .bdp-config-station-num {
        font-size: 2.4rem;
    }
    .bdp-config-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Icone "aucune option" (cercle barre) legerement reduite : a 6rem
       elle etait pensee pour des cartes larges (300px+), un peu grande
       une fois les cartes ramenees a ~150-170px sur 2 colonnes. */
    .bdp-config-option-price-none .material-icons {
        font-size: 4.4rem;
    }
    /* Fiche produit (tooltip) : carte et image raccourcies pour tenir plus
       aisement dans un aperçu mobile nettement plus petit qu'en desktop. */
    .bdp-atelier-preview-tooltip-card {
        width: 148px;
    }
    .bdp-atelier-preview-tooltip-media {
        height: 108px;
    }
    .bdp-config-carousel-arrow {
        width: 36px;
        height: 36px;
    }
    .bdp-config-carousel-track {
        max-height: 400px;
    }
    .bdp-atelier-preview {
        padding: 1.1rem 1.1rem 1.3rem;
        margin-bottom: 1.8rem;
    }
    .bdp-atelier-recap {
        display: none;
    }
    .bdp-configurator-body {
        padding-bottom: 5.5rem;
        padding-top: 0rem;
    }
    .bdp-configurator-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 500;
        background: var(--bdp-dark-soft);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.3);
        padding: 0.8rem 1rem;
        transform: translateY(100%);
        transition: transform 0.25s ease;
    }
    .bdp-configurator-mobile-bar.is-visible {
        transform: translateY(0);
    }
    .bdp-configurator-mobile-bar-total {
        font-family: var(--bdp-font-mono);
        font-size: 1.15rem;
        color: var(--bdp-orange);
    }
    .bdp-config-modal-dialog {
        max-width: 100%;
        max-height: 89vh;
        height: 100%;
        padding: 1.5rem;
    }
    .bdp-configurator-body,
    .bdp-configurator-options {
        gap: 0.5rem;
    }
    .bdp-atelier-preview-pin[data-pin-category="moteur"] {
        left: 9% !important;
        top: 54% !important;
    }
    .bdp-atelier-preview-pin[data-pin-category="sondeur"] {
        left: 41% !important;
        top: 34% !important;
    }

    .bdp-atelier-preview-pin[data-pin-category="accessoires"] {
        left: 64% !important;
        top: 24% !important;
    }

    .bdp-atelier-preview-motor-link {
        left: 2%;
        bottom: 26%;
        height: 35%;
    }
    .bdp-atelier-preview-sondeur-link {
        left: 37%;
        top: 18%;
        height: 23%;
    }
    .bdp-touch-device .bdp-atelier-preview-tooltip {
        left: 0 !important;
        right: 0 !important;
        top: 30% !important;
        bottom: 0 !important;
        width: 350px !important;
        margin: 0 auto !important;
    }
}
/* --- Petits telephones : 2 colonnes de cartes d'options devient trop
   etroit (moins de ~180px chacune) une fois sous ~575px de large ; on
   repasse a une seule colonne pleine largeur. --- */
@media (max-width: 575px) {
    .bdp-config-grid {
        grid-template-columns: 1fr;
    }
    .bdp-atelier-title {
        font-size: 1.9rem;
    }
    .bdp-atelier-hero-price strong {
        font-size: 1.8rem;
    }
    .bdp-atelier-preview-accessoires {
        max-width: 92px;
    }
    .bdp-atelier-preview-accessoire-link {
        width: 48px;
        height: 48px;
    }
}
@media (min-width: 1670px){

.bdp-atelier-preview-motor-link {
    left: 16%;

}

}

@media (max-width: 1670px) {

    .bdp-atelier-preview-pin[data-pin-category="moteur"] {
        
        left:14% !important;
        
    }
    .bdp-atelier-preview-motor-link {
        left: 8%;
  
    }
}

@media (max-width: 1635px) {

    .bdp-atelier-preview-pin[data-pin-category="moteur"] {
        
        left:13% !important;
        
    }
    .bdp-atelier-preview-motor-link {
        left: 7%;
  
    }
}

@media (max-width: 1602px) {

    .bdp-atelier-preview-pin[data-pin-category="moteur"] {
        
        left:12% !important;
        
    }
    .bdp-atelier-preview-motor-link {
        left: 4%;
    bottom: 9%;
    }
}

@media (max-width: 1550px) {

    .bdp-atelier-preview-pin[data-pin-category="moteur"] {
        
        left:10% !important;
        
    }

    .bdp-atelier-preview-motor-link {
        left:3% !important;
    }
}