/* ==========================================================================
Esprit Smart — feuille de style principale
--------------------------------------------------------------------------
Système visuel : typographie monospace, trame de points, chrome
entièrement en niveaux de gris, métadonnées entre crochets.
Règle cardinale : LE CHROME NE PORTE AUCUNE COULEUR. La couleur n'existe
que dans la tuile produit (couleur pastel propre à chaque article, servie
en inline depuis la base) et dans les états sémantiques de commande
(expédiée / livrée), qui encodent une information réelle.
Polices : Geist Mono (interface, licence OFL) + Bodoni Moda (titres).
Chargées dans includes/header.php.
========================================================================== */
/* --------------------------------------------------------------------------
1. Jetons
--------------------------------------------------------------------------
Les noms hérités (--bg, --ink, --border, --blue, --green…) sont conservés :
tout le HTML des 84 pages les référence déjà. Seules leurs VALEURS changent.
--blue ne pointe plus vers un bleu d'accent mais vers l'encre : les états
« actif » deviennent noirs, ce qui supprime la couleur d'accent partout
sans toucher au balisage.
-------------------------------------------------------------------------- */
:root {
/* Demi-largeur reelle de la page, posee par esMesurerLargeurPage() (footer).
Sert au bord-a-bord des rangees defilantes. Le repli 50vw suffit au premier
rendu mais compte la barre de defilement : ~7px de trop de chaque cote, soit
une premiere et une derniere vignette rognees. Le JS corrige des qu'il
s'execute ; overflow-x: clip sur body couvre l'intervalle. */
--demi-page: 50vw;
/* Gouttiere de page : la distance entre le bord de la fenetre et le debut du
contenu du header. Les rangees defilantes s'y alignent (voir
.scroll-row-wrap), d'ou un jeton partage plutot que 32px recopie aux deux
endroits -- sinon les deux derivent au premier ajustement. */
--gouttiere-page: 32px;
--bg: #F2F2F2;
--bg-panel: #E3E3E3;
--card-bg: #E3E3E3;
--card-hover: #DCDCDC;
--surface: #FFFFFF;
--ink: #1C1C1C;
/* #656565 et non #8A8A8A : sur --card-bg (#E3E3E3), la surface la plus
sombre du theme clair, l'ancien gris donnait 2,69:1 -- sous le seuil AA
de 4,5. C'est la valeur la plus CLAIRE qui passe sur les trois surfaces
claires : 4,54 sur #E3E3E3, 5,21 sur #F2F2F2, 5,83 sur #FFFFFF. Ne pas
l'eclaircir sans refaire le calcul contre #E3E3E3, c'est elle qui
contraint. Le --ink-soft du theme sombre est laisse tel quel : 4,92. */
--ink-soft: #656565;
--ink-faint: #ABABAB;
--border: #D2D2D2;
--shadow: rgba(0, 0, 0, .06);
/* Ancien accent — neutralisé volontairement (voir en-tête de section). */
--blue: #1C1C1C;
--blue-bg: #E3E3E3;
/* Couleurs sémantiques : réservées aux états de commande et aux alertes
de stock, jamais à la décoration. Désaturées pour cohabiter avec le gris. */
--green: #2F6B4C;
--green-bg: #E2EBE5;
--warn: #8A5A12;
--warn-bg: #F0E8DA;
--alert: #B33A28;
/* Encre a poser SUR un fond --alert. Elle s'inverse d'un theme a l'autre :
--alert est un rouge sombre en clair (blanc dessus : 5,91) mais un corail
clair en sombre (blanc : 2,66, illisible ; encre : 6,42). */
--sur-alert: #FFFFFF;
--alert-bg: #F2E2DF;
--star: #7A7A7A;
--radius-card: 16px;
--radius-tile: 12px;
--radius-ctl: 8px;
}
[data-theme="dark"] {
--bg: #141414;
--bg-panel: #222222;
--card-bg: #222222;
--card-hover: #2A2A2A;
--surface: #0E0E0E;
--ink: #F2F2F2;
--ink-soft: #8F8F8F;
--ink-faint: #6A6A6A;
--border: #333333;
--shadow: rgba(0, 0, 0, .5);
--blue: #F2F2F2;
--blue-bg: #2E2E2E;
--sur-alert: #1C1C1C;
--green: #6BC095;
--green-bg: rgba(107, 192, 149, .14);
--warn: #D9A45B;
--warn-bg: rgba(217, 164, 91, .14);
--alert: #E8836F;
--alert-bg: rgba(232, 131, 111, .14);
--star: #9A9A9A;
}
/* Repli avant l'exécution du script de thème dans header.php : si le système
est en sombre et qu'aucun data-theme n'est encore posé, on évite le flash
d'un fond clair. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bg: #141414;
--bg-panel: #222222;
--card-bg: #222222;
--card-hover: #2A2A2A;
--surface: #0E0E0E;
--ink: #F2F2F2;
--ink-soft: #8F8F8F;
--ink-faint: #6A6A6A;
--border: #333333;
--blue: #F2F2F2;
--blue-bg: #2E2E2E;
/* Pas de --sur-alert ici, volontairement : ce repli ne redefinit pas
--alert non plus, qui reste donc le rouge sombre du theme clair. Les
deux vont par paire -- y poser l'encre sombre la mettrait sur ce rouge,
a 2,88:1, soit pire que le blanc herite de :root. */
}
}
/* --------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
* { box-sizing: border-box; }
body {
margin: 0;
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.55;
background-color: var(--bg);
/* Le motif de fond n'est plus porté par body lui-même mais par un calque
dédié — voir la section « Motifs de fond » plus bas. */
color: var(--ink);
-webkit-font-smoothing: antialiased;
transition: background-color .15s, color .15s;
/* Les rangees defilantes sortent des gouttieres en se tirant a 100vw (voir
.scroll-row-wrap). Or 100vw compte la barre de defilement alors que la
page ne fait que clientWidth : sans ce garde-fou, une quinzaine de pixels
de debordement horizontal. clip plutot que hidden -- clip ne cree pas de
conteneur de defilement, donc position:sticky et position:fixed
continuent de fonctionner (le volet panier et .pdp-info en dependent). */
overflow-x: clip;
}
a { color: inherit; }
img { max-width: 100%; }
:where(a, button, select, input, textarea, summary):focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* --------------------------------------------------------------------------
3. Primitives typographiques
--------------------------------------------------------------------------
.u-display : Bodoni Moda, graisse légère, pour les grands titres.
.u-label : étiquette monospace capitale — la brique de base du système.
-------------------------------------------------------------------------- */
.u-display,
.hero-title,
.pdp-title,
.article-title,
.login-title,
.modal-title,
.cart-drawer-title,
.pricing-price,
.creator-banner-title,
.creator-about-title,
.creator-about-section-title,
.section-title {
font-family: 'Bodoni Moda', Didot, 'Bodoni MT', Georgia, serif;
font-weight: 400;
letter-spacing: -.005em;
text-wrap: balance;
}
.u-label,
.pdp-label,
.pdp-brand,
.pricing-name,
.creator-about-eyebrow,
.hero-eyebrow,
.site-footer-copy {
font-size: 10.5px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-soft);
}
/* Les chiffres alignés en colonne ou comparés entre eux passent en chasse
fixe tabulaire (prix, compteurs, notes). */
.product-price-row, .pdp-price, .price-old, .cart-line-price,
.cart-drawer-total, .pill-count, .review-count, .product-rating,
.pdp-rating, .creator-subnav-stats, .cat-toolbar-count, .search-result-price {
font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------------------
4. Barre supérieure
-------------------------------------------------------------------------- */
.topbar {
display: grid;
grid-template-columns: 1fr minmax(160px, 480px) 1fr;
align-items: center;
gap: 24px;
padding: 16px var(--gouttiere-page);
}
.topbar-left { display: flex; align-items: center; gap: 24px; justify-self: start; min-width: max-content; }
/* Identité — bloc typographique pur. L'ancien anneau bleu devient un carré
d'encre : la marque se lit dans la typographie, pas dans un pictogramme. */
.brand-mark { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.brand-ring {
width: 12px; height: 12px;
border-radius: 2px;
border: none;
background: var(--ink);
flex-shrink: 0;
box-sizing: border-box;
}
/* Bloc-marque sur deux lignes, avec l'étiquette de nature en exposant —
structure typographique du système. Pas de symbole ® : Esprit Smart n'est
pas une marque déposée à ma connaissance, et l'afficher serait une
affirmation juridique, pas un choix graphique. */
.brand-wordmark {
font-family: inherit;
font-weight: 600;
font-size: 11px;
line-height: 1.22;
letter-spacing: .10em;
color: var(--ink);
text-transform: uppercase;
white-space: nowrap;
}
.brand-tag {
font-size: 7px;
letter-spacing: .16em;
color: var(--ink-soft);
margin-left: 5px;
vertical-align: 1px;
}
.topbar-nav { display: flex; gap: 22px; font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.topbar-nav a { text-decoration: none; color: var(--ink-soft); }
.topbar-nav a:hover { color: var(--ink); }
.topbar-nav a.active { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.topbar-nav-mobile {
display: flex;
align-items: center;
justify-content: flex-start;
flex: 1;
min-width: 0;
gap: 14px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.topbar-nav-mobile::-webkit-scrollbar { display: none; }
.topbar-nav-mobile a, .topbar-nav-mobile button {
text-decoration: none;
color: var(--ink-soft);
font-size: 11px;
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
font-family: inherit;
white-space: nowrap;
flex-shrink: 0;
border: none;
background: none;
padding: 0;
cursor: pointer;
}
.topbar-nav-mobile a:hover, .topbar-nav-mobile button:hover { color: var(--ink); }
.topbar-nav-mobile a.active, .topbar-nav-mobile button.active { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* Méga-menu mobile — panneau plein écran. */
.mobile-mega-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .5);
z-index: 45;
}
.mobile-mega-menu {
position: fixed;
left: 0; right: 0; bottom: 0; top: 12%;
background: var(--bg);
border-top: 1px solid var(--border);
border-radius: var(--radius-card) var(--radius-card) 0 0;
z-index: 46;
display: flex;
flex-direction: column;
overflow: hidden;
}
.mobile-mega-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.mobile-mega-menu-body {
overflow-y: auto;
padding: 16px 20px 112px;
display: flex;
flex-direction: column;
gap: 22px;
}
.mobile-mega-menu-body .mega-menu-col { display: flex; flex-direction: column; gap: 12px; }
.mobile-mega-menu-body .mega-menu-title { font-size: 13px; }
.mobile-mega-menu-body .mega-menu-sub { font-size: 13px; }
/* .mobile-mega-menu/.mobile-mega-overlay fixent leur propre `display`
ci-dessus, ce qui l'emporte sur le `display:none` de l'attribut HTML
`hidden` — d'où ce sélecteur plus spécifique. */
.mobile-mega-overlay[hidden], .mobile-mega-menu[hidden] { display: none; }
@media (min-width: 901px) {
.mobile-mega-overlay, .mobile-mega-menu { display: none !important; }
}
.mobile-bottom-header { display: none; }
.mobile-bottom-row {
display: flex;
align-items: center;
gap: 12px;
/* Cette rangee est FIXEE au bas de l'ecran : ses elements d'extremite
tombent dans l'arc des coins arrondis du telephone, et l'icone la plus
basse dans la zone du geste systeme.
Mesure a 375x812 avant correction : le panier etait a 10px du bord bas
et 16px du bord droit. Un coin d'iPhone a environ 44px de rayon -- a
ces distances l'icone est litteralement dans la courbe.
Une barre posee sur le bord a donc besoin de plus de gouttiere que le
reste de la page : 22px au lieu du jeton a 16.
Les env() sont inertes aujourd'hui (la page n'est pas en
viewport-fit=cover, iOS insere donc deja la zone sure) ; ils sont la
pour rester corrects si elle le devient un jour. */
padding: 12px max(22px, env(safe-area-inset-right, 0px))
max(16px, env(safe-area-inset-bottom, 0px))
max(22px, env(safe-area-inset-left, 0px));
}
/* Méga-menu « Catalogue » */
.nav-dropdown { position: relative; }
.mega-menu {
display: none;
position: absolute;
top: 100%; left: 0;
padding-top: 14px; /* pont invisible : garde le survol actif */
z-index: 50;
}
.nav-dropdown:hover .mega-menu,
.nav-dropdown:focus-within .mega-menu { display: block; }
.mega-menu-inner {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 24px;
box-shadow: 0 8px 24px var(--shadow);
display: grid;
grid-template-columns: repeat(4, 170px);
gap: 20px 28px;
}
.mega-menu-col { display: flex; flex-direction: column; gap: 6px; }
.mega-menu-title {
font-size: 10.5px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
color: var(--ink); margin-bottom: 6px; text-decoration: none;
}
.mega-menu-title.active { text-decoration: underline; text-underline-offset: 3px; }
.mega-menu-sub { font-size: 12px; color: var(--ink-soft); text-decoration: none; }
.mega-menu-sub:hover { color: var(--ink); }
.mega-menu-sub.active { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* --------------------------------------------------------------------------
5. Recherche
-------------------------------------------------------------------------- */
.search-wrap { position: relative; width: 100%; max-width: 90vw; }
.search-inline {
display: flex;
align-items: center;
gap: 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-ctl);
padding: 5px 14px 5px 5px;
}
.search-cat-wrap { position: relative; flex-shrink: 0; }
.search-cat-btn {
display: flex;
align-items: center;
gap: 5px;
max-width: 150px;
border: none;
background: none;
color: var(--ink-soft);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
font-family: inherit;
padding: 7px 10px 7px 12px;
border-radius: 6px;
cursor: pointer;
}
.search-cat-btn:hover { color: var(--ink); background: var(--bg-panel); }
.search-cat-btn span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-cat-chevron { font-size: 9px; flex-shrink: 0; }
.search-cat-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 180px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-ctl);
padding: 6px;
box-shadow: 0 8px 24px var(--shadow);
z-index: 25;
}
.search-cat-option {
display: block;
width: 100%;
text-align: left;
border: none;
background: none;
color: var(--ink);
font-size: 12px;
font-family: inherit;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
}
.search-cat-option:hover { background: var(--bg-panel); }
.search-cat-option.active { background: var(--bg-panel); font-weight: 600; }
.search-cat-divider { flex-shrink: 0; width: 1px; height: 18px; background: var(--border); }
.search-inline-icon { font-size: 13px; color: var(--ink-soft); }
.search-inline input {
flex: 1;
min-width: 0;
border: none;
background: none;
color: var(--ink);
font-size: 12.5px;
outline: none;
font-family: inherit;
}
/* --ink-soft et non --ink-faint sur les placeholders : le champ de recherche
n'a pas de libelle visible, son placeholder est donc sa seule etiquette.
--ink-faint y donnait 2,30:1 en clair. Ce qui reste sur --ink-faint est
decoratif (bordures au survol) et n'a aucune exigence de contraste. */
.search-inline input::placeholder { color: var(--ink-soft); }
.search-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0; right: 0;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 8px;
box-shadow: 0 8px 24px var(--shadow);
z-index: 20;
}
.search-dropdown:empty { display: none; padding: 0; border: none; }
.search-result {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: var(--radius-ctl);
text-decoration: none;
color: var(--ink);
}
.search-result:hover { background: var(--bg-panel); }
.search-result-emoji {
width: 40px; height: 40px;
border-radius: var(--radius-tile);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.search-result-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.search-result-text .name { font-size: 12.5px; font-weight: 500; }
.search-result-text .brand { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.search-result-price { font-size: 12.5px; font-weight: 500; }
.search-empty { padding: 8px; color: var(--ink-soft); font-size: 12px; }
/* --------------------------------------------------------------------------
6. Icônes, langue, panier
-------------------------------------------------------------------------- */
.topbar-icons { display: flex; align-items: center; gap: 12px; justify-self: end; min-width: max-content; }
.lang-toggle {
display: flex;
align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px;
gap: 2px;
flex-shrink: 0;
}
.lang-toggle-opt {
padding: 5px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: .08em;
text-decoration: none;
color: var(--ink-soft);
line-height: 1;
}
.lang-toggle-opt:hover { color: var(--ink); }
.lang-toggle-opt.active { background: var(--ink); color: var(--bg); }
.icon-plain {
position: relative;
border: 1px solid var(--border);
background: var(--surface);
color: var(--ink);
font-size: 14px;
width: 32px; height: 32px;
border-radius: 999px;
display: flex; align-items: center; justify-content: center;
text-decoration: none;
cursor: pointer;
transition: background .15s;
}
.icon-plain:hover { background: var(--bg-panel); }
/* Les icônes sont désormais des SVG au trait (voir uiIcon() dans
includes/icons.php) : display:block supprime l'espace de ligne de base qui
décalait le glyphe d'un pixel vers le bas dans le cercle. */
.icon-plain svg { display: block; }
.search-inline-icon { display: inline-flex; align-items: center; }
.search-inline-icon svg { display: block; }
.cart-badge {
position: absolute; top: -3px; right: -3px;
background: var(--ink); color: var(--bg);
font-size: 9px; font-weight: 600;
border-radius: 999px; min-width: 16px; height: 16px;
display: flex; align-items: center; justify-content: center;
padding: 0 3px;
font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------------------
7. Modales et volets
-------------------------------------------------------------------------- */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(0, 0, 0, .45);
z-index: 60;
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-card);
width: 420px;
max-width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 16px 48px var(--shadow);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 20px; }
.modal-close { border: none; background: none; color: var(--ink); font-size: 16px; cursor: pointer; font-family: inherit; }
.modal-body { padding: 20px 22px; }
.modal-body textarea {
width: 100%;
resize: vertical;
border: 1px solid var(--border);
border-radius: var(--radius-ctl);
padding: 12px 14px;
font-family: inherit;
font-size: 12.5px;
background: var(--surface);
color: var(--ink);
}
.cart-overlay {
position: fixed; inset: 0;
background: rgba(0, 0, 0, .45);
z-index: 40;
}
.cart-drawer[hidden], .cart-overlay[hidden] { display: none; }
.cart-drawer {
position: fixed;
top: 0; right: 0;
bottom: 0;
width: 420px;
max-width: 92vw;
background: var(--bg);
border-left: 1px solid var(--border);
z-index: 41;
display: flex;
flex-direction: column;
box-shadow: -4px 0 24px var(--shadow);
}
.cart-drawer-header {
display: flex; align-items: center; justify-content: space-between;
padding: 24px;
border-bottom: 1px solid var(--border);
}
.cart-drawer-title { font-size: 24px; }
.cart-drawer-close { border: none; background: none; color: var(--ink); font-size: 16px; cursor: pointer; font-family: inherit; }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
.cart-empty { color: var(--ink-soft); font-size: 12.5px; }
.cart-line {
display: flex; align-items: center; gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.cart-line-thumb {
position: relative;
width: 52px; height: 52px;
border-radius: var(--radius-tile);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-size: 26px;
flex-shrink: 0;
}
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-name { font-size: 12.5px; font-weight: 500; }
.cart-line-qty { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.cart-line-price { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.cart-line-remove { border: none; background: none; color: var(--ink-soft); font-size: 13px; cursor: pointer; padding: 4px; font-family: inherit; }
.cart-line-remove:hover { color: var(--ink); }
.cart-line-save-link {
border: none; background: none; padding: 0; margin-top: 4px;
color: var(--ink-soft); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
text-decoration: underline; text-underline-offset: 2px;
cursor: pointer; font-family: inherit;
}
.cart-line-save-link:hover { color: var(--ink); }
.cart-drawer-footer { padding: 20px 24px; border-top: 1px solid var(--border); }
.cart-drawer-total { display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin-bottom: 14px; }
.cart-drawer-view { width: 100%; }
/* Volet panier : plein ecran en mobile. En 420px large plafonnes a 92vw, il
laissait une bande de page visible sur le cote -- une trentaine de pixels
sur un ecran de 375px, qui continuaient de defiler derriere. On etire le
volet d'un bord a l'autre.
left:0 + width:auto plutot que width:100vw : sur mobile 100vw peut inclure
la barre de defilement et provoquer un debordement horizontal, alors que
les quatre cotes cales a 0 remplissent exactement le cadre.
La bordure gauche et l'ombre portee vers la gauche disparaissent : elles ne
separaient le volet que de ce qui se trouvait a cote, et il n'y a plus
rien a cote. */
@media (max-width: 640px) {
.cart-drawer {
left: 0;
width: auto;
max-width: none;
border-left: none;
box-shadow: none;
}
}
/* "Enregistre pour plus tard" dans le volet : un bloc detache sous le panier,
pour qu'on ne confonde pas ces articles avec ceux qu'on s'apprete a payer.
Les lignes reutilisent .cart-line telles quelles -- meme gabarit, seule
l'entete et la rangee d'actions sont nouvelles. */
.cart-drawer-saved {
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.cart-drawer-saved-title {
font-size: 10.5px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 6px;
}
/* Les deux liens d'action cote a cote. .cart-line-save-link porte deja un
margin-top de 4px : le flex l'aligne sans qu'on ait a le neutraliser. */
.cart-line-actions { display: flex; gap: 14px; }
.cart-page-list { border-top: 1px solid var(--border); }
.cart-page-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
/* --------------------------------------------------------------------------
8. Hero et sections
-------------------------------------------------------------------------- */
.hero { max-width: 1360px; margin: 0 auto; padding: 32px; }
.hero-cat-grid {
display: flex;
flex: 1 1 0;
min-width: 0;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
}
.hero-cat-grid::-webkit-scrollbar { display: none; }
.hero-cat-card {
flex: 1 1 260px;
min-width: 260px;
scroll-snap-align: start;
background: var(--card-bg);
border: 1px solid var(--card-bg);
border-radius: var(--radius-card);
padding: 16px;
display: flex;
flex-direction: column;
gap: 14px;
text-decoration: none;
color: inherit;
transition: background .18s, border-color .18s;
}
.hero-cat-card:hover { background: var(--card-hover); border-color: var(--ink-faint); }
.hero-cat-card-header {
display: flex; align-items: center; gap: 8px;
font-size: 10.5px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
}
.hero-cat-card-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hero-cat-product {
aspect-ratio: 1;
border-radius: var(--radius-tile);
display: flex; align-items: center; justify-content: center;
font-size: 32px;
overflow: hidden;
}
.hero-cat-product .product-photo { width: 100%; height: 100%; object-fit: cover; }
.hero-cat-card-cta { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.hero-cat-card:hover .hero-cat-card-cta { color: var(--ink); }
/* Masthead — ouverture de page du système : flèche de retour, grand titre
serif, accroche. Remplace les pavés centrés dans un cadre, qui coupaient
la page en deux au lieu de l'ouvrir. Partagé par le catalogue, l'accueil
et les boutiques. */
.masthead {
max-width: 1360px;
margin: 0 auto;
padding: 28px var(--gouttiere-page) 22px;
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 0 20px;
align-items: start;
}
.masthead-back {
width: 40px; height: 40px;
border: 1px solid var(--border);
border-radius: 999px;
background: transparent;
color: var(--ink);
display: flex; align-items: center; justify-content: center;
text-decoration: none;
font-size: 15px;
flex-shrink: 0;
transition: background .15s;
}
.masthead-back:hover { background: var(--card-bg); }
.masthead-body { max-width: 780px; min-width: 0; }
.masthead .breadcrumb { margin-bottom: 14px; }
.masthead-title {
font-family: 'Bodoni Moda', Didot, 'Bodoni MT', Georgia, serif;
font-weight: 400;
font-size: clamp(32px, 5vw, 50px);
line-height: 1.04;
letter-spacing: -.005em;
margin: 0 0 14px;
text-wrap: balance;
}
/* Le compteur entre parenthèses reprend la notation des métadonnées : il
énonce un fait (combien d'articles), il n'est pas décoratif. */
.masthead-count { color: var(--ink-soft); font-family: 'Geist Mono', monospace; font-size: .42em; letter-spacing: .04em; vertical-align: .35em; }
.masthead-deck { margin: 0; font-size: 12.5px; line-height: 1.7; max-width: 62ch; color: var(--ink); }
/* Variante sans flèche de retour : l'accueil, où il n'y a nulle part où
remonter. Une seule colonne plutôt qu'une gouttière de 56px vide. */
/* Variante pour les pages en colonne etroite (panier, tunnel de commande) :
le masthead s'aligne sur la largeur du contenu au lieu de s'etaler sur
toute la page, ce qui le laissait flotter loin a gauche du bloc central.
784 = 720 de contenu + les 32px de marge interne de chaque cote. */
.masthead--narrow {
/* Meme largeur que la .section de ces pages, pas 720+64 : box-sizing est en
border-box, la marge interne est deja comprise dans le max-width. Ajouter
le padding decalait le titre de 32px a gauche du contenu. */
max-width: 720px;
/* Colonne unique : la gouttiere de 56px reservee a la fleche decalait le
titre de 44px vers la droite du contenu juste en dessous. Sur une page
large l'ecart passe inapercu, sur une colonne etroite il se lit comme un
defaut d'alignement. La fleche remonte donc au-dessus du titre. */
grid-template-columns: minmax(0, 1fr);
gap: 14px 0;
}
.masthead--narrow .masthead-back { margin-bottom: 2px; }
.masthead--plain { grid-template-columns: minmax(0, 1fr); padding-top: 34px; }
/* La mesure est posée sur le titre, pas sur son conteneur : `ch` se calcule
d'après la police de l'élément, et sur le conteneur il aurait été résolu
avec la mono à 12,5px — soit une colonne de 165px qui brisait le titre en
sept lignes. */
.masthead--plain .masthead-title { max-width: 24ch; margin-bottom: 0; }
@media (max-width: 640px) {
.masthead { grid-template-columns: 1fr; gap: 16px; padding: 20px var(--gouttiere-page) 16px; }
.masthead--plain .masthead-body { max-width: none; }
}
/* .hero-text subsiste pour d'anciennes pages qui l'utilisent encore. */
.hero-text {
background: var(--card-bg);
border: 1px solid var(--border);
padding: 48px 32px;
border-radius: var(--radius-card);
text-align: center;
}
.hero-eyebrow { margin-bottom: 10px; }
.hero-title { font-size: clamp(34px, 5vw, 48px); line-height: 1.05; margin-bottom: 14px; }
.hero-sub { font-size: 12.5px; color: var(--ink); max-width: 62ch; margin: 0 auto; line-height: 1.7; }
.section { max-width: 1360px; margin: 0 auto; padding: 48px 32px; }
.section-alt { max-width: none; margin: 0; background: var(--bg-panel); }
.section-inner { max-width: 1360px; margin: 0 auto; }
.section-title { font-size: 28px; margin: 0 0 28px; }
.section-title.center { text-align: center; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.section-head .section-title { margin: 0; }
.view-all { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-soft); }
.view-all:hover { color: var(--ink); }
.breadcrumb { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
/* --------------------------------------------------------------------------
9. Fiche produit
-------------------------------------------------------------------------- */
/* Deux colonnes : le visuel à gauche, la colonne d'achat à droite. Les avis
descendent en pleine largeur sous la fiche (voir .pdp-feedback-section) —
en troisième colonne, ils écrasaient à la fois le bloc d'achat et
eux-mêmes. */
.pdp-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
align-items: start;
gap: 48px;
margin-top: 20px;
}
/* .pdp-media regroupe l'image et ses vignettes en UN seul élément de grille.
Sans cette enveloppe, .pdp-thumbs devenait un élément de grille à part
entière et décalait toute la mise en page dès qu'un produit avait une
galerie. */
.pdp-media { min-width: 0; }
.pdp-info {
min-width: 0;
position: sticky;
top: 24px;
}
.pdp-image {
position: relative;
border-radius: var(--radius-card);
overflow: hidden;
aspect-ratio: 1 / 1;
display: flex; align-items: center; justify-content: center;
container-type: inline-size;
}
.pdp-emoji { font-size: clamp(88px, 34cqw, 200px); }
@supports not (width: 1cqw) { .pdp-emoji { font-size: 150px; } }
/* Section avis, pleine largeur sous la fiche. */
.pdp-feedback-section { padding-top: 8px; }
.pdp-feedback-col { max-width: 860px; }
.pdp-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pdp-thumb {
width: 56px; height: 56px;
border-radius: var(--radius-tile);
overflow: hidden;
border: 1px solid var(--border);
padding: 0; cursor: pointer;
background: var(--card-bg);
flex-shrink: 0;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.active { border-color: var(--ink); border-width: 2px; }
.pdp-brand { margin-bottom: 10px; }
.pdp-brand-link { display: inline-block; text-decoration: none; }
.pdp-brand-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pdp-title { font-size: clamp(28px, 3.4vw, 38px); margin: 0 0 12px; line-height: 1.1; }
/* Note du produit en chiffres, comme sur les cartes : à cette taille, "4,6"
se lit et se compare, cinq glyphes étoile non. Les étoiles restent sur les
avis individuels, où le nombre de glyphes EST l'information. */
.pdp-rating { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pdp-score { font-size: 14px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.pdp-score-max { font-size: 11px; color: var(--ink-soft); margin-left: -6px; }
.pdp-rating .review-count { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.pdp-rating .review-count:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pdp-stars { letter-spacing: 1px; color: var(--star); }
.pdp-price {
font-size: 26px;
font-weight: 500;
margin-bottom: 26px;
letter-spacing: .01em;
font-variant-numeric: tabular-nums;
}
.pdp-price .price-old { font-size: 13px; margin-left: 10px; }
/* Caractéristiques : liste de définitions à deux colonnes, alignée par un
filet pointillé. En chasse fixe, les valeurs se lisent en colonne. */
.pdp-specs { margin: 12px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.pdp-specs dt {
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-soft);
white-space: nowrap;
}
.pdp-specs dd { margin: 0; font-size: 12px; color: var(--ink); }
.pdp-block { margin-bottom: 24px; }
.pdp-label { margin-bottom: 10px; }
.checkout-input {
width: 100%;
padding: 11px 14px;
border-radius: var(--radius-ctl);
border: 1px solid var(--border);
background: var(--surface);
color: var(--ink);
font-size: 12.5px;
font-family: inherit;
}
.checkout-input::placeholder { color: var(--ink-soft); }
.pdp-swatch-row { display: flex; gap: 10px; }
.pdp-swatch {
width: 30px; height: 30px;
border-radius: 50%;
border: 1px solid var(--border);
cursor: pointer;
padding: 0;
}
.pdp-swatch.active { border-color: var(--ink); border-width: 2px; }
.pdp-size-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp-size-btn {
min-width: 44px;
padding: 8px 14px;
border-radius: var(--radius-ctl);
border: 1px solid var(--border);
background: var(--surface);
color: var(--ink);
font-size: 11px;
font-weight: 500;
letter-spacing: .05em;
text-transform: uppercase;
font-family: inherit;
cursor: pointer;
}
.pdp-size-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pdp-buy { margin-bottom: 20px; }
.pdp-ask-seller {
display: flex; align-items: center; justify-content: center; gap: 6px;
width: 100%; margin: 0 0 8px;
border: none; background: none;
font-family: inherit;
font-size: 10.5px; font-weight: 500;
letter-spacing: .07em; text-transform: uppercase;
color: var(--ink-soft); text-decoration: none;
cursor: pointer;
}
.pdp-ask-seller:hover { color: var(--ink); }
.pdp-accordion { border-top: 1px solid var(--border); padding: 14px 0; }
.pdp-accordion summary {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
font-size: 11px; font-weight: 500;
letter-spacing: .07em; text-transform: uppercase;
cursor: pointer;
list-style: none;
}
.pdp-accordion summary::-webkit-details-marker { display: none; }
.pdp-accordion summary::after {
content: '';
width: 6px; height: 6px;
flex-shrink: 0;
border-right: 1.5px solid var(--ink-soft);
border-bottom: 1.5px solid var(--ink-soft);
transform: rotate(45deg);
transition: transform .2s ease;
}
.pdp-accordion[open] summary::after { transform: rotate(-135deg); }
.pdp-accordion p { margin: 12px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; max-width: 62ch; }
/* Onglets « Avis / Discussion » */
.feedback-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.feedback-tabs { display: flex; gap: 4px; }
.feedback-tabs-row .pdp-like-pill { flex-shrink: 0; margin-bottom: 8px; }
.feedback-tab {
border: none; background: none; cursor: pointer;
padding: 12px 4px 14px; margin-right: 20px;
font-family: inherit;
font-size: 10.5px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
color: var(--ink-soft);
border-bottom: 2px solid transparent;
}
.feedback-tab-count { font-weight: 400; }
.feedback-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
/* Photos « en situation » */
.usage-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.usage-photo-item { border-radius: var(--radius-tile); overflow: hidden; background: var(--card-bg); }
.usage-photo-item img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.usage-photo-meta { padding: 8px 10px 10px; }
.usage-photo-credit { font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.usage-photo-caption { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-soft); line-height: 1.55; }
/* --------------------------------------------------------------------------
10. Avis
-------------------------------------------------------------------------- */
.review-item { padding: 16px 0; border-top: 1px solid var(--border); }
.review-item-head { display: flex; align-items: center; gap: 10px; }
.review-item-stars { color: var(--star); font-size: 11px; }
.review-item-date { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }
.review-item-comment { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); line-height: 1.7; max-width: 62ch; }
.review-composer {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 16px;
margin-bottom: 28px;
}
.review-composer-top { display: flex; gap: 10px; margin-bottom: 10px; }
.review-rating-pill {
appearance: none;
-webkit-appearance: none;
background: var(--surface) url("data:image/svg+xml;utf8,") no-repeat right 12px center;
border: 1px solid var(--border);
border-radius: var(--radius-ctl);
padding: 8px 30px 8px 14px;
font-family: inherit;
font-size: 11px;
letter-spacing: .05em;
color: var(--ink);
cursor: pointer;
}
.review-composer-input {
width: 100%;
border: none;
background: none;
font-family: inherit;
font-size: 12.5px;
color: var(--ink);
padding: 6px 4px;
resize: vertical;
outline: none;
}
.review-composer-input::placeholder { color: var(--ink-soft); }
.review-composer-bottom {
display: flex; align-items: center; justify-content: space-between;
padding-top: 12px;
margin-top: 4px;
border-top: 1px solid var(--border);
}
.review-composer-hint { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.review-composer-send {
background: var(--ink);
color: var(--bg);
border: none;
border-radius: 999px;
padding: 9px 22px;
font-family: inherit;
font-size: 10.5px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
cursor: pointer;
}
.review-composer-send:hover { opacity: .85; }
/* --------------------------------------------------------------------------
11. Messagerie
-------------------------------------------------------------------------- */
.messaging-layout {
display: flex;
border: 1px solid var(--border);
border-radius: var(--radius-card);
overflow: hidden;
height: 560px;
background: var(--bg);
}
.messaging-list {
width: 260px;
flex-shrink: 0;
border-right: 1px solid var(--border);
overflow-y: auto;
}
.messaging-list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
text-decoration: none;
color: inherit;
border-bottom: 1px solid var(--border);
font-size: 12px;
}
.messaging-list-item:hover, .messaging-list-item.active { background: var(--bg-panel); }
.messaging-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.messaging-thread-header {
padding: 14px 18px; border-bottom: 1px solid var(--border);
font-size: 10.5px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
}
.messaging-thread-header a { text-decoration: none; color: inherit; }
.messaging-thread-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.messaging-bubble {
max-width: 70%;
padding: 10px 14px;
border-radius: var(--radius-tile);
font-size: 12px;
line-height: 1.55;
}
.messaging-bubble.them { align-self: flex-start; background: var(--bg-panel); }
.messaging-bubble.me { align-self: flex-end; background: var(--ink); color: var(--bg); }
.messaging-composer { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--border); align-items: flex-end; }
.messaging-composer textarea {
flex: 1;
resize: none;
border: 1px solid var(--border);
border-radius: var(--radius-ctl);
padding: 10px 14px;
font-family: inherit;
font-size: 12.5px;
background: var(--surface);
color: var(--ink);
}
@media (max-width: 640px) {
.messaging-layout { flex-direction: column; height: auto; }
.messaging-list { width: 100%; max-height: 180px; border-right: none; border-bottom: 1px solid var(--border); }
.messaging-thread { height: 420px; }
}
@media (max-width: 900px) {
/* Une colonne : le bloc d'achat passe sous le visuel et cesse d'être
collant, sinon il resterait figé au-dessus du contenu qu'on fait défiler. */
.pdp-grid { grid-template-columns: 1fr; gap: 24px; }
.pdp-info { position: static; }
}
/* --------------------------------------------------------------------------
12. Barre catégorie, catégories, pilules
-------------------------------------------------------------------------- */
.cat-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 24px 0;
padding-bottom: 20px;
}
.cat-toolbar-count { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.cat-toolbar-filters { display: flex; gap: 8px; flex-wrap: wrap; }
/* Le bouton du menu maison est repris ici avec le