/* * Sillage — "Mon écrin" (Mon compte WooCommerce). * Reprend telle quelle la direction artistique de la maquette V1 * (Sillage_Mon_Ecrin_Espace_Client_V1/index.html). * * Défense anti-collision : main.css, product.css et collection.css sont * déjà chargés sur tout le site et définissent des classes génériques * (.hero, .section-head, .quote, .card, .layout...) avec des mises en page * radicalement différentes. CHAQUE règle ci-dessous est donc préfixée par * #account-page, ce qui lui donne une spécificité ID+classe qui l'emporte * toujours sur un simple sélecteur de classe globale, quel que soit le nom * réutilisé — la même discipline que celle appliquée à collection.css. */ #account-page { --account-brown: #3d5348; --account-tile: #e5dccf; --account-row: #f4eee5; } /* Bug de "décalage" mobile (voir main.css, même diagnostic) : reset du minimum implicite sur les grilles à 1 colonne mobile contenant une image. */ #account-page .care>*, #account-page .objects>* { min-width: 0; } /* main.css's h2/h3 are sized for full-bleed editorial hero sections (h2 up to 5.6rem) — "Mon écrin" is a dense, compact dashboard, so it needs its own, much smaller heading scale rather than inheriting that. */ #account-page h2, #account-page h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; } #account-page h2 { font-size: clamp(1.5rem, 1.9vw, 2rem); letter-spacing: -.015em; } #account-page h3 { font-size: 1.05rem; } /* main.css also has a bare, unscoped "section{padding:clamp(82px,9.5vw,155px) 0}" rule (sized for the homepage's full-bleed sections) that silently applies to every plain
tag on the page — including .account-content, which never got its own padding override. Reset to 0 by default; each named section below (.section, .care, .account-auth) already sets its own explicit padding, so this only neutralises the un-styled ones. */ #account-page section { padding: 0; } /* WooCommerce's own bundled stylesheet still applies a legacy float/width 2-column layout to these two classes (scoped to body.woocommerce-account, which is present) — it fights the CSS Grid in .account-layout underneath and was pushing .account-content off to the right. Neutralised here rather than renaming the classes, since plugins/hooks may target them by name. */ #account-page .woocommerce-MyAccount-navigation, #account-page .woocommerce-MyAccount-content { float: none; width: auto; margin: 0; } /* main.css's site header is transparent (position:absolute, no background — see cart.css/checkout.css's own notes on this) by design: everywhere else it overlays a hero that's already dark, so white nav text stays readable for free. On this "Mon compte" body, that assumption only holds on the LEFT half of the logged-out screens (#sillage-auth .visual, a photo with its own dark gradient) — the RIGHT half (#sillage-auth .auth-panel) and the logged-in dashboard's own header row sit on the page's pale --soft/ --paper background, where white-on-cream is nearly invisible. Header is a sibling of #account-page (see header.php), not a descendant, so it has to be targeted via the body class WooCommerce itself adds on this page rather than #account-page — giving it a real background here (instead of patching every light section behind it individually) fixes both states at once and never touches header.php or any other page's header. */ body.woocommerce-account header { background: #171411; } /* Le hero de cette page est désormais le composant partagé Sillage Page Header (assets/css/page-header.css), rendu hors de #account-page, sans bandeau de bienvenue personnalisé supplémentaire en dessous. */ /* ---------- Layout: sidebar + content ---------- */ #account-page .account-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding: 40px 0 70px; align-items: start; } #account-page .sidebar { background: #211b17; color: #fff; padding: 28px; align-self: start; position: sticky; top: 24px; } #account-page .profile { display: flex; gap: 15px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .14); } #account-page .avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--bronze); display: grid; place-items: center; font-family: var(--serif); font-size: 1.4rem; color: #fff; flex: none; } #account-page .profile strong { display: block; font-family: var(--serif); font-size: 1.1rem; font-weight: 400; color: #fff; } #account-page .profile small { display: block; color: #9f9387; margin-top: 2px; } #account-page .side-nav { display: grid; margin-top: 18px; } #account-page .side-nav a { display: flex; gap: 13px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #c7baad; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; } #account-page .side-nav a:hover { color: #fff; } #account-page .side-nav a.is-active { color: #fff; } #account-page .side-nav a.woocommerce-MyAccount-navigation-link--customer-logout { border-bottom: 0; } #account-page .account-content { min-width: 0; } #account-page .woocommerce-MyAccount-content > *:not(:first-child) { margin-top: 18px; } /* ---------- Vue d'ensemble: welcome + quote ---------- */ #account-page .welcome { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; } #account-page .panel { background: var(--paper); border: 1px solid var(--line); padding: 26px; } #account-page .panel h2 { margin-top: 10px; } #account-page .panel p { margin-top: 12px; } #account-page .quote { background: var(--account-brown); color: #fff; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; } #account-page .quote p { font-family: var(--serif); font-size: 1.15rem; color: #fff; margin: 0; line-height: 1.3; } #account-page .quote small { color: #d1b28d; letter-spacing: .14em; text-transform: uppercase; margin-top: 14px; display: block; } /* ---------- Stat tiles ---------- */ #account-page .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; } #account-page .tile { background: var(--account-tile); border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; } #account-page .tile strong { font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1; } #account-page .tile h3 { font-size: .95rem; margin-top: 8px; } #account-page .tile p { margin-top: 12px; flex: 1; } #account-page .tile a { display: inline-block; margin-top: 14px; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); } /* ---------- Generic content section ---------- */ #account-page .section { background: var(--paper); border: 1px solid var(--line); padding: 26px; } #account-page .section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 20px; } #account-page .section-head p { max-width: 420px; } #account-page .section > p:only-child, #account-page .account-empty p { margin-bottom: 18px; } /* ---------- Orders ---------- */ #account-page .orders { display: grid; gap: 12px; } #account-page .order { display: grid; grid-template-columns: 1.3fr .8fr .7fr auto; gap: 20px; align-items: center; padding: 20px; border: 1px solid var(--line); background: var(--account-row); } #account-page .order strong { font-family: var(--serif); font-weight: 400; } #account-page .order time, #account-page .order small { display: block; color: var(--muted); font-size: .82rem; margin-top: 4px; } #account-page .order .status { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #5e7c5e; } #account-page .order .order-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } #account-page .order--status-cancelled .status, #account-page .order--status-refunded .status, #account-page .order--status-failed .status { color: #a15c4a; } #account-page .account-pagination { display: flex; gap: 12px; justify-content: center; margin-top: 26px; } /* ---------- Objects (adopted / favorites grids) ---------- */ #account-page .objects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } #account-page .object { background: #e4d9ca; border: 1px solid var(--line); overflow: hidden; transition: box-shadow .3s ease; } #account-page .object:hover { box-shadow: 0 16px 34px rgba(23, 20, 17, .12); } #account-page .object img { aspect-ratio: 4/5; object-fit: cover; transition: transform .5s ease; } #account-page .object:hover img { transform: scale(1.02); } #account-page .object-copy { padding: 18px; } #account-page .object-copy h3 { font-size: 1.1rem; } #account-page .object-copy p { margin-top: 12px; color: var(--muted); font-size: .88rem; } /* ---------- Addresses ---------- */ #account-page .addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } #account-page .address, #account-page div.address { border: 1px solid var(--line); padding: 24px; background: var(--account-row); } #account-page .address-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } #account-page .address address { font-style: normal; color: var(--ink); line-height: 1.6; } /* ---------- Care / conseils ---------- */ #account-page .care { display: grid; grid-template-columns: .9fr 1.1fr; background: var(--dark); color: #fff; } #account-page .care img { height: 100%; object-fit: cover; } #account-page .care-copy { padding: 32px; display: flex; flex-direction: column; justify-content: center; } #account-page .care-copy .eyebrow { color: #a8c4b8; } #account-page .care-copy h2 { color: #fff; margin-top: 10px; } #account-page .care-copy p { color: #c4b7aa; margin-top: 12px; max-width: 480px; } #account-page .care-copy .btn { color: #fff; margin-top: 20px; align-self: flex-start; } /* ---------- Empty states ---------- */ #account-page .account-empty { text-align: left; } #account-page .account-empty .btn { margin-top: 6px; } /* ---------- Forms (addresses, account details) ---------- */ /* Login/register/lost-password/reset-password moved to their own #sillage-auth wrapper + assets/css/auth.css (own local palette, own split-screen layout) — the ".account-auth*" classes that used to style them here have no more markup referencing them and were removed. */ #account-page .account-form { display: grid; gap: 18px; margin-top: 10px; } #account-page .account-form fieldset { border: 0; padding: 0; margin: 6px 0 0; display: grid; gap: 18px; } #account-page .account-form legend { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 4px; } #account-page .form-row { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; } #account-page .form-row:last-child { margin-bottom: 0; } /* Les formulaires "Détails du compte" et "Adresses" n'ont jamais reçu de grille dédiée (contrairement à Checkout/Connexion/Contact, qui définissent chacun leur propre ".fields{grid-template-columns:...}") — ils s'appuient sur le HTML natif de woocommerce_form_field(), dont les classes "form-row-first"/"form-row-last" viennent avec un flottant + une largeur de 47% dans la feuille de style WooCommerce toujours chargée. Sans reset, Prénom/Nom (et les paires similaires du formulaire d'adresse) restaient donc côte à côte à toute largeur, y compris sur mobile. Aucune mise en page 2 colonnes n'ayant jamais été prévue pour ces deux formulaires, la correction est la même à toutes les tailles : un champ par ligne. */ #account-page .form-row-first, #account-page .form-row-last { display: block; float: none; width: 100%; } #account-page label { font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } #account-page .required { color: var(--account-brown); } #account-page input.input-text, #account-page input[type="text"], #account-page input[type="email"], #account-page input[type="password"], #account-page input[type="tel"], #account-page select, #account-page textarea { background: #fff; border: 1px solid var(--line); padding: 14px 16px; font: inherit; font-size: .95rem; color: var(--ink); width: 100%; } #account-page input:focus, #account-page select:focus, #account-page textarea:focus { outline: 2px solid var(--bronze); outline-offset: 1px; } #account-page .account-form span em { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted); font-style: normal; } #account-page .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 8px; font-size: .78rem; text-transform: none; letter-spacing: 0; } #account-page .lost_password { margin-top: 6px; } #account-page .lost_password a { font-size: .78rem; color: var(--ink); text-decoration: underline; } #account-page button.btn { cursor: pointer; background: transparent; font-family: var(--sans); } /* ---------- WooCommerce default notices: no purple/blue ---------- */ #account-page .woocommerce-message, #account-page .woocommerce-error, #account-page .woocommerce-info, #account-page .woocommerce-NoticeGroup { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--account-brown); color: var(--ink); padding: 18px 22px; margin-bottom: 22px; list-style: none; font-size: .92rem; } #account-page .woocommerce-message::before, #account-page .woocommerce-error::before, #account-page .woocommerce-info::before { display: none; } #account-page .woocommerce-error li { list-style: none; margin: 0; } #account-page .woocommerce-message .button, #account-page .woocommerce-Button.button { display: inline-flex; padding: 10px 16px; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: .12em; font-size: .65rem; margin-left: 12px; } /* ---------- Defensive resets for un-overridden WC core partials ---------- */ /* order/order-details.php (view-order.php) and the address book's
tag are not in the override list — these resets keep their default markup from looking unstyled/blue inside "Mon écrin" without touching those templates. */ #account-page table.shop_table, #account-page table.woocommerce-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .92rem; } #account-page table.shop_table th, #account-page table.shop_table td, #account-page table.woocommerce-table th, #account-page table.woocommerce-table td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; } #account-page table.shop_table thead th, #account-page table.woocommerce-table thead th { background: var(--paper); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } #account-page .woocommerce-customer-details, #account-page .woocommerce-order-details, #account-page .woocommerce-order-downloads { margin-top: 22px; } #account-page .woocommerce-column__title { font-size: 1.1rem; margin-bottom: 10px; } #account-page .woocommerce-OrderUpdates.notes { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; } #account-page .woocommerce-OrderUpdate { border: 1px solid var(--line); background: var(--account-row); padding: 14px 18px; } #account-page .woocommerce-OrderUpdate-meta { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { #account-page .account-layout { grid-template-columns: 1fr; } #account-page .sidebar { position: static; } #account-page .welcome, #account-page .care { grid-template-columns: 1fr; } #account-page .tiles { grid-template-columns: 1fr 1fr; } #account-page .objects { grid-template-columns: 1fr 1fr; } #account-page .addresses { grid-template-columns: 1fr; } } @media (max-width: 700px) { #account-page .tiles, #account-page .objects, #account-page .addresses { grid-template-columns: 1fr; } #account-page .order { grid-template-columns: 1fr; } #account-page .order .order-actions { justify-content: flex-start; } #account-page table.shop_table, #account-page table.woocommerce-table { display: block; overflow-x: auto; } #account-page input.input-text, #account-page input[type="text"], #account-page input[type="email"], #account-page input[type="password"], #account-page input[type="tel"], #account-page select, #account-page textarea { padding: 16px; } #account-page button.btn, #account-page .account-form button[type="submit"] { width: 100%; } }