:root{--bg:#F6EFE6;--ink:#201A17;--accent:#6B1F2A;--paper:#FBF6EF;--soft:#E4D3C4;--muted:#8C7F72;--line:rgba(32,26,23,.14);--sans:'Jost',system-ui,sans-serif;--serif:'Playfair Display',Georgia,serif;--script:'Pinyon Script',cursive;--arch:50% 50% 16px 16px / 34% 34% 6px 6px}
body.otl-feed-selection{margin:0;padding:0}
body.otl-feed-selection *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body.otl-feed-selection{font-family:var(--sans);background:#2A211C;color:var(--paper);overflow:hidden;height:100vh;height:var(--appvh,100dvh);display:flex;flex-direction:column}
body.otl-feed-selection button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.otl-feed-selection img{max-width:100%;display:block}
.otl-feed-selection a{text-decoration:none}

.otl-feed-selection .site-topbar{flex:none;background:var(--bg);color:var(--ink);text-align:center;padding:9px 16px}
.otl-feed-selection .site-topbar .mark{display:inline-block;line-height:1}
.otl-feed-selection .site-topbar .mark .t{font-weight:500;letter-spacing:.3em;font-size:14px;padding-left:.3em}
.otl-feed-selection .site-topbar .mark .r{height:1px;background:var(--ink);opacity:.85;margin:3px auto 2px;width:100%}
.otl-feed-selection .site-topbar .mark .s{font-weight:300;letter-spacing:.38em;font-size:8px;text-transform:uppercase;padding-left:.38em}

/* Barre de nav de la fiche produit (mark OUTRUN + "Ma sélection"), affichée
   uniquement au-dessus du panneau produit en desktop (voir media query
   900px) — masquée par défaut ici pour ne rien changer au mobile (un seul
   en-tête plein écran, celui de .site-topbar). */
.otl-feed-selection .sheet-nav{display:none}

.otl-feed-selection .stage{position:relative;flex:1;min-height:0;width:100%;max-width:460px;margin:0 auto;overflow:hidden;background:#000}
.otl-feed-selection .feed{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth}
.otl-feed-selection .feed::-webkit-scrollbar{display:none}.otl-feed-selection .feed{scrollbar-width:none}
.otl-feed-selection .feed-empty{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 30px;font-family:var(--serif);font-size:18px;color:var(--paper);opacity:.85}
.otl-feed-selection .slide{height:100%;scroll-snap-align:start;position:relative;overflow:hidden}
.otl-feed-selection .vid{position:absolute;inset:0}
.otl-feed-selection video.vid{width:100%;height:100%;object-fit:cover;display:block}
.otl-feed-selection div.vid::before{content:"";position:absolute;inset:-10%;background:radial-gradient(45% 32% at 60% 26%,rgba(255,255,255,.34),transparent 70%);animation:otl-drift 20s ease-in-out infinite alternate}
.otl-feed-selection div.vid::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 40%,transparent 55%,rgba(20,15,12,.30))}
@keyframes otl-drift{from{transform:translate(-4%,-3%) scale(1.02)}to{transform:translate(5%,4%) scale(1.08)}}
.otl-feed-selection .g1{background:linear-gradient(202deg,#FBF6EF,#E4D3C4 52%,#9C5B57 100%)}
.otl-feed-selection .g2{background:linear-gradient(202deg,#F4E9DD,#E0C6B2 52%,#A97F63 100%)}
.otl-feed-selection .g3{background:linear-gradient(202deg,#FBF1EE,#EAD6CE 48%,#B98A86 100%)}
.otl-feed-selection .g4{background:linear-gradient(202deg,#F7F0E2,#E6D3AF 54%,#B39152 100%)}
.otl-feed-selection .g5{background:linear-gradient(202deg,#EAD9CB,#C99A86 42%,#6B1F2A 100%)}
.otl-feed-selection .scrim-top{position:absolute;top:0;left:0;right:0;height:120px;background:linear-gradient(to bottom,rgba(20,15,12,.34),transparent);pointer-events:none}
.otl-feed-selection .scrim-bot{position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(to top,rgba(20,15,12,.62),rgba(20,15,12,.15) 55%,transparent);pointer-events:none}

.otl-feed-selection .rail{display:none;flex-direction:column;gap:10px;width:96px;flex:none;height:100%;overflow-y:auto;padding:20px 16px;background:#1c1613}
.otl-feed-selection .rail-item{width:64px;height:82px;border-radius:8px;border:2px solid transparent;background-color:var(--soft);background-size:cover;background-position:center;cursor:pointer;flex:none;transition:border-color .15s;opacity:.6}
.otl-feed-selection .rail-item:hover{opacity:.85}
.otl-feed-selection .rail-item.on{border-color:var(--accent);opacity:1}

.otl-feed-selection .topbar{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:flex-end;padding:16px 16px 0}
.otl-feed-selection .top-actions{display:flex;align-items:center;gap:8px}
.otl-feed-selection .selbtn{position:relative;display:flex;align-items:center;gap:8px;background:rgba(20,15,12,.30);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);padding:9px 14px 9px 12px;border-radius:100px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.otl-feed-selection .selbtn svg{width:17px;height:17px}
.otl-feed-selection .selbtn .cnt{font-weight:500;letter-spacing:.05em}
.otl-feed-selection .selbtn .wic{display:inline-flex}.otl-feed-selection .selbtn .wic svg{width:17px;height:17px;display:block}
.otl-feed-selection .heartbtn.on{background:rgba(107,31,42,.9);border-color:rgba(255,255,255,.4)}
.otl-feed-selection .heartbtn.pop{animation:otl-pop .4s ease}
@keyframes otl-pop{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}

.otl-feed-selection .info{position:absolute;left:18px;bottom:30px;right:20px;z-index:25}
.otl-feed-selection .info .nm{font-family:var(--script);font-weight:400;font-size:40px;line-height:1;color:var(--accent);text-shadow:0 0 6px var(--bg),0 0 12px var(--bg),0 0 20px var(--bg),0 0 30px var(--bg),0 0 40px var(--bg);margin-bottom:4px}
.otl-feed-selection .info .ds{font-size:12.5px;font-weight:300;opacity:.92;text-shadow:0 1px 8px rgba(0,0,0,.45);margin-bottom:16px;max-width:22em}
.otl-feed-selection .info .row{display:flex;align-items:center;gap:14px}
.otl-feed-selection .info .price{font-family:var(--sans);font-size:19px;font-weight:500;letter-spacing:.02em;color:var(--paper);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.otl-feed-selection .viewbtn{background:rgba(251,246,239,.94);color:var(--ink);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:13px 20px;border-radius:100px;display:inline-flex;align-items:center;gap:8px;transition:transform .15s ease}
.otl-feed-selection .viewbtn:active{transform:scale(.96)}.otl-feed-selection .viewbtn svg{width:13px;height:13px}
.otl-feed-selection .hint{position:absolute;left:0;right:0;bottom:120px;z-index:26;text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.5);animation:otl-bob 1.6s ease-in-out infinite;transition:opacity .5s}
.otl-feed-selection .hint .ar{display:block;margin:0 auto 6px;width:22px;height:22px}
@keyframes otl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.otl-feed-selection .backdrop{position:absolute;inset:0;background:rgba(20,15,12,.5);backdrop-filter:blur(2px);z-index:40;opacity:0;pointer-events:none;transition:opacity .3s}
.otl-feed-selection .backdrop.open{opacity:1;pointer-events:auto}
.otl-feed-selection .sheet{position:absolute;left:0;right:0;bottom:0;z-index:50;background:var(--bg);color:var(--ink);transform:translateY(101%);transition:transform .34s cubic-bezier(.32,.72,0,1);max-height:94%;overflow-y:auto;border-top-left-radius:20px;border-top-right-radius:20px}
.otl-feed-selection .sheet.open{transform:translateY(0)}
.otl-feed-selection .grip{width:38px;height:4px;background:rgba(32,26,23,.22);border-radius:100px;margin:10px auto 0;position:relative;z-index:3}
.otl-feed-selection .sh-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(251,246,239,.92);color:var(--ink);display:grid;place-items:center;z-index:3}
.otl-feed-selection .sh-close svg{width:15px;height:15px}
.otl-feed-selection .sheet-in{padding:16px 22px 30px}

/* ---- galerie (frame + vignettes) ---- */
.otl-feed-selection .frame{position:relative;border-radius:var(--arch);overflow:hidden;aspect-ratio:3/4;background:linear-gradient(205deg,var(--paper),var(--soft));margin-top:6px}
.otl-feed-selection .frame img{width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}
.otl-feed-selection .frame .vtag{position:absolute;left:12px;top:12px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--bg);background:rgba(32,26,23,.62);backdrop-filter:blur(3px);padding:5px 10px;border-radius:100px}
.otl-feed-selection .frame .soon{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(205deg,var(--paper),var(--soft))}
.otl-feed-selection .frame .soon .ring{width:40px;height:40px;border:2px solid rgba(32,26,23,.2);border-radius:50%}
.otl-feed-selection .frame .soon .lb{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.otl-feed-selection .frame.is-soon .soon{display:flex}
.otl-feed-selection .frame.is-soon img,.otl-feed-selection .frame.is-soon .vtag{visibility:hidden}
.otl-feed-selection .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.otl-feed-selection .thumb{position:relative;border-radius:12px 12px 5px 5px;overflow:hidden;aspect-ratio:3/4;border:1px solid var(--line);background:linear-gradient(205deg,var(--paper),var(--soft));padding:0}
.otl-feed-selection .thumb img{width:100%;height:100%;object-fit:cover}
.otl-feed-selection .thumb .ph-lb{position:absolute;left:0;right:0;bottom:0;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;padding:5px 2px;background:rgba(251,246,239,.82)}
.otl-feed-selection .thumb .ring{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border:1.5px solid rgba(32,26,23,.22);border-radius:50%}
.otl-feed-selection .thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid var(--accent);opacity:0;transition:opacity .16s}
.otl-feed-selection .thumb[aria-pressed="true"]::after{opacity:1}

/* ---- infos produit ---- */
.otl-feed-selection .eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-top:20px}
.otl-feed-selection #prodSheet h1{font-family:var(--script);font-weight:400;font-size:44px;line-height:1;color:var(--accent);margin:10px 0 12px}
.otl-feed-selection .price{display:flex;align-items:baseline;gap:12px}
.otl-feed-selection .price .amt{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums}
.otl-feed-selection .price .try{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.otl-feed-selection .klarna{font-size:12.5px;color:var(--muted);margin-top:7px;max-width:34em}
.otl-feed-selection .klarna b{color:var(--ink);font-weight:500}
.otl-feed-selection .desc{margin-top:18px;font-size:14.5px;color:var(--muted)}
.otl-feed-selection .desc p+p{margin-top:10px}
.otl-feed-selection .hr{height:1px;background:var(--line);margin:22px 0}

.otl-feed-selection .opt-label{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:flex;align-items:baseline;gap:9px;margin-bottom:11px}
.otl-feed-selection .opt-label .val{color:var(--ink);text-transform:none;letter-spacing:.02em;font-size:13px;font-weight:400}
.otl-feed-selection .coloris{display:flex;align-items:center;gap:11px;margin-bottom:22px;flex-wrap:wrap}
.otl-feed-selection .coloris .sw{width:34px;height:34px;border-radius:9px;position:relative;border:1px solid rgba(32,26,23,.18);background-size:cover;background-position:center;padding:0;flex:none;cursor:pointer}
.otl-feed-selection .coloris .sw.on::after{content:"";position:absolute;inset:-5px;border-radius:13px;border:1.5px solid var(--accent)}
.otl-feed-selection .coloris .sw.off{opacity:.3;cursor:not-allowed}

.otl-feed-selection .sizes{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.otl-feed-selection .sz{border:1px solid rgba(32,26,23,.26);background:transparent;color:var(--ink);padding:11px 20px;font-size:13.5px;letter-spacing:.05em;border-radius:100px;transition:all .14s;cursor:pointer;user-select:none}
.otl-feed-selection .sz.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.otl-feed-selection .sz.off{opacity:.32;cursor:not-allowed;text-decoration:line-through;pointer-events:none}
.otl-feed-selection .fit{margin-bottom:22px}
.otl-feed-selection .fit .note{font-size:12.5px;color:var(--muted)}

.otl-feed-selection .add{width:100%;background:var(--accent);color:var(--bg);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:17px;border-radius:100px;transition:filter .18s,transform .14s}
.otl-feed-selection .add:hover{filter:brightness(1.08)}
.otl-feed-selection .add:active{transform:scale(.99)}
.otl-feed-selection .add:disabled{filter:grayscale(.45);opacity:.5;cursor:not-allowed}
.otl-feed-selection .reassure{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:15px}
.otl-feed-selection .reassure div{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
.otl-feed-selection .reassure .d{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.otl-feed-selection .selstatus{margin-top:16px;text-align:center;font-size:13px;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.otl-feed-selection .selstatus b{color:var(--accent);font-weight:500}
.otl-feed-selection .selstatus a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px;white-space:nowrap}

/* ---- sections statiques (étapes / scellé / accordéon / band / related) ---- */
.otl-feed-selection section.block{padding:38px 0}
.otl-feed-selection .sec-head{text-align:center;margin-bottom:26px}
.otl-feed-selection .sec-head .k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.otl-feed-selection .sec-head h2{font-family:var(--serif);font-weight:500;font-size:24px}
.otl-feed-selection .how{border-top:1px solid var(--line)}
.otl-feed-selection .steps{display:grid;grid-template-columns:1fr;gap:22px}
.otl-feed-selection .step{padding-top:16px;border-top:1px solid var(--line)}
.otl-feed-selection .step .num{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--accent);line-height:1}
.otl-feed-selection .step h3{font-weight:500;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;margin:12px 0 6px}
.otl-feed-selection .step p{font-size:13.5px;color:var(--muted)}
.otl-feed-selection .seal{border-top:1px solid var(--line)}
.otl-feed-selection .seal-in{background:var(--paper);border:1px solid var(--line);border-radius:var(--arch);padding:28px 22px;text-align:center}
.otl-feed-selection .seal-in .k{font-family:var(--script);font-size:30px;color:var(--accent);line-height:.9;margin-bottom:6px}
.otl-feed-selection .seal-in h3{font-family:var(--serif);font-weight:500;font-size:20px;margin-bottom:10px}
.otl-feed-selection .seal-in p{font-size:13.5px;color:var(--muted)}
.otl-feed-selection .acc{border-top:1px solid var(--line)}
.otl-feed-selection .acc details{border-bottom:1px solid var(--line)}
.otl-feed-selection .acc summary{list-style:none;cursor:pointer;padding:16px 2px;display:flex;justify-content:space-between;align-items:center;font-weight:400;font-size:14px}
.otl-feed-selection .acc summary::-webkit-details-marker{display:none}
.otl-feed-selection .acc summary .pm{width:16px;height:16px;position:relative;flex:none}
.otl-feed-selection .acc summary .pm::before,.otl-feed-selection .acc summary .pm::after{content:"";position:absolute;background:var(--accent)}
.otl-feed-selection .acc summary .pm::before{left:0;right:0;top:50%;height:1.5px;transform:translateY(-50%)}
.otl-feed-selection .acc summary .pm::after{top:0;bottom:0;left:50%;width:1.5px;transform:translateX(-50%);transition:opacity .2s}
.otl-feed-selection .acc details[open] summary .pm::after{opacity:0}
.otl-feed-selection .acc .panel{padding:0 2px 18px}
.otl-feed-selection .points{list-style:none;margin:0;padding:0}
.otl-feed-selection .points li{display:flex;gap:14px;padding:8px 0;font-size:13.5px}
.otl-feed-selection .points .kk{font-family:var(--serif);color:var(--accent);flex:0 0 100px;line-height:1.4}
.otl-feed-selection .points .vv{flex:1;color:var(--muted)}
.otl-feed-selection .band{border-top:1px solid var(--line);text-align:center}
.otl-feed-selection .band .k{font-family:var(--script);font-size:36px;color:var(--accent);line-height:.9;margin-bottom:4px}
.otl-feed-selection .band h2{font-family:var(--serif);font-weight:500;font-size:22px;margin-bottom:8px}
.otl-feed-selection .band p{font-size:13.5px;color:var(--muted);margin:0 auto 24px;max-width:32ch}
.otl-feed-selection .triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.otl-feed-selection .triptych .t{position:relative;aspect-ratio:3/4;border-radius:var(--arch);overflow:hidden;background:linear-gradient(205deg,var(--paper),var(--soft))}
.otl-feed-selection .triptych .t span{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:.6}
.otl-feed-selection .related{border-top:1px solid var(--line)}
.otl-feed-selection .rel-head{margin-bottom:22px;text-align:center}
.otl-feed-selection .rel-head h2{font-family:var(--serif);font-weight:500;font-size:22px}
.otl-feed-selection .rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 12px}
.otl-feed-selection .card{text-align:center;cursor:pointer;display:block}
.otl-feed-selection .card .ph{position:relative;aspect-ratio:3/4;border-radius:var(--arch);overflow:hidden;background:linear-gradient(210deg,var(--paper),var(--soft));background-size:cover;background-position:center;transition:transform .3s}
.otl-feed-selection .card:hover .ph{transform:translateY(-3px)}
.otl-feed-selection .card .meta{display:flex;justify-content:center;align-items:baseline;gap:8px;margin-top:10px}
.otl-feed-selection .card .nm{font-family:var(--serif);font-size:14.5px}
.otl-feed-selection .card .pr{font-size:12px;color:var(--muted)}

/* ---- pied de page (fin du panneau produit) ---- */
.otl-feed-selection footer.site-footer{background:var(--ink);color:var(--bg);padding:32px 22px 26px;margin-top:32px}
.otl-feed-selection .foot-top{display:flex;flex-direction:column;gap:28px;margin-bottom:28px}
.otl-feed-selection .fmk{line-height:1}
.otl-feed-selection .fmk .t{font-weight:500;letter-spacing:.3em;font-size:15px;padding-left:.3em}
.otl-feed-selection .fmk .r{height:1px;background:var(--bg);opacity:.7;margin:5px 0 4px;width:100px}
.otl-feed-selection .fmk .s{font-weight:300;letter-spacing:.38em;font-size:8px;text-transform:uppercase;padding-left:.38em}
.otl-feed-selection .fmk p{margin-top:13px;font-size:12.5px;opacity:.6}
.otl-feed-selection .fcol h5{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-bottom:12px;font-weight:500}
.otl-feed-selection .fcol a{display:block;font-size:12.5px;opacity:.82;margin-bottom:8px;color:var(--bg)}
.otl-feed-selection .fcol a:hover{opacity:1}
.otl-feed-selection .social{display:flex;gap:16px;margin-top:15px}
.otl-feed-selection .social a{font-size:12.5px;opacity:.82;color:var(--bg)}
.otl-feed-selection .social a:hover{opacity:1}
.otl-feed-selection .news{display:flex;gap:8px;max-width:280px}
.otl-feed-selection .news input{flex:1;background:transparent;border:1px solid rgba(246,239,230,.3);color:var(--bg);padding:10px 12px;border-radius:100px;font-family:inherit;font-size:12px}
.otl-feed-selection .news input::placeholder{color:rgba(246,239,230,.5)}
.otl-feed-selection .news button{background:var(--bg);color:var(--ink);border:none;padding:10px 16px;border-radius:100px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.otl-feed-selection .foot-bot{border-top:1px solid rgba(246,239,230,.2);padding-top:18px;display:flex;flex-direction:column;gap:6px;font-size:10.5px;opacity:.6}

/* ---- "Ma sélection" ---- */
.otl-feed-selection .sel-title{font-family:var(--serif);font-size:22px;margin:6px 0 2px}
.otl-feed-selection .sel-sub{font-size:12px;color:var(--muted);margin-bottom:18px}
.otl-feed-selection .sel-item{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid rgba(32,26,23,.12)}
.otl-feed-selection .sel-item .th{width:52px;height:66px;flex:none;background-color:var(--soft);background-repeat:no-repeat;border-radius:4px}
.otl-feed-selection .sel-item .d{flex:1}.otl-feed-selection .sel-item .d .n{font-family:var(--serif);font-size:16px}.otl-feed-selection .sel-item .d .p{font-size:12.5px;opacity:.7}
.otl-feed-selection .sel-item .rm{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:6px}
.otl-feed-selection .sel-empty{text-align:center;padding:26px 10px;color:var(--muted);font-size:13.5px;font-weight:300}
.otl-feed-selection .addbtn{width:100%;background:var(--accent);color:#fff;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:17px;border-radius:100px;transition:filter .2s,transform .15s}
.otl-feed-selection .addbtn:active{transform:scale(.99)}.otl-feed-selection .addbtn:disabled{filter:grayscale(.4);opacity:.5}

.otl-feed-selection .toast{position:absolute;left:50%;bottom:96px;transform:translate(-50%,14px);z-index:60;background:rgba(20,15,12,.9);color:var(--paper);font-size:12px;letter-spacing:.04em;padding:11px 18px;border-radius:100px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap}
.otl-feed-selection .toast.show{opacity:1;transform:translate(-50%,0)}

@media(min-width:760px) and (max-width:899px){.otl-feed-selection .stage{box-shadow:0 30px 90px rgba(0,0,0,.5)}}
@media(prefers-reduced-motion:reduce){.otl-feed-selection div.vid::before,.otl-feed-selection .hint{animation:none}.otl-feed-selection .feed{scroll-behavior:auto}}
.otl-feed-selection :focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------------------------------------------------------------
   Grand écran (≥900px) : vidéo à gauche, fiche produit toujours
   visible à droite, plus de tiroir qui s'ouvre au clic.
   --------------------------------------------------------------- */
@media(min-width:900px){
  .otl-feed-selection .site-topbar{display:none}
  .otl-feed-selection .stage{max-width:none;width:100%;display:flex;box-shadow:none}
  .otl-feed-selection .rail{display:flex}
  .otl-feed-selection .feed{flex:1 1 50%;max-width:calc(50% - 96px);height:100%}
  .otl-feed-selection .info,.otl-feed-selection .hint{display:none}
  .otl-feed-selection .topbar{padding:20px 24px 0}

  .otl-feed-selection .sheet-nav{
    display:block;flex:none;position:sticky;top:0;z-index:5;
    background:color-mix(in srgb,var(--bg) 88%,transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    padding:0 32px;
  }
  .otl-feed-selection .sheet-nav .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px}
  .otl-feed-selection .sheet-nav .nav-left{display:flex;align-items:center;gap:20px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
  .otl-feed-selection .sheet-nav .nav-left a{opacity:.72;color:var(--ink)}
  .otl-feed-selection .sheet-nav .nav-left a:hover{opacity:1}
  .otl-feed-selection .sheet-nav .backlink{display:inline-flex;align-items:center;gap:7px}
  .otl-feed-selection .sheet-nav .backlink .ar{font-size:13px;line-height:1}
  .otl-feed-selection .sheet-nav .mark{text-align:center;line-height:1}
  .otl-feed-selection .sheet-nav .mark .t{font-weight:500;letter-spacing:.34em;font-size:16px;padding-left:.34em;color:var(--ink)}
  .otl-feed-selection .sheet-nav .mark .r{height:1px;background:var(--ink);opacity:.85;margin:4px auto 3px;width:100%}
  .otl-feed-selection .sheet-nav .mark .s{font-weight:300;letter-spacing:.42em;font-size:8.5px;text-transform:uppercase;padding-left:.42em;color:var(--ink)}
  .otl-feed-selection .sheet-nav .nav-right{display:flex;align-items:center;justify-content:flex-end;gap:20px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
  .otl-feed-selection .sheet-nav .nav-right .lk{opacity:.72;color:var(--ink)}
  .otl-feed-selection .sheet-nav .nav-right .lk:hover{opacity:1}
  .otl-feed-selection .sheet-nav .bag{display:inline-flex;align-items:center;gap:8px;color:var(--ink);background:none;border:none;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
  .otl-feed-selection .sheet-nav .bag .o{width:9px;height:9px;border:2px solid var(--ink);border-radius:50%}
  .otl-feed-selection .sheet-nav .bag .c{font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums}

  .otl-feed-selection .sheet#prodSheet{
    position:relative;
    flex:1 1 50%;
    max-width:50%;
    height:100%;
    max-height:none;
    transform:none;
    border-radius:0;
    border-left:1px solid var(--line);
    overflow-y:auto;
    display:flex;
    flex-direction:column;
  }
  .otl-feed-selection .sheet#prodSheet .grip,
  .otl-feed-selection .sheet#prodSheet .sh-close{display:none}
  .otl-feed-selection .sheet#prodSheet .sheet-in{flex:1;display:flex;flex-direction:column;align-items:center;padding:48px 56px 70px}
  .otl-feed-selection .sheet#prodSheet .sheet-in > *{width:100%;max-width:min(560px,100%)}
  .otl-feed-selection .rel-grid{grid-template-columns:repeat(2,1fr)}

  /* pied de page : bord à bord sur toute la largeur du panneau, comme la
     maquette de référence, plutôt que confiné à la colonne de contenu. */
  .otl-feed-selection .sheet#prodSheet .sheet-in > footer.site-footer{
    width:calc(100% + 112px);
    max-width:none;
    margin-left:-56px;
    margin-right:-56px;
    margin-bottom:-70px;
    padding:44px 56px 26px;
  }
  .otl-feed-selection footer.site-footer .foot-top{display:grid;grid-template-columns:1.3fr .8fr .9fr 1fr;gap:24px}
  .otl-feed-selection footer.site-footer .foot-bot{flex-direction:row;justify-content:space-between}

  /* traits séparateurs entre sections : pleine largeur du panneau (comme le
     pied de page). Le panneau étant souvent bien plus large que la colonne
     de lecture de 560px, on élargit la section elle-même (comme le pied de
     page) puis on recentre son contenu dans une colonne étroite, pour que
     seul le trait (bordure/fond de la section) touche les bords. */
  .otl-feed-selection .sheet#prodSheet .sheet-in > .hr,
  .otl-feed-selection .sheet#prodSheet .sheet-in > section.block.how,
  .otl-feed-selection .sheet#prodSheet .sheet-in > section.block.seal,
  .otl-feed-selection .sheet#prodSheet .sheet-in > section.block.acc-wrap,
  .otl-feed-selection .sheet#prodSheet .sheet-in > section.block.band,
  .otl-feed-selection .sheet#prodSheet .sheet-in > section.block.related{
    width:calc(100% + 112px);max-width:none;margin-left:-56px;margin-right:-56px;
  }
  .otl-feed-selection .blk-narrow{max-width:560px;margin:0 auto;width:100%}
  .otl-feed-selection .seal-in,
  .otl-feed-selection .acc{max-width:560px;margin-left:auto;margin-right:auto}

  /* modal "Ma sélection" : centrage robuste, indépendant de sa hauteur de contenu */
  .otl-feed-selection .sheet#selSheet{
    position:fixed;inset:0;margin:auto;
    top:auto;left:auto;right:auto;bottom:auto;
    transform:none;
    width:92%;max-width:420px;max-height:80vh;height:fit-content;
    border-radius:16px;
    opacity:0;pointer-events:none;
    transition:opacity .25s;
  }
  .otl-feed-selection .sheet#selSheet.open{opacity:1;pointer-events:auto}
}