+ 3 selects (Largeur/Hauteur/Diametre). stylesheet_new.css met
.container50 { display:flex } sans wrap/direction → le "Avant"/"Arriere"
se retrouve en ligne avec les selects et les chevauche. On corrige le layout
desktop : h5 pleine largeur en titre, puis les 3 selects en ligne dessous. */
.recherche_complet form .recherche_bloc > div .dimension .container50 {
flex-wrap: wrap !important;
flex-direction: row !important;
align-content: flex-start;
gap: 8px 12px;
}
.recherche_complet .col-recherche .container50 h5 {
width: 100% !important;
margin: 0 0 4px !important;
color: #fff;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.recherche_complet .col-recherche .container50 > div {
width: calc(33.33% - 8px) !important;
display: flex;
flex-direction: column;
gap: 4px;
}
.recherche_complet .col-recherche .container50 .title_field {
color: #fff;
font-size: 12px;
}
/* ========== 3) Forms (inputs, selects, boutons) ========== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
font-family: inherit;
font-size: 14px;
padding: 8px 10px;
border: 1px solid #d1d5db;
border-radius: 4px;
background: #fff;
color: #222;
line-height: 1.4;
transition: border-color 0.15s;
box-sizing: border-box;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #1e3a8a;
box-shadow: 0 0 0 2px rgba(30,58,138,0.15);
}
input[type="submit"],
input[type="button"],
button {
font-family: inherit;
font-size: 14px;
font-weight: 600;
padding: 9px 18px;
background: #1e3a8a;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:not(.btn-menu):not(.navbar-toggle):hover {
background: #d33;
}
/* Bouton hamburger menu mobile : doit rester transparent (icone seule) */
button.btn-menu,
button.btn-menu:hover,
button.btn-menu:focus,
button.btn-menu:active,
.navbar-toggle,
.navbar-toggle:hover,
.navbar-toggle:focus,
.navbar-toggle:active {
background: transparent !important;
background-color: transparent !important;
color: inherit !important;
box-shadow: none !important;
outline: none !important;
}
/* ===== Remplace les boutons image GIF osCommerce par des boutons CSS modernes =====
Le HTML legacy utilise 
. On cache l'img et
on style le parent via :has(). Le texte du bouton vient via ::after. */
a:has(> img[src*="button_"]) {
display: inline-block;
background: #1e3a8a;
color: #fff !important;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none !important;
font-size: 13px !important;
font-weight: 600;
white-space: nowrap;
line-height: 1;
transition: background 0.15s;
border: none;
cursor: pointer;
vertical-align: middle;
}
a:has(> img[src*="button_"]):hover {
background: #d33;
color: #fff !important;
}
a:has(> img[src*="button_"]) > img {
display: none !important;
}
/* Texte des boutons via ::after */
a:has(> img[src*="button_in_cart"])::after { content: "Ajouter au panier"; }
a:has(> img[src*="button_continue_shopping"])::after { content: "Continuer mes achats"; }
a:has(> img[src*="button_continue"])::after { content: "Continuer"; }
a:has(> img[src*="button_reviews"])::after { content: "Avis"; }
a:has(> img[src*="button_write_review"])::after { content: "Écrire un avis"; }
a:has(> img[src*="button_buy_now"])::after { content: "Acheter"; }
a:has(> img[src*="button_login"])::after { content: "Connexion"; }
a:has(> img[src*="button_search"])::after { content: "Rechercher"; }
a:has(> img[src*="button_quick_find"])::after { content: "Recherche"; }
a:has(> img[src*="button_send"])::after { content: "Envoyer"; }
a:has(> img[src*="button_back"])::after { content: "← Retour"; }
a:has(> img[src*="button_confirm_order"])::after { content: "Confirmer la commande"; }
a:has(> img[src*="button_confirm"])::after { content: "Confirmer"; }
a:has(> img[src*="button_checkout"])::after { content: "Commander"; }
a:has(> img[src*="button_create_account"])::after { content: "Créer un compte"; }
a:has(> img[src*="button_delete"])::after { content: "Supprimer"; }
a:has(> img[src*="button_update_cart"])::after { content: "Mettre à jour le panier"; }
a:has(> img[src*="button_update"])::after { content: "Mettre à jour"; }
a:has(> img[src*="button_change_address"])::after { content: "Changer l'adresse"; }
a:has(> img[src*="button_choose_address"])::after { content: "Choisir l'adresse"; }
a:has(> img[src*="button_deliver_here"])::after { content: "Livrer ici"; }
a:has(> img[src*="button_add_address"])::after { content: "Ajouter une adresse"; }
a:has(> img[src*="button_address_book"])::after { content: "Carnet d'adresses"; }
a:has(> img[src*="button_edit_account"])::after { content: "Modifier le compte"; }
a:has(> img[src*="button_history"])::after { content: "Historique"; }
a:has(> img[src*="button_notifications"])::after { content: "Notifications"; }
a:has(> img[src*="button_remove_notifications"])::after { content: "Retirer notifications"; }
a:has(> img[src*="button_redeem"])::after { content: "Utiliser"; }
a:has(> img[src*="button_shipping_options"])::after { content: "Options de livraison"; }
a:has(> img[src*="button_tell_a_friend"])::after { content: "Partager"; }
/* input type="image" : si encore présent dans le HTML (sources non refactorisées).
Réduit l'impact visuel — restent fonctionnels. */
input[type="image"][src*="button_"] {
border: 0;
cursor: pointer;
}
/* Boutons legacy convertis via tep_image_submit() en
. On cache l'img et
on style le parent via :has(). Le texte du bouton vient via ::after. */
a:has(> img[src*="button_"]) {
display: inline-block;
background: #1e3a8a;
color: #fff !important;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none !important;
font-size: 13px !important;
font-weight: 600;
white-space: nowrap;
line-height: 1;
transition: background 0.15s;
border: none;
cursor: pointer;
vertical-align: middle;
}
a:has(> img[src*="button_"]):hover {
background: #d33;
color: #fff !important;
}
a:has(> img[src*="button_"]) > img {
display: none !important;
}
/* Texte des boutons via ::after */
a:has(> img[src*="button_in_cart"])::after { content: "Ajouter au panier"; }
a:has(> img[src*="button_continue_shopping"])::after { content: "Continuer mes achats"; }
a:has(> img[src*="button_continue"])::after { content: "Continuer"; }
a:has(> img[src*="button_reviews"])::after { content: "Avis"; }
a:has(> img[src*="button_write_review"])::after { content: "Écrire un avis"; }
a:has(> img[src*="button_buy_now"])::after { content: "Acheter"; }
a:has(> img[src*="button_login"])::after { content: "Connexion"; }
a:has(> img[src*="button_search"])::after { content: "Rechercher"; }
a:has(> img[src*="button_quick_find"])::after { content: "Recherche"; }
a:has(> img[src*="button_send"])::after { content: "Envoyer"; }
a:has(> img[src*="button_back"])::after { content: "← Retour"; }
a:has(> img[src*="button_confirm_order"])::after { content: "Confirmer la commande"; }
a:has(> img[src*="button_confirm"])::after { content: "Confirmer"; }
a:has(> img[src*="button_checkout"])::after { content: "Commander"; }
a:has(> img[src*="button_create_account"])::after { content: "Créer un compte"; }
a:has(> img[src*="button_delete"])::after { content: "Supprimer"; }
a:has(> img[src*="button_update_cart"])::after { content: "Mettre à jour le panier"; }
a:has(> img[src*="button_update"])::after { content: "Mettre à jour"; }
a:has(> img[src*="button_change_address"])::after { content: "Changer l'adresse"; }
a:has(> img[src*="button_choose_address"])::after { content: "Choisir l'adresse"; }
a:has(> img[src*="button_deliver_here"])::after { content: "Livrer ici"; }
a:has(> img[src*="button_add_address"])::after { content: "Ajouter une adresse"; }
a:has(> img[src*="button_address_book"])::after { content: "Carnet d'adresses"; }
a:has(> img[src*="button_edit_account"])::after { content: "Modifier le compte"; }
a:has(> img[src*="button_history"])::after { content: "Historique"; }
a:has(> img[src*="button_notifications"])::after { content: "Notifications"; }
a:has(> img[src*="button_remove_notifications"])::after { content: "Retirer notifications"; }
a:has(> img[src*="button_redeem"])::after { content: "Utiliser"; }
a:has(> img[src*="button_shipping_options"])::after { content: "Options de livraison"; }
a:has(> img[src*="button_tell_a_friend"])::after { content: "Partager"; }
/* input type="image" : si encore présent dans le HTML (sources non refactorisées).
Réduit l'impact visuel — restent fonctionnels. */
input[type="image"][src*="button_"] {
border: 0;
cursor: pointer;
}
/* Boutons legacy convertis via tep_image_submit() en