/* ==========================================================================
La Médocaine — socle global
Chargé sur TOUTES les pages, après le theme.css de Hummingbird.
Ordre : 1. tokens de marque → 2. remap Bootstrap → 3. base → 4. composants.
Principe : Hummingbird est un thème Bootstrap 5.3 entièrement piloté par des
variables CSS (--bs-*). On les remappe une fois ici : boutons, liens, bordures,
champs de formulaire et grille prennent la charte sans règle supplémentaire.
On n'écrit ensuite que ce que la maquette impose vraiment.
Le spécifique à une page vit dans home.css / product.css / category.css.
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS — relevés sur la maquette Figma (Home Desktop, node 1:2)
-------------------------------------------------------------------------- */
:root {
/* Couleurs de marque */
--md-navy: #211c35; /* encre principale, aplats foncés */
--md-navy-soft: #3a2a22; /* brun foncé, textes secondaires */
--md-gold: #d6a342; /* accent : filets, italiques, promos */
--md-gold-light: #d5b880; /* accent clair */
--md-gold-deep: #c69743; /* filet au-dessus du copyright */
--md-cream: #f6f1ea; /* header/footer, texte sur fond foncé */
--md-cream-soft: #fbf8f3; /* fond général des pages */
--md-sand: #e6ddd0; /* bordures de cartes, fonds doux */
--md-muted: #6b5a4e; /* texte secondaire, méta */
--md-white: #fff;
/* Dérivés — pas de rgba() en dur dans les composants */
--md-line: rgba(33, 28, 53, .18);
--md-line-soft: rgba(33, 28, 53, .1); /* séparateurs de filtres, bas de bandeau */
--md-muted-soft: #9a8a7c; /* compteurs de facettes, méta discrète */
--md-green: #2a6b3d; /* disponibilité en stock */
--md-on-dark: rgba(246, 241, 234, .85);
--md-overlay: rgba(0, 0, 0, .6);
/* Rôles sémantiques : les composants utilisent CEUX-CI */
--md-bg: var(--md-cream-soft);
--md-text: var(--md-navy);
--md-text-muted: var(--md-muted);
--md-border: var(--md-sand);
--md-accent: var(--md-gold);
/* Typographie */
--md-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--md-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
/* Échelle de la maquette (10 → 72 px) */
--md-fs-3xs: .625rem;
--md-fs-2xs: .6875rem;
--md-fs-xs: .75rem;
--md-fs-sm: .8125rem;
--md-fs-base: .875rem;
--md-fs-md: 1rem;
--md-fs-lg: 1.125rem;
--md-fs-xl: 1.25rem;
--md-fs-2xl: 1.625rem;
--md-fs-3xl: 2.25rem;
--md-ls-wide: .12em; /* capitales espacées (surtitres, boutons) */
/* Rythme */
--md-section-y: clamp(2.5rem, 5vw, 3.5rem);
--md-gutter: 1.25rem;
--md-container: 84.125rem; /* 1346px — 1440 moins les marges de 47px */
}
/* --------------------------------------------------------------------------
2. REMAP BOOTSTRAP — la charte passe par les variables du framework
-------------------------------------------------------------------------- */
:root {
--bs-primary: var(--md-navy);
--bs-primary-rgb: 33, 28, 53;
--bs-body-color: var(--md-navy);
--bs-body-color-rgb: 33, 28, 53;
--bs-body-bg: var(--md-cream-soft);
--bs-body-bg-rgb: 251, 248, 243;
--bs-body-font-family: var(--md-font-body);
--bs-body-font-size: var(--md-fs-base);
--bs-body-line-height: 1.55;
--bs-emphasis-color: var(--md-navy);
--bs-secondary-color: var(--md-muted);
--bs-tertiary-color: var(--md-muted);
--bs-border-color: var(--md-sand);
/* ⚠️ Hummingbird écrit `a { color: rgba(var(--bs-link-color-RGB), …) }` :
redéfinir --bs-link-color ne sert à rien, c'est la variante -rgb qui
pilote la couleur. Sans ça, tous les liens de contenu du site restaient
au bleu de Bootstrap — fil d'Ariane, coordonnées, titres du blog. */
--bs-link-color: inherit;
--bs-link-color-rgb: 33, 28, 53;
--bs-link-hover-color: var(--md-gold);
--bs-link-hover-color-rgb: 214, 163, 66;
/* La charte est à angles vifs : on neutralise tous les arrondis du thème. */
--bs-border-radius: 0;
--bs-border-radius-sm: 0;
--bs-border-radius-lg: 0;
--bs-border-radius-xl: 0;
--bs-border-radius-xxl: 0;
}
/* Boutons : Bootstrap 5.3 les pilote par --bs-btn-*, on ne redéfinit que ça. */
.btn {
/* Bootstrap tire l état désactivé de variables SÉPARÉES : sans les remapper,
un bouton `.disabled` repassait au bleu d origine — c est ce qui arrivait
au bouton « Commander » d un panier vide. */
--bs-btn-disabled-bg: var(--md-muted);
--bs-btn-disabled-border-color: var(--md-muted);
--bs-btn-disabled-color: var(--md-cream);
--bs-btn-disabled-opacity: 1;
--bs-btn-border-radius: 0;
--bs-btn-font-size: var(--md-fs-sm);
--bs-btn-font-weight: 700;
--bs-btn-padding-x: 1.5rem;
--bs-btn-padding-y: .625rem;
letter-spacing: var(--md-ls-wide);
text-transform: uppercase;
}
.btn-primary {
--bs-btn-bg: var(--md-navy);
--bs-btn-border-color: var(--md-navy);
--bs-btn-color: var(--md-cream);
--bs-btn-hover-bg: var(--md-gold);
--bs-btn-hover-border-color: var(--md-gold);
--bs-btn-hover-color: var(--md-navy);
--bs-btn-active-bg: var(--md-gold);
--bs-btn-active-border-color: var(--md-gold);
--bs-btn-active-color: var(--md-navy);
}
.btn-outline-primary {
--bs-btn-color: var(--md-navy);
--bs-btn-border-color: var(--md-navy);
--bs-btn-hover-bg: var(--md-navy);
--bs-btn-hover-border-color: var(--md-navy);
--bs-btn-hover-color: var(--md-cream);
--bs-btn-active-bg: var(--md-navy);
--bs-btn-active-border-color: var(--md-navy);
--bs-btn-active-color: var(--md-cream);
}
/* --------------------------------------------------------------------------
3. BASE — mobile first, on ne touche qu'à ce que la maquette impose
-------------------------------------------------------------------------- */
h1, h2, h3, .h1, .h2, .h3 {
font-family: var(--md-font-display);
font-weight: 500;
line-height: 1.15;
}
/* Survol des liens de contenu, doré. Les liens présentés en boutons en sont
exclus : ils portent déjà leur propre couleur de survol (variables
`--bs-btn-hover-*` ou règle du composant), et cette règle-ci, de spécificité
égale mais déclarée plus tard, la remplaçait. Le bouton « Commander » du
panier se retrouvait ainsi en texte doré sur fond doré, donc illisible. */
a:not([class*="btn"]):not([class*="cta"]):hover,
a:not([class*="btn"]):not([class*="cta"]):focus { color: var(--md-accent); }
:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; }
/* Fil d'Ariane natif du layout (blog, CMS, contact, recherche…). Hummingbird
laisse ses liens à la couleur de lien Bootstrap, soit un bleu franc : on le
ramène au petit chemin de capitales du reste du site. La page catégorie a le
sien, dans son bandeau (.category-cover__breadcrumb), et n'est pas touchée. */
/* ⚠️ Le parent enveloppe le fil d'Ariane dans un bandeau gris froid
(#f8f9fa, le « light » de Bootstrap) qui tranche avec le crème du site.
Transparent plutôt que repeint en crème : le bandeau suit alors le fond de
la page, y compris là où il change (couverture de catégorie, bande blanche). */
.breadcrumb__wrapper { background-color: transparent; }
.breadcrumb {
flex-wrap: wrap;
row-gap: .25rem;
font-size: var(--md-fs-2xs);
letter-spacing: var(--md-ls-wide);
text-transform: uppercase;
}
/* Un chemin profond ne doit pas filer hors de l'écran en mobile. */
.breadcrumb li { min-width: 0; }
.breadcrumb a { color: var(--md-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--md-gold); }
.breadcrumb li:last-child { color: var(--md-navy); }
/* Mobile : une seule ligne. Trop long (fiche produit), le chemin se fait
glisser au doigt, sans barre de défilement, au lieu de s'empiler. */
@media (max-width: 767.98px) {
.breadcrumb {
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
white-space: nowrap;
}
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb li { flex: 0 0 auto; }
}
/* La maquette est plus large que le .container Bootstrap (1320px). */
@media (min-width: 1400px) {
.container, .container-xxl, .container-xl,
.container-lg, .container-md, .container-sm { max-width: var(--md-container); }
}
/* --------------------------------------------------------------------------
4. COMPOSANTS RÉUTILISABLES
-------------------------------------------------------------------------- */
/* ── En-tête de section ────────────────────────────────────────────────────
« Par origine / Choisir par appellation » + lien « tout voir » à droite.
Sert aux blocs d'accueil (module-products) et aux modules maison. */
.md-eyebrow,
.module-products__eyebrow {
color: var(--md-accent);
font-size: var(--md-fs-md);
text-transform: uppercase;
margin: 0 0 .6875rem;
}
.section-title,
.md-section-title {
font-family: var(--md-font-display);
font-size: clamp(1.75rem, 5vw, var(--md-fs-3xl));
font-weight: 500;
line-height: 1.15;
margin: 0;
}
/* Titre à gauche, lien à droite, aligné sur la ligne de base du titre. */
.module-products__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-block-end: 2rem;
}
.module-products__buttons { margin-block-start: 0; }
/* Lien fléché « Toutes les nouveautés → » : discret, souligné au survol. */
.module-products__buttons .btn,
.md-link-arrow {
--bs-btn-padding-x: 0;
--bs-btn-padding-y: 0;
--bs-btn-border-color: transparent;
--bs-btn-hover-bg: transparent;
--bs-btn-hover-color: var(--md-gold);
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: var(--md-fs-base);
font-weight: 400;
letter-spacing: normal;
text-transform: none;
border-block-end: 1px solid var(--md-line);
padding-block-end: 2px;
}
.module-products__buttons .btn:hover,
.md-link-arrow:hover { border-block-end-color: var(--md-gold); }
/* ── Pages éditoriales et de service ───────────────────────────────────────
CMS, contact, plan du site, magasins, compte client, panier : elles
partagent le même besoin — une mesure de lecture, du rythme vertical et
des champs à la charte. Rien de spécifique à une page, donc tout vit ici. */
#cms .page-content,
#sitemap .page-content,
#stores .page-content,
#contact .page-content,
.page-content--cms {
/* Peu d'air en haut : le titre de page qui précède porte déjà sa marge.
Avec une section entière au-dessus, la FAQ laissait 72 px vides entre
son titre et son introduction. */
padding-block: .5rem var(--md-section-y);
}
/* Une ligne de 1 300 px ne se lit pas : on ramène le texte à une mesure
confortable, comme les blocs éditoriaux de la maquette. */
#cms .page-content > *,
#sitemap .page-content > *,
.rich-text > * {
max-width: 47.5rem;
}
#cms .page-content :is(h2, h3, h4),
.rich-text :is(h2, h3, h4) {
font-family: var(--md-font-display);
font-weight: 500;
color: var(--md-navy);
margin-block: 2.25rem .75rem;
}
#cms .page-content h2, .rich-text h2 { font-size: var(--md-fs-2xl); }
#cms .page-content h3, .rich-text h3 { font-size: var(--md-fs-xl); }
#cms .page-content p,
#cms .page-content li,
.rich-text p,
.rich-text li {
color: var(--md-navy-soft);
line-height: 1.7;
}
/* Titre de page : même traitement partout, quel que soit le gabarit. */
.page-header h1,
#cms h1,
#contact h1,
#cart h1,
#search h1,
#sitemap h1,
#stores h1,
#manufacturer h1,
#authentication h1,
#identity h1,
#history h1,
#addresses h1,
#order-confirmation h1 {
font-family: var(--md-font-display);
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 400;
line-height: 1.15;
color: var(--md-navy);
margin-block-end: 1.5rem;
}
/* Champs de formulaire : angles vifs, filet sable, focus doré discret.
En mobile, 16 px au moins : en dessous, iOS zoome sur le champ au focus et
décale toute la page. 44 px de haut : la taille d'une cible tactile. */
.form-control,
.form-select,
.custom-file-label {
border-color: var(--md-border);
border-radius: 0;
color: var(--md-navy);
font-size: var(--md-fs-md);
min-height: 2.75rem;
}
@media (min-width: 992px) {
.form-control,
.form-select,
.custom-file-label { font-size: var(--md-fs-base); }
}
.form-control:focus,
.form-select:focus {
border-color: var(--md-gold-light);
box-shadow: 0 0 0 .125rem rgba(214, 163, 66, .18);
}
.form-control::placeholder { color: var(--md-muted); opacity: 1; }
.form-label,
.form-control-label {
color: var(--md-navy);
font-size: var(--md-fs-2xs);
font-weight: 500;
letter-spacing: var(--md-ls-wide);
text-transform: uppercase;
}
/* Tableaux (panier, commandes, adresses) : filets, pas d'aplats. */
.table,
.table > :not(caption) > * > * {
background-color: transparent;
border-color: var(--md-line-soft);
color: var(--md-navy);
}
.table thead th {
color: var(--md-muted);
font-size: var(--md-fs-2xs);
font-weight: 500;
letter-spacing: var(--md-ls-wide);
text-transform: uppercase;
}
/* ── Tunnel de commande ────────────────────────────────────────────────────
Le fil des étapes sort des couleurs de Bootstrap : vert pour l étape faite,
gris anthracite pour l étape courante, aplat clair pour la bande. On le
ramène à l encre et au sable du thème. */
.checkout-steps {
background-color: transparent;
border-block-end: 1px solid var(--md-line-soft);
}
.checkout-steps__number {
background-color: var(--md-sand);
color: var(--md-navy);
border-radius: 50%;
}
.checkout-steps__step--current .checkout-steps__number {
background-color: var(--md-navy);
color: var(--md-cream);
}
/* Le libellé de chaque étape est un `.btn.btn-link` : il hérite donc du vert
« success » quand l'étape est franchie et de l'aplat désactivé quand elle est
à venir. On le traite comme un simple libellé. */
.checkout-steps__btn {
--bs-btn-color: var(--md-muted);
--bs-btn-hover-color: var(--md-navy);
--bs-btn-disabled-color: var(--md-muted);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: transparent;
--bs-btn-bg: transparent;
--bs-btn-border-color: transparent;
background-color: transparent;
font-size: var(--md-fs-2xs);
letter-spacing: var(--md-ls-wide);
text-decoration: none;
text-transform: uppercase;
}
.checkout-steps__step--success .checkout-steps__btn { color: var(--md-gold); }
.checkout-steps__step--current .checkout-steps__btn { color: var(--md-navy); }
/* Étape franchie : pastille crème, trait de liaison doré, anneau du mobile. */
.checkout-steps__step--success .checkout-steps__number {
background-color: var(--md-cream);
color: var(--md-gold);
}
/* ⚠️ Le fil de liaison garde un segment vert « success » de Bootstrap sur
l'étape courante, que la règle ci-dessous ne couvrait pas : on repart d'un
filet neutre pour tous, puis on dore le chemin parcouru. */
.checkout-steps__step::before,
.checkout-steps__step::after { background-color: var(--md-line); }
.checkout-steps__step--success::before,
.checkout-steps__step--success::after,
.checkout-steps__step--current::before { background-color: var(--md-gold-light); }
.checkout-steps .text-success { color: var(--md-gold); }
.progress-ring circle { stroke: currentcolor; }
/* ── Récapitulatif de commande — panier et tunnel ──────────────────────────
Les deux pages emploient les mêmes classes (`cart-summary__*`) : la mise en
forme vit donc ici plutôt que dans la feuille du panier.
Trois niveaux : les sous-totaux en gris, le total en Cormorant, la mention
de taxes en dessous et en retrait. C'est la hiérarchie qui fait la lecture,
pas des filets partout — un seul suffit, au-dessus du total. */
.cart-summary { padding: 1.25rem; }
.cart-summary__line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding-block: .375rem;
}
.cart-summary__label {
font-size: var(--md-fs-xs);
color: var(--md-muted);
}
.cart-summary__value {
font-size: var(--md-fs-base);
color: var(--md-navy);
text-align: end;
white-space: nowrap;
}
.cart-summary__total {
border-block-start: 1px solid var(--md-line-soft);
margin-block-start: .625rem;
padding-block-start: .875rem;
}
/* Le total : le seul chiffre que l'œil doit trouver sans chercher. */
.cart-summary__total .cart-summary__line--bold:first-child .cart-summary__label {
font-size: var(--md-fs-2xs);
font-weight: 500;
letter-spacing: var(--md-ls-wide);
text-transform: uppercase;
color: var(--md-navy);
}
.cart-summary__total .cart-summary__line--bold:first-child .cart-summary__value {
font-family: var(--md-font-display);
font-size: 1.75rem;
font-weight: 600;
line-height: 1.1;
color: var(--md-navy);
}
/* La ligne de taxes n'est pas un total : elle redescend en mention. */
.cart-summary__total .cart-summary__line--bold + .cart-summary__line--bold {
padding-block: 0;
}
.cart-summary__total .cart-summary__line--bold + .cart-summary__line--bold .cart-summary__label,
.cart-summary__total .cart-summary__line--bold + .cart-summary__line--bold .cart-summary__value {
font-family: var(--md-font-body);
font-size: var(--md-fs-3xs);
font-weight: 400;
color: var(--md-muted);
}
/* ── Code promo ─────────────────────────────────────────────────────────── */
.cart-summary__voucher {
border-block-start: 1px solid var(--md-line-soft);
margin-block-start: .875rem;
padding-block-start: .25rem;
}
.cart-voucher__accordion-button {
font-size: var(--md-fs-xs);
letter-spacing: var(--md-ls-wide);
text-transform: uppercase;
color: var(--md-muted);
padding-inline: 0;
}
.cart-voucher__accordion-button:not(.collapsed) { color: var(--md-navy); }
.cart-voucher__accordion-item,
.cart-voucher__accordion-button { background-color: transparent; }
.cart-voucher__accordion .accordion-body { padding-inline: 0; }
/* ── Réassurance de la colonne de droite ───────────────────────────────────
Version resserrée du bloc natif : dans une colonne étroite, les quatre
arguments doivent tenir sans devenir un mur. */
.blockreassurance--cart,
.blockreassurance--checkout {
display: flex;
flex-direction: column;
gap: .875rem;
background-color: var(--md-white);
border: 1px solid var(--md-line-soft);
padding: 1.125rem 1.25rem;
}
.blockreassurance--cart .reassurance,
.blockreassurance--checkout .reassurance {
display: flex;
align-items: center;
gap: .75rem;
}
.blockreassurance--cart .reassurance__image,
.blockreassurance--checkout .reassurance__image {
flex: 0 0 auto;
line-height: 0;
}
.blockreassurance--cart .reassurance__image :is(svg, img),
.blockreassurance--checkout .reassurance__image :is(svg, img) {
width: 2.5rem;
height: 1.75rem;
object-fit: contain;
}
.blockreassurance--cart .reassurance__content,
.blockreassurance--checkout .reassurance__content {
display: flex;
flex-direction: column;
gap: .125rem;
}
/* Le
natif entre titre et description n'a plus rien à séparer une fois
les deux passés en bloc. */
.blockreassurance--cart .reassurance__content br,
.blockreassurance--checkout .reassurance__content br { display: none; }
.blockreassurance--cart .reassurance__title,
.blockreassurance--checkout .reassurance__title {
font-family: var(--md-font-display);
font-size: 1rem;
line-height: 1.2;
color: var(--md-navy);
}
.blockreassurance--cart .reassurance__content small,
.blockreassurance--cart .reassurance__description,
.blockreassurance--checkout .reassurance__desc {
font-size: var(--md-fs-3xs);
line-height: 1.35;
color: var(--md-muted);
}
/* Encadrés de service : mêmes filets que la fiche produit. */
.card,
.cart-summary,
.checkout-step,
.account-menu__link {
background-color: var(--md-white);
border: 1px solid var(--md-line-soft);
border-radius: 0;
}
/* Les tuiles du compte client : même surface que les autres encadrés, et un
survol qui reprend le liseré doré de la miniature produit. */
.account-menu__link {
display: flex;
align-items: center;
gap: .75rem;
color: var(--md-navy);
text-decoration: none;
transition: border-color .2s ease, color .2s ease;
}
.account-menu__link:hover {
border-color: var(--md-gold-light);
color: var(--md-gold);
}
/* Titre des écrans du compte client : centré au-dessus de la carte, comme le
demande la maquette des pages de service. Le sélecteur s'appuie sur la
présence de la colonne de contenu du compte plutôt que sur la liste des
identifiants de page — il n'y a rien à tenir à jour quand un module ajoute
son propre écran client. */
.col-lg-9:has(> .page-content--customer) .page-header,
.col-lg-9:has(> .page-content--customer) .page-title-section { text-align: center; }
/* Les écrans client rendus par un module posent leur contenu dans une carte
Bootstrap : on lui donne la respiration des autres surfaces du compte. */
.page-content--customer > .card > .card-body { padding: 1.5rem; }
.page-content--customer .card h2,
.page-content--customer .card h3 {
font-family: var(--md-font-display);
font-weight: 400;
color: var(--md-navy);
}
/* La déconnexion sort du rouge de Bootstrap : c est un lien de service. */
.logout, a[href*="logout"] { color: var(--md-muted); }
.logout:hover, a[href*="logout"]:hover { color: var(--md-gold); }
/* Sections pleine largeur */
.md-section { padding-block: var(--md-section-y); }
.md-section--dark { background-color: var(--md-navy); color: var(--md-cream); }
.md-section--cream { background-color: var(--md-cream); }
/* ── Miniature produit ─────────────────────────────────────────────────────
⚠️ UNE SEULE définition pour tout le site : page catégorie, recherche,
blocs d'accueil, ventes croisées. Le markup vit dans
templates/catalog/_partials/miniatures/product.tpl. */
/* La carte entière est une surface bordée : le cadre passe du visuel seul à
l'ensemble, ce qui permet de faire respirer le contenu et donne un survol
qui se tient (élévation + liseré or). */
.product-miniature__inner {
background-color: var(--md-white);
border: 1px solid var(--md-border);
gap: 0;
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.product-miniature__top {
border: 0;
background-color: var(--md-white);
}
.product-miniature__image-link {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
padding: 1.125rem;
}
.product-miniature__image {
width: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform .4s ease;
}
/* Survol : la carte se soulève légèrement, le liseré passe à l'or, la bouteille
avance. Trois signaux discrets plutôt qu'un effet appuyé. */
.product-miniature__inner:hover {
border-color: var(--md-gold-light);
box-shadow: 0 .75rem 1.75rem rgba(33, 28, 53, .1);
transform: translateY(-.25rem);
}
.product-miniature__inner:hover .product-miniature__image { transform: scale(1.045); }
.product-miniature__inner:hover .product-miniature__title { color: var(--md-gold); }
@media (prefers-reduced-motion: reduce) {
.product-miniature__inner,
.product-miniature__image { transition: none; }
.product-miniature__inner:hover { transform: none; }
.product-miniature__inner:hover .product-miniature__image { transform: none; }
}
.product-miniature__bottom {
gap: .6875rem;
padding: 1rem 1.125rem 1.125rem;
}
.product-miniature__infos { gap: .125rem; }
/* Ligne « Haut Médoc - 2020 » */
.product-miniature__meta {
color: var(--md-muted);
font-size: var(--md-fs-base);
line-height: 1.43;
margin: 0;
}
.product-miniature__title {
color: var(--md-navy);
font-size: var(--md-fs-base);
font-weight: 500;
line-height: 1.43;
text-transform: uppercase;
text-decoration: none;
}
/* Filet + ligne prix / bouton, collés en bas de carte pour aligner la grille. */
.product-miniature__buy {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .25rem 1rem;
margin-block-start: auto;
padding-block-start: .6875rem;
border-block-start: 1px solid var(--md-border);
}
/* Carte étroite (156 px à 360) : le prix et « Voir détails » ne tiennent pas
sur une ligne. Plutôt que de sortir de la carte et de l'écran, le lien
passe au rang suivant, calé à droite. */
.product-miniature__actions { margin-inline-start: auto; }
.product-miniature__prices {
display: flex;
align-items: baseline;
gap: .5rem;
}
.product-miniature__price {
font-size: var(--md-fs-md);
font-weight: 600;
}
/* Produit en promotion : prix barré à côté, prix courant en or. */
.product-miniature__discount-price { display: inline-flex; }
.product-miniature__regular-price {
color: var(--md-muted);
font-size: var(--md-fs-base);
text-decoration: line-through;
}
.product-miniature:has(.product-miniature__regular-price) .product-miniature__price {
color: var(--md-gold);
}
/* Bouton « + » : la quantité reste dans le DOM (le JS natif en a besoin). */
.product-miniature__form {
display: flex;
align-items: center;
margin: 0;
}
.product-miniature__form .quantity-button {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.product-miniature__add {
display: inline-flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
width: 1.6875rem;
border: 0;
background-color: var(--md-navy);
color: var(--md-cream);
font-size: var(--md-fs-xl);
line-height: 1;
position: relative;
transition: background-color .2s ease;
}
/* Dessin de 27 px, comme la maquette, mais zone cliquable de 43 px : un
pseudo-élément transparent l'agrandit sans toucher au visuel. */
.product-miniature__add::after {
content: "";
position: absolute;
inset: -.5rem;
}
.product-miniature__add:hover,
.product-miniature__add:focus-visible {
background-color: var(--md-gold);
color: var(--md-navy);
}
.product-miniature__details {
font-size: var(--md-fs-2xs);
text-transform: uppercase;
letter-spacing: var(--md-ls-wide);
white-space: nowrap; /* sur deux lignes, il décalait le filet */
}
/* Pastilles « Nouveau » / « Promo » — types natifs de PrestaShop.
Empilées à gauche, et jamais sous le cœur de la liste d'envies (38 px en
haut à droite) : côte à côte, « Nouveau » passait dessous. */
.product-miniature .product-flags {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: .5625rem;
padding-inline-end: 3.25rem;
}
/* Les mêmes pastilles servent sur les listings ET sur la fiche produit, où
elles se posent sur le visuel : le sélecteur ne se limite donc pas à la
miniature, sans quoi la remise s'y affichait en blanc, hors charte. */
.product-flags .badge {
border: 0; /* Bootstrap pose un filet de la couleur du fond */
border-radius: 0;
background-color: var(--md-navy);
color: var(--md-cream);
font-size: var(--md-fs-3xs);
font-weight: 500;
letter-spacing: .06em;
line-height: 1.25rem;
padding: .1875rem .625rem;
text-transform: uppercase;
}
.product-flags .badge.on-sale,
.product-flags .badge.discount,
.product-flags .badge.discount-percentage,
.product-flags .badge.discount-amount {
background-color: var(--md-gold);
color: var(--md-white);
}
/* ── En-tête ───────────────────────────────────────────────────────────────
Maquette : bandeau navy (accroche à gauche, téléphone à droite), puis une
ligne crème « menu · logo centré · recherche + compte + panier ».
Répartition des hooks (voir templates/_partials/header.tpl) :
displayNav1 → bandeau haut ; displayTop → menu + recherche ;
displayNav2 → compte + panier. Aucun module n'est déplacé en base. */
.header-top {
background-color: var(--md-navy);
color: var(--md-cream);
padding-block: .8125rem;
font-size: var(--md-fs-2xs);
letter-spacing: .04em;
text-transform: uppercase; /* la maquette écrit le bandeau en capitales */
}
.header-top__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.header-top__claim { margin: 0; }
.header-top a { color: inherit; text-decoration: none; white-space: nowrap; }
.header-top a:hover { color: var(--md-gold); }
/* Mobile et tablette : bandeau resserré, accroche et téléphone centrés l'un
sous l'autre. Le téléphone reste : c'est le seul lien d'appel du site. */
@media (max-width: 991.98px) {
.header-top {
padding-block: .375rem;
font-size: var(--md-fs-3xs);
line-height: 1.3;
letter-spacing: .02em;
}
.header-top__row {
flex-direction: column;
justify-content: center;
gap: .125rem;
text-align: center;
}
}
.header-bottom {
background-color: var(--md-cream);
border-bottom: 0;
padding-block: 1rem;
}
/* L'en-tête occupe toute la largeur de la maquette (1440) plutôt que le
container de contenu (1346), avec les marges latérales de la maquette. */
.header-top > .container-md,
.header-bottom__container {
max-width: 90rem;
}
@media (min-width: 992px) {
.header-top > .container-md,
.header-bottom__container { padding-inline: 2.375rem; }
}
.header-bottom__row {
align-items: center;
row-gap: .75rem;
}
/* Mobile : tout tient sur une ligne — menu (tiroir), logo centré, raccourcis. */
.header-bottom__row {
flex-wrap: nowrap;
align-items: center;
}
.header-bottom__row > .ps-mainmenu { order: 1; }
.header-bottom__logo {
order: 2;
margin-inline: auto;
/* Bootstrap interdit aux enfants de `.row` de rétrécir (`flex-shrink: 0`) :
à 320 px, burger, logo, recherche, compte et panier réclamaient 328 px
pour 304, et le panier sortait de l'écran. Le logo est le seul élément
qui peut céder de la place sans perdre sa fonction. */
flex-shrink: 1;
}
.header-bottom__row > .ps-searchbar--mobile { order: 3; }
.header-bottom__row > #_mobile_ps_customersignin { order: 4; }
.header-bottom__row > #_mobile_ps_shoppingcart { order: 5; }
/* Recherche et actions « desktop » : visibles dès 768 px (`d-md-flex`). Leur
ordre n'était déclaré qu'à partir de 992 px : entre les deux, ils passaient
devant le menu et le logo (recherche, compte, panier, burger, logo). */
.header-bottom__row > .ps-searchbar-wrapper { order: 3; }
.header-bottom__actions { order: 4; }
@media (max-width: 991.98px) {
.header-bottom__row { column-gap: .25rem; }
/* Recherche, compte, panier : 44 px, la taille d'un doigt (32 px avant). */
.header-bottom .header-block__action-btn {
min-width: 2.75rem;
min-height: 2.75rem;
justify-content: center;
}
}
/* Le parent plafonne le logo à 3rem via `.header-bottom .navbar-brand .logo` :
on scope au même niveau pour rendre les 259 × 88 px de la maquette.
⚠️ Mobile d'abord, et la version desktop dans la media query qui suit : à
spécificité égale c'est la règle écrite en dernier qui gagne, donc un plafond
desktop placé après une media query `max-width` s'applique aussi au mobile —
le logo de 259 px poussait alors les raccourcis hors de l'écran.
Le logo peut en plus se comprimer (min-width: 0) si la ligne est trop courte. */
.header-bottom__logo,
.header-bottom .navbar-brand { min-width: 0; }
.header-bottom .navbar-brand .logo {
max-height: 2.75rem;
max-width: 100%;
width: auto;
height: auto;
}
@media (min-width: 992px) {
.header-bottom .navbar-brand .logo {
max-height: 5.5rem;
/* 259 px à 1440 comme la maquette, et moins en dessous : c'est le logo
qui cède la place quand la ligne se resserre. */
max-width: clamp(10rem, 18vw, 16.1875rem);
}
}
/* ── Ligne principale en desktop ───────────────────────────────────────────
Menu à gauche, recherche + actions à droite, logo au milieu.
De 992 à 1399 px, le logo reste DANS la ligne : centré dans l'espace libre,
il ne peut jamais être recouvert. Sorti du flux et centré sur la page, il
ne réservait aucune place : la recherche le recouvrait de 167 px à 992 px,
et le menu le mordait encore à 1280 px (mesuré).
À partir de 1400 px, tout tient : on revient au centrage sur la PAGE de la
maquette, et non entre deux voisins de largeurs différentes. Seul moyen de
l'obtenir sans figer la largeur des zones latérales : le sortir du flux. */
@media (min-width: 992px) {
.header-bottom__row { justify-content: space-between; }
/* Dans la ligne, le logo (jusqu'à 86 px de haut) aurait fait grandir la
barre : 118 px à 1399 px, puis 91 px d'un coup à 1400, quand il sort du
flux. Une marge négative égale au rembourrage de la barre le laisse
déborder dessus, comme au-delà de 1400 px : même hauteur partout. */
.header-bottom__logo { margin-block: -1rem; }
.header-bottom__row > .ps-mainmenu {
order: 1;
flex: 0 1 auto;
min-width: 0;
}
.header-bottom__actions {
display: flex;
align-items: center;
gap: 1.8125rem;
margin-inline-start: 1.8125rem;
}
}
@media (min-width: 1400px) {
.header-bottom__container { position: relative; }
.header-bottom__logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
max-width: 40%;
}
.header-bottom__row > .ps-searchbar-wrapper { margin-inline-start: auto; }
}
/* ── Menu mobile (tiroir) ──────────────────────────────────────────────────
Une ligne par entrée, séparée par un filet, 52 px de haut : le libellé
mène à la page, la flèche (case à droite, filet vertical) ouvre le niveau
suivant. Les entrées sans sous-niveau portent une flèche discrète dans
le lien. Chaque sous-niveau s'ouvre sur son titre en grand.
Toutes les règles partent de `#mobileMenu` : le module de blog
(prestablog) style lui aussi `#menu-mobile` sous 770 px (fond gris, texte
blanc, marges, et surtout `display: block`). Ce `display` annulait le
`display: none` que Hummingbird pose sur le niveau quitté : le menu
invisible restait en place, d'où 170 px vides au-dessus de chaque
sous-menu. */
#mobileMenu {
--md-menu-pad: 1.25rem;
color: var(--md-navy);
background-color: var(--md-cream-soft);
}
#mobileMenu #menu-mobile {
margin: 0;
color: inherit;
background-color: transparent;
cursor: auto;
}
#mobileMenu #menu-mobile.menu--parent { display: none; }
/* prestablog masque aussi `#menu-mobile` à TOUTES les largeurs : au-dessus
de 770 px, le tiroir (ouvert par le burger jusqu'à 1199 px) était vide. */
#mobileMenu #menu-mobile.menu--current { display: block; }
/* En-tête du tiroir : retour et fermeture à 44 px, filet dessous. */
#mobileMenu .offcanvas-header {
min-height: 3.5rem;
padding: .375rem .375rem .375rem .5rem;
border-bottom: 1px solid var(--md-line);
}
#mobileMenu .ps-mainmenu__back-button .btn {
display: inline-flex;
align-items: center;
gap: .25rem;
min-height: 2.75rem;
padding: .5rem .75rem .5rem .25rem;
color: var(--md-navy);
font-size: var(--md-fs-sm);
font-weight: 600;
letter-spacing: var(--md-ls-wide);
text-transform: uppercase;
text-decoration: none;
background: none;
border: 0;
}
#mobileMenu .ps-mainmenu__back-button .material-icons { font-size: 1.5rem; }
#mobileMenu .btn-close {
width: 2.75rem;
height: 2.75rem;
padding: 0;
background-size: 1rem;
}
/* La liste défile seule ; l'en-tête et le téléphone restent en place. */
#mobileMenu .ps-mainmenu__mobile {
flex: 1 1 auto;
height: auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
#mobileMenu .menu {
max-width: none;
padding: 0;
}
#mobileMenu .menu__list {
margin: 0;
padding: 0;
list-style: none;
}
#mobileMenu .menu__list > li {
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--md-line-soft);
}
#mobileMenu .menu__list > .menu__title {
display: block;
margin: 0;
padding: 1.5rem var(--md-menu-pad) .75rem;
font-family: var(--md-font-display);
font-size: var(--md-fs-2xl);
font-weight: 500;
line-height: 1.1;
color: var(--md-navy);
border-bottom-color: var(--md-line);
}
#mobileMenu .menu__link {
display: flex;
flex: 1 1 auto;
align-items: center;
min-width: 0;
min-height: 3.25rem;
padding: .75rem var(--md-menu-pad);
color: var(--md-navy);
font-size: var(--md-fs-md);
font-weight: 500;
line-height: 1.3;
text-decoration: none;
}
/* Premier niveau : les rayons, en capitales comme le menu desktop. */
#mobileMenu #menu-mobile .menu__link {
font-size: var(--md-fs-base);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
#mobileMenu .menu__link:hover,
#mobileMenu .menu__link:focus-visible { background-color: var(--md-cream); }
#mobileMenu .menu__list > li.current > .menu__link {
font-weight: 600;
box-shadow: inset .1875rem 0 0 var(--md-gold);
}
/* Entrée sans sous-niveau : flèche discrète, dans le lien. */
#mobileMenu .menu__list > li:not(.menu--childrens) > .menu__link::after {
content: "\e5cc";
margin-inline-start: auto;
padding-inline-start: 1rem;
font-family: "Material Icons", sans-serif;
font-size: 1.25rem;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
text-transform: none;
color: var(--md-muted-soft);
}
/* Entrée à sous-niveau : flèche franche, dans sa propre case. */
#mobileMenu .menu__toggle-child {
display: flex;
flex: 0 0 3.25rem;
align-items: center;
justify-content: center;
padding: 0;
color: var(--md-navy);
text-decoration: none;
background: transparent;
border: 0;
border-inline-start: 1px solid var(--md-line-soft);
border-radius: 0;
}
#mobileMenu .menu__toggle-child .material-icons {
font-size: 1.625rem;
line-height: 1;
}
#mobileMenu .menu__toggle-child:hover,
#mobileMenu .menu__toggle-child:focus-visible { background-color: var(--md-cream); }
/* Pied du tiroir : le téléphone, calé en bas (le parent, `offcanvas-body`,
s'étirait et le laissait flotter au milieu d'un grand vide). Les
sélecteurs de langue et de devise, vides sur ce site, sont retirés. */
#mobileMenu .ps-mainmenu__selects:not(:has(* *)) { display: none; }
#mobileMenu .ps-mainmenu__additionnals {
flex: 0 0 auto;
gap: .75rem;
padding: 1rem var(--md-menu-pad);
font-size: var(--md-fs-base);
border-top: 1px solid var(--md-line);
}
#mobileMenu .ps-mainmenu__additionnals a {
color: var(--md-navy);
font-weight: 600;
text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
#mobileMenu .menu { animation: none; transition: none; }
}
/* Menu principal : petites capitales, comme la maquette. */
.ps-mainmenu__tree { gap: 1.25rem; }
/* Une seule ligne en desktop : le menu s'aligne à gauche du logo centré.
Les chevrons sont masqués (absents de la maquette) — le survol suffit à
ouvrir le panneau ; ils restent affichés en mobile, où ils pilotent le
dépliage du tiroir. */
@media (min-width: 992px) {
.ps-mainmenu__tree { flex-wrap: nowrap; }
.ps-mainmenu__tree-link { white-space: nowrap; }
.ps-mainmenu__desktop .ps-mainmenu__tree-dropdown-toggle { display: none; }
}
.ps-mainmenu__tree-link {
color: var(--md-navy);
font-size: var(--md-fs-xs);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.ps-mainmenu__tree-link:hover { color: var(--md-gold); }
/* ── Recherche ─────────────────────────────────────────────────────────────
Champ blanc liseré d'or, loupe à DROITE (le parent la place à gauche). */
.ps-searchbar { min-width: 0; margin-block: 0; }
.ps-searchbar-wrapper { flex: 0 1 16.5625rem; }
.ps-searchbar__input {
background-color: var(--md-white);
border: 1px solid var(--md-gold);
border-radius: 0;
font-size: var(--md-fs-md); /* 16 px : sinon iOS zoome au focus */
padding-block: .375rem;
padding-inline: .875rem 2.5rem;
}
/* En desktop, le champ de la maquette : 11 px, sans la hauteur tactile. */
@media (min-width: 992px) {
.ps-searchbar__input { font-size: var(--md-fs-2xs); min-height: 0; }
}
.ps-searchbar__input::placeholder { color: var(--md-muted); opacity: 1; }
.ps-searchbar__magnifier {
left: auto;
right: .875rem;
color: var(--md-navy);
font-size: 1rem;
}
.ps-searchbar__clear { right: 2.25rem; }
/* ── Compte et panier ──────────────────────────────────────────────────────
Maquette : le compte n'est qu'une icône, le panier un bloc navy « Panier (0) ».
Le libellé du compte reste dans le DOM pour les lecteurs d'écran. */
.header-bottom__actions .ps-customersignin .header-block__title {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.header-bottom__actions .ps-customersignin .header-block__action-btn { padding: 0; }
.header-block__svg {
display: block;
width: auto;
height: 1.3125rem;
color: currentColor;
}
.header-bottom__actions .blockcart .header-block__svg { height: 1.0625rem; }
.header-bottom__actions .blockcart .header-block__action-btn {
background-color: var(--md-navy);
color: var(--md-cream);
border-radius: 0;
font-size: var(--md-fs-xs);
font-weight: 600;
gap: .625rem;
letter-spacing: .04em;
padding: .375rem .9375rem;
text-transform: uppercase;
}
.header-bottom__actions .blockcart .header-block__action-btn:hover {
background-color: var(--md-gold);
color: var(--md-navy);
}
.header-bottom__actions .blockcart .header-block__title { display: flex; }
/* Le compteur natif est une pastille flottante : on le remet dans le texte. */
.header-bottom__actions .blockcart .header-block__badge {
position: static;
background: none;
color: inherit;
font-size: inherit;
font-weight: inherit;
height: auto;
min-width: 0;
padding: 0;
}
.header-bottom__actions .blockcart .header-block__badge::before { content: "("; }
.header-bottom__actions .blockcart .header-block__badge::after { content: ")"; }
/* ── Menu déployé ──────────────────────────────────────────────────────────
Pas de maquette pour le méga-menu : on l'aligne sur la charte (fond crème,
filets sable, titres en capitales espacées) et on le rend homogène que la
catégorie ait des sous-catégories ou non. */
.submenu {
background-color: var(--md-cream);
border-top: 1px solid var(--md-sand);
box-shadow: 0 .75rem 1.5rem rgba(33, 28, 53, .08);
}
.submenu__row { --bs-gutter-x: 3rem; }
.submenu__left {
border-right: 1px solid var(--md-sand);
gap: .5rem;
padding-block: 2rem;
}
.submenu__right { padding-block: 2rem; }
/* Colonne de gauche = sous-catégories de premier niveau. */
.submenu__left-item {
border-radius: 0;
font-size: var(--md-fs-base);
font-weight: 600;
letter-spacing: .04em;
padding: .625rem .75rem;
text-transform: uppercase;
}
.submenu__left-item.active,
.submenu__left-item:hover {
background-color: var(--md-cream-soft);
color: var(--md-gold);
}
/* Colonne de droite = niveau suivant. Le parent pose une grille : on resserre
seulement le rythme, sans redéfinir le nombre de colonnes (il s'adapte déjà
à la largeur disponible). */
.submenu__right-items {
column-gap: 2rem;
row-gap: 1.25rem;
}
.menu-item {
font-size: var(--md-fs-base);
padding-block: .1875rem;
}
.menu-item:hover { color: var(--md-gold); }
/* Le parent met ces intitulés en 1.25rem : trop lourd à côté du reste. */
.menu-item__group-main-item {
font-size: var(--md-fs-base);
font-weight: 600;
letter-spacing: .04em;
margin-bottom: .25rem;
text-transform: uppercase;
}
/* Catégorie sans troisième niveau : pas de colonne de droite vide, la liste
de gauche s'étale alors sur toute la largeur du panneau. */
.submenu:not(:has(.menu-item)) .submenu__left {
border-right: 0;
flex-direction: row;
flex-wrap: wrap;
column-gap: 1.5rem;
}
.submenu:not(:has(.menu-item)) .submenu__left.col-sm-3 {
flex: 0 0 100%;
max-width: 100%;
}
/* …et on retire la colonne vide, sinon le panneau garde sa hauteur pour rien. */
.submenu:not(:has(.menu-item)) .submenu__right { display: none; }
/* ── Pied de page ──────────────────────────────────────────────────────────
Maquette : fond sable, colonne de marque à gauche, trois colonnes de liens
à droite, puis copyright et mention Loi Évin. */
.footer__main {
background-color: var(--md-sand);
color: var(--md-navy);
padding-block: clamp(2rem, 5vw, 3.75rem);
}
.footer__main a { color: inherit; text-decoration: none; }
.footer__main a:hover { color: var(--md-gold); }
.footer__logo {
display: block;
width: auto;
max-width: 16.1875rem;
height: auto;
margin-block-end: 1.75rem;
}
.footer__baseline {
color: var(--md-navy-soft);
font-size: var(--md-fs-base);
max-width: 20rem;
margin-block-end: 1.5rem;
}
.footer__social ul {
display: flex;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
/* Titres de colonnes de liens : capitales espacées.
Le module rend un