/* ============================================================ HippoCréa — couche de personnalisation du thème Charte issue de la maquette (palette ps_cake_149), appliquée au markup réel du thème de base (classic). Chargé après theme.css (priorité haute) — voir config/theme.yml ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;500;600;700&display=swap'); /* Le glyphe € de Baloo 2 est trop rond/gras : on l'emprunte à une sans-serif propre uniquement pour le caractère euro (U+20AC). Les chiffres restent en Baloo 2. font-weight:100 900 pour couvrir tous les poids utilisés (500→800) sans toucher au reste. */ @font-face{ font-family:'Baloo 2'; font-weight:100 900; src:local('Arial'),local('Helvetica Neue'),local('Segoe UI'),local('Roboto'),local('Liberation Sans'),local('DejaVu Sans'); unicode-range:U+20AC; } :root{ --brand:#fa6678; /* corail rose — couleur de marque */ --brand-dark:#e8485c; --brand-soft:#ffe3e8; --sage:#7fb89a; /* vert sauge */ --sage-soft:#e6f1ea; --blue:#3a5a78; /* bleu profond */ --amber:#ff9a52; --cream:#fdf8f4; --pink-bg:#fdeef0; --ink:#2b2b2b; --muted:#8a8a8a; --line:#f0e7e2; --white:#fff; --shadow:0 10px 30px rgba(58,90,120,.08); --shadow-hover:0 18px 44px rgba(250,102,120,.18); --radius:22px; } /* ---------- Base ---------- */ body{font-family:'Nunito',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6} h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:'Baloo 2',cursive;color:var(--blue)} a{color:var(--blue)} a:hover,a:focus{color:var(--brand);text-decoration:none} /* pas de contour noir au clic souris sur TOUT le site (conservé au clavier via :focus-visible pour l'accessibilité) */ :focus:not(:focus-visible){outline:none} #wrapper{background:var(--cream)} #main{background:transparent} .page-content,.card{border-radius:var(--radius)} /* ---------- Boutons ---------- */ .btn-primary,.btn.btn-primary{background:var(--brand);border-color:var(--brand);border-radius:50px;font-family:'Baloo 2';font-weight:600; text-transform:none;letter-spacing:0;padding:12px 24px;transition:.25s} .btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:var(--brand-dark)!important;border-color:var(--brand-dark)!important; transform:translateY(-2px);box-shadow:var(--shadow-hover)} .btn-secondary,.btn-tertiary{border-radius:50px;font-family:'Baloo 2';font-weight:600} .btn-secondary{background:#fff;color:var(--brand);border:2px solid var(--brand-soft)} .btn-secondary:hover{background:var(--brand-soft);color:var(--brand-dark)} .add-to-cart{background:var(--brand)!important;border-color:var(--brand)!important;border-radius:50px;font-family:'Baloo 2';font-weight:700} .add-to-cart:hover{background:var(--brand-dark)!important} /* ---------- Bandeau d'annonce (topbar, injecté via header.tpl) ---------- */ .hc-topbar{background:var(--blue);color:#fff;font-size:13.5px;font-weight:600} .hc-topbar .container{display:flex!important;align-items:center;justify-content:space-between;height:38px} .hc-topbar .hc-tb-l{margin-right:auto} .hc-topbar .hc-tb-r{display:flex;gap:22px;margin-left:auto} .hc-topbar a{color:#fff!important} .hc-topbar a:hover{opacity:.75;color:#fff!important} /* sélecteurs langue/devise dans la topbar (rendus inline, sobres) */ .hc-topbar .hc-tb-selectors{display:flex;align-items:center;gap:14px} .hc-topbar .hc-tb-selectors .language-selector,.hc-topbar .hc-tb-selectors .currency-selector, .hc-topbar .hc-tb-selectors .dropdown{margin:0} .hc-topbar .hc-tb-selectors .expand-more,.hc-topbar .hc-tb-selectors button,.hc-topbar .hc-tb-selectors a{ color:#fff!important;background:transparent!important;border:none!important;padding:0;font-size:13.5px;font-weight:600} .hc-topbar .hc-tb-selectors .dropdown-menu{background:#fff} .hc-topbar .hc-tb-selectors .dropdown-menu a{color:var(--blue)!important} /* ---------- En-tête custom (réplique maquette, classes hc-) ---------- */ .hc-head-wrap{background:#fff;border-bottom:1px solid var(--line)} .hc-head{display:flex!important;align-items:center;gap:28px;height:92px} .hc-brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none} .hc-brand .hc-badge{width:58px;height:58px;border-radius:50%;overflow:hidden;background:#1d1d1d;flex:none; box-shadow:0 6px 16px rgba(0,0,0,.18);border:3px solid #fff;outline:3px solid var(--brand-soft)} .hc-brand .hc-badge img{width:100%;height:100%;object-fit:cover} .hc-logo-text{font-family:'Baloo 2';font-weight:800;font-size:26px;line-height:1;color:var(--blue)} .hc-logo-text>span{color:var(--brand)} .hc-logo-text small{display:block;font-family:'Nunito',sans-serif;font-weight:600;font-size:11px;letter-spacing:2px; text-transform:uppercase;color:var(--muted);margin-top:3px} .hc-search{flex:1;display:flex;align-items:center;background:var(--cream);border:2px solid var(--line); border-radius:50px;padding:6px 6px 6px 20px;max-width:480px;margin:0} .hc-search input[type=text]{flex:1;border:none;background:none;font-family:'Nunito',sans-serif;font-size:15px;outline:none;color:var(--ink);box-shadow:none} .hc-search button{border:none;cursor:pointer;background:var(--brand);color:#fff;width:42px;height:42px;border-radius:50%; font-size:17px;flex:none;display:flex;align-items:center;justify-content:center} .hc-search button:hover{background:var(--brand-dark)} .hc-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none} .hc-icon-btn{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:'Baloo 2';font-size:11px;font-weight:700; color:var(--blue);padding:8px 12px;border-radius:14px;transition:.2s;position:relative;text-decoration:none} .hc-icon-btn:hover{background:var(--brand-soft);color:var(--brand)} .hc-icon-btn .hc-em{font-size:21px;line-height:1} .hc-icon-btn .hc-count{position:absolute;top:2px;right:6px;background:var(--brand);color:#fff;font-size:10px; min-width:18px;height:18px;border-radius:50%;display:grid;place-items:center;padding:0 4px} /* masquer SEULEMENT logo/recherche/compte/panier classic (PAS le menu #_desktop_top_menu qui est aussi dans displayTop) ; remplacés par .hc-head. DOM conservé pour ne pas casser le JS panier ni le mobile. */ @media(min-width:768px){ #_desktop_logo,#search_widget,#_desktop_user_info,#_desktop_cart{display:none!important} .header-nav .hidden-sm-down{display:none!important} /* le menu reste seul dans la rangée classic -> on l'étire en pleine largeur (la colonne logo masquée est retirée du flux) */ .header-top .header-top-right{width:100%;max-width:100%;flex:0 0 100%;float:none} } /* ---------- Header ---------- */ #header{background:var(--white);box-shadow:0 2px 20px rgba(58,90,120,.06)} #header .header-top{background:var(--white);padding:14px 0} #header .logo{max-height:64px;width:auto} /* barre de recherche */ #search_widget form,#header .ps-search input,.search-widget form{border-radius:50px} #search_widget input[type=text]{background:var(--cream);border:2px solid var(--line);border-radius:50px;padding:10px 20px 10px 40px} #search_widget input[type=text]:focus{border-color:var(--brand)} /* loupe calée verticalement au centre, juste avant le texte « Rechercher » */ #search_widget form{position:relative} #search_widget .material-icons.search{ position:absolute;left:6px;top:15%; margin:0;font-size:20px;color:var(--muted);pointer-events:none; } #search_widget button[type=submit]{background:var(--brand);color:#fff;border-radius:50%} /* compte / panier / wishlist (header right) */ .header-nav,.user-info,.blockcart{font-family:'Nunito'} .blockcart{background:transparent} .blockcart.active,.blockcart{color:var(--blue)} /* panier en-tête : aligner verticalement le badge avec le texte « Panier » */ .blockcart .header,.blockcart .header>a{display:flex;align-items:center;gap:6px} .blockcart .cart-products-count{ display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;padding:0; background:var(--brand);color:#fff;border-radius:50%; font-size:12px;font-weight:700;line-height:1; } /* Ligne « Il y a N article(s) dans votre panier » du modal d'ajout : centrée et en blanc. Posée sur un bandeau corail, sinon le blanc serait invisible sur le fond blanc du modal. Scopé au modal pour ne pas affecter le badge rond de l'en-tête. */ #blockcart-modal .cart-content p.cart-products-count{ display:block; /* annule le flex de theme.css pour autoriser le centrage */ text-align:center; color:#fff; /* sélecteur aussi spécifique que theme.css (#id .classe p.classe) */ background:var(--brand); border-radius:50px; padding:8px 16px; } /* menu principal (ps_mainmenu) */ /* le conteneur .menu est en inline-block dans theme.css (#header .menu) -> il se réduit à ses items et margin-left:auto n'a pas d'espace pour pousser. On le force en pleine largeur. */ #_desktop_top_menu{display:block!important;width:100%} /* barre de menu en flex (comme la maquette) pour pouvoir pousser des items à droite */ #_desktop_top_menu .top-menu[data-depth="0"]{display:flex!important;align-items:center;flex-wrap:wrap;gap:4px;list-style:none;padding:0;margin:0} /* « Aperçu des couleurs » + items suivants alignés à droite. :last-child = couvre le cas actuel (Aperçu = dernier item) quelle que soit sa classe ; .cms-page/.link/[id*=apercu] = robustesse si on ajoute « Promos » après. */ #_desktop_top_menu .top-menu[data-depth="0"]>li:last-child, #_desktop_top_menu .top-menu[data-depth="0"]>li.cms-page, #_desktop_top_menu .top-menu[data-depth="0"]>li.link, #_desktop_top_menu .top-menu[data-depth="0"]>li[id*="apercu" i]{margin-left:auto!important} #_desktop_top_menu .top-menu a,.menu .top-menu a{font-family:'Baloo 2';font-weight:600;color:var(--blue);border-radius:50px} #_desktop_top_menu .top-menu a:hover,#_desktop_top_menu .top-menu li.current>a{background:var(--brand-soft);color:var(--brand)} .menu>ul>li>a:hover{color:var(--brand)} /* casse normale comme la maquette (theme.css force les MAJUSCULES sur depth 0 et .dropdown-submenu) */ #header .header-top #_desktop_top_menu .top-menu a[data-depth="0"]{text-transform:none;color:var(--blue)} /* chevron ▾ sur les entrées qui ont un sous-menu */ #_desktop_top_menu .top-menu[data-depth="0"]>li:has(.sub-menu)>a[data-depth="0"]::after{content:"▾";font-size:.7em;margin-left:6px;opacity:.85;vertical-align:middle} /* sous-menu : carte verticale compacte ancrée sous le parent (au lieu de la barre pleine largeur de classic) */ #_desktop_top_menu .top-menu[data-depth="0"]>li{position:relative} #_desktop_top_menu .top-menu .sub-menu{width:auto;min-width:240px;margin-left:0;left:0;top:100%; border-radius:18px;box-shadow:var(--shadow);border:1px solid var(--line);padding:8px} #_desktop_top_menu .top-menu .sub-menu ul[data-depth="1"]>li{float:none;margin:0} #_desktop_top_menu .top-menu a.dropdown-submenu{text-transform:none;color:var(--blue);display:block; padding:9px 14px;border-radius:12px;font-weight:600} #_desktop_top_menu .top-menu a.dropdown-submenu:hover{background:var(--brand-soft);color:var(--brand)} /* ---------- Fil d'Ariane ---------- */ .breadcrumb{background:transparent;padding:14px 0} .breadcrumb ol{padding-left:0} .breadcrumb li a{color:var(--muted);font-weight:600} .breadcrumb li a:hover{color:var(--brand)} .breadcrumb li::after{color:var(--line)} /* ---------- En-tête de catégorie ---------- */ #category #left-column .block-category,.block-category{background:linear-gradient(135deg,var(--pink-bg),var(--sage-soft)); border-radius:var(--radius);box-shadow:none;border:none; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} #js-product-list-header h1,.block-category h1,#category h1{font-family:'Baloo 2';color:var(--blue);text-align:center;margin-bottom:0} .category-description{color:#5a5a5a} /* ---------- Sous-catégories : nom centré dans un rectangle arrondi ---------- */ #subcategories .subcategory-heading{color:var(--blue);font-family:'Baloo 2'} #subcategories ul li{position:relative} #subcategories ul li .subcategory-image{padding:0} /* le rectangle (vide) devient une carte arrondie blanche, contenu centré */ #subcategories ul li .subcategory-image a.img{display:flex;align-items:center;justify-content:center;min-height:90px; padding:12px;border:2px solid var(--line);border-radius:16px;background:#fff;transition:.2s} #subcategories ul li:hover .subcategory-image a{padding:12px;border:2px solid var(--brand)} /* le nom est superposé, centré dans le rectangle (au lieu d'être sous lui) */ #subcategories ul li h5{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center; padding:10px 14px;pointer-events:none} #subcategories ul li h5 .subcategory-name{color:var(--blue);font-family:'Baloo 2';font-weight:700;text-transform:none; line-height:1.2;pointer-events:auto} #subcategories ul li h5 .subcategory-name:hover{color:var(--brand)} /* ---------- Tri / compteur / pagination ---------- */ .products-sort-order .select-title,.sort-by-row .btn{border-radius:50px;border:2px solid var(--line);background:#fff;color:var(--blue);font-family:'Nunito';font-weight:600} /* centrer verticalement le libellé et la flèche dans la pilule de tri (flex annule le float du chevron) */ .products-sort-order{text-align:right} .products-sort-order .select-title{display:inline-flex;width:auto;align-items:center;justify-content:flex-start;gap:10px;text-align:left} .products-sort-order .select-title .material-icons{float:none;line-height:1} /* desktop : « Tri par : » et la box rétrécies à leur contenu et groupées à droite */ @media (min-width:768px){ .sort-by-row{justify-content:flex-end;align-items:center;gap:10px} .sort-by-row .sort-by,.sort-by-row .products-sort-order{flex:0 0 auto;width:auto;max-width:none} .sort-by-row .sort-by{padding-right:0} } .total-products,.products-selection .total-products{font-weight:700;color:var(--blue)} .pagination .page-list{gap:8px;display:flex;flex-wrap:wrap;justify-content:flex-end} .pagination .page-list a,.pagination .page-list span{border-radius:14px;background:#fff;box-shadow:var(--shadow);color:var(--blue); font-family:'Baloo 2';font-weight:700;min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 12px;border:none} /* texte + chevron du Précédent/Suivant sur une seule ligne, icône centrée */ .pagination .page-list a .material-icons{font-size:20px;line-height:1} .pagination .page-list .current a,.pagination .current a{background:var(--brand);color:#fff} /* ---------- Facettes (ps_facetedsearch) — réplique maquette ---------- */ /* carte (theme.css met padding:0/border-top/box-shadow:none en 3 ids -> !important) */ #search_filters{background:#fff!important;border:none!important;border-top:none!important;border-radius:var(--radius)!important; box-shadow:var(--shadow)!important;padding:8px 22px 18px!important;margin-bottom:24px;position:relative} /* en-tête « Filtrer par » + « Tout effacer » sur une ligne, soulignée */ #search_filters>.h6{font-family:'Baloo 2';font-size:18px;color:var(--blue);font-weight:700;text-transform:none!important; padding:16px 0 8px;margin:0;border-bottom:2px solid var(--line);display:block} #search_filters #_desktop_search_filters_clear_all{position:absolute;top:14px;right:22px;margin:0} #search_filters .js-search-filters-clear-all{background:none;border:none;color:var(--muted);font-weight:700;font-size:12.5px;padding:0} #search_filters .js-search-filters-clear-all:hover{color:var(--brand)} #search_filters .js-search-filters-clear-all .material-icons{display:none} /* sections de facette + séparateurs */ #search_filters .facet{padding:6px 0!important;border-bottom:1px solid var(--line)!important;background:transparent;box-shadow:none} #search_filters .facet:last-child{border-bottom:none!important} /* titre de facette : bleu, casse normale, chevron à droite */ #search_filters .facet .facet-title,#search_filters .facet .h6{color:var(--blue)!important;font-family:'Baloo 2';font-size:15px; font-weight:700;text-transform:none!important;padding:12px 0 8px!important;margin:0;display:flex;align-items:center;justify-content:space-between} #search_filters .facet .facet-title::after{content:"▾";color:var(--muted);font-size:12px;font-weight:400} /* liste : libellé à gauche, compteur à droite */ #search_filters .facet ul{margin:0} #search_filters .facet ul li{padding:0!important;border-top:none!important} #search_filters .facet .facet-label{display:flex;align-items:center;gap:8px;padding:4px 0;color:#555} #search_filters .facet .facet-label a{display:flex;align-items:center;width:100%;margin:0!important;color:#555!important;font-size:14.5px;font-weight:400} #search_filters .facet .facet-label:hover a{color:var(--brand)!important} #search_filters .facet .facet-label.active a{color:var(--brand)!important;font-weight:700} #search_filters .facet .facet-label .magnitude{margin-left:auto;color:var(--muted);font-size:12.5px;font-weight:600} /* cases à cocher custom : carré arrondi -> corail + ✓ blanc quand coché */ #search_filters .custom-checkbox input[type=checkbox]+span:not(.color){width:20px;height:20px;border:2px solid var(--line); border-radius:7px;margin:0!important;display:inline-flex;align-items:center;justify-content:center;background:#fff;flex:none} #search_filters .custom-checkbox input[type=checkbox]:checked+span:not(.color){background:var(--brand);border-color:var(--brand)} #search_filters .custom-checkbox input[type=checkbox]+span:not(.color) .checkbox-checked{color:#fff!important;font-size:16px;margin:0!important} /* facette couleur : pastilles rondes en ligne, anneau corail si actif, sans libellé texte (comme la maquette) */ #search_filters .facet ul:has(span.color){display:flex;flex-wrap:wrap;gap:10px;padding-top:4px} #search_filters .facet ul:has(span.color) li{padding:0!important} #search_filters .facet ul:has(span.color) .facet-label{padding:0} #search_filters .facet ul:has(span.color) .facet-label a{display:none} #search_filters .custom-checkbox span.color{width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line)!important;margin:0!important} #search_filters .facet-label.active .custom-checkbox span.color,#search_filters .custom-checkbox span.color:hover{box-shadow:0 0 0 2px var(--brand)!important;border-color:#fff!important} /* slider prix : piste fine, range + poignées corail, valeurs bleues */ .faceted-slider .ui-slider{height:6px;border-radius:50px;background:var(--line);border:none;margin:14px 4px 12px} .faceted-slider .ui-slider .ui-slider-range{background:var(--brand)} .faceted-slider .ui-slider .ui-slider-handle{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--brand); top:-6px;box-shadow:var(--shadow);margin-left:-9px} .faceted-slider p,#search_filters .faceted-slider .ui-slider-pips{color:var(--blue);font-weight:700;font-size:13px} /* ---------- Cartes produit (miniatures) ---------- */ .product-miniature .thumbnail-container,.product-miniature{border-radius:var(--radius);background:#fff;box-shadow:var(--shadow); border:none;transition:.25s;overflow:hidden} .product-miniature .thumbnail-container:hover,.product-miniature:hover .thumbnail-container{transform:translateY(-6px);box-shadow:var(--shadow-hover)} /* fond de carte uniforme blanc (avant : zone image crème = même couleur que la page -> cartes qui se fondent) */ .product-miniature .thumbnail-top,.product-miniature .thumbnail.product-thumbnail,.product-miniature .thumbnail-container .product-thumbnail{background:#fff} .product-miniature .product-title a{font-family:'Baloo 2';color:var(--ink);font-size:16px} .product-miniature .product-title a:hover{color:var(--brand)} .product-miniature .price,.product-price{font-family:'Baloo 2';font-weight:700;color:var(--brand);font-size:20px} .product-miniature .regular-price{color:var(--muted);font-weight:600} /* ---- toutes les cartes à la même hauteur (indépendamment de la longueur du titre) ---- */ /* la grille en flex étire chaque colonne à la hauteur de la plus haute */ .products{display:flex;flex-wrap:wrap;align-items:stretch} /* l'élément flex direct est .product (la colonne) qui contient l'article .product-miniature */ .products>.product{display:flex;height:auto;margin-bottom:26px} .product-miniature{display:flex;flex-direction:column;width:100%;height:100%} /* la carte devient une colonne flex pleine hauteur */ .product-miniature .thumbnail-container{display:flex;flex-direction:column;height:100%;width:100%;margin-bottom:0} /* zone image à hauteur fixe identique partout, image centrée sans déformation */ .product-miniature .thumbnail-top{flex:0 0 auto} .product-miniature .thumbnail-container .product-thumbnail{display:flex;align-items:center;justify-content:center;height:240px} .product-miniature .thumbnail-container .product-thumbnail img{width:auto;max-width:100%;max-height:100%;height:auto} /* bloc texte : prend le reste de la hauteur, prix collé en bas */ .product-miniature .product-description{display:flex;flex-direction:column;flex:1 1 auto} /* titre : 2 lignes max, place réservée pour 2 lignes -> 1 et 2 lignes occupent la même hauteur */ .product-miniature .product-title{min-height:2.6em;display:flex;align-items:center;justify-content:center} .product-miniature .product-title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .product-miniature .product-price-and-shipping{margin-top:auto} /* ---- Home : une seule rangée de produits par bloc (.featured-products) ---- */ /* colonnes par rangée : 1 (<576) / 2 (≥576) / 3 (≥992) / 4 (≥1200) -> on masque le surplus de la 1re rangée. Scopé à .featured-products : les pages catégorie (#js-product-list) ne sont pas affectées. */ .featured-products .products>.product:nth-child(n+2){display:none} @media(min-width:576px){ .featured-products .products>.product:nth-child(-n+2){display:flex} .featured-products .products>.product:nth-child(n+3){display:none} } @media(min-width:992px){ .featured-products .products>.product:nth-child(-n+3){display:flex} .featured-products .products>.product:nth-child(n+4){display:none} } @media(min-width:1200px){ .featured-products .products>.product:nth-child(-n+4){display:flex} .featured-products .products>.product:nth-child(n+5){display:none} } .product-flag,.product-flags li.product-flag{background:var(--brand);color:#fff;border-radius:50px;font-weight:800;text-transform:uppercase; font-size:11px;letter-spacing:.5px;padding:5px 12px} .product-flag.new{background:var(--sage)} .product-flag.discount,.product-flags li.discount,.discount-percentage{background:var(--amber)} /* ---------- Page produit ---------- */ .product-prices .current-price .price,.current-price span,.product-price.current-price{font-family:'Baloo 2';font-weight:800;color:var(--brand)} .product-prices{background:var(--pink-bg);border-radius:var(--radius);padding:18px 22px} .product-information .product-description-short{color:#5a5a5a} .product-quantity .qty .input-group,#quantity_wanted{border-radius:50px} #quantity_wanted{text-align:center} /* aligner sur une même ligne, centrés verticalement : sélecteur de quantité, bouton « Ajouter au panier » et cœur wishlist (hook displayProductActions) */ .product-quantity{align-items:center;gap:12px;flex-wrap:wrap} .product-quantity .qty,.product-quantity .add{float:none;margin:0} /* centrer icône + texte dans le bouton corail (annule padding-top/line-height:inherit de theme.css) */ .product-actions .add-to-cart{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding-top:0;padding-bottom:0;line-height:1} /* séparation avec le message « Derniers articles en stock » (passé en block pour que le margin s'applique) */ #product-availability{display:block;margin-top:16px} .product-variants .control-label{font-family:'Baloo 2';color:var(--blue)} .product-actions .btn-primary,.product-add-to-cart button{border-radius:50px} .nav-tabs{border-bottom:2px solid var(--line)} .nav-tabs .nav-link{font-family:'Baloo 2';color:var(--muted);border:none;border-bottom:3px solid transparent} .nav-tabs .nav-link.active{color:var(--blue);border-bottom-color:var(--brand);background:transparent} .product-features .data-sheet,.data-sheet{border-radius:var(--radius);overflow:hidden} /* ---------- Panier ---------- */ .cart-grid .cart-container,.cart-grid .cart-summary,.card.cart-container,.card.cart-summary{border-radius:var(--radius);box-shadow:var(--shadow);border:none} .cart-summary .cart-summary-line .value{font-weight:700;color:var(--ink)} .cart-summary .cart-total .value,.cart-detailed-totals .cart-total .value{font-family:'Baloo 2';font-weight:800;color:var(--brand);font-size:24px} .cart-item .product-line-grid{align-items:center} .cart-grid-right .checkout a.btn,.checkout.cart-detailed-actions .btn{border-radius:50px} .product-line-info .label{color:var(--blue)} /* PayPal « Payer en plusieurs fois » (BNPL) du panier : le module met le conteneur en flex/justify-end, ce qui fait mesurer le bouton trop étroit par le SDK PayPal -> texte FR rogné. On l'aligne à gauche + largeur mini explicite. */ .cart-grid-body [data-container-bnpl],[data-container-bnpl]{justify-content:flex-start!important;overflow:visible!important} [paypal-bnpl-button-container]{width:100%;min-width:240px;max-width:340px;overflow:visible!important} [paypal-bnpl-button-container] iframe{min-width:240px!important;max-width:none!important} /* ---------- Tunnel de commande ---------- */ #checkout .checkout-step{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:none;margin-bottom:20px} #checkout .step-title{font-family:'Baloo 2';color:var(--blue)} #checkout .step-number{background:var(--brand);color:#fff;border-radius:50%} #checkout .checkout-step.-current .step-number,#checkout .checkout-step.-complete .step-number{background:var(--sage)} .payment-option,.delivery-option{border:2px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:12px;transition:.2s} .payment-option:hover,.delivery-option:hover{border-color:var(--brand-soft)} .delivery-option.selected,.payment-option label input:checked + *{border-color:var(--brand)} #payment-confirmation .btn-primary,#checkout .btn-primary{border-radius:50px;font-size:16px;padding:14px 28px} /* ---------- Confirmation de commande ---------- */ #content-hook_order_confirmation,.page-order-confirmation{border-radius:var(--radius);box-shadow:var(--shadow);border:none} #content-hook_order_confirmation .material-icons.done,.order-confirmation .material-icons.done{color:var(--sage)} /* ---------- Compte client ---------- */ #authentication .page-header h1,#identity .page-header h1,#history h1,#my-account h1{font-family:'Baloo 2';color:var(--blue)} #my-account .links a .link-item{border-radius:var(--radius);box-shadow:var(--shadow);border:none;background:#fff;transition:.25s} #my-account .links a:hover .link-item{transform:translateY(-4px);box-shadow:var(--shadow-hover);color:var(--brand)} #my-account .links a .material-icons{color:var(--brand)} /* pas de contour/bordure au clic sur les tuiles du compte (conservé au clavier via :focus-visible pour l'accessibilité) */ .page-customer-account a:focus:not(:focus-visible), #my-account .links a:focus:not(:focus-visible), #my-account .links a:active{outline:none;box-shadow:none} #my-account .links a:focus:not(:focus-visible) .link-item{box-shadow:var(--shadow)} .page-customer-account #content,.page-addresses .address{border-radius:var(--radius);box-shadow:var(--shadow);border:none} /* cartes d'adresse : tuiles plus larges (col-lg-6) + hauteur égale, pays lisible, pied de carte en bas */ .page-addresses .address{height:100%;display:flex;flex-direction:column;overflow:hidden} .page-addresses .address .address-body{flex:1 1 auto} .page-addresses .address .address-body address{min-height:0;line-height:1.7;font-size:.95rem;margin-bottom:0} .page-addresses .address .address-footer{margin-top:auto;border-top:1px solid var(--line)} /* ---------- Formulaires ---------- */ .form-control,input.form-control,select.form-control,textarea.form-control{border:2px solid var(--line);background:var(--cream); border-radius:14px;padding:11px 16px} .form-control:focus{border-color:var(--brand);background:#fff;box-shadow:none} .form-control-label,.control-label{font-weight:700;color:var(--blue)} /* annule le height:calc(2.5rem - 2px) que theme.css impose aux