: sans
alternative textuelle, invisibles pour les lecteurs d'écran comme pour
Google Images, et impossibles à différer ou à décliner en plusieurs
tailles — 12,3 Mo d'images chargées d'un bloc sur l'accueil.
On conserve volontairement la classe .media__photo : custom.css la
référence 81 fois (zooms au survol, transitions). Seule la balise change,
toutes ces règles continuent donc de s'appliquer.
============================================================ */
img.media__photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: 0;
}
/* .media__photo::after portait un léger halo, qui ne peut pas être rendu sur
un élément remplacé : on le repose sur le conteneur. */
.media:has(> img.media__photo)::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.10), transparent 55%);
}
/* Le halo ci-dessus est du contenu généré : il se peint APRÈS les enfants du
conteneur. On remonte le voile sombre au-dessus pour qu'il garde la main. */
.media > .media__shade { z-index: 1; }
/* Le dégradé d'origine (.62 en pied) suffisait sur les photos sombres, pas sur
les visuels clairs : « Objet déco » et « Accessoires » étaient du blanc sur
fond presque blanc. On l'assombrit sur les tuiles qui portent une légende. */
.uni .media__shade,
.mega-feature .mega-scrim {
background: linear-gradient(to top,
rgba(24, 30, 24, .82) 0%,
rgba(24, 30, 24, .55) 28%,
rgba(24, 30, 24, .18) 52%,
transparent 75%);
}
.uni-cap b, .uni-cap span { text-shadow: 0 1px 3px rgba(20, 25, 20, .45); }
/* Tuiles « univers » sur petit écran.
La grille passe à deux colonnes : la tuile ne fait plus que ~153px de large.
Une fois le padding (2×20) et le rond fléché (44) retirés, il restait 56px
pour la légende — « Objet déco » et « 91 références » partaient chacun sur
deux lignes, enroulées autour du cercle.
La tuile entière est déjà un lien : le rond n'est qu'un rappel visuel, on le
retire pour rendre sa largeur au texte. */
@media (max-width: 620px) {
.uni-cap {
padding: 14px 16px;
gap: 0;
align-items: flex-end;
}
.uni-cap .uni-go { display: none; }
.uni-cap b { font-size: 1rem; line-height: 1.2; }
.uni-cap div span { font-size: .72rem; margin-top: 3px; }
}
/* ============================================================
NAVIGATION MOBILE
custom.css masquait .mainnav et .nav-search sous 1024px sans
aucun remplacement : ni menu, ni recherche sur mobile.
============================================================ */
/* ---- Desktop : la barre de liens porte la mise en page ---- */
.mn-links {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(16px, 2.2vw, 32px);
}
.burger,
.mn-panel-head,
.mn-search,
.mn-panel-foot,
.mn-chev,
.nav-backdrop { display: none; }
/* Sélecteur enfant obligatoire : custom.css pose `.head-icons>a,.head-icons>button
{display:flex}`, plus spécifique qu'une simple classe. */
.head-icons > .head-search-btn { display: none; }
/* Le déclencheur du méga-menu est devenu un
: il doit garder
l'apparence exacte des autres liens de la barre. */
.mn-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
background: none;
font-family: inherit;
cursor: pointer;
}
.mn-item .mega { opacity: 0; visibility: hidden; }
.mn-item:hover .mega,
.mn-item .mn-toggle[aria-expanded="true"] + .mega {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* ---- Focus clavier sur les composants ajoutés ---- */
.burger:focus-visible,
.head-search-btn:focus-visible,
.mn-close:focus-visible,
.mn-toggle:focus-visible,
.mn-links a:focus-visible,
.mn-search input:focus-visible,
.mn-search-go:focus-visible,
.js-cart-link:focus-visible {
outline: 2px solid var(--green-primary);
outline-offset: 3px;
border-radius: var(--r-sm);
}
@media (max-width: 1024px) {
/* ---- Le burger ---- */
.burger {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-left: -10px;
border: none;
background: none;
color: var(--text-title);
cursor: pointer;
flex-shrink: 0;
}
.burger-bars { display: block; width: 22px; height: 14px; position: relative; }
.burger-bars span {
position: absolute;
left: 0;
width: 100%;
height: 1.6px;
background: currentColor;
border-radius: 2px;
transition: transform .32s var(--ease), opacity .2s var(--ease), top .32s var(--ease);
}
.burger-bars span:nth-child(1) { top: 0; }
.burger-bars span:nth-child(2) { top: 6.2px; }
.burger-bars span:nth-child(3) { top: 12.4px; }
.burger[aria-expanded="true"] .burger-bars span:nth-child(1) { top: 6.2px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger-bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-bars span:nth-child(3) { top: 6.2px; transform: rotate(-45deg); }
/* ---- Loupe mobile ---- */
.head-icons > .head-search-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
background: none;
color: var(--text-title);
cursor: pointer;
}
/* Cibles tactiles : 40px de côté sous le seuil recommandé de 44. */
.head-icons > a,
.head-icons > button { width: 44px; height: 44px; }
.head-search-btn svg {
width: 22px; height: 22px;
stroke: currentColor; fill: none;
stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* ---- Le panneau ---- */
.mainnav {
display: flex;
flex-direction: column;
/* custom.css pose justify-content:center, align-items:center et un gap sur
.mainnav pour la barre horizontale : sans remise à plat, le panneau
centre et rétrécit ses blocs au lieu de les empiler. */
justify-content: flex-start;
align-items: stretch;
gap: 0;
position: fixed;
top: 0;
left: 0;
width: min(88vw, 380px);
height: 100dvh;
z-index: 900;
background: var(--bg-page);
box-shadow: var(--sh-lift);
transform: translateX(-100%);
transition: transform .38s var(--ease);
overflow-y: auto;
overscroll-behavior: contain;
padding-bottom: 24px;
}
.mainnav.open { transform: translateX(0); }
.nav-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 899;
background: rgba(44, 52, 43, .48);
opacity: 0;
transition: opacity .38s var(--ease);
}
.nav-backdrop.show { opacity: 1; }
.mn-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border-soft);
position: sticky;
top: 0;
background: var(--bg-page);
z-index: 2;
}
.mn-panel-title {
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
.mn-close {
display: flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
margin-right: -10px;
border: none; background: none;
color: var(--text-title);
cursor: pointer;
}
.mn-close svg {
width: 21px; height: 21px;
stroke: currentColor; fill: none;
stroke-width: 1.6; stroke-linecap: round;
}
/* ---- Recherche dans le panneau ---- */
.mn-search {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 20px 6px;
padding: 0 6px 0 14px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--r-pill);
}
.mn-search:focus-within { border-color: var(--green-primary); }
.mn-search svg {
width: 18px; height: 18px; flex-shrink: 0;
stroke: currentColor; fill: none; stroke-width: 1.6;
color: var(--text-muted);
}
.mn-search input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
outline: none;
font-family: inherit;
font-size: .92rem;
color: var(--text-body);
padding: 13px 0;
}
.mn-search-go {
border: none;
background: var(--green-primary);
color: var(--bg-page);
font-family: inherit;
font-size: .74rem;
font-weight: 700;
letter-spacing: .08em;
padding: 0 18px;
min-height: 44px;
border-radius: var(--r-pill);
cursor: pointer;
flex-shrink: 0;
}
/* ---- Liens du panneau ---- */
.mn-links {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 10px 0 0;
}
.mn-links > a,
.mn-toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 52px;
padding: 0 20px;
font-size: 1rem;
font-weight: 500;
letter-spacing: .01em;
color: var(--text-title);
border-bottom: 1px solid var(--border-soft);
text-align: left;
}
/* Le soulignement animé de la barre desktop n'a pas de sens en liste */
.mn-links > a::after,
.mn-toggle::after { display: none; }
.mn-links > a.on { color: var(--green-primary); }
.mn-sprig { display: none; }
.mn-chev {
display: block;
margin-left: auto;
width: 9px; height: 9px;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform .3s var(--ease);
color: var(--text-muted);
}
.mn-toggle[aria-expanded="true"] .mn-chev {
transform: rotate(-135deg) translate(-3px, -3px);
}
/* ---- Sous-catégories en accordéon ---- */
.mn-item .mega,
.mn-item:hover .mega {
position: static;
transform: none;
opacity: 1;
visibility: visible;
display: block;
border: none;
border-radius: 0;
box-shadow: none;
background: var(--bg-cream-deep);
padding: 0;
width: auto;
/* 0fr → 1fr : l'accordéon s'ouvre à sa hauteur réelle, sans max-height
arbitraire ni second ascenseur imbriqué dans le panneau. */
grid-template-rows: 0fr;
transition: grid-template-rows .34s var(--ease);
}
.mn-item .mega,
.mn-item:hover .mega { display: grid; }
.mn-item .mega > * { overflow: hidden; min-height: 0; }
.mn-item .mn-toggle[aria-expanded="true"] + .mega { grid-template-rows: 1fr; }
/* Pas de padding vertical ici : `0fr` ne descend pas sous la taille minimale
du contenu, et le padding laissait un liseré de 12px sous « Produits »
quand l'accordéon était replié. L'air vient de la hauteur des liens. */
.mn-item .mega-main { padding: 0; }
.mn-item .mega-head { display: none; }
.mn-item .mega-cols { display: flex; flex-direction: column; gap: 0; }
.mn-item .mega-cols a {
min-height: 46px;
padding: 0 20px 0 34px;
font-size: .93rem;
border-radius: 0;
}
.mn-item .mega-cols a:hover { padding-left: 34px; background: transparent; color: var(--green-primary); }
.mn-item .mega-feature { display: none; }
/* ---- Pied du panneau ---- */
.mn-panel-foot {
display: flex;
flex-direction: column;
margin-top: auto;
padding: 18px 20px 0;
}
.mn-panel-foot a {
min-height: 44px;
display: flex;
align-items: center;
font-size: .88rem;
color: var(--text-muted);
}
/* Le panneau est ouvert : on fige le défilement derrière lui */
body.nav-open { overflow: hidden; }
}
/* ---- Petits téléphones ----
À 320px, burger (44) + logo (155) + trois icônes (136) + gouttières
dépassaient de 63px : la page défilait latéralement. */
@media (max-width: 400px) {
.mainbar .container { padding-inline: 14px; }
.mainbar-in { gap: 6px; }
.head-icons { gap: 0; }
.brand-logo { height: 34px; }
/* La loupe fait doublon sous cette largeur : le burger ouvre le panneau,
qui présente le champ de recherche en premier. */
.head-icons > .head-search-btn { display: none; }
/* Réassurance : deux colonnes de 131px dont 60 pour l'icône, il restait 99px
de texte — « Colissimo et Chronopost en France » sur trois lignes. Une
colonne rend au texte 190px et le rend lisible. */
.reassure-grid { grid-template-columns: 1fr; }
}
/* La bande de marques défile en boucle et dépasse volontairement du cadre :
on s'assure qu'elle ne pousse jamais la largeur du document. */
.logo-marquee { overflow: hidden; }
/* Un nom de marque tient sur une ligne. La pastille avait une largeur fixe
(clamp 130–170px) trop courte pour « BEDANDPHILOSOPHY » en capitales
interlettrées : le nom se cassait en trois lignes. On la laisse s'étirer. */
.logo-ph {
white-space: nowrap;
width: auto;
min-width: clamp(130px, 14vw, 170px);
padding-inline: 20px;
}
/* Le nom de marque de la carte produit débordait du cadre sur les noms longs
à 320px, au lieu de passer à la ligne. */
.product__brand { overflow-wrap: anywhere; }
/* Les feuilles décoratives sont calées en absolu avec des retraits en
pourcentage (right:2%, left:-10px…) et débordaient du document sous 768px :
17px de défilement horizontal parasite sur l'accueil. Purement ornementales
et déjà à l'étroit sur mobile, on les retire à ces largeurs. */
@media (max-width: 767px) {
.feuille { display: none; }
}
/* Au-dessus, on les garde mais on les fait rogner par leur section.
`clip` plutôt que `hidden` : il ne crée pas de conteneur de défilement et
laisse donc l'en-tête collant fonctionner. */
.section:has(> .feuille),
.footer:has(> .feuille),
.news-content:has(> .feuille) { overflow-x: clip; }
/* ============================================================
TUNNEL, ESPACE CLIENT, CMS — HABILLAGE
Le thème ne surchargeait que 11 gabarits : panier, commande, compte,
pages CMS et 404 sortaient en Bootstrap hummingbird brut. Plutôt que de
réécrire ces gabarits — au risque de casser la mécanique de commande —
on habille leur markup aux couleurs et aux formes de la maquette.
============================================================ */
/* ---------- Boutons ----------
.btn-primary héritait color:var(--text-body) de custom.css sur un fond
var(--green-deep) : le bouton « Commander » était illisible (contraste 1,15). */
.btn {
font-family: var(--sans);
font-weight: 600;
letter-spacing: .04em;
border-radius: var(--r-pill);
padding: 13px 26px;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-primary,
.btn-primary:visited {
background: var(--green-primary);
border-color: var(--green-primary);
color: var(--bg-page);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background: var(--green-deep);
border-color: var(--green-deep);
color: #fff;
}
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
background: transparent;
border: 1px solid var(--border-line);
color: var(--text-title);
}
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
background: var(--bg-cream-deep);
border-color: var(--green-primary);
color: var(--green-primary);
}
/* Un lien déguisé en bouton : il héritait du fond et du gabarit de .btn et se
lisait comme une action principale à côté du vrai bouton de connexion. */
.btn-link,
.btn-link:hover,
.btn-link:focus {
background: transparent;
border-color: transparent;
padding-inline: 0;
min-height: 0;
color: var(--green-primary);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
}
.form-footer, .no-account, .forgot-password { margin-top: 20px; }
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
outline: 2px solid var(--green-primary);
outline-offset: 2px;
box-shadow: none;
}
/* ---------- Champs de formulaire ---------- */
.form-control,
.form-select,
.input-group .form-control {
font-family: var(--sans);
font-size: .95rem;
color: var(--text-body);
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--r-sm);
padding: 12px 14px;
min-height: 46px;
box-shadow: none;
}
.form-control:focus,
.form-select:focus {
border-color: var(--green-primary);
box-shadow: none;
}
.form-control::placeholder { color: var(--text-muted); opacity: 1; }
/* ---------- Champ mot de passe ----------
Le cœur pose l'œil « afficher / masquer » dans un .input-group, et lui donne
la classe .btn-primary : le thème le rendait donc en bouton vert plein,
large de 90 px, collé au champ — un second bouton principal aussi lourd que
« Connexion » juste au-dessus de lui, pour une commande d'appoint.
L'œil repasse à l'intérieur du champ, en icône discrète. */
.password-field.input-group {
position: relative;
display: block;
}
/* Bootstrap pose `width: 1%` sur les champs d'un .input-group et laisse le flex
les étirer : hors flex, ce 1% s'applique tel quel. */
.password-field .form-control {
width: 100%;
padding-right: 46px;
}
.password-field .btn,
.password-field .btn-primary {
position: absolute;
top: 0;
right: 0;
z-index: 3;
width: 44px;
min-height: 0;
height: 100%;
padding: 0;
background: transparent;
border: 0;
border-radius: 0 var(--r-sm) var(--r-sm) 0;
color: var(--text-muted);
transition: color .2s var(--ease);
}
.password-field .btn:hover,
.password-field .btn-primary:hover,
.password-field .btn-primary:focus,
.password-field .btn-primary:active {
background: transparent;
border: 0;
color: var(--green-primary);
}
.password-field .btn .material-icons { font-size: 20px; }
.password-field .btn:focus-visible {
outline: 2px solid var(--green-primary);
outline-offset: -2px;
}
/* Le retour de robustesse du mot de passe est un frère du .input-group : il
doit rester sous le champ, pas dans sa boîte relative. */
.password-field + [data-ps-target='password-feedback-target']:not(:empty) { margin-top: 10px; }
label, .form-label, .form-control-label {
font-size: .85rem;
font-weight: 500;
color: var(--text-title);
margin-bottom: 6px;
}
.form-text, .help-block, small.form-text { color: var(--text-muted); font-size: .78rem; }
/* Cases et boutons radio : le libellé chevauchait la case sur la page commande. */
.form-check {
display: flex;
align-items: flex-start;
gap: 10px;
padding-left: 0;
margin-bottom: 10px;
min-height: 24px;
}
.form-check .form-check-input {
float: none;
margin: 2px 0 0;
flex-shrink: 0;
width: 19px;
height: 19px;
border: 1px solid var(--border-line);
background-color: var(--surface);
cursor: pointer;
}
.form-check .form-check-input:checked {
background-color: var(--green-primary);
border-color: var(--green-primary);
}
.form-check .form-check-label {
margin: 0;
font-weight: 400;
color: var(--text-body);
line-height: 1.45;
cursor: pointer;
}
.radio-inline, .custom-radio { display: inline-flex; align-items: center; gap: 7px; margin-right: 18px; }
/* ---------- Panier ---------- */
.cart-grid.row { row-gap: 32px; }
@media (min-width: 992px) {
/* Les deux colonnes se touchaient : la carte du récapitulatif venait au
contact du sélecteur de quantité, ce qui se lisait comme un chevauchement. */
.cart-grid__content.col-lg-8 { padding-right: clamp(16px, 3vw, 40px); }
}
.cart-grid__aside-wrapper > h2 {
font-size: 1.15rem;
font-weight: 600;
color: var(--text-title);
margin-bottom: 14px;
}
.cart-summary,
.cart-grid__aside-wrapper > .cart-summary {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 20px;
box-shadow: var(--sh-soft);
}
/* Classes BEM du parent : .cart-summary__line, pas .cart-summary-line. */
.cart-summary .cart-summary__line {
display: flex;
justify-content: space-between;
gap: 14px;
font-size: .92rem;
color: var(--text-body);
}
.cart-summary .cart-summary__total .cart-summary__line {
border-top: 1px solid var(--border-soft);
margin-top: 8px;
padding-top: 14px;
font-size: 1.05rem;
font-weight: 700;
color: var(--text-title);
}
/* 86px de remplissage sous le bouton laissaient un grand vide dans la carte. */
.cart-summary .cart-summary__actions { padding-bottom: 0; }
.cart-detailed-actions .btn,
.checkout .btn-primary { width: 100%; }
.product-line__content { gap: 16px; }
/* Les visuels arrivaient à hauteur libre dans une boîte carrée de 128 px :
les photos en portrait débordaient, celles en paysage laissaient une bande
vide. Recadrage carré, comme partout ailleurs sur le site. */
.product-line__image {
flex-shrink: 0;
width: 128px;
}
.product-line__image a,
.product-line__image picture { display: block; }
.product-line__image img,
.product-line__img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--r-md);
background: var(--bg-cream-deep);
}
.product-line__item-label { color: var(--text-title); font-weight: 500; }
.product-line__item--prices .product-line__item-price { font-weight: 600; color: var(--text-title); }
/* Le groupe -/+/champ s'empilait verticalement : .input-group perdait son flex. */
.quantity-button__group.input-group {
display: inline-flex;
flex-wrap: nowrap;
align-items: stretch;
width: auto;
max-width: 132px;
border: 1px solid var(--border-soft);
border-radius: var(--r-pill);
background: var(--surface);
overflow: hidden;
}
.quantity-button__group .btn {
min-height: 42px;
width: 40px;
padding: 0;
border: none;
border-radius: 0;
background: transparent;
color: var(--text-title);
}
.quantity-button__group .btn:hover { background: var(--bg-cream-deep); }
.quantity-button__group .form-control {
border: none;
background: transparent;
text-align: center;
min-height: 42px;
padding: 0 2px;
width: 44px;
font-variant-numeric: tabular-nums;
}
.js-remove-from-cart {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .82rem;
color: var(--text-muted);
min-height: 40px;
}
.js-remove-from-cart:hover { color: var(--terracotta); }
/* ---------- Étapes de la commande ----------
L'indicateur de progression n'était aligné sur aucun conteneur : la pastille
« 1 » était coupée par le bord gauche de la fenêtre. */
.checkout-steps__desktop {
max-width: var(--max);
margin-inline: auto;
padding-inline: clamp(20px, 5vw, 64px);
box-sizing: border-box; /* comme .container, sinon le bandeau dépasse de 128px */
}
/* Le panneau de contenu de l'étape — à ne pas confondre avec .js-step-item,
qui est une puce de l'indicateur de progression. */
section.step {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
margin-bottom: 16px;
overflow: hidden;
}
.step__title, .js-step-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--text-title);
padding: 18px 22px;
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.step__content { padding: 0 22px 22px; }
.step-number, .step__number {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--green-primary);
color: var(--bg-page);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .82rem;
font-weight: 700;
flex-shrink: 0;
}
/* ---------- Espace client ----------
Ces règles visaient `.links a`, le markup du thème classic. Hummingbird
rend des `.account-menu__link` : aucune ne s'appliquait, et les tuiles du
compte sortaient en gris Bootstrap #F8F9FA, sans bordure, l'icône en haut
et le libellé en bas d'une boîte à moitié vide. Le menu latéral, lui,
arrivait en liste brute.
Le cœur rend le même markup pour les deux — .account-menu--sidebar pour la
colonne, --main pour les tuiles de l'accueil du compte — d'où le socle
commun ci-dessous, puis les deux déclinaisons. */
.account-menu__link {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-body);
transition: color .25s var(--ease), background .25s var(--ease),
border-color .25s var(--ease), transform .25s var(--ease);
}
/* Les icônes sont des ligatures Material : on ne leur donnera pas le trait
fin des SVG du thème, mais au moins sa palette et son échelle. */
.account-menu__icon {
flex-shrink: 0;
font-size: 20px;
color: var(--text-muted);
transition: background .25s var(--ease), color .25s var(--ease);
}
.account-menu__link:hover { color: var(--green-primary); }
.account-menu__link:hover .account-menu__icon { color: var(--green-primary); }
.account-menu__link--signout:hover,
.account-menu__link--signout:hover .account-menu__icon { color: var(--terracotta-on-white); }
/* ---------- Colonne de navigation ---------- */
.account-menu__title {
font-size: 1.15rem;
font-weight: 600;
color: var(--text-title);
letter-spacing: -.01em;
margin: 0 0 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-soft);
}
.account-menu__nav { display: flex; flex-direction: column; gap: 2px; }
.account-menu--sidebar .account-menu__link {
min-height: 44px;
padding: 9px 12px;
border-radius: var(--r-sm);
font-size: .92rem;
line-height: 1.4;
}
.account-menu--sidebar .account-menu__link:hover { background: var(--bg-cream-deep); }
.account-menu--sidebar .account-menu__link--active,
.account-menu--sidebar .account-menu__link--active .account-menu__icon {
color: var(--green-primary);
}
.account-menu--sidebar .account-menu__link--active {
background: var(--bg-cream-deep);
font-weight: 600;
}
/* ---------- Tuiles de l'accueil du compte ---------- */
.account-menu--main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
gap: clamp(14px, 1.6vw, 20px);
}
.account-menu--main .account-menu__link {
flex-direction: column;
align-items: flex-start;
gap: 16px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: var(--sh-soft);
padding: 24px 22px;
font-size: .97rem;
font-weight: 600;
line-height: 1.35;
color: var(--text-title);
}
.account-menu--main .account-menu__link:hover {
border-color: var(--green-primary);
transform: translateY(-2px);
}
/* L'icône dans sa pastille, comme les rassurances de l'accueil. */
.account-menu--main .account-menu__icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: var(--r-pill);
background: var(--bg-cream-deep);
font-size: 22px;
color: var(--green-primary);
}
.account-menu--main .account-menu__link:hover .account-menu__icon {
background: var(--green-primary);
color: var(--bg-page);
}
/* Le cœur masque « Déconnexion » dans la grille — elle est déjà dans la
colonne, et ce n'est pas une rubrique du compte. Mais sa règle vit dans
@layer ps-components, et une déclaration hors couche l'emporte sur une
déclaration en couche quelle que soit sa spécificité : notre `display: flex`
sur .account-menu__link la ressuscitait. On la repose donc ici. */
.account-menu--main .account-menu__link--signout { display: none; }
/* ---------- Retour au compte ----------
Un .btn-outline-tertiary : il sortait en pastille blanche pleine largeur de
texte, posée au-dessus de la carte, avec le poids d'une action principale
pour un simple retour en arrière. */
.account-menu__back {
/* `inline-block` et non `inline-flex` : la flèche et le texte se calent
alors sur la même ligne de base, l'écart se règle à la marge de l'icône.
Et non `inline` tout court, parce qu'une boîte en ligne ignore ses marges
verticales — le lien se recollait à la carte. */
display: inline-block;
margin-bottom: 22px;
padding: 0;
min-height: 0;
background: transparent;
border: 0;
border-radius: 0;
font-size: .9rem;
font-weight: 500;
letter-spacing: 0;
color: var(--green-primary);
text-decoration: none;
transition: color .25s var(--ease);
}
.account-menu__back:hover {
background: transparent;
color: var(--green-deep);
}
.account-menu__back .material-icons {
display: inline-block;
vertical-align: -2px;
margin-right: 5px;
font-size: 14px;
}
/* La colonne de navigation et le contenu se touchaient exactement : la
pastille active finissait au pixel où commence le titre de la page.
custom.css remet à zéro le padding de toutes les colonnes — `--bs-gutter-x`
n'y peut donc rien, la gouttière Bootstrap n'existe plus. On la repose à la
main sur les deux colonnes. Les largeurs sont en pourcentage et la boîte
est en border-box : le padding se prend dedans, rien ne déborde.
Sous 992px les colonnes s'empilent en pleine largeur et la colonne de
navigation est masquée : ce padding décalerait le contenu sans raison. */
@media (min-width: 992px) {
#center-column > .row:has(.account-menu--sidebar) > .col-lg-3 { padding-right: 32px; }
#center-column > .row:has(.account-menu--sidebar) > .col-lg-9 { padding-left: 32px; }
}
/* ---------- Adresses ----------
Les fiches d'adresse étaient posées DANS la carte de l'espace client :
deux bordures arrondies imbriquées. La carte englobante est retirée plus
bas, à la source (cf. la liste des #content en carte), ce sont les fiches
qui portent le cadre.
« Supprimer » est un .link-danger, que Bootstrap déclare `!important` dans
sa couche bs-base. Pour les déclarations importantes l'ordre des couches
s'inverse — une règle importante en couche l'emporte sur toute règle
importante hors couche — il faut donc se placer dans la même couche pour
sortir du rouge vif #FF4657. La reprise vaut pour tout le site. */
@layer bs-base {
.link-danger,
.link-danger:hover,
.link-danger:focus { color: var(--terracotta-on-white) !important; }
}
.addresses__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
gap: clamp(14px, 1.6vw, 20px);
margin-top: 22px;
}
.address-card {
display: flex;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: var(--sh-soft);
padding: 24px 22px;
}
.address-card__container {
display: flex;
flex-direction: column;
flex: 1;
}
.address-card__alias {
display: block;
font-size: 1.02rem;
font-weight: 600;
color: var(--text-title);
margin-bottom: 12px;
}
.address-card__content {
margin: 0;
font-style: normal;
font-size: .93rem;
line-height: 1.7;
color: var(--text-muted);
}
/* Poussées en pied de fiche : les adresses n'ont pas toutes le même nombre de
lignes, les actions s'alignaient donc n'importe où d'une carte à l'autre. */
.address-card__actions {
display: flex;
gap: 20px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--border-soft);
}
.address-card__edit,
.address-card__delete {
font-size: .88rem;
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--border-line);
text-underline-offset: 3px;
transition: text-decoration-color .25s var(--ease);
}
.address-card__edit:hover,
.address-card__delete:hover { text-decoration-color: currentColor; }
/* La fiche « ajouter » n'est pas une adresse : un cadre en pointillé plutôt
qu'une carte pleine, et le gros bouton vert plein redevient une pastille. */
.address-card--add-address {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 168px;
text-align: center;
background: transparent;
border: 1px dashed var(--border-line);
box-shadow: none;
color: var(--text-muted);
}
.address-card--add-address:hover {
background: var(--bg-cream-deep);
border-color: var(--green-primary);
color: var(--green-primary);
}
.address-card__add-text { order: 2; font-size: .93rem; font-weight: 500; }
.address-card__add-icon {
order: 1;
display: grid;
place-items: center;
width: 46px;
height: 46px;
min-height: 0;
padding: 0;
border: 0;
border-radius: var(--r-pill);
background: var(--bg-cream-deep);
color: var(--green-primary);
}
.address-card--add-address:hover .address-card__add-icon {
background: var(--green-primary);
color: var(--bg-page);
}
/* ---------- Rythme du contenu rendu par le cœur ----------
custom.css ouvre sur une remise à zéro totale — `*{margin:0;padding:0}`.
Sur les pages redessinées c'est voulu : chaque bloc pose ses écarts. Mais
tout ce que le cœur ou un module rend en texte courant y perd son rythme,
et rien ne le lui rend : sur la page RGPD, les deux titres étaient posés
à même leur paragraphe, et les boutons d'export à même le texte au-dessus.
On rend donc une respiration à la prose de l'espace client. Le crochet est
.page-content--customer, que le cœur pose sur le #content de toutes ces
pages : plus fiable qu'une liste de classes `page-*` sur le , que la
page « Mes alertes » du module ps_emailalerts ne porte pas du tout.
Les sélecteurs d'élément passent par :where() pour ne peser aucune
spécificité : les règles nommées du thème continuent de primer. */
:is(#content.page-content--customer, .page-customer-account #content)
:where(h2, h3, h4, h5, h6) {
margin: 0 0 10px;
line-height: 1.3;
}
:is(#content.page-content--customer, .page-customer-account #content)
:where(h2, h3, h4, h5, h6):not(:first-child) { margin-top: 32px; }
:is(#content.page-content--customer, .page-customer-account #content)
:where(p) {
margin: 0 0 16px;
line-height: 1.7;
}
:is(#content.page-content--customer, .page-customer-account #content)
:where(p):last-child { margin-bottom: 0; }
:is(#content.page-content--customer, .page-customer-account #content)
:where(ul, ol) {
margin: 0 0 16px;
padding-left: 1.25em;
}
:is(#content.page-content--customer, .page-customer-account #content)
:where(li + li) { margin-top: 6px; }
/* Les boutons du cœur sont des en ligne : sans marge propre, ils
collaient au paragraphe qui les introduit et se touchaient entre eux. */
:is(#content.page-content--customer, .page-customer-account #content)
:where(p) + .btn { margin-top: 4px; }
:is(#content.page-content--customer, .page-customer-account #content)
.btn + .btn { margin-left: 12px; }
/* Chapô des pages du compte — « Vous trouverez ici vos commandes… ». */
#content.page-content--customer > p:first-child,
.page-customer-account #content > p:first-child {
margin-bottom: 22px;
color: var(--text-muted);
font-size: .95rem;
max-width: 62ch;
}
/* ============================================================
HISTORIQUE DES COMMANDES
Le cœur rend un pseudo-tableau : une grille de 7 colonnes en subgrid,
dimensionnées par leur contenu. « Paiement comptant à la livraison (Cash on
delivery) » et « En attente de paiement à la livraison » suffisaient à la
faire déborder de sa carte — barre de défilement horizontale, et les deux
boutons d'action coupés net au bord droit.
Sept colonnes de données, c'est la forme d'un export comptable, pas celle
d'un historique client qu'on consulte pour retrouver une commande. Chaque
ligne devient donc une fiche, et chaque fiche répond à une question :
laquelle (référence), quand et combien, où elle en est, et que puis-je en
faire. Plus de défilement horizontal, et le mobile tient sans traitement
séparé.
Le markup garde ses rôles ARIA table/row/cell : la donnée reste tabulaire,
seule sa présentation change. L'en-tête est masqué à l'œil mais conservé
pour les lecteurs d'écran.
============================================================ */
.order-history__inner { display: block; }
/* Masqué visuellement, pas retiré : role="table" a besoin de ses
columnheader, et les lecteurs d'écran annoncent la colonne de chaque
cellule grâce à eux. */
.order-history__header {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.order-history__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
column-gap: 20px;
row-gap: 10px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: var(--sh-soft);
padding: clamp(18px, 2.2vw, 24px);
}
.order-history__row + .order-history__row { margin-top: 14px; }
/* Chaque ligne de la fiche apparie une valeur longue à gauche et une valeur
courte à droite : référence/total, paiement/date, état/facture.
Le cœur pose `display: grid` sur ses cellules : le libellé et la valeur y
devenaient deux éléments de grille empilés, « Facture : » sur une ligne et
« -- » sur la suivante. On repasse en flux normal. */
.order-history__row > .order-history__cell { display: block; }
.order-history__cell--reference {
grid-area: 1 / 1;
font-size: 1.02rem;
font-weight: 600;
letter-spacing: .04em;
color: var(--text-title);
}
.order-history__cell--total {
grid-area: 1 / 2;
justify-self: end;
font-size: 1.02rem;
font-weight: 600;
color: var(--text-title);
font-variant-numeric: tabular-nums;
}
.order-history__cell--payment {
grid-area: 2 / 1;
color: var(--text-muted);
font-size: .9rem;
line-height: 1.5;
}
.order-history__cell--date {
grid-area: 2 / 2;
justify-self: end;
color: var(--text-muted);
font-size: .9rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.order-history__cell--status { grid-area: 3 / 1; }
.order-history__cell--invoice {
grid-area: 3 / 2;
justify-self: end;
color: var(--text-muted);
font-size: .88rem;
white-space: nowrap;
}
/* Sans en-tête visible, « -- » tout seul ne dit rien. Le cœur prévoit ce
libellé pour son mode empilé et le laisse en display:none le reste du
temps — d'où le display explicite. */
.order-history__cell--invoice::before {
content: attr(data-ps-label) " : ";
display: inline;
color: var(--text-muted);
}
/* Le lien vers la facture est une ligature Material seule : sans couleur ni
surface de clic, elle passait pour une décoration. Même cas dans la colonne
« Avoir » de la page des avoirs, d'où le sélecteur partagé. */
.order-history__cell--invoice a,
.grid-table__cell > a:has(> .material-icons) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
vertical-align: -10px;
border-radius: var(--r-sm);
color: var(--green-primary);
transition: background .25s var(--ease), color .25s var(--ease);
}
.order-history__cell--invoice a:hover,
.grid-table__cell > a:has(> .material-icons):hover {
background: var(--bg-cream-deep);
color: var(--green-deep);
}
.order-history__cell--invoice .material-icons,
.grid-table__cell > a > .material-icons { font-size: 19px; }
/* ---------- Pastille d'état ----------
La couleur vient d'un style inline (`background-color:#34209E`), posée
depuis la configuration des états de commande : impossible à lire en CSS,
et l'indigo par défaut de PrestaShop n'a rien à faire dans une palette
crème et vert.
Plutôt que de l'écraser — ce qui rendrait tous les états identiques et
ferait perdre le signal — on peint par-dessus un voile crème translucide.
`background-image` se pose au-dessus de `background-color` : la teinte de
l'état survit, très adoucie, et le texte peut repasser en sombre. Un état
vert restera vert, un état rouge restera rouge. */
.order-history__status.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: var(--r-pill);
background-image: linear-gradient(rgba(244, 239, 230, .86), rgba(244, 239, 230, .86));
border: 1px solid var(--border-soft);
font-size: .85rem;
font-weight: 500;
line-height: 1.35;
text-align: left;
white-space: normal;
}
.order-history__status.badge,
.order-history__status--bright.badge { color: var(--text-title); }
/* ---------- Actions ---------- */
.order-history__cell--actions {
grid-area: 4 / 1 / 4 / 3;
/* Le cœur cale ses cellules en `justify-self: start` : le filet au-dessus
des actions s'arrêtait à la largeur des deux boutons au lieu de courir
d'un bord à l'autre de la fiche. */
justify-self: stretch;
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
margin-top: 6px;
padding-top: 16px;
border-top: 1px solid var(--border-soft);
}
.order-history__cell--actions .btn {
min-height: 40px;
padding: 9px 18px;
font-size: .86rem;
}
/* Consulter la commande est l'action attendue ; la recommander est un
raccourci. Les deux sortaient avec le même contour. */
.order-history__cell--actions .btn:first-child {
background: var(--green-primary);
border-color: var(--green-primary);
color: var(--bg-page);
}
.order-history__cell--actions .btn:first-child:hover {
background: var(--green-deep);
border-color: var(--green-deep);
color: #fff;
}
.order-history__cell--actions .btn .material-icons { font-size: 17px; }
@media (max-width: 560px) {
.order-history__row { grid-template-columns: minmax(0, 1fr); }
.order-history__cell--invoice { white-space: normal; }
.order-history__cell--total,
.order-history__cell--date,
.order-history__cell--invoice { justify-self: start; }
.order-history__cell--reference { grid-area: auto; }
.order-history__cell--total { grid-area: auto; }
.order-history__cell--payment { grid-area: auto; }
.order-history__cell--date { grid-area: auto; }
.order-history__cell--status { grid-area: auto; }
.order-history__cell--invoice { grid-area: auto; }
.order-history__cell--actions { grid-area: auto; }
.order-history__cell--actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* ============================================================
TABLEAUX DE DONNÉES (.grid-table)
Composant générique du cœur — quatre occurrences rien que sur le détail
d'une commande : suivi d'état, suivi d'expédition, produits, totaux. Il
arrivait sans aucun habillage : un en-tête en gras collé à sa première
ligne, aucune séparation entre les lignes, les valeurs numériques dans la
graisse du texte courant.
On l'habille ici plutôt que page par page : tout tableau du site en hérite.
============================================================ */
.grid-table { width: 100%; }
.grid-table + .grid-table { margin-top: 0; }
.grid-table__header {
border-bottom: 1px solid var(--border-line);
padding-bottom: 10px;
margin-bottom: 4px;
}
.grid-table__header .grid-table__cell {
font-size: .74rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-muted);
line-height: 1.3;
}
.grid-table__row {
padding-block: 14px;
border-bottom: 1px solid var(--border-soft);
}
.grid-table__row:last-child { border-bottom: 0; }
.grid-table__cell {
display: flex;
align-items: center;
min-width: 0;
color: var(--text-body);
font-size: .93rem;
line-height: 1.5;
font-variant-numeric: tabular-nums;
}
.grid-table__cell--center { justify-content: center; text-align: center; }
.grid-table__cell--right { justify-content: flex-end; text-align: right; }
/* ---------- Ligne produit ---------- */
.order-product__infos {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.order-product__image { flex-shrink: 0; width: 64px; }
.order-product__image a,
.order-product__image picture { display: block; }
.order-product__img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--r-sm);
background: var(--bg-cream-deep);
}
.order-product__content {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.order-product__name {
font-weight: 600;
color: var(--text-title);
line-height: 1.35;
}
.order-product__name:hover { color: var(--green-primary); }
.order-product__content .text-secondary {
color: var(--text-muted);
font-size: .82rem;
}
/* ---------- Totaux ----------
Le cœur les pose dans une grille de six colonnes où chaque ligne n'a qu'une
seule cellule : six pistes pour trois valeurs. On repasse en simples lignes
libellé/valeur, calées à droite comme dans le récapitulatif du panier. */
.grid-table__inner:has(> .grid-table__row > .grid-table__cell--label-value) {
display: block;
margin-left: auto;
max-width: 340px;
}
.grid-table__row:has(> .grid-table__cell--label-value) {
padding-block: 6px;
border-bottom: 0;
}
.grid-table__cell--label-value {
justify-content: space-between;
gap: 24px;
font-weight: 500;
}
.grid-table__cell--label-value::before {
content: attr(data-ps-label);
color: var(--text-muted);
font-weight: 400;
}
/* Le filet qui annonce les totaux court sur toute la largeur du tableau, pas
sur celle de la colonne des montants : un trait de 340 px flottant sous un
tableau de 760 ne sépare rien de lisible. Il est donc porté par le bloc des
totaux, pas par sa dernière ligne. */
.grid-table:has(.grid-table__cell--label-value) {
border-top: 1px solid var(--border-soft);
padding-top: 16px;
margin-top: 16px;
}
.grid-table__row:has(> .grid-table__cell--label-value):last-child { margin-top: 4px; }
.grid-table__row:last-child > .grid-table__cell--label-value,
.grid-table__row:last-child > .grid-table__cell--label-value::before {
color: var(--text-title);
font-weight: 600;
font-size: 1rem;
}
/* ---------- Pastilles d'état ----------
Même traitement que dans l'historique : la couleur vient d'un style inline
posé depuis la configuration des états de commande, on la voile plutôt que
de l'écraser pour garder le signal. */
.order-status__badge.badge {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: var(--r-pill);
background-image: linear-gradient(rgba(244, 239, 230, .86), rgba(244, 239, 230, .86));
border: 1px solid var(--border-soft);
font-size: .85rem;
font-weight: 500;
line-height: 1.35;
text-align: left;
white-space: normal;
}
.order-status__badge.badge,
.order-status__badge--bright.badge { color: var(--text-title); }
/* ---------- Détail d'une commande ---------- */
.page-order-detail #content h2,
.page-order-detail #content .h2,
.page-order-detail #content h3 {
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
font-weight: 600;
color: var(--text-title);
margin: 0 0 14px;
}
/* Le rythme entre sections est posé sur le conteneur, pas sur les titres :
chaque titre est le PREMIER enfant de sa propre , une règle du
type `:not(:first-child)` ne l'atteint jamais. Les six sections de la page
se touchaient donc toutes à 0 px. Un flex en colonne avec un gap ne peut
pas laisser passer ça, quel que soit ce que rend le cœur. */
.page-order-detail #content {
display: flex;
flex-direction: column;
gap: clamp(30px, 3.6vw, 46px);
}
/* Le récapitulatif d'en-tête — référence, transporteur, moyen de paiement —
arrivait en paragraphes séparés par des marges de texte courant, et le
bouton « Commander à nouveau » flottait entre lui et la section suivante,
sans appartenir ni à l'un ni à l'autre. Ils tiennent maintenant dans un
même panneau. */
.page-order-detail .order-infos {
background: var(--bg-cream-deep);
border-radius: var(--r-md);
padding: clamp(18px, 2.2vw, 24px);
}
.page-order-detail .order-infos p {
margin: 0 0 6px;
color: var(--text-body);
}
.page-order-detail .order-infos p:last-of-type { margin-bottom: 0; }
.page-order-detail .order-infos__actions {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--border-line);
justify-content: flex-start;
}
/* Les dans un ul.nav.nav-underline — pas un
.nav-tabs, d'où les deux conteneurs visés ici. */
.nav-tabs,
.nav-underline { border-bottom: 1px solid var(--border-soft); gap: 4px; }
.nav-tabs .nav-link,
.nav-underline .nav-link {
color: var(--text-muted);
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: 10px 4px;
margin-right: 18px;
font-weight: 500;
}
.nav-tabs .nav-link:hover,
.nav-underline .nav-link:hover { color: var(--green-primary); }
.nav-tabs .nav-link.active,
.nav-underline .nav-link.active {
color: var(--text-title);
background: transparent;
border-bottom-color: var(--green-primary);
font-weight: 600;
}
/* Le fil des 4 étapes s'affichait sur une bande grise (--bs-light) filant d'un
bord à l'autre, alors que tout le reste de la page est dans le conteneur. */
.checkout-steps {
background: transparent;
border-bottom: 1px solid var(--border-soft);
/* Il arrivait collé sous l'en-tête, et son filet de fermeture collé aux
libellés — puis la carte de l'étape démarrait à 0 px de ce filet. Trois
contacts d'affilée. */
padding-block: clamp(20px, 2.6vw, 30px) clamp(12px, 1.6vw, 18px);
margin-bottom: clamp(24px, 3.2vw, 40px);
}
/* Le libellé était centré dans une boîte de 52 px sous la pastille, ce qui
donnait autant d'air en dessous du texte qu'au-dessus — et le filet
récupérait tout. L'écart est posé au-dessus, la bande gère le dessous. */
.checkout-steps__btn { padding-block: 12px 0; }
/* Chaque étape occupe un quart de la largeur, mais la pastille était calée au
bord gauche de son quart et le libellé centré dedans : 124 px d'écart entre
le chiffre et le mot qu'il numérote. Le « 2 » avait l'air d'annoncer
« Informations personnelles ». On centre la pastille sur son libellé. */
.checkout-steps__step {
display: flex;
flex-direction: column;
align-items: center;
}
/* Le trait de liaison est peint par les deux pseudo-éléments de l'étape, en
absolu sur toute sa largeur : une fois la pastille au centre, il lui passait
dessous. On le coupe de part et d'autre, et chaque moitié rejoint celle de
l'étape voisine. */
.checkout-steps__step::before {
left: 0;
width: calc(50% - 22px);
}
.checkout-steps__step::after {
left: calc(50% + 22px);
width: calc(50% - 22px);
}
/* Sans quoi un bout de trait pend dans le vide avant la première pastille et
après la dernière. */
.checkout-steps__step:first-child::before,
.checkout-steps__step:last-child::after { display: none; }
/* Les pastilles et le trait de liaison sortaient dans la palette Bootstrap :
vert #188251 pour les étapes faites, gris #212529 pour l'étape en cours et
#CED4DA pour celles à venir. Trois couleurs qu'on ne trouve nulle part
ailleurs sur le site. */
/* Couleurs seules : la mise en page des pastilles (taille, centrage du
chiffre, position du trait de liaison) vient du gabarit, y toucher décroche
le trait des pastilles. */
.checkout-steps__number {
background: var(--bg-cream-deep);
color: var(--text-muted);
font-weight: 600;
}
.checkout-steps__step--success .checkout-steps__number {
background: var(--green-primary);
color: var(--bg-page);
}
.checkout-steps__step--current .checkout-steps__number {
background: var(--green-deep);
color: var(--bg-page);
}
/* Le trait est peint en deux morceaux, ::before et ::after : n'en reprendre
qu'un laissait un second filet vert Bootstrap par-dessous, d'où l'impression
de ligne dédoublée. */
.checkout-steps__step::before,
.checkout-steps__step::after { background: var(--border-soft); }
.checkout-steps__step--success::before,
.checkout-steps__step--success::after { background: var(--green-primary); }
/* Sur mobile le fil devient un anneau de progression, un
dont le trait suit currentColor : encore le vert Bootstrap #188251. Comme
toute utilitaire Bootstrap, .text-success est !important dans @layer
utilities — il faut donc répondre depuis la même couche. */
@layer utilities {
.checkout-steps__mobile .progress-ring.text-success { color: var(--green-primary) !important; }
}
.progress-ring__background-circle { stroke: var(--border-soft); }
/* Les libellés étaient soulignés — quatre liens en travers du parcours, alors
que seuls les précédents sont réellement cliquables. */
.checkout-steps__btn {
text-decoration: none;
color: var(--text-muted);
font-weight: 500;
transition: color .25s var(--ease);
}
.checkout-steps__step--success .checkout-steps__btn { color: var(--green-primary); }
.checkout-steps__step--success .checkout-steps__btn:hover { color: var(--green-deep); }
.checkout-steps__step--current .checkout-steps__btn {
color: var(--text-title);
font-weight: 600;
}
/* ---------- Les deux colonnes du tunnel ----------
La carte de l'étape et celle du récapitulatif se touchaient exactement :
bord droit de l'une = bord gauche de l'autre. Le panier, lui, a bien sa
gouttière — on aligne la commande dessus. Comme ailleurs sur ce thème, la
gouttière Bootstrap n'existe plus (custom.css remet le padding des colonnes
à zéro), on la repose donc à la main. */
@media (min-width: 992px) {
#checkout .checkout-grid__content { padding-right: clamp(20px, 3vw, 36px); }
}
/* Le bloc du récapitulatif arrivait en blanc pur, la seule surface blanche
d'un site entièrement crème — et il débordait de la carte qui le porte,
d'où ce liseré clair le long du bord droit. */
.checkout__summary-accordion-item { background: transparent; }
/* ---------- Cases et boutons radio du tunnel ----------
Le thème ne reprenait la couleur cochée que sous un conteneur .form-check.
Les adresses du tunnel posent leur radio sans ce conteneur : elle restait
au bleu Bootstrap #0B69F6, la seule couleur froide de tout le parcours. */
.form-check-input:checked {
background-color: var(--green-primary);
border-color: var(--green-primary);
}
.form-check-input:focus {
border-color: var(--green-primary);
box-shadow: none;
}
/* ---------- Modes de livraison et moyens de paiement ----------
Les transporteurs s'affichaient sur des lignes #F8F9FA, le gris bleuté de
Bootstrap, et les moyens de paiement sur rien du tout : une liste de radios
nus, sans ligne ni cadre, là où l'étape précédente en proposait. Les deux
choix se présentent maintenant de la même façon. */
.delivery-option__item,
.payment-option {
background: transparent;
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
margin-bottom: 10px;
transition: border-color .25s var(--ease), background .25s var(--ease);
}
.delivery-option__item:hover,
.payment-option:hover { border-color: var(--border-line); }
/* La ligne choisie se distingue par autre chose que sa seule pastille. */
.delivery-option__item:has(.form-check-input:checked),
.payment-option:has(.form-check-input:checked) {
background: var(--bg-cream-deep);
border-color: var(--green-primary);
}
.delivery-option__label,
.payment-option__form-check {
margin: 0;
padding: 16px 18px;
cursor: pointer;
}
.delivery-option__label { gap: 18px; }
.delivery-option__carrier-name,
.payment-option__label {
font-weight: 600;
color: var(--text-title);
cursor: pointer;
}
.delivery-option__content { color: var(--text-muted); font-size: .93rem; }
.delivery-option__price { font-weight: 600; color: var(--text-title); }
/* Le logo du transporteur est une image fournie par le marchand : on ne peut
que lui donner un fond de la charte plutôt que le gris d'origine. */
.delivery-option__carrier img {
background: var(--surface);
border-radius: var(--r-sm);
padding: 4px;
}
.payment-option__additional-information { padding: 0 18px 16px; }
.payment-option__additional-information:empty { padding: 0; }
/* Les consignes du paiement par chèque — montant, bénéficiaire, adresse
d'envoi — arrivaient dans un au fond #F8F9FA, sans marge intérieure :
un pavé gris bleuté au milieu de la ligne sélectionnée. */
.payment-option__additional-information p { margin: 0 0 12px; color: var(--text-muted); }
.payment-option__additional-information p:empty { display: none; }
.payment-option__additional-information dl {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--r-sm);
padding: 14px 16px;
gap: 8px 16px;
margin: 0;
}
.payment-option__additional-information dt {
font-weight: 600;
color: var(--text-title);
}
.payment-option__additional-information dd {
margin: 0;
color: var(--text-muted);
}
/* ---------- Actions de l'étape adresses (saisie) ----------
Quand l'adresse est à saisir, le cœur pose « Continuer » DANS le formulaire
et « Retour » après lui, dans deux conteneurs séparés : l'un calé à droite,
l'autre à gauche, 68 px plus bas. Deux actions qui ne se répondaient pas.
Impossible de les remettre sur une ligne sans toucher au gabarit — le
bouton d'envoi est enfermé dans le