du nom). Scope mobile
uniquement (575px, meme seuil que la grille 2 colonnes), uniquement
sur les cards qui ont un prix barre (:has, le JS ne touche pas les
autres). */
@media (max-width: 575px) {
.product-title:has(.kms-regular-price-beside-title) {
display: flex !important;
flex-wrap: nowrap !important;
align-items: baseline !important;
justify-content: flex-start !important;
text-align: left !important;
gap: 6px !important;
}
.product-title:has(.kms-regular-price-beside-title) a {
text-align: left !important;
flex: 1 1 auto !important;
min-width: 0 !important;
white-space: normal !important;
}
.kms-regular-price-beside-title {
display: inline !important;
text-align: left !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
}
/* --- Panier mobile : marges pour eviter que les elements soient colles
aux bords de l'ecran / de leur div (round mobile, 07/10). Complete le
padding existant de .kms-cart-line (round 1, 14px/10px) et la
restructuration grid (round 2 reconstruit) sans les remplacer. */
@media (max-width: 767px) {
.cart-container,
.cart-summary {
padding-left: 14px !important;
padding-right: 14px !important;
}
.kms-cart-line {
padding: 0 !important;
}
.kms-cart-line .product-line-grid-right .row {
padding-right: 4px !important;
}
.cart-summary-line {
padding: 10px 10px !important;
}
}
/* --- Pages catalogue/marque/CMS sur mobile : le titre natif PrestaShop
(.page-header, provient de templates/page.tpl - utilise par les pages
CMS type "Livraison"/"Mentions legales", pas par les pages
categorie/marque qui ont leur propre gabarit) et le bloc de description
marque touchaient les bords de l'ecran, aucun padding natif sur mobile
(round mobile, 07/10, demande de Max). #products (zone de grille
produits) touchait aussi les bords.
08/10 (demande de Max) : le TITRE de la page marque (, dans
manufacturer.tpl) n'a lui aucune classe/id - contrairement au titre des
pages categorie (dans .block-category) ou CMS (dans .page-header) - et
touchait donc toujours les bords. Cible via :has() sur son frere
#manufacturer-short_description pour ne viser que ce titre precis, sans
toucher les autres du site (categorie, recherche...).
08/10 (suite, demande de Max) : le bloc de description marque n'a lui
non plus aucune classe propre - verifie en live (document.getElementById
confirme), c'est un ID (#manufacturer-description), pas une classe
(.manufacturer-description ne matchait donc jamais rien, d'ou le padding
toujours a 0 malgre une regle en apparence correcte). */
@media (max-width: 767px) {
.page-header,
#manufacturer-description,
h1:has(+ #manufacturer-short_description) {
padding: 10px !important;
}
#products {
color: #7a7a7a !important;
padding: 10px 10px !important;
}
}
/* --- Texte de la description marque (#manufacturer-description /
#manufacturer-short_description) affiche en gris fonce au lieu de la
couleur du theme (21/10, demande de Max, bug trouve par Max). Cause :
le theme PARENT (classic/theme.css) contient une regle mal "scopee" -
.page-content.page-cms ul,p{color:#7a7a7a} - ou seul "ul" est prefixe
par ".page-content.page-cms", le "p" qui suit la virgule s'applique a
TOUS les
du site (bug du theme d'origine, jamais corrige par
PrestaShop). Invisible partout ailleurs car chaque bloc custom a deja
sa propre couleur de texte plus specifique qui l'ecrase - mais ces deux
blocs marque n'avaient jamais eu de contenu avant Botafarm, donc rien
ne corrigeait cette regle par defaut. On ne touche pas au theme parent,
on neutralise juste l'effet ici, sur tous les ecrans (le bug n'est pas
limite au mobile). */
#manufacturer-description,
#manufacturer-short_description {
color: var(--kms-text) !important;
}
#manufacturer-description p,
#manufacturer-description ul,
#manufacturer-description li,
#manufacturer-short_description p,
#manufacturer-short_description ul,
#manufacturer-short_description li {
color: var(--kms-text) !important;
}
/* --- Footer bottom (copyright) sur mobile : le bloc etait une seule
ligne de texte collee (copyright + mentions + marque deposee), illisible
une fois repliee sur un ecran etroit. Decoupee en 3 lignes dans
footer.tpl (spans kms-footer-copy-line1/2/3), ici on les passe en bloc
centre uniquement sur mobile (round mobile, 07/10, demande de Max) --
en desktop elles restent inline, flux inchange. */
@media (max-width: 767px) {
.kms-footer-copy-line1,
.kms-footer-copy-line2,
.kms-footer-copy-line3 {
display: block !important;
text-align: center !important;
}
}
/* ===== PAGE CONFIRMATION DE COMMANDE (apres paiement) =====
Page jamais visitee avant le 1er test d'achat reel (20/10) : aucune
des deux cartes de cette page n'a de classe/scope dediee, elle heritait
donc telle quelle du theme Classic parent (fond blanc, police generique).
#content-hook_order_confirmation (bloc "commande confirmee") n'a pas la
classe .page-order-confirmation (seule #content.page-content l'a), d'ou
le scope via l'id de body #order-confirmation (php_self du controleur
PrestaShop, stable) qui couvre les deux blocs + le retour de paiement
(#content-hook_payment_return, injecte par le module de paiement) et le
footer de confirmation (#content-hook-order-confirmation-footer). */
#order-confirmation #content-hook_order_confirmation,
#order-confirmation #content.page-content.page-order-confirmation,
#order-confirmation #content-hook_payment_return,
#order-confirmation #content-hook-order-confirmation-footer {
background: var(--kms-bg-card) !important;
color: var(--kms-text) !important;
font-family: var(--kms-font-body) !important;
border-radius: 8px !important;
box-shadow: 0 0 0 1px rgba(41,214,255,0.08) inset !important;
}
#order-confirmation .card-title,
#order-confirmation #order-details h3 {
color: var(--kms-blue) !important;
font-family: var(--kms-font-display) !important;
text-shadow: 0 0 10px rgba(41,214,255,0.3) !important;
}
#order-confirmation .card-title .done {
color: var(--kms-green) !important;
text-shadow: 0 0 10px rgba(127,255,0,0.4) !important;
}
#order-confirmation p,
#order-confirmation li,
#order-confirmation span,
#order-confirmation td,
#order-confirmation .order-confirmation-table {
color: var(--kms-text) !important;
}
#order-confirmation a {
color: var(--kms-blue) !important;
}
#order-confirmation a:hover {
color: var(--kms-orange) !important;
}
#order-confirmation hr,
#order-confirmation .order-line {
border-color: var(--kms-border) !important;
opacity: 0.8 !important;
}
#order-confirmation .total-value td,
#order-confirmation #order-reference-value {
color: var(--kms-orange) !important;
font-weight: 700 !important;
}
/* ===== BLOC REDUCTION APPLIQUEE (panier/checkout) =====
22/10, demande de Max : depuis l'ajout de la regle panier automatique
"livraison gratuite des 40€", une nouvelle ligne apparait dans le bloc
promo (cart-voucher.tpl, theme PARENT classic, non surcharge) :
. Par defaut le theme parent pousse le contenu
(.float-xs-right) tout a droite, ce qui laisse un grand vide a gauche
vu que le label est vide pour une regle automatique (pas de code).
On passe la ligne en flex centre au lieu de la laisser collee a
droite. Reste compatible avec un futur code promo saisi manuellement
(label + montant + icone de suppression centres ensemble). */
.promo-name.card-block .cart-summary-line {
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
gap: 4px;
}
.promo-name.card-block .cart-summary-line .float-xs-right {
float: none !important;
display: flex;
align-items: center;
gap: 4px;
}
/* ===== PAGES "MON COMPTE" (infos perso / adresses / historique / detail commande) =====
22/10, demande de Max : check complet de contraste sur toutes les pages Mon compte.
Meme cause que le fix #order-confirmation du 20/10 : ces controleurs PrestaShop
(IdentityController, AddressesController, AddressController, HistoryController,
OrderDetailController) n'ont aucun scope dedie dans le theme enfant, ils heritent
donc tels quels du theme parent Classic : fond blanc (#content.page-content, .box,
article.address) + texte gris quasi-noir (labels, th de tableau, liens de pied de
carte). Comme --kms-text (#d3e6ff, bleu tres clair) est pense pour un fond sombre,
le texte devenait illisible une fois pose sur ces fonds blancs residuels (d'ou
l'effet "tout en gris" signale par Max). On applique le meme traitement que la
page de confirmation : fond carte sombre (--kms-bg-card) + texte clair partout,
sur les 5 pages concernees (id de body = php_self du controleur, stable). */
#identity #content.page-content,
#addresses #content.page-content,
#address #content.page-content,
#history #content.page-content,
#order-detail #content.page-content,
#identity .box,
#addresses .box,
#address .box,
#history .box,
#order-detail .box,
#addresses article.address {
background: var(--kms-bg-card) !important;
color: var(--kms-text) !important;
font-family: var(--kms-font-body) !important;
border: 1px solid var(--kms-border) !important;
border-radius: 8px !important;
}
/* Libelles de formulaire (Titre, Prenom, Nom, Alias, Adresse...) : noirs par defaut */
#identity label,
#addresses label,
#address label,
#history label,
#order-detail label,
#order-detail address,
#addresses article.address h4 {
color: var(--kms-text) !important;
}
/* Champs de saisie (input/select/textarea) : fond gris clair + texte gris */
#identity .form-control,
#addresses .form-control,
#address .form-control,
#history .form-control,
#order-detail .form-control {
background: var(--kms-bg) !important;
color: var(--kms-text) !important;
border-color: var(--kms-border) !important;
}
#identity .form-control::placeholder,
#address .form-control::placeholder {
color: var(--kms-muted) !important;
}
/* Textes secondaires (mentions "Optionnel", aide de saisie, paragraphes gris,
pied de formulaire) : gris generique du theme parent -> gris-bleu de la
palette KMS, qui reste lisible sur fond sombre tout en gardant une hierarchie
visuelle avec le texte principal. */
#identity small,
#addresses small,
#address small,
#history small,
#order-detail small,
#identity .form-footer,
#address .form-footer,
#order-detail .box p,
#addresses .addresses-footer a,
#addresses article.address .address-footer a {
color: var(--kms-muted) !important;
}
/* Tableaux (historique des commandes, suivi "pas a pas", liste des articles) */
#history table th,
#order-detail table th {
background: var(--kms-bg) !important;
color: var(--kms-muted) !important;
border-color: var(--kms-border) !important;
}
#history table td,
#order-detail table td,
#history table tr,
#order-detail table tr {
background: transparent !important;
color: var(--kms-text) !important;
border-color: var(--kms-border) !important;
}
/* Titres de section (ex: "SUIVRE VOTRE COMMANDE PAS A PAS", "Adresse de livraison") */
#order-detail .box h3,
#order-detail .box h4 {
color: var(--kms-blue) !important;
font-family: var(--kms-font-display) !important;
}
/* Liens generiques dans ces blocs (Modifier/Mettre a jour/Supprimer, Commander a
nouveau...) : coherents avec le reste du site (bleu nav, orange au survol) */
#identity a,
#addresses a,
#address a,
#history a,
#order-detail a {
color: var(--kms-blue) !important;
}
#identity a:hover,
#addresses a:hover,
#address a:hover,
#history a:hover,
#order-detail a:hover {
color: var(--kms-orange) !important;
}
/* ===== AUTRES PAGES "MON COMPTE" (avoirs / bons de reduction / listes d'envies /
donnees personnelles RGPD) =====
22/10 (suite), demande de Max : meme traitement que les 5 pages precedentes,
sur les 4 dernieres pages du menu "Votre compte" jamais traitees non plus :
#order-slip (Avoirs), #discount (Bons de reduction), #module-blockwishlist-lists
(Mes listes d'envies, module tiers blockwishlist), #module-psgdpr-gdpr (Mes
donnees personnelles, module tiers psgdpr avec son propre encart gris clair
.psgdprinfo17, distinct du fond #content). */
#order-slip #content.page-content,
#discount #content.page-content,
#module-blockwishlist-lists #content.page-content,
#module-psgdpr-gdpr #content.page-content {
background: var(--kms-bg-card) !important;
color: var(--kms-text) !important;
font-family: var(--kms-font-body) !important;
border: 1px solid var(--kms-border) !important;
border-radius: 8px !important;
}
#order-slip h1,
#discount h1,
#module-blockwishlist-lists h1,
#module-psgdpr-gdpr h1,
#module-psgdpr-gdpr h2 {
color: var(--kms-orange) !important;
font-family: var(--kms-font-display) !important;
}
/* Encarts "vide" (alert-info Bootstrap : "Vous n'avez reçu aucun avoir",
"Vous ne possédez pas de bon de réduction") */
#order-slip .alert-info,
#discount .alert-info {
background: var(--kms-bg) !important;
color: var(--kms-text) !important;
border-color: var(--kms-border) !important;
}
/* Liste de souhaits : titre de liste force en noir par le CSS propre au
module blockwishlist */
#module-blockwishlist-lists .wishlist-list-item-title {
color: var(--kms-text) !important;
}
#module-blockwishlist-lists .wishlist-list-item {
border-color: var(--kms-border) !important;
}
/* RGPD : encart gris clair propre au module psgdpr (fond a lui, distinct du
fond #content deja fonce par la regle ci-dessus) */
#module-psgdpr-gdpr .psgdprinfo17 {
background: var(--kms-bg) !important;
color: var(--kms-text) !important;
border: 1px solid var(--kms-border) !important;
border-radius: 6px !important;
}
#order-slip a:not(.btn),
#discount a:not(.btn),
#module-blockwishlist-lists a:not(.btn),
#module-psgdpr-gdpr a:not(.btn) {
color: var(--kms-blue) !important;
}
#order-slip a:not(.btn):hover,
#discount a:not(.btn):hover,
#module-blockwishlist-lists a:not(.btn):hover,
#module-psgdpr-gdpr a:not(.btn):hover {
color: var(--kms-orange) !important;
}
/* ===== BULLE D'AIDE "FORCE DU MOT DE PASSE" (popover Bootstrap/Tether) =====
22/10, demande de Max : la bulle qui s'affiche au clic dans le champ mot
de passe ("Ajoutez un autre mot ou deux...") est un popover Bootstrap
generique (theme parent, classic/theme.css) : fond blanc fixe
(background-color:#fff) alors que PrestaShop injecte le texte avec la
couleur heritee du site (--kms-text, bleu tres clair) -> texte quasi
invisible sur fond blanc. Pas scope a une page en particulier : ce widget
peut apparaitre partout ou PrestaShop affiche un champ "mot de passe"
(Mon compte, creation de compte au checkout...), d'ou un fix global
plutot que scope a #identity. La "fleche" du popover est faite avec des
bordures ::before/::after (pas d'element .arrow separe dans ce theme) :
on recolore les 4 directions sans se soucier de laquelle est active,
seule celle avec une largeur non nulle s'affiche reellement. */
.popover {
background: var(--kms-bg-card) !important;
border: 1px solid var(--kms-border) !important;
box-shadow: 0 0 16px rgba(41,214,255,0.15) !important;
}
.popover-title,
.popover-content,
.popover-header,
.popover-body {
background: transparent !important;
color: var(--kms-text) !important;
font-family: var(--kms-font-body) !important;
}
.popover::before {
border-top-color: var(--kms-border) !important;
border-bottom-color: var(--kms-border) !important;
border-left-color: var(--kms-border) !important;
border-right-color: var(--kms-border) !important;
}
.popover::after {
border-top-color: var(--kms-bg-card) !important;
border-bottom-color: var(--kms-bg-card) !important;
border-left-color: var(--kms-bg-card) !important;
border-right-color: var(--kms-bg-card) !important;
}
.popover .popover-title::before {
border-bottom-color: var(--kms-border) !important;
}
/* ===== BOUTON "AFFICHER / MASQUER" (champ mot de passe) =====
Meme demande : le bouton de bascule de visibilite du mot de passe est un
".btn" Bootstrap generique (gris plein, pas de couleur du theme) - pas
scope non plus, meme widget utilisable partout ou un champ mot de passe
apparait. */
button[data-action="show-password"] {
background: linear-gradient(135deg, #0a1f3d, #0d2a50) !important;
border: 1px solid var(--kms-blue-d) !important;
color: var(--kms-blue) !important;
font-family: var(--kms-font-body) !important;
font-weight: 700 !important;
}
button[data-action="show-password"]:hover {
background: linear-gradient(135deg, #0d2a50, #123a68) !important;
color: white !important;
}
/* ===== BALAYAGE GLOBAL DU GRIS DU THEME PARENT (classic/theme.css) =====
22/10, demande de Max : "on peut vérifier partout où PrestaShop veut
mettre du gris dégueu on met nos couleurs ?" - audit du theme.css parent
pour les classes generiques qui forcent du gris/blanc sans que le theme
enfant les ait jamais recolorees. Liste trouvee (couleur d'origine entre
parentheses) :
- .text-muted (#7a7a7a, !important) : classe Bootstrap generique pour
texte secondaire, utilisee un peu partout par PrestaShop.
- .form-control-comment (#7a7a7a) : texte d'aide sous un champ de
formulaire (trouve par Max sous le mot de passe).
- .custom-select (#7a7a7a, fond blanc) : liste deroulante native
PrestaShop (ex: pays dans un formulaire d'adresse).
- .checkbox-checked (icone material-icons, #232323 presque noir) + la
case elle-meme (bordure grise ~#979797) : la coche de confirmation
d'une checkbox (ex: "Recevoir notre newsletter") - signalee par Max
comme invisible sur fond sombre.
- .btn-tertiary au survol (texte #232323 sur fond #ddd). */
.text-muted {
color: var(--kms-muted) !important;
}
.form-control-comment {
color: var(--kms-muted) !important;
}
.custom-select {
background-color: var(--kms-bg) !important;
color: var(--kms-text) !important;
border-color: var(--kms-border) !important;
}
/* Case a cocher / bouton radio "maison" (icone material-icons dans un
, pas le .custom-control-indicator standard de Bootstrap) */
label input[type="checkbox"] + span,
label input[type="radio"] + span {
border-color: var(--kms-border) !important;
}
.checkbox-checked,
.radio-checked {
color: var(--kms-blue) !important;
}
.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary.focus {
color: var(--kms-bg) !important;
background-color: var(--kms-blue) !important;
}