À découvrir chez VELEOS

Services premium, conseils d’experts et avantages exclusifs.

Détaxe vélo hors Union Européenne
Clients hors UE

Ventes hors taxes & dispositif PABLO

Découvrez comment bénéficier de la détaxe sur l’achat de votre vélo via la procédure officielle PABLO.

Voir les conditions
Assurance vélo VELEOS
Sécurité

Assurer correctement votre vélo

Protection contre le vol, la casse et les dommages. Analyse complète des meilleures garanties.

Voir l’étude
Essayer un vélo chez VELEOS
Essai gratuit

Testez votre futur vélo

Essayez votre futur vélo en conditions réelles, avec réglages personnalisés pour votre confort.

Réserver un essai
Vol de vélo - Remise VELEOS
Offre spéciale

Vol de vélo : -15% sur un nouveau vélo

Victime d’un vol ? Profitez d’une remise immédiate et repartez rapidement avec un vélo fiable.

Découvrir l’offre
/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-48c08588 *//* ========================================================= VELEOS — BOUTON GUIDE DES TAILLES Style premium / Rajdhani / pill ========================================================= */ .veleos-guide-btn{ --v-blue: var(--vz-blue); --v-orange: var(--vz-orange); display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:14px 26px; border-radius:999px; font-family:'Rajdhani', ui-sans-serif, system-ui !important; font-size:15px; font-weight:950; letter-spacing:.2px; text-transform:uppercase; text-decoration:none !important; line-height:1; background:#fff; color:rgba(11,95,255,.98) !important; border:2px solid rgba(11,95,255,.25); box-shadow:0 12px 26px rgba(2,6,23,.08); cursor:pointer; user-select:none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease; } /* Icône SVG */ .veleos-guide-btn svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 8px 14px rgba(2,6,23,.12)); } /* Flèche */ .veleos-guide-btn .veleos-cta6-arrow{ font-weight:950; opacity:.9; transform:translateX(0); transition:transform .15s ease, opacity .15s ease; } /* Hover */ @media(hover:hover){ .veleos-guide-btn:hover{ transform:translateY(-1px); border-color:rgba(255,106,0,.45); background:linear-gradient( 135deg, rgba(255,106,0,.10), rgba(11,95,255,.06) ); box-shadow:0 18px 44px rgba(2,6,23,.12); } .veleos-guide-btn:hover .veleos-cta6-arrow{ transform:translateX(3px); opacity:1; } } /* Active */ .veleos-guide-btn:active{ transform:scale(.98); box-shadow:0 10px 22px rgba(2,6,23,.18); } /* Mobile */ @media (max-width:720px){ .veleos-guide-btn{ width:100%; padding:16px 18px; font-size:16px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-2eb34c56 *//* ========================================================= VELEOS — PRESTASHOP 8 — GUIDE DES TAILLES (V3.2.2++ / CLEAN) ✅ Rajdhani partout ✅ Modal / Tabs / UI ✅ Tables: desktop scroll ok + MOBILE en “bulles” (2 colonnes / 1 colonne <420px) ✅ Surbrillance champs (is-required / is-error / is-done) — sans badges auto ========================================================= */ /* ---------- Variables ---------- */ :root{ --vz-blue:#0b5fff; --vz-orange:#ff6a00; --vz-ink:#0f172a; --vz-red:239,68,68; --vz-green:34,197,94; --vz-shadow:0 12px 26px rgba(2,6,23,.08); } /* ---------- Rajdhani partout ---------- */ .vz-modal, .vz-modal *{ font-family:'Rajdhani', ui-sans-serif, system-ui !important; } /* ========================================================= MODAL ========================================================= */ .vz-modal{position:fixed;inset:0;display:none;z-index:99999;} .vz-modal.is-open{display:block;} .vz-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.58);backdrop-filter: blur(10px);} .vz-panel{ position:relative; width:min(920px, calc(100% - 22px)); margin:18px auto; background:#fff; border-radius:20px; box-shadow:0 30px 90px rgba(2,6,23,.28); overflow:hidden; border:1px solid rgba(15,23,42,.10); display:flex; flex-direction:column; max-height:92vh; } .vz-header{ display:flex;align-items:center;justify-content:space-between; padding:14px 16px;gap:12px; border-bottom:1px solid rgba(15,23,42,.08); background:#fff; flex:0 0 auto; } .vz-title strong{display:block;font-size:16px;color:var(--vz-ink);font-weight:900;} .vz-sub{display:block;font-size:12px;opacity:.72;margin-top:2px;} .vz-x{ width:40px;height:40px;border-radius:14px; border:1px solid rgba(15,23,42,.10); background:#fff; cursor:pointer; font-size:22px;line-height:1; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; } .vz-x:hover{ transform:translateY(-1px); border-color:rgba(255,106,0,.35); box-shadow:0 14px 26px rgba(2,6,23,.12); } /* ========================================================= TABS ========================================================= */ .vz-tabs{ display:flex;gap:10px; padding:10px 12px; border-bottom:1px solid rgba(15,23,42,.08); background:#fff; overflow:auto; -webkit-overflow-scrolling:touch; flex:0 0 auto; align-items:center; } .vz-tab{ display:inline-flex;align-items:center;gap:10px; border:1px solid rgba(15,23,42,.12); background:#fff; padding:10px 12px; border-radius:999px; font-weight:900; cursor:pointer; white-space:nowrap; transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease; box-shadow:0 10px 22px rgba(2,6,23,.06); } .vz-tabimg{ width:26px;height:26px;object-fit:contain;display:block;flex:0 0 auto; filter:drop-shadow(0 6px 10px rgba(2,6,23,.12)); } .vz-tab:hover{ transform:translateY(-1px); border-color:rgba(11,95,255,.24); box-shadow:0 16px 34px rgba(2,6,23,.10); } .vz-tab.is-active{ border-color:rgba(255,106,0,.45); box-shadow:0 18px 44px rgba(2,6,23,.12); } /* ========================================================= PANELS / SCROLL ========================================================= */ .vz-scroll{ padding:14px 14px 8px; overflow:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; } .vz-tabpanel{display:none;} .vz-tabpanel.is-active{display:block;} .vz-h2{ font-size:26px; margin:6px 0 8px; font-weight:950; letter-spacing:-.02em; color:var(--vz-ink); text-align:left; } .vz-p{margin:0 0 12px;color:rgba(15,23,42,.72);text-align:left;} /* ========================================================= HERO ========================================================= */ .vz-hero{margin:0 0 10px;} .vz-illus{ border-radius:18px; border:1px solid rgba(15,23,42,.08); background:#fff; overflow:hidden; padding:10px; } .vz-illus svg{width:100%;height:auto;display:block;} .vz-heroCanvas{position:relative;isolation:isolate;} .vz-heroOverlay{ position:absolute;inset:0; display:flex;align-items:center;justify-content:center; pointer-events:none; z-index:2; } .vz-heroImg{ width:min(620px, 92%); max-height:84%; object-fit:contain; transform:translateY(6px); filter:drop-shadow(0 18px 26px rgba(2,6,23,.18)); opacity:.98; } .vz-heroBadge{ position:absolute;top:12px;left:12px; padding:9px 12px;border-radius:999px; font-weight:900;font-size:13px; color:rgba(15,23,42,.92); background:#fff; border:1px solid rgba(15,23,42,.14); box-shadow:0 14px 30px rgba(2,6,23,.10); max-width:calc(100% - 24px); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* ========================================================= FORMS ========================================================= */ .vz-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;} .vz-span2{grid-column:1 / -1;} .vz-lbl{ display:block; font-weight:900; margin:0 0 8px; opacity:.82; color:var(--vz-ink); text-align:left; } .vz-select{ width:100%; border:1px solid rgba(15,23,42,.14); border-radius:16px; padding:12px 12px; background:#fff; font-size:15px; font-weight:800; color:var(--vz-ink); box-shadow:0 10px 22px rgba(2,6,23,.06); outline:none; } .vz-select:focus{border-color:rgba(11,95,255,.35);} .vz-input-wrap{ position:relative; border:1px solid rgba(15,23,42,.14); border-radius:16px; padding:12px 44px 12px 12px; background:#fff; box-shadow:0 10px 22px rgba(2,6,23,.06); } .vz-input{ width:100%; border:0; outline:0; font-size:18px; font-weight:900; background:transparent; color:var(--vz-ink); } .vz-unit{ position:absolute; right:12px;top:50%; transform:translateY(-50%); font-weight:900; opacity:.55; } .vz-miniBox{ padding:12px; border:1px solid rgba(15,23,42,.10); border-radius:16px; background:#fff; box-shadow:0 10px 22px rgba(2,6,23,.05); color:rgba(15,23,42,.70); font-size:13px; line-height:1.35; min-height:46px; text-align:left; } /* ========================================================= RESULT ========================================================= */ .vz-result{ display:flex;align-items:center;gap:14px; border:1px solid rgba(15,23,42,.10); border-radius:18px; padding:14px; background:#fff; margin-top:12px; box-shadow:0 12px 26px rgba(2,6,23,.06); } .vz-sizeRing{ width:74px;height:74px;border-radius:999px; border:3px solid rgba(255,106,0,.85); background:#fff; display:flex;align-items:center;justify-content:center; flex:0 0 auto; box-shadow:0 10px 18px rgba(2,6,23,.10); } .vz-sizeRing span{ font-weight:950;font-size:15px;color:rgba(11,95,255,.98); text-align:center;line-height:1.05;padding:6px; } .vz-sizeRing.is-muted{border-color:rgba(15,23,42,.22);} .vz-big{margin:0;font-size:16px;font-weight:900;color:var(--vz-ink);text-align:left;} .vz-muted{margin:6px 0 0;opacity:.72;text-align:left;} .vz-note{ margin:10px 0 0; font-size:13px; color:rgba(15,23,42,.72); background:rgba(2,6,23,.03); border:1px solid rgba(15,23,42,.08); padding:10px 12px; border-radius:14px; text-align:left; } /* ========================================================= DETAILS / TABLES (DESKTOP) ========================================================= */ .vz-box{ margin-top:12px; border:1px solid rgba(15,23,42,.10); border-radius:16px; background:#fff; box-shadow:0 12px 26px rgba(2,6,23,.06); overflow:hidden; } .vz-sum{ list-style:none; cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:10px; padding:12px 12px; font-weight:900; color:var(--vz-ink); text-align:left; } .vz-sum::-webkit-details-marker{display:none;} .vz-chip2{ font-weight:900; font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(11,95,255,.06); border:1px solid rgba(11,95,255,.12); color:rgba(11,95,255,.92); min-height:28px; display:inline-flex; align-items:center; justify-content:center; } .vz-boxBody{ border-top:1px solid rgba(15,23,42,.08); padding:10px 12px 12px; } .vz-table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; border:1px solid rgba(15,23,42,.10); border-radius:14px; } .vz-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:520px; background:#fff; } .vz-table th,.vz-table td{ padding:12px 12px; border-bottom:1px solid rgba(15,23,42,.08); border-right:1px solid rgba(15,23,42,.08); text-align:center; white-space:nowrap; } .vz-table th:last-child,.vz-table td:last-child{border-right:0;} .vz-table tr:last-child td{border-bottom:0;} .vz-table thead th{ font-size:13px;font-weight:900;color:rgba(15,23,42,.70); background:rgba(2,6,23,.02); } .vz-table tbody tr.is-match{background:rgba(255,106,0,.06);} .vz-table tbody tr.is-match td:last-child strong{ display:inline-flex;align-items:center;justify-content:center; padding:6px 10px;border-radius:999px; border:2px solid rgba(255,106,0,.85); color:rgba(11,95,255,.98); background:#fff; } .vz-foot{margin:10px 2px 0;font-size:12px;color:rgba(15,23,42,.70);text-align:left;} /* ========================================================= FOOTER / BUTTONS ========================================================= */ .vz-footer{ display:flex; gap:10px; justify-content:space-between; align-items:center; padding:12px 14px; border-top:1px solid rgba(15,23,42,.08); background:#fff; position:sticky; bottom:0; z-index:6; flex:0 0 auto; } .vz-primary{ background:var(--vz-blue); color:#fff; border:1px solid rgba(11,95,255,.25); padding:12px 16px; border-radius:16px; font-weight:900; cursor:pointer; min-width:220px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 16px 34px rgba(11,95,255,.14); } .vz-ghost{ background:#fff; border:1px solid rgba(15,23,42,.14); padding:12px 16px; border-radius:16px; font-weight:900; cursor:pointer; min-width:160px; box-shadow:0 10px 22px rgba(2,6,23,.08); } .vz-help{ text-decoration:none; background:var(--vz-orange); color:#fff !important; border:1px solid rgba(255,106,0,.35); padding:12px 14px; border-radius:16px; font-weight:950; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 16px 34px rgba(255,106,0,.18); transition:transform .15s ease, box-shadow .15s ease; white-space:nowrap; } @media(hover:hover){ .vz-help:hover{transform:translateY(-1px);box-shadow:0 22px 44px rgba(255,106,0,.22);} } .vz-help:active{transform:scale(.98);} .vz-safe{height:10px;} /* ========================================================= RESPONSIVE LAYOUT ========================================================= */ @media (max-width: 860px){ .vz-grid{grid-template-columns:1fr;} .vz-span2{grid-column:auto;} .vz-primary{min-width:0;width:42%;} .vz-help{width:30%;} .vz-ghost{min-width:0;width:28%;} .vz-heroImg{width:min(560px, 94%); max-height:80%;} } @media (max-width: 720px){ .vz-panel{ width:100%; margin:0; border-radius:20px 20px 0 0; position:absolute; left:0;right:0;bottom:0; max-height:92vh; } .vz-header{padding:12px 12px;} .vz-scroll{padding:12px 12px 8px;} .vz-h2{font-size:20px;} .vz-illus{padding:8px;border-radius:16px;} .vz-footer{gap:8px;} .vz-ghost,.vz-help,.vz-primary{padding:12px 10px;border-radius:14px;} .vz-ghost{width:34%;} .vz-help{width:28%;} .vz-primary{width:38%;} } /* ========================================================= SURBRILLANCE CHAMPS (is-required / is-error / is-done) ========================================================= */ .vz-field{ transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; } .vz-field.is-required{ --vz-border-rgb: var(--vz-orange); --vz-ring-rgb: var(--vz-orange); } .vz-field.is-error{ --vz-border-rgb: var(--vz-red); --vz-ring-rgb: var(--vz-red); } .vz-field.is-done{ --vz-border-rgb: var(--vz-green); --vz-ring-rgb: var(--vz-green); } .vz-field.is-required .vz-select, .vz-field.is-required .vz-input-wrap, .vz-field.is-required .vz-miniBox, .vz-field.is-error .vz-select, .vz-field.is-error .vz-input-wrap, .vz-field.is-error .vz-miniBox, .vz-field.is-done .vz-select, .vz-field.is-done .vz-input-wrap, .vz-field.is-done .vz-miniBox{ border-color: rgba(var(--vz-border-rgb), .55) !important; box-shadow: 0 0 0 4px rgba(var(--vz-ring-rgb), .12), var(--vz-shadow) !important; } /* done plus soft */ .vz-field.is-done .vz-select, .vz-field.is-done .vz-input-wrap{ box-shadow: 0 0 0 4px rgba(var(--vz-green), .10), 0 12px 26px rgba(2,6,23,.06) !important; } /* focus prioritaire bleu */ .vz-field.is-required .vz-select:focus, .vz-field.is-required .vz-input:focus{ outline:none; } .vz-field.is-required:focus-within{ --vz-border-rgb: var(--vz-blue); --vz-ring-rgb: var(--vz-blue); } /* ========================================================= MOBILE — TABLES EN “BULLES” (anti scroll horizontal) - 2 colonnes parallèles + 1 colonne <420px - nécessite data-label (ton JS applyDataLabels) ========================================================= */ @media (max-width: 720px){ /* safe area droite (iOS overlay scroll) */ .vz-scroll, .vz-boxBody{ padding-left:12px !important; padding-right:18px !important; } /* wrapper */ .vz-table-wrap{ margin-right:6px !important; width:calc(100% - 6px) !important; box-sizing:border-box !important; overflow:hidden !important; } /* on bascule en cards */ .vz-table, .vz-table thead, .vz-table tbody{ display:block !important; width:100% !important; min-width:0 !important; } .vz-table thead{display:none !important;} .vz-table tbody tr{ display:grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap:14px !important; padding:12px !important; border-bottom:1px solid rgba(15,23,42,.08) !important; box-sizing:border-box !important; align-items:stretch !important; } .vz-table tbody td{ display:block !important; width:auto !important; min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; overflow:hidden !important; padding:10px 12px !important; border:1px solid rgba(15,23,42,.10) !important; border-radius:12px !important; background:#fff !important; text-align:left !important; white-space:normal !important; word-break:break-word !important; /* on annule le style desktop (bordures “table”) */ border-right:1px solid rgba(15,23,42,.10) !important; border-bottom:1px solid rgba(15,23,42,.10) !important; } .vz-table tbody td::before{ content:attr(data-label) !important; display:block !important; font-size:11px !important; font-weight:900 !important; color:rgba(15,23,42,.58) !important; margin:0 0 6px 0 !important; line-height:1.1 !important; } .vz-table tbody td strong{ display:block !important; font-size:15px !important; font-weight:950 !important; line-height:1.15 !important; } .vz-table tbody tr.is-match{ background:rgba(255,106,0,.06) !important; border-radius:14px !important; margin:8px 0 !important; } /* très petit mobile */ @media (max-width: 420px){ .vz-table tbody tr{ grid-template-columns: 1fr !important; gap:10px !important; } } } /* ========================================================= PATCH — Suppression des bulles "À renseigner" (on garde la surbrillance visuelle) ========================================================= */ /* Supprime totalement les labels flottants */ .vz-field.is-required::after, .vz-field.is-error::after, .vz-field.is-done::after{ display:none !important; content:none !important; } /* ✅ ON GARDE : - bordures colorées - glow orange / bleu / vert - états is-required / is-error / is-done */ /* ========================================================= PATCH — FOOTER : 3 boutons mêmes dimensions / homogène Cible: .vz-ghost / .vz-help / .vz-primary ========================================================= */ /* footer: même hauteur + layout propre */ .vz-footer{ align-items:stretch; /* mêmes hauteurs */ } /* boutons: même hauteur + centrage parfait */ .vz-footer .vz-ghost, .vz-footer .vz-help, .vz-footer .vz-primary{ height:48px; /* ✅ hauteur unique */ padding:0 14px; /* padding uniforme (hauteur gérée par height) */ display:flex; align-items:center; justify-content:center; line-height:1; } /* Desktop / large: répartition homogène (3 colonnes) */ @media (min-width: 861px){ .vz-footer .vz-ghost, .vz-footer .vz-help, .vz-footer .vz-primary{ flex:1 1 0; min-width:0; /* évite débordements */ } } /* Tablette / mobile: proportions cohérentes + même hauteur */ @media (max-width: 860px){ .vz-footer .vz-ghost{ flex:1 1 0; } .vz-footer .vz-help{ flex:1 1 0; } .vz-footer .vz-primary{flex:1 1 0; } } /* Petit mobile: encore plus compact, toujours identique */ @media (max-width: 720px){ .vz-footer .vz-ghost, .vz-footer .vz-help, .vz-footer .vz-primary{ height:46px; padding:0 10px; border-radius:14px; /* tu avais déjà 14px ici */ } } /* ===================================================== VELEOS — MODULE DEVIS STYLE IDENTIQUE AU BOUTON "GUIDE DES TAILLES" ===================================================== */ /* ---------- Base commune ---------- */ .opartDevisCartToQuotationLink, .opartDevisQuotationRequestLink{ --v-orange:#ff6a00; --v-ember:#ff3d00; --v-blue:#0b5fff; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:14px 28px; border-radius:999px; font-family:'Rajdhani', ui-sans-serif, system-ui !important; font-size:15px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; background:#fff; color:var(--v-blue) !important; border:2px solid rgba(11,95,255,.25); box-shadow: 0 10px 24px rgba(2,6,23,.08), inset 0 0 0 0 rgba(0,0,0,0); cursor:pointer; transition:all .25s ease; } /* ---------- Hover commun ---------- */ .opartDevisCartToQuotationLink:hover, .opartDevisQuotationRequestLink:hover{ transform:translateY(-2px); box-shadow: 0 16px 36px rgba(2,6,23,.14), 0 0 0 6px rgba(11,95,255,.08); } /* ===================================================== BOUTON 1 — Ajouter le panier au devis (BLEU) ===================================================== */ .opartDevisCartToQuotationLink{ color:var(--v-blue) !important; border-color:rgba(11,95,255,.35); } .opartDevisCartToQuotationLink:hover{ background:linear-gradient(135deg,#0b5fff,#003bbf); color:#fff !important; border-color:transparent; } /* ===================================================== BOUTON 2 — Envoyer la demande de devis (ORANGE) ===================================================== */ .opartDevisQuotationRequestLink{ color:var(--v-ember) !important; border-color:rgba(255,106,0,.45); } .opartDevisQuotationRequestLink:hover{ background:linear-gradient(135deg,var(--v-orange),var(--v-ember)); color:#fff !important; border-color:transparent; box-shadow: 0 16px 36px rgba(255,106,0,.35), 0 0 0 6px rgba(255,106,0,.15); } /* ---------- Active ---------- */ .opartDevisCartToQuotationLink:active, .opartDevisQuotationRequestLink:active{ transform:translateY(0); box-shadow:0 8px 18px rgba(2,6,23,.18); } /* ---------- Focus ---------- */ .opartDevisCartToQuotationLink:focus, .opartDevisQuotationRequestLink:focus{ outline:none; } /* ---------- Mobile ---------- */ @media (max-width:576px){ .opartDevisCartToQuotationLink, .opartDevisQuotationRequestLink{ width:100%; padding:16px 22px; font-size:16px; } }/* End custom CSS */

