.catalogue-wrapper { padding: 20px 25px; } .catalogue-layout { display: flex; gap: 40px; align-items: flex-start; max-width: 1400px; margin: auto; } /* VERSION DESKTOP (par défaut) */ .catalogue-hero { background-color: #6B36DA; position: relative; margin-top: 10px; margin-bottom: 20px; padding: 15px 5px 25px; } .hero-inner { max-width: 1400px; margin: 0 auto; padding: 5px; color: white; } .hero-title { line-height: 1.3; padding-bottom: 30px; max-width: 600px; } .title-bold { font-size: 30px; font-weight: 700; padding-bottom: 15px; } .title-regular { font-size: 18px; font-weight: 400; max-width: 900px; } /* Wrapper des bénéfices */ .hero-benefit-wrapper { max-width: 1400px; margin: 0 auto; padding: 0 0px 0px; } /* Layout en grille ou en flex aligné */ .hero-benefit-slider { display: flex; justify-content: space-between; gap: 20px; } /* Cartes fixes en largeur */ .benefit-card { flex: 1 1 0; background-color: white; border-radius: 10px; padding: 12px; color: #000; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 20px; } .benefit-icon { height: 25px; width: auto; flex-shrink: 0; } .benefit-text { font-size: 14px; font-weight: 500; line-height: 1.3; } .faq-anchor-button { background-color: #CEF6FF; color: #000000; padding: 12px 20px; font-size: 16px; border-radius: 30px; text-decoration: none; font-weight: 500; white-space: nowrap; display: inline-block; transition: transform 0.1s ease, background-color 0.3s ease; margin-bottom: 50px; } .faq-anchor-button:hover, .faq-anchor-button:focus { text-decoration: none; transform: scale(1.05); background-color: #CEF6FF; /* garde la même couleur de fond */ color: #000000; /* garde la même couleur de texte */ } /* Smooth scrolling vers la FAQ */ html { scroll-behavior: smooth; } /* --------------------------------------------------------- */ /* --------------------------------------------------------- */ /* --------------------------------------------------------- */ /* ========================================================= FILTERS — PREMIUM + COMPACT (CLEAN SEPARATORS) ✅ Sticky OK ✅ Card premium (pas scroll) ✅ Body scroll (pas de recentrage) ✅ Header sticky 100% verrouillé ========================================================= */ /* Colonne gauche : les filtres (container sticky) */ .filters { width: 22%; position: sticky; top: 20px; align-self: flex-start; /* IMPORTANT : pas d’overflow ici (sinon ombres coupées) */ overflow: visible; max-height: calc(100vh - 40px); } /* ========================================================= FILTERS INNER — Card premium (NE SCROLL PAS) ========================================================= */ .filters-inner { /* glass */ background: rgba(245, 245, 245, 0.70); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 10px 0px 10px 0px; /* ✅ uniforme */ border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); /* premium */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 8px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.10); font-family: 'Circular', sans-serif; max-height: calc(100vh - 40px); /* ✅ la card ne scroll pas */ overflow: hidden; /* stacking context propre */ position: relative; } /* ========================================================= HEADER FILTERS — Sticky verrouillé + "hover fixe" ✅ large ✅ pas collé ✅ rien ne passe au-dessus ========================================================= */ .filters-header-wrapper { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 9999; /* ✅ même effet hover, mais fixe */ background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(0, 0, 0, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* ✅ IMPORTANT : on "élargit" le header dans la card */ margin-left: 10px; margin-right: 10px; /* ✅ moins haut, mais plus large */ padding: 8px 16px; /* ✅ spacing sous header */ margin-bottom: 12px; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 6px 18px rgba(0,0,0,0.04); isolation: isolate; } /* ✅ highlight interne premium */ .filters-header-wrapper::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55); } .filters-header-wrapper * { position: relative; z-index: 2; } /* ========================================================= FILTERS BODY — SEUL élément scrollable ✅ pas de recentrage ✅ scrollbar stable sans bouffer de place /* ========================================================= */ .filters-body { /* ✅ prend l’espace restant sous le header */ max-height: calc(100vh - 40px - 96px); /* 96px = hauteur header approx (OK) */ overflow-y: auto; overflow-x: hidden; /* ✅ pleine largeur (ne pas bouffer l’espace avec du padding-right) */ width: 100%; box-sizing: border-box; /* ✅ garde un mini padding intérieur mais pas un padding-right qui te “vole” de la largeur */ padding: 0 10px 0px 15px; /* ✅ évite le shift quand la scrollbar apparaît */ scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; position: relative; } /* ========================================================= SCROLLBAR — discrète & fine (sur le BODY scrollable) ========================================================= */ .filters-body::-webkit-scrollbar { width: 4px; /* ✅ plus fin = moins intrusif */ } .filters-body::-webkit-scrollbar-track { background: transparent; } .filters-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 20px; } .filters-body:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); } /* Titre principal "Filters" */ .filters-title { font-family: 'Circular', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.85px; text-transform: uppercase; margin-bottom: 0px; display: flex; align-items: center; gap: 10px; color: rgba(29, 29, 31, 0.96); } /* Icône à gauche du mot Filters */ .filters-icon { width: 18px; height: 18px; display: inline-block; opacity: 0.78; transform: translateY(-0.5px); } /* Bouton reset */ .clear-filters-btn-desktop { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.90); border: 1px solid rgba(255, 0, 0, 0.28); border-radius: 999px; padding: 6px 10px; font-family: 'Circular', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.25px; color: #C62222; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } .clear-filters-btn-desktop:hover { text-decoration: none; transform: translateY(-1px); background: #fff; border-color: rgba(255, 0, 0, 0.45); } .clear-filters-btn-desktop:active { transform: translateY(0px); opacity: 0.9; } /* ========================================================= Groupes de filtres (Sort By, Search, Quantity, etc.) ========================================================= */ /* Chaque catégorie */ .filter-group { /* IMPORTANT : ton réglage */ padding: 5px 0; /* Ligne de séparation entre catégories (light) */ border-top: 1px solid rgba(0,0,0,0.06); } /* IMPORTANT : le tout premier filtre (Sort By) -> pas de border-top, sinon ça fait un double trait sous le header */ .filter-group:first-of-type { border-top: none; /* Et on réduit le padding top pour que le 1er filtre soit bien "collé" au header */ padding-top: 2px; } /* ========================================================= FILTER HEADER — hover + état actif (ouvert) ✅ hover reste quand ouvert ✅ toggle icon PROPRE (+ / −) sans oblique ✅ aucun changement HTML/JS ========================================================= */ /* Titre de chaque filtre */ .filter-header { font-family: 'Circular', sans-serif; font-size: 12px; font-weight: 600; color: rgba(29, 29, 31, 0.92); display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; letter-spacing: 0.35px; text-transform: uppercase; padding: 8px 8px; border-radius: 10px; /* ✅ Important : border transparent pour éviter le "shift" au hover */ border: 1px solid transparent; /* ✅ Hover plus smooth + micro feedback */ transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } /* Hover léger (glass premium, bien visible sur gris glass) */ .filter-header:hover { background: rgba(255, 255, 255, 0.60); border-color: rgba(0, 0, 0, 0.05); } /* ✅ ÉTAT OUVERT : même style que le hover tant que c'est déployé */ .filter-group:not(.is-collapsed) > .filter-header { background: rgba(255, 255, 255, 0.60); border-color: rgba(0, 0, 0, 0.05); } /* Micro feedback au click */ .filter-header:active { transform: scale(0.995); } /* ========================================================= TOGGLE ICON — vrai + / − (pas de diagonale) ========================================================= */ /* On transforme .toggle-icon en icône dessinée */ .filter-header .toggle-icon { /* ✅ cache le caractère + / - que ton JS met */ font-size: 0; color: transparent; width: 18px; height: 18px; display: inline-block; position: relative; flex-shrink: 0; opacity: 0.55; transition: opacity 0.15s ease; } /* Barre horizontale (toujours visible) */ .filter-header .toggle-icon::before { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: rgba(29, 29, 31, 0.55); transform: translate(-50%, -50%); border-radius: 2px; transition: background 0.15s ease; } /* Barre verticale (visible quand fermé = "+") */ .filter-header .toggle-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 14px; background: rgba(29, 29, 31, 0.55); transform: translate(-50%, -50%) scaleY(1); transform-origin: center; border-radius: 2px; transition: transform 0.18s ease, background 0.15s ease; } /* Hover : icône plus visible */ .filter-header:hover .toggle-icon { opacity: 0.9; } .filter-header:hover .toggle-icon::before, .filter-header:hover .toggle-icon::after { background: rgba(29, 29, 31, 0.75); } /* ✅ ÉTAT OUVERT : on retire la barre verticale => "−" */ .filter-group:not(.is-collapsed) > .filter-header .toggle-icon::after { transform: translate(-50%, -50%) scaleY(0); } /* ✅ ÉTAT OUVERT : icône plus visible aussi */ .filter-group:not(.is-collapsed) > .filter-header .toggle-icon { opacity: 0.9; } .filter-group:not(.is-collapsed) > .filter-header .toggle-icon::before, .filter-group:not(.is-collapsed) > .filter-header .toggle-icon::after { background: rgba(29, 29, 31, 0.75); } /* ========================================================= BONUS — support si jamais tu as encore .plus / .minus ailleurs (on ne change rien mais on garde ton style existant) ========================================================= */ .filter-header .plus, .filter-header .minus { opacity: 0.55; transition: opacity 0.15s ease; font-size: 22px; line-height: 1; } .filter-header:hover .plus, .filter-header:hover .minus { opacity: 0.9; } .filter-group:not(.is-collapsed) > .filter-header .plus, .filter-group:not(.is-collapsed) > .filter-header .minus { opacity: 0.9; } /* Bonus : line-height plus compact si texte long */ .filter-header span, .filter-header div { line-height: 1.2; } /* Focus clavier propre */ .filter-header:focus-visible { outline: 2px solid rgba(0, 0, 0, 0.12); outline-offset: 2px; } /* Contenu */ .filter-group .filter-content { display: block; padding-top: 10px; } .filter-group.is-collapsed .filter-content { display: none; } .search-input { width: 100%; margin-bottom: 5px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; font-family: 'Circular', sans-serif; font-size: 13px; } /* ========================================================= PRICE FILTER — SAME UX AS QUANTITY ========================================================= */ .filter-price-wrapper { margin-top: 0px; font-family: 'Circular', sans-serif; display: flex; flex-direction: column; gap: 6px; } .price-slider { position: relative; height: 26px; margin-top: 10px !important; } .price-slider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 6px; background: #ddd; border-radius: 6px; transform: translateY(-50%); z-index: 1; } .price-slider input[type="range"] { position: absolute; width: 100%; top: 0; bottom: 0; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; z-index: 2; } .price-slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: none; } .price-slider input[type="range"]::-moz-range-track { background: transparent; border: none; } .price-slider input[type="range"]::-webkit-slider-thumb { pointer-events: all; position: relative; z-index: 10; width: 16px; height: 16px; border-radius: 50%; background: #4361EE; border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.25); -webkit-appearance: none; cursor: pointer; } /* IMPORTANT: z-index pour que la poignée max soit cliquable au-dessus */ #price-max { z-index: 5 !important; } #price-min { z-index: 4 !important; } /* ========================================= REMOVE NUMBER INPUT SPINNERS (PRICE + QUANTITY – desktop & mobile) ========================================= */ /* Chrome, Edge, Safari */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type="number"] { -moz-appearance: textfield; } .filter-color-list { list-style: none; padding: 0; } .filter-color-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: 'Circular', sans-serif; font-size: 13px; cursor: pointer; font-weight: 400; } .filter-color-item:hover .color-label { text-decoration: underline; } .filter-color-item.active .color-dot { position: relative; } .filter-color-item.active .color-dot::after { content: '✔'; color: white; font-size: 14px; position: absolute; top: 2px; left: 7px; } .filter-color-item.active .color-dot.color-White::after { content: '✔'; color: black; font-size: 14px; position: absolute; top: 2px; left: 7px; } .color-dot { width: 25px; height: 25px; border-radius: 8px; /* carré arrondi */ flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.12); } /* Couleurs disponibles */ .color-Anthracite { background-color: #303030; } .color-Light-beige { background-color: #E6D3B3; } .color-Blue { background-color: #4e41ff; } .color-Black { background-color: #000; } .color-Brown { background-color: #8B4513; } .color-Dark-beige { background-color: #BFA06F; } .color-Green { background-color: #3CB043; } .color-Light-blue { background-color: #ADD8E6; } .color-Light-grey { background-color: #D3D3D3; } .color-Orange { background-color: #FFA500; } .color-Pink { background-color: #E91E63; } .color-Purple { background-color: #800080; } .color-Red { background-color: #E63946; } .color-White { background-color: #ffffff; border: 0.5px solid #999; } .color-Yellow { background-color: #FFD700; } .color-Grey { background-color: #888888; } .color-test { background-color: #AAAAAA; } .toggle-icon { font-size: 18px; font-weight: 300; line-height: 1; } .sort-by-list { list-style: none; padding: 0; display: flex; flex-direction: column; } .sort-option { display: flex; align-items: center; gap: 10px; font-family: 'Circular', sans-serif; font-size: 13px; cursor: pointer; position: relative; font-weight: 500; } .sort-option input[type="radio"] { appearance: none; width: 16px; height: 16px; border: 1px solid #888; border-radius: 4px; display: inline-block; position: relative; top: -2.5px; } .sort-option input[type="radio"]:checked::before { content: '✔'; position: absolute; top: -5px; left: 2px; font-size: 18px; color: #4361EE; } .sort-option span { font-weight: 300; color: #262626; } .sort-option input[type="radio"]:checked + span { font-weight: 500; color: #4361EE; } /* ========================================================= QUANTITY FILTER — COMPACT NUMERIC BOXES (inputs) ========================================================= */ /* Le wrapper global : on réduit un peu l’espace vertical */ .filter-quantity-wrapper { margin-top: 0px; font-family: 'Circular', sans-serif; display: flex; flex-direction: column; /* COMPACT */ gap: 6px; /* au lieu de 10px */ } /* La ligne des valeurs (souvent min/max) */ .slider-values { font-size: 12px; /* un poil plus petit */ font-weight: 500; color: rgba(29, 29, 31, 0.85); display: flex; justify-content: space-between; align-items: center; /* si ça remonte trop, ajuste */ gap: 10px; } /* ========================================================= QUANTITY — FORCE STYLE DES CASES CHIFFRES (AU-DESSUS) Colle en dernier dans le CSS ========================================================= */ .slider-values > * { /* Taille de la "case" */ min-width: 40px !important; height: 30px !important; /* Texte */ font-family: 'Circular', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important; color: #1D1D1F !important; /* Look */ background: rgba(255,255,255,0.9) !important; border: 1px solid rgba(0,0,0,0.14) !important; border-radius: 8px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; /* Placement du texte */ display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; /* Pour éviter qu’un input prenne toute la place */ box-sizing: border-box !important; } /* Focus propre */ .filter-quantity-wrapper input[type="number"]:focus, .filter-quantity-wrapper input[type="text"]:focus { outline: none; border-color: rgba(67, 97, 238, 0.55); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15); } /* Option : retirer les petites flèches des input number (Chrome) */ .filter-quantity-wrapper input[type="number"]::-webkit-outer-spin-button, .filter-quantity-wrapper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Option : retirer les flèches aussi sur Firefox */ .filter-quantity-wrapper input[type="number"] { -moz-appearance: textfield; } /* ========================================================= Slider lui-même : garder compact ========================================================= */ .quantity-slider { position: relative; height: 26px; /* un peu moins haut */ /* ✅ AJOUT : espace entre les cases chiffres et la barre */ margin-top: 10px !important; } /* FAUSSE BARRE */ .quantity-slider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 6px; background: #ddd; border-radius: 6px; transform: translateY(-50%); z-index: 1; } /* LES SLIDERS SUPERPOSÉS */ .quantity-slider input[type="range"] { position: absolute; width: 100%; top: 0; bottom: 0; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; z-index: 2; } /* MASQUER BARRE NATIVE */ .quantity-slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: none; } .quantity-slider input[type="range"]::-moz-range-track { background: transparent; border: none; } /* THUMBS */ .quantity-slider input[type="range"]::-webkit-slider-thumb { pointer-events: all; position: relative; z-index: 10; width: 16px; height: 16px; border-radius: 50%; background: #4361EE; border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.25); -webkit-appearance: none; cursor: pointer; } #quantity-max-mobile { z-index: 5 !important; } #quantity-min-mobile { z-index: 4 !important; } .filter-brand-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .filter-brand-item { cursor: pointer; } .filter-brand-item .sort-option { display: flex; align-items: center; gap: 10px; font-family: 'Circular', sans-serif; font-size: 13px; font-weight: 400; } .brand-checkbox { width: 16px; height: 16px; border: 1px solid #888; border-radius: 4px; position: relative; } .filter-brand-item.active .brand-checkbox::before { content: '✔'; position: absolute; top: -8px; left: 2px; font-size: 18px; color: #4361EE; } .filter-brand-item.active span:last-child { font-weight: 500; color: #4361EE; } .filter-condition-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .filter-condition-item { cursor: pointer; } .filter-condition-item .sort-option { display: flex; align-items: center; gap: 10px; font-family: 'Circular', sans-serif; font-size: 13px; font-weight: 400; } .condition-checkbox { width: 16px; height: 16px; border: 1px solid #888; border-radius: 4px; position: relative; } .filter-condition-item.active .condition-checkbox::before { content: '✔'; position: absolute; top: -8px; left: 2px; font-size: 18px; color: #4361EE; } .filter-condition-item.active span:last-child { font-weight: 500; color: #4361EE; } .filter-underlay-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .filter-underlay-item { cursor: pointer; } .filter-underlay-item .sort-option { display: flex; align-items: center; gap: 10px; font-family: 'Circular', sans-serif; font-size: 13px; font-weight: 400; } .underlay-checkbox { width: 16px; height: 16px; border: 1px solid #888; border-radius: 4px; position: relative; } .filter-underlay-item.active .underlay-checkbox::before { content: '✔'; position: absolute; top: -8px; left: 2px; font-size: 18px; color: #4361EE; } .filter-underlay-item.active span:last-child { font-weight: 500; color: #4361EE; } .filter-soundinsulation-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .filter-soundinsulation-item { cursor: pointer; } .filter-soundinsulation-item .sort-option { display: flex; align-items: center; gap: 10px; font-family: 'Circular', sans-serif; font-size: 13px; font-weight: 400; } .soundinsulation-checkbox { width: 16px; height: 16px; border: 1px solid #888; border-radius: 4px; position: relative; } .filter-soundinsulation-item.active .soundinsulation-checkbox::before { content: '✔'; position: absolute; top: -8px; left: 2px; font-size: 18px; color: #4361EE; } .filter-soundinsulation-item.active span:last-child { font-weight: 500; color: #4361EE; } .filter-absorption-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .filter-absorption-item { cursor: pointer; } .filter-absorption-item .sort-option { display: flex; align-items: center; gap: 10px; font-family: 'Circular', sans-serif; font-size: 13px; font-weight: 400; } .absorption-checkbox { width: 16px; height: 16px; border: 1px solid #888; border-radius: 4px; position: relative; } .filter-absorption-item.active .absorption-checkbox::before { content: '✔'; position: absolute; top: -8px; left: 2px; font-size: 18px; color: #4361EE; } .filter-absorption-item.active span:last-child { font-weight: 500; color: #4361EE; } .product-count-summary { display: flex; align-items: baseline; gap: 18px; padding: 0px 0 20px; font-family: 'Circular', sans-serif; font-size: 16px; font-weight: 500; color: #1D1D1F; } /* Style global */ .product-count-summary span { white-space: nowrap; font-weight: 500; letter-spacing: 0.2px; } /* Count → plus fort */ #product-count { font-size: px; font-weight: 700; color: rgba(29, 29, 31, 0.96); } /* Stock → plus discret */ #product-quantity { font-size: 15px; font-weight: 500; color: rgba(29, 29, 31, 0.65); } /* Séparateur élégant entre les deux */ #product-quantity::before { content: ""; display: inline-block; width: 1px; height: 16px; margin: 0 16px 0 2px; background: rgba(0, 0, 0, 0.14); transform: translateY(2px); } /* Neutralise tout par défaut */ .product-wrapper * { text-decoration: none !important; } /* Ajoute underline bleu avec offset sur .product-name et .ref-number au hover */ .product-wrapper:hover .product-name, .product-wrapper:hover .ref-number { text-decoration: underline !important; text-decoration-color: #4361EE !important; text-underline-offset: 2px; /* Décalage de 2px */ } .product-list-wrapper { width: 75%; } /* La grille à l'intérieur de la colonne de droite */ .product-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 0 auto; width: 100%; } .product-img-availabilitytag { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background-color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.05); display: flex; align-items: stretch; flex: 1; } .product-img-availabilitytag img { width: 100%; height: 100%; object-fit: cover; display: block; } .availability-tag { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 5px; font-family: 'Circular', sans-serif; font-weight: 500; font-size: 14px; z-index: 2; } /* Disponible */ .availability-tag.in-stock { background-color: #DFF5E1; color: #227A25; } /* En option */ .availability-tag.under-option { background-color: #FFF3CD; color: #856404; } /* En rupture */ .availability-tag.out-of-stock { background-color: #F8D7DA; color: #842029; } /* En prépration / Upcoming */ .availability-tag.upcoming{ background-color:#EFE5FB; color:#5A2DAA; } /* ================================ BADGE — BAS GAUCHE (REUSE CONDITION) (SAFE : scoped + no ) ================================ */ .product-quality-badge.reuse-condition { position: absolute; bottom: 10px; left: 10px; padding: 5px 10px; border-radius: 8px; background-color: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); display: inline-flex; align-items: center; justify-content: center; gap: 6px; z-index: 2; opacity: 0.45; transition: opacity 0.18s ease-out; } /* Hover carte → badge visible */ .product-wrapper:hover .product-quality-badge.reuse-condition { opacity: 1; } /* ================================ ICON (span background-image) ================================ */ .product-quality-badge.reuse-condition .reuse-condition-icon { display: block; width: 45px; height: 30px; background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; /* effet “fondu” */ filter: saturate(0.25); transition: filter 0.2s ease; } .product-wrapper:hover .product-quality-badge.reuse-condition .reuse-condition-icon { filter: saturate(1); } /* mapping SVG */ .product-quality-badge.reuse-condition .reuse-condition-icon--new { background-image: url("https://26735166.fs1.hubspotusercontent-eu1.net/hubfs/26735166/svg%20webshop/Score%20New.svg"); } .product-quality-badge.reuse-condition .reuse-condition-icon--excellent { background-image: url("https://26735166.fs1.hubspotusercontent-eu1.net/hubfs/26735166/svg%20webshop/Score%20Excellent.svg"); } .product-quality-badge.reuse-condition .reuse-condition-icon--good { background-image: url("https://26735166.fs1.hubspotusercontent-eu1.net/hubfs/26735166/svg%20webshop/Score%20Good.svg"); } .product-quality-badge.reuse-condition .reuse-condition-icon--medium { background-image: url("https://26735166.fs1.hubspotusercontent-eu1.net/hubfs/26735166/svg%20webshop/Score%20Medium.svg"); } /* ================================ SVG JAUGE ================================ */ .reuse-condition-icon { height: 14px; width: auto; display: block; filter: saturate(0.25); transition: filter 0.2s ease; } .product-wrapper:hover .reuse-condition-icon { filter: saturate(1); } /* ================================ TOOLTIP (REPRIS TEL QUEL) ================================ */ .quality-tooltip { position: absolute; bottom: 140%; left: 0; min-width: 220px; max-width: 220px; padding: 10px 12px; background-color: #F2F2F2; color: black; border-radius: 8px; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.55); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s; z-index: 5; } .product-quality-badge:hover .quality-tooltip { opacity: 1; visibility: visible; transform: translateY(0); } .quality-tooltip::after { content: ""; position: absolute; top: 100%; left: 14px; border-width: 7px; border-style: solid; border-color: #F2F2F2 transparent transparent transparent; } .quality-tooltip-header { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; } .quality-tooltip-title { font-weight: 600; } .quality-tooltip-text { font-size: 11px; line-height: 1.4; margin: 0; } /* ================================ BADGE PRIX — BAS DROITE ================================ */ .product-price-badge { position: absolute; bottom: 10px; right: 10px; padding: 6px 12px; border-radius: 5px; background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); font-family: 'Circular', sans-serif; font-size: 16px; font-weight: 600; color: #1D1D1F; z-index: 2; /* ✅ Ajouts ultra safe pour permettre 2 lignes proprement */ display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; gap: 2px; } /* ✅ Ligne principale = héritage du style du badge (ne change rien visuellement) */ .product-price-badge .price-amount{ font: inherit; color: inherit; line-height: 1.05; } /* ✅ "excl. VAT" = plus petit + plus discret */ .product-price-badge .price-vat{ font-family: inherit; font-size: 10px; font-weight: 500; color: inherit; opacity: 0.7; line-height: 1; white-space: nowrap; } /* ===== QUICK ADD — desktop only & scoped ===== */ @media (hover:hover) and (pointer:fine) and (min-width: 1024px) { /* Contexte strict : uniquement dans la liste produits */ /* Contexte strict : uniquement dans la liste */ .product-list .product-wrapper .quickadd{ position:absolute; top:8px; right:8px; display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:999px; background:rgba(255,255,255,.95); border:1px solid rgba(0,0,0,.08); box-shadow:0 2px 10px rgba(0,0,0,.08); opacity:0; pointer-events:none; /* hidden par défaut */ transition:opacity .18s ease; z-index:3; } /* Afficher au survol / focus — uniquement si **pas** disabled */ .product-list .product-wrapper:hover .quickadd:not(.is-disabled), .product-list .product-img-availabilitytag:focus-within .quickadd:not(.is-disabled){ opacity:1; pointer-events:auto; } /* État disabled : caché par défaut, visible (mais atténué) seulement au hover/focus */ .product-list .product-wrapper .quickadd.is-disabled{ opacity:0; pointer-events:none; /* ← corrige le “toujours visible” */ } .product-list .product-wrapper:hover .quickadd.is-disabled, .product-list .product-img-availabilitytag:focus-within .quickadd.is-disabled{ opacity:.35; pointer-events:none; /* fondu uniquement au survol */ } /* Stepper compact (− 1 +) */ .product-list .product-wrapper .quickadd .qa-dec, .product-list .product-wrapper .quickadd .qa-inc { width: 24px; height: 24px; border-radius: 999px; border: 1px solid rgba(0,0,0,.18); background: #fff; font-size: 14px; line-height: 22px; cursor: pointer; } .product-list .product-wrapper .quickadd .qa-qty { width: 32px; text-align: center; border: 0; background: transparent; font-size: 12px; outline: none; } /* Bouton Add — couleurs demandées */ .product-list .product-wrapper .quickadd .qa-add { height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid #4361EE; background: #4361EE; color: #fff; font-size: 12px; cursor: pointer; transition: transform .15s ease, box-shadow .20s ease, background-color .20s ease, border-color .20s ease; } .product-list .product-wrapper .quickadd .qa-add:hover, .product-list .product-wrapper .quickadd .qa-add:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.16); background: #3A56D5; border-color: #3A56D5; } .product-list .product-wrapper .quickadd .qa-add:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(0,0,0,.12); } .product-list .product-wrapper .quickadd.is-disabled { opacity: .35; pointer-events: none; } } /* Force OFF sur mobile/tablette tactile */ @media (max-width: 1023px) { .product-list .product-wrapper .quickadd { display: none !important; } } /* Fiche produit uniquement */ [data-product-block] [data-qty-input]:out-of-range { border-color: inherit; box-shadow: none; } /* micro feedback quand on clamp automatiquement au max */ @keyframes clampPulse { 0% { box-shadow: 0 0 0 0 rgba(67,97,238,.25); } 100%{ box-shadow: 0 0 0 10px rgba(67,97,238,0); } } [data-product-block] [data-qty-input].clamped { animation: clampPulse .16s ease; } .product-info { margin-top: 10px; } .product-meta { display: flex; justify-content: space-between; align-items: center; font-family: 'Circular', sans-serif; font-size: 14px; font-weight: 500; color: #1D1D1F; margin-bottom: 5px; margin-top: -5px; } .brand-name { text-align: left; font-weight: 300; font-size: 13px; } .ref-number { text-align: right; color: #4361EE; /* tu peux changer selon ton branding */ font-weight: 300; font-size: 13px; } .product-name { font-family: 'Circular', sans-serif; font-size: 16px; font-weight: 500; color: #000000; margin: 0; line-height: 1.4; text-align: left; } /* =========================== Stock cards — GLASS EFFECT =========================== */ .product-stock-cards { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 8px; margin-bottom: 10px; } .stock-card { flex: 1 1 0; min-width: 0; padding: 6px 12px; border-radius: 8px; /* 💎 Glass-style visible même sur fond blanc */ background: linear-gradient( 135deg, rgba(255, 255, 255, 0.90), rgba(248, 250, 252, 0.75) ); border: 1px solid rgba(148, 163, 184, 0.55); /* gris clair */ /* ↓ Ombre adoucie ici ↓ */ box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); /* on garde un peu de blur pour les zones plus sombres (vignettes, etc.) */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } /* Labels */ .stock-label { font-family: 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; opacity: .9; margin-bottom: 1px; } /* Valeurs */ .stock-value { font-family: 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; } /* Couleurs = uniquement le texte */ .stock-real .stock-label, .stock-real .stock-value { color: #227A25; /* vert dispo réel */ } .stock-reserved .stock-label, .stock-reserved .stock-value { color: #856404; /* amber "sous option" */ } .stock-available .stock-label, .stock-available .stock-value { color: #4361EE; /* bleu "available" */ } /* Si aucune réservation → carte adoucie */ .stock-reserved.is-empty { opacity: 0.45; } /* ----------- Hide mobile‑only UI on desktop ----------- */ .mobile-filters-header, .mobile-filters-toggle, .mobile-filters-panel { display: none; /* caché tant qu’on n’est pas en < 768 px */ } /* === PAGE ENFANT - PRODUCT DETAIL === */ .admin-internal-bar { background-color: #fff4dc; border: 3px solid #f0c36d; padding: 25px 40px; font-family: 'Circular', sans-serif; margin-bottom: 50px; } .admin-internal-bar-inner { max-width: 1400px; margin: 0 auto; } .admin-internal-bar h2 { font-size: 30px; color: #841F29; margin-bottom: 15px; } .admin-info-row { font-size: 16px; margin-bottom: 10px; color: #333; } .admin-comments { background: #fff; padding: 15px; border: 1px solid #ddd; border-radius: 8px; margin-top: 5px; font-size: 15px; } .breadcrumb { font-family: 'Circular', sans-serif; font-size: 16px; color: #666; margin-bottom: 20px; } .breadcrumb a { color: #4361EE; text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb span { color: #1D1D1F; font-weight: 500; } .catalogue-wrapper-product { padding: 20px 5px; width: 1400px; margin: auto; font-family: 'Circular', sans-serif; } .product-detail-container { display: flex; gap: 30px; align-items: flex-start; } .product-gallery { display: flex; flex-direction: row; gap: 20px; } .product-thumbnails { display: flex; flex-direction: column; gap: 10px; width: 80px; line-height: 0; font-size: 0; } .product-thumbnails p, .product-thumbnails figure { display: contents !important; } .product-thumbnails img, .thumbnail { display: block !important; width: 80px; height: 80px; object-fit: cover; aspect-ratio: 1 / 1; /* Force le format carré */ border: 1px solid #ddd; border-radius: 8px; cursor: pointer; margin: 0 !important; padding: 0 !important; } .product-thumbnails p { display: contents !important; } .product-main-image img { width: 500px; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid #ccc; border-radius: 10px; } .product-main-image { position: relative; display: inline-block; /* Important pour que le bouton se positionne par rapport à cette div */ } .product-thumbnails img.active-thumbnail { border: 2px solid #4361EE; /* Bleu Composil */ box-shadow: 0 0 5px rgba(67, 97, 238, 0.5); /* Optionnel pour ajouter un glow léger */ } .zoom-button { position: absolute; top: 10px; right: 10px; background-color: rgba(255, 255, 255, 0.9); border: 1px solid #ccc; border-radius: 8px; padding: 6px 12px; font-family: 'Circular', sans-serif; font-size: 17px; display: flex; align-items: center; gap: 8px; cursor: pointer; z-index: 2; } .zoom-button .zoom-icon { width: 20px !important; height: 20px !important; object-fit: contain !important; all: initial; /* Reset complet */ display: block; cursor: pointer; } .zoom-button:hover { background-color: rgba(240, 240, 240, 1); /* Un peu plus clair */ border-color: #4361EE; /* Bleu Composil */ } .zoom-button:hover .zoom-icon { filter: brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(747%) hue-rotate(222deg) brightness(93%) contrast(97%); } body.overlay-open { overflow: hidden; touch-action: none; position: fixed; width: 100%; } #image-overlay { display: none; /* Caché par défaut */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; z-index: 9999; } #image-overlay img { max-width: 90%; max-height: 90%; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); border-radius: 8px; } #close-overlay { position: absolute; top: 20px; right: 30px; font-size: 30px; color: white; cursor: pointer; font-weight: bold; } .overlay-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.8); border: none; width: 60px; /* Taille fixe du cercle */ height: 60px; cursor: pointer; z-index: 10000; border-radius: 100%; /* Cercle parfait */ display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, transform 0.3s ease; padding: 0; /* Enlève tout padding inutile */ } /* Positionnement spécifique */ #prev-image { left: 20px; } #next-image { right: 20px; } /* Hover effet pour tout le bouton */ .overlay-nav:hover { background: rgba(255, 255, 255, 1); transform: translateY(-50%) scale(1.05); /* Légère animation de grossissement */ } /* === Panneau infos produit === */ .product-info-panel { flex: 1; display: flex; flex-direction: column; gap: 15px; font-family: 'Circular', sans-serif; } /* Titre du produit */ .product-title { font-size: 28px; font-weight: 700; color: #1D1D1F; margin: 0; line-height: 1; } .product-brand { display: flex; flex-direction: column; /* ➜ logo au-dessus du texte */ align-items: flex-start; /* ➜ alignement gauche */ gap: 5px; /* petit espace vertical entre logo et nom */ font-family: 'Circular', sans-serif; font-size: 14px; font-weight: 400; color: #333; margin-bottom: 0px; } .brand-logo { max-height: 15px; /* Légèrement plus grand pour ressortir */ width: auto; display: block; } .brand-name { font-size: 12px; font-weight: 500; } .product-ref { font-size: 16px; font-weight: 400; color: #333; margin: 0; line-height: 1; margin-top: -10px; margin-bottom: 0px; color: #4361EE; } /* Container global */ .product-meta-detail { display: flex; flex-direction: column; /* 🔥 PRIX AU-DESSUS */ align-items: flex-start; gap: 10px; margin-top: 0px; } /* Chaque ligne interne */ .product-meta-detail .product-meta-row { display: flex; align-items: center; gap: 10px; } /* Ligne prix */ .product-meta-detail .meta-row-price { /* pas obligé d'ajouter quelque chose de plus ici, mais tu peux si besoin (margin-bottom, etc) */ } /* Ligne availability + quantité */ .product-meta-detail .meta-row-availability { /* déjà géré par le display:flex plus haut */ } /* Prix sur page individuelle */ .product-meta-detail .product-price-individual { display: inline-flex; align-items: center; background: #F2F2F2; border: 1px solid #E5E5E5; border-radius: 8px; padding: 8px 12px; font-size: 16px; font-weight: 600; color: #1D1D1F; } /* TAG */ .product-price-tag { font-size: 14px; font-weight: 700; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 20px; } /* "excl. VAT" sur page individuelle (inline, plus petit) */ .product-meta-detail .price-vat-inline { font-size: 12px; font-weight: 600; opacity: 0.6; margin-left: 8px; white-space: nowrap; line-height: 1; } /* Tag availability spécifique fiche produit */ .product-meta-detail .availability-tag { position: static; display: inline-flex; align-items: center; justify-content: center; padding: 8px 15px; border-radius: 5px; font-size: 16px; font-weight: 500; line-height: 1; display: none; } /* ===================================================== Stock cards — PAGE INDIVIDUELLE (suffixe -single) ===================================================== */ .product-stock-wrapper-single { display: flex; align-items: flex-start; /* 🔥 aligne le tag + les cards */ gap: 12px; } /* Fiche produit : le tag doit rester dans le flux (pas en absolute comme le listing) */ .product-stock-wrapper-single .availability-tag-single{ position: static; top: auto; left: auto; display: inline-flex; align-items: center; justify-content: center; margin-top: 0px; /* tu l'avais déjà */ } /* === Cards container === */ .product-stock-cards-single { display: flex; flex-wrap: nowrap; gap: 8px; } /* === Single card === */ .stock-card-single { flex: 1 1 0; min-width: 120px; padding: 6px 12px; border-radius: 8px; /* Glass effect calibré pour fond de page individuelle */ background: linear-gradient( 135deg, rgba(255, 255, 255, 0.85), rgba(248, 250, 252, 0.70) ); border: 1px solid rgba(148, 163, 184, 0.45); box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } /* === Labels === */ .stock-label-single { font-family: 'Circular', system-ui, sans-serif; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; opacity: .85; margin-bottom: 1px; } /* === Values === */ .stock-value-single { font-family: 'Circular', system-ui, sans-serif; font-size: 16px; font-weight: 700; } /* === Color coding (texte uniquement) === */ .stock-real-single .stock-label-single, .stock-real-single .stock-value-single { color: #227A25; } .stock-reserved-single .stock-label-single, .stock-reserved-single .stock-value-single { color: #856404; } .stock-available-single .stock-label-single, .stock-available-single .stock-value-single { color: #4361EE; } /* === Si aucune réservation === */ .stock-reserved-single.is-empty { opacity: 0.4; } /* ========================================================= COMPOSIL — CART (CSS consolidé & commenté) ➜ Remplace l’ancien CSS “cart” pour éviter tout conflit ========================================================= */ /* =============================== 0) CTA inline (fiche produit) =============================== */ /* CTA inline (fiche produit) */ .quote-cta-inline--horizontal.v3{ display:flex; align-items:center; justify-content:flex-end; /* 🔥 aligne le contenu à droite */ gap:16px; flex-wrap:wrap; margin-top:12px; } .quote-cta-inline--horizontal.v3 .quote-cta-text{ font-family:'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:16px; color:#333; font-weight:500; margin:0; } /* Quantity picker (fiche produit) */ .qty-picker{ display:inline-flex; align-items:center; border:1px solid #e5e7eb; border-radius:9999px; padding:3px; background:#fff; } .qty-btn{ width:33px; height:33px; border:0; border-radius:50%; cursor:pointer; background:#f3f4f6; display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1; } .qty-btn:active{ transform:scale(0.98); } .qty-input{ width:64px; text-align:center; border:0; outline:0; font:600 14px/1.2 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; -moz-appearance:textfield; } .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } /* CTA principal (fiche produit) */ .quote-cta-inline--horizontal.v3 .quote-cta-button{ display:inline-block; background:#A7EC63; color:#000; text-decoration:none; font-family:'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:500; padding:10px 22px; border-radius:9999px; font-size:15px; border:0; cursor:pointer; transition:transform .15s ease; } .quote-cta-inline--horizontal.v3 .quote-cta-button:hover{ transform:translateY(-1px); } .quote-cta-inline--horizontal.v3 .quote-cta-button:active{ transform:translateY(0); } /* =============================== (1) Floating Cart — carré + badge + anim "dalle → panier" (HTML inchangé) =============================== */ :root{ --fc-bg:#F2F2F2; --fc-icon:#000; --fc-radius:12px; --fc-badge-bg:#6B36DA; --fc-badge-fg:#fff; --tile-url:url("data:image/svg+xml;utf8,"); --tile-size:30px; --tile-dur:2s; } /* ✅ Ciblage volontairement robuste (sans html/body) pour battre les resets */ #quote-cart-button, .quote-cart-button, a.quote-cart-button, button.quote-cart-button, a#quote-cart-button, button#quote-cart-button{ position:fixed !important; right:16px !important; bottom:16px !important; z-index:9999 !important; width:70px !important; height:70px !important; padding:0 !important; display:grid !important; place-items:center !important; background: rgba(245, 245, 245, 1) !important; border: .5px solid #4361EE !important; border-radius: var(--fc-radius) !important; overflow: visible !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent; /* ✅ BOX SHADOW PERMANENTE (premium + imposante) */ box-shadow: 0 18px 40px rgba(0,0,0,.26), 0 60px 140px 16px rgba(0,0,1) !important; /* ⚠️ Certains thèmes/ressets appliquent filter:none/box-shadow:none ailleurs : on évite tout effet de filtre parasite */ filter: none !important; } /* Icon */ #quote-cart-button svg, .quote-cart-button svg{ width:40px; height:40px; display:block; color:var(--fc-icon); fill:currentColor; stroke:currentColor; position:relative; z-index:1; } /* Badge */ .quote-cart-count{ position:absolute !important; top:-8px !important; right:-8px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; white-space:nowrap !important; min-width:30px !important; height:30px !important; padding:0 6px !important; margin-top:-10px; background:#4361EE !important; color:var(--fc-badge-fg) !important; border-radius:8px !important; font:800 14px/30px system-ui,-apple-system, Segoe UI, Roboto, Arial, sans-serif !important; text-align:center !important; box-shadow:0 8px 18px rgba(0,0,0,.18) !important; z-index:2 !important; } /* Effet hover léger (desktop only) */ @media (hover:hover) and (pointer:fine) { #quote-cart-button, .quote-cart-button, a.quote-cart-button, button.quote-cart-button, a#quote-cart-button, button#quote-cart-button{ transition: transform .14s ease, box-shadow .20s ease, border-color .20s ease, background-color .20s ease; will-change: transform; } #quote-cart-button:hover, .quote-cart-button:hover, a.quote-cart-button:hover, button.quote-cart-button:hover, a#quote-cart-button:hover, button#quote-cart-button:hover{ transform: translateY(-2px); /* hover = encore plus "floating" + anneau léger */ box-shadow: 0 22px 52px rgba(0,0,0,.30), 0 78px 180px 20px rgba(0,0,0,.24), 0 0 0 3px rgba(107,54,218,.12) !important; } #quote-cart-button svg, .quote-cart-button svg{ transition: transform .14s ease; } #quote-cart-button:hover svg, .quote-cart-button:hover svg{ transform: scale(1.06); } .quote-cart-count{ transition: transform .14s ease, box-shadow .20s ease; } .quote-cart-button:hover .quote-cart-count{ transform: translateY(-1px) scale(1.02); } } /* état pressé (clic) */ #quote-cart-button:active, .quote-cart-button:active, a.quote-cart-button:active, button.quote-cart-button:active, a#quote-cart-button:active, button#quote-cart-button:active{ transform: translateY(0); box-shadow: 0 14px 32px rgba(0,0,0,.24), 0 40px 95px 10px rgba(0,0,0,.20) !important; } /* accessibilité clavier */ #quote-cart-button:focus-visible, .quote-cart-button:focus-visible, a.quote-cart-button:focus-visible, button.quote-cart-button:focus-visible, a#quote-cart-button:focus-visible, button#quote-cart-button:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(107,54,218,.24), 0 18px 40px rgba(0,0,0,.26), 0 60px 140px 16px rgba(0,0,0,.22) !important; } /* ============== Animation "dalle → panier" (optionnelle) ============== */ #quote-cart-button::before, .quote-cart-button::before{ content:""; position:absolute; width:var(--tile-size); height:var(--tile-size); left:10px; bottom:8px; background:var(--tile-url) no-repeat center/contain; opacity:0; transform:translate(0,0) scale(.9) rotate(-8deg); pointer-events:none; z-index:0; } .flying-tile{ position:fixed; width:var(--tile-size,22px); height:var(--tile-size,22px); left:0; top:0; background:var(--tile-url) no-repeat center/contain; pointer-events:none; z-index:100000; will-change:transform,opacity; } @keyframes tile-in{ 0%{opacity:0; transform:translate(-6px,10px) scale(.85) rotate(-12deg);} 45%{opacity:1; transform:translate(12px,-6px) scale(.92) rotate(-4deg);} 100%{transform:translate(22px,-18px) scale(.90) rotate(0deg); opacity:1;} } /* ============== Animation "dalle → panier" (optionnelle) ============== */ #quote-cart-button::before, .quote-cart-button::before{ content:""; position:absolute; width:var(--tile-size); height:var(--tile-size); left:10px; bottom:8px; background:var(--tile-url) no-repeat center/contain; opacity:0; transform:translate(0,0) scale(.9) rotate(-8deg); pointer-events:none; z-index:0; } .flying-tile{ position:fixed; width:var(--tile-size,22px); height:var(--tile-size,22px); left:0; top:0; background:var(--tile-url) no-repeat center/contain; pointer-events:none; z-index:100000; will-change:transform,opacity; } @keyframes tile-in{ 0%{opacity:0; transform:translate(-6px,10px) scale(.85) rotate(-12deg);} 45%{opacity:1; transform:translate(12px,-6px) scale(.92) rotate(-4deg);} 100%{transform:translate(22px,-18px) scale(.90) rotate(0deg); opacity:1;} } /* =============================== 2) Overlay + Modal (cart) =============================== */ #quote-cart-overlay, .quote-cart-overlay{ position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; } /* Header & footer fixes, contenu scrollable */ .quote-cart-modal{ background:#fff; width:min(1100px, calc(100vw - 72px)); max-height:80vh; overflow:hidden; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.25); padding:24px; position:relative; display:flex; flex-direction:column; gap:24px; animation:cartSlideDown .25s ease; } .quote-cart-items{ flex:1 1 auto; overflow:auto; min-height:0; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; position:relative; /* ancre pour sticky */ } #hs-form-step, #quote-step-form, #hs-form-container { padding-right: 20px; /* espace pour la barre iOS */ margin-right: -20px; /* compense pour ne pas rétrécir le contenu */ flex: 1 1 auto; min-height: 0; /* 🔑 sans ça, pas de scroll dans un parent flex */ overflow: auto; /* la barre de scroll est ici */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .quote-cart-items{ padding-right: 20px; /* espace pour la barre iOS */ margin-right: -20px; /* compense pour ne pas rétrécir le contenu */ } @keyframes cartSlideDown{ from{transform:translateY(-18px);opacity:0;} to{transform:translateY(0);opacity:1;} } .quote-cart-modal h2{ margin:0 24px 0 0; font:700 28px/1.2 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#0f172a; } #close-quote-cart, .close-cart-btn{ position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; border-radius:10px; background:#f3f4f6; color:#111827; font-size:20px; line-height:1; cursor:pointer; } .cart-empty{ padding:24px 0 8px; color:#6b7280; font:500 14px/1.35 system-ui,-apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* =============================== 3) Table du panier (renderCart) =============================== */ .cart-table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 500 14px/1.35 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* colonnes — ordre : Name / Ref / Price / Qty / Total */ .cart-table col.col-name { width:50%; } .cart-table col.col-ref { width:15%; } .cart-table col.col-price { width:1%; } .cart-table col.col-qty { width:25%; } .cart-table col.col-total { width:10%; } /* mêmes largeurs sur th/td (alignées avec colgroup) */ .cart-table thead th:nth-child(1), .cart-table tbody td:nth-child(1){ width:35%; } /* Name */ .cart-table thead th:nth-child(2), .cart-table tbody td:nth-child(2){ width:15%; } /* Reference */ .cart-table thead th:nth-child(3), .cart-table tbody td:nth-child(3){ width:15%; } /* Price */ .cart-table thead th:nth-child(4), .cart-table tbody td:nth-child(4){ width:20%; } /* Quantity (m²) */ .cart-table thead th:nth-child(5), .cart-table tbody td:nth-child(5){ width:15%; } /* Total (€) */ /* Alignement par défaut : tout à gauche */ .cart-table th, .cart-table td { text-align: left; } /* Total (€) aligné à droite (header + valeurs) */ .cart-table thead th:nth-child(5), .cart-table tbody td:nth-child(5) { text-align: right; } /* Prix & Total */ .cart-table .ct-price { font-weight: 600; color: #111827; white-space: nowrap; } .cart-table .ct-total { font-weight: 700; color: #000000; white-space: nowrap; } /* En-têtes : ligne sticky (partie "visuelle" seulement ici) */ .cart-table thead th{ font-weight: 700; padding: 12px 10px; border-bottom: 1px solid #eee; } /* Lignes du body */ .cart-table tbody td{ padding: 14px 10px; vertical-align: middle; border-bottom: 1px solid #f0f0f0; } .cart-table tbody tr:last-child td{ border-bottom: 0; } /* Wrap uniquement où il faut : Ref + Price ne wrap pas */ .cart-table thead th:nth-child(2), .cart-table tbody td:nth-child(2), .cart-table thead th:nth-child(3), .cart-table tbody td:nth-child(3){ white-space: nowrap; } /* ===== Cellule Name ===== */ .cart-table .ct-name{ overflow: visible; } .cart-table .ct-cell-main{ display: flex; align-items: center; gap: 12px; min-width: 0; } .cart-table .ct-thumb{ width: 70px; height: 70px; flex: 0 0 56px; border-radius: 9px; object-fit: cover; display: block; box-shadow: 0 1px 3px rgba(0,0,0,.06); } .cart-table .ct-title{ font-weight: 700; font-size: 16px; color: #111827; display: block; } .cart-table .ct-sub{ display: block; font: 400 12px/1.25 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #6b7280; } /* ===== Cellule Référence ===== */ .cart-table .ct-ref{ font-weight: 500; color: #6b7280; overflow: hidden; text-overflow: ellipsis; } /* ===== Cellule Quantité / Actions ===== */ .cart-table .ct-qty{ text-align: left; } .cart-table .ct-qtyctrl{ display: inline-flex; align-items: center; gap: 8px; } .cart-table .cart-qty-input{ width: 62px; height: 36px; border: 1px solid #e5e7eb; border-radius: 8px; text-align: center; font: 500 14px/36px system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; box-sizing: border-box; } .cart-table .cart-qty-input::-webkit-outer-spin-button, .cart-table .cart-qty-input::-webkit-inner-spin-button{ -webkit-appearance: none; } .cart-table .cart-qty-input{ -moz-appearance: textfield; } /* ===== Boutons +/- & Delete ===== */ .cart-table .cart-qty-dec, .cart-table .cart-qty-inc, .cart-table .cart-remove{ height:36px; min-width:36px; padding:0 10px; border:1px solid #e5e7eb; background:#fff; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background .15s, border-color .15s, color .15s, padding .24s ease, min-width .24s ease; /* ← clé du slide-open */ } .cart-table .cart-qty-dec:hover, .cart-table .cart-qty-inc:hover, .cart-table .cart-remove:hover{ background:#f9fafb; border-color:#d1d5db; } /* État Delete? (1er clic) — SLIDE OPEN */ .cart-table .cart-remove.confirm{ background:#fef2f2; border-color:#fecaca; color:#b91c1c; padding:0 16px; /* plus de padding → plus large visuellement */ min-width:96px; /* passe de 36px à ~96px → slide horizontal */ } /* =============================== 3-bis) Desktop only : thead sticky + underline fixe =============================== */ @media (min-width: 768px){ /* si le thead est masqué en mobile, on le réactive ici */ .cart-table thead{ display: table-header-group !important; } /* En-têtes collés + underline qui reste visible pendant le scroll */ .cart-table thead th{ position: sticky; top: 0; z-index: 6; background: #fff; border-bottom: 0; /* évite les soucis de border-collapse */ box-shadow: inset 0 -1px 0 #eee; /* ← trait fixe sous le header */ } /* pas de trait sous la dernière ligne (pour éviter le doublon avec le footer) */ .cart-table tbody tr:last-child td{ border-bottom: 0; } } /* =============================== 4) Footer du panier (total + Next) =============================== */ .quote-cart-footer{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:20px; border-top:1px solid #eee; } #quote-cart-total{ font:700 18px/1.2 'Circular', system-ui,-apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111827; } #send-quote-request, .quote-cart-submit{ border:0; background:#A7EC63; color:#000; font:700 18px/1 'Circular', system-ui,-apple-system, Segoe UI, Roboto, Arial, sans-serif; padding:12px 30px; border-radius:9px; cursor:pointer; transition:transform .15s ease; } #send-quote-request:hover, .quote-cart-next:hover{ transform:translateY(-1px); } /* ===== Footer totals (Quantity / Price en 2 lignes) ===== */ #quote-cart-total { display: flex; flex-direction: column; gap: 4px; } #quote-cart-total .total-line { display: flex; align-items: baseline; gap: 6px; } #quote-cart-total .total-label { font-size: 16px; font-weight: 600; color: #000; /* gris doux */ } #quote-cart-total .total-value { font-size: 16px; font-weight: 700; color: #000; /* noir */ } /* =============================== 5) Step Form (HubSpot) + bouton “Previous” =============================== */ .hs-form-step{ padding:10px 2px; min-height:120px; } .hs-mini-loader{ font:500 14px/1.4 system-ui,-apple-system, Segoe UI, Roboto, Arial; opacity:.7; } .hs-error{ color:#b91c1c; font-weight:600; padding:8px 0; } .hs-back-btn{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; border:1px solid #e5e7eb; background:#f3f4f6; color:#111827; font:600 14px/1.2 system-ui,-apple-system, Segoe UI, Roboto, Arial, sans-serif; cursor:pointer; } .hs-back-btn:hover{ background:#e5e7eb; } .hs-back-btn:focus{ outline:2px solid #04A89D; outline-offset:2px; } /* =============================== 6) Utilitaire =============================== */ [hidden]{ display:none!important; } /* =============================== Confirmation HubSpot =============================== */ .hs-form .submitted-message, .hs-form-iframe .submitted-message { min-height: auto !important; height: auto !important; padding: 24px 20px !important; text-align: center; font: 500 18px/1.4 'Circular', sans-serif; color: #1D1D1F; } .product-accordions { max-height: 62vh; overflow-y: auto; padding-right: 10px; /* pour scroll visible */ scroll-behavior: smooth; } .custom-toggle { border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; margin-bottom: 15px; } .custom-toggle-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 20px 0px; } .toggle-title { font-size: 18px; font-weight: 500; color: #333333; } .toggle-icon { font-size: 25px; color: #8a8a8a; font-weight: 400; } /* Contenu caché par défaut */ .custom-toggle-content { display: none; padding: 10px 0 15px; } .custom-toggle:first-of-type { border-bottom: none; margin-bottom: 0; } /* Quand on ouvre */ .custom-toggle-content.open { display: block; } /* Grille à 2 colonnes */ .product-features-grid { display: grid; grid-template-columns: 230px auto; /* Fixe la largeur de gauche */ gap: 6px 10px; /* Resserre les espaces */ } .feature-name { color: #333; font-size: 14px; font-weight: 400; } .feature-value { color: #000; font-size: 14px; font-weight: 500; } /* Wrapper + icône (inchangé ou presque) */ .info-tooltip-wrapper { position: relative; display: inline-block; margin-left: 0.2em; vertical-align: middle; font-size: 0.95em; } .info-icon { display: inline-block; width: 1em; height: 1em; border-radius: 50%; background-color: #4361EE; background-image: url('https://26735166.fs1.hubspotusercontent-eu1.net/hubfs/26735166/info-borderless-svgrepo-com%20%281%29.svg'); background-size: 60% 60%; background-repeat: no-repeat; background-position: center; margin-left: 0.12em; vertical-align: middle; margin-top: -6px; cursor: pointer; box-shadow: 0 0 0 2px #fff; border: none; outline: none; transition: background 0.18s; } /* Contenu de base de toutes les tooltips Technical Features */ .tooltip-content { display: none; position: absolute; left: 120%; top: 50%; transform: translateY(-50%); z-index: 99; background: #F2F2F2; color: #222; border-radius: 8px; box-shadow: 0 4px 16px rgba(67,97,238,0.10), 0 1.5px 2px rgba(0,0,0,0.06); padding: 1em 1em; width: 320px; font-size: 0.8em; line-height: 1.3; min-width: 160px; border-left: 3.5px solid #4361EE; font-weight: 400; text-align: left; box-sizing: border-box; white-space: normal; overflow: visible; } /* Titre de la tooltip (1ère ligne) */ .tf-tooltip-header { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; } .tf-tooltip-title { font-weight: 600; font-size: 1.2em; color: #223; letter-spacing: 0.01em; } /* Corps de texte de la tooltip */ .tf-tooltip-body { margin: 0; } /* Mise en forme des labels "Definition:", etc. */ .tooltip-content b { font-weight: 500; margin-right: 0.15em; color: #3340BB; } .tf-tooltip-header--with-icon { display: inline-flex; align-items: center; gap: 20px; } .tf-tooltip-condition-icon { height: 18px; width: auto; flex-shrink: 0; margin-top: 1px; } /* ================================ TECH FEATURES — Quality level en ÉTOILES (sans changer le HTML) ================================ */ .tf-tooltip-squares { display: inline-flex; align-items: center; gap: 4px; } /* Chaque "square" devient une étoile SVG */ .tf-tooltip-square { margin-top: -2px; width: 11px; height: 11px; display: inline-block; background-image: url('https://26735166.fs1.hubspotusercontent-eu1.net/hubfs/26735166/star-svgrepo-com%20%281%29.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; /* neutralisation des anciens styles carrés */ background-color: transparent !important; border: none !important; border-radius: 0 !important; box-sizing: content-box !important; /* par défaut = "empty" */ opacity: 0.22; } /* Le "plein" (ancienne classe) devient l’étoile active */ .tf-tooltip-square--full { opacity: 1; } /* Affichage au hover / focus */ .info-tooltip-wrapper:hover .tooltip-content, .info-icon:focus + .tooltip-content { display: block; } .technical-sheet-link { color: #4361EE; font-family: 'Circular', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 20px; display: inline-flex; align-items: center; gap: 3px; /* Espace entre le chevron et le texte */ text-decoration: none; } .technical-sheet-link:hover { text-decoration: underline; } .technical-sheet-link .chevron-right { stroke: #4361EE; /* Assure la couleur bleu Composil */ margin-top: 1px; } /* SECTION SIMILAR ITEMS */ .similar-items-section { margin-top: 80px; /* Espace avec la section du dessus */ } .similar-items-title { font-family: 'Circular', sans-serif; font-size: 26px; /* Taille du titre */ font-weight: 700; /* Gras */ color: #1D1D1F; /* Noir profond */ margin-bottom: 30px; /* Espace sous le titre */ text-align: left; /* Aligner à gauche si besoin */ } /* Optionnel : ajoute une ligne fine en dessous du titre */ .similar-items-title::after { content: ""; display: block; width: 50px; height: 3px; background-color: #4361EE; /* Bleu Composil */ margin-top: 10px; border-radius: 2px; } .similar-items-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .similar-items-grid .product-wrapper { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .similar-items-grid .product-img-availabilitytag { position: relative; aspect-ratio: 1 / 1 !important ;/* Format carré */ border-radius: 10px; overflow: hidden; background-color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.05); display: flex; align-items: stretch; flex: 1; /* Étend le conteneur image */ } .similar-items-grid .product-img-availabilitytag img { width: 100%; height: 100%; object-fit: cover; /* Remplit le carré sans déformer */ display: block; } .similar-items-grid .product-wrapper { display: flex; flex-direction: column; height: 100%; /* Forcer la hauteur pour étirer uniformément */ } .similar-items-grid .product-img-availabilitytag { flex-grow: 0; /* ⚠️ Désactive le flex:1 */ flex-shrink: 0; flex-basis: auto; height: auto; /* Permet au aspect-ratio de bien fonctionner */ } .similar-items-grid .product-img-availabilitytag img { width: 100%; height: 100%; object-fit: cover; } .last-cta-section { margin-top: 100px; padding: 20px 20px; background-color: #F2F2F2; border-radius: 20px; margin-left: auto; margin-right: auto; width: 100%; } .last-cta-container { display: flex; flex-direction: row; gap: 100px; align-items: center; justify-content: space-between; } .last-cta-text { flex: 1; font-family: 'Circular', sans-serif; margin-left: 20px; } .last-cta-title { font-size: 26px; font-weight: 700; margin-bottom: 20px; color: #1D1D1F; } .last-cta-description { font-size: 16px; font-weight: 400; color: #333; line-height: 1.6; margin-bottom: 25px; } .last-cta-image { flex: 1; } .last-cta-image img { width: 100%; border-radius: 15px; object-fit: cover; } /* Bouton foncé */ .cta-button.dark { background-color: #1D1D1F; color: white; font-family: 'Circular', sans-serif; font-size: 16px; font-weight: 500; padding: 10px 25px; border-radius: 100px; text-decoration: none; display: inline-block; transition: transform 0.3s ease, background 0.3s ease; } .cta-button.dark:hover { transform: scale(1.05); background-color: #333; } .cta-desktop { display: inline-block; } .cta-mobile { display: none !important; } .faq-section { background-color: #F2F2F2; font-family: 'Circular', sans-serif; padding: 50px 20px; width: 100%; margin-top: 70px; } .faq-container { /* 🔥 seule classe ajoutée */ max-width: 1400px; margin: 0 auto; } .faq-intro-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 40px; padding: 0 10px; /* Ajout léger pour respirer sur mobile */ } .faq-intro-text { flex: 1 1 500px; max-width: 650px; font-size: 18px; } .faq-intro-image img { width: 100%; max-width: 450px; height: auto; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .faq-title { font-size: 42px; font-weight: 700; margin-bottom: 20px; color: #262626; } .faq-icon { width: 40px; height: auto; display: block; margin-bottom: 20px; } .faq-lang-switch { display: flex; gap: 10px; margin-bottom: 30px; padding: 0 10px; } .lang-btn { background-color: #fff; color: #000; border: 1px solid #ccc; padding: 6px 12px; font-family: 'Circular', sans-serif; font-size: 15px; font-weight: 500; border-radius: 20px; cursor: pointer; transition: background-color 0.2s ease; } .lang-btn.active { background-color: #6B36DA; color: white; border-color: #CEF6FF; } .faq-item { border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px; position: relative; /* Important pour la position de l'icône */ } .faq-item:last-of-type { border-bottom: none; margin-bottom: 20px; padding-bottom: 0; } .faq-question { background: none; border: none; font-size: 20px; font-weight: 500; color: #000; cursor: pointer; width: 100%; text-align: left; padding: 20px 10px; transition: color 0.2s ease; position: relative; font-family: 'Circular', sans-serif; } .faq-toggle-icon { position: absolute; right: 15px; transition: transform 0.1s ease; font-size: 40px; color: #000; transform: rotate(90deg); /* Vers le bas par défaut */ } .faq-answer { display: none; padding: 20px 10px 10px; color: #333; line-height: 1.5; font-size: 16px; font-family: 'Circular', sans-serif; } .faq-item.active .faq-answer { display: block; } .faq-item.active .faq-toggle-icon { transform: rotate(-90deg); /* Vers le haut quand ouvert */ color: #000; } .faq-answer h3 { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ====== 0) WRAPPER ====== */ .admin-reservations { margin: 28px auto 40px; padding: 0 24px; } /* ====== 1) Titre = Toggle ====== */ .admin-reservations__title { margin: 0 0 10px; } /* Bouton-titre qui pilote l'ouverture/fermeture du panel */ .admin-reservations__title-btn { /* tes styles conservés */ display: flex; /* <- inline-flex -> flex pour pouvoir étirer en largeur */ align-items: center; justify-content: space-between;/* <- texte à gauche / toggle à droite */ gap: 10px; padding: 15px 25px; border-radius: 10px; border: 1px solid #E5E7EB; background: #F9FAFB; color: #111827; font: 600 20px/1.2 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; /* ajouts minimes pour le layout */ width: 100%; text-align: left; } /* le texte prend l’espace restant (tu as …) */ .admin-reservations__title-btn .title-text { flex: 1 1 auto; min-width: 0; } /* toggle sizing (inchangé) */ .res-toggle-icon { width: 44px; height: 24px; display:inline-block; } .toggle-svg { width: 100%; height: 100%; } /* themeable colors (inchangé) */ .admin-reservations__title-btn{ --toggle-on: #4361EE; --toggle-off: #E5E7EB; --knob-fill: #FFFFFF; --knob-ring: rgba(17,24,39,.12); } /* base (collapsed / aria-expanded="false") */ .toggle-svg .track{ fill: var(--toggle-off); stroke: var(--toggle-off); transition: fill .2s ease, stroke .2s ease, opacity .2s ease; } .toggle-svg .knob{ fill: var(--knob-fill); stroke: var(--knob-ring); stroke-width: 1; transform: translateX(0); transition: transform .22s cubic-bezier(.2,.8,.2,1), fill .2s ease, stroke .2s ease; filter: drop-shadow(0 1px 1px rgba(0,0,0,.08)); } /* expanded (ON) */ .admin-reservations__title-btn[aria-expanded="true"] .toggle-svg .track{ fill: var(--toggle-on); stroke: var(--toggle-on); } .admin-reservations__title-btn[aria-expanded="true"] .toggle-svg .knob{ transform: translateX(18px); } /* accessibilité */ @media (prefers-reduced-motion: reduce){ .toggle-svg .track, .toggle-svg .knob { transition: none !important; } } /* ====== 2) Panel repliable ====== */ .admin-reservations__panel { display: none; } .admin-reservations__panel.is-open { display: block; } /* ====== 3) Toolbar (search + rows) ====== */ /* Container de la toolbar : utilise flex pour séparer gauche/droite */ .admin-reservations__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; /* 🔽 Marges internes modifiables */ padding-top: 8px; /* <-- modifie ici le haut */ padding-bottom: 16px; /* <-- modifie ici le bas */ } /* Search */ .child-search__input, #child-search { padding: 10px 12px; border: 1px solid #4361EE; border-radius: 10px; min-width: 320px; font: 500 14px/1.2 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #111827; background: #fff; transition: box-shadow .2s ease, border-color .2s ease; } .child-search__input::placeholder, #child-search::placeholder { color: #9CA3AF; } .child-search__input:focus, #child-search:focus { outline: none; border-color: #4361EE; box-shadow: 0 0 0 3px rgba(67,97,238,.15); } /* Zone du compteur de lignes (alignée à droite) */ .admin-reservations__rows { font-family: 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 15px; /* <-- modifiable */ font-weight: 600; /* <-- modifiable */ line-height: 1.2; color: #6B7280; display: inline-flex; align-items: center; margin-left: auto; } /* Nombre en gras et plus foncé */ .admin-reservations__rows #child-count { font-weight: 800; color: #3A56D5; margin-right: 8px; font-size: 22px; /* <-- modifiable indépendamment si besoin */ } /* ====== 4) Table container & scroller (si tu utilises un max-height JS) ====== */ .admin-reservations__table-wrap{ background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.04); overflow: hidden; /* conserve arrondis + header sticky */ } .admin-reservations__table-wrap { overflow: hidden; } /* keep */ .admin-reservations__scroller{ overflow: auto; /* real scroller lives here */ scrollbar-gutter: stable; } .admin-reservations__scroller::-webkit-scrollbar{ height:10px; width:10px; } .admin-reservations__scroller::-webkit-scrollbar-thumb{ background:#E5E7EB; border-radius:999px; } .admin-reservations__scroller:hover::-webkit-scrollbar-thumb{ background:#D1D5DB; } /* ====== 5) Table (inchangé) ====== */ .reservations-table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 500 14px/1.35 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .reservations-table thead th { position: sticky; top: 0; z-index: 2; background: #F9FAFB; color: #374151; text-align: left; font-weight: 700; padding: 12px 14px; border-bottom: 1px solid #E5E7EB; } .reservations-table tbody td { padding: 12px 14px; border-bottom: 1px solid #F3F4F6; color: #111827; word-break: break-word; vertical-align: middle; } .reservations-table tbody tr:hover { background: #F9FAFB; } /* 5) COL WIDTHS (via ) */ #child-table col.col-name { width: 25%; } #child-table col.col-ref { width: 10%; } #child-table col.col-reserved { width: 9%; } #child-table col.col-owner { width: 14%; } #child-table col.col-status { width: 10%; } #child-table col.col-start { width: 10%; } #child-table col.col-end { width: 10%; } #child-table col.col-deal { width: 12%; } /* 6) CELLULE NAME + THUMBNAIL + BOUTON */ #child-table .res-cell-main{ --thumb-w: 72px; /* largeur de la vignette */ --thumb-gap: 14px; /* espacement vignette/texte */ display: flex; align-items: center; gap: var(--thumb-gap); } #child-table .res-thumb{ width: var(--thumb-w); height: 72px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #f3f4f6; } #child-table .td-name{ font-weight: 800; } #child-table .td-name .res-title{ display: block; } /* Bouton placé SOUS le nom et aligné au texte (pas sous la vignette) */ #child-table .td-name .res-btn.res-more{ display: inline-flex; margin-top: 10px; margin-left: calc(var(--thumb-w) + var(--thumb-gap)); font-weight: 600; } /* 7) ALIGNEMENTS GÉNÉRAUX */ #child-table td, #child-table th { text-align: left; } #child-table td:nth-child(6), #child-table td:nth-child(7) { white-space: nowrap; } /* 8) STATUS BADGE */ #child-table td:nth-child(5) .res-badge { background: #F3F4F6; color: #374151; border-color: #E5E7EB; } .status-badge{ --c:#10B981; --c-rgb:16,185,129; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; font: 600 12px/1 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #374151; background: #F9FAFB; border: 1px solid #E5E7EB; position: relative; animation: pill-breathe 3.2s ease-in-out infinite; } .status-badge::before{ content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--c); display: inline-block; animation: halo-pulse 1.8s ease-out infinite; } .status-badge.is-active{ --c:#10B981; --c-rgb:16,185,129; } .status-badge.is-expired{ --c:#EF4444; --c-rgb:239,68,68; } @keyframes halo-pulse{ 0%{ box-shadow:0 0 0 0 rgba(var(--c-rgb),.28); transform:scale(1);} 50%{ box-shadow:0 0 0 8px rgba(var(--c-rgb),0); transform:scale(1.06);} 100%{ box-shadow:0 0 0 0 rgba(var(--c-rgb),0); transform:scale(1);} } @keyframes pill-breathe{ 0%,100%{ transform:translateZ(0) scale(1);} 50%{ transform:translateZ(0) scale(1.01);} } @media (prefers-reduced-motion: reduce){ .status-badge,.status-badge::before{ animation: none !important; } } /* 9) DEAL LINK (+ icône à droite, recolorable) */ #child-table .deal-link{ display:inline-flex; align-items:center; gap:6px; color:#111827; font-weight:600; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px; transition: color .2s ease; } #child-table .deal-link::after{ content:""; width:16px; height:16px; opacity:.9; background-color: currentColor; -webkit-mask: url("https://26735166.fs1.hubspotusercontent-eu1.net/hubfs/26735166/external-link-svgrepo-com.svg") no-repeat center / contain; mask: url("https://26735166.fs1.hubspotusercontent-eu1.net/hubfs/26735166/external-link-svgrepo-com.svg") no-repeat center / contain; transition: transform .2s ease, opacity .2s ease, background-color .2s ease; } #child-table .deal-link:hover, #child-table .deal-link:focus-visible{ color:#0B5FFF; } #child-table .deal-link:hover::after, #child-table .deal-link:focus-visible::after{ opacity:1; transform: translateY(-1px); } /* 10) BUTTONS (générique + icône ) */ .res-btn{ padding: 10px 15px; border: 1px solid #E5E7EB; border-radius: 9px; background: #F3F4F6; color: #111827; font: 600 12px/1 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; } .res-btn.res-more{ display:inline-flex; align-items:center; gap:8px; position:relative; } .res-btn.res-more::after{ content:""; width:13px; height:13px; background-color:#6B7280; -webkit-mask: url("https://26735166.fs1.hubspotusercontent-eu1.net/hubfs/26735166/modal.svg") no-repeat center / contain; mask: url("https://26735166.fs1.hubspotusercontent-eu1.net/hubfs/26735166/modal.svg") no-repeat center / contain; transition: background-color .2s ease, transform .2s ease; } .res-btn.res-more:hover, .res-btn.res-more:focus-visible{ color:#0B5FFF; border-color:#D1D5DB; background:#F3F4F6; } .res-btn.res-more:hover::after, .res-btn.res-more:focus-visible::after{ background-color:#0B5FFF; transform: translateY(-1px); } /* 11) REF BADGE (N°) */ .ref-badge{ display:inline-block; padding:6px 10px; border-radius:8px; background:#CEF6FF; color:#000; font-weight:800; line-height:1; letter-spacing:.2px; white-space:nowrap; } /* 12) Indicateurs de tri modernes avec SVG */ .is-sortable { position: relative; cursor: pointer; user-select: none; padding-right: 20px; } .is-sortable::after { content: ''; position: absolute; top: 50%; right: 4px; width: 16px; height: 16px; transform: translateY(-50%) rotate(0deg); background-image: url('https://26735166.fs1.hubspotusercontent-eu1.net/hubfs/26735166/sort-vertical-svgrepo-com.svg'); background-size: contain; background-repeat: no-repeat; opacity: 0.5; transition: transform 0.2s ease, opacity 0.2s ease; } .is-sortable[data-order="asc"]::after { transform: translateY(-50%) rotate(0deg); /* Flèche foncée vers le haut */ opacity: 1; } .is-sortable[data-order="desc"]::after { transform: translateY(-50%) rotate(180deg); /* Flèche foncée vers le bas */ opacity: 1; } /* Bloc de style dédié à la case "Hide expired" */ .hide-expired-label { display: inline-flex; align-items: center; gap: 8px; margin-left: 1em; font-family: 'Circular', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: 14px; /* <-- modifiable */ font-weight: 500; /* <-- modifiable */ color: #111827; /* <-- modifiable */ cursor: pointer; user-select: none; } .hide-expired-label input[type="checkbox"] { appearance: none; width: 18px; height: 18px; border-radius: 4px; /* ✅ arrondi demandé */ border: 2px solid #9CA3AF; background-color: #fff; display: inline-block; position: relative; transition: all 0.15s ease; cursor: pointer; } .hide-expired-label input[type="checkbox"]:checked { background-color: #2563EB; /* bleu activé (modifiable) */ border-color: #2563EB; } .hide-expired-label input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 1px; left: 5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ========= 10) MODAL (Reservation) ========= */ /* Shell + backdrop */ .modalr{ --modalr-radius:8px; position:fixed; inset:0; z-index:9999; display:none; } .modalr.is-open{ display:block; } .modalr__backdrop{ position:absolute; inset:0; background:rgba(17,24,39,.52); } /* Dialog */ .modalr__dialog{ position:relative; z-index:1; max-width:1100px; width:calc(100% - 32px); margin:12vh auto; background:#fff; border-radius:16px; box-shadow:0 24px 72px rgba(0,0,0,.26); overflow:hidden; } /* Close button */ .modalr__close{ position:absolute; top:10px; right:12px; width:36px; height:36px; font-size:20px; cursor:pointer; border-radius:var(--modalr-radius); background:#fff; border:1px solid #E5E7EB; } .modalr__close:hover{ background:#F3F4F6; } /* Layout: image | info */ .modalr__body{ display:grid; grid-template-columns:400px 1fr; gap:0; } .modalr__media{ display:flex; align-items:center; justify-content:center; min-height:240px; padding:12px; } .modalr__media img{ width:100%; height:100%; object-fit:contain; display:block; border-radius: 12px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06); } .modalr__info{ padding:22px 24px; } .modalr__info h3{ margin:0 0 6px; font:800 20px/1.25 'Circular',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#111827; } /* Badge "Overview" */ .modalr-badge{ display:inline-block; margin:0 0 20px; padding:6px 12px; border-radius:8px; background:#F2F2F2; color:#374151; font:700 14px/1 'Circular',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; border: 1px solid #E5E7EB; } /* Metas */ .modalr__meta{ margin:5px 0; font:500 14px/1.3 'Circular',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#374151; } .modalr__meta .meta-label{ display:inline-block; min-width:200px; color:#6B7280; } /* CTA zone (en bas à droite, sans barre de footer) */ .modalr__actions{ display:flex; justify-content:flex-end; margin-top:18px; } /* CTA + icône external-link recolorable */ .modalr__cta{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; border:1px solid #E5E7EB; background:#fff; color:#111827; text-decoration:none; font:600 13px/1 'Circular',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; transition:color .2s ease,border-color .2s ease,background .2s ease; } .modalr__cta::after{ content:""; width:16px; height:16px; opacity:.9; background-color:currentColor; -webkit-mask:url("https://26735166.fs1.hubspotusercontent-eu1.net/hubfs/26735166/external-link-svgrepo-com.svg") no-repeat center/contain; mask:url("https://26735166.fs1.hubspotusercontent-eu1.net/hubfs/26735166/external-link-svgrepo-com.svg") no-repeat center/contain; transition:transform .2s ease,opacity .2s ease,background-color .2s ease; } .modalr__cta:hover, .modalr__cta:focus-visible{ color:#0B5FFF; border-color:#D1D5DB; background:#F3F4F6; } .modalr__cta:hover::after, .modalr__cta:focus-visible::after{ opacity:1; transform:translateY(-1px); } /* Equation (Real − Reserved = Virtual) */ .stock-eq{ display:flex; align-items:center; gap:10px; margin:30px 0 14px; font-weight:700; font-size: 14px; } .stock-eq .eq-op{ color:#9CA3AF; font-weight:800; } .eq-num{ padding:2px 8px; border-radius:8px; font-variant-numeric:tabular-nums; } .eq-real{ background:#F2F2F2; color:#374151; } /* indigo soft */ .eq-res { background:#FEF3C7; color:#92400E; } /* amber */ .eq-virt{ background:#DCFCE7; color:#065F46; } /* green */ /* Barre empilée */ .stock-bar{ height:15px; border-radius:999px; overflow:hidden; background:#12B981; margin-bottom: 8px; position:relative; max-width: 500px; border: 1px solid #E5E7EB; } .sb-res{ height:100%; background:#F59E0B; } /* amber */ .sb-virt{ height:100%; background:#10B981; } /* emerald */ .stock-legend{ display:flex; align-items:center; gap:16px; margin-bottom:0px; color:#6B7280; font:600 12px/1 'Circular',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; } .stock-legend .dot{ display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px; } .stock-legend .dot.res{ background:#F59E0B; } .stock-legend .dot.virt{ background:#10B981; } /* Cas limites (over-reserved) */ .stock-bar.is-over .sb-virt{ display:none; } .stock-bar.is-over::after{ content:"⚠️ Over-reserved ⚠️"; position:absolute; right:8px; top:50%; transform:translateY(-50%); color:#fff; font-weight:700; font-size:11px; } .sb-res.is-over{ background:#EF4444; } body.modalr-open{ overflow:hidden; } /* 11) OPTIONAL: COMPACT TABLE DENSITY */ .reservations-table.is-compact thead th, .reservations-table.is-compact tbody td { padding-top: 8px; padding-bottom: 8px; } .admin-reservations__empty { margin: 40px auto; text-align: center; font: 500 15px/1 'Circular', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #6B7280; opacity: 0.8; max-width: 480px; } .admin-reservations__empty p { margin: 0 0 8px 0; } @media screen and (max-width: 767px) { .catalogue-hero { background-color: #6B36DA; padding: 17px 0; /* padding vertical uniquement */ margin-bottom: 10px; width: 100vw; /* 100% de la largeur du device */ position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; border-radius: 0; /* ✅ plus de coins arrondis */ margin-top: 10px; } .hero-inner { display: flex; flex-direction: column; gap: 10px; padding: 0 17px; /* ✅ Référence centrale de l'alignement */ } .hero-title { color: white; line-height: 1.3; padding-bottom: 15px; } .title-bold { font-size: 22px; font-weight: 700; padding-bottom: 10px; } .title-regular { font-size: 14px; font-weight: 400; } .faq-anchor-button { display: inline-block; margin-left: 0 !important; /* force le bord gauche */ margin-right: auto !important; /* empêche le centrage */ margin-bottom: 30px; margin-top: 10px; padding: 12px 20px; font-size: 14px; border-radius: 30px; font-weight: 500; background-color: #CEF6FF; color: #000000; text-decoration: none; white-space: nowrap; transition: transform 0.1s ease, background-color 0.3s ease; } .faq-anchor-button:hover, .faq-anchor-button:focus { transform: scale(1.05); background-color: #CEF6FF; color: #000000; } /* Wrapper du slider horizontal */ .hero-benefit-wrapper { overflow-x: auto; padding: 0; /* ❌ Enlève tout le padding ici */ margin: 10px; scroll-padding-left: 20px; /* ✅ Snap correct pour la première carte */ scroll-padding-right: 20px; /* ✅ Snap correct pour la dernière */ } /* Slider horizontal */ .hero-benefit-slider { display: flex; gap: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 5px; } /* Cartes de bénéfices */ .benefit-card { flex: 0 0 80%; min-width: 80%; background-color: white; border-radius: 10px; padding: 12px; scroll-snap-align: start; color: #000; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); display: flex; align-items: center; gap: 12px; } .benefit-icon { height: 25px; width: auto; flex-shrink: 0; } .benefit-text { font-size: 12px; font-weight: 500; line-height: 1.3; } .search-input { font-size: 16px !important; /* évite le zoom mobile */ } /* === UNIFIE LE STYLE DU CHECKMARK SUR MOBILE === */ .filter-brand-item.active .brand-checkbox::before, .filter-condition-item.active .condition-checkbox::before, .filter-underlay-item.active .underlay-checkbox::before, .filter-soundinsulation-item.active .soundinsulation-checkbox::before, .filter-absorption-item.active .absorption-checkbox::before, .sort-option input[type="radio"]:checked::before { content: '✔'; position: absolute; top: -5px; left: 0px; font-size: 15px; color: #4361EE; text-shadow: 0 0 0 #4361EE; } .catalogue-wrapper-product, .product-gallery, .product-main-image, .similar-items-grid { width: 100% !important; max-width: 100% !important; box-sizing: border-box; overflow-x: hidden; } .breadcrumb { font-family: 'Circular', sans-serif; font-size: 14px; color: #666; margin-bottom: 10px; margin-top: 20px; } .product-info-panel { width: 100%; max-width: 100%; box-sizing: border-box; } .catalogue-wrapper { padding: 20px 15px; } .catalogue-wrapper-product { padding: 20px 15px; } .catalogue-layout { flex-direction: column; gap: 30px; } .filters { width: 100%; position: static; } .product-list-wrapper { width: 100%; } .product-count-summary { display: flex; flex-direction: column; align-items: flex-end; /* ✅ Aligne le contenu à droite */ gap: 4px; text-align: right; } .product-count-summary span { line-height: 1; font-weight: 400; font-size: 14px; color: #262626; /* ✅ Couleur de police */ display: block; text-align: right;e } .product-list { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; /* ⬇️ 30px vertical, ➡️ 20px horizontal */ } .availability-tag { font-size: 12px; padding: 4px 10px; border-radius: 6px; font-weight: 500; } /* ================================ BADGE QUALITÉ — BAS GAUCHE ================================ */ .product-quality-badge { display: none; } .product-quality-badge.reuse-condition { display: none; } /* ================================ BADGE PRIX — BAS DROITE ================================ */ .product-price-badge { position: absolute; bottom: 10px; right: 10px; padding: 4px 10px; border-radius: 6px; background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); font-family: 'Circular', sans-serif; font-size: 12px; font-weight: 500; color: #1D1D1F; z-index: 2; } .brand-name { font-size: 11px; font-weight: 400; margin-top: -5px; } .ref-number { font-size: 11px; font-weight: 400; margin-top: -9px; } .product-name { font-size: 13px; line-height: 1.25; margin-top: 7px; } .product-quantity { font-size: 13px; line-height: 1.3; margin-top: 5px; } .product-meta { margin-bottom: 2px; margin-top: 0; } .filters { display: none; } .mobile-filters-header, .mobile-filters-toggle { display: flex; } .mobile-filters-panel { display: block; } .mobile-filters-header { display: flex; justify-content: flex-end; margin-left: auto; margin-bottom: 0px; max-width: 100%; padding-right: 0; /* supprime le padding qui fausse l’alignement */ padding-left: 0; } .mobile-filters-toggle { display: flex; align-items: center; gap: 8px; font-family: 'Circular', sans-serif; font-size: 12px; font-weight: 500; background-color: #F2F2F2; border: 1px solid #E0E0E0; border-radius: 10px; padding: 10px 15px; color: #1D1D1F; cursor: pointer; margin-left: 10px; } .mobile-filters-toggle:hover { transform: scale(1.10); /* 👈 Effet de zoom au survol */ } .mobile-filters-panel { position: fixed; top: 0; right: -100%; width: 90%; max-width: 400px; height: 100%; background: #F9F9F9; transition: right 0.3s ease-in-out; z-index: 1000; padding: 20px; overflow-y: auto; } .mobile-filters-panel.open { right: 0; } .close-filters-btn { display: flex; align-items: center; gap: 8px; background-color: #F2F2F2; border: 1px solid #E0E0E0; border-radius: 10px; padding: 10px 15px; font-family: 'Circular', sans-serif; font-size: 15px; font-weight: 500; color: #1D1D1F; cursor: pointer; max-width: fit-content; /* ⚠️ Clé magique ici */ margin-left: auto; /* pousse la croix complètement à droite */ } .clear-filters-btn-mobile { display: flex; align-items: center; background-color: #ffffff; border: 1px solid red; border-radius: 10px; padding: 8px 8px; /* Reviens à quelque chose de raisonnable */ font-family: 'Circular', sans-serif; font-size: 12px; font-weight: 500; color: red; cursor: pointer; max-width: fit-content; /* ⚠️ Clé magique ici */ transition: transform 0.3s ease, opacity 0.3s ease; /* 👈 Ajout ici */ } .clear-filters-btn-mobile:hover { transform: scale(1.10); } .close-filters-btn .close-icon { font-size: 18px; line-height: 1; } .filters-icon-mobile { width: 16px; height: 16px; display: inline-block; transform: rotate(90deg); /* Ajout de la rotation */ } /* Pour le bouton au-dessus des produits */ .catalogue-wrapper > .mobile-filters-header { display: flex; justify-content: flex-end; padding: 0 15px; margin-bottom: 20px; } /* Pour l’en-tête dans le panneau latéral uniquement*/ .mobile-filters-panel .mobile-filters-header { display: flex; justify-content: space-between; align-items: center; padding: 0; /* Enlève le padding pour l'alignement */ margin-bottom: 25px; margin-top: 10px; } /* =========================== Stock cards MOBILE — GLASS EFFECT =========================== */ .product-stock-cards { display: grid; grid-template-columns: 1fr 1fr; /* 2 cards sur la 1ère ligne */ grid-template-rows: auto auto; gap: 6px; width: 100%; } /* Available = 100% width sur 2e ligne */ .stock-available { grid-column: span 2; } .stock-card { flex: 1 1 0; min-width: 0; padding: 5px 10px; border-radius: 8px; /* 💎 Glass-style visible même sur fond blanc */ background: linear-gradient( 135deg, rgba(255, 255, 255, 0.90), rgba(248, 250, 252, 0.75) ); border: 1px solid rgba(148, 163, 184, 0.55); /* gris clair */ /* ↓ Ombre adoucie ici ↓ */ box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); /* on garde un peu de blur pour les zones plus sombres (vignettes, etc.) */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } /* Labels */ .stock-label { font-family: 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; opacity: .9; } /* Valeurs */ .stock-value { font-family: 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.2; } /* Couleurs = uniquement le texte */ .stock-real .stock-label, .stock-real .stock-value { color: #227A25; /* vert dispo réel */ } .stock-reserved .stock-label, .stock-reserved .stock-value { color: #856404; /* amber "sous option" */ } .stock-available .stock-label, .stock-available .stock-value { color: #4361EE; /* bleu "available" */ } /* Si aucune réservation → carte adoucie */ .stock-reserved.is-empty { opacity: 0.45; } /* début layout page enfant !! */ .product-detail-container { flex-direction: column; align-items: center; gap: 30px; } .product-gallery { display: flex; flex-direction: column; align-items: center; width: 100%; margin-right: 10px; margin-left: 10px; } /* Image principale en haut, carrée */ .product-main-image { order: 1; width: 300px; aspect-ratio: 1 / 1; /* ⚠️ Restaure le ratio carré */ border-radius: 10px; position: relative; margin-bottom: 0px; } .product-main-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0px; display: block; } /* Miniatures en dessous */ .product-thumbnails { order: 2; display: flex; flex-direction: row; overflow-x: auto; gap: 10px; padding-top: 0; margin-top: -10px; width: 100%; justify-content: flex-start; scroll-snap-type: x mandatory; } .product-thumbnails img { width: 60px !important; height: 60px !important; object-fit: cover; border-radius: 8px; border: 1px solid #ccc; flex-shrink: 0; display: block !important; scroll-snap-align: start; } /* Nettoie les balises parasites autour des thumbnails */ .product-thumbnails > * { all: unset; display: contents !important; } /* NAVIGATION DANS L’OVERLAY */ .overlay-nav { position: fixed; /* Changement important */ bottom: 20px; /* Positionne les flèches en bas */ top: auto; /* Neutralise le top */ transform: none; /* Supprime translateY */ background: rgba(255, 255, 255, 0.8); border: none; width: 45px; height: 45px; cursor: pointer; z-index: 10000; border-radius: 100%; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, transform 0.3s ease; padding: 0; } /* Positionnement horizontal précis */ #prev-image { left: 20px; right: auto; } #next-image { right: 20px; left: auto; } #close-overlay { font-size: 40px; } .product-title { font-size: 28px; } .product-ref { font-size: 14px; } .admin-internal-bar { padding: 20px; border-width: 2px; font-size: 14px; overflow-wrap: break-word; word-break: break-word; } .admin-internal-bar-inner { width: 100%; max-width: 100%; overflow-x: auto; } .admin-internal-bar h2 { font-size: 22px; } .admin-info-row { font-size: 13px; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; } .admin-comments { font-size: 13px; padding: 12px; } /* Le wrapper qui contient le tag + les stock cards */ .product-stock-wrapper-single { display: flex; flex-direction: column; align-items: flex-start; /* ou stretch si tu veux full width */ gap: 10px; } /* === Single card === */ .stock-card-single { min-width: 115px; padding: 6px 12px; } /* Le tag de dispo en premier */ .product-stock-wrapper-single .availability-tag-single { order: 1; } /* Le bloc des 3 cartes juste en dessous */ .product-stock-wrapper-single .product-stock-cards-single { order: 2; width: 100%; } /* === Labels === */ .stock-label-single { font-family: 'Circular', system-ui, sans-serif; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; opacity: .85; margin-bottom: 1px; } /* === Values === */ .stock-value-single { font-family: 'Circular', system-ui, sans-serif; font-size: 16px; font-weight: 700; } .product-accordions { padding-right: 10px; /* pour scroll visible */ max-height: none; overflow-y: visible; padding-right: 0; } .similar-items-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .last-cta-section { margin-top: 60px; margin-bottom: 0px; width: auto; } .last-cta-container { flex-direction: column; gap: 30px; align-items: flex-start; } .last-cta-text { margin-left: 0; width: 100%; } .last-cta-title { font-size: 24px; line-height: 1.3; } .last-cta-description { font-size: 15px; line-height: 1.5; margin-bottom: 40px; } .last-cta-image { width: 100%; margin-top: 10px; } .last-cta-image img { width: 100%; height: auto; border-radius: 10px; } .cta-desktop { display: none !important; } .cta-mobile { display: inline !important; } .quote-cta-inline--horizontal { flex-direction: column; align-items: center; /* Centrage horizontal du contenu */ gap: 5px; text-align: center; /* S’assure que tout le contenu est centré */ width: 100%; margin-top: 50px; margin-bottom: 20px; } .quote-cta-inline--horizontal .quote-cta-text { text-align: center; width: 100%; } .quote-cta-inline--horizontal .quote-cta-button { width: auto; /* ou 100% si tu veux un bouton pleine largeur */ text-align: center; padding: 12px 100px; } .tooltip-content { display: none; position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 90vw !important; max-width: 97vw !important; min-width: 0 !important; border-radius: 14px !important; border: none !important; border-top: 3.5px solid #4361EE !important; box-shadow: 0 12px 32px rgba(67,97,238,0.16), 0 1.5px 4px rgba(0,0,0,0.09); z-index: 99999 !important; background: #F2F2F2 !important; color: #222 !important; padding: 22px 18px 18px 18px !important; font-size: 1em !important; text-align: left !important; } .info-tooltip-wrapper:hover .tooltip-content, .info-icon:focus + .tooltip-content { display: block !important; } .faq-section { background-color: #F2F2F2; font-family: 'Circular', sans-serif; padding: 45px 20px; width: 100%; margin-top: 70px; margin-bottom: 20px; } .faq-intro-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0px; margin-bottom: 20px; padding: 0 0px; /* Ajout léger pour respirer sur mobile */ } .faq-intro-text { flex: 1 1 500px; font-size: 18px; } .faq-intro-image img { width: 100%; max-width: 450px; height: auto; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); margin-top: 10px; margin-bottom: 30px; } .faq-title { font-size: 24px; font-weight: 700; margin-bottom: 20px; color: #262626; } .faq-icon { width: 30px; height: auto; display: block; margin-bottom: 15px; } .faq-lang-switch { display: flex; gap: 10px; margin-bottom: 30px; padding: 0 0px; } .lang-btn { background-color: #fff; color: #000; border: 1px solid #ccc; padding: 6px 12px; font-family: 'Circular', sans-serif; font-size: 15px; font-weight: 500; border-radius: 20px; cursor: pointer; transition: background-color 0.2s ease; } .lang-btn.active { background-color: #6B36DA; color: white; border-color: #CEF6FF; } .faq-item { border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px; position: relative; /* Important pour la position de l'icône */ } .faq-item:last-of-type { border-bottom: none; margin-bottom: -20px; padding-bottom: 0; } .faq-question { background: none; border: none; font-size: 18px; font-weight: 500; color: #000; cursor: pointer; width: 85%; text-align: left; padding: 20px 0px; transition: color 0.2s ease; position: relative; font-family: 'Circular', sans-serif; } .faq-toggle-icon { position: absolute; right: 0px; transition: transform 0.1s ease; font-size: 30px; color: #000; transform: rotate(90deg); /* Vers le bas par défaut */ top: 10px; } .faq-answer { display: none; padding: 20px 10px 10px; color: #333; line-height: 1.5; font-size: 16px; font-family: 'Circular', sans-serif; } .faq-item.active .faq-answer { display: block; } .faq-item.active .faq-toggle-icon { transform: rotate(-90deg); /* Vers le haut quand ouvert */ color: #000; } .faq-answer h3 { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ——— Modal (variables + dimensions) ——— */ .quote-cart-modal{ /* vars */ --ct-thumb: 85px; --ct-gap: 12px; --close-box: 40px; --close-icon: 40px; /* dimensions */ width: 95% !important; max-width: none; margin: 0 auto; border-radius: 12px; padding: 22px 22px 18px; /* ✅ remet 22px de chaque côté */ overflow: hidden; /* ✅ NE SCROLLE PLUS ICI */ box-sizing: border-box; max-height: 90vh; } @supports (height: 1dvh){ .quote-cart-modal{ max-height: 90dvh; } /* mesure + fiable sur iOS récents */ } #hs-form-step, #quote-step-form, #hs-form-container { padding-right: 20px; /* espace pour la barre iOS */ margin-right: -20px; /* compense pour ne pas rétrécir le contenu */ flex: 1 1 auto; min-height: 0; /* 🔑 sans ça, pas de scroll dans un parent flex */ overflow: auto; /* la barre de scroll est ici */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .quote-cart-items{ padding-right: 20px; /* espace pour la barre iOS */ margin-right: -20px; /* compense pour ne pas rétrécir le contenu */ } /* ——— Titre + croix parfaitement centrée ——— */ .quote-cart-modal h2{ font-size: 20px; display: flex; align-items: center; margin: 0 56px 10px 0; /* réserve l’espace de la croix à droite */ } #close-quote-cart, .close-cart-btn{ position: absolute; top: 12px; right: 12px; width: var(--close-box) !important; height: var(--close-box) !important; border: 0; border-radius: 12px; background: #f3f4f6; display: grid !important; place-items: center !important; /* centrage pixel-perfect */ line-height: 1; font-size: var(--close-icon) !important; /* si l’icône est un caractère ✕ */ } #close-quote-cart svg, .close-cart-btn svg{ width: var(--close-icon) !important; /* si l’icône est un SVG */ height: var(--close-icon) !important; } /* ——— Pile verticale + largeur totale ——— */ .cart-table{ display:block; width:100%; border-collapse:collapse; } .cart-table thead{ display:none !important; } /* neutralise les largeurs desktop (y compris nth-child) */ .cart-table thead th, .cart-table tbody td, .cart-table thead th:nth-child(1), .cart-table tbody td:nth-child(1), .cart-table thead th:nth-child(2), .cart-table tbody td:nth-child(2), .cart-table thead th:nth-child(3), .cart-table tbody td:nth-child(3){ width:100% !important; } /* chaque ligne = une pile, 1 seul séparateur */ .cart-table tr{ display:flex; flex-direction:column; padding:12px 0 30px; border-bottom:1px solid #eee; } .cart-table tr:last-child{ border-bottom:0; } .cart-table tbody td{ border-bottom:0 !important; padding:0 !important; } /* un trait avant le footer (Total/Next) */ .quote-cart-footer{ border-top:1px solid #eee !important; padding-top:12px; } /* ——— Bloc “Name” ——— */ .ct-cell-main{ display:flex; align-items:flex-start; gap: var(--ct-gap); /* ← aligne sur la variable d’espacement */ min-width:0; order:1; } .ct-thumb{ width: var(--ct-thumb) !important; height: var(--ct-thumb) !important; flex: 0 0 var(--ct-thumb) !important; /* évite le 56px figé */ border-radius: 8px; object-fit: cover; display: block; } .ct-title{ font-size:10px; font-weight:700; margin-bottom: 3px; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; } .ct-sub{ display:block; font-size:13px; color:#777; margin-top:2px; } /* ——— Référence (AU-DESSUS du name, alignée sur la colonne texte) ——— */ /* indent = largeur vignette + gap */ .ct-ref{ order:0; display:block !important; font-size:11px; font-weight:600; color:#6b7280; margin: 8px 0 10px; padding-left: calc(var(--ct-thumb) + var(--ct-gap)); /* aligne avec le texte */ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; } /* ——— Quantité ——— */ .ct-qty{ order:2; text-align:left; margin-top:0; } .ct-qtyctrl{ display:flex; align-items:center; gap:6px; margin-top:20px; } .ct-qtyctrl .cart-qty-input{ width:56px; text-align:center; font-size:16px; } /* ===== Floating cart : taille + masquage quand overlay ouvert ===== */ #quote-cart-button, .quote-cart-button{ width:68px !important; height:68px !important; right:12px !important; bottom:12px !important; } body.cart-open #quote-cart-button, body.cart-open .quote-cart-button{ display:none !important; } /* fallback :has() */ body:has(#quote-cart-overlay:not([hidden])) #quote-cart-button, body:has(#quote-cart-overlay:not([hidden])) .quote-cart-button{ display:none !important; } /* iOS: empêcher le zoom auto des inputs (<16px) */ @supports (-webkit-touch-callout: none) { /* champs quantité (fiche + overlay) */ .qty-input, .cart-qty-input, input[type="text"], input[type="number"], select, textarea { font-size: 16px !important; } /* boutons d’action ( + / – / × / close ) */ .qty-btn, .cart-qty-dec, .cart-qty-inc, .cart-remove, #close-quote-cart, .close-cart-btn, .quote-cta-inline--horizontal.v3 .quote-cta-button { font-size: 16px !important; } } /* Empêcher le double-tap zoom sur les boutons (iOS 13+) */ .qty-btn, .cart-qty-dec, .cart-qty-inc, .cart-remove, #close-quote-cart, .close-cart-btn, .quote-cta-inline--horizontal.v3 .quote-cta-button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; } /* (Optionnel mais recommandé) cibles tactiles confortables */ @supports (-webkit-touch-callout: none) { .qty-btn, .cart-qty-dec, .cart-qty-inc, .cart-remove { min-width: 40px; height: 40px; } .qty-input, .cart-qty-input { height: 40px; line-height: 40px; } } /* Petit rappel utile pour Safari */ html { -webkit-text-size-adjust: 100%; } /* Close icon: big ×, independent from the 16px anti-zoom rule */ .quote-cart-modal { --close-icon-size: 22px; } /* tweak this value */ #close-quote-cart, .close-cart-btn{ /* keep your existing styles… */ position: absolute; top: 12px; right: 12px; /* ensure square tap target (yours already works) */ /* width/height you already set will still apply */ /* keep anti-zoom font-size (from your iOS block), but hide the native × */ color: transparent; /* visually hide the text node */ } /* draw a scalable × on top, perfectly centered */ #close-quote-cart::after, .close-cart-btn::after{ content: "×"; position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--close-icon-size); line-height: 1; color: #111827; /* icon color */ } /* If you ever switch to an SVG inside the button, size it too */ #close-quote-cart svg, .close-cart-btn svg{ width: var(--close-icon-size); height: var(--close-icon-size); } } /* ——— CONCERNE TOUS LES APPAREILS !!!!!!!!!!!!! ——— */ /* ——— Barre bleue sous "Your quote cart" (même style que "You might also like") ——— */ :root{ --cart-title-underline-w: 50px; /* largeur de la barre */ --cart-title-underline-h: 3px; /* épaisseur de la barre */ --brand-blue: #4361EE; /* bleu site */ } /* On force le titre du modal à se comporter comme un bloc de la largeur du texte, pour que la barre fasse juste un petit trait à gauche, comme sur "You might also like". */ #quote-cart-title{ display: inline-block; /* <- important sur mobile: écrase le display:flex appliqué au h2 */ padding-bottom: 0; /* pas d’underline intégré */ margin-bottom: 2px; /* petit espace avant la barre */ } /* La barre bleue sous le titre */ #quote-cart-title::after{ content: ""; display: block; width: var(--cart-title-underline-w); height: var(--cart-title-underline-h); background-color: var(--brand-blue); margin-top: 10px; /* même espacement que "You might also like" */ border-radius: 2px; } /* ——— Barre bleue sous "Your quote cart" — global (mobile + desktop) ——— */ :root{ --cart-title-underline-w: 50px; /* largeur de la barre */ --cart-title-underline-h: 3px; /* épaisseur */ --brand-blue: #4361EE; } #quote-cart-title{ display: inline-block; /* force un flux vertical pour accueillir la barre */ margin-bottom: 2px; } #quote-cart-title::after{ content: ""; display: block; width: var(--cart-title-underline-w); height: var(--cart-title-underline-h); background-color: var(--brand-blue); margin-top: 10px; border-radius: 2px; } /* ===== Quantity feedback — shake + strike (lift piloté par variables) ===== */ /* 1) Variables globales */ :root{ --qty-anim-dur: 1500ms; /* durée globale */ --qty-ghost-lift: 32px; /* ↑ LIFT du fantôme (mets 160px si tu veux) */ --qty-over-lift: var(--qty-ghost-lift); /* ↑ même lift pour le fallback CSS */ --qty-ghost-dur: var(--qty-anim-dur); /* alias durée fantôme */ --qty-bonk-dur: calc(var(--qty-anim-dur) * .35); /* shake input */ } /* Option : sur l’input seulement (prioritaire sur :root) */ [data-product-block] [data-qty-input]{ --qty-ghost-lift: 32px; /* ← mets 160px ici pour ce champ précis */ --qty-over-lift: var(--qty-ghost-lift); font-size: 16px; line-height: 1.2; min-height: 34px; box-sizing: border-box; vertical-align: middle; } /* 2) Shake input */ @keyframes qtyShake{ 0%{transform:translateX(0)} 25%{transform:translateX(-2px)} 50%{transform:translateX(2px)} 75%{transform:translateX(-1px)} 100%{transform:translateX(0)} } /* 3) Fallback CSS : barre rouge barrée qui “monte” d’un lift configurable */ @keyframes qtyOver{ 0% { background-size: 0% 2px; opacity: 0; background-position: center 50%; } 30% { background-size: 100% 2px; opacity: 1; background-position: center calc(50% - var(--qty-over-lift)); } 100% { background-size: 100% 2px; opacity: 0; background-position: center calc(50% - var(--qty-over-lift)); } } .qty-over{ background-image: linear-gradient(#E11D48, #E11D48); background-repeat: no-repeat; background-position: center 50%; background-size: 0% 2px; animation: qtyOver var(--qty-anim-dur, 3800ms) ease forwards !important; /* ←←← LIGNE QUI RÈGLE LA DURÉE DU TEXTE ROUGE BARRÉ */ } /* 4) Application du shake */ [data-product-block] [data-qty-input].qty-shake, .cart-qty-input.qty-shake, .product-list .product-wrapper .quickadd .qa-qty.qty-shake{ animation: qtyShake var(--qty-bonk-dur, .38s) ease; } /* 5) Nettoyage visuel */ [data-product-block] [data-qty-input].clamped:not(.qty-over), .cart-qty-input.clamped:not(.qty-over), .product-list .product-wrapper .quickadd .qa-qty.clamped:not(.qty-over){ animation: none !important; box-shadow: none !important; } /* 6) Accessibilité */ @media (prefers-reduced-motion: reduce){ [data-product-block] [data-qty-input].qty-shake, .cart-qty-input.qty-shake, .product-list .product-wrapper .quickadd .qa-qty.qty-shake, .qty-over{ animation-duration: calc(var(--qty-anim-dur, 380ms) * .5) !important; } } /* ÉTAT FINAL : message de remerciement HubSpot - le modal se rétrécit à la taille du contenu - plus de "Previous" visible - plus de scroll inutile dans le conteneur de formulaire */ .quote-cart-modal.is-complete { height: auto !important; max-height: 90vh !important; /* safe mobile */ } @supports (height: 1dvh) { .quote-cart-modal.is-complete { max-height: 90dvh !important; } } /* Quand on est en état final, on annule TOUTE hauteur forcée par HubSpot */ .quote-cart-modal.is-complete #hs-form-step, .quote-cart-modal.is-complete #quote-step-form, .quote-cart-modal.is-complete #hs-form-container, .quote-cart-modal.is-complete .hs-form-iframe, .quote-cart-modal.is-complete .hbspt-form, .quote-cart-modal.is-complete iframe { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; flex: 0 0 auto !important; } .quote-cart-modal.is-complete .hs-back-btn { display: none !important; /* cache le "Previous" */ } /* Un peu d’air pour le message HubSpot */ .hs-form .submitted-message, .hs-form-iframe .submitted-message { margin: 6px 0 2px !important; } /* ============================= */ /* 🔽 MOBILE ADAPTATION ZONE */ /* ============================= */ @media screen and (max-width: 768px) { /* 1. Table devient affichage cartes verticales (responsive UX) */ .admin-reservations__table-wrap { overflow-x: visible; } .reservations-table, .reservations-table thead, .reservations-table tbody, .reservations-table tr, .reservations-table td, .reservations-table th { display: block; width: 100%; } /* Supprime le "trait" final sur la dernière cellule d'une carte */ .reservations-table tr td:last-child { border-bottom: none !important; } .reservations-table thead { display: none; } .reservations-table tr { background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 12px; margin-bottom: 16px; } .reservations-table td { padding: 6px 0; border: none; } /* ✅ Supprime bordures résiduelles structurelles */ .reservations-table, .reservations-table tbody { border: none !important; background: transparent !important; box-shadow: none !important; } .reservations-table td.td-name { font-size: 16px; font-weight: 800; } .res-cell-main { flex-direction: column; align-items: flex-start; gap: 8px; } .res-cell-main .res-title { font-size: 16px; font-weight: 800; } .ref-badge, .status-badge, .deal-link { margin-top: 6px; display: inline-block; } /* 🔁 STATUS BADGE MOBILE (copié/ajusté) */ .status-badge { --c: #10B981; --c-rgb: 16,185,129; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; font: 600 12px/1 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #374151; background: #F9FAFB; border: 1px solid #E5E7EB; position: relative; /* Ajout animation respiration */ animation: pill-breathe 3.2s ease-in-out infinite; } .status-badge::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--c); display: inline-block; /* Ajout animation halo */ animation: halo-pulse 1.8s ease-out infinite; } .status-badge.is-active { --c: #10B981; --c-rgb: 16,185,129; } .status-badge.is-expired { --c: #EF4444; --c-rgb: 239,68,68; } .reservations-table .td-name .res-btn.res-more { display: block; margin: 12px auto 0 auto; text-align: center !important; } .reservations-table td:not(.td-name)::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 600; color: #6B7280; margin-bottom: 2px; } .reservations-table td[data-q] { font-weight: 600; } /* 2. Input + checkbox passent à la ligne */ .admin-reservations__toolbar { flex-direction: column; align-items: stretch; gap: 8px; } .child-search__input, #child-search { width: 100%; min-width: 0; font-size: 16px; } .hide-expired-label { margin-left: 0; } /* 3. Counter centré */ .admin-reservations__rows { justify-content: center; margin-left: 0; margin-top: 6px; } /* 4. Empile la modale verticalement et rend scrollable */ .modalr__body { display: flex; flex-direction: column; grid-template-columns: 1fr; /* garde pour compatibilité */ } .modalr__media { height: 150px; overflow: hidden; display: flex; align-items: left; justify-content: left; } .modalr__media img { height: 100%; width: auto; max-width: 100%; object-fit: cover; border-radius: 12px; } .modalr__info { padding: 20px 18px 28px; } .modalr__meta .meta-label { min-width: auto; display: block; margin-bottom: 2px; } /* ✅ COULEURS ET STYLE DE L'ÉQUATION (DESKTOP + MOBILE) */ .stock-eq { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 30px 0 14px; font-weight: 700; font-size: 14px; flex-wrap: wrap; } .stock-eq .eq-op { color: #9CA3AF; font-weight: 800; font-size: 16px; } .eq-num { padding: 6px 12px; border-radius: 8px; font-variant-numeric: tabular-nums; background: #F3F4F6; color: #111827; font-size: 14px; font-weight: 700; } .eq-real { background: #F2F2F2; color: #374151; } /* indigo soft */ .eq-res { background: #FEF3C7; color: #92400E; } /* amber */ .eq-virt { background: #DCFCE7; color: #065F46; } /* green */ /* ✅ BARRE COLORÉE (DESKTOP + MOBILE) */ .stock-bar { height: 15px; border-radius: 999px; overflow: hidden; background: #12B981; margin-bottom: 8px; position: relative; max-width: 100%; border: 1px solid #E5E7EB; } .sb-res { height: 100%; background: #F59E0B; } /* amber */ .sb-virt { height: 100%; background: #10B981; } /* emerald */ .stock-legend { display: flex; align-items: center; gap: 16px; margin-bottom: 0; color: #6B7280; font: 600 12px/1 'Circular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .stock-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 6px; } .stock-legend .dot.res { background: #F59E0B; } .stock-legend .dot.virt { background: #10B981; } /* Cas limites (over-reserved) */ .stock-bar.is-over .sb-virt { display: none; } .stock-bar.is-over::after { content: "⚠️ Over-reserved ⚠️"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #fff; font-weight: 700; font-size: 11px; } .sb-res.is-over { background: #EF4444; } /* ✅ CORRECTION SCROLL + ALIGNEMENT CENTRÉ MOBILE AVEC PLUS DE MARGE */ .modalr { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.3); display: none; align-items: center; justify-content: center; padding: 8vh 0; /* ⬅️ marges haut/bas augmentées */ } .modalr.is-open { display: flex; } .modalr__dialog { width: 90%; max-width: 640px; max-height: 84vh; /* ⬅️ réduit un peu pour s’adapter au nouveau padding */ overflow-y: auto; display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } body.modalr-open { overflow: hidden; position: fixed; width: 100%; } }