/* =====================================================================
   Mécanisme de store bateau sur mesure — page 2026 (préfixe ms26-)
   Chargé par ps/mecanisme-store-bateau.php ; configurateur : global/includes/msbt-2026.php
   Même vocabulaire visuel que decoupe-mousse-2026.css / agrafes-2026.css
   ===================================================================== */
main.ms26-page {
    --ms-orange: var(--h26-orange, #c8641e); --ms-orange-d: var(--h26-orange-d, #a9500f); --ms-rouge: #bd2425;
    --ms-txt: #3d3d3d; --ms-txt-l: #7a7268; --ms-ligne: #e3dccf; --ms-creme: #faf8f4; --ms-sable: #f1ebe2;
    color: var(--ms-txt); font-family: 'Poppins', 'Urbanist', Arial, sans-serif; font-size: 15px; line-height: 1.5; text-align: left;
}
main.ms26-page * { box-sizing: border-box; }
main.ms26-page { overflow-x: hidden; overflow-x: clip; }   /* clip : coupe les débordements sans casser position: sticky */
main.ms26-page section#contenu { padding: 10px 30px 40px; max-width: 1240px; margin: 0 auto; }
main.ms26-page [hidden] { display: none !important; }

.ms26-ariane { font-size: 13px; color: var(--ms-txt-l); margin: 0 0 12px; }
.ms26-ariane a { color: var(--ms-txt-l); text-decoration: none; }
.ms26-ariane a:hover { color: var(--ms-orange); }

/* ---------- administration (repliée) ---------- */
.ms26-admin { margin: 0 0 16px; background: #f4f6f9; border: 1px solid #d5dce6; border-left: 4px solid #2f5d8a; border-radius: 10px; padding: 0 14px; font-size: 13px; }
.ms26-admin > summary { cursor: pointer; padding: 10px 0; font-weight: 700; color: #2f5d8a; }
.ms26-admin h3 { font-size: 14px; margin: 16px 0 6px; text-transform: none; }
.ms26-admin a { color: #2f5d8a; }

/* ---------- en-tête ---------- */
main.ms26-page h1 { font-size: 30px; font-weight: 600; text-transform: none; margin: 6px 0 4px; padding: 0; left: auto; line-height: 1.2; text-align: left; }
.ms26-soustitre { font-size: 17px; color: var(--ms-orange-d); margin: 0 0 14px; }
.ms26-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.ms26-chips span { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--ms-ligne); border-radius: 99px; padding: 6px 12px; font-size: 13px; }
.ms26-chips i { color: var(--ms-orange); }
.ms26-intro { max-width: 900px; color: #4a443c; margin: 0 0 24px; }
.ms26-intro p { margin: 0 0 10px; text-align: justify; }
.ms26-intro a { color: var(--ms-orange-d); }
.ms26-intro hr { display: none; }

/* ---------- configurateur : étapes | récapitulatif ---------- */
.ms26 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 28px; align-items: start; margin: 0 0 40px; }
.ms26-etapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.ms26-etape { min-width: 0; margin: 0; padding: 16px 18px 18px; background: #fff; border: 1px solid var(--ms-ligne); border-radius: 12px; }
.ms26-etape legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; font-size: 17px; font-weight: 600; }
.ms26-etape legend span { width: 28px; height: 28px; border-radius: 50%; background: var(--ms-orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.ms26-etape > *:not(legend) { clear: both; }
.ms26-champ { margin: 0 0 14px; }
.ms26-champ:last-child { margin-bottom: 0; }
.ms26-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
main.ms26-page .ms26-label label { font-weight: 600; font-size: 14px; margin: 0; width: auto; float: none; }
.ms26-note { display: block; color: var(--ms-txt-l); font-size: 12.5px; margin-top: 4px; }

main.ms26-page .ms26 input[type=number], main.ms26-page .ms26 input[type=text], main.ms26-page .ms26 select {
    height: 46px; width: 100%; max-width: 100%; padding: 0 12px; margin: 0; border: 1.5px solid var(--ms-ligne); border-radius: 8px; background: #fff; font: inherit; font-size: 16px; color: var(--ms-txt);
}
main.ms26-page .ms26 input:focus, main.ms26-page .ms26 select:focus { outline: none; border-color: var(--ms-orange); }
.ms26-unite { display: flex; align-items: center; gap: 8px; }
.ms26-unite span { color: var(--ms-txt-l); font-size: 14px; }
main.ms26-page .ms26 .ms26-unite input, main.ms26-page .ms26 .ms26-unite select { max-width: 140px; font-weight: 600; }

/* choix à deux boutons (côté, type de chaînette) */
.ms26-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ms26-choix label { position: relative; margin: 0; }
.ms26-choix input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.ms26-choix span { display: flex; align-items: center; justify-content: center; height: 46px; border: 1.5px solid var(--ms-ligne); border-radius: 8px; background: #fff; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.ms26-choix span:hover { border-color: #e4b88f; }
.ms26-choix input:checked + span { border-color: var(--ms-orange); background: #fff8ee; box-shadow: 0 0 0 1px var(--ms-orange) inset; color: var(--ms-orange-d); }
.ms26-choix input:focus-visible + span { outline: 2px solid var(--ms-orange); outline-offset: 2px; }

/* − valeur + */
.ms26-qte { display: inline-flex; align-items: stretch; height: 46px; border: 1.5px solid var(--ms-ligne); border-radius: 8px; overflow: hidden; background: #fff; }
.ms26-qte button { width: 42px; border: 0; background: var(--ms-creme); font-size: 20px; color: var(--ms-txt); cursor: pointer; padding: 0; }
.ms26-qte button:hover { background: var(--ms-sable); color: var(--ms-orange-d); }
main.ms26-page .ms26 .ms26-qte input { width: 58px; height: auto; border: 0; border-left: 1px solid var(--ms-ligne); border-right: 1px solid var(--ms-ligne); border-radius: 0; text-align: center; font-weight: 600; -moz-appearance: textfield; }
.ms26 input[type=number]::-webkit-outer-spin-button, .ms26 input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* interrupteurs OUI / NON */
.ms26-options { display: flex; flex-direction: column; gap: 4px; }
.ms26-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--ms-sable); }
.ms26-option:first-child { border-top: 0; }
main.ms26-page .ms26-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0; width: auto; float: none; font-weight: 500; font-size: 14px; }
.ms26-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ms26-switch-piste { position: relative; width: 42px; height: 24px; border-radius: 99px; background: #d9d1c4; flex-shrink: 0; transition: background .15s; }
.ms26-switch-piste::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.ms26-switch input:checked + .ms26-switch-piste { background: var(--ms-orange); }
.ms26-switch input:checked + .ms26-switch-piste::after { transform: translateX(18px); }
.ms26-switch input:focus-visible + .ms26-switch-piste { outline: 2px solid var(--ms-orange); outline-offset: 2px; }

/* aides */
.ms26-aide-btn { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ms-ligne); background: #fff; color: var(--ms-txt-l); font-size: 11px; cursor: pointer; flex-shrink: 0; padding: 0; }
.ms26-aide-btn:hover, .ms26-aide-btn[aria-expanded=true] { border-color: var(--ms-orange); color: var(--ms-orange); }
.ms26-aide { margin: 8px 0 0; padding: 10px 12px; background: var(--ms-creme); border-radius: 8px; font-size: 13px; color: #4a443c; }
.ms26-aide img { max-width: 100%; height: auto; }
.ms26-aide p { margin: 0 0 6px; }

/* ---------- récapitulatif ---------- */
.ms26-recap { position: sticky; top: 150px; background: #fff; border: 1px solid var(--ms-ligne); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ms26-schema { width: 100%; height: auto; max-height: 200px; object-fit: contain; }
/* réponse du calcul (HTML de ajax/calculateur-msbt.php, avec styles en ligne) */
.ms26-prix { background: var(--ms-creme); border-radius: 10px; padding: 14px 16px; text-align: left; line-height: 1.4; min-height: 80px; }
.ms26-prix br { display: none; }
.ms26-prix strong { display: block; font-size: 14px !important; font-weight: 500 !important; color: var(--ms-txt-l) !important; }
main.ms26-page .ms26-prix strong.ms26-montant { font-size: 32px !important; font-weight: 700 !important; color: var(--ms-txt) !important; margin-top: 2px; }
.ms26-prix s { font-size: 16px !important; color: var(--ms-txt-l) !important; }
.ms26-prix > img { height: 40px !important; margin-bottom: 4px; }
.ms26-prix hr { display: none; }
.ms26-attente { color: var(--ms-txt-l); }
.ms26-promo label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.ms26-promo > div { display: flex; gap: 8px; }
main.ms26-page .ms26 .ms26-promo input { height: 42px; flex: 1; min-width: 0; text-transform: uppercase; }
.ms26-promo button { height: 42px; padding: 0 14px; border: 1.5px solid var(--ms-ligne); border-radius: 8px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--ms-txt); cursor: pointer; }
.ms26-promo button:hover { border-color: var(--ms-orange); color: var(--ms-orange-d); }
.ms26-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 13px 18px; border: 0; border-radius: 10px; background: var(--ms-orange); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s; }
.ms26-btn:hover { background: var(--ms-orange-d); }
.ms26-btn:disabled { opacity: .5; cursor: default; }
.ms26-btn i { color: #fff; }
.ms26-alerte { display: flex; gap: 10px; margin: 0; padding: 10px 12px; background: #fdecea; border: 1px solid #f3c2c2; border-radius: 8px; color: var(--ms-rouge); font-size: 13px; line-height: 1.4; }
.ms26-alerte i { margin-top: 2px; }

/* ---------- sections ---------- */
.ms26-sec { margin: 0 0 40px; }
main.ms26-page .ms26-sec > h2 { font-size: 24px; font-weight: 600; margin: 0 0 6px; padding: 0; text-align: center; text-transform: none; }
.ms26-sub { text-align: center; color: var(--ms-txt-l); margin: 0 0 20px; }
.ms26-acc { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.ms26-acc a { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--ms-ligne); border-radius: 10px; padding: 12px; text-decoration: none; color: var(--ms-txt); transition: border-color .15s; min-width: 0; }
.ms26-acc a:hover { border-color: var(--ms-orange); }
.ms26-acc-img { display: flex; align-items: center; justify-content: center; height: 110px; background: var(--ms-creme); border-radius: 8px; }
.ms26-acc-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ms26-acc b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.ms26-acc small { color: var(--ms-orange-d); font-weight: 600; }
.ms26-texte { background: #fff; border: 1px solid var(--ms-ligne); border-radius: 12px; padding: 24px 28px; color: #4a443c; }
.ms26-texte p { margin: 0 0 10px; text-align: justify; }
main.ms26-page .ms26-texte h2, main.ms26-page .ms26-texte h3 { font-size: 19px; font-weight: 600; text-transform: none; margin: 20px 0 8px; padding: 0; text-align: left; color: var(--ms-txt); }
.ms26-texte table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; font-size: 14px; margin: 0 0 14px; }
.ms26-texte td, .ms26-texte th { border: 1px solid var(--ms-ligne); padding: 6px 10px; vertical-align: top; }
.ms26-texte img { max-width: 100%; height: auto; }
.ms26-texte hr { border: 0; border-top: 1px solid var(--ms-ligne); margin: 16px 0; }

/* ---------- barre fixe du bas : prix + ajout au panier, dès que le récapitulatif n'est plus à l'écran ---------- */
.ms26-barre { display: flex; position: fixed; left: 50%; bottom: 16px; z-index: 850; width: min(640px, calc(100% - 32px)); transform: translate(-50%, 12px); background: #fff; border: 1px solid var(--ms-ligne, #e3dccf); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.14); padding: 10px 12px 10px 18px; gap: 16px; align-items: center; font-family: 'Poppins', Arial, sans-serif; visibility: hidden; opacity: 0; transition: opacity .2s, transform .2s, visibility .2s; }
.ms26-barre.visible { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.ms26-barre-prix { display: flex; align-items: center; gap: 18px; }
.ms26-barre-prix > span { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.ms26-barre small { color: #7a7268; font-size: 12px; }
.ms26-barre b { font-size: 20px; color: #3d3d3d; }
.ms26-barre-total { padding-left: 18px; border-left: 1px solid #e3dccf; }
.ms26-barre [hidden] { display: none !important; }
.ms26-barre b em { font-style: normal; font-size: 12px; font-weight: 600; color: #7a7268; margin-left: 2px; }   /* la barre est hors du <main> : règle [hidden] propre */
.ms26-barre-total b { font-size: 22px; color: var(--ms-orange-d, #a9500f); }
/* total pour plusieurs mécanismes, dans le récapitulatif */
.ms26-total-qte { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ms-ligne); font-size: 14px; color: var(--ms-txt); }
.ms26-total-qte b { font-size: 20px; color: var(--ms-orange-d); white-space: nowrap; }
.ms26-barre .ms26-btn { width: auto; flex: 1; min-height: 48px; padding: 11px 16px; font-size: 15px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .ms26 { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 20px; }
    .ms26-etapes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
    main.ms26-page section#contenu { padding: 8px 16px 40px; }
    main.ms26-page h1 { font-size: 24px; }
    .ms26 { grid-template-columns: minmax(0, 1fr); }
    .ms26-recap { position: static; }
    .ms26-schema { max-height: 160px; }
    .ms26-texte { padding: 18px; }
    .ms26-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ms26-barre { left: 0; right: 0; bottom: 0; width: auto; transform: translateY(12px); border-radius: 0; border-width: 1px 0 0; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); gap: 14px; }
    .ms26-barre.visible { transform: none; }
    body.h26-tabbar-present .ms26-barre { bottom: 62px; padding-bottom: 10px; }
    .ms26-barre-prix { gap: 10px; }
    .ms26-barre-total { padding-left: 10px; }
    .ms26-barre b, .ms26-barre-total b { font-size: 17px; }
    .ms26-barre small { font-size: 11px; }
    .ms26-barre .ms26-btn { min-height: 46px; padding: 11px 12px; }
    /* plusieurs mécanismes : les deux prix sur une ligne, le bouton en dessous sur toute la largeur */
    .ms26-barre-multi { flex-wrap: wrap; row-gap: 8px; }
    .ms26-barre-multi .ms26-barre-prix { flex: 1 1 100%; justify-content: space-between; }
    .ms26-barre-multi .ms26-btn { flex: 1 1 100%; min-height: 44px; }
    .ms26-barre-prix > span { min-width: 0; }
}