À découvrir chez VELEOS

Services premium, conseils d’experts et avantages exclusifs.

Détaxe vélo hors Union Européenne
Clients hors UE

Ventes hors taxes & dispositif PABLO

Découvrez comment bénéficier de la détaxe sur l’achat de votre vélo via la procédure officielle PABLO.

Voir les conditions
Assurance vélo VELEOS
Sécurité

Assurer correctement votre vélo

Protection contre le vol, la casse et les dommages. Analyse complète des meilleures garanties.

Voir l’étude
Essayer un vélo chez VELEOS
Essai gratuit

Testez votre futur vélo

Essayez votre futur vélo en conditions réelles, avec réglages personnalisés pour votre confort.

Réserver un essai
Vol de vélo - Remise VELEOS
Offre spéciale

Vol de vélo : -15% sur un nouveau vélo

Victime d’un vol ? Profitez d’une remise immédiate et repartez rapidement avec un vélo fiable.

Découvrir l’offre
/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-48c08588 *//* ========================================================= VELEOS — BOUTON GUIDE DES TAILLES Style premium / Rajdhani / pill ========================================================= */ .veleos-guide-btn{ --v-blue: var(--vz-blue); --v-orange: var(--vz-orange); display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:14px 26px; border-radius:999px; font-family:'Rajdhani', ui-sans-serif, system-ui !important; font-size:15px; font-weight:950; letter-spacing:.2px; text-transform:uppercase; text-decoration:none !important; line-height:1; background:#fff; color:rgba(11,95,255,.98) !important; border:2px solid rgba(11,95,255,.25); box-shadow:0 12px 26px rgba(2,6,23,.08); cursor:pointer; user-select:none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease; } /* Icône SVG */ .veleos-guide-btn svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 8px 14px rgba(2,6,23,.12)); } /* Flèche */ .veleos-guide-btn .veleos-cta6-arrow{ font-weight:950; opacity:.9; transform:translateX(0); transition:transform .15s ease, opacity .15s ease; } /* Hover */ @media(hover:hover){ .veleos-guide-btn:hover{ transform:translateY(-1px); border-color:rgba(255,106,0,.45); background:linear-gradient( 135deg, rgba(255,106,0,.10), rgba(11,95,255,.06) ); box-shadow:0 18px 44px rgba(2,6,23,.12); } .veleos-guide-btn:hover .veleos-cta6-arrow{ transform:translateX(3px); opacity:1; } } /* Active */ .veleos-guide-btn:active{ transform:scale(.98); box-shadow:0 10px 22px rgba(2,6,23,.18); } /* Mobile */ @media (max-width:720px){ .veleos-guide-btn{ width:100%; padding:16px 18px; font-size:16px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-2eb34c56 *//* ========================================================= VELEOS — PRESTASHOP 8 — GUIDE DES TAILLES (V3.2.2++ / CLEAN) ✅ Rajdhani partout ✅ Modal / Tabs / UI ✅ Tables: desktop scroll ok + MOBILE en “bulles” (2 colonnes / 1 colonne <420px) ✅ Surbrillance champs (is-required / is-error / is-done) — sans badges auto ========================================================= */ /* ---------- Variables ---------- */ :root{ --vz-blue:#0b5fff; --vz-orange:#ff6a00; --vz-ink:#0f172a; --vz-red:239,68,68; --vz-green:34,197,94; --vz-shadow:0 12px 26px rgba(2,6,23,.08); } /* ---------- Rajdhani partout ---------- */ .vz-modal, .vz-modal *{ font-family:'Rajdhani', ui-sans-serif, system-ui !important; } /* ========================================================= MODAL ========================================================= */ .vz-modal{position:fixed;inset:0;display:none;z-index:99999;} .vz-modal.is-open{display:block;} .vz-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.58);backdrop-filter: blur(10px);} .vz-panel{ position:relative; width:min(920px, calc(100% - 22px)); margin:18px auto; background:#fff; border-radius:20px; box-shadow:0 30px 90px rgba(2,6,23,.28); overflow:hidden; border:1px solid rgba(15,23,42,.10); display:flex; flex-direction:column; max-height:92vh; } .vz-header{ display:flex;align-items:center;justify-content:space-between; padding:14px 16px;gap:12px; border-bottom:1px solid rgba(15,23,42,.08); background:#fff; flex:0 0 auto; } .vz-title strong{display:block;font-size:16px;color:var(--vz-ink);font-weight:900;} .vz-sub{display:block;font-size:12px;opacity:.72;margin-top:2px;} .vz-x{ width:40px;height:40px;border-radius:14px; border:1px solid rgba(15,23,42,.10); background:#fff; cursor:pointer; font-size:22px;line-height:1; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; } .vz-x:hover{ transform:translateY(-1px); border-color:rgba(255,106,0,.35); box-shadow:0 14px 26px rgba(2,6,23,.12); } /* ========================================================= TABS ========================================================= */ .vz-tabs{ display:flex;gap:10px; padding:10px 12px; border-bottom:1px solid rgba(15,23,42,.08); background:#fff; overflow:auto; -webkit-overflow-scrolling:touch; flex:0 0 auto; align-items:center; } .vz-tab{ display:inline-flex;align-items:center;gap:10px; border:1px solid rgba(15,23,42,.12); background:#fff; padding:10px 12px; border-radius:999px; font-weight:900; cursor:pointer; white-space:nowrap; transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease; box-shadow:0 10px 22px rgba(2,6,23,.06); } .vz-tabimg{ width:26px;height:26px;object-fit:contain;display:block;flex:0 0 auto; filter:drop-shadow(0 6px 10px rgba(2,6,23,.12)); } .vz-tab:hover{ transform:translateY(-1px); border-color:rgba(11,95,255,.24); box-shadow:0 16px 34px rgba(2,6,23,.10); } .vz-tab.is-active{ border-color:rgba(255,106,0,.45); box-shadow:0 18px 44px rgba(2,6,23,.12); } /* ========================================================= PANELS / SCROLL ========================================================= */ .vz-scroll{ padding:14px 14px 8px; overflow:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; } .vz-tabpanel{display:none;} .vz-tabpanel.is-active{display:block;} .vz-h2{ font-size:26px; margin:6px 0 8px; font-weight:950; letter-spacing:-.02em; color:var(--vz-ink); text-align:left; } .vz-p{margin:0 0 12px;color:rgba(15,23,42,.72);text-align:left;} /* ========================================================= HERO ========================================================= */ .vz-hero{margin:0 0 10px;} .vz-illus{ border-radius:18px; border:1px solid rgba(15,23,42,.08); background:#fff; overflow:hidden; padding:10px; } .vz-illus svg{width:100%;height:auto;display:block;} .vz-heroCanvas{position:relative;isolation:isolate;} .vz-heroOverlay{ position:absolute;inset:0; display:flex;align-items:center;justify-content:center; pointer-events:none; z-index:2; } .vz-heroImg{ width:min(620px, 92%); max-height:84%; object-fit:contain; transform:translateY(6px); filter:drop-shadow(0 18px 26px rgba(2,6,23,.18)); opacity:.98; } .vz-heroBadge{ position:absolute;top:12px;left:12px; padding:9px 12px;border-radius:999px; font-weight:900;font-size:13px; color:rgba(15,23,42,.92); background:#fff; border:1px solid rgba(15,23,42,.14); box-shadow:0 14px 30px rgba(2,6,23,.10); max-width:calc(100% - 24px); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* ========================================================= FORMS ========================================================= */ .vz-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;} .vz-span2{grid-column:1 / -1;} .vz-lbl{ display:block; font-weight:900; margin:0 0 8px; opacity:.82; color:var(--vz-ink); text-align:left; } .vz-select{ width:100%; border:1px solid rgba(15,23,42,.14); border-radius:16px; padding:12px 12px; background:#fff; font-size:15px; font-weight:800; color:var(--vz-ink); box-shadow:0 10px 22px rgba(2,6,23,.06); outline:none; } .vz-select:focus{border-color:rgba(11,95,255,.35);} .vz-input-wrap{ position:relative; border:1px solid rgba(15,23,42,.14); border-radius:16px; padding:12px 44px 12px 12px; background:#fff; box-shadow:0 10px 22px rgba(2,6,23,.06); } .vz-input{ width:100%; border:0; outline:0; font-size:18px; font-weight:900; background:transparent; color:var(--vz-ink); } .vz-unit{ position:absolute; right:12px;top:50%; transform:translateY(-50%); font-weight:900; opacity:.55; } .vz-miniBox{ padding:12px; border:1px solid rgba(15,23,42,.10); border-radius:16px; background:#fff; box-shadow:0 10px 22px rgba(2,6,23,.05); color:rgba(15,23,42,.70); font-size:13px; line-height:1.35; min-height:46px; text-align:left; } /* ========================================================= RESULT ========================================================= */ .vz-result{ display:flex;align-items:center;gap:14px; border:1px solid rgba(15,23,42,.10); border-radius:18px; padding:14px; background:#fff; margin-top:12px; box-shadow:0 12px 26px rgba(2,6,23,.06); } .vz-sizeRing{ width:74px;height:74px;border-radius:999px; border:3px solid rgba(255,106,0,.85); background:#fff; display:flex;align-items:center;justify-content:center; flex:0 0 auto; box-shadow:0 10px 18px rgba(2,6,23,.10); } .vz-sizeRing span{ font-weight:950;font-size:15px;color:rgba(11,95,255,.98); text-align:center;line-height:1.05;padding:6px; } .vz-sizeRing.is-muted{border-color:rgba(15,23,42,.22);} .vz-big{margin:0;font-size:16px;font-weight:900;color:var(--vz-ink);text-align:left;} .vz-muted{margin:6px 0 0;opacity:.72;text-align:left;} .vz-note{ margin:10px 0 0; font-size:13px; color:rgba(15,23,42,.72); background:rgba(2,6,23,.03); border:1px solid rgba(15,23,42,.08); padding:10px 12px; border-radius:14px; text-align:left; } /* ========================================================= DETAILS / TABLES (DESKTOP) ========================================================= */ .vz-box{ margin-top:12px; border:1px solid rgba(15,23,42,.10); border-radius:16px; background:#fff; box-shadow:0 12px 26px rgba(2,6,23,.06); overflow:hidden; } .vz-sum{ list-style:none; cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:10px; padding:12px 12px; font-weight:900; color:var(--vz-ink); text-align:left; } .vz-sum::-webkit-details-marker{display:none;} .vz-chip2{ font-weight:900; font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(11,95,255,.06); border:1px solid rgba(11,95,255,.12); color:rgba(11,95,255,.92); min-height:28px; display:inline-flex; align-items:center; justify-content:center; } .vz-boxBody{ border-top:1px solid rgba(15,23,42,.08); padding:10px 12px 12px; } .vz-table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; border:1px solid rgba(15,23,42,.10); border-radius:14px; } .vz-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:520px; background:#fff; } .vz-table th,.vz-table td{ padding:12px 12px; border-bottom:1px solid rgba(15,23,42,.08); border-right:1px solid rgba(15,23,42,.08); text-align:center; white-space:nowrap; } .vz-table th:last-child,.vz-table td:last-child{border-right:0;} .vz-table tr:last-child td{border-bottom:0;} .vz-table thead th{ font-size:13px;font-weight:900;color:rgba(15,23,42,.70); background:rgba(2,6,23,.02); } .vz-table tbody tr.is-match{background:rgba(255,106,0,.06);} .vz-table tbody tr.is-match td:last-child strong{ display:inline-flex;align-items:center;justify-content:center; padding:6px 10px;border-radius:999px; border:2px solid rgba(255,106,0,.85); color:rgba(11,95,255,.98); background:#fff; } .vz-foot{margin:10px 2px 0;font-size:12px;color:rgba(15,23,42,.70);text-align:left;} /* ========================================================= FOOTER / BUTTONS ========================================================= */ .vz-footer{ display:flex; gap:10px; justify-content:space-between; align-items:center; padding:12px 14px; border-top:1px solid rgba(15,23,42,.08); background:#fff; position:sticky; bottom:0; z-index:6; flex:0 0 auto; } .vz-primary{ background:var(--vz-blue); color:#fff; border:1px solid rgba(11,95,255,.25); padding:12px 16px; border-radius:16px; font-weight:900; cursor:pointer; min-width:220px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 16px 34px rgba(11,95,255,.14); } .vz-ghost{ background:#fff; border:1px solid rgba(15,23,42,.14); padding:12px 16px; border-radius:16px; font-weight:900; cursor:pointer; min-width:160px; box-shadow:0 10px 22px rgba(2,6,23,.08); } .vz-help{ text-decoration:none; background:var(--vz-orange); color:#fff !important; border:1px solid rgba(255,106,0,.35); padding:12px 14px; border-radius:16px; font-weight:950; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 16px 34px rgba(255,106,0,.18); transition:transform .15s ease, box-shadow .15s ease; white-space:nowrap; } @media(hover:hover){ .vz-help:hover{transform:translateY(-1px);box-shadow:0 22px 44px rgba(255,106,0,.22);} } .vz-help:active{transform:scale(.98);} .vz-safe{height:10px;} /* ========================================================= RESPONSIVE LAYOUT ========================================================= */ @media (max-width: 860px){ .vz-grid{grid-template-columns:1fr;} .vz-span2{grid-column:auto;} .vz-primary{min-width:0;width:42%;} .vz-help{width:30%;} .vz-ghost{min-width:0;width:28%;} .vz-heroImg{width:min(560px, 94%); max-height:80%;} } @media (max-width: 720px){ .vz-panel{ width:100%; margin:0; border-radius:20px 20px 0 0; position:absolute; left:0;right:0;bottom:0; max-height:92vh; } .vz-header{padding:12px 12px;} .vz-scroll{padding:12px 12px 8px;} .vz-h2{font-size:20px;} .vz-illus{padding:8px;border-radius:16px;} .vz-footer{gap:8px;} .vz-ghost,.vz-help,.vz-primary{padding:12px 10px;border-radius:14px;} .vz-ghost{width:34%;} .vz-help{width:28%;} .vz-primary{width:38%;} } /* ========================================================= SURBRILLANCE CHAMPS (is-required / is-error / is-done) ========================================================= */ .vz-field{ transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; } .vz-field.is-required{ --vz-border-rgb: var(--vz-orange); --vz-ring-rgb: var(--vz-orange); } .vz-field.is-error{ --vz-border-rgb: var(--vz-red); --vz-ring-rgb: var(--vz-red); } .vz-field.is-done{ --vz-border-rgb: var(--vz-green); --vz-ring-rgb: var(--vz-green); } .vz-field.is-required .vz-select, .vz-field.is-required .vz-input-wrap, .vz-field.is-required .vz-miniBox, .vz-field.is-error .vz-select, .vz-field.is-error .vz-input-wrap, .vz-field.is-error .vz-miniBox, .vz-field.is-done .vz-select, .vz-field.is-done .vz-input-wrap, .vz-field.is-done .vz-miniBox{ border-color: rgba(var(--vz-border-rgb), .55) !important; box-shadow: 0 0 0 4px rgba(var(--vz-ring-rgb), .12), var(--vz-shadow) !important; } /* done plus soft */ .vz-field.is-done .vz-select, .vz-field.is-done .vz-input-wrap{ box-shadow: 0 0 0 4px rgba(var(--vz-green), .10), 0 12px 26px rgba(2,6,23,.06) !important; } /* focus prioritaire bleu */ .vz-field.is-required .vz-select:focus, .vz-field.is-required .vz-input:focus{ outline:none; } .vz-field.is-required:focus-within{ --vz-border-rgb: var(--vz-blue); --vz-ring-rgb: var(--vz-blue); } /* ========================================================= MOBILE — TABLES EN “BULLES” (anti scroll horizontal) - 2 colonnes parallèles + 1 colonne <420px - nécessite data-label (ton JS applyDataLabels) ========================================================= */ @media (max-width: 720px){ /* safe area droite (iOS overlay scroll) */ .vz-scroll, .vz-boxBody{ padding-left:12px !important; padding-right:18px !important; } /* wrapper */ .vz-table-wrap{ margin-right:6px !important; width:calc(100% - 6px) !important; box-sizing:border-box !important; overflow:hidden !important; } /* on bascule en cards */ .vz-table, .vz-table thead, .vz-table tbody{ display:block !important; width:100% !important; min-width:0 !important; } .vz-table thead{display:none !important;} .vz-table tbody tr{ display:grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap:14px !important; padding:12px !important; border-bottom:1px solid rgba(15,23,42,.08) !important; box-sizing:border-box !important; align-items:stretch !important; } .vz-table tbody td{ display:block !important; width:auto !important; min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; overflow:hidden !important; padding:10px 12px !important; border:1px solid rgba(15,23,42,.10) !important; border-radius:12px !important; background:#fff !important; text-align:left !important; white-space:normal !important; word-break:break-word !important; /* on annule le style desktop (bordures “table”) */ border-right:1px solid rgba(15,23,42,.10) !important; border-bottom:1px solid rgba(15,23,42,.10) !important; } .vz-table tbody td::before{ content:attr(data-label) !important; display:block !important; font-size:11px !important; font-weight:900 !important; color:rgba(15,23,42,.58) !important; margin:0 0 6px 0 !important; line-height:1.1 !important; } .vz-table tbody td strong{ display:block !important; font-size:15px !important; font-weight:950 !important; line-height:1.15 !important; } .vz-table tbody tr.is-match{ background:rgba(255,106,0,.06) !important; border-radius:14px !important; margin:8px 0 !important; } /* très petit mobile */ @media (max-width: 420px){ .vz-table tbody tr{ grid-template-columns: 1fr !important; gap:10px !important; } } } /* ========================================================= PATCH — Suppression des bulles "À renseigner" (on garde la surbrillance visuelle) ========================================================= */ /* Supprime totalement les labels flottants */ .vz-field.is-required::after, .vz-field.is-error::after, .vz-field.is-done::after{ display:none !important; content:none !important; } /* ✅ ON GARDE : - bordures colorées - glow orange / bleu / vert - états is-required / is-error / is-done */ /* ========================================================= PATCH — FOOTER : 3 boutons mêmes dimensions / homogène Cible: .vz-ghost / .vz-help / .vz-primary ========================================================= */ /* footer: même hauteur + layout propre */ .vz-footer{ align-items:stretch; /* mêmes hauteurs */ } /* boutons: même hauteur + centrage parfait */ .vz-footer .vz-ghost, .vz-footer .vz-help, .vz-footer .vz-primary{ height:48px; /* ✅ hauteur unique */ padding:0 14px; /* padding uniforme (hauteur gérée par height) */ display:flex; align-items:center; justify-content:center; line-height:1; } /* Desktop / large: répartition homogène (3 colonnes) */ @media (min-width: 861px){ .vz-footer .vz-ghost, .vz-footer .vz-help, .vz-footer .vz-primary{ flex:1 1 0; min-width:0; /* évite débordements */ } } /* Tablette / mobile: proportions cohérentes + même hauteur */ @media (max-width: 860px){ .vz-footer .vz-ghost{ flex:1 1 0; } .vz-footer .vz-help{ flex:1 1 0; } .vz-footer .vz-primary{flex:1 1 0; } } /* Petit mobile: encore plus compact, toujours identique */ @media (max-width: 720px){ .vz-footer .vz-ghost, .vz-footer .vz-help, .vz-footer .vz-primary{ height:46px; padding:0 10px; border-radius:14px; /* tu avais déjà 14px ici */ } } /* ===================================================== VELEOS — MODULE DEVIS STYLE IDENTIQUE AU BOUTON "GUIDE DES TAILLES" ===================================================== */ /* ---------- Base commune ---------- */ .opartDevisCartToQuotationLink, .opartDevisQuotationRequestLink{ --v-orange:#ff6a00; --v-ember:#ff3d00; --v-blue:#0b5fff; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:14px 28px; border-radius:999px; font-family:'Rajdhani', ui-sans-serif, system-ui !important; font-size:15px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; background:#fff; color:var(--v-blue) !important; border:2px solid rgba(11,95,255,.25); box-shadow: 0 10px 24px rgba(2,6,23,.08), inset 0 0 0 0 rgba(0,0,0,0); cursor:pointer; transition:all .25s ease; } /* ---------- Hover commun ---------- */ .opartDevisCartToQuotationLink:hover, .opartDevisQuotationRequestLink:hover{ transform:translateY(-2px); box-shadow: 0 16px 36px rgba(2,6,23,.14), 0 0 0 6px rgba(11,95,255,.08); } /* ===================================================== BOUTON 1 — Ajouter le panier au devis (BLEU) ===================================================== */ .opartDevisCartToQuotationLink{ color:var(--v-blue) !important; border-color:rgba(11,95,255,.35); } .opartDevisCartToQuotationLink:hover{ background:linear-gradient(135deg,#0b5fff,#003bbf); color:#fff !important; border-color:transparent; } /* ===================================================== BOUTON 2 — Envoyer la demande de devis (ORANGE) ===================================================== */ .opartDevisQuotationRequestLink{ color:var(--v-ember) !important; border-color:rgba(255,106,0,.45); } .opartDevisQuotationRequestLink:hover{ background:linear-gradient(135deg,var(--v-orange),var(--v-ember)); color:#fff !important; border-color:transparent; box-shadow: 0 16px 36px rgba(255,106,0,.35), 0 0 0 6px rgba(255,106,0,.15); } /* ---------- Active ---------- */ .opartDevisCartToQuotationLink:active, .opartDevisQuotationRequestLink:active{ transform:translateY(0); box-shadow:0 8px 18px rgba(2,6,23,.18); } /* ---------- Focus ---------- */ .opartDevisCartToQuotationLink:focus, .opartDevisQuotationRequestLink:focus{ outline:none; } /* ---------- Mobile ---------- */ @media (max-width:576px){ .opartDevisCartToQuotationLink, .opartDevisQuotationRequestLink{ width:100%; padding:16px 22px; font-size:16px; } }/* End custom CSS */
Boutique Véléos – Vélo, accessoires et équipements à Poissy

Boutique

  • Vélo Gravel
    Vélo Gravel

    Découvrez notre sélection de vélos gravel adaptés à tous les terrains : légers, robustes et performants pour vos aventures routes et chemins

  • Vélo tout terrain
    Vélo tout terrain

    Découvrez notre gamme de vélos tout terrain et VTT électriques, adaptés aux chemins et sentiers les plus exigeants.

  • Vélo électrique
    Vélo électrique

    Trouvez votre vélo électrique idéal parmi notre sélection de modèles urbains, trekking, gravel et VTT. Assistance puissante et autonomie garantie chez Véléos à Poissy.

  • Vélo de route
    Vélo de route

    Découvrez notre gamme de vélos de route alliant légèreté, rigidité et aérodynamisme, adaptés à tous les niveaux.

  • Vélo de ville / vtc
    Vélo de ville / vtc

    Explorez notre sélection de vélos de ville et VTC alliant confort, robustesse et style pour vos déplacements urbains et loisirs. 

  • Vélo enfant
    Vélo enfant

    Trouvez le vélo idéal pour votre enfant : draisiennes, vélos 12", 16", 20" adaptés à leur âge et niveau

  • Accessoire
    Accessoire

    Découvrez notre gamme complète d’accessoires vélo : casques, antivols, éclairages, sacoches et pièces détachées.

  • Cadre de Vélo
    Cadre de Vélo

    Découvrez notre sélection de cadres de vélos légers et performants : VTT, route, gravel. Qualité, confort et design pour un montage à la carte.

  • Vélo Handicap
    Vélo Handicap

    Vélo pour personns handicapée – Adapté & sécurisé | Véléos

  • Carte Cadeau
    Carte Cadeau

    Cartes cadeaux vélo Véléos – Offrez liberté et passion du cyclisme

Demander un devis →

Filtres actifs

  • Couleur : Bleu
  • Autonomie : Jusqu'à 130 Km
  • Autonomie : Jusqu'à 130 Km
  • Autonomie : Jusqu’à 140 KM
  • Autonomie : Jusqu’à 170 KM