*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root { --bg:#f4f4f2; --card:#ffffff; --border:#e0e0dc; --accent:#c8102e; --text:#1a1a1a; --muted:#666; --selbg:#fff5f6; --hdr:#1a1a1a; }
body { font-family:'Barlow', sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }

.page-title { font-family:'Barlow Condensed', sans-serif; font-size:25px; font-weight:700; letter-spacing:2px; text-transform:uppercase; background:#ffffff; padding:20px 32px; border-bottom:3px solid var(--accent); }
.tarif-note { font-size:12px; font-weight:400; color:#888; letter-spacing:0; text-transform:none; font-family:'Barlow', sans-serif; margin-left:10px; }

.layout { display:grid; grid-template-columns:1fr 310px; gap:0; max-width:1300px; margin:0 auto; padding:24px 24px 80px; align-items:start; }
.sections { display:flex; flex-direction:column; gap:0; }
.section { background:var(--card); border:1px solid var(--border); border-bottom:none; overflow:hidden; }
.section:last-of-type { border-bottom:1px solid var(--border); }
.section-hdr { background:var(--hdr); color:white; padding:9px 18px; font-family:'Barlow Condensed', sans-serif; font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase; display:flex; align-items:center; gap:9px; }
.sn { background:var(--accent); color:white; width:20px; height:20px; border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }

.opts { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px, 1fr)); gap:1px; background:var(--border); border-top:1px solid var(--border); }
.opt { background:var(--card); cursor:pointer; padding:12px 12px 10px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; transition:background .1s; position:relative; user-select:none; }
.opt:hover { background:#fafaf8; }
.opt.sel { background:var(--selbg); }
.opt.sel::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); }
.opt img { width:100%; max-height:60px; object-fit:contain; }
.opt-lbl { font-size:13px; font-weight:500; }
.opt-prc { font-size:13px; font-weight:600; color:var(--accent); margin-top:auto; }

.opts-check { display:grid; grid-template-columns:repeat(auto-fill, minmax(175px, 1fr)); gap:1px; background:var(--border); border-top:1px solid var(--border); }
.opt-check { background:var(--card); cursor:pointer; padding:11px 12px 10px; display:flex; flex-direction:column; gap:4px; transition:background .1s; position:relative; }
.opt-check.sel { background:var(--selbg); }
.opt-check.disabled { opacity:0.35; pointer-events:none; }
.chk-box { position:absolute; top:8px; right:8px; width:15px; height:15px; border:2px solid var(--border); border-radius:2px; background:white; }
.opt-check.sel .chk-box { background:var(--accent); border-color:var(--accent); }
.oc-code { font-size:12px; font-weight:700; color:var(--accent); font-family:'Barlow Condensed', sans-serif; }
.oc-lbl  { font-size:12px; font-weight:500; line-height:1.3; }
.oc-prc  { font-size:12px; font-weight:600; color:var(--accent); }

.lon-body { padding:16px 18px 18px; display:grid; grid-template-columns:1fr 1fr; gap:20px; border-top:1px solid var(--border); }
.lon-lbl { font-size:11px; font-weight:600; text-transform:uppercase; color:var(--muted); margin-bottom:5px; display: block; }
.lbtn { border:1px solid var(--border); background:white; font-size:12px; padding:5px 9px; cursor:pointer; border-radius:2px; }
.lbtn.sel { background:var(--accent); color:white; border-color:var(--accent); }

/* --- MODIFICATION SCHEMA (JONCTION IMAGES & ALIGNEMENT COTES) --- */
.schema-wrap { padding:24px 20px 20px; border-top:1px solid var(--border); display:flex; flex-direction:column; align-items:center; overflow-x:auto; }
#tableToReplace table { border-collapse: collapse !important; border-spacing: 0 !important; margin: 0 auto; }
#imageRow td { padding: 0 !important; margin: 0 !important; line-height: 0 !important; vertical-align: middle; }
#imageRow img { display: block; margin: 0; padding: 0; border: none; }
#coteRow td { padding-top: 10px !important; line-height: 1.2 !important; vertical-align: top; font-size: 13px; }

.sidebar { position:sticky; top:24px; margin-left:18px; }
.sum-card { background:var(--hdr); color:white; border-radius:2px; overflow:hidden; }
.sum-hdr { background:var(--accent); padding:12px 18px; font-family:'Barlow Condensed', sans-serif; font-size:14px; font-weight:700; text-transform:uppercase; }
.sum-body { padding:18px; }
.price-blk { text-align:center; padding:16px 0 20px; border-bottom:1px solid #333; }
.price-val { font-family:'Barlow Condensed', sans-serif; font-size:38px; font-weight:700; color:white; }
.price-val .cur { font-size:18px; vertical-align:super; color:var(--accent); }

.ref-blk { padding:12px; background:#000; border-left:4px solid var(--accent); margin:12px 0; }
.ref-lbl { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:4px; display:block; }
.ref-val { font-family:'monospace', sans-serif; font-size:14px; color:#fff; font-weight:700; letter-spacing:1px; word-break:break-all; }

.row { display:flex; justify-content:space-between; font-size:11px; gap:6px; }
.r-prc.has { color:var(--accent); }
.r-sep { border-top:1px solid #333; margin:4px 0; }
.btn-copy { margin-top:14px; width:100%; padding:10px; background:var(--accent); color:white; border:none; font-family:'Barlow Condensed', sans-serif; font-weight:700; text-transform:uppercase; cursor:pointer; }

@media(max-width:900px){
  .layout { grid-template-columns:1fr; padding:12px; }
  .sidebar { margin-left:0; margin-top:18px; position:static; }
}