— les seules lignes d'adresse,
imbriquées dans .address-item.
Encadrer les deux dessinait un cadre parasite autour du texte dans le
tunnel. Le sélecteur retient donc l'élément, pas seulement la classe. */
article.address {
border: 1px solid var(--tlm-gris-clair);
border-radius: 0;
box-shadow: none;
}
article.address .address-body {
padding: 1rem;
}
article.address .address-body h4 {
font-family: var(--tlm-titre);
text-transform: uppercase;
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
article.address .address-footer {
background: var(--tlm-bleu-voile);
border-top: 1px solid var(--tlm-gris-clair);
padding: 0.6rem 1rem;
}
/* ---------------------------------------------------------------------
Notifications
--------------------------------------------------------------------- */
.alert,
.notifications-container .alert {
border-radius: 0;
border-width: 0 0 0 var(--tlm-trait);
box-shadow: none;
font-family: var(--tlm-texte);
}
.alert-success {
background: var(--tlm-bleu-voile);
border-left-color: var(--tlm-bleu);
color: var(--tlm-noir);
}
.alert-info {
background: var(--tlm-gris-fond);
border-left-color: var(--tlm-noir);
color: var(--tlm-noir);
}
.alert-warning,
.alert-danger {
background: var(--tlm-gris-fond);
border-left-color: var(--tlm-noir);
color: var(--tlm-noir);
}
/* ---------------------------------------------------------------------
Parcours PunchOut
Le bouton de transfert vers Coupa reste l'action principale du panier : même
traitement que les autres actions primaires. Il n'est pas distingué
visuellement de l'action « Commander » du parcours standard, parce qu'un
acheteur ne voit jamais les deux — le marqueur de panier détermine lequel
s'affiche.
--------------------------------------------------------------------- */
.punchout-handoff-form .btn,
#punchout-handoff .btn,
.cart-detailed-actions .btn-punchout {
width: 100%;
padding: 1rem 1.75rem;
font-size: 1rem;
}
/* ---------------------------------------------------------------------
Pied de page
Le site de référence sépare le pied de page par un trait de 2px et garde un
fond clair : pas de bandeau sombre.
--------------------------------------------------------------------- */
#footer {
background: var(--tlm-blanc);
border-top: var(--tlm-trait) solid var(--tlm-noir);
padding-top: 2rem;
color: var(--tlm-noir);
}
#footer .footer-container {
background: transparent;
box-shadow: none;
margin-top: 0;
padding-top: 0;
}
#footer .h3,
#footer .myaccount-title,
#footer .block-contact .block-contact-title,
#footer .links .h3 {
font-family: var(--tlm-titre);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 0.95rem;
color: var(--tlm-noir);
}
#footer a,
#footer .links a {
color: var(--tlm-gris);
font-size: 0.9rem;
}
#footer a:hover,
#footer .links a:hover {
color: var(--tlm-bleu);
}
#footer .block-contact {
border-left: 0;
padding-left: 0;
color: var(--tlm-gris);
font-size: 0.9rem;
}
#footer .copyright,
#footer .bottom-footer {
border-top: 1px solid var(--tlm-gris-clair);
margin-top: 1.5rem;
padding: 1rem 0;
font-size: 0.8rem;
color: var(--tlm-gris);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ---------------------------------------------------------------------
Écran de connexion
Il reste le premier écran vu par un client B2B : il porte la charte de façon
plus marquée que le reste, sans changer la structure du formulaire.
--------------------------------------------------------------------- */
/* `#authentication` a été retiré de cette section : la page de connexion est
entièrement reprise plus bas, et ces règles — deux identifiants de
spécificité — l'emportaient sur elle. Reste `#password`, l'écran de
récupération, qui garde l'habillage courant de la boutique. */
#password .page-header {
border-bottom: var(--tlm-trait) solid var(--tlm-noir);
}
#password .form-control-label {
text-transform: uppercase;
letter-spacing: 0.04em;
}
#password .form-control {
padding: 0.7rem 0.9rem;
}
#password .forgot-password a {
font-size: 0.85rem;
}
/* ---------------------------------------------------------------------
Adaptations petits écrans
--------------------------------------------------------------------- */
@media (max-width: 767px) {
h1, .h1 { font-size: 1.9rem; }
h2, .h2 { font-size: 1.5rem; }
#header .logo,
#_desktop_logo img { max-height: 48px; }
#product .product-prices .current-price,
#product .product-price { font-size: 1.6rem; }
.btn,
.btn-primary,
.btn-secondary { padding: 0.7rem 1.25rem; }
/* Le thème remplace déjà le tableau d'historique par des blocs .order en
dessous de « sm ». Reste le tableau de confirmation de commande, qui n'a
pas d'équivalent : il défile dans sa propre boîte plutôt que d'élargir la
page. */
.order-confirmation-table {
display: block;
overflow-x: auto;
}
#history .orders .order {
border: 1px solid var(--tlm-gris-clair);
margin-bottom: 0.5rem;
padding: 0.75rem;
}
}
/* Les animations d'apparition du thème ne sont pas imposées à qui les refuse. */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* =====================================================================
Corrections de l'audit visuel du 28 août 2026
Regroupées ici, et non fondues dans les sections ci-dessus, pour qu'on
voie d'un coup d'œil ce qui a été ajouté après coup et pourquoi.
`custom.css` est chargée en DERNIER par le thème : à spécificité égale
elle l'emporte déjà. Les sélecteurs ci-dessous ne sont alourdis que
lorsqu'il faut battre une règle plus spécifique du thème parent ou d'un
module, et le commentaire dit alors laquelle.
===================================================================== */
/* ---------------------------------------------------------------------
1. Carte d'adresse du tunnel (page « Commande », étape 2)
Trois défauts cumulés. Le cadre parasite et le filet noir venaient de la
charte, corrigés plus haut à la source. Restait le vide : le thème impose
11.7rem de hauteur minimale à l'en-tête de la carte pour aligner deux
cartes côte à côte. Avec une seule adresse courte, cela laisse ~80px de
blanc. Le conteneur est déjà en flex, qui égalise les hauteurs tout seul :
la hauteur minimale ne sert plus à rien.
--------------------------------------------------------------------- */
body#checkout section.checkout-step .address-item > header {
min-height: 0;
padding-bottom: 0.5rem;
}
/* Le
interne ne porte plus de cadre (voir article.address
plus haut), mais il garde une marge propre pour ne pas coller au libellé. */
body#checkout section.checkout-step .address-item .address {
margin-top: 0.35rem;
padding: 0;
border: 0;
}
/* Le
interne de la carte : simple séparation avant les actions. */ body#checkout section.checkout-step .address-item hr { margin: 0; border-top-color: var(--tlm-gris-clair); } /* --------------------------------------------------------------------- 2. Phrase d'introduction de l'historique de commandes Le thème balise « Vous trouverez ici vos commandes… » en. La règle
générale de titraison la passait en majuscules dans la police d'affichage,
qui est faite pour des titres courts : sur une phrase entière, elle devient
pénible à lire. On la rend à sa nature de texte courant.
Ciblé sur #history uniquement : ailleurs, un
interne de la carte : simple séparation avant les actions. */ body#checkout section.checkout-step .address-item hr { margin: 0; border-top-color: var(--tlm-gris-clair); } /* --------------------------------------------------------------------- 2. Phrase d'introduction de l'historique de commandes Le thème balise « Vous trouverez ici vos commandes… » en
. La règle
générale de titraison la passait en majuscules dans la police d'affichage,
qui est faite pour des titres courts : sur une phrase entière, elle devient
pénible à lire. On la rend à sa nature de texte courant.
Ciblé sur #history uniquement : ailleurs, un reste un titre.
--------------------------------------------------------------------- */
#history .page-content > h6,
#order-detail .page-content > h6 {
font-family: var(--tlm-texte);
font-weight: 300;
text-transform: none;
letter-spacing: -0.02em;
line-height: 1.6;
font-size: 1rem;
color: var(--tlm-gris);
margin-bottom: 1.25rem;
}
/* ---------------------------------------------------------------------
3. Bloc panier de l'en-tête
Thème parent : `#header .header-nav .cart-preview.active` — un identifiant
et trois classes. Il faut au moins autant pour reprendre la main.
--------------------------------------------------------------------- */
#header .header-nav .blockcart.cart-preview,
#header .header-nav .blockcart.cart-preview.active {
background: var(--tlm-bleu);
}
#header .header-nav .blockcart.cart-preview a,
#header .header-nav .blockcart.cart-preview.active a,
#header .header-nav .blockcart.cart-preview.active i,
#header .header-nav .blockcart.cart-preview .cart-products-count {
color: var(--tlm-blanc);
}
#header .header-nav .blockcart.cart-preview a:hover,
#header .header-nav .blockcart.cart-preview.active a:hover {
color: var(--tlm-blanc);
text-decoration: underline;
}
/* ---------------------------------------------------------------------
4. Étiquettes produit
Thème parent : `.product-flags li.product-flag` — deux classes ET un
élément. Ma règle à deux classes perdait sur le seul `li`.
--------------------------------------------------------------------- */
.product-flags li.product-flag,
.product-miniature .product-flags li.product-flag {
background: var(--tlm-bleu);
color: var(--tlm-blanc);
border-radius: 0;
font-family: var(--tlm-titre);
font-weight: 400;
font-size: 0.72rem;
letter-spacing: 0.04em;
}
.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale {
background: var(--tlm-noir);
}
/* ---------------------------------------------------------------------
5. Adresse sélectionnée dans le tunnel
Thème parent : bordure cyan de 3px. On garde l'épaisseur — c'est ce qui
rend la sélection lisible — et on change la couleur.
--------------------------------------------------------------------- */
body#checkout section.checkout-step .address-item.selected {
background: var(--tlm-blanc);
border: var(--tlm-bleu) 3px solid;
}
body#checkout section.checkout-step .address-item {
background: var(--tlm-blanc);
border: 3px solid var(--tlm-gris-clair);
}
/* ---------------------------------------------------------------------
6. Pastille de l'étape courante
Elle est verte dans le thème : seule tache de vert du site, juste à côté
d'un titre bleu.
--------------------------------------------------------------------- */
body#checkout section.checkout-step .step-number,
body#checkout section.checkout-step.-reachable.-current .step-number,
body#checkout section.checkout-step.-current.-reachable.-complete .step-number {
background: var(--tlm-bleu);
color: var(--tlm-blanc);
border-radius: 0;
font-family: var(--tlm-titre);
}
/* ---------------------------------------------------------------------
7. Badge d'état de commande
Sa COULEUR vient de l'état de commande défini en back-office, appliquée en
style en ligne : le CSS ne peut pas la reprendre sans `!important`, et le
faire masquerait une information — le vert d'« expédiée » et le rouge d'une
annulation ont un sens pour l'acheteur. On ne touche donc qu'à la FORME,
pour la ramener aux angles droits du reste de l'interface.
--------------------------------------------------------------------- */
.label-pill,
#history .label-pill,
#order-detail .label-pill {
border-radius: 0;
font-family: var(--tlm-titre);
font-weight: 400;
letter-spacing: 0.03em;
padding: 0.3rem 0.6rem;
}
/* ---------------------------------------------------------------------
8. Bouton « Afficher » du mot de passe
Thème parent : `.input-group .input-group-btn > .btn`, trois classes et un
enfant direct.
--------------------------------------------------------------------- */
.input-group .input-group-btn > .btn,
.input-group .input-group-btn > .btn[data-action="show-password"] {
background: var(--tlm-blanc);
border: var(--tlm-trait) solid var(--tlm-bleu);
color: var(--tlm-bleu);
border-radius: 0;
font-family: var(--tlm-titre);
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.04em;
padding: 0.4rem 0.9rem;
}
.input-group .input-group-btn > .btn:hover,
.input-group .input-group-btn > .btn:focus {
background: var(--tlm-bleu);
color: var(--tlm-blanc);
}
/* ---------------------------------------------------------------------
9. Boutons du module d'avis
`productcomments.css` est chargée avant `custom.css` : une même spécificité
suffit à reprendre la main.
--------------------------------------------------------------------- */
/* `.btn.btn-comment` et non `.btn-comment` seul : ma propre règle de base
contient `button.btn`, qui vaut une classe et un élément et l'emportait
donc sur une simple classe. C'est la charte qui se battait contre
elle-même — le fond et la couleur passaient, la bordure non. */
.btn.btn-comment,
.btn.btn-comment-big,
.btn.btn-comment-huge,
.btn.btn-comment-inverse {
background: var(--tlm-blanc);
border: var(--tlm-trait) solid var(--tlm-bleu);
color: var(--tlm-bleu);
border-radius: 0;
font-family: var(--tlm-titre);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.02em;
box-shadow: none;
}
.btn.btn-comment:hover,
.btn.btn-comment-big:hover,
.btn.btn-comment-huge:hover,
.btn.btn-comment-inverse:hover {
background: var(--tlm-bleu);
border-color: var(--tlm-bleu);
color: var(--tlm-blanc);
}
.btn.btn-comment .material-icons,
.btn.btn-comment-big .material-icons,
.btn.btn-comment-huge .material-icons {
color: inherit;
}
/* ---------------------------------------------------------------------
10. Sélecteur de quantité
Régression de la charte, découverte en mobile. Le rembourrage généreux
posé sur tous les `.btn` s'appliquait aussi aux deux flèches du composant
touchspin, qui deviennent alors trop larges pour tenir à côté du champ et
passent à la ligne. Les flèches sont un contrôle, pas un bouton d'action :
elles reprennent leur gabarit d'origine.
--------------------------------------------------------------------- */
.bootstrap-touchspin .input-group-btn-vertical > .btn,
.bootstrap-touchspin .btn {
padding: 6px 10px;
border: 1px solid var(--tlm-gris-clair);
border-radius: 0;
min-width: 0;
line-height: 1;
}
.bootstrap-touchspin input.form-control,
.bootstrap-touchspin input.input-group {
border-radius: 0;
background: var(--tlm-blanc);
}
/* Réduire le rembourrage ne suffisait pas : le composant empile un champ et
une colonne de flèches avec des flottants et un `display: table-cell`. Dès
que la place manque — c'est-à-dire en mobile — les flèches passent sous le
champ. Une rangée flex les y maintient quelle que soit la largeur, sans
toucher au script qui pilote le composant. */
#product .product-quantity .qty,
#product .product-add-to-cart .qty {
flex: 0 0 auto;
}
#product .bootstrap-touchspin {
display: flex;
align-items: stretch;
float: none;
width: auto;
}
#product .bootstrap-touchspin input.form-control,
#product .bootstrap-touchspin input.input-group {
float: none;
width: 3rem;
height: auto;
}
#product .bootstrap-touchspin .input-group-btn-vertical {
display: flex;
flex-direction: column;
float: none;
width: auto;
vertical-align: initial;
}
#product .bootstrap-touchspin .input-group-btn-vertical > .btn {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
height: auto;
}
/* Les flèches sont dessinées en position absolue par le thème ; une fois le
bouton passé en flex, ce calage n'a plus lieu d'être. */
#product .bootstrap-touchspin .input-group-btn-vertical i {
position: static;
top: auto;
left: auto;
}
/* ---------------------------------------------------------------------
11. Curseur de prix des filtres
jQuery UI, laissé gris par défaut. Rien d'autre à faire que recolorer :
le script n'est pas touché.
--------------------------------------------------------------------- */
#search_filters .ui-slider,
#search_filters .ui-slider-horizontal {
background: var(--tlm-gris-clair);
border: 0;
border-radius: 0;
height: 4px;
}
#search_filters .ui-slider .ui-slider-range,
#search_filters .ui-slider-horizontal .ui-slider-range {
background: var(--tlm-bleu);
border-radius: 0;
}
#search_filters .ui-slider .ui-slider-handle,
#search_filters .ui-slider-horizontal .ui-slider-handle {
background: var(--tlm-bleu);
border: 0;
border-radius: 0;
width: 12px;
height: 16px;
top: -6px;
cursor: pointer;
}
/* ---------------------------------------------------------------------
12 & 13. Liste d'envies, partage
Seuls éléments ronds d'une interface entièrement à angles droits. On
supprime l'arrondi et l'ombre, on garde la cible tactile.
--------------------------------------------------------------------- */
.wishlist-button-add,
.product-miniature .wishlist-button-add,
.wishlist-button-product,
.product-actions .wishlist-button-add {
border-radius: 0;
box-shadow: none;
border: 1px solid var(--tlm-gris-clair);
background: var(--tlm-blanc);
}
.wishlist-button-add:hover,
.wishlist-button-product:hover {
border-color: var(--tlm-bleu);
}
.wishlist-button-add i,
.wishlist-button-product i,
.wishlist-button-add svg,
.wishlist-button-product svg {
color: var(--tlm-bleu);
fill: var(--tlm-bleu);
}
.social-sharing a,
.social-sharing li a,
#product .social-sharing li {
border-radius: 0;
box-shadow: none;
}
.social-sharing li a:hover,
.social-sharing a:hover {
color: var(--tlm-bleu);
}
/* ---------------------------------------------------------------------
14. Titre du bandeau newsletter
Ce n'est pas un titre au sens du balisage — le thème l'écrit dans un
élément porteur de l'identifiant `block-newsletter-label` — d'où son
apparence différente de tous les autres titres de section.
--------------------------------------------------------------------- */
.block_newsletter #block-newsletter-label,
#footer .block_newsletter #block-newsletter-label {
font-family: var(--tlm-titre);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 1.15rem;
line-height: 1.15;
color: var(--tlm-noir);
}
/* ---------------------------------------------------------------------
15. Barre de service
« Contactez-nous » est seul dans une colonne de grille dimensionnée pour
bien plus de contenu, d'où le vide. On laisse la grille faire et on ramène
simplement les blocs l'un vers l'autre.
--------------------------------------------------------------------- */
@media (min-width: 992px) {
#header .header-nav .left-nav {
padding-right: 0;
}
#header .header-nav .right-nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.25rem;
}
#header .header-nav > .container > .row {
align-items: center;
}
}
/* ---------------------------------------------------------------------
16. Formulaire de connexion
Le
générique est désormais discret (voir la règle `hr`), mais dans un
formulaire aussi court même un filet clair n'apporte rien : il sépare le
bouton de connexion de la création de compte, alors que les deux forment
une seule proposition.
--------------------------------------------------------------------- */
#password .page-content hr {
display: none;
}
/* ---------------------------------------------------------------------
17. Logo de l'en-tête du tunnel
Le tunnel a son propre en-tête, avec son propre conteneur : la limite de
hauteur posée sur l'en-tête courant ne l'atteignait pas.
--------------------------------------------------------------------- */
body#checkout #header .logo,
body#checkout #_desktop_logo img,
body#checkout .header .logo,
#checkout #header img.logo {
max-height: 64px;
width: auto;
}
/* ---------------------------------------------------------------------
18. Tuiles du tableau de bord du compte
Le thème pose 1.875rem de marge basse sous chaque tuile. Le cadre ajouté
par la charte s'arrête au contenu, mais la marge, elle, crée une bande
entre les rangées. On passe par une grille : espacement régulier, plus de
marge résiduelle.
--------------------------------------------------------------------- */
.page-my-account #content .links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
justify-content: initial;
}
.page-my-account #content .links a {
margin-bottom: 0;
padding: 0;
width: auto;
}
.page-my-account #content .links a span.link-item {
height: 100%;
padding: 1.5rem 1rem;
}
/* ---------------------------------------------------------------------
19. Actions de la carte d'adresse
Gris clair sur fond bleu pâle : ce sont les deux seules actions de la page.
Le thème les met en `.text-muted`, une classe faite pour du texte
secondaire, pas pour des commandes.
--------------------------------------------------------------------- */
/* Le thème pose `.page-addresses .address .address-footer a` — trois classes.
Il faut donc au moins trois classes de notre côté. */
.page-addresses article.address .address-footer a,
.page-addresses .addresses-footer a {
color: var(--tlm-bleu);
font-weight: 400;
}
.page-addresses article.address .address-footer a:hover,
.page-addresses .addresses-footer a:hover {
color: var(--tlm-noir);
text-decoration: underline;
}
/* Dans le tunnel, les mêmes liens portent `.text-muted`, que Bootstrap
déclare en `!important`. C'est le seul endroit de cette feuille où on y
répond de la même façon : sans cela, la règle est inatteignable, et il
s'agit des deux seules actions de la carte. */
body#checkout .address-item .address-footer a,
body#checkout .address-item .address-footer a.text-muted {
color: var(--tlm-bleu) !important;
}
body#checkout .address-item .address-footer a:hover,
body#checkout .address-item .address-footer a.text-muted:hover {
color: var(--tlm-noir) !important;
}
/* ---------------------------------------------------------------------
20. Libellé de la carte d'adresse
Compte : . Tunnel : . Les deux passent
dans la police d'affichage, comme les autres titres de bloc.
--------------------------------------------------------------------- */
article.address .address-body h4,
body#checkout .address-item .address-alias,
body#checkout .address-item header .h4 {
font-family: var(--tlm-titre);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 0.95rem;
color: var(--tlm-noir);
}
/* ---------------------------------------------------------------------
21. En-tête d'étape du tunnel en mobile
Le titre passe sur deux lignes et pousse « Modifier » en dessous. Le titre
et son action tiennent sur une ligne partagée, le titre absorbant le
rétrécissement.
--------------------------------------------------------------------- */
@media (max-width: 767px) {
body#checkout section.checkout-step .step-title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
font-size: 1.05rem;
}
body#checkout section.checkout-step .step-title .step-edit {
flex: 0 0 auto;
font-size: 0.75rem;
white-space: nowrap;
}
}
/* ---------------------------------------------------------------------
22. Titres produit du listing
Les majuscules serrées de la police d'affichage mangent la place, et la
référence — la seule chose qui distingue deux articles voisins — se fait
tronquer. On desserre légèrement, on réduit d'un cran, et on autorise deux
lignes au lieu d'une.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
Résidus de cyan relevés à la vérification
Le marqueur des boutons radio du thème — visible sur la sélection
d'adresse et le choix du transporteur. Le sélecteur du thème vaut trois
classes et deux éléments, il faut au moins autant.
--------------------------------------------------------------------- */
.custom-radio input[type="radio"]:checked + span,
body#checkout .custom-radio input[type="radio"]:checked + span {
background-color: var(--tlm-bleu);
}
.custom-checkbox input[type="checkbox"]:checked + span,
.custom-checkbox input[type="checkbox"] + span .checkbox-checked {
color: var(--tlm-bleu);
}
/* ---------------------------------------------------------------------
Fiche produit en mobile : la rangée quantité + ajout + liste d'envies
Remettre les flèches de quantité à leur place a élargi la rangée de 14px,
assez pour pousser le bouton « liste d'envies » hors de l'écran. La rangée
doit pouvoir se contracter : les flèches reprennent un gabarit plus étroit,
le bouton d'ajout accepte de rétrécir, et la rangée peut passer à la ligne
plutôt que de déborder.
--------------------------------------------------------------------- */
@media (max-width: 767px) {
#product .product-actions .product-add-to-cart,
#product .product-quantity {
flex-wrap: wrap;
row-gap: 0.5rem;
}
#product .product-quantity .add,
#product .product-actions .add {
flex: 1 1 auto;
min-width: 0;
}
#product .add-to-cart {
padding-left: 0.9rem;
padding-right: 0.9rem;
min-width: 0;
}
#product .bootstrap-touchspin .input-group-btn-vertical > .btn {
padding: 4px 7px;
}
}
/* =====================================================================
REFONTE — couche de correction
Chargée après tout le reste, y compris après la première charte plus haut :
à spécificité égale, c'est elle qui fait foi. Les sélecteurs ne sont
alourdis que pour battre une règle plus spécifique du thème parent.
===================================================================== */
/* ---------------------------------------------------------------------
1. Discipline typographique
Dolce Vita est une police d'affichage. Ses A et V obliques la rendent
illisible dès qu'on descend en petites capitales — c'était visible sur
« VOTRE COMPTE », les libellés de formulaire et les titres de colonnes du
pied de page. Elle est désormais cantonnée aux h1/h2, jamais sous 20px.
Tout le reste passe en Sofia Pro 600 avec un interlettrage de 0.04em, qui
donne le même caractère affirmé sans le coût de lisibilité.
--------------------------------------------------------------------- */
h1, .h1,
h2, .h2 {
font-family: var(--tm-display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0;
line-height: var(--tm-lh-tight);
color: var(--tm-ink);
}
h1, .h1 { font-size: var(--tm-fs-h1); margin-bottom: var(--tm-3); }
h2, .h2 { font-size: var(--tm-fs-h2); margin-bottom: var(--tm-2); }
/* h3 à h6 : ce sont des intertitres, pas des titres d'affichage. */
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: var(--tm-text);
font-weight: 600;
text-transform: none;
letter-spacing: 0.01em;
line-height: 1.3;
color: var(--tm-ink);
}
h3, .h3 { font-size: var(--tm-fs-h3); margin-bottom: var(--tm-2); }
h4, .h4 { font-size: var(--tm-fs-h4); margin-bottom: var(--tm-1); }
h5, .h5,
h6, .h6 { font-size: var(--tm-fs-base); margin-bottom: var(--tm-1); }
body {
font-family: var(--tm-text);
font-weight: 300;
font-size: var(--tm-fs-base);
line-height: var(--tm-lh-base);
letter-spacing: 0;
color: var(--tm-ink);
background: var(--tm-white);
}
/* Titre de page : lisible, pas étiré sur toute la largeur. Une ligne de 40px
qui traverse 1440px force le lecteur à balayer au lieu de lire. */
#main .page-header {
border: 0;
border-bottom: 1px solid var(--tm-line);
padding-bottom: var(--tm-2);
margin-bottom: var(--tm-4);
}
#main .page-header h1,
#main .page-header .h1 {
max-width: 45ch;
margin: 0;
text-align: left;
}
/* Les libellés, boutons, onglets et en-têtes de tableau reviennent au texte. */
.btn, .btn-primary, .btn-secondary, .btn-tertiary,
button.btn, input[type="submit"].btn,
.form-control-label, label,
.table thead th, .thead-default th,
#product .tabs .nav-tabs .nav-link,
body#checkout section.checkout-step .step-title,
.product-miniature .product-title,
.product-miniature .product-title a,
#footer .h3, #footer .links .h3, #footer .myaccount-title,
#footer .block-contact .block-contact-title,
.page-my-account #content .links a span.link-item,
#search_filters .facet-title, .block-categories .block-title, .block-title,
#header .menu > ul > li > a,
#_desktop_top_menu .top-menu a[data-depth="0"],
article.address .address-body h4,
body#checkout .address-item .address-alias,
.block_newsletter #block-newsletter-label,
.product-flags li.product-flag {
font-family: var(--tm-text);
font-weight: 600;
letter-spacing: 0.04em;
}
/* ---------------------------------------------------------------------
2. Rythme vertical
Les filets pleine largeur qui coupaient la page sans rien séparer
disparaissent, et le pied de page cesse de flotter au milieu du vide sur
les pages courtes.
--------------------------------------------------------------------- */
#wrapper {
padding-top: var(--tm-4);
padding-bottom: var(--tm-8);
}
#wrapper > .container > hr,
#main > hr,
#content-wrapper > hr {
display: none;
}
#main {
min-height: 50vh;
}
/* Un conteneur vide ne dessine plus de cadre : c'est ce qui produisait les
grands rectangles blancs bordés sur les pages sans contenu. */
#main .page-content:empty,
#main .page-footer:empty,
.block-categories:empty,
#category-description:empty,
.category-description:empty,
#category #content-wrapper .block-category:empty {
display: none;
}
#main .page-content,
#main .page-footer {
border: 0;
padding: 0;
}
/* ---------------------------------------------------------------------
3. En-tête
Une seule ligne, hauteur fixe, rien collé au bord. Le bloc panier était un
aplat coloré coupé par le haut et plaqué contre le bord de la fenêtre.
--------------------------------------------------------------------- */
#header {
background: var(--tm-white);
border-bottom: 1px solid var(--tm-line);
box-shadow: none;
position: sticky;
top: 0;
z-index: 100;
}
#header .header-top {
padding: 0 var(--tm-4);
border-bottom: 0;
}
#header .header-top > .container,
#header .header-nav > .container {
max-width: var(--tm-largeur);
}
#header .header-nav {
min-height: var(--tm-header-h);
padding: 0 var(--tm-4);
border-bottom: 1px solid var(--tm-line);
font-size: var(--tm-fs-sm);
text-transform: none;
letter-spacing: 0;
}
#header .header-nav > .container > .row,
#header .header-top > .container > .row {
align-items: center;
min-height: var(--tm-header-h);
}
/* Logo : hauteur fixe. L'image d'origine fait 1768px de large pour un
affichage à 90 : c'est un réglage back-office (voir la liste), mais la
hauteur est déjà cadrée ici. */
#header .logo,
#_desktop_logo img,
#header img.logo {
max-height: 40px;
width: auto;
}
/* Le panier n'est plus un aplat plein bord à bord : icône + compteur. */
#header .header-nav .blockcart.cart-preview,
#header .header-nav .blockcart.cart-preview.active {
height: auto;
margin-left: var(--tm-2);
padding: var(--tm-1) var(--tm-2);
background: var(--tm-surface);
border-radius: var(--tm-radius);
white-space: nowrap;
}
#header .header-nav .blockcart.cart-preview a,
#header .header-nav .blockcart.cart-preview.active a,
#header .header-nav .blockcart.cart-preview.active i {
color: var(--tm-ink);
}
#header .header-nav .blockcart.cart-preview .cart-products-count {
display: inline-block;
min-width: 20px;
padding: 0 6px;
margin-left: var(--tm-1);
background: var(--tm-primary);
color: var(--tm-white);
border-radius: var(--tm-radius-pill);
font-size: var(--tm-fs-xs);
font-weight: 600;
line-height: 20px;
text-align: center;
}
/* Ordre du bloc compte : le nom d'abord, la déconnexion ensuite et en
secondaire. Le DOM les place dans l'ordre inverse ; `order` les remet sans
toucher au gabarit. */
#header .header-nav #_desktop_user_info {
display: flex;
align-items: center;
gap: var(--tm-1);
}
#header .header-nav #_desktop_user_info .account {
order: 1;
font-weight: 600;
}
#header .header-nav #_desktop_user_info .logout {
order: 2;
color: var(--tm-ink-soft);
font-size: var(--tm-fs-sm);
}
/* Recherche : elle pesait un quart de la largeur, plus lourde que le logo. */
#header #search_widget,
#header .search-widgets {
max-width: 280px;
margin-left: auto;
}
#header #search_widget form,
#header .search-widgets form {
position: relative;
}
#header #search_widget form input[type="text"],
#header .search-widgets input[type="text"] {
height: 40px;
padding-left: var(--tm-2);
border: 1px solid var(--tm-line);
border-radius: var(--tm-radius);
background: var(--tm-white);
font-size: var(--tm-fs-sm);
}
/* ---------------------------------------------------------------------
4. Menu principal
Le module n'était accroché à aucun hook d'affichage : le menu n'existait
pas dans la page. Corrigé côté configuration ; ici on l'habille.
--------------------------------------------------------------------- */
#header .menu,
#_desktop_top_menu {
display: block;
}
#header .menu > ul,
#_desktop_top_menu .top-menu {
display: flex;
align-items: center;
gap: var(--tm-3);
margin: 0;
padding: 0;
list-style: none;
}
#header .menu > ul > li > a,
#_desktop_top_menu .top-menu > li > a[data-depth="0"] {
display: inline-block;
padding: var(--tm-3) 0;
font-size: var(--tm-fs-sm);
color: var(--tm-ink);
border-bottom: 2px solid transparent;
background: transparent;
transition: color var(--tm-transition), border-color var(--tm-transition);
}
#header .menu > ul > li > a:hover,
#_desktop_top_menu .top-menu > li > a[data-depth="0"]:hover,
#_desktop_top_menu .top-menu > li.current > a[data-depth="0"] {
color: var(--tm-primary);
border-bottom-color: var(--tm-primary);
background: transparent;
}
#_desktop_top_menu .top-menu .sub-menu {
border: 1px solid var(--tm-line);
border-radius: var(--tm-radius);
box-shadow: var(--tm-shadow-lift);
padding: var(--tm-2);
}
/* ---------------------------------------------------------------------
5. Boutons
Primaire en bleu encre, secondaire en contour. Le rayon de 4px et l'ombre
discrète remplacent l'aplat à angles vifs.
--------------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary,
button.btn,
input[type="submit"].btn {
min-height: 48px;
padding: 0 var(--tm-3);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--tm-1);
font-size: var(--tm-fs-sm);
text-transform: uppercase;
border-radius: var(--tm-radius);
border: 1px solid transparent;
box-shadow: none;
transition: background-color var(--tm-transition), color var(--tm-transition),
border-color var(--tm-transition), box-shadow var(--tm-transition);
}
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
background: var(--tm-primary);
border-color: var(--tm-primary);
color: var(--tm-white);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
background: var(--tm-primary-dark);
border-color: var(--tm-primary-dark);
color: var(--tm-white);
box-shadow: var(--tm-shadow);
}
.btn-secondary,
.btn-tertiary {
background: var(--tm-white);
border-color: var(--tm-primary);
color: var(--tm-primary);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-tertiary:hover,
.btn-tertiary:focus {
background: var(--tm-primary-wash);
border-color: var(--tm-primary);
color: var(--tm-primary-dark);
}
/* Le bouton d'affichage du mot de passe reste un contrôle, pas une action. */
.input-group .input-group-btn > .btn {
min-height: 40px;
padding: 0 var(--tm-2);
font-family: var(--tm-text);
font-weight: 600;
background: var(--tm-surface);
border: 1px solid var(--tm-line);
color: var(--tm-ink-soft);
}
.input-group .input-group-btn > .btn:hover {
background: var(--tm-line);
color: var(--tm-ink);
}
/* Focus clavier visible partout. */
:focus-visible {
outline: 2px solid var(--tm-primary);
outline-offset: 2px;
}
/* ---------------------------------------------------------------------
6. Listing catégorie
--------------------------------------------------------------------- */
/* Palier abaissé de 260 à 220 px. À 260, la page catégorie — dont la colonne
de filtres ne laisse que 825 px — ne tenait que deux colonnes de 400 px :
avec le cadre en 4:5, les tuiles montaient à 643 px de haut. À 220, elle en
tient trois de 259 px, soit exactement la densité de la page d'accueil, qui
dispose de 1110 px et reste à quatre colonnes de 259,5 px. */
#products .products,
.products.row,
#js-product-list .products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--tm-3);
margin: 0;
}
#products .products > *,
.products.row > *,
#js-product-list .products > * {
width: auto;
max-width: none;
flex: none;
padding: 0;
margin: 0;
}
/* Vignette « plein cadre ».
---------------------------------------------------------------------
Le gabarit imbrique les coloris trois niveaux plus bas que l'endroit où
ils doivent s'afficher :
.thumbnail-container
.thumbnail-top
a.product-thumbnail
.highlighted-informations <- absolue, révélée au survol
a.quick-view
.variant-links <- les pastilles sont ici
.product-description
.product-title
.product-price-and-shipping
`display: contents` fait disparaître les boîtes intermédiaires sans
toucher au gabarit : leurs enfants deviennent des enfants flex directs de
la carte, plaçables par `order`. `.product-description` doit en faire
partie, sinon le prix reste enfermé et les pastilles ne peuvent pas
s'intercaler entre la référence et lui. Le retrait latéral, porté par
cette boîte, se reporte donc sur chacun des blocs de texte. */
.product-miniature .thumbnail-top,
.product-miniature .highlighted-informations,
.product-miniature .product-description {
display: contents;
}
/* La carte doit occuper toute la hauteur de sa rangée, sinon les prix ne
s'alignent pas d'une colonne à l'autre.
`.js-product` reste un bloc. L'y passer en `display: flex` réduisait
l'article à la largeur de son CONTENU : les colonnes de la grille faisaient
bien 401 px, mais les cartes sortaient entre 230 et 268 px selon la
longueur du titre, et le cadre 4:5 traduisait aussitôt cet écart en
différence de hauteur. Un conteneur flex de niveau bloc, lui, occupe
naturellement toute la largeur. */
.js-product.product {
height: 100%;
}
.product-miniature {
display: flex;
height: 100%;
}
.product-miniature .thumbnail-container,
.product-miniature .card {
position: relative;
flex: 1 1 auto;
align-self: stretch;
display: flex;
flex-direction: column;
gap: var(--tm-1);
background: transparent;
border: 0;
box-shadow: none;
/* Le recadrage descend sur le cadre image : la carte, elle, doit laisser
dépasser l'étiquette et la surcouche d'aperçu rapide. */
overflow: visible;
transition: none;
}
/* Survol : seule l'image réagit. Plus de `translateY` — la carte ne se
dérobe plus sous le curseur au moment du clic. */
.product-miniature .thumbnail-container:hover .product-thumbnail img {
transform: scale(1.03);
}
/* --- Cadre image ---------------------------------------------------- */
/* Trois classes, pas deux. Le thème parent pose
`.product-miniature .thumbnail-container .product-thumbnail { height: calc(100% - 70px) }` :
une hauteur explicite l'emporte sur `aspect-ratio`, qui n'a plus rien à
calculer. Le cadre sortait à 295 × 300 au lieu de 4:5. On égale sa
spécificité et on remet la hauteur en automatique. */
.product-miniature .thumbnail-container a.product-thumbnail {
order: 1;
position: relative;
display: block;
overflow: hidden;
height: auto;
/* Carré et non 4:5. Le produit est une bobine, une forme carrée la cadre
aussi bien, et sur un listing de huit articles la page raccourcit d'un
cinquième. La surcouche d'aperçu rapide, plus bas, suit le même ratio :
les deux valeurs doivent rester identiques. */
aspect-ratio: 1 / 1;
border-radius: var(--tm-radius);
background: var(--tm-surface);
}
/* Le gabarit enveloppe l'image dans un ``. Le sortir du flux n'est
pas un ornement, c'est ce qui rend le cadre indéformable :
- en ligne (par défaut), sa hauteur restait celle du fichier et l'image
flottait en haut d'un cadre de 313 px ;
- en bloc avec `height: 100%`, le pourcentage ne se résolvait pas contre un
parent à hauteur automatique : l'image reprenait sa taille intrinsèque et
poussait le cadre à 316 px de haut pour 307 de large — le ratio 4:5
tombait à 1,028.
En absolu, le cadre n'a plus de contenu dans le flux : sa hauteur ne vient
donc que de `aspect-ratio`, quelle que soit la taille du fichier. */
.product-miniature .thumbnail-container a.product-thumbnail picture {
position: absolute;
inset: 0;
display: block;
}
/* Surcouche d'aperçu rapide, exactement aux dimensions du cadre. Le lien
reste celui du thème : son gestionnaire d'évènement est intact, on ne fait
que le déplacer et le révéler au survol. */
/* Trois sélecteurs, et non un seul : le thème parent pose
`.product-miniature .highlighted-informations .quick-view { color: #7a7a7a }`,
soit trois classes. Une règle à deux classes laissait le libellé en gris sur
le voile bleu. */
.product-miniature .quick-view,
.product-miniature .highlighted-informations .quick-view,
.product-miniature .thumbnail-container .quick-view {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
/* Même ratio que le cadre : la surcouche le recouvre exactement, sans
dépendre d'une hauteur qu'elle ne connaît pas. */
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0;
border-radius: var(--tm-radius);
/* Voile aux couleurs de la marque, plutôt que le blanc laiteux d'origine et
le gris du thème parent. `color-mix` évite de réécrire le bleu en dur :
la teinte reste celle de `--tm-primary`. La première déclaration sert de
repli pour les navigateurs qui ne connaissent pas la fonction. */
background: var(--tm-primary);
background: color-mix(in srgb, var(--tm-primary) 82%, transparent);
color: var(--tm-white);
font-size: var(--tm-fs-sm);
opacity: 0;
pointer-events: none;
transition: opacity var(--tm-transition);
}
.product-miniature .thumbnail-container:hover .quick-view,
.product-miniature .quick-view:focus-visible {
opacity: 1;
pointer-events: auto;
}
/* --- Titre ---------------------------------------------------------- */
.product-miniature .product-title,
.product-miniature .product-title a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--tm-fs-sm);
line-height: 1.35;
letter-spacing: 0.01em;
overflow-wrap: anywhere;
text-transform: none;
color: var(--tm-ink);
}
.product-miniature .product-title {
order: 2;
margin: 0;
padding: 0 var(--tm-1);
/* Le thème parent centre le titre et le prix, mais pas la référence ni les
coloris : la carte mélangeait deux alignements. Tout passe à gauche. */
text-align: left;
/* Deux lignes réservées, même quand le nom en tient une : sans cela les
prix ne s'alignent plus d'une carte à l'autre. */
min-height: 2.7em;
}
.product-miniature .product-title a:hover {
color: var(--tm-primary);
}
/* --- Référence ------------------------------------------------------ */
.product-miniature .product-reference {
order: 3;
padding: 0 var(--tm-1);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: var(--tm-fs-xs);
color: var(--tm-ink-soft);
}
/* --- Coloris, visibles sans survol ----------------------------------
Le thème parent posait `.variant-links` en `position: relative` dans un
conteneur absolu, avec un fond blanc et 2,5rem de hauteur minimale. Tout
cela n'a plus lieu d'être une fois la bande remise dans le flux. */
.product-miniature .variant-links {
order: 4;
position: static;
top: auto;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 4px;
width: auto;
/* Hauteur constante, et pas seulement celle d'une pastille. Le compteur
« +153 » n'est ajouté par le thème que lorsqu'un article dépasse cinq
coloris : sans réserve, la bande mesurait 19 px avec compteur et 15 px
sans, et deux cartes de la même colonne ne finissaient pas à la même
hauteur. */
min-height: 20px;
padding: 0 var(--tm-1);
background: none;
text-align: left;
}
.product-miniature .variant-links a.color {
flex: 0 0 auto;
width: 15px;
height: 15px;
margin: 0;
border: 0;
border-radius: 50%;
/* Liseré interne plutôt qu'une bordure : sans lui, un coloris blanc
disparaît sur fond blanc, et une bordure décalerait le diamètre. */
box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.2);
}
.product-miniature .variant-links a.color:hover,
.product-miniature .variant-links a.color:focus-visible {
box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.2), 0 0 0 2px var(--tm-primary);
}
/* PAS de règle limitant le nombre de pastilles ici, et c'est délibéré.
`theme.js` du thème parent s'en charge déjà, en JavaScript :
if ($(m).find('.color').length > 5) {
$(m).find('.color').each((i, n) => { i > 4 && ($(n).hide(), compte++) });
$(m).find('.js-count').append(`+${compte}`);
}
Il masque au-delà de la cinquième en style EN LIGNE — qu'aucune règle de
feuille ne peut défaire sans `!important` — et il calcule le compteur à
partir de ce même 5 : « +153 » pour 158 coloris. En afficher sept
demanderait de forcer l'affichage ET laisserait un compteur faux de deux
unités. On garde donc les cinq du thème, cohérents avec leur compteur. */
.product-miniature .variant-links .js-count {
flex: 0 0 auto;
margin-left: 2px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: var(--tm-fs-xs);
color: var(--tm-ink-soft);
white-space: nowrap;
}
/* --- Prix ------------------------------------------------------------ */
.product-miniature .product-price-and-shipping {
order: 5;
margin-top: auto;
padding: 0 var(--tm-1) var(--tm-1);
text-align: left;
}
.product-miniature .product-price-and-shipping,
.product-miniature .price {
font-family: var(--tm-text);
font-weight: 600;
font-size: var(--tm-fs-base);
/* Chiffres de largeur fixe : les montants s'alignent en colonne. */
font-variant-numeric: tabular-nums;
color: var(--tm-ink);
}
/* Mention de taxe. Les groupes clients de cette boutique sont réglés sur
`price_display_method = 1`, donc hors taxes : l'acheteur Coupa lit du HT et
le montant doit le dire. Vérifié avant de l'écrire, et le thème n'appose
aucune mention de son côté. */
.product-miniature .product-price-and-shipping .price::after {
content: " HT";
font-size: var(--tm-fs-xs);
font-weight: 400;
color: var(--tm-ink-soft);
}
/* Étiquette discrète, en accent chaud, plus l'aplat bleu criard. */
.product-flags li.product-flag,
.product-miniature .product-flags li.product-flag {
min-width: 0;
min-height: 0;
padding: 3px 8px;
background: var(--tm-accent);
color: var(--tm-white);
border-radius: var(--tm-radius-pill);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale {
background: var(--tm-ink);
}
/* Barre d'outils du listing sur une ligne. */
#js-product-list-top,
.products-selection {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--tm-2);
margin-bottom: var(--tm-3);
padding: 0;
}
#js-product-list-top .total-products,
.products-selection .total-products {
margin: 0;
color: var(--tm-ink-soft);
font-size: var(--tm-fs-sm);
}
.products-sort-order {
max-width: 220px;
margin-left: auto;
}
.products-sort-order .select-title {
height: 40px;
display: flex;
align-items: center;
border: 1px solid var(--tm-line);
border-radius: var(--tm-radius);
font-size: var(--tm-fs-sm);
}
/* L'image remplit le cadre, elle ne le définit plus.
Les attributs `width="250" height="250"` du gabarit sont neutralisés par
`width/height: 100%` et `aspect-ratio: auto`. Aucun saut de rendu : c'est
`a.product-thumbnail` qui porte le ratio 4:5, la place est donc réservée
avant même que le fichier arrive. */
.product-miniature .thumbnail-container img,
.product-miniature img.product-thumbnail,
.product-miniature .thumbnail-container a.product-thumbnail img {
width: 100%;
max-width: none;
height: 100%;
margin: 0;
aspect-ratio: auto;
object-fit: cover;
object-position: center;
background: var(--tm-surface);
transition: transform var(--tm-transition);
}
/* ---------------------------------------------------------------------
7. Fiche produit
--------------------------------------------------------------------- */
#product .product-cover,
#product .images-container .product-cover img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
background: var(--tm-surface);
border: 1px solid var(--tm-line);
border-radius: var(--tm-radius);
}
#product h1,
#product .product-title,
.product-detail-name {
font-size: 1.75rem;
line-height: 1.2;
margin-bottom: var(--tm-1);
}
#product .product-reference {
color: var(--tm-ink-soft);
font-size: var(--tm-fs-sm);
margin-bottom: var(--tm-2);
}
#product .product-prices {
margin: var(--tm-2) 0;
}
#product .product-prices .current-price,
#product .product-price,
.product-prices .price {
display: flex;
align-items: baseline;
gap: var(--tm-1);
font-family: var(--tm-text);
font-weight: 600;
font-size: 1.75rem;
line-height: 1.2;
color: var(--tm-ink);
}
#product .product-prices .tax-shipping-delivery-label {
display: block;
margin-top: 2px;
font-size: var(--tm-fs-xs);
color: var(--tm-ink-soft);
}
/* Sélecteur de coloris : une vraie liste déroulante, pas un champ inerte. */
#product .product-variants .product-variants-item select.form-control {
max-width: 280px;
height: 48px;
border: 1px solid var(--tm-line);
border-radius: var(--tm-radius);
background: var(--tm-white);
padding: 0 var(--tm-2);
font-size: var(--tm-fs-base);
appearance: auto;
}
/* Quantité et ajout au panier à la même hauteur, alignés. */
#product .product-add-to-cart .product-quantity {
display: flex;
align-items: stretch;
gap: var(--tm-2);
}
#product .bootstrap-touchspin input.form-control,
#product .bootstrap-touchspin input.input-group {
height: 48px;
width: 3.5rem;
text-align: center;
border: 1px solid var(--tm-line);
border-right: 0;
}
#product .bootstrap-touchspin .input-group-btn-vertical > .btn {
min-height: 24px;
height: 24px;
padding: 0 10px;
border: 1px solid var(--tm-line);
}
#product .add-to-cart,
#product .product-add-to-cart .add-to-cart {
min-height: 48px;
flex: 1 1 auto;
font-size: var(--tm-fs-base);
}
/* Un seul appel à donner un avis : deux boutons quasi identiques sur la même
page se neutralisent. Celui du bas, plus visible, est conservé. */
#product .product-actions .btn-comment,
#product .product-additional-info .btn-comment {
display: none;
}
.btn.btn-comment,
.btn.btn-comment-big,
.btn.btn-comment-huge {
background: var(--tm-white);
border: 1px solid var(--tm-primary);
color: var(--tm-primary);
font-family: var(--tm-text);
font-weight: 600;
}
/* ---------------------------------------------------------------------
8. Pied de page
Un seul fond, un seul rythme, et une inscription à la newsletter dont le
champ et le bouton font la même hauteur.
--------------------------------------------------------------------- */
#footer {
margin-top: var(--tm-8);
padding-top: var(--tm-8);
padding-bottom: var(--tm-4);
background: var(--tm-surface);
border-top: 1px solid var(--tm-line);
color: var(--tm-ink);
}
#footer .footer-container {
background: transparent;
box-shadow: none;
padding: 0;
margin: 0;
}
#footer .h3,
#footer .links .h3,
#footer .myaccount-title,
#footer .block-contact .block-contact-title {
font-size: var(--tm-fs-sm);
text-transform: uppercase;
color: var(--tm-ink);
margin-bottom: var(--tm-2);
}
#footer a,
#footer .links a {
color: var(--tm-ink-soft);
font-size: var(--tm-fs-sm);
line-height: 2;
}
#footer a:hover,
#footer .links a:hover {
color: var(--tm-primary);
}
.block_newsletter {
max-width: none;
margin-bottom: var(--tm-6);
background: transparent;
}
.block_newsletter #block-newsletter-label {
font-size: var(--tm-fs-h4);
margin-bottom: var(--tm-2);
}
.block_newsletter form .input-wrapper,
.block_newsletter form input[type="email"],
.block_newsletter form input[type="text"] {
height: 48px;
border: 1px solid var(--tm-line);
border-radius: var(--tm-radius);
padding: 0 var(--tm-2);
background: var(--tm-white);
}
.block_newsletter form .btn,
.block_newsletter form button[type="submit"] {
min-height: 48px;
}
#footer .copyright,
#footer .bottom-footer {
border-top: 1px solid var(--tm-line);
margin-top: var(--tm-6);
padding: var(--tm-3) 0 0;
font-size: var(--tm-fs-xs);
color: var(--tm-ink-soft);
text-transform: none;
letter-spacing: 0;
}
/* ---------------------------------------------------------------------
9. Page 404
--------------------------------------------------------------------- */
#pagenotfound #main .page-header h1,
#pagenotfound .page-not-found h1 {
max-width: 20ch;
font-size: var(--tm-fs-h2);
}
#pagenotfound .page-not-found {
max-width: 640px;
padding: var(--tm-6) 0;
}
#pagenotfound .page-not-found .search-widget {
margin-top: var(--tm-3);
}
/* ---------------------------------------------------------------------
10. Responsive
--------------------------------------------------------------------- */
@media (max-width: 991px) {
#header .header-nav,
#header .header-top {
padding: 0 var(--tm-2);
}
#header .logo,
#_desktop_logo img,
#header img.logo {
max-height: 28px;
}
}
@media (max-width: 767px) {
:root { --tm-fs-h1: 1.875rem; --tm-fs-h2: 1.5rem; }
#wrapper { padding-top: var(--tm-3); padding-bottom: var(--tm-6); }
#products .products,
.products.row,
#js-product-list .products {
grid-template-columns: 1fr;
gap: var(--tm-2);
}
#js-product-list-top,
.products-selection {
flex-wrap: wrap;
row-gap: var(--tm-1);
}
.products-sort-order { max-width: none; width: 100%; margin-left: 0; }
#product .product-add-to-cart .product-quantity { flex-wrap: wrap; }
#footer { margin-top: var(--tm-6); padding-top: var(--tm-6); }
}
@media (min-width: 1600px) {
#wrapper .container,
#header .container,
#footer .container { max-width: var(--tm-largeur); }
}
/* ---------------------------------------------------------------------
11. Page d'accueil
La structure vient de `templates/index.tpl` (thème enfant). Ici, la mise en
forme : accroche, cartes de catégories construites à partir de la sortie du
module d'arbre des catégories, et bloc de présentation.
--------------------------------------------------------------------- */
.page-home {
display: flex;
flex-direction: column;
gap: var(--tm-8);
}
/* --- Accroche --- */
.tm-hero {
margin: calc(var(--tm-4) * -1) calc(50% - 50vw) 0;
padding: 0 calc(50vw - 50%);
min-height: 62vh;
display: flex;
align-items: center;
background: var(--tm-primary);
background-image: var(--tm-hero-image, none);
background-size: cover;
background-position: center;
color: var(--tm-white);
}
.tm-hero__inner {
max-width: 640px;
padding: var(--tm-8) 0;
}
.tm-hero__eyebrow {
margin: 0 0 var(--tm-2);
font-size: var(--tm-fs-sm);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
}
.tm-hero__title {
margin: 0 0 var(--tm-3);
font-size: clamp(2rem, 5vw, 3.25rem);
color: var(--tm-white);
}
.tm-hero__lead {
margin: 0 0 var(--tm-4);
font-size: var(--tm-fs-h4);
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
}
.tm-hero__cta.btn-primary {
background: var(--tm-white);
border-color: var(--tm-white);
color: var(--tm-primary);
}
.tm-hero__cta.btn-primary:hover {
background: var(--tm-primary-wash);
border-color: var(--tm-primary-wash);
color: var(--tm-primary-dark);
}
/* --- Modules de l'accueil --- */
.tm-home-modules {
display: flex;
flex-direction: column;
gap: var(--tm-8);
}
/* Arbre des catégories transformé en cartes. Le module produit une liste de
liens ; la grille et le cadre viennent d'ici, aucune structure n'est
touchée. Les visuels de catégorie, une fois renseignés en back-office,
prendront la place de l'aplat. */
.page-home .block-categories,
.page-home #categories_block_left {
border: 0;
padding: 0;
background: transparent;
}
.page-home .block-categories ul {
list-style: none;
}
/* Le module rend deux : le lien vers la catégorie racine « Accueil »,
puis un conteneur portant la sous-liste des vraies familles. Mettre la liste
de premier niveau en grille créait donc une colonne vide pour la racine et
empilait les familles dans la seconde. La grille appartient à la sous-liste. */
.page-home .block-categories .category-top-menu {
display: block;
margin: 0;
padding: 0;
}
.page-home .block-categories .category-top-menu > li:first-child {
display: none;
}
.page-home .block-categories .category-sub-menu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--tm-3);
margin: 0;
padding: 0;
}
.page-home .block-categories .category-sub-menu li {
list-style: none;
margin: 0;
}
.page-home .block-categories .category-sub-menu li a {
display: flex;
align-items: flex-end;
min-height: 200px;
padding: var(--tm-3);
background: var(--tm-surface);
border: 1px solid var(--tm-line);
border-radius: var(--tm-radius);
color: var(--tm-ink);
font-family: var(--tm-text);
font-weight: 600;
font-size: var(--tm-fs-h4);
text-transform: none;
transition: box-shadow var(--tm-transition), transform var(--tm-transition),
border-color var(--tm-transition);
}
.page-home .block-categories .category-sub-menu li a:hover {
border-color: var(--tm-primary-line);
box-shadow: var(--tm-shadow-lift);
transform: translateY(-2px);
color: var(--tm-primary);
}
/* Le module ajoute un bouton de dépliage inutile en présentation carte. */
.page-home .block-categories .navbar-toggler,
.page-home .block-categories .collapse-icons {
display: none;
}
/* Produits mis en avant */
.page-home .featured-products .products-section-title,
.page-home .products-section-title {
margin-bottom: var(--tm-3);
font-family: var(--tm-display);
font-size: var(--tm-fs-h2);
text-transform: uppercase;
text-align: left;
}
.page-home .featured-products .all-product-link {
display: inline-block;
margin-top: var(--tm-3);
font-weight: 600;
}
/* --- La maison Toulemonde --- */
.tm-about {
padding: var(--tm-8) 0;
border-top: 1px solid var(--tm-line);
}
.tm-about__inner {
max-width: 720px;
}
.tm-about__title {
margin-bottom: var(--tm-3);
}
.tm-about p {
margin-bottom: var(--tm-2);
color: var(--tm-ink-soft);
font-size: var(--tm-fs-base);
}
.tm-about .btn {
margin-top: var(--tm-2);
}
@media (max-width: 767px) {
.tm-hero { min-height: 45vh; }
.tm-hero__inner { padding: var(--tm-6) 0; }
.tm-hero__lead { font-size: var(--tm-fs-base); }
.page-home { gap: var(--tm-6); }
.tm-about { padding: var(--tm-6) 0; }
.page-home .block-categories .category-sub-menu li a { min-height: 140px; }
}
/* ---------------------------------------------------------------------
12. Barre d'en-tête unique
Structure posée par `templates/_partials/header.tpl` (thème enfant) :
logo · menu et recherche · compte, panier, langue · lien de service.
--------------------------------------------------------------------- */
.tm-bar {
display: flex;
align-items: center;
gap: var(--tm-3);
min-height: var(--tm-header-h);
}
.tm-bar__logo {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.tm-bar__logo img {
max-height: 40px;
width: auto;
display: block;
}
.tm-bar__main {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: var(--tm-3);
min-width: 0;
}
.tm-bar__aside {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--tm-2);
}
/* Le lien de service passe en second plan : c'est une information utile, pas
une action principale. */
.tm-bar__meta {
flex: 0 0 auto;
font-size: var(--tm-fs-xs);
color: var(--tm-ink-soft);
}
.tm-bar__meta a {
color: var(--tm-ink-soft);
text-transform: none;
letter-spacing: 0;
}
/* La barre de service d'origine ne sert plus qu'au mobile. */
#header .header-nav {
min-height: 0;
padding: 0;
border-bottom: 0;
}
#header .header-top {
border-bottom: 0;
padding: 0 var(--tm-4);
}
#header .header-top > .container {
max-width: var(--tm-largeur);
}
/* La recherche vit maintenant dans la barre : elle ne pousse plus le menu. */
.tm-bar__main #search_widget,
.tm-bar__main .search-widgets {
flex: 0 1 260px;
margin-left: auto;
max-width: 260px;
}
.tm-bar__main .menu,
.tm-bar__main #_desktop_top_menu {
flex: 0 1 auto;
min-width: 0;
}
/* Ombre discrète une fois la page défilée : le thème parent ajoute déjà une
classe sur le body, on s'y raccroche plutôt que d'ajouter du script. */
#header.is-scrolled,
body.scrolled #header {
box-shadow: var(--tm-shadow);
}
@media (max-width: 991px) {
#header .header-top { padding: 0 var(--tm-2); }
#header .header-nav .mobile { padding: var(--tm-1) 0; }
}
/* ---------------------------------------------------------------------
13. Tenue de la barre entre 768 et 1200 px
Le thème parent bascule sur son en-tête mobile en dessous de 768px
seulement : entre 768 et 992, c'est donc la barre complète qui doit tenir
dans une fenêtre étroite. Logo, menu, recherche, compte, panier et lien de
service ne rentrent pas — d'où un débordement de 200px constaté sur toutes
les pages. La barre se replie plutôt que de pousser la page.
--------------------------------------------------------------------- */
@media (max-width: 1199px) {
.tm-bar {
flex-wrap: wrap;
row-gap: var(--tm-1);
padding-bottom: var(--tm-1);
}
/* Le lien de contact reste accessible depuis le pied de page. */
.tm-bar__meta {
display: none;
}
.tm-bar__main {
order: 3;
flex: 1 1 100%;
}
.tm-bar__main #search_widget,
.tm-bar__main .search-widgets {
flex: 1 1 160px;
max-width: none;
}
.tm-bar__aside {
margin-left: auto;
}
}
/* Le plein cadre de l'accroche repose sur une largeur de fenêtre, qui inclut
la barre de défilement : sans cette coupe, la page gagne une quinzaine de
pixels de défilement horizontal dès qu'un ascenseur apparaît. `clip` coupe
sans créer de conteneur de défilement, contrairement à `hidden`. */
#wrapper {
overflow-x: clip;
}
/* ---------------------------------------------------------------------
14. Équilibre de la barre d'en-tête
Premier essai : menu et recherche partageaient l'espace restant, et le menu
se laissait écraser jusqu'à n'afficher que « FIL ». Le menu est la
navigation principale : il ne se contracte pas. C'est la recherche qui cède,
puis les éléments de service.
--------------------------------------------------------------------- */
.tm-bar__main .menu,
.tm-bar__main #_desktop_top_menu {
flex: 0 0 auto;
min-width: auto;
}
.tm-bar__main #search_widget,
.tm-bar__main .search-widgets {
flex: 0 1 220px;
min-width: 140px;
margin-left: auto;
}
.tm-bar {
gap: var(--tm-2);
}
/* Le lien de service quitte la barre bien avant que ça ne se voie : il reste
accessible depuis le pied de page. */
/* Seuils calés sur le logo réel du serveur (204px de large une fois ramené à
40px de haut), pas sur celui de démonstration : c'est lui qui décide de la
place restante. */
@media (max-width: 1699px) {
.tm-bar__meta { display: none; }
}
/* Sélecteurs de langue et de devise : utiles, mais ce ne sont pas des actions
principales. Ils s'effacent avant le compte et le panier. */
@media (max-width: 1199px) {
.tm-bar__aside #_desktop_language_selector,
.tm-bar__aside #_desktop_currency_selector {
display: none;
}
}
/* ---------------------------------------------------------------------
15. Grille des produits mis en avant
Quatre par ligne en grand écran, comme demandé, puis dégressif.
--------------------------------------------------------------------- */
.page-home .featured-products .products,
.page-home #js-product-list .products {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1199px) {
.page-home .featured-products .products,
.page-home #js-product-list .products {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.page-home .featured-products .products,
.page-home #js-product-list .products {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 479px) {
.page-home .featured-products .products,
.page-home #js-product-list .products {
grid-template-columns: 1fr;
}
}
/* Le thème parent met la recherche en `float: right`. Dans une rangée flex, un
flottant sort du flux : le bloc ne compte pas dans la largeur du parent et
vient donc recouvrir les éléments suivants — langue, devise et compte se
retrouvaient écrits par-dessus le menu. */
.tm-bar__main #search_widget,
.tm-bar__main .search-widgets {
float: none;
}
.tm-bar__main {
flex-wrap: nowrap;
}
/* Le bloc central était autorisé à se contracter (`min-width: 0`) alors que
son contenu — menu et recherche — refuse de rétrécir. Résultat : une boîte
de 199px pour 471px de contenu, qui débordait et recouvrait le bloc
compte/panier. Il ne descend plus sous la largeur de son contenu, et la
barre passe à la ligne plutôt que de laisser deux blocs se chevaucher. */
.tm-bar {
flex-wrap: wrap;
row-gap: var(--tm-1);
}
.tm-bar__main {
flex: 1 1 auto;
min-width: fit-content;
}
.tm-bar__aside {
min-width: fit-content;
}
/* Réglage final de la rangée.
`fit-content` réservait au bloc central sa largeur idéale — recherche à
220px comprise — ce qui ne laissait plus la place au compte et au panier :
la barre passait à la ligne. `min-content` lui réserve sa largeur
incompressible ; la recherche peut alors se réduire jusqu'à 120px et tout
tient sur une ligne. En dessous de 1200px, la barre a le droit de se replier
(voir plus haut). */
@media (min-width: 1200px) {
.tm-bar {
flex-wrap: nowrap;
}
.tm-bar__main {
flex: 1 1 auto;
min-width: min-content;
}
.tm-bar__aside {
flex: 0 0 auto;
min-width: min-content;
}
}
.tm-bar__main #_desktop_top_menu,
.tm-bar__main .menu {
flex: 0 0 auto;
}
.tm-bar__main #search_widget,
.tm-bar__main .search-widgets {
flex: 0 1 220px;
min-width: 120px;
}
/* L'icône de loupe est posée en absolu par le thème parent, par-dessus le
champ : le texte de substitution commençait dessous. */
.tm-bar__main #search_widget form input[type="text"],
.tm-bar__main .search-widgets input[type="text"] {
padding-left: 40px;
}
.tm-bar__main #search_widget form button[type="submit"],
.tm-bar__main .search-widgets button[type="submit"] {
left: 8px;
right: auto;
color: var(--tm-ink-soft);
}
/* À 1280, la rangée complète ne tient pas : le panier était coupé au bord.
Les sélecteurs de langue et de devise cèdent avant lui — ils restent
disponibles dans le pied de page et sur mobile. */
@media (max-width: 1599px) {
.tm-bar__aside #_desktop_language_selector,
.tm-bar__aside #_desktop_currency_selector {
display: none;
}
}
/* Le champ de recherche : la loupe est un bouton posé en absolu par le thème.
Le retrait doit être appliqué à tous les types de champ possibles, le thème
n'utilisant pas toujours `type="text"`. */
.tm-bar__main #search_widget input,
.tm-bar__main .search-widgets input,
.tm-bar__main #search_widget .ui-autocomplete-input {
padding-left: 44px;
}
/* Selon les versions, le thème pose la loupe soit dans un
générique est désormais discret (voir la règle `hr`), mais dans un formulaire aussi court même un filet clair n'apporte rien : il sépare le bouton de connexion de la création de compte, alors que les deux forment une seule proposition. --------------------------------------------------------------------- */ #password .page-content hr { display: none; } /* --------------------------------------------------------------------- 17. Logo de l'en-tête du tunnel Le tunnel a son propre en-tête, avec son propre conteneur : la limite de hauteur posée sur l'en-tête courant ne l'atteignait pas. --------------------------------------------------------------------- */ body#checkout #header .logo, body#checkout #_desktop_logo img, body#checkout .header .logo, #checkout #header img.logo { max-height: 64px; width: auto; } /* --------------------------------------------------------------------- 18. Tuiles du tableau de bord du compte Le thème pose 1.875rem de marge basse sous chaque tuile. Le cadre ajouté par la charte s'arrête au contenu, mais la marge, elle, crée une bande entre les rangées. On passe par une grille : espacement régulier, plus de marge résiduelle. --------------------------------------------------------------------- */ .page-my-account #content .links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; justify-content: initial; } .page-my-account #content .links a { margin-bottom: 0; padding: 0; width: auto; } .page-my-account #content .links a span.link-item { height: 100%; padding: 1.5rem 1rem; } /* --------------------------------------------------------------------- 19. Actions de la carte d'adresse Gris clair sur fond bleu pâle : ce sont les deux seules actions de la page. Le thème les met en `.text-muted`, une classe faite pour du texte secondaire, pas pour des commandes. --------------------------------------------------------------------- */ /* Le thème pose `.page-addresses .address .address-footer a` — trois classes. Il faut donc au moins trois classes de notre côté. */ .page-addresses article.address .address-footer a, .page-addresses .addresses-footer a { color: var(--tlm-bleu); font-weight: 400; } .page-addresses article.address .address-footer a:hover, .page-addresses .addresses-footer a:hover { color: var(--tlm-noir); text-decoration: underline; } /* Dans le tunnel, les mêmes liens portent `.text-muted`, que Bootstrap déclare en `!important`. C'est le seul endroit de cette feuille où on y répond de la même façon : sans cela, la règle est inatteignable, et il s'agit des deux seules actions de la carte. */ body#checkout .address-item .address-footer a, body#checkout .address-item .address-footer a.text-muted { color: var(--tlm-bleu) !important; } body#checkout .address-item .address-footer a:hover, body#checkout .address-item .address-footer a.text-muted:hover { color: var(--tlm-noir) !important; } /* --------------------------------------------------------------------- 20. Libellé de la carte d'adresse Compte :