/* 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 */
