:root { --accent:#c9a84c; --accent-dark:#a07830; --black:#0a0a0a; --white:#ffffff; --gray-light:#f5f5f5; --gray-mid:#e0e0e0; --gray-text:#666666; --header-h:60px; --font-sans:'Helvetica Neue',Arial,sans-serif; --font-serif:'Georgia',serif; --max-width:1280px; --radius:4px; --transition:0.25s ease; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;} html{font-size:16px;scroll-behavior:smooth;} body{font-family:var(--font-sans);color:var(--black);background:var(--white);min-height:100vh;} a{color:inherit;text-decoration:none;transition:color var(--transition);} a:hover{color:var(--accent);} img{max-width:100%;height:auto;display:block;} ul{list-style:none;} .container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 16px;} #haut{background:var(--black);color:var(--white);position:sticky;top:0;z-index:1000;box-shadow:0 2px 12px rgba(0,0,0,0.5);} #haut .container{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:12px;} #logo{flex:0 0 auto;} #logo a img{max-height:44px;width:auto;} #logo_bonjour{font-size:0.7rem;color:rgba(0,0,0,0.4);letter-spacing:0.06em;} #logo_text{font-family:var(--font-serif);font-size:1rem;letter-spacing:0.12em;color:var(--white);text-transform:uppercase;} #search{flex:0 0 auto;max-width:200px;} #search_box{display:flex;align-items:center;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:var(--radius);} #search_txt{background:transparent;color:var(--white);border:none;padding:7px 10px;font-size:0.82rem;width:140px;} #search_link{padding:7px 10px;color:rgba(255,255,255,0.6);cursor:pointer;} #search_link img{height:14px;width:auto;filter:invert(1);} #search_libelle{display:none;} #connexion{flex:0 0 auto;font-size:0.78rem;color:rgba(255,255,255,0.7);} #connexion a{color:rgba(255,255,255,0.7);} #connexion a:hover{color:var(--accent);} #connexion table{border-collapse:collapse;} #connexion table td{padding:1px 3px;vertical-align:middle;} #connexion table p{color:rgba(0,0,0,0.4);} .connexion_select{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.2);border-radius:3px;font-size:0.75rem;padding:2px 4px;} #flag_zone{display:flex;gap:4px;align-items:center;} #flag_zone img{width:20px;height:auto;opacity:0.8;transition:opacity var(--transition);} #flag_zone a:hover img{opacity:1;} #panier{flex:0 0 auto;} #panier_total{display:none !important;} #panier_article{display:inline !important;font-size:0.75rem;text-transform:uppercase;color:var(--white);} #panier a{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border:1px solid rgba(255,255,255,0.5);border-radius:6px;color:var(--white) !important;text-decoration:none;white-space:nowrap;} #panier a:hover{border-color:var(--accent);color:var(--accent) !important;} #panier_nb{font-size:0.9rem;font-weight:700;} #menu_toggle{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:8px;} #menu_toggle span{display:block;width:22px;height:2px;background:var(--white);} #menu{position:sticky;top:var(--header-h);z-index:998;background:var(--black);border-top:1px solid rgba(255,255,255,0.08);} #menu .container{position:relative;display:flex;align-items:center;overflow:hidden;padding:0;} #menu_vs{display:flex;flex-wrap:nowrap;overflow-x:auto;align-items:center;height:44px;scrollbar-width:none;scroll-behavior:smooth;padding:0 30px;flex:1;} #menu_vs::-webkit-scrollbar{display:none;} #menu_vs_prev,#menu_vs_next{flex-shrink:0;height:44px;width:30px;background:var(--black);border:none;color:var(--white);cursor:pointer;z-index:10;font-size:1.2rem;opacity:0.8;} #menu_vs_prev:hover,#menu_vs_next:hover{opacity:1;color:var(--accent);} .vs_menu_item{position:relative;flex:0 0 auto;} .vs_menu_item > a{display:block;padding:0 16px;height:44px;line-height:44px;font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.75);white-space:nowrap;} .vs_menu_item:hover > a{color:var(--accent);} .vs_dropdown{display:none;position:fixed;left:0;right:0;background:var(--white);border-top:2px solid var(--accent);box-shadow:0 8px 30px rgba(0,0,0,0.15);z-index:999;padding:20px 40px;max-height:70vh;overflow-y:auto;} .vs_menu_item:hover .vs_dropdown{display:block;} .vs_dropdown_inner{max-width:1200px;margin:0 auto;} .vs_dropdown_col{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 20px;} .vs_dropdown_col h4{grid-column:1/-1;font-size:0.75rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--black);font-weight:700;margin-bottom:4px;border-bottom:1px solid var(--gray-mid);padding-bottom:6px;} .vs_dropdown_link{display:flex;align-items:center;gap:10px;padding:4px 6px;border-radius:4px;transition:background 0.2s;text-decoration:none;} .vs_dropdown_link:hover{background:var(--gray-light,#f5f5f5);} .vs_dropdown_thumb{width:40px;height:55px;object-fit:cover;border-radius:3px;flex-shrink:0;} .vs_dropdown_link span{font-size:0.82rem;color:var(--gray-text);white-space:nowrap;} #milieu{padding:0;min-height:60vh;} #milieu_titre{display:none;} #milieu_flex{display:flex;gap:30px;padding:20px;align-items:flex-start;} #navigation_gauche{flex:0 0 220px;min-width:220px;} #milieu_gauche{background:var(--white);border:1px solid var(--gray-mid);border-radius:var(--radius);padding:16px;} #milieu_gauche h3{font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--black);padding:10px 0 6px;border-bottom:1px solid var(--gray-mid);margin-bottom:8px;cursor:pointer;} #milieu_gauche a{display:block;font-size:0.82rem;color:var(--gray-text);padding:5px 0;border-bottom:1px solid var(--gray-light);transition:color var(--transition),padding var(--transition);} #milieu_gauche a:hover{color:var(--accent);padding-left:6px;} #milieu_droite_wrap{flex:1 1 auto;min-width:0;} #liste_vignettes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px 0;} div.vignette,div.vignette_medium{display:flex;flex-direction:column;} div.vignette img.imgvignette,div.vignette_medium img.imgvignette{width:100%;height:400px;object-fit:cover;display:block;} div.vignette .lienvignette,div.vignette_medium .lienvignette{flex:1;padding:8px 4px;} div.vignette .libelle,div.vignette_medium .libelle{display:block;font-size:0.82rem;min-height:2.6em;line-height:1.3;} div.vignette:empty{display:none;} .prixvignette{color:var(--accent);font-weight:700;font-size:0.88rem;} .vign_prix_initial{text-decoration:line-through;color:var(--gray-text);font-size:0.8rem;} #list_ergo_haut,#list_ergo_bas{display:flex;align-items:center;justify-content:space-between;padding:12px 0;flex-wrap:wrap;gap:8px;} .navigation{display:flex;gap:6px;align-items:center;} .navigation a{padding:6px 10px;font-size:0.8rem;border:1px solid var(--gray-mid);border-radius:var(--radius);} .navigation a:hover{border-color:var(--accent);color:var(--accent);} #list_titre{display:flex;align-items:center;justify-content:space-between;padding:16px 0 8px;flex-wrap:wrap;gap:8px;} #list_titre h2{font-family:var(--font-serif);font-size:1.4rem;font-weight:400;} .cb{border:1px solid var(--gray-mid);border-radius:var(--radius);padding:5px 8px;font-size:0.82rem;background:var(--white);} #hero{min-height:60vh;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;position:relative;overflow:hidden;} /* HERO_LCP_FIX - image en pour LCP detectable */ #hero .hero_bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;} #hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.35);} #hero_content{position:relative;z-index:1;text-align:center;color:var(--white);padding:40px;} #hero_content h1{font-family:var(--font-serif);font-size:3rem;font-weight:300;letter-spacing:0.15em;margin-bottom:16px;} #hero_content p{font-size:1rem;margin-bottom:32px;opacity:0.85;} #hero_cta{display:inline-block;padding:16px 50px;border:2px solid var(--white);background:rgba(0,0,0,0.35);color:var(--white);font-size:1.1rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:600;transition:all 0.3s;} #hero_cta:hover{background:var(--white);color:var(--black);} #item_content{display:flex;gap:30px;align-items:flex-start;flex-wrap:wrap;} #item_left_side{flex:0 0 400px;} #item_right_side{flex:1 1 300px;padding:0 0 20px 20px;display:flex;flex-direction:column;gap:10px;} #item_photo img{width:100%;} #list_mini_photos{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap;} #list_mini_photos img{width:72px;height:103px;object-fit:cover;border:1px solid var(--gray-mid);cursor:pointer;border-radius:3px;} #list_mini_photos img:hover{border-color:var(--accent);} #prixproduit{font-size:1.4rem;font-weight:700;color:var(--accent);} #item_description{margin:16px 0;font-size:0.88rem;line-height:1.8;color:#444;border-top:1px solid var(--gray-mid);padding-top:16px;} #case_add_cart{display:inline-block;background:var(--black);color:var(--white);padding:14px 40px;font-size:0.85rem;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;border:2px solid var(--black);transition:all 0.2s;margin:16px 0;} #case_add_cart { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 60px; background: var(--black); color: var(--white); border: 2px solid var(--black); font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; margin: 0; } #case_add_cart:hover { background: var(--white); color: var(--black); } #qty_select_top { display: inline-flex; align-items: center; justify-content: center; height: 50px; width: 80px; background: var(--white); color: var(--black); border: 2px solid var(--black); border-right: none; font-size: 0.85rem; letter-spacing: 0.15em; cursor: pointer; padding: 0 10px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230a0a0a'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } .size-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;} .size-btn{display:inline-block;padding:6px 14px;border:1px solid var(--black);font-size:0.82rem;cursor:pointer;transition:all 0.2s;} .size-btn.active,.size-btn:hover{background:var(--black);color:var(--white);} #cmbtailles{display:none !important;} .item_button{background:transparent;color:var(--black);border:1px solid var(--black);width:30px;height:30px;border-radius:6px;font-size:1rem;cursor:pointer;} .item_button:hover{background:var(--black);color:var(--white);} .item_text{width:40px;text-align:center;border:1px solid var(--gray-mid);border-radius:var(--radius);padding:5px;} #other_prods{display:flex;gap:12px;overflow-x:auto;flex-wrap:nowrap;padding:12px 0;justify-content:center;} #other_prods a{flex:0 0 auto;text-decoration:none;color:var(--black);} #other_prods .suggestion_produit{flex:0 0 180px;width:180px;display:flex;flex-direction:column;} #other_prods .sugg_img{width:180px;height:258px;overflow:hidden;} #other_prods .sugg_img img{width:180px !important;height:258px !important;object-fit:fill !important;display:block !important;max-width:none !important;} #other_prods .sugg_titre{font-size:0.78rem;font-weight:600;text-align:center;padding:6px 4px;min-height:48px;display:flex;align-items:center;justify-content:center;} #other_prods .sugg_prix{text-align:center;color:var(--accent);font-size:0.85rem;} input[type=text],input[type=email],input[type=password],select,textarea{width:100%;border:1px solid var(--gray-mid);border-radius:var(--radius);padding:10px 14px;font-size:0.88rem;background:var(--white);color:var(--black);} input[type=submit],input[type=button],button{background:var(--black);color:var(--white);border-radius:var(--radius);padding:11px 24px;cursor:pointer;font-size:0.85rem;letter-spacing:0.1em;text-transform:uppercase;} input[type=submit]:hover,input[type=button]:hover,button:hover{background:var(--accent);color:var(--black);} input[type=checkbox],input[type=radio]{width:auto;} #tablecart{width:100%;border-collapse:collapse;} #tablecart .entetepanier td{background:var(--black);color:var(--white);padding:12px 16px;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;} #tablecart .cart_td_prod td{padding:8px 12px;border-bottom:1px solid var(--gray-light);vertical-align:middle;} #tablecart .cart_td_prod img{width:93px !important;height:133px !important;object-fit:cover;} #tablecart td{padding:8px 12px;font-size:0.85rem;vertical-align:middle;} #menu_etapes{display:none !important;} .item_button_cartpair,.item_button_cartimpair{background:transparent !important;color:var(--black) !important;border:1px solid var(--black) !important;width:30px !important;height:30px !important;border-radius:6px !important;font-size:1.1rem !important;cursor:pointer !important;padding:0 !important;} .item_button_cartpair:hover,.item_button_cartimpair:hover{background:var(--black) !important;color:var(--white) !important;} #cart_checkout_bar{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:20px;padding:20px 0;border-top:1px solid var(--gray-mid);flex-wrap:wrap;} #cart_secure_icons{margin-right:auto;font-size:0.82rem;color:var(--gray-text);} .stripe_checkout_btn{background:var(--black);color:var(--white);border:none;padding:16px 48px;font-size:0.85rem;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;} .stripe_checkout_btn:hover{background:#333;} #cart_pay_logos{display:flex;gap:8px;align-items:center;} #bas{background:var(--black);color:rgba(255,255,255,0.65);margin-top:60px;padding:48px 0 24px;} #bas .container{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;} .bas_box{flex:1 1 200px;font-size:0.82rem;line-height:1.9;} .bas_box a{color:rgba(255,255,255,0.65);} .bas_box a:hover{color:var(--accent);} #bas_copyright{width:100%;text-align:center;font-size:0.72rem;color:rgba(255,255,255,0.3);margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.08);} @media(max-width:1024px){ :root{--header-h:56px;} .container{padding:0 20px;} #item_left_side{flex:0 0 300px;} #liste_vignettes{grid-template-columns:repeat(2,1fr);} } @media(max-width:768px){ #navigation_gauche{flex:none;width:100%;} #milieu_flex{flex-direction:column;padding:10px;} #item_content{flex-direction:column;} #item_left_side{flex:none;width:100%;} #menu_toggle{display:flex;} #liste_vignettes{grid-template-columns:repeat(2,1fr);} } @media(max-width:520px){ #liste_vignettes{grid-template-columns:1fr;} } /* Page produit - espacement */ #item_content { padding: 20px; margin-top: 20px; } #item_suggestion { clear: both; padding: 20px; margin-top: 20px; border-top: 1px solid var(--gray-mid); } #item_avis { margin-top: 30px; padding: 20px; border-top: 1px solid var(--gray-mid); } #div_avis { margin-top: 20px; } /* Fix espacement page produit */ #milieu { padding-top: 24px; } /* Fix page produit */ #item_haut_retour { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; } #retour { margin-right: 16px; } #retour a { font-size: 0.82rem; color: var(--gray-text); } /* Quantité réduite et centrée */ .item_button { width: 28px !important; height: 28px !important; font-size: 0.9rem !important; padding: 0 !important; } .item_text { width: 36px !important; text-align: center; font-size: 0.88rem; padding: 4px; } /* Vignettes avec liseret */ div.vignette, div.vignette_medium { border: 1px solid var(--gray-mid); border-radius: 2px; overflow: hidden; transition: box-shadow var(--transition); } div.vignette:hover, div.vignette_medium:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.12); border-color: #bbb; } div.vignette .lienvignette, div.vignette_medium .lienvignette { padding: 8px 8px 10px; background: var(--white); } /* Quantité VS style */ /* ── QTY + ADD TO CART ── */ #item_quantite { display: none !important; } #item_prix_div_left { display: inline-flex; flex-direction: row; align-items: center; gap: 0; } /* QTY harmonisé ADD TO CART */ height: 50px !important; width: 80px !important; border: 2px solid var(--black) !important; border-right: none !important; font-size: 0.85rem !important; letter-spacing: 0.08em !important; padding: 0 10px !important; cursor: pointer !important; border-radius: 0 !important; background: var(--white) !important; color: var(--black) !important; appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230a0a0a'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 8px center !important; text-transform: uppercase !important; } #item_prix_div_left { gap: 0 !important; margin: 16px 0; } /* Bouton ADD TO CART blanc bordure noire style VS */ /* QTY select style luxe */ select#qty_select_top { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #ffffff !important; border: 2px solid #000000 !important; border-right: none !important; border-radius: 0 !important; color: #000000; font-family: var(--font-sans); font-size: 14px; padding: 10px 30px 10px 15px; cursor: pointer; height: 50px !important; width: 80px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' stroke='%23000' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; } select#qty_select_top.vs-style-select { display: inline-block !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-color: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; border-right: none !important; border-radius: 0 !important; height: 50px !important; width: 80px !important; font-size: 14px !important; padding-left: 15px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' stroke='%23000' fill='none'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 12px !important; cursor: pointer !important; } /* QTY custom centré + espace */ #qty_custom { justify-content: center !important; gap: 0; } #qty_custom span:first-child { padding: 0 !important; text-align: center; width: 100%; } #item_prix_div_left { gap: 8px !important; } /* Fix bordure droite qty */ #qty_custom { border: 2px solid #000 !important; border-right: none !important; } /* Espace entre QTY et ADD TO CART */ #item_prix_div_left { gap: 8px !important; } /* Gemini fix QTY + ADD TO CART */ #item_prix_div_left { display: flex !important; align-items: center; } #qty_custom { border-right: 2px solid #000 !important; box-sizing: border-box; } #case_add_cart { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 40px; background: #000; color: #fff; margin-left: -2px; border: 2px solid #000; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; box-sizing: border-box; } #case_add_cart:hover { background: #fff; color: #000; } /* Fix layout page produit + tailles */ #item_content, #item_left_side, #item_right_side { display: flex; } #item_content { flex-direction: row; gap: 30px; align-items: flex-start; padding: 20px; } #item_left_side { flex: 0 0 400px; flex-direction: column; } #item_right_side { flex: 1; flex-direction: column; gap: 10px; } .vs-size-btn { min-width: 48px; height: 44px; padding: 0 16px; border: 1px solid #000; background: #fff; color: #000; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; } .vs-size-btn:hover { background: #000; color: #fff; } .vs-size-active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; } /* Fix tailles boutons couleurs */ .vs-size-btn { background: #fff; color: #000; border: 1px solid #000; } .vs-size-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .vs-size-active { background: #000 !important; color: #fff !important; border-color: #000 !important; } /* Layout page produit - photo gauche, info droite */ #item_left_side { float: left; width: 420px; margin-right: 30px; } #item_right_side { overflow: hidden; } #item_left_side, #item_right_side { display: block; } /* Fix description et layout produit */ #item_description { clear: both; padding: 20px 0; margin-top: 16px; border-top: 1px solid var(--gray-mid); font-size: 0.88rem; line-height: 1.8; color: #444; } #item_properties { clear: both; padding: 10px 0; font-size: 0.85rem; line-height: 2; } /* Fix suggestions scrollable */ #other_prods { overflow-x: auto; white-space: nowrap; } #other_prods a { display: inline-block; vertical-align: top; white-space: normal; } #other_prods .suggestion_produit { width: 180px; } /* Fix review */ #item_avis { clear: both; margin-top: 20px; } /* Fix menu défilant - éviter chevauchement */ .vs_menu_item > a { white-space: nowrap; } /* Espacement page produit */ #item_right_side > * { margin-bottom: 12px; } .vs-size-buttons { margin-bottom: 16px; } #selec_tailles { margin-top: 12px; } .vs-size-buttons + p { margin-top: 12px; } /* Ligne grise haut et bas description */ #item_description { border-top: 1px solid var(--gray-mid); border-bottom: 1px solid var(--gray-mid); padding: 16px 0; margin: 16px 0; } /* Review sous les images */ #comments { float: left; width: 420px; margin-top: 16px; clear: left; border-top: 1px solid var(--gray-mid); padding-top: 16px; } #comments #titre_suggestion { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; } /* Fix page produit - layout propre */ #item_content { display: flex; flex-direction: row; gap: 40px; padding: 20px; align-items: flex-start; } #item_left_side { flex: 0 0 420px; width: 420px; } #item_right_side { flex: 1; min-width: 0; } #item_right_side * { max-width: 100%; } #comments { margin-top: 20px; border-top: 1px solid var(--gray-mid); padding-top: 16px; } #comments #titre_suggestion { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; } /* Review sous photos - colonne gauche */ #item_left_side { display: flex; flex-direction: column; } #comments { order: 10; margin-top: 20px; } #item_right_side { display: flex; flex-direction: column; } #item_right_side #comments { display: none; } /* Carousel bottom */ #th4_carousel_wrap { overflow: hidden; width: 100%; background: var(--white); padding: 30px 0; border-top: 1px solid var(--gray-mid); margin-top: 40px; } #th4_carousel_track { display: flex; flex-wrap: nowrap; gap: 16px; width: max-content; will-change: transform; } .th4_carousel_card { flex: 0 0 180px; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--black); border: 1px solid var(--gray-mid); padding: 8px; transition: border-color 0.2s; background: var(--white); } .th4_carousel_card:hover { border-color: var(--accent); } .th4_carousel_libelle { font-size: 0.72rem; letter-spacing: 0.06em; text-align: center; min-height: 2.4em; display: flex; align-items: center; justify-content: center; text-transform: uppercase; padding: 0 4px; margin-bottom: 6px; } .th4_carousel_card img { width: 180px; height: 258px; object-fit: cover; display: block; } .th4_carousel_marque { font-size: 0.7rem; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; text-align: center; } /* Réseaux sociaux footer */ #bas_social { display: flex; gap: 16px; margin-bottom: 16px; } #bas_social a { color: rgba(255,255,255,0.7); transition: color 0.2s; } #bas_social a:hover { color: var(--accent); } /* Footer hauteur optimisée */ #bas { padding: 36px 0 20px; } #bas .container { padding-bottom: 0; } #bas_copyright { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; margin-top: 24px; } /* Footer compact */ #bas { padding: 28px 0 0; } #bas .bas_box { padding-bottom: 16px; } #bas_copyright { margin-top: 16px; padding: 12px 0; } /* Cacher review dans item_right_side - il est dans le footer */ #item_right_side #comments { display: none !important; } /* Espacement carousel et footer */ #th4_carousel_wrap { margin-top: 20px; padding: 16px 0; } #bas { margin-top: 0; } /* 1 - Footer pleine largeur aligné avec le top */ #bas { width: 100%; box-sizing: border-box; } #bas .container { max-width: var(--max-width); margin: 0 auto; padding: 0 16px; } /* 2 - Carousel hauteur uniforme */ .th4_carousel_card { height: 340px; overflow: hidden; justify-content: space-between; } .th4_carousel_card img { width: 180px; height: 258px; object-fit: cover; flex-shrink: 0; } .th4_carousel_libelle { max-height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3em; } /* 3 - Espace avant carousel */ #item_right_side { padding-bottom: 0; } #milieu { padding-bottom: 0; } #th4_carousel_wrap { margin-top: 8px; } /* Sizes label en gras */ .vs-size-buttons + select { display: none !important; } #selec_tailles > form > p { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; } /* Footer pleine largeur */ #bas { background: var(--black); width: 100vw; margin-left: calc(-50vw + 50%); padding: 28px 0 0; } #bas .container { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; } /* Survols dorés */ #bas a:hover { color: var(--accent) !important; } #bas_social a:hover { color: var(--accent) !important; } #newsletter_form button:hover { background: var(--accent); color: var(--white); } /* Copyright au dessus ligne - supprimer espace sous */ #bas_copyright { border-top: 1px solid rgba(255,255,255,0.1); padding: 12px 0; margin-top: 20px; margin-bottom: 0; } #bas { padding-bottom: 0; } /* Footer pleine largeur absolute */ #bas { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; box-sizing: border-box; } /* Footer pleine largeur absolute */ #bas { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; box-sizing: border-box; } /* Cacher ancienne table qty */ #item_quantite table { display: none !important; } #item_quantite { display: none !important; } /* Fix shipping page spacing */ #cart_code_promo { display: flex; align-items: center; gap: 12px; margin: 16px 0; } #cart_code_promo input[type="text"] { width: 160px; } #cart_checkout_bar, .cart_boutons { display: flex; gap: 12px; margin-top: 16px; } input[name="back"], input[name="next"], .btn_back, .btn_next { margin-right: 8px; } /* Fix shipping page spacing */ #div_cart form { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0; } #div_cart input[name="txt_code_promo"], #div_cart input[type="text"] { width: 140px !important; margin: 0; } #progression_previous, #progression_next { display: inline-block; margin-top: 12px; } #progression_previous { margin-right: 8px; } .progression_button { display: inline-flex !important; align-items: center; justify-content: center; height: 44px; padding: 0 24px; background: var(--black); color: var(--white); border: none; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } .progression_button:hover { background: #333; } /* Code label spacing */ #div_cart form input[name="txt_code_promo"] { margin-left: 8px; } #titretape { margin-bottom: 12px; } /* ── PANIER REDESIGN ── */ #titlecart { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 300; letter-spacing: 0.1em; padding: 20px 0 16px; border-bottom: 2px solid var(--black); margin-bottom: 20px; } #tablecart { width: 100%; border-collapse: collapse; } #tablecart .entetepanier td { background: var(--black); color: var(--white); padding: 12px 16px; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; } #tablecart .cart_td_prod td { padding: 16px 12px; border-bottom: 1px solid var(--gray-light); vertical-align: middle; } #tablecart .cartpair td, #tablecart .cartimpair td { padding: 14px 12px; vertical-align: middle; border-bottom: 1px solid var(--gray-light); } #tablecart .cart_td_prod img { width: 93px !important; height: 133px !important; object-fit: cover; display: block; } #tablecart .cart_td_prod a { color: var(--black); font-size: 0.85rem; } #tablecart .cart_td_prod a:hover { color: var(--accent); } #tablecart .cartright { text-align: right; font-weight: 600; font-size: 0.9rem; padding: 12px 16px; } #tablecart td.cartright { border-top: 1px solid var(--gray-mid); } .item_button_cartpair, .item_button_cartimpair { width: 28px !important; height: 28px !important; background: transparent !important; border: 1px solid var(--black) !important; color: var(--black) !important; font-size: 1rem !important; cursor: pointer !important; border-radius: 4px !important; } .item_button_cartpair:hover, .item_button_cartimpair:hover { background: var(--black) !important; color: var(--white) !important; } #tablecart td a[onclick*="modcart"] { color: var(--gray-text); font-size: 0.78rem; text-decoration: underline; } #tablecart td a[onclick*="modcart"]:hover { color: var(--accent); } /* Totaux panier */ #tablecart tr:last-child .cartright { font-size: 1rem; color: var(--accent); } /* Bas panier structuré */ #progression { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-top: 1px solid var(--gray-mid); margin-top: 20px; } #progression_previous { flex: 1; } #progression_next { flex: 0 0 auto; } #giftcard { margin: 16px 0; border: 1px solid var(--gray-mid); padding: 12px; } #giftcard td { padding: 6px 10px; font-size: 0.85rem; } #giftcard .gift_code { width: 160px; } #titretape { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--black); font-weight: 700; padding: 16px 0 8px; border-bottom: 1px solid var(--gray-mid); margin-bottom: 16px; } /* Shipping services alignés */ #tabprestataire { width: 100%; border-collapse: collapse; margin: 8px 0; } #tabprestataire td { padding: 8px 12px; font-size: 0.85rem; vertical-align: middle; border-bottom: 1px solid var(--gray-light); } #tabprestataire .fdppair { background: var(--gray-light); } #tabprestataire input[type="radio"] { margin-right: 8px; } #tabprestataire .promoprestataire { width: 100%; } #tabprestataire .promoprestataire td { padding: 4px 0; border: none; font-size: 0.78rem; } #titreetape { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; padding: 16px 0 8px; border-bottom: 1px solid var(--gray-mid); margin-bottom: 12px; } /* Giftcard + Shipping sur meme ligne */ #div_cart > #progression { flex-wrap: wrap; } #giftcard { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--gray-mid); padding: 10px 16px; margin: 12px 0; } #giftcard table { margin: 0; } #giftcard td { padding: 0 6px; border: none; } #listeprestat { display: inline-block; margin-left: 20px; vertical-align: top; } #tabprestataire tr { display: inline-flex; align-items: center; gap: 12px; } /* Giftcard + Shipping sur meme ligne */ #progression { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; } #progression > div#progression_previous { display: none; } #giftcard { flex: 0 0 auto; } #listeprestat { flex: 0 0 auto; margin: 0; } #titreetape { display: none; } /* USPS + NEXT STEP meme ligne */ #frmship { display: inline-flex; align-items: center; gap: 16px; } #listeprestat { display: inline-flex; align-items: center; } #tabprestataire tr { display: inline-flex; align-items: center; gap: 8px; } #progression_next { display: inline-block; margin-left: 16px; } /* Shipping page - tout sur une ligne */ #div_cart { display: flex; flex-direction: column; } #progression { display: flex; flex-direction: row; align-items: center; gap: 20px; flex-wrap: nowrap; width: 100%; } #giftcard { flex: 0 0 auto; } #frmship { flex: 0 0 auto; } #listeprestat { flex: 0 0 auto; } #progression_previous { flex: 0 0 auto; } #progression_next { flex: 0 0 auto; margin-left: auto; } /* USPS centré, NEXT à droite */ #progression { justify-content: space-between; } #frmship { flex: 1; display: flex; justify-content: center; } #progression_next { margin-left: 0; } /* Fix final shipping - tout aligné */ #progression { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; border-top: 1px solid var(--gray-mid); margin-top: 16px; } #giftcard { flex: 0 0 auto; margin: 0; border: none; padding: 0; } #frmship { flex: 0 0 auto; } #listeprestat { display: flex; align-items: center; } #tabprestataire, #tabprestataire tr { display: flex; align-items: center; gap: 12px; } #tabprestataire td { padding: 0; border: none; } #progression_next { flex: 0 0 auto; } #progression_previous { display: none; } /* Shipping bottom - tout sur une ligne */ #shipping-bottom { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; border-top: 1px solid var(--gray-mid); margin-top: 12px; } #shipping-bottom #progression_previous { flex: 0 0 auto; } #shipping-bottom #progression_next { flex: 0 0 auto; } #giftcard-wrapper { padding: 12px 0; border-top: 1px solid var(--gray-mid); } /* Shipping bottom - tout sur une ligne */ #shipping-bottom { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; border-top: 1px solid var(--gray-mid); margin-top: 12px; } #shipping-bottom #progression_previous { flex: 0 0 auto; } #shipping-bottom #progression_next { flex: 0 0 auto; } #giftcard-wrapper { padding: 12px 0; border-top: 1px solid var(--gray-mid); } /* ── CART LUXE ── */ #cart_header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0 16px; border-bottom: 2px solid var(--black); margin-bottom: 24px; } #titlecart { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 300; letter-spacing: 0.1em; margin: 0; } #btn_continue_shopping, #btn_continue_shopping2 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-text); border-bottom: 1px solid var(--gray-text); padding-bottom: 2px; transition: all 0.2s; } #btn_continue_shopping:hover, #btn_continue_shopping2:hover { color: var(--accent); border-color: var(--accent); } .cart_delai { font-size: 0.72rem; color: var(--gray-text); margin-top: 4px; } .cart_qty_btns { display: flex; flex-direction: column; gap: 4px; align-items: center; } .cart_delete { font-size: 0.75rem; color: var(--gray-text); text-decoration: underline; } .cart_delete:hover { color: var(--accent); } /* Cart bottom bar */ #cart_bottom_bar { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; border-top: 1px solid var(--gray-mid); margin-top: 16px; } #cart_actions { display: flex; align-items: center; gap: 20px; } .gift_form { display: inline-flex; align-items: center; gap: 8px; } .gift_code { height: 44px; width: 140px; border: 1px solid var(--black); padding: 0 12px; font-size: 0.82rem; } .btn_checkout { background: var(--black); color: var(--white); border: 2px solid var(--black); padding: 0 40px; height: 50px; font-size: 0.82rem; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; } .btn_checkout:hover { background: var(--white); color: var(--black); } .btn_back { background: var(--white); color: var(--black); border: 2px solid var(--black); padding: 0 24px; height: 50px; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; } .btn_back:hover { background: var(--black); color: var(--white); } /* Shipping zone */ #shipping_zone { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--gray-mid); } #shipping_line { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } #shipping_carrier { display: flex; gap: 12px; flex-wrap: wrap; } .carrier_option { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--gray-mid); cursor: pointer; font-size: 0.85rem; transition: border-color 0.2s; } .carrier_option.selected, .carrier_option:hover { border-color: var(--black); } .carrier_option input[type="radio"] { margin: 0; } .carrier_name { font-weight: 600; } .carrier_price { color: var(--accent); } #shipping_nav { display: flex; gap: 12px; } /* Cart empty */ #cart_empty { text-align: center; padding: 60px 0; font-size: 1rem; color: var(--gray-text); } /* Shipping bar - une ligne */ #progression { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 20px 0; border-top: 1px solid var(--gray-mid); margin-top: 16px; } #progression > * { flex: 0 0 auto; } #giftcard { border: none; display: inline-flex; align-items: center; } #giftcard td { padding: 0 6px; vertical-align: middle; border: none; } #listeprestat { display: inline-flex; align-items: center; } #tabprestataire { border-collapse: collapse; } #tabprestataire tr { display: inline-flex; align-items: center; gap: 8px; } #tabprestataire td { padding: 0 4px; border: none; font-size: 0.85rem; } .progression_button { background: var(--black); color: var(--white); border: 2px solid var(--black); padding: 0 32px; height: 44px; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } .progression_button:hover { background: var(--white); color: var(--black); } /* ── SHIPPING LINE - CSS ONLY ── */ form#frmship { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 25px; } form#frmship #listeprestat { grid-column: 1; display: flex; justify-content: center; align-items: center; } form#frmship table#tabprestataire, form#frmship table#tabprestataire table.promoprestataire { display: table; visibility: visible; } form#frmship table#tabprestataire tr { display: table-row; } form#frmship table#tabprestataire td { vertical-align: middle; white-space: nowrap; padding: 4px 8px; } form#frmship > div#progression { grid-column: 2; display: flex; justify-content: flex-end; align-items: center; } form#frmship #progression_previous { display: none; } form#frmship #progression_next { display: flex; justify-content: flex-end; align-items: center; } body:has(form#frmship) > div#milieu div#progression:has(table#giftcard) { float: left; width: 32%; margin-top: 0; } body:has(form#frmship) form#frmship { margin-left: 34%; width: 66%; } table#giftcard { width: 100%; } table#giftcard input[type="text"] { max-width: 150px; } /* Giftcard + USPS + CHECKOUT sur une ligne */ #div_cart > div#progression { float: left; width: auto; margin-top: 0; padding: 16px 0; } #div_cart > div#progression + form#frmship { margin-left: 0; width: auto; float: left; } #div_cart::after { content: ''; display: block; clear: both; } /* USPS plus compact */ form#frmship table#tabprestataire td { padding: 2px 6px; font-size: 0.78rem; } form#frmship table#tabprestataire table.promoprestataire td { font-size: 0.72rem; padding: 1px 4px; } /* Fix image paiement Stripe */ .imgpay input[type="image"] { appearance: auto !important; -webkit-appearance: auto !important; display: block !important; width: auto !important; height: 60px !important; cursor: pointer; } .divmodepaypair, .divmodepayimpair { padding: 16px; border: 1px solid var(--gray-mid); margin: 8px 0; cursor: pointer; display: flex; align-items: center; gap: 16px; } .divmodepaypair:hover, .divmodepayimpair:hover { border-color: var(--black); } /* Stripe button style luxe */ .divmodepaypair, .divmodepayimpair { padding: 20px 24px; border: 1px solid var(--gray-mid); margin: 12px 0; cursor: pointer; display: flex; align-items: center; gap: 20px; max-width: 500px; transition: border-color 0.2s; } .divmodepaypair:hover, .divmodepayimpair:hover { border-color: var(--black); } .imgpay { flex: 0 0 auto; } .imgpay input[type="image"] { height: 50px !important; width: auto !important; } .buttonpaypair, .buttonpayimpair { font-size: 0.85rem; line-height: 1.6; color: var(--black); } /* ── PAY NOW - LUXE ── */ .divmodepaypair, .divmodepayimpair { border: 1px solid var(--gray-mid) !important; border-radius: 0 !important; padding: 24px !important; max-width: 560px !important; background: var(--white) !important; transition: border-color 0.3s, box-shadow 0.3s !important; } .divmodepaypair:hover, .divmodepayimpair:hover { border-color: var(--black) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; } .imgpay { display: flex !important; align-items: center; } .imgpay input[type="image"] { height: 44px !important; width: auto !important; display: block !important; } .buttonpaypair, .buttonpayimpair { font-size: 0.82rem !important; line-height: 1.8 !important; color: var(--gray-text) !important; } .buttonpaypair strong, .buttonpayimpair strong { color: var(--black); } /* Texte CGV */ input[name="chkcgv"] { margin-right: 8px; } label[for="chkcgv"], .chkcgv_label { font-size: 0.82rem; color: var(--gray-text); } /* Titre section paiement */ .coordcltlivfac:last-of-type { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; color: var(--black); margin-bottom: 16px; border-bottom: 1px solid var(--gray-mid); padding-bottom: 8px; } /* ── PAGE PAY - LAYOUT LUXE ── */ #cadreclient { display: flex; flex-direction: row; gap: 40px; margin: 20px 0; } .coordpaymodif { flex: 1; } #coordpay_liv { border-right: 1px solid var(--gray-mid); padding-right: 40px; } #coordpay_fac { padding-left: 0; } .coordpaymodif table { width: 100%; } .entetetabcoordclt { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; padding-bottom: 12px; border-bottom: 1px solid var(--gray-mid); margin-bottom: 12px; display: block; } .coordpaymodiflib { font-size: 0.78rem; color: var(--gray-text); padding: 3px 8px 3px 0; white-space: nowrap; } #div_coord_end { margin-top: 20px; } /* Logos CB sous Stripe */ .divmodepaypair::after { content: ''; display: block; margin-top: 12px; height: 24px; background-image: url('/images/sites/th1/pay/cevisa.jpg'); background-repeat: no-repeat; background-size: contain; } /* CGV */ input[name="chkcgv"] { width: 16px; height: 16px; margin-right: 8px; cursor: pointer; } /* Force adresses cote a cote */ #cadreclient { display: flex !important; flex-direction: row !important; gap: 40px !important; align-items: flex-start !important; width: 100% !important; } #cadreclient .coordpaymodif { flex: 1 !important; min-width: 0 !important; } #cadreclient #coordpay_liv { border-right: 1px solid var(--gray-mid) !important; padding-right: 30px !important; } #cadreclient table { width: 100% !important; } /* ── PAGE PAY ETAPE 2 - LAYOUT LUXE ── */ /* Zone adresses côte à côte */ #coordpay_liv, #coordpay_fac { display: inline-block !important; vertical-align: top !important; width: 48% !important; padding: 20px 0 !important; } #coordpay_liv { border-right: 1px solid var(--gray-mid) !important; padding-right: 3% !important; margin-right: 2% !important; } .coordpay { width: 100%; } .titrecoordpay { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; } .titrecoordpay u { text-decoration: none; } #coordpay_liv table, #coordpay_fac table { margin: 0 !important; width: 100%; } #coordpay_liv td, #coordpay_fac td { font-size: 0.85rem; line-height: 1.8; padding: 1px 0; } /* Section titre */ .coordcltlivfac { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; padding: 16px 0 8px; border-bottom: 1px solid var(--gray-mid); margin-bottom: 16px; } /* Zone commentaires */ #txt_commentaires { width: 100%; border: 1px solid var(--gray-mid); padding: 12px; font-size: 0.85rem; resize: vertical; margin: 8px 0 16px; font-family: var(--font-sans); } /* Modify + CGV */ #div_coord_end { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-top: 1px solid var(--gray-mid); margin-top: 16px; } #div_coord_end_right a { font-size: 0.78rem; text-decoration: underline; color: var(--gray-text); } #divcheckcgv { font-size: 0.82rem; } #divcheckcgv a { color: var(--black); text-decoration: underline; } /* Titre paiement */ .coordcltlivfac + * { margin-top: 16px; } /* Adresses côte à côte - wrapper */ #coordpay_wrapper { display: flex; flex-direction: row; gap: 40px; align-items: flex-start; width: 100%; margin: 20px 0; } #coordpay_wrapper .coordpay { flex: 1; min-width: 0; } #coordpay_wrapper #coordpay_liv { border-right: 1px solid var(--gray-mid); padding-right: 40px; } #coordpay_wrapper .titrecoordpay { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; } #coordpay_wrapper td { font-size: 0.85rem; line-height: 1.8; padding: 0; } #coordpay_wrapper table { margin: 0 !important; } /* ── CART LAYOUT 2 COLONNES STYLE MACY'S ── */ #div_cart { display: grid; grid-template-columns: 1fr 340px; grid-template-rows: auto; gap: 0 40px; align-items: start; } /* Colonne gauche - tableau produits */ #tablecart { grid-column: 1; grid-row: 1; width: 100%; } /* Colonne droite - récap sticky */ #cart_recap { grid-column: 2; grid-row: 1 / 6; position: sticky; top: 20px; background: var(--white); border: 1px solid var(--gray-mid); padding: 24px; } /* Les totaux vont dans le récap */ #tablecart tr.carttotal, #tablecart tr:has(.cartright) { display: none; } /* Progression dans colonne gauche */ #div_cart > #progression { grid-column: 1; } #div_cart > div#progression { grid-column: 1; } /* Giftcard + shipping dans colonne gauche */ #div_cart > form#frmship { grid-column: 1; } /* ── CART RECAP SIDEBAR ── */ #cart_recap { grid-column: 2; grid-row: 1 / 10; position: sticky; top: 20px; background: var(--white); border: 1px solid var(--gray-mid); padding: 24px; } #cart_recap_title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 400; letter-spacing: 0.08em; padding-bottom: 16px; border-bottom: 1px solid var(--gray-mid); margin-bottom: 16px; } .cart_recap_line { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 8px 0; border-bottom: 1px solid var(--gray-light); } .cart_recap_total { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 700; padding: 16px 0; border-top: 2px solid var(--black); margin-top: 8px; } .btn_recap_checkout { width: 100%; background: var(--black); color: var(--white); border: none; height: 52px; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; margin-top: 16px; transition: background 0.2s; } .btn_recap_checkout:hover { background: #333; } .btn_continue_shopping { display: block; text-align: center; font-size: 0.78rem; color: var(--gray-text); margin-top: 12px; text-decoration: underline; letter-spacing: 0.1em; } .cart_recap_logos { text-align: center; margin-top: 12px; } /* Cache les totaux dans le tableau */ #tablecart tr:has(td.cartright) { display: none; } /* ── CART RECAP SIDEBAR ── */ #cart_recap { grid-column: 2; grid-row: 1 / 10; position: sticky; top: 20px; background: var(--white); border: 1px solid var(--gray-mid); padding: 24px; } #cart_recap_title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 400; letter-spacing: 0.08em; padding-bottom: 16px; border-bottom: 1px solid var(--gray-mid); margin-bottom: 16px; } .cart_recap_line { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 8px 0; border-bottom: 1px solid var(--gray-light); } .cart_recap_total { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 700; padding: 16px 0; border-top: 2px solid var(--black); margin-top: 8px; } .btn_recap_checkout { width: 100%; background: var(--black); color: var(--white); border: none; height: 52px; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; margin-top: 16px; transition: background 0.2s; } .btn_recap_checkout:hover { background: #333; } .btn_continue_shopping { display: block; text-align: center; font-size: 0.78rem; color: var(--gray-text); margin-top: 12px; text-decoration: underline; letter-spacing: 0.1em; } .cart_recap_logos { text-align: center; margin-top: 12px; } /* Cache les totaux dans le tableau */ #tablecart tr:has(td.cartright) { display: none; } /* Fix layout - title dans colonne 1 */ #titlecart { grid-column: 1; } #tablecart { grid-column: 1; } #div_cart > * { grid-column: 1; } #cart_recap { grid-column: 2 !important; grid-row: 1 / 20 !important; } /* Fix layout - title dans colonne 1 */ #titlecart { grid-column: 1; } #tablecart { grid-column: 1; } #div_cart > * { grid-column: 1; } #cart_recap { grid-column: 2 !important; grid-row: 1 / 20 !important; } /* Cache menu gauche sur cart/pay */ #navigation_gauche { display: none !important; } #milieu_droite { width: 100% !important; margin-left: 0 !important; } #milieu_titre { display: none !important; } /* ── TABLEAU PANIER COMPACT ── */ #tablecart { table-layout: fixed; width: 100%; } #tablecart .entetepanier td { font-size: 0.65rem; padding: 8px 6px; } #tablecart .entetepanier td:nth-child(1) { width: 70px; } /* PICTURE */ #tablecart .entetepanier td:nth-child(2) { width: 60px; } /* REFERENCE */ #tablecart .entetepanier td:nth-child(3) { width: auto; } /* DESCRIPTION */ #tablecart .entetepanier td:nth-child(4) { width: 40px; } /* SIZE */ #tablecart .entetepanier td:nth-child(5) { width: 40px; } /* COLOUR */ #tablecart .entetepanier td:nth-child(6) { width: 30px; } /* QUANTITY */ #tablecart .entetepanier td:nth-child(7) { width: 60px; } /* UNIT PRICE */ #tablecart .entetepanier td:nth-child(8) { width: 30px; } /* +/- */ #tablecart .entetepanier td:nth-child(9) { width: 60px; } /* SUBTOTAL */ #tablecart .entetepanier td:nth-child(10) { width: 30px; } /* ACTION */ #tablecart td { padding: 8px 4px; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; } #tablecart .cart_td_prod img { width: 60px !important; height: 86px !important; object-fit: cover; } /* Boutons +/- plus petits */ .item_button_cartpair, .item_button_cartimpair { width: 22px !important; height: 22px !important; font-size: 0.8rem !important; padding: 0 !important; } /* Action = poubelle */ #tablecart td a[onclick*="modcart"] { font-size: 0; } #tablecart td a[onclick*="modcart"]::before { content: '🗑'; font-size: 0.9rem; } /* Référence petite */ #tablecart .cart_td_prod td:nth-child(2) { font-size: 0.7rem; color: var(--gray-text); } /* Cart recap plus étroit */ #div_cart { grid-template-columns: 1fr 280px; gap: 0 24px; } /* Fix tableau - auto layout */ #tablecart { table-layout: auto !important; } #tablecart td { overflow: visible !important; text-overflow: unset !important; white-space: normal !important; } #tablecart .entetepanier td { width: auto !important; } #tablecart .cart_td_prod img { width: 75px !important; height: 107px !important; } #div_cart { grid-template-columns: 1fr 300px !important; } /* ── CART CARDS STYLE MACY'S ── */ #cart_items { grid-column: 1; } .cart_card { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--gray-light); align-items: flex-start; } .cart_card_img { flex: 0 0 90px; } .cart_card_img img { width: 90px; height: 128px; object-fit: cover; display: block; } .cart_card_info { flex: 1; } .cart_card_name { font-size: 0.9rem; font-weight: 600; color: var(--black); display: block; margin-bottom: 6px; line-height: 1.4; } .cart_card_name:hover { color: var(--accent); } .cart_card_details { font-size: 0.78rem; color: var(--gray-text); margin-bottom: 8px; } .cart_card_details span { margin-right: 16px; } .cart_card_price { font-size: 0.9rem; font-weight: 600; margin-bottom: 10px; } .cart_card_actions { display: flex; align-items: center; gap: 16px; } .cart_card_qty { font-size: 0.82rem; display: flex; align-items: center; gap: 6px; } .qty_btn { width: 24px; height: 24px; border: 1px solid var(--gray-mid); background: var(--white); cursor: pointer; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; } .qty_btn:hover { background: var(--black); color: var(--white); } .cart_card_remove { font-size: 0.78rem; color: var(--gray-text); } .cart_card_remove:hover { color: var(--accent); } .cart_card_subtotal { flex: 0 0 auto; font-size: 1rem; font-weight: 700; text-align: right; min-width: 80px; } #titlecart { grid-column: 1; margin-bottom: 0; padding-bottom: 16px; border-bottom: 2px solid var(--black); } /* Fix boutons +/- visibles */ .qty_btn { background: var(--black) !important; color: var(--white) !important; border: none !important; width: 26px !important; height: 26px !important; font-size: 1rem !important; border-radius: 3px; } .qty_btn:hover { background: var(--accent) !important; } /* Fix poubelle - icone SVG propre */ .cart_card_remove { font-size: 0.78rem; color: var(--gray-text); display: inline-flex; align-items: center; gap: 4px; } .cart_card_remove::before { content: '✕'; font-size: 0.7rem; display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border: 1px solid var(--gray-text); border-radius: 50%; } .cart_card_remove:hover { color: var(--accent); } .cart_card_remove:hover::before { border-color: var(--accent); } /* Boutons paiement recap */ .btn_recap_stripe { width: 100%; background: var(--black); color: var(--white); border: none; height: 48px; font-size: 0.82rem; letter-spacing: 0.12em; cursor: pointer; margin-top: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .btn_recap_stripe:hover { background: #333; } .btn_recap_gpay, .btn_recap_apay { width: 100%; height: 44px; border: 1px solid var(--gray-mid); background: var(--white); color: var(--black); font-size: 0.82rem; letter-spacing: 0.1em; cursor: pointer; margin-top: 8px; transition: border-color 0.2s; } .btn_recap_gpay:hover, .btn_recap_apay:hover { border-color: var(--black); } .btn_recap_checkout { width: 100%; background: var(--black); color: var(--white); border: none; height: 48px; font-size: 0.82rem; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; margin-top: 16px; } /* Grid uniquement sur cart.htm (pas étapes) */ #div_cart:has(#cart_recap) > #progression { display: none; } #div_cart:has(#cart_recap) > form#frmship { display: none; } #div_cart:has(#cart_recap) > #titreetape { display: none; } #div_cart:has(#cart_recap) > .coordcltlivfac { display: none; } /* Page pay.htm - pas de grid */ #div_cart:has(.coordpay) { display: block !important; } #div_cart:has(.coordpay) #cart_recap { display: none !important; } #div_cart:has(.coordpay) #cart_items { display: block; } /* Remettre le menu gauche sur pay */ body:has(.coordpay) #navigation_gauche { display: block !important; } /* Menu gauche : caché seulement quand cart_recap visible */ body:has(#cart_recap) #navigation_gauche { display: none !important; } body:has(#cart_recap) #milieu_droite { width: 100% !important; margin-left: 0 !important; } body:not(:has(#cart_recap)) #navigation_gauche { display: block !important; } body:not(:has(#cart_recap)) #milieu_droite { width: auto !important; } /* Cacher ancien CHECKOUT quand recap visible */ body:has(#cart_recap) #progression { display: none !important; } body:has(#cart_recap) form#frmship { display: none !important; } body:has(#cart_recap) #titreetape { display: none !important; } /* We accept logos */ .cart_recap_accepted { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--gray-light); text-align: center; } .cart_recap_accepted_title { font-size: 0.7rem; color: var(--gray-text); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .cart_recap_accepted_logos { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; } .cart_recap_accepted_logos span { font-size: 0.68rem; color: var(--gray-text); padding: 4px 8px; border: 1px solid var(--gray-light); border-radius: 3px; font-weight: 600; } /* Bordure produits liste */ .milieu_produit img, .prod_img img, #milieu_droite .item_img img { border: 1px solid var(--gray-light); } /* Dropdown vignettes menu */ /* Bandeau 5 images cascade */ #th5_gallery { display:flex; justify-content:center; gap:15px; padding:30px 20px; } .th5_slot { position:relative; width:18%; aspect-ratio:2/3; overflow:hidden; border-radius:4px; } .th5_slide { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity 1s ease; } .th5_slide img { width:100%; height:100%; object-fit:cover; } .th5_slide.th5_active { opacity:1; } /* Sélection produits — section élégante */ #th5_prodsection { background:#f0eeeb; padding:20px 0 25px; margin-top:30px; } #th5_prodsection .th5_section_title { text-align:center; font-size:0.75rem; letter-spacing:0.25em; text-transform:uppercase; color:rgba(0,0,0,0.4); margin-bottom:15px; } #th5_prodgallery { display:flex; justify-content:center; gap:24px; padding:0 40px; max-width:1200px; margin:0 auto; } .th5_prodslot { position:relative; width:200px; height:330px; overflow:hidden; } .th5_prodslide { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity 1.2s ease; display:flex; flex-direction:column; align-items:center; text-decoration:none; } .th5_prodslide.th5_prod_active { opacity:1; } .th5_prodslide img { width:180px; height:258px; object-fit:cover; border-radius:4px; box-shadow:0 4px 15px rgba(0,0,0,0.12); } .th5_prod_libelle { display:block; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--black,#1a1a1a); text-align:center; margin-top:10px; line-height:1.3; } .th5_prod_marque { display:block; font-size:0.68rem; color:var(--accent); text-transform:uppercase; letter-spacing:0.12em; text-align:center; margin-top:3px; } /* Fix clics produits — seule la slide active est cliquable */ .th5_prodslide { pointer-events:none; } .th5_prodslide.th5_prod_active { pointer-events:auto; }