/* Shared UI components used across views — the product-detail buy box AND the add-to-cart confirmation modal, which can now be triggered from anywhere (product page, category listing, …). This lives in a GLOBAL sheet, not a per-view file, precisely because the modal is no longer product-page-only. (The buy-box LAYOUT itself stays in vues/produit/produit.css — it's detail- page-specific; only the reusable pieces live here.) */ /* ── Quantity stepper (markup from qtyStepper(); behaviour in js/javascript.js) ── */ .qty-stepper { display: inline-flex; align-items: stretch; height: 44px; /* WCAG 2.5.5 touch target */ background: #fff; border: 1px solid #d0d5dd; /* square, to match the buy button + the rest of css8 (no border-radius unless asked) */ overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; } .qty-stepper:focus-within { border-color: var(--green-cart); /* matches the green "Ajouter au Panier" */ box-shadow: 0 0 0 3px rgba(74, 170, 53, .15); } .qty-minus, .qty-plus { width: 44px; border: none; background: #fff; color: #667085; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; user-select: none; touch-action: manipulation; /* no double-tap zoom on the buttons */ transition: background .12s ease, color .12s ease; } .qty-minus:hover, .qty-plus:hover { background: #f3f8f1; color: var(--green-cart-dark); } .qty-minus:active, .qty-plus:active { background: #e7efe4; } .qty-minus:focus-visible, .qty-plus:focus-visible { outline: 2px solid var(--green-cart); outline-offset: -2px; } .qty-minus[disabled], .qty-plus[disabled] { color: #cbd2da; cursor: not-allowed; background: #fff; } .qty-minus { border-right: 1px solid #eceff3; } .qty-plus { border-left: 1px solid #eceff3; } .qtyinput { width: 56px; text-align: center; border: none; outline: none; background: transparent; font-size: 15px; font-weight: 700; color: #1d2939; -moz-appearance: textfield; appearance: textfield; } .qtyinput::-webkit-inner-spin-button, .qtyinput::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* In-stock / on-order indicator under the stepper */ .qty-stockinfo { margin-top: 6px; font-size: 12px; line-height: 1.3; color: #667085; } .qty-stockinfo { display: flex; align-items: center; gap: 5px; } .qty-stockinfo .icon { flex: 0 0 auto; width: 14px; height: 14px; } /* sprite 'package' (was a 📦 emoji) */ .qty-stockinfo.over { color: #B38C00; } /* amber when part of the qty is on backorder */ .qty-stockinfo:not(.has-msg) { display: none; } /* nothing shown unless there's an availability split */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Add-to-cart cross-sell modal (panier/add → complementary products) ── */ /* treact's .treact-modal is width:500px → only ~2 cards fit and the modal gets very tall. On wider viewports widen THIS modal so the grid can go to 3 columns. (Guarded by min-width so phones keep treact's responsive width.) */ @media (min-width: 700px) { #modal-compl .treact-modal { width: 720px; } /* capped by treact's max-width:90% */ } .compl-modal { min-width: 300px; } .compl-main { display: flex; gap: 12px; align-items: center; padding: 4px 4px 14px; border-bottom: 1px solid #eee; } .compl-main__info { line-height: 1.3; } .compl-title { margin: 14px 0 8px; font-weight: 700; color: #1d2939; } /* Recommended products now use the canonical .associe tile (product_tile8) so the cross-sell matches the tiles used everywhere else on the site. The tile is a fixed 168px — wrap and centre them in the modal; they drop to fewer per row as it narrows. */ .compl-tiles { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .compl-added { color: #138a3e; font-weight: 700; font-size: 13px; margin-bottom: 2px; } .compl-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; } .compl-actions .btn-link { background: none; border: none; color: #667085; font-weight: 700; cursor: pointer; padding: 8px 4px; margin-right: auto; } .compl-actions .btn-link:hover { color: #1d2939; } .compl-actions .btn-outline { background: #fff; border: 1px solid #138a3e; color: #138a3e; border-radius: 8px; padding: 9px 14px; font-weight: 700; cursor: pointer; } .compl-actions .btn-outline:hover { background: #f3f8f1; } /* ── Cart-view modal (panier/show): thumb · info · qty stepper · PU · subtotal · remove ── */ @media (min-width: 700px) { #modal-panier .treact-modal { width: 640px; } /* room for the line layout (capped by max-width:90%) */ } .cart-modal { min-width: 300px; } .cart-modal__head { font-size: 13px; color: #555; margin-bottom: 10px; } .cart-modal__note { margin-top: 12px; font-size: 12px; color: #888; } .cart-row__pu s { display: block; font-size: 12px; color: #667085; font-weight: 400; } /* list price struck through above the net (#667085 = 5:1 on white; #98a2b3 was 2.6:1) */ .cart-row__stock { margin-top: 3px; font-size: 12px; } .cart-stockpct { display: inline-flex; align-items: center; gap: 4px; color: #B54708; font-weight: 700; white-space: nowrap; } .cart-stockpct .icon { width: 14px; height: 14px; } .cart-stockpct.is-full { color: var(--green-cart-dark, #2f7d22); } /* Cart actions: [Sauvegarder comme devis] (secondary) · [Commander] (primary, green = buy) */ .tnl-tot__row--free b { color: var(--green-cart-dark, #2f7d22); } .tnl-tot__hint { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; background: #fff8e6; color: #7a4b00; font-size: 13px; line-height: 1.4; } .tnl-tot__hint .icon, .tnl-portrule .icon { width: 18px; height: 18px; flex: none; } .tnl-portrule { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3); } /* Franco de port progress (lib/panier.php panier_franco_html) — amber = "almost there", green = reached */ .cart-franco { position: relative; display: flex; align-items: center; gap: 10px; margin-top: var(--space-3); padding: 10px 12px 14px; background: #fff8e6; color: #7a4b00; font-size: 14px; line-height: 1.4; } .cart-franco .icon { width: 20px; height: 20px; flex: none; } .cart-franco small { color: #9a6a1c; white-space: nowrap; } .cart-franco__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(122,75,0,.15); } .cart-franco__bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); background: #F39200; transition: width .35s cubic-bezier(.22,1,.36,1); } .cart-franco.is-ok { background: #ECF7E8; color: #2f7d22; padding-bottom: 10px; } .cart-modal:has(.cart-empty) .cart-franco { display: none; } .cart-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); } .cart-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; border-radius: 0; } .cart-actions button .icon { width: 18px; height: 18px; } .cart-actions__save { background: #fff; color: #344054; border: 1px solid #d0d5dd; } .cart-actions__save:hover { background: #f2f4f7; } .cart-actions__order { background: var(--green-cart, #4AAA35); color: #fff; border: 0; } .cart-actions__order:hover { filter: brightness(.95); } .cart-modal:has(.cart-empty) .cart-actions { display: none; } /* last line removed → nothing to order */ @media (max-width: 960px) { .cart-actions button { flex: 1 1 auto; } } .cart-rows { display: flex; flex-direction: column; } .cart-row { display: grid; grid-template-columns: 56px minmax(110px, 1fr) auto auto auto 30px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; } .cart-row__img { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; } .cart-row__img img { max-width: 100%; max-height: 100%; object-fit: contain; } .cart-row__info { min-width: 0; } .cart-row__ref { font-weight: 700; font-size: 13px; } .cart-row__desc { font-size: 12px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cart-row__pu { font-size: 12px; color: #777; text-align: right; white-space: nowrap; } .cart-row__sub { font-weight: 700; text-align: right; white-space: nowrap; min-width: 64px; } .cart-row__del { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; color: #b0b0b0; font-size: 22px; line-height: 1; border-radius: 6px; } .cart-row__del:hover { color: #c0392b; background: #fbeceb; } /* compact stepper inside a cart row */ .cart-row .qty-stepper { height: 36px; } .cart-row .qty-minus, .cart-row .qty-plus { width: 32px; font-size: 16px; } .cart-row .qtyinput { width: 40px; font-size: 14px; } /* Desktop: share ONE set of column tracks across all rows via subgrid, so the qty / PU / subtotal columns line up perfectly even though their content widths differ row to row (each row was previously its own grid → ragged columns). Scoped to >560px so the mobile area-layout below is untouched; falls back to the per-row grid above where subgrid is unsupported. */ @media (min-width: 561px) { @supports (grid-template-columns: subgrid) { .cart-rows { display: grid; grid-template-columns: 56px minmax(110px, 1fr) auto auto auto 30px; column-gap: 10px; } .cart-row { grid-column: 1 / -1; grid-template-columns: subgrid; gap: 0 10px; } } } /* devis section-title pseudo-line (__WARKTITRE__): a full-width heading row that breaks out of the subgrid tracks (spans all columns as one cell). */ .cart-row--title { grid-column: 1 / -1; grid-template-columns: none !important; display: block; padding: var(--space-2) 0 var(--space-0); font-weight: 800; color: var(--brand); border-bottom: 0; } /* ── Devis line "options" mini add-to-cart dropdown (devis_options_widget) ── Reuses the .split-button/.dropdown-menu component (js/javascript.js openMenu), overriding only what differs: a light link-style toggle (not the heavy green split half) and a roomy, scrollable, wrapping menu for the option cards. */ .dropdown-toggle.opt-toggle { background: none; border: 0; box-shadow: none; color: #144A8E; font-weight: 700; font-size: .78em; padding: var(--space-0) 0; } .dropdown-toggle.opt-toggle:hover { background: none; box-shadow: none; color: #0f2f5e; } .dropdown-menu.opt-menu { white-space: normal; /* override .dropdown-menu's nowrap */ left: 0; right: auto; /* drop into the content area, not 300px left over the sidebar */ width: min(300px, calc(100vw - 2 * var(--space-3))); /* never wider than the viewport on a phone */ min-width: 0; max-height: 60vh; overflow-y: auto; padding: 0; /* title bar bleeds edge-to-edge; inner blocks pad themselves */ } /* gradient "title bar" — gives the popover an OS-window feel (brand gradient) */ /* Shared popover/card "title bar" — the OS-window look (brand gradient header). Reused by the options dropdown, the devis action & help cards, etc. */ .cardbar { background: var(--brand-gradient); color: #fff; font-weight: 700; font-size: 13px; padding: var(--space-1) var(--space-2); } .opt-menu .opt-panel { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1) var(--space-2); } .opt-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--space-1); padding: var(--space-1) 0; border-bottom: 1px solid #eee; /* hairline separator, not a panel outline */ } .opt-row__img { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .opt-row__img img { max-width: 100%; max-height: 100%; object-fit: contain; } .opt-row__info { min-width: 0; } .opt-row__ref { font-weight: 700; font-size: 12px; } .opt-row__price { color: #138a3e; font-weight: 700; font-size: .9em; } .opt-row .qty-stepper { height: 36px; } .opt-row .qty-minus, .opt-row .qty-plus { width: 30px; font-size: 16px; } .opt-row .qtyinput { width: 38px; font-size: 14px; } .opt-menu .opt-commit { list-style: none; margin: 0; padding: 0; } /* add-to-cart action → GREEN (house convention: matches the product page "Ajouter au Panier") */ .opt-menu .opt-commit li { background: var(--green-cart); color: #fff; text-align: center; font-weight: 700; padding: var(--space-2); } .opt-menu .opt-commit li:hover { background: var(--green-cart-dark); color: #fff; } /* ── Product puncher — drill-down catalog modal to add products to a devis ── Categories grid → product rows (each a .productcard so recalcAll() can filter it). House rules: square, var(--space-*), var(--shadow-panel); add buttons = green. */ .puncher-launch { /* trigger button atop the Produits island */ display: flex; align-items: center; justify-content: center; gap: var(--space-1); width: 100%; margin-bottom: var(--space-2); padding: var(--space-2); background: #f3f8f1; border: 1px dashed var(--green-cart); color: var(--green-cart-dark); font-weight: 700; font-size: 14px; cursor: pointer; } .puncher-launch:hover { background: #e7efe4; } @media (min-width: 700px) { #modal-puncher .treact-modal { width: min(860px, 94vw); } } /* Let the modal body be the SINGLE scroll area (bounded by the modal's max-height:95vh) instead of a nested #puncher-body max-height:56vh, which on shorter screens extended past the clipped modal and masked the last rows. Drop the modal's default 20px padding — the puncher manages its own. */ #modal-puncher .treact-modal-body { padding: 0; } .puncher { display: flex; flex-direction: column; } /* The crumb + search bar stays put while the results scroll under it (it lives OUTSIDE the scrolled content now, so it survives the body swaps too). */ .puncher__bar { position: sticky; top: 0; z-index: 3; background: #fff; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; padding: var(--space-2); border-bottom: 1px solid #eee; } .puncher-crumb { flex: 1 1 220px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: 13px; } .puncher-crumb__item { background: none; border: 0; padding: 0; cursor: pointer; color: #144A8E; font-weight: 700; font-size: 13px; } .puncher-crumb__item--current { color: #1d2939; cursor: default; } .puncher-crumb__sep { color: #bbb; } /* slash separator, matching the site breadcrumbs */ /* Search field mirrors the header search: magnifier on the left, bold (placeholder) text. */ .puncher__searchbox { position: relative; display: flex; } .puncher__searchico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; color: #888; pointer-events: none; } .puncher__searchico .icon { width: 18px; height: 18px; } .puncher__search { padding: var(--space-1) var(--space-2); border: 1px solid #d0d5dd; min-width: 200px; background: #fff; font-weight: bold; } .puncher__searchbox .puncher__search { padding-left: 36px; } /* clear the icon (beats input[type=search] specificity) */ #puncher-body { padding-bottom: var(--space-2); } /* breathing room under the last row (modal body scrolls) */ /* "Search from this point" scope toggle (segmented control: this branch vs whole catalog). */ .puncher-scope { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding: var(--space-2); border-bottom: 1px solid #eee; font-size: 13px; } .puncher-scope__lbl { display: inline-flex; align-items: center; gap: 4px; color: #667085; margin-right: var(--space-1); } .puncher-scope__lbl .icon { width: 14px; height: 14px; } .puncher-scope__opt { appearance: none; -webkit-appearance: none; border: 1px solid #d0d5dd; background: #fff; color: #344054; padding: 3px var(--space-2); cursor: pointer; font-size: 12px; font-weight: 700; line-height: 1.4; } .puncher-scope__opt:hover { background: #f6f7f9; } /* Keep a real 1px border on the active pill (not transparent) so both segments stay the same size/aligned and no native button bevel shows through. Brand border ties it to the gradient. */ .puncher-scope__opt.is-active { background: var(--brand-gradient); color: #fff; border-color: var(--brand); } .puncher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); padding: var(--space-2); } /* Tiles mirror the megamenu cards: gradient label bar on top, white picture area below. */ .puncher-tile { display: grid; grid-template-rows: auto 1fr; min-height: 116px; background: #fff; box-shadow: var(--shadow-panel); border: 0; padding: 0; cursor: pointer; text-align: center; overflow: hidden; } .puncher-tile:hover { box-shadow: 0 2px 9px rgba(0,0,0,.20); } .puncher-tile__label { background: var(--brand-gradient); color: #fff; font-weight: 700; font-size: 13px; line-height: 1.2; padding: var(--space-1) var(--space-2); } .puncher-tile__img { display: flex; align-items: center; justify-content: center; padding: var(--space-2); } .puncher-tile__img img { max-height: 72px; max-width: 100%; object-fit: contain; } .pfilter { font-size: 13px; cursor: pointer; white-space: nowrap; } .pfilter--brand img { max-height: 20px; max-width: 60px; vertical-align: middle; } /* Results layout: the facet column is ALWAYS the fixed-width left column (collapsed = just the "Filtres" toggle, open = toggle + facets below it) — so the toggle belongs to that column and never jumps from full-width to the side when opened. Reuses the category/search filter engine (scoped puncherRecalc), light-themed for the white modal. */ .puncher-results { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-2); align-items: start; padding: var(--space-2); } @media (max-width: 700px) { .puncher-results { grid-template-columns: 1fr; } /* stack: the Filtres toggle (full width) above the rows */ } .puncher-rows-col { min-width: 0; } /* let the rows shrink/scroll, not overflow */ .puncher-filtres { font-size: 12px; color: #1d2939; } /* NOT .filtres (that's white-on-dark for the category sidebar) */ /* "Filtres" toggle (the panel header) + active-filter hint badge */ .puncher-filtres__toggle { display: flex; align-items: center; gap: var(--space-1); width: 100%; padding: var(--space-1) var(--space-2); background: #f4f6f8; border: 1px solid #d0d5dd; cursor: pointer; font-size: 13px; font-weight: 700; color: #1d2939; } .puncher-filtres__toggle:hover { border-color: var(--brand); } .puncher-filtres__toggle.is-active { border-color: var(--brand); background: #eef3fb; } .puncher-filtres__toggle .icon { width: 16px; height: 16px; } .puncher-filtres__hint { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: #cbd2da; color: #fff; font-size: 11px; font-weight: 700; /* neutral grey when 0 (not a color swatch) */ } .puncher-filtres__hint.is-active { background: var(--brand); } /* brand-colored only when filters are active */ .puncher-filtres__chev { margin-left: auto; display: flex; transition: transform .15s ease; } .puncher-results.filters-open .puncher-filtres__chev { transform: rotate(180deg); } .puncher-filtres__body { margin-top: var(--space-1); } /* Compact, light group headers (override the dark #41434E .secondary sidebar look — too heavy in the white modal). Tight padding so the panel scans fast. */ .puncher-filtres__body .secondary { background: #eef1f4; color: #344054; } .puncher-filtres__body .secondarytitle { font-size: 12px; padding: 3px var(--space-1); margin: 0; } .puncher-filtres__body .titrefiltre { margin: 0; } .puncher-filtres__body .filtre { margin-bottom: 2px; } .puncher-filtres__body .filtrecontent { margin-left: var(--space-2); font-size: 12px; } .puncher-filtres__body .facet-brandgrid { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; padding-left: var(--space-2); } .puncher-rows { display: flex; flex-direction: column; padding: 0 var(--space-2); } .puncher-row { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid #f0f0f0; } .puncher-row__img { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .puncher-row__img img { max-width: 100%; max-height: 100%; object-fit: contain; } .puncher-row__info { min-width: 0; } .puncher-row__ref { font-weight: 700; font-size: 13px; } .puncher-row__desc { font-size: 12px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .puncher-row__meta { font-size: 12px; color: #777; margin-top: 2px; } /* ── .cta button family ───────────────────────────────────────────────────── Shared commerce-button styles. These MUST be global: the puncher (puncher.php) and the quick-preview modal (preview.php) both use .cta/.cta--primary and open on the product page and category listing — pages whose per-view CSS is NOT compte.css. Previously these lived in vues/compte/compte.css, so the puncher's "Ajouter" button rendered unstyled (no green CTA) everywhere except /compte. */ .cta { display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--space-2); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: background .15s ease, box-shadow .15s ease, transform .1s ease; } /* Green fill = the commerce action. Base look (everywhere, incl. dense grids): a subtle green GRADIENT + glossy inset highlight for depth — calm, no glow. The elevated "hero" glow is the opt-in .btn-hero modifier below, reserved for singular CTAs. */ .cta--primary { background: linear-gradient(180deg, #57bd41, var(--green-cart)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); } .cta--primary:hover { background: linear-gradient(180deg, #5fc748, var(--green-cart-dark)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 4px 14px rgba(0, 0, 0, .18); transform: translateY(-1px); } .cta--outline { background: #fff; border-color: #d0d5dd; color: #1d2939; } .cta--outline:hover { background: #f6f7f9; } .cta--ghost { background: none; color: #144A8E; } .cta--ghost:hover { background: #eef3fb; } /* Product-page split CTA: the main "Ajouter au panier" + a dropdown toggle, both built on the shared green .cta--primary (unified with the devis "Commander" button — ditches the old .primary-button look). The two halves butt together as one control, with a hairline seam. */ .split-button .cta { width: auto; } /* override .cta width:100% inside the split */ .split-button__main { flex: 1 1 auto; } .split-button .dropdown-toggle.cta { flex: 0 0 auto; padding-left: var(--space-2); padding-right: var(--space-2); border-left: 1px solid rgba(255, 255, 255, .35); /* seam between main + toggle */ } /* The halves join, so don't lift/shadow them independently on hover (that would misalign the seam) — keep just the .cta--primary background darken. */ .split-button .cta:hover { transform: none; box-shadow: none; } .split-button .dropdown-toggle.cta .icon { width: 16px; height: 16px; } /* ── Hero button modifier ──────────────────────────────────────────────────── The elevated treatment for SINGULAR primary CTAs (product buybox, cart checkout, configurator finish/commit). Composes on ANY green fill (.cta--primary OR .primary-button) — adds a green glow + lift + focus ring, nothing else. Deliberately kept OFF dense grids (category tiles, puncher rows): many glowing buttons at once read as noise, not emphasis. */ .btn-hero { box-shadow: 0 3px 10px rgba(52, 129, 35, .40), inset 0 1px 0 rgba(255, 255, 255, .28); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .btn-hero:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 6px 18px rgba(52, 129, 35, .55), inset 0 1px 0 rgba(255, 255, 255, .32); } .btn-hero:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(52, 129, 35, .40); } .btn-hero:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--green-cart); } /* The buybox's main add-to-cart IS a singular CTA → hero the whole split control (so the seam stays aligned we glow the container, not the halves). Scoped to .buybox → grids/preview calm. */ .buybox__actions .split-button { box-shadow: 0 3px 10px rgba(52, 129, 35, .38); transition: transform .12s ease, box-shadow .12s ease; } .buybox__actions .split-button:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(52, 129, 35, .52); } .puncher-row__add { display: flex; align-items: center; gap: var(--space-1); } /* Match the devis (.cart-row) stepper exactly — without these the input falls back to the wide 56px default + 44px buttons, so it looked stretched next to the compact devis one. */ .puncher-row__add .qty-stepper { height: 36px; } .puncher-row__add .qtyinput { width: 40px; font-size: 14px; } .puncher-row__add .qty-minus, .puncher-row__add .qty-plus { width: 32px; font-size: 16px; } .puncher-row__add .cta { width: auto; padding: var(--space-1) var(--space-2); } .pbadge { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px var(--space-0); margin-left: var(--space-0); } .pbadge--deja { color: #8a6d3b; background: #fdf3e6; } .pbadge--devis { color: #138a3e; background: #f3f8f1; } .puncher-empty, .puncher-note { padding: var(--space-3); text-align: center; color: #888; font-size: 13px; } /* Section headers in the puncher search results (Catégories / Produits). */ .puncher-section { padding: var(--space-2) var(--space-2) 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #b08a5a; } @media (max-width: 560px) { .puncher-row { grid-template-columns: 40px 1fr; } .puncher-row__add { grid-column: 1 / -1; justify-content: flex-end; } } .cart-total { margin-top: 12px; text-align: right; font-size: 15px; color: #555; } .cart-total b { font-size: 18px; color: #1d2939; margin-left: 6px; } .cart-empty { padding: 28px 8px; text-align: center; color: #888; } /* stack to a compact 3-column layout on narrow screens */ @media (max-width: 560px) { .cart-row { grid-template-columns: 48px 1fr auto; grid-template-areas: "img info del" "img qty sub" "img qty pu"; column-gap: 8px; row-gap: 2px; } .cart-row__img { grid-area: img; width: 48px; height: 48px; } .cart-row__info { grid-area: info; } .cart-row__qty { grid-area: qty; } .cart-row__sub { grid-area: sub; align-self: center; } .cart-row__del { grid-area: del; justify-self: end; } /* Unit price kept on phones (the client's net — the point of the cart — with the list price struck through), as a small line under the subtotal: "687,50 € 323,13 € / u". */ .cart-row__pu { grid-area: pu; justify-self: end; font-size: 12px; } .cart-row__pu s { display: inline; margin-right: 6px; } .cart-row__pu::after { content: ' / u'; color: #667085; font-weight: 400; } } /* ── Login overlay (#loginscreen, rendered by compte.php; toggled by openLogin()/closeLogin()) ── Fullscreen overlay on the house grey gradient, with the logo and a centred white card. Deliberately STATIC: it only fades its own opacity in — the form never moves or resizes, so the browser's password- manager autofill dropdown anchors cleanly (the old partialModal tween made it glitch). Square, token-spaced; a border = control outline only (inputs/button). */ .loginoverlay { position: fixed; inset: 0; z-index: 200000; /* above the fixed mobile header (100000) */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-3); background: var(--grey-gradient); /* house grey gradient (tokens.css.php) */ overflow-y: auto; /* short phones / keyboard up: scroll, don't clip */ animation: loginoverlay-in .15s ease-out; } .loginoverlay[hidden] { display: none; } @keyframes loginoverlay-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .loginoverlay { animation: none; } } body.login-open { overflow: hidden; } /* no page scroll behind the overlay */ /* html keeps `scrollbar-gutter: stable` (css.php) so modals don't shift the page; that reserved strip sits OUTSIDE the fixed overlay and showed the grey page background down the right edge. Paint the canvas in the gradient's end colour while the overlay is open so it blends into the overlay. */ html:has(body.login-open) { background: var(--grey-gradient-end); } .loginoverlay__logo { width: 160px; max-width: 50vw; height: auto; flex: 0 0 auto; } .loginoverlay__close { position: absolute; top: var(--space-2); right: var(--space-2); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; } .loginoverlay__close:hover { background: rgba(255,255,255,.3); } .loginoverlay__close .icon { width: 22px; height: 22px; } .loginbox { width: 100%; max-width: 420px; flex: 0 0 auto; background: #fff; color: #1d2939; box-shadow: 0 12px 40px rgba(0,0,0,.28); } .loginbox__title { margin: 0; padding: var(--space-2) var(--space-3); background: var(--brand-gradient); color: #fff; font-size: 1.25rem; } .loginform { display: grid; gap: var(--space-3); padding: var(--space-3); } .loginfield { display: grid; gap: var(--space-1); } .loginfield > label, .logincheck { user-select: none; } .loginfield > label { font-weight: 700; } .loginform input[type=email], .loginform input[type=text], .loginform input[type=password] { width: 100%; box-sizing: border-box; padding: var(--space-2); border: 1px solid #c3ccd2; background: #fff; } .loginform input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 0, 17, .08); } /* Password field + eye toggle share one box; the toggle sits inside the outline. */ .loginpw { position: relative; display: block; } .loginpw input { padding-right: 44px; } .loginpw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 40px; border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; user-select: none; } .loginrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; } .logincheck { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; } .loginforgot { color: var(--brand); } /* Primary action — full-width, brand gradient, square. Hover/active/disabled states so the loading lock reads clearly. */ .loginsubmit { width: 100%; padding: var(--space-2) var(--space-3); border: none; background: var(--brand-gradient); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; transition: filter .15s ease, opacity .15s ease; } .loginsubmit:hover { filter: brightness(1.08); } .loginsubmit:active { filter: brightness(.94); } .loginsubmit:disabled { opacity: .6; cursor: progress; } /* ALTCHA widget — square it off and match the input outline (css8 has no radii). The widget exposes these CSS custom properties for theming. */ .loginaltcha { --altcha-border-radius: 0; --altcha-border-width: 1px; --altcha-color-border: #c3ccd2; --altcha-max-width: 100%; display: block; } /* Result banners (success / error). */ .loginmsg { padding: var(--space-2); color: #fff; } .loginmsg--ok { background: #1b4a1b; } .loginmsg--err { background: #aa1b1b; } .loginmsg .icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; fill: none; stroke: currentColor; } /* While a request is in flight: dim + block the fields, show a wait cursor. */ .loginform.is-loading input, .loginform.is-loading .loginpw-toggle { pointer-events: none; opacity: .6; } .loginform.is-loading { cursor: progress; } /* ── Product quick-preview modal (handlers/produit/preview.php) ────────────── Opened by the eye icon on devis lines; image + key info + link to full fiche. */ #modal-preview .treact-modal { width: 620px; } /* capped by treact's max-width:90% */ .preview { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-3); align-items: start; } /* petite_image() hard-codes an inline width/height in px → !important to make it fill (not overflow) its grid column, so the column gutter is actually visible. */ .preview__media img { width: 100% !important; height: auto !important; display: block; border: 1px solid #e3e3e3; } .preview__brand { margin-bottom: var(--space-1); } .preview__brandlogo { max-height: 28px; max-width: 130px; width: auto; height: auto; display: block; } .preview__ref { font-weight: 700; font-size: 1.1em; margin-bottom: var(--space-2); } .preview__features { margin: 0 0 var(--space-2); padding-left: var(--space-3); } .preview__features li { margin-bottom: var(--space-0); line-height: 1.4; } .preview__designation { color: #333; font-size: .92em; line-height: 1.5; margin: 0 0 var(--space-2); } .preview__meta { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .preview__price { font-size: 1.15em; } .preview__full { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-3); font-weight: 600; } @media (max-width: 560px) { .preview { grid-template-columns: 1fr; } .preview__media { max-width: 220px; margin: 0 auto; } } /* Eye affordance next to each devis line's reference. */ .row-preview { background: none; border: none; padding: 0 var(--space-0); cursor: pointer; color: #9aa3ab; vertical-align: middle; line-height: 0; } .row-preview:hover { color: var(--brand); } .row-preview .icon { width: 1.15em; height: 1.15em; } /* ── Product-preview tabs (lib/preview.php: Description / Téléchargements / Associés) ── */ .preview-tabs { margin-top: var(--space-3); } .preview-tabbar { display: flex; gap: var(--space-1); border-bottom: 1px solid #e0e0e0; } .preview-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--space-1) var(--space-2); font: inherit; font-weight: 600; font-size: .95em; color: #667085; cursor: pointer; } .preview-tab:hover { color: #1d2939; } .preview-tab.active { color: var(--brand); border-bottom-color: var(--brand); } .preview-tabpanel { padding-top: var(--space-3); max-height: 320px; overflow-y: auto; } .preview-empty { color: #888; font-style: italic; margin: 0; } /* Téléchargements */ .preview-dls { display: flex; flex-wrap: wrap; gap: var(--space-3); } .preview-dl { width: 116px; text-align: center; line-height: 1.2; } .preview-dl a { text-decoration: none; color: inherit; } .preview-dl__thumb { height: 110px; max-width: 100%; } .preview-dl__name { font-size: 12px; word-break: break-word; } .preview-dl__note { font-size: 11px; color: #717171; } /* Associés */ .preview-assoc { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); } .preview-assoc__card { display: block; border: 1px solid #eee; text-decoration: none; color: inherit; } .preview-assoc__card:hover { border-color: #cfd4da; text-decoration: none; } /* kill the global a:hover underline — these are tiles, not links */ .preview-assoc__ref { line-height: 28px; font-weight: 700; text-align: center; } .preview-assoc__img { padding: var(--space-2); text-align: center; } .preview-assoc__desc { padding: var(--space-1) var(--space-2) var(--space-2); font-size: .85em; line-height: 1.3; } .preview-assoc__note { grid-column: 1 / -1; color: #555; font-size: .9em; } /* Context-aware CTA in the product preview (lib/preview.php → preview_cta_html). Green = the add-to-cart/devis convention (var(--green-cart)). */ .preview-cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; } .preview-cta__btn { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--green-cart); color: #fff; border: none; padding: var(--space-2) var(--space-3); font-weight: 700; cursor: pointer; } .preview-cta__btn:hover { background: var(--green-cart-dark); } .preview-cta__btn .icon { width: 1.1em; height: 1.1em; } /* ── Commande rapide / quick-order pad (handlers/commande/quickorder*) ── */ #modal-quickorder .treact-modal { width: 560px; } /* capped by treact's max-width:90% */ .quickorder-bar { display: flex; justify-content: flex-end; padding: var(--space-2) 0; } .qo-intro { margin: 0 0 var(--space-2); color: #555; } .qo-input { width: 100%; box-sizing: border-box; resize: vertical; padding: var(--space-2); border: 1px solid #c3ccd2; background: #fff; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95em; line-height: 1.5; } .qo-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,0,17,.08); } .qo-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } /* Green action button — the add-to-cart/devis convention (var(--green-cart)). */ .qo-btn { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--green-cart); color: #fff; border: none; padding: var(--space-2) var(--space-3); font-weight: 700; cursor: pointer; } .qo-btn:hover { background: var(--green-cart-dark); } .qo-btn .icon { width: 1.1em; height: 1.1em; } .qo-btn--lg { padding: var(--space-2) var(--space-4); } .qo-result { margin-top: var(--space-3); } .qo-empty { color: #888; font-style: italic; margin: 0; } .qo-table { width: 100%; border-collapse: collapse; font-size: .92em; } .qo-table td { padding: var(--space-1) var(--space-1); border-bottom: 1px solid #f0f0f0; vertical-align: middle; } .qo-ico { width: 1.5em; } .qo-row--ok .qo-ico { color: #1b7a1b; } .qo-row--ko .qo-ico { color: #aa1b1b; } .qo-ref { font-weight: 700; } .qo-desc { display: block; margin-top: 2px; font-weight: 400; font-size: .88em; color: #777; } .qo-qte { text-align: right; white-space: nowrap; font-weight: 700; } .qo-price { text-align: right; white-space: nowrap; } .qo-notfound { color: #aa1b1b; font-style: italic; } .qo-done { color: #1b4a1b; font-weight: 700; display: flex; align-items: center; gap: var(--space-1); } .qo-done .icon { width: 1.2em; height: 1.2em; } .qo-warn { margin-top: var(--space-2); color: #8a5a00; } /* quick-order recognised-line thumbnail */ .qo-thumb { width: 44px; } .qo-thumb img { display: block; max-width: 40px; max-height: 40px; } .qo-stock { white-space: nowrap; font-size: .9em; } /* not-found → punch-in (open the puncher pre-searched) */ .qo-punch { display: inline-flex; align-items: center; gap: var(--space-0); background: none; border: 1px solid #c3ccd2; color: #555; padding: 1px var(--space-1); font-size: .85em; cursor: pointer; vertical-align: middle; } .qo-punch:hover { border-color: var(--brand); color: var(--brand); } .qo-punch .icon { width: 1em; height: 1em; } /* quick-order: persistent banner shown once a punch-in replaced a reference */ .qo-warnbanner { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-1) 0 var(--space-2); padding: var(--space-1) var(--space-2); background: #fff7e6; border: 1px solid #e3c878; color: #8a5a00; font-size: .9em; } .qo-warnbanner .icon { width: 1.2em; height: 1.2em; flex: 0 0 auto; } /* ─────────────────────────── order tunnel (commande wizard) ─────────────────────────── */ @media (min-width: 700px) { #modal-commande .treact-modal { width: 640px; } } .tnl { display: flex; flex-direction: column; } /* stepper */ .tnl-steps { display: flex; align-items: center; padding: var(--space-2) var(--space-3); background: #f6f7f9; border-bottom: 1px solid #e6e8eb; } .tnl-step { display: flex; align-items: center; gap: var(--space-1); white-space: nowrap; color: #98a2b3; font-size: 13px; font-weight: 700; } .tnl-step:not(:last-child) { flex: 1 1 auto; } .tnl-step:not(:last-child)::after { content: ''; flex: 1 1 auto; height: 2px; background: #dcdfe4; margin: 0 var(--space-2); min-width: 14px; } .tnl-step__num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 auto; background: #dcdfe4; color: #fff; font-size: 12px; } .tnl-step__num .icon { width: 14px; height: 14px; } .tnl-step.is-active { color: #1d2939; } .tnl-step.is-active .tnl-step__num { background: var(--green-cart); } .tnl-step.is-done { color: #475467; } .tnl-step.is-done .tnl-step__num { background: var(--green-cart-dark); } .tnl-step.is-done:not(:last-child)::after { background: var(--green-cart); } @media (max-width: 520px) { .tnl-step__lbl { display: none; } .tnl-step.is-active .tnl-step__lbl { display: inline; } } /* phones: only the CURRENT step is named ("② Livraison") */ /* panes / fields */ .tnl-pane { padding: var(--space-3); max-height: 58vh; overflow-y: auto; } .tnl-field { margin-bottom: var(--space-2); } .tnl-field > label { display: block; font-weight: 700; font-size: 13px; margin-bottom: var(--space-1); color: #344054; } .tnl-opt { font-weight: 400; color: #98a2b3; } .tnl-input { width: 100%; padding: var(--space-1) var(--space-2); border: 1px solid #d0d5dd; font-size: 14px; font-family: inherit; box-sizing: border-box; } .tnl-input:focus { outline: none; border-color: var(--green-cart); } textarea.tnl-input { resize: vertical; } .tnl-row { display: flex; gap: var(--space-2); } .tnl-row .tnl-field { flex: 1 1 0; min-width: 0; } @media (max-width: 520px) { .tnl-row { flex-direction: column; gap: 0; } } .tnl-terms { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2); background: #f6f7f9; color: #344054; font-weight: 700; } /* read-only info (single carrier, payment terms): neutral, so it doesn't look like a choice to tap */ .tnl-terms .icon { color: var(--brand); } .tnl-terms .icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; } .tnl-help { font-size: .85em; color: #667085; margin-top: var(--space-1); } /* recap lines + totals */ .tnl-line { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: 1px solid #f0f1f3; } .tnl-line__img { width: 40px; height: 40px; display: grid; place-items: center; } .tnl-line__img img { max-width: 40px; max-height: 40px; } .tnl-line__ref { display: flex; flex-direction: column; min-width: 0; font-weight: 700; font-size: 13px; } .tnl-line__desc { font-weight: 400; color: #667085; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tnl-line__qty { color: #475467; font-size: 13px; } .tnl-line__sub { font-weight: 700; font-size: 13px; white-space: nowrap; } .tnl-line--title { display: block; border: 0; padding: var(--space-2) 0 var(--space-1); color: #1d2939; } .tnl-tot { margin: var(--space-2) 0 0 auto; max-width: 320px; } .tnl-tot__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 2px 0; font-size: 14px; color: #475467; } .tnl-tot__row--ttc { margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid #e6e8eb; font-size: 16px; color: #1d2939; } /* validation summary */ .tnl-summary { display: flex; gap: var(--space-2); flex-wrap: wrap; } .tnl-sum { flex: 1 1 220px; border: 1px solid #e6e8eb; padding: var(--space-2); background: #fff; } .tnl-sum__h { display: flex; align-items: center; gap: var(--space-1); font-weight: 700; font-size: 13px; color: var(--green-cart-dark); margin-bottom: var(--space-1); } .tnl-sum__h .icon { width: 1.1em; height: 1.1em; } .tnl-sum__addr { font-size: 13px; color: #344054; line-height: 1.35; } .tnl-sum__meta { font-size: 12px; color: #667085; margin-top: var(--space-1); } .tnl-sum__note { font-size: 12px; color: #475467; margin-top: var(--space-1); font-style: italic; } .tnl-cgv { margin-top: var(--space-2); font-size: .85em; color: #667085; } .tnl-cgv a { color: inherit; text-decoration: underline; } .tnl-stock { display: flex; align-items: center; gap: 8px; margin-top: var(--space-2); padding: 8px 10px; background: #fff8e6; color: #7a4b00; font-size: 13px; line-height: 1.4; } .tnl-stock .icon { width: 18px; height: 18px; flex: none; } .tnl-portrule.is-free { color: var(--green-cart-dark, #2f7d22); } .tnl-nav button { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } /* Phones (app sheet + mobile website): the tunnel sheet keeps ONE height across steps (it jumped 332→192→299→147 px), the step content scrolls and the Précédent/Continuer/Valider bar stays pinned at the bottom. Follows the virtual keyboard like every app sheet (--kb, js/app-mode.js). */ @media (max-width: 960px) { #modal-commande .treact-modal { height: calc((100dvh - var(--kb, 0px)) * .9); } #modal-commande .treact-modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; } #modal-commande .tnl, #modal-commande #tunnel-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } #modal-commande .tnl-pane { flex: 1 1 auto; min-height: 0; max-height: none; } #modal-commande .tnl-nav { flex: none; padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); } #modal-commande .tnl-nav .primary-button { flex: 1 1 auto; } #modal-commande .tnl-done { margin: auto 0; } } /* nav bar */ .tnl-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid #e6e8eb; background: #fafbfc; } .tnl-nav .icon { width: 1em; height: 1em; vertical-align: -2px; } /* CB payment (Monetico hosted page embedded — level 2) */ .tnl-pay { display: flex; flex-direction: column; } .tnl-pay__frame { width: 100%; height: 520px; border: 0; display: block; background: #fafbfc; } .tnl-pay__note { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-top: 1px solid #e6e8eb; background: #f3f8f1; color: var(--green-cart-dark); font-size: 12px; } .tnl-pay__note .icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; } /* confirmation */ .tnl-done { text-align: center; padding: var(--space-4) var(--space-3); } .tnl-done__icon { color: var(--green-cart); line-height: 0; } .tnl-done__icon .icon { width: 56px; height: 56px; } .tnl-done__title { margin: var(--space-2) 0 var(--space-1); font-size: 20px; } .tnl-done__msg { color: #475467; font-size: 14px; max-width: 420px; margin: 0 auto var(--space-3); line-height: 1.4; } .tnl-done__actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; } /* ── Reusable product tile (product_tile8 in fonctions.php) ───────────────────────────────────── Clickable image + ref bar + description, eye quick-preview (top-right), and an add row (mini qty stepper + [+|v] panier/devis split) on its OWN line at the bottom. Global so the tile drops onto any page; the CALLER supplies the grid container (e.g. #associescontent). The description row is 1fr so, when the container stretches cards to equal height, the add row is pinned to the bottom and every tile's controls line up — no subgrid needed. */ .associe { position: relative; width: 168px; max-width: 100%; font-size: 12px; border: 1px solid #eee; background: #fff; display: grid; grid-template-rows: 28px 80px 1fr auto auto; /* ref · img · desc(1fr) · meta · add */ } /* whole-tile click-through; the global a.fullclicker is an empty stub, so scope it here (.associe is position:relative and has no interactive children the overlay would swallow). */ .associe > a.fullclicker { position: absolute; inset: 0; z-index: 2; } /* compact stock | price line, just above the add row */ .associe__meta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; padding: 3px 8px; font-size: 11px; line-height: 1.25; } .associe__meta .associe__stock { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .associe__meta .associe__price { font-weight: 700; white-space: nowrap; } /* eye preview: top-right of the ref bar, above the fullclicker overlay (z-index 2) */ .associe .row-preview { position: absolute; top: 0; right: 0; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; color: #fff; border: 0; cursor: pointer; } .associe .row-preview:hover { background: rgba(255, 255, 255, .2); } .associe .row-preview .icon { width: 16px; height: 16px; } /* add row: own bottom line; relative + z-index keep its controls clickable above the overlay */ .associe .row-addrow { position: relative; z-index: 3; display: flex; align-items: stretch; justify-content: center; gap: 4px; padding: 6px 4px; border-top: 1px solid #eee; background: #fff; } /* compact qty stepper — override the 44px touch-target default for the tile */ .associe .row-addrow .qty-stepper { height: 24px; } .associe .row-addrow .qty-minus, .associe .row-addrow .qty-plus { width: 18px; font-size: 14px; } .associe .row-addrow .qtyinput { width: 24px; font-size: 11px; } /* mini [+|v] split */ .associe .row-addsplit__btn { display: inline-flex; align-items: center; justify-content: center; height: 24px; width: 26px; padding: 0; border: 0; cursor: pointer; background: var(--green-cart); color: #fff; } .associe .row-addsplit__btn.dropdown-toggle { width: 18px; border-left: 1px solid rgba(255, 255, 255, .4); } .associe .row-addsplit__btn:hover { background: var(--green-cart-dark); box-shadow: none; } .associe .row-addsplit__btn .icon { width: 14px; height: 14px; } .associe .row-addsplit__btn.dropdown-toggle .icon { width: 12px; height: 12px; } /* Rename-offer pencil next to the devis heading (Espace Client, compte.devi.php). */ .devis-head__title { display: flex; align-items: center; gap: 6px; } .devis-rename { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; border: 0; cursor: pointer; color: #98a2b3; transition: color .15s ease, background .15s ease; } .devis-rename:hover { color: var(--brand); background: rgba(0, 0, 0, .05); } .devis-rename .icon { width: 16px; height: 16px; } /* One-line add controls on a listing card (blocproduit): [qty stepper] [Ajouter au Panier] [▼], all the same height. align-items:stretch makes the split-button match the stepper's height; the stepper's value feeds the add/devis buttons via data-collect. */ .cardadd { display: flex; align-items: stretch; gap: 4px; margin: 4px 0; } .cardadd__qty { flex: 0 0 auto; } .cardadd__qty .qty-stepper { height: 30px; } .cardadd__qty .qty-minus, .cardadd__qty .qty-plus { width: 22px; font-size: 15px; } .cardadd__qty .qtyinput { width: 30px; font-size: 12px; } .cardadd__split { flex: 1 1 auto; min-width: 0; } /* take the rest of the row */ .cardadd__main { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cardadd__more { flex: 0 0 auto; } /* ── Espace Client ▸ RMA cards (vues/compte/compte.rma.php) ──────────────────────────────────── Desktop: a 3-column grid of vertical tiles (numsav band → origin affaire → product image → ref/desc → N/S → status). css.mobile.php re-flows each card horizontally on phones. Global sheet on purpose (always $rand-busted; per-view compte.css can be served stale by turbonav). */ .rma-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 12px; } .rma-card { display: flex; flex-direction: column; min-width: 0; } .rma-card__head { padding: 8px 12px; font-size: 13px; font-weight: 700; } .rma-card__body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; } .rma-card__aff { padding: 4px 6px; background: #333; color: #fff; font-size: 12px; font-variant: small-caps; overflow-wrap: anywhere; } .rma-card__img { height: 80px; display: flex; align-items: center; justify-content: center; } .rma-card__ref { font-weight: 700; } .rma-card__desc { font-size: 12px; color: #475467; max-height: 3em; overflow: hidden; } .rma-card__sn { font-size: 12px; color: #475467; overflow-wrap: anywhere; } .rma-card__status:empty { display: none; } .rma-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 12px; font-weight: 700; color: #fff; } .rma-status .icon { width: 14px; height: 14px; } .rma-status--ok { background: #2e7d32; } .rma-status--ko { background: #b3261e; } .rma-card__staff { background: #ccc; font-size: 10px; overflow-x: auto; } .rma-empty { padding: 12px; margin-top: 12px; color: #98a2b3; font-style: italic; } @media (max-width: 960px) { .rma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── .tile-grid — the house 2×2 hairline tile grid (same look as the Mon compte quick access on phones): tiles butt together, the 1px divider is the container background showing through a 1px grid gap, one matching outer border. Icon on top, label underneath. Used by the Outils dropdown + /outils landing (lib/outils.php outils_tiles_html()). ── */ .tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #d0d5dd; border: 1px solid #d0d5dd; } .tile-grid__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 18px 10px; box-sizing: border-box; background: #fff; color: #1d2939; text-align: center; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.25; } .tile-grid__item:hover, .tile-grid__item:focus-visible { background: #f6f7f9; color: #1d2939; } .tile-grid__item .icon { width: 26px; height: 26px; color: var(--brand); } .tile-grid__desc { font-size: 12px; font-weight: 400; color: #667085; } /* Outils header dropdown — reuses .acct__menu (hover/focus reveal, gradient frame); the grid sits flush inside the frame, so drop its own outer border. */ #outilstile .outils-menu { min-width: 320px; } .outils-menu .tile-grid { border: 0; } /* /outils landing + tool pages */ .outils-page { padding-bottom: var(--space-4, 32px); } .outils-page h1 .icon { width: 1em; height: 1em; vertical-align: -0.12em; } .outils-intro { margin: 12px 0; color: #fff; } .outils-page > .tile-grid { max-width: 760px; } .outils-page > .tile-grid .tile-grid__item { min-height: 140px; padding: 22px 16px; font-size: 15px; justify-content: flex-start; } /* top-align: icons + titles line up across a row whatever the description length */ .outils-page > .tile-grid .tile-grid__item .icon { width: 34px; height: 34px; } .outils-tool { max-width: 760px; margin-top: 12px; padding: var(--space-3); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .outils-tool__desc { margin: 0; color: #1d2939; } .outils-tool__soon { margin: 0; color: #667085; font-style: italic; display: flex; align-items: center; gap: 6px; } @media (max-width: 520px) { .outils-page > .tile-grid .tile-grid__desc { display: none; } } /* ── Outils ▸ Calculateur disque dur (vues/outils/outil.disque-dur.php + outils.js) ────────────── Desktop: inputs left, sticky result panel right. Phone: one column, result after the inputs. Square, token-spaced; borders = control outlines only. */ .tool { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-3); align-items: start; margin-top: 12px; max-width: 1100px; } .tool__main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .tool-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .tool-f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #344054; min-width: 0; } .tool-f small { font-weight: 400; color: #667085; } .tool-f input[type=number], .tool-f select { width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-weight: 400; font-size: 14px; border: 1px solid #c3ccd2; background: #fff; color: #1d2939; } .tool-f input:focus, .tool-f select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); } /* visible square brand ring (was an ~invisible 8% shadow) */ .tool-f input[type=range] { width: 100%; accent-color: var(--brand); } /* A camera group = one compound row: qty · résolution · compression · ips · débit, subtotal below. */ .cam-groups { display: flex; flex-direction: column; gap: var(--space-2); } .cam-group { position: relative; display: grid; gap: var(--space-2); align-items: end; grid-template-columns: 80px minmax(0, 1.3fr) minmax(0, 1.3fr) 100px 120px; padding: var(--space-2); padding-right: 44px; background: #f6f7f9; } .cam-group__sub { grid-column: 1 / -1; font-size: 12px; color: #667085; } .cam-group__del { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: #98a2b3; cursor: pointer; } .cam-group__del:hover { color: #b3261e; background: #fbe9e7; } .cam-group__del[hidden] { display: none; } /* author display:flex would otherwise beat the [hidden] UA rule (last group can't be removed) */ .cam-group__del .icon { width: 16px; height: 16px; } .cam-add { align-self: flex-start; } .tool-hint { margin: 0; font-size: 12px; font-weight: 400; color: #667085; } .tool-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .tool-f--wide { grid-column: 1 / -1; } .tool-result { position: sticky; top: var(--space-3); } .tool-kpi { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: #475467; } .tool-kpi b { color: #1d2939; font-size: 15px; white-space: nowrap; } .tool-kpi--main { flex-direction: column; align-items: flex-start; padding-bottom: var(--space-2); border-bottom: 1px solid #eaecf0; } .tool-kpi--main b { font-size: 2rem; line-height: 1.1; color: var(--brand); } .hdd-sugg__title { font-size: 13px; font-weight: 700; color: #344054; } .hdd-sugg__title small { font-weight: 400; color: #667085; } .hdd-sugg ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .hdd-sugg li { display: flex; justify-content: space-between; padding: 6px 8px; background: #f6f7f9; font-size: 13px; } .hdd-sugg li span { color: #667085; } .tool-result .cta { justify-content: center; } @media (max-width: 900px) { .tool { grid-template-columns: 1fr; } .tool-result { position: static; } } @media (max-width: 640px) { /* Group row → 2 columns: qty + ips on one line, the selects full width, débit full width. */ .cam-group { grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; } /* dense: ips back-fills next to Caméras */ .cam-group .tool-f:nth-child(2), .cam-group .tool-f:nth-child(3), .cam-group .tool-f--rate { grid-column: 1 / -1; } .tool-2col { grid-template-columns: 1fr; } } /* ── .account-card — the shared white panel (white fill + panel shadow, no outline). Was defined in the per-view compte.css; promoted here because it's reused outside the account (Outils pages). ── */ .account-card { background: #fff; box-shadow: var(--shadow-panel); } /* Disk calculator ▸ matching products (house blocproduit cards, shown by outils.js when their capacity is suggested). Spans the calculator's full width; same card grid as the category pages. */ .hdd-prods-wrap { margin-top: var(--space-3); } /* sibling AFTER the .tool grid (outside the sticky panel's range) */ .hdd-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); } /* ── Stock indicator badge (fonctions.php stock_badge(), used by stock2025) — lucide icon + label, colour per state (same palette as the former emoji spans). ── */ .stock-ind { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; line-height: 1.2; } .stock-ind .icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; } .stock-ind--ok { color: #3d7a00; } /* was #5bb300 (~2.7:1) — darkened for WCAG AA on white */ .stock-ind--repl { color: #935C13; } .stock-ind--ko { color: #333; } .stock-ind--wait { color: #8a6a00; } /* was #B38C00 (~3.2:1) */ /* ── UI/UX critique quick wins (Outils) ── */ /* #6 keyboard focus: a visible square brand ring on tiles (background tint alone was invisible). */ .tile-grid__item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } /* An odd number of tiles: the last one spans the row, so no empty grey cell shows through the gap. */ .tile-grid__item:last-child:nth-child(odd) { grid-column: 1 / -1; } /* #1 not-yet-built tools: a muted, non-link tile with a square "Bientôt" tag. */ .tile-grid__item.is-soon { color: #98a2b3; cursor: default; } .tile-grid__item.is-soon:hover { background: #fff; } .tile-grid__item.is-soon .icon { color: #c3ccd2; } .tile-grid__soon { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; background: #eaecf0; color: #667085; } /* #4 in-page jump (ghost) + small link to the full range; green stays for add-to-cart. */ .hdd-jump { width: 100%; justify-content: center; white-space: nowrap; } .hdd-jump[hidden] { display: none; } .hdd-alllink { align-self: center; font-size: 13px; color: var(--brand); } .hdd-prods-wrap:focus { outline: none; } /* programmatic focus target after the jump */ /* #7 iOS zooms into any field under 16px — keep calculator fields at 16px on phones. */ @media (max-width: 640px) { .tool-f input, .tool-f select { font-size: 16px; } } /* ── Outils ▸ Calculateur de bande passante (vues/outils/outil.bande-passante.php + outils.js) ── Two result blocks (réseau local / accès à distance): figure · usage bar · verdict. Status colours = the house status palette (same hues as the stock badges): ok green · warn amber · ko red. */ .bp-block { display: flex; flex-direction: column; gap: 6px; padding-bottom: var(--space-2); border-bottom: 1px solid #eaecf0; } .bp-block .tool-kpi--main { border-bottom: 0; padding-bottom: 0; } .bp-block .tool-kpi--main small { font-weight: 400; color: #667085; } .bp-bar { height: 8px; background: #eaecf0; overflow: hidden; } .bp-bar span { display: block; height: 100%; width: 0; background: #c3ccd2; transition: width .2s ease; } .bp-bar span.is-ok { background: #3d7a00; } .bp-bar span.is-warn { background: #8a6a00; } .bp-bar span.is-ko { background: #b3261e; } @media (prefers-reduced-motion: reduce) { .bp-bar span { transition: none; } } .bp-verdict { font-size: 13px; font-weight: 600; color: #667085; min-height: 1.2em; } .bp-verdict.is-ok { color: #3d7a00; } .bp-verdict.is-warn { color: #8a6a00; } .bp-verdict.is-ko { color: #b3261e; } .bp-advice { margin: 0; padding: 8px 10px; font-size: 13px; background: #fdf3e6; color: #6b4a00; } /* ── Outils ▸ sticky mobile result bar (lib/outils.php outils_sticky_html + outils.js watchResult) ── Only ≤900px, where the result panel stacks below the inputs. Pinned to the bottom edge, square, white + panel shadow; sits under the cookie banner (9999). Hidden (JS) while the panel is visible. */ .tool-sticky { display: none; } @media (max-width: 900px) { .tool-sticky:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 16px rgba(0,0,0,.18); } .tool-wrap { padding-bottom: 64px; } /* the last input is never hidden behind the bar */ } .tool-sticky__text { flex: 1 1 auto; min-width: 0; font-weight: 800; color: var(--brand); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tool-sticky__mark { flex: 0 0 auto; width: 10px; height: 10px; display: none; } .tool-sticky__mark.is-ok { display: block; background: #3d7a00; } .tool-sticky__mark.is-warn { display: block; background: #8a6a00; } .tool-sticky__mark.is-ko { display: block; background: #b3261e; } .tool-sticky__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 1px solid #c3ccd2; background: #fff; color: #1d2939; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .tool-sticky__btn .icon { width: 16px; height: 16px; } .tool-sticky__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .tool-result:focus { outline: none; } /* programmatic focus target after the jump */ /* Outils ▸ "Réinitialiser" — a quiet text button at the foot of the result panel (inputs persist). */ .tool-reset { align-self: center; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 8px; border: 0; background: none; color: #667085; font: inherit; font-size: 13px; cursor: pointer; } .tool-reset:hover { color: #1d2939; text-decoration: underline; } .tool-reset:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .tool-reset .icon { width: 14px; height: 14px; } /* ── Outils ▸ Câblage RJ45 (vues/outils/outil.cablage-rj45.php) — diagram + French pin table + rules. Colour chips are square (house rule); "blanc / X" conductors = diagonal white/colour stripes. ── */ .rj45 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; margin-top: 12px; max-width: 1100px; } .rj45-fig { margin: 0; } /* cardbar bleeds edge-to-edge; padding lives on the body */ .rj45-fig__body { padding: var(--space-2); } .rj45-fig img { display: block; width: 100%; height: auto; } .rj45-fig figcaption { padding-top: var(--space-1); font-size: 13px; color: #475467; text-align: center; } .rj45-side { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .rj45-table { width: 100%; border-collapse: collapse; font-size: 14px; color: #1d2939; } .rj45-table th, .rj45-table td { padding: 7px 12px; text-align: left; border-bottom: 1px solid #eaecf0; } .rj45-table thead th { font-size: 12px; font-weight: 700; color: #667085; text-transform: uppercase; letter-spacing: .03em; } .rj45-table tbody th { width: 3.5em; font-weight: 800; color: var(--brand); } .rj45-table td:nth-child(3) { width: 3.5em; text-align: center; } .rj45-table td:last-child { color: #475467; font-size: 13px; } .rj45-chip { display: inline-block; width: 22px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.25); } .rj45-chip--orange { background: #f07d1a; } .rj45-chip--green { background: #2f9e44; } .rj45-chip--blue { background: #2b54c4; } .rj45-chip--brown { background: #7a4a1e; } .rj45-chip--w-orange { background: repeating-linear-gradient(135deg, #fff 0 4px, #f07d1a 4px 8px); } .rj45-chip--w-green { background: repeating-linear-gradient(135deg, #fff 0 4px, #2f9e44 4px 8px); } .rj45-chip--w-blue { background: repeating-linear-gradient(135deg, #fff 0 4px, #2b54c4 4px 8px); } .rj45-chip--w-brown { background: repeating-linear-gradient(135deg, #fff 0 4px, #7a4a1e 4px 8px); } .rj45-note { padding: 10px 12px 12px; } .rj45-rules { margin: 0; padding: var(--space-3) var(--space-3) var(--space-2) 2.2em; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #1d2939; line-height: 1.45; } .rj45-cta { width: auto; margin: 0 var(--space-3) var(--space-3); } /* .cta is width:100% — with side margins that overflowed the card */ @media (max-width: 900px) { .rj45 { grid-template-columns: 1fr; } } @media (max-width: 520px) { .rj45-table th, .rj45-table td { padding: 7px 6px; } .rj45-table td:last-child { font-size: 12px; } } /* ── Outils: center each page's block on wide screens (it hugged the left edge). The intro line takes the SAME max-width + auto margins so its left edge lines up with the block below it; the gradient title band stays full width like every other page. Landing grid = 760px, tools = 1100px. ── */ /* page_head8 variants (desktop): the title block matches the width of the content under it */ .pagehead--tool > .pagetitle { max-width: 1100px; margin-left: auto; margin-right: auto; box-sizing: border-box; } .pagehead--narrow > .pagetitle { max-width: 760px; margin-left: auto; margin-right: auto; box-sizing: border-box; } .outils-page > .tool-wrap, .outils-page > .rj45, .outils-page > .tile-grid, .outils-page > .outils-tool { margin-left: auto; margin-right: auto; } /* Tool root = .tool-wrap[data-tool]: the .tool grid (inputs + sticky result) THEN the tool's full-width extras (matching products, mobile bar). Keeping those OUT of the grid bounds the sticky panel — as a grid item it stuck across the whole grid and slid over the product cards. */ .tool-wrap { max-width: 1100px; } /* ── Outils ▸ Calculateur de champ de vision (outil.champ-de-vision.php + outils.js fov*) ── Two HiDPI canvases (sized to their CSS width in JS), a DORI legend, the DORI reach list. DORI chips use the same light fills as the drawing: I red · R orange · O yellow · D green; dead = transparent. */ .fov-canvas-wrap { padding: var(--space-2); } .fov-canvas { display: block; width: 100%; height: 260px; background: #fff; } .fov-legend { list-style: none; margin: 0; padding: 0 var(--space-3) var(--space-3); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #344054; } .fov-legend li { display: inline-flex; align-items: center; gap: 6px; } .fov-legend small { color: #667085; } .fov-chip { display: inline-block; width: 16px; height: 12px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.2); } .fov-chip--i { background: rgba(120, 196, 96, .38); } .fov-chip--r { background: rgba(250, 214, 60, .42); } .fov-chip--o { background: rgba(247, 150, 60, .38); } .fov-chip--d { background: rgba(239, 99, 88, .38); } .fov-chip--dead { background: repeating-linear-gradient(135deg, #fff 0 3px, #c3ccd2 3px 5px); } .fov-dori { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .fov-dori li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: #f6f7f9; font-size: 13px; color: #344054; } .fov-dori li b { margin-left: auto; color: #1d2939; white-space: nowrap; } .fov-class { padding: 6px 10px; font-size: 13px; font-weight: 700; color: #1d2939; } .fov-class--i { background: rgba(120, 196, 96, .25); } .fov-class--r { background: rgba(250, 214, 60, .3); } .fov-class--o { background: rgba(247, 150, 60, .25); } .fov-class--d { background: rgba(239, 99, 88, .25); } .fov-class--none { background: #eaecf0; color: #475467; font-weight: 600; } .fov-lensalt { margin-top: -6px; text-align: right; font-size: 12px; color: #667085; } .fov-lensalt:empty { display: none; } /* Segmented control (radio group) — house square style, active = brand gradient (same look as .puncher-scope__opt.is-active). Markup: .seg[role=radiogroup] > label.seg__opt > input[type=radio] + span. The radio stays in the DOM (keyboard arrows + form semantics), visually replaced by its span. */ .seg { display: flex; } .seg__opt { position: relative; flex: 1 1 0; margin: 0; cursor: pointer; } .seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .seg__opt span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: 6px var(--space-2); border: 1px solid #d0d5dd; background: #fff; color: #344054; font-size: 13px; font-weight: 700; white-space: nowrap; } .seg__opt + .seg__opt span { border-left-width: 0; } .seg__opt span .icon { width: 16px; height: 16px; } .seg__opt:hover span { background: #f6f7f9; } .seg__opt input:checked + span { background: var(--brand-gradient); color: #fff; border-color: var(--brand); } .seg__opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; position: relative; z-index: 1; } .fov-target { margin: var(--space-2) var(--space-2) 0; } /* FOV angle slider: wide on the LEFT, zoom on the RIGHT (130° → 5°, like a zoom rocker) — the value stays the angle, the track is just mirrored. */ .fov-angle { direction: rtl; } .fov-angle__ends { display: flex; justify-content: space-between; font-weight: 400; color: #667085; } /* Brand-coloured action (non-commerce: green stays reserved for add-to-cart). */ .cta--brand { background: var(--brand-gradient); color: #fff; border-color: var(--brand); } .cta--brand:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); } /* Outils ▸ PDF export: the result-panel button + the title modal (handlers/outils/pdf.php). */ .tool-pdfbtn { margin-top: var(--space-3); } .toolpdf { padding: var(--space-3); min-width: min(360px, 80vw); display: flex; flex-direction: column; gap: var(--space-2); } .toolpdf input[type=text] { height: 40px; padding: 8px 10px; border: 1px solid #d0d5dd; font-size: 15px; width: 100%; box-sizing: border-box; } .toolpdf input[type=text]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); } .toolpdf__actions { display: flex; justify-content: flex-end; } .toolpdf__actions .cta { width: auto; padding: var(--space-2) var(--space-3); } /* Fresnel tool legend chips — same fills as the canvas (outils.js fzDraw): radio zone in blue (its own function colour), obstructions in amber (outer 40 %, tolerated) / red (60 % core). */ .fz-chip--zone { background: rgba(66, 133, 244, .16); } .fz-chip--sixty { background: rgba(66, 133, 244, .30); } .fz-chip--edge { background: rgba(247, 176, 60, .55); } /* ground in the outer 40 %: tolerated */ .fz-chip--hit { background: rgba(239, 99, 88, .7); } /* ground in the 60 % core: a real problem */ /* Fresnel obstacles — one compound row per obstacle (type · hauteur · distance), its verdict line below; same row chrome as the camera groups (grey fill, ✕ top-right). */ .fz-obs { position: relative; display: grid; gap: var(--space-2); align-items: end; grid-template-columns: minmax(0, 1fr) 120px 160px; padding: var(--space-2); padding-right: 44px; background: #f6f7f9; } .fz-obs__sub { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: #667085; } .fz-obs__sub.is-ok { color: #3d7a00; } .fz-obs__sub.is-warn { color: #8a6a00; } .fz-obs__sub.is-ko { color: #b3261e; } .fz-obs-empty { margin: 0; } .fz-obs-empty[hidden] { display: none; } .fz-chip--tree { background: #a9cf97; } .fz-chip--bldg { background: #c9ced6; } @media (max-width: 640px) { .fz-obs { grid-template-columns: 1fr 1fr; } .fz-obs .tool-f:first-child { grid-column: 1 / -1; } } /* Générateur de mot de passe — the password itself: big monospace, breaks anywhere (no word boundaries), selectable in one go; seed field with an eye toggle inside it. */ .pw-out { display: block; padding: var(--space-3) var(--space-2); background: #f6f7f9; border: 1px solid #d0d5dd; font: 700 20px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #1d2939; word-break: break-all; user-select: all; text-align: center; letter-spacing: .5px; } .pw-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); } .pw-actions .cta[hidden] { display: none; } .pw-actions:has([data-pw-new][hidden]) .cta { grid-column: 1 / -1; } /* seed mode: no "Nouveau" → Copier spans */ .pw-mode, .pw-comp { font-size: 12px; color: #667085; margin-top: 6px; } .pw-opt { font-weight: 400; opacity: .85; } .pw-seedbox { position: relative; display: block; } .pw-seedbox input { width: 100%; box-sizing: border-box; padding-right: 44px; height: 40px; border: 1px solid #d0d5dd; padding-left: 10px; font-size: 15px; } .pw-seedbox input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); } .pw-eye { position: absolute; top: 0; right: 0; width: 40px; height: 40px; border: 0; background: none; color: #667085; cursor: pointer; display: flex; align-items: center; justify-content: center; } .pw-eye:hover { color: #1d2939; } .pw-eye .icon { width: 18px; height: 18px; } /* Password generator ▸ list mode: mode switch above the options; equipment counts; the list under the tool (one card per category, rows = label · password · copy). */ .pw-modeseg { margin-bottom: 0; } /* .tool__main already spaces its children */ .pw-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); } .pw-cats .tool-f span .icon { width: 15px; height: 15px; vertical-align: -2px; } @media (max-width: 640px) { .pw-cats { grid-template-columns: 1fr; } } .pw-listwrap { margin-top: var(--space-3); margin-bottom: var(--space-4); } /* breathing room before the footer */ .pw-sectitle { margin-top: 0; } /* "Paramètres" heads the left column, level with the result panel's top */ .pw-listwrap:focus { outline: none; } .pw-listwrap > h2 { margin-bottom: var(--space-3); } /* the heading mustn't sit on the category cards */ .pw-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); align-items: start; } .pw-rows { list-style: none; margin: 0; padding: var(--space-1) 0; } .pw-rows li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 34px; align-items: center; gap: var(--space-2); padding: 3px var(--space-3); } .pw-rows li:nth-child(even) { background: #f6f7f9; } .pw-rows__label { font-size: 12px; font-weight: 700; color: #667085; } .pw-rows__pw { font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #1d2939; word-break: break-all; user-select: all; background: none; padding: 0; } .pw-rows__copy { width: 30px; height: 30px; border: 0; background: none; color: #98a2b3; cursor: pointer; display: flex; align-items: center; justify-content: center; } .pw-rows__copy:hover { color: #1d2939; background: #eaecf0; } .pw-rows__copy.is-done { color: #3d7a00; } .pw-rows__copy .icon { width: 16px; height: 16px; } .pw-actions .pw-csv { grid-column: 1 / -1; } /* Article / news titles became real

s (SEO): keep the old bar look — no UA heading margins/size. */ h1.titrearticle { margin: 20px 0 0; font-size: 20px; } h1.titrenew { margin: 0; } /* ── Comparateur (lib/compare.php · js/compare.js · vues/comparer) ─────────────────────────────── */ /* Card toggle: a small square chip on the product photo (a