:root{ --accent:#7ec8ff; --accent-dark:#0b74de; --muted:#6b7280; --card:#fff; --danger:#ef4444; --bg-grad: linear-gradient(180deg,#fff 0%,#f3f7fb 100%); --max-page-width:1180px; --hero-foreground:#012438; --input-bg:#ffffff; --input-border:#e6e9ee; --focus-shadow:0 12px 30px rgba(14,120,190,0.12); font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Prevent horizontal overflow globally */ html, body { width:100%; max-width:100%; overflow-x:clip; -webkit-overflow-scrolling:touch; } /* Lightweight debug outlines (enable with ) */ body[data-debug="true"] * { outline:1px solid rgba(255,0,0,0.06); } /* Global box-sizing and base */ * { box-sizing:border-box; } body{ margin:10px 0 0 0; min-height:100vh; background:var(--bg-grad); color:#071126; display:flex; flex-direction:column; align-items:center; line-height:1.4; font-size:15px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-overflow-scrolling:touch; overflow-x:clip; } /* Header / appbar */ header.appbar{ position:fixed; top:0; left:0; right:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:#05293a; color:#fff; gap:12px; z-index:9999; box-shadow:0 2px 10px rgba(2,6,23,0.06); } /* Brand / actions */ .brand{ display:flex; align-items:center; gap:12px; } .logo{ width:48px; height:48px; border-radius:10px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-size:22px; } .brand .title{ display:flex; flex-direction:column; } .brand .name{ font-size:18px; font-weight:800; color:#fff; letter-spacing:0.2px; } .brand .tag{ font-size:12px; color:rgba(255,255,255,0.85); } .actions{ display:flex; align-items:center; gap:8px; } .icon-btn{ background:transparent; border:0; color:#fff; cursor:pointer; padding:8px; border-radius:8px; font-size:16px; } .icon-btn:hover {background-color: rgba(255, 255, 255, 0.1);transform: scale(1.09);transition: all 0.2s ease;} .cart-badge{ position:relative; left:-8px; top:-6px; background:var(--danger); color:#fff; border-radius:999px; padding:2px 6px; font-size:12px; font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,0.2); } /* Main container (centered) */ main.container{ width:100%; max-width:var(--max-page-width); margin:28px auto; display:grid; grid-template-columns:1fr; gap:28px; align-items:start; padding-left:clamp(12px,4vw,24px); padding-right:clamp(12px,4vw,24px); } /* HERO */ .hero{ grid-column:1/-1; width:100%; max-width:1180px; margin:0 auto; border-radius:10px; box-shadow:0 8px 30px rgba(2,6,23,0.06); position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 20px; background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.85)); } .hero::before{ content:''; position:absolute; inset:0; border-radius:12px; background-image:url('assets/images/logo.jpg'); background-size:cover; background-position:center center; opacity:0.60; z-index:0; pointer-events:none; } @media (min-width:1400px){ .hero::before{ background-size:contain; background-position:center center; } } .hero > *{ position:relative; z-index:2; } .hero .top-title{ font-size:20px; color:var(--hero-foreground); font-weight:600; margin:0; } .hero h1{ margin:6px 0; font-size:34px; line-height:1.02; color:var(--hero-foreground); } .hero .subtitle{ margin:8px 0 14px; color:var(--muted); font-size:15px; } /* Search */ .search{ display:flex; gap:8px; margin-top:12px; max-width:95%; position:relative; z-index:1002; } .search input{ flex:1; border-radius:12px; border:1px solid var(--input-border); font-size:15px; box-shadow:0 6px 18px rgba(11,116,222,0.03); transition:box-shadow .18s, transform .12s, border-color .12s; outline:none; background:rgba(255,255,255,0.96); max-width:95%; padding:10px 14px; } .search input::placeholder{ color:#9aa4b2; } .search input:focus{ box-shadow:var(--focus-shadow); transform:translateY(-2px); border-color:var(--accent-dark); } .search .btn-ghost{ padding:10px 12px; border-radius:10px; border:1px solid #e6eef6; background:#fff; color:var(--accent-dark); cursor:pointer; transition:background .12s, color .12s, box-shadow .12s, transform .08s; box-shadow:0 4px 12px rgba(11,116,222,0.04); } .search .btn-ghost:hover{ background:rgba(11,116,222,0.06); color:var(--accent-dark); } .search .btn-ghost:active{ transform:translateY(1px); box-shadow:0 2px 6px rgba(11,116,222,0.06); } .search .btn-ghost:focus{ outline:2px solid rgba(11,116,222,0.12); outline-offset:2px; } /* Suggestions dropdown */ .suggestions{ position:absolute; left:0; right:0; top:100%; margin-top:8px; background:var(--card); border:1px solid #e9eef6; border-radius:10px; box-shadow:0 20px 60px rgba(2,6,23,0.12); max-height:320px; overflow:auto; z-index:22000; display:none; } .suggestions.open{ display:block; } .suggestions .item{ padding:10px 12px; border-bottom:1px solid #f3f6fb; cursor:pointer; display:flex; justify-content:space-between; align-items:center; } .suggestions .item:last-child{ border-bottom:0; } .suggestions .item:hover, .suggestions .item.active{ background:#f6fbff; outline:none; } /* Grid & Card base */ .grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:14px; margin-left:0; margin-right:0; width:100%; max-width:100%; } .card{ background:var(--card); padding:14px; border-radius:10px; border:1px solid #e9eef6; display:flex; background-color: #ffffff; flex-direction:column; gap:20px; transition:transform .14s; position:relative; } .card:hover{ transform:translateY(-6px); } /* Images / thumbs */ .img, .ci-thumb, img{ max-width:100%; height:auto; display:block; object-fit:cover; box-sizing:border-box; } .img{ aspect-ratio:1/1; height:auto; background:#f1f5f9; border-radius:8px; background-position:center; background-size:contain; background-repeat: no-repeat; background-color: #ffffff; width:auto; flex-shrink:0; position:relative; } /* Product badge */ .product-badge{ display:inline-block; padding:6px 8px; border-radius:999px; font-size:13px; font-weight:700; color:#fff; background:var(--danger); position:absolute; left:14px; top:14px; z-index:3; box-shadow:0 6px 18px rgba(2,6,23,0.12); } .product-badge.soon{ background:linear-gradient(90deg,#ffb44d,#ff8a4d); color:#012438; } .product-badge.promo{ background:linear-gradient(90deg,#ffe082,#ffd54f); color:#06324b; } /* Card meta and controls */ .card .product-badge{ left:10px; top:10px; z-index:4; } .card-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; } .card-title{ font-weight:600; } .card-sub{ color:var(--muted); font-size:13px; margin-top:6px; } .price{ font-weight:700; color:#071126; } .price-old{ text-decoration:line-through; color:#9aa4b2; margin-right:8px; font-weight:600; } .price-new{ color:#071126; font-weight:800; } .controls{ display:flex; align-items:center; gap:12px; margin-top:0; justify-content:center; flex-wrap:wrap; } /* Qty box */ .qtybox{ display:inline-flex; align-items:center; border:1px solid var(--input-border); border-radius:8px; overflow:hidden; background:#fff; } .qtybox button{ background:#fff; border:0; padding:8px 12px; cursor:pointer; font-weight:700; color:#07304a; } .qtybox span{ min-width:48px; text-align:center; padding:6px 8px; display:inline-block; } /* Buttons */ .btn-primary{ background:linear-gradient(180deg,var(--accent),var(--accent-dark)); color:#06324b; padding:10px 14px; border-radius:10px; border:0; cursor:pointer; font-weight:700; box-shadow:0 8px 20px rgba(14,120,190,0.12); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(14,120,190,0.18); color:#fff; } .btn-ghost{ background:transparent; border:1px solid #e6eef6; padding:8px 10px; border-radius:8px; cursor:pointer; } .small{ font-size:13px; color:var(--muted); } /* Cart panel */ .cart-panel{ position:fixed; right:16px; top:72px; width:360px; max-height:78vh; background:var(--card); border-radius:12px; box-shadow:0 20px 50px rgba(2,6,23,0.18); overflow:auto; padding:12px; display:none; flex-direction:column; gap:10px; z-index:20050; } .cart-panel.open{ display:flex; } .cart-item{ display:flex; gap:10px; align-items:center; border-bottom:1px solid #f1f4f8; padding-bottom:10px; } .ci-thumb{ width:56px; height:56px; border-radius:8px; background-position:center; background-size:cover; } .cart-footer{ display:flex; justify-content:space-between; align-items:center; padding-top:8px; } .remove{ background:transparent; border:0; color:var(--danger); cursor:pointer; } .cart-panel .btn-ghost:hover, .cart-panel .remove:hover{ color:var(--accent-dark); background:rgba(126,200,255,0.10); border-color:rgba(126,200,255,0.18); transform:translateY(-2px); } .btn-ghost:disabled{ opacity:0.6; cursor:not-allowed; box-shadow:none; } .btn-ghost:disabled:hover{ transform:none; background:transparent; border-color:#e6eef6; color:var(--muted); } .btn-ghost:disabled:hover::after{ content:" 🚫"; margin-left:6px; } /* About & footer */ .about{ margin-top:28px; display:flex; flex-direction:column; align-items:center; margin-bottom:64px; } .about-toggle{ width:100%; max-width:980px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; background:#fff; border:1px solid #e6eef6; border-radius:10px; cursor:pointer; font-size:16px; } .about-content{ width:100%; max-width:980px; margin-top:18px; background:#fff; padding:18px; border-radius:8px; border:1px solid #eef4fb; line-height:1.45; } .footer{ margin-top:64px; padding:18px; text-align:center; color:var(--muted); font-size:13px; width:100%; } /* Overlays, modals, loading */ .dynamic-overlay, .overlay, .loading-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; } .dynamic-overlay{ background:rgba(0,0,0,0.45); z-index:30999; } .dynamic-alert{ background:#fff; color:#000; padding:18px; border-radius:10px; border:1px solid rgba(0,0,0,0.08); box-shadow:0 8px 30px rgba(2,6,23,0.18); max-height:80vh; overflow:auto; width:100%; max-width:640px; font-size:16px; z-index:31000; } .dynamic-alert .btn{ padding:10px 14px; border-radius:8px; border:0; cursor:pointer; font-weight:700; } .dynamic-alert .btn.primary{ background:linear-gradient(180deg,var(--accent),var(--accent-dark)); color:#06324b; } .dynamic-alert .btn.ghost{ background:transparent; border:1px solid #e6eef6; color:var(--accent-dark); } .loading-overlay{ background:rgba(7,17,38,0.45); z-index:32000; } .loading-box{ background:linear-gradient(180deg,#fff,#f6fbff); padding:18px; border-radius:12px; box-shadow:0 12px 40px rgba(2,6,23,0.25); display:flex; flex-direction:column; align-items:center; gap:12px; min-width:220px; } /* Payment modal */ .payment-modal{ display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:94%; max-width:920px; background:var(--card); padding:0; border-radius:12px; box-shadow:0 20px 60px rgba(2,6,23,0.25); z-index:24500; max-height:90vh; overflow:hidden; display:flex; flex-direction:column; } .modal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; background:linear-gradient(90deg,var(--accent),var(--accent-dark)); color:#06324b; border-top-left-radius:12px; border-top-right-radius:12px; } .modal-header strong{ font-size:18px; color:#06324b; } .modal-close{ background:transparent; border:0; color:#06324b; font-size:18px; padding:8px; border-radius:8px; cursor:pointer; transition:background .12s, transform .08s; } .modal-close:hover{ background:red; color:white; transform:scale(1.03); } /* Modal body and form layout */ .modal-body{ margin-top:0; display:grid; gap:12px; align-items:start; padding:18px; overflow:auto; grid-template-columns:1fr 360px; } .order-summary{ Width: 100%; height:auto; overflow:auto; border-radius:8px; border:1px solid #f1f4f8; padding:12px; background:#fff; } .modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; grid-column:1 / -1; justify-content: center; align-items: center;} /* Inputs & labels */ .form-row{ display:grid; gap:12px; grid-template-columns:1fr; } .two-cols{ display:grid; gap:12px; grid-template-columns:1fr 1fr; align-items:start; } .two-cols > div{ display:flex; flex-direction:column; gap:6px; } .input{ width:100%; padding:12px 14px; height:35px; border-radius:5px; border:1px solid var(--input-border); background:var(--input-bg); font-size:15px; transition:box-shadow .14s, border-color .12s, transform .06s; } .input:focus{ outline:none; border-color:var(--accent-dark); box-shadow:var(--focus-shadow); transform:translateY(-1px); } .label-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; } .label-row .small{ margin:0; color:var(--muted); font-size:13px; } .required{ color:var(--danger); margin-left:6px; font-weight:700; } .field-help{ font-size:13px; color:var(--muted); margin-top:6px; } .field-error{ font-size:13px; color:var(--danger); margin-top:6px; font-weight:700; display:none; } /* Feedback */ .feedback{ font-size:14px; color:var(--muted); margin-top:6px; } .feedback.error{ color:var(--danger); font-weight:700; } /* Scrollbars for supported browsers */ .modal-body::-webkit-scrollbar, .order-summary::-webkit-scrollbar, .suggestions::-webkit-scrollbar, .cart-panel::-webkit-scrollbar{ height:10px; width:10px; } .modal-body::-webkit-scrollbar-thumb, .order-summary::-webkit-scrollbar-thumb, .suggestions::-webkit-scrollbar-thumb, .cart-panel::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--accent),var(--accent-dark)); border-radius:8px; } /* ---------- Responsive breakpoints reorganized ---------- */ /* Mobile (phones) up to 500px */ @media (max-width:500px){ /* Tighter main padding and single-column content */ main.container{ padding-left:16px; padding-right:16px; margin:20px auto; gap:18px; } /* Hero spacing and typography adjustments */ .hero{ padding:18px 14px; border-radius:8px; } .hero h1{ font-size:22px; } .hero .top-title{ font-size:16px; } /* Grid: force min two cards per row where possible; increase gap slightly */ .grid{ gap:12px; grid-template-columns: repeat(2, 1fr); } /* Cards: compact, image prioritised above content */ .card{ padding:14px; gap:12px; } .card .img{ aspect-ratio:1/1; width:100%; height:auto; border-radius:6px; object-fit:contain; background-size:contain; background-repeat:no-repeat; margin-bottom:10px; flex:0 0 auto; } .card .card-title{ font-size:15px; } .card .price{ font-size:14px; } /* Smaller visuals in header area */ .logo{ width:40px; height:40px; font-size:18px; border-radius:8px; } .brand .name{ font-size:16px; } /* Cart panel becomes full width bottom sheet */ .cart-panel{ right:10px; left:10px; top:72px; width:auto; max-height:68vh; border-radius:10px; } /* Modal becomes full screen/dialog stack */ .payment-modal{ width:96%; max-width:640px; left:50%; top:50%; transform:translate(-50%,-50%); } .modal-body{ grid-template-columns:1fr; padding:14px; } .order-summary{ order:2; max-height:240px; } /* Reduce image heights for list thumbs */ .img{ height:120px; } .ci-thumb{ width:48px; height:48px; } /* Reduce qtybox width */ .qtybox span{ min-width:36px; } .search{ gap:6px; } } /* Tablet (portrait to landscape) 600px to 1024px */ @media (min-width:600px) and (max-width:1024px){ main.container{ max-width:1000px; padding-left:20px; padding-right:20px; margin:28px auto; gap:22px; } /* Hero scales up */ .hero{ padding:22px 20px; border-radius:10px; } .hero h1{ font-size:28px; } /* Grid: min two cards per row, allow 3 when space permits */ .grid{ gap:16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* Card: slightly larger images and spacing */ .card{ padding:16px; gap:16px; border-radius:10px; } .card .img{ aspect-ratio:1/1; border-radius:8px; object-fit:contain; background-size:contain; margin-bottom:12px; } /* Modal layout: keep side order summary on wider tablets */ .modal-body{ grid-template-columns:1fr 320px; padding:18px; } .order-summary{ max-height:360px; } /* Header */ .brand .name{ font-size:17px; } .logo{ width:44px; height:44px; } /* Cart panel moderate size */ .cart-panel{ width:320px; right:12px; top:76px; max-height:72vh; } /* Inputs and form adjustments */ .two-cols{ grid-template-columns:1fr 1fr; } @media (min-width:900px){ .grid{ grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); } } } /* PC / desktop small 1025px to 1366px */ @media (min-width:1025px) and (max-width:1366px){ main.container{ max-width:1180px; padding-left:28px; padding-right:28px; margin:36px auto; gap:28px; } /* Hero prominent */ .hero{ padding:28px 24px; border-radius:12px; } .hero h1{ font-size:34px; } /* Desktop grid: more columns but keep sensible min card width */ .grid{ gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Cards and images */ .card{ padding:16px; gap:20px; border-radius:12px; } .card .img{ height:auto; aspect-ratio:1/1; object-fit:contain; background-size:contain; background-repeat: no-repeat; background-color: #ffffff;} /* Cart panel comfortable width */ .cart-panel{ width:360px; right:16px; top:84px; max-height:78vh; } /* Modal: side order summary active */ .modal-body{ grid-template-columns:1fr 360px; } .order-summary{ max-height:420px; } /* Slightly larger typography */ .brand .name{ font-size:18px; } .logo{ width:48px; height:48px; } .search input{width: 100%;} } /* Desktop large 1367px and up */ @media (min-width:1367px){ main.container{ max-width:1360px; padding-left:32px; padding-right:32px; margin:40px auto; gap:32px; } /* Hero: allow larger background containment */ .hero{ padding:32px 28px; border-radius:12px; max-width:1360px; } .hero h1{ font-size:40px; } /* Grid: more generous columns, keep min width conservative */ .grid{ gap:20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Cards: hover stronger, shadow more pronounced */ .card{ padding:18px; gap:22px; border-radius:12px; transition:transform .14s, box-shadow .14s; box-shadow:none; } .card:hover{ transform:translateY(-8px); box-shadow:0 18px 50px rgba(2,6,23,0.06); } /* Hero background sizing */ .hero::before{ background-size:contain; background-position:center center; } /* Cart panel anchored to right with comfortable width */ .cart-panel{ right:24px; top:92px; width:380px; max-height:80vh; } /* Modal comfortable width */ .payment-modal{ max-width:920px; } .modal-body{ grid-template-columns:1fr 360px; } } /* Utility small-screen adjustments reused where needed */ @media (max-width:560px){ .img{ height:140px; } .modal-body{ grid-template-columns:1fr; } .order-summary{ order:2; } } /* Fallback for legacy narrow breakpoints (retain earlier behaviors) */ @media (max-width:880px){ .hero{ padding-left:12px; padding-right:12px; } .grid{ gap:14px; } .card{ padding:16px; min-height:auto; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; } .card .img{ aspect-ratio:1/1; width:100%; height:auto; border-radius:5px; object-fit:contain; background-size:contain; background-position:center; background-repeat:no-repeat; background-color:#ffffff; margin-bottom:12px; flex:0 0 auto; } .card .card-title{ font-size:16px; } .card .price{ font-size:15px; } } @media (max-width:420px){ .card .img{ max-height:calc(72vw); } .card{ padding:14px; gap:10px; } .card .card-title{ font-size:15px; } .card .price{ font-size:14px; } } :root { --overlay-bg: rgba(0,0,0,0.45); --modal-bg: #fff; --card-bg: #f7fbff; --accent: #0077cc; --radius: 10px; } .open-btn { padding: 10px 14px; background: var(--accent); color: #fff; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; } .overlayy { display: none; position: fixed; inset: 0; background-color: var(--overlay-bg); z-index: 9998; align-items: center; justify-content: center; padding: 20px; } .overlayy.show { display: flex; } .contact-modal { background: var(--modal-bg); border-radius: 16px; box-shadow: 0 20px 60px rgba(2,6,23,0.25); width: 90%; height: auto; position: relative; z-index: 9999; overflow: hidden; display: flex; flex-direction: row; flex-wrap: wrap; opacity: 0; transform: translateY(8px) scale(.99); transition: transform .18s ease, opacity .18s ease; } .contact-modal.show { opacity: 1; transform: translateY(0) scale(1); } .modal-header { background: linear-gradient(90deg,#00aaff,#0077cc); color: #fff; padding: 14px 18px; width: 100%; display: flex; justify-content: space-between; align-items: center; font-weight: 700; } .modal-close { background: transparent; border: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: 18px; cursor: pointer; border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; } .modal-body { padding: 18px; overflow-y: auto; display: flex; flex-direction: row; flex-wrap: wrap; } .contact-grid { display: grid; width: 100%; gap: 14px; flex-direction: row; flex-wrap: wrap; grid-template-columns: 1fr; } @media (min-width: 520px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } } .contact-card { background: var(--card-bg); border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 16px; align-items: center; box-shadow: 0 6px 18px rgba(2,6,23,0.06); } .contact-icon { font-size: 34px; width: 72px; height: 72px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(0,170,255,0.12), rgba(0,119,204,0.08)); border-radius: 12px; flex-shrink: 0; } .contact-card h4 { margin: 0; font-size: 15px; font-weight: 700; color: #06324b; } .contact-card p { margin: 0; font-size: 14px; color: #264048; } .contact-link { color: inherit; text-decoration: none; font-weight: 600; transition: color 0.15s ease; } .contact-link:hover, .contact-link:focus { color: var(--accent); text-decoration: underline; } .modal-note { text-align: center; margin-top: 14px; font-size: 13px; color: #3b5564; } /* === Scope local pour la circulaire === */ #circularBtn, .circular-modal, .circular-vendor-modal, .circular-modal * , .circular-vendor-modal * { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* variables locales pour la circulaire */ :root { --circ-accent: #00aaff; --circ-accent-2: #0077cc; --circ-bg: #ffffff; --circ-ink: #012438; --circ-muted: #47535b; --circ-danger: #ef4444; --circ-panel-radius: 12px; } /* bouton circulaire (isolé) */ #circularBtn, .circular-btn { background: linear-gradient(90deg, var(--circ-accent), var(--circ-accent-2)); color: #fff; border: 0; padding: 8px 12px; border-radius: 10px; font-weight: 700; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; box-shadow: 0 8px 20px rgba(2,6,23,0.06); transition: transform .12s ease, box-shadow .12s ease; } #circularBtn:active, .circular-btn:active { transform: translateY(1px); box-shadow: 0 6px 16px rgba(2,6,23,0.08); } #circularBtn:focus, .circular-btn:focus { outline: 3px solid rgba(0,170,255,0.14); outline-offset: 3px; } /* modals: positionnement et isolation */ .circular-modal, .circular-vendor-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 92%; max-width: 980px; max-height: 88vh; overflow: auto; background: var(--circ-bg); border-radius: var(--circ-panel-radius); box-shadow: 0 24px 60px rgba(2,6,23,0.30); z-index: 40000; display: none; flex-direction: column; -webkit-overflow-scrolling: touch; } /* affichage contrôlé par JS (utilisez .show) */ .circular-modal.show, .circular-vendor-modal.show { display: flex; animation: circ-fade .16s ease; } @keyframes circ-fade { from { opacity:0; transform: translate(-50%,-48%) scale(.995); } to { opacity:1; transform: translate(-50%,-50%) scale(1); } } /* header commun */ .circular-modal .header, .circular-vendor-modal .header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: linear-gradient(90deg,#fff7e6,#ffefcf); border-top-left-radius: var(--circ-panel-radius); border-top-right-radius: var(--circ-panel-radius); gap: 12px; } /* body commun */ .circular-modal .body, .circular-vendor-modal .body { padding: 14px; display: flex; gap: 12px; flex-direction: column; color: var(--circ-ink); } /* iframe preview - fixed to modal area */ .circular-modal iframe { width: 100%; height: 60vh; border: 0; border-radius: 8px; background: #f3f7fb; display: block; } /* vendor form grid isolation */ .vendor-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .vendor-row { display: grid; grid-template-columns: 1fr 110px 110px 120px 90px 1fr; gap: 8px; align-items: start; padding: 10px; border-radius: 8px; background: #fbfdff; border: 1px solid #eef6fb; width: 100%; } /* small / helper text */ .circ-small { font-size: 13px; color: var(--circ-muted); } .small-muted { font-size: 13px; color: var(--circ-muted); } .limit-note { font-size: 12px; color: var(--circ-muted); margin-left: 8px; } /* inputs and selects localized */ .inline-select, .inline-input, .rotate-password { width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid #dfeaf4; background: #fff; font-size: 14px; color: var(--circ-ink); } .rotate-password { font-family: monospace; background: #f3f7fb; font-weight: 700; } /* image preview inside vendor row */ .vendor-row .img-preview { width: 64px; height: 64px; background: #fff center/contain no-repeat; border-radius: 6px; border: 1px solid #e6eef6; } /* preview grid for generated items */ .preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; } .preview-item { background: #fff; padding: 14px; border-radius: 8px; text-align: center; border: 1px solid #f1f6fb; min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; } .preview-item img { max-width: 100%; max-height: 110px; object-fit: contain; display: block; margin: 0 auto 8px; } /* badges / price styling */ .preview-badge { background: linear-gradient(90deg,#ffe082,#ffd54f); color: #06324b; padding: 6px 10px; border-radius: 999px; font-weight: 800; font-size: 13px; } .preview-price-new { font-weight: 900; font-size: 30px; color: #06324b; line-height: 1; } .preview-price-old { text-decoration: line-through; color: #9aa4b2; font-size: 14px; margin-top: 6px; } .preview-title { font-weight: 800; font-size: 20px; color: #012438; margin: 0 0 6px 0; } .preview-sub { font-size: 12px; color: #6b7280; } /* footer area inside vendor modal */ .vendor-footer { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding-top: 8px; } /* errors / warnings */ .bad { color: var(--circ-danger); font-weight: 700; font-size: 12px; } .promo-error { display: none; } /* responsive adjustments scoped to modal */ @media (max-width: 820px) { .vendor-row { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 8px; } .preview-grid { grid-template-columns: repeat(2, 1fr); } .circular-modal, .circular-vendor-modal { width: 96%; max-width: 720px; padding: 12px; } } /* ensure high specificity so global rules don't override */ .circular-modal .body .circular-btn, .circular-vendor-modal .body .circular-btn { box-shadow: none; } /* small accessibility helpers */ .circular-modal [role="dialog"], .circular-vendor-modal [role="dialog"] { outline: none; }