/* Theme Name: Pok'Antho Boutique Theme URI: https://boutique.anthodomain.online Author: Antho Description: Thème WooCommerce premium pour Pok'Antho — coffrets Pokémon scellés Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later Text Domain: pokantho WC requires at least: 8.0 WC tested up to: 9.0 */ /* ========================================================= Pok'Antho — Design System ========================================================= */ :root { --gold: #e25c4e; /* accent global — rouge pokéball (mode sombre) */ --on-accent: #141416; /* texte sur accent : presque noir (contraste AA sur le rouge clair) */ --bg: #111113; --surface: #18181b; --surface-2: #1f1f23; --line: rgba(226,92,78,.24); --line-soft: rgba(255,255,255,.08); --text: #ececee; --muted: #9d9da6; --muted-2: #6f6f78; --alert: #d98a5a; --up: #7fae6e; --shell: 1800px; /* Rayons unifiés : cadres/cartes/panneaux (--r) et contrôles/badges (--r-s) */ --r: 6px; --r-s: 4px; --font-display: "Cormorant Garamond", Georgia, serif; --font-sans: "Archivo", system-ui, sans-serif; --font-mono: "Archivo", system-ui, sans-serif; /* Survol des boutons accent : teinte décalée (pas de filter brightness) */ --gold-hover: color-mix(in oklab, var(--gold) 80%, #fff); color-scheme: dark; } /* Mode clair (jour) — activé par data-theme="light" sur */ :root[data-theme="light"] { --gold: #c23b2e; /* accent global — rouge pokéball profond (mode clair) */ --on-accent: #f7f7f5; /* texte blanc cassé sur l'accent rouge */ --bg: #f4f4f2; --surface: #fcfcfb; --surface-2: #eaeae7; --line: rgba(194,59,46,.26); --line-soft: rgba(20,20,24,.12); --text: #1c1c21; --muted: #63636b; --muted-2: #94949c; --up: #3c8a52; /* vert « stock/succès » plus profond (libéré de l'accent) */ --gold-hover: color-mix(in oklab, var(--gold) 82%, #401009); color-scheme: light; } /* Composants au contraste pensé pour le sombre -> corrigés en clair */ :root[data-theme="light"] .tone-default { background: rgba(0,0,0,.06); } :root[data-theme="light"] .pa-card-placeholder { background-image: none; } * { box-sizing: border-box; margin: 0; padding: 0; } html { overflow-x: clip; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Focus clavier visible partout (les :focus souris restent discrets) */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Supprime le délai de double-tap sur mobile */ a, button, input, select, textarea, label { touch-action: manipulation; } /* Texte accessible aux lecteurs d'écran / moteurs, masqué visuellement */ .pa-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; /* Garde-fou : empêche tout débordement horizontal (décalage mobile). « clip » ne crée pas de conteneur de défilement → header sticky préservé. */ overflow-x: clip; } /* Grain très léger sur toute la page : donne de la matière aux fonds unis. Calé sous les overlays plein écran (bascule de thème 9998, cookies 10000). */ body::after { content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-theme="light"] body::after { opacity: .07; mix-blend-mode: multiply; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } .pa-shell { max-width: var(--shell); margin: 0 auto; padding: 0 40px; } /* Chiffres à chasse fixe et modernes (lining) : les prix ne « dansent » pas, et Cormorant n'affiche pas ses chiffres elzéviriens à hauteurs variables */ .pa-price, .pa-old, .pa-pdp-price, .pa-cart-price, .pa-cart-subtotal, .pa-search-item-price, .pa-wallet-amount, .woocommerce-Price-amount, .pa-proof-num { font-variant-numeric: lining-nums tabular-nums; } h1, h2, h3, h4, .pa-account-wallet-line, .pa-cat-tile-name { font-variant-numeric: lining-nums; } /* Titres sans mot orphelin sur la dernière ligne */ .pa-hero-title, .pa-section-title, .pa-feature-title, .pa-article-card-title, .pa-article-title, .pa-pdp-title, .pa-cat-tile-name { text-wrap: balance; } .pa-mono { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; } .pa-muted { color: var(--muted); } /* ---------------- HEADER ---------------- */ .pa-header { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } /* En-tête pleine largeur : logo collé à gauche, actions à droite (sinon le contenu reste centré dans le shell de 1240px). */ .pa-header .pa-shell { max-width: none; } .pa-header-in { display: flex; align-items: center; gap: 22px; height: 72px; } .pa-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; } .pa-logo-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-family: var(--font-display); font-size: 20px; font-weight: 600; border-radius: var(--r-s); flex: none; } .pa-logo-text { font-size: 19px; font-weight: 700; letter-spacing: .01em; } .pa-logo-text em { color: var(--gold); font-style: normal; font-weight: 500; } .pa-nav { display: flex; flex-wrap: nowrap; gap: 20px; margin-right: auto; padding: 0; } .pa-nav li { list-style: none; position: relative; } .pa-nav a { font-size: 14px; color: var(--muted); letter-spacing: .01em; white-space: nowrap; transition: color .15s; } .pa-nav a:hover, .pa-nav .current-menu-item a { color: var(--text); } /* Entrée avec sous-menu : petit chevron */ .pa-nav .pa-has-sub > .pa-nav-link::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; transition: transform .15s; } .pa-nav .pa-has-sub:hover > .pa-nav-link::after { transform: translateY(0) rotate(45deg); } /* Sous-menu déroulant au survol */ .pa-submenu { position: absolute; top: 100%; left: -12px; z-index: 60; min-width: 210px; margin: 0; padding: 8px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } /* Pont invisible pour ne pas perdre le survol entre le lien et le panneau */ .pa-has-sub > .pa-submenu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .pa-has-sub:hover > .pa-submenu, .pa-has-sub:focus-within > .pa-submenu { opacity: 1; visibility: visible; transform: none; } .pa-submenu li { position: static; } .pa-submenu a { display: block; padding: 9px 12px; border-radius: var(--r-s); font-size: 14px; color: var(--muted); white-space: nowrap; transition: background .15s, color .15s; } .pa-submenu a:hover { background: var(--surface-2); color: var(--text); } .pa-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .pa-act-btn { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: var(--text); border-radius: var(--r-s); border: 1px solid var(--line); transition: border-color .15s, background .15s; text-decoration: none; white-space: nowrap; } .pa-act-btn:hover { border-color: var(--gold); background: var(--surface); } /* Menu rapide « Mon compte » (déroulant au survol) */ .pa-account-menu { position: relative; } .pa-account-dropdown { position: absolute; top: 100%; right: 0; z-index: 60; min-width: 210px; margin-top: 8px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } /* Pont invisible : conserve le survol entre le bouton et le panneau */ .pa-account-dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .pa-account-menu:hover .pa-account-dropdown, .pa-account-menu:focus-within .pa-account-dropdown { opacity: 1; visibility: visible; transform: none; } .pa-account-dropdown a { display: block; padding: 9px 12px; border-radius: var(--r-s); font-size: 14px; color: var(--muted); white-space: nowrap; transition: background .15s, color .15s; } .pa-account-dropdown a:hover { background: var(--surface-2); color: var(--text); } .pa-account-dropdown-logout { margin-top: 4px; padding-top: 11px !important; border-top: 1px solid var(--line-soft); } /* Burger (menu mobile) — masqué sur desktop, affiché en responsive */ .pa-burger { display: none; width: 40px; height: 40px; flex: none; border-radius: var(--r-s); align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--text); background: transparent; } .pa-burger:hover { border-color: var(--gold); } .pa-burger svg { width: 20px; height: 20px; } .pa-ico-close { display: none; } .pa-header.is-open .pa-ico-menu { display: none; } .pa-header.is-open .pa-ico-close { display: inline; } .pa-nav-mobile-only { display: none; } .pa-sub-toggle { display: none; } /* Bouton recherche (header) */ .pa-search-btn { width: 40px; height: 40px; flex: none; border-radius: var(--r-s); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-soft); color: var(--muted); background: transparent; transition: color .15s, border-color .15s; } .pa-search-btn:hover { color: var(--gold); border-color: var(--line); } /* Pastille cagnotte (icône + solde), collée au bouton recherche */ .pa-wallet-btn { height: 40px; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: var(--r-s); border: 1px solid var(--line-soft); background: transparent; color: var(--text); font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: color .15s, border-color .15s; } .pa-wallet-btn:hover { border-color: var(--gold); } .pa-wallet-btn svg { flex: none; color: var(--gold); } .pa-wallet-amount, .pa-wallet-amount .woocommerce-Price-amount { color: var(--gold); } .pa-search-btn + .pa-wallet-btn { margin-left: -4px; } /* Petits écrans : icône seule (on masque le montant pour gagner de la place) */ @media (max-width: 620px) { .pa-wallet-btn { width: 40px; padding: 0; justify-content: center; } .pa-wallet-amount { display: none; } } /* Bouton compte (icône) — visible sur mobile à la place du toggle thème */ .pa-account-icon { display: none; width: 40px; height: 40px; flex: none; border-radius: var(--r-s); align-items: center; justify-content: center; border: 1px solid var(--line-soft); color: var(--muted); background: transparent; transition: color .15s, border-color .15s; text-decoration: none; } .pa-account-icon:hover { color: var(--gold); border-color: var(--line); } /* Ligne « thème » en haut du menu burger — masquée sur desktop */ .pa-nav-theme { display: none; } /* Panneau de recherche déroulant + prévisualisation */ .pa-search-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 55; background: var(--surface); border-bottom: 1px solid var(--line-soft); padding: 18px 24px 22px; } .pa-header.is-search .pa-search-panel { display: block; } .pa-search-inner { max-width: 680px; margin: 0 auto; } .pa-search-bar { display: flex; align-items: center; gap: 12px; color: var(--muted-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 14px; } .pa-search-bar:focus-within { border-color: var(--gold); } .pa-search-input { flex: 1; min-width: 0; height: 52px; background: transparent; border: 0; outline: none; color: var(--text); font-family: var(--font-sans); font-size: 16px; } .pa-search-input::placeholder { color: var(--muted-2); } .pa-search-x { flex: none; background: none; border: 0; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 4px; } .pa-search-x:hover { color: var(--text); } .pa-search-results { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; } .pa-search-item { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: var(--r-s); text-decoration: none; color: var(--text); transition: background .12s; } .pa-search-item:hover { background: var(--surface-2); } .pa-search-item img, .pa-search-ph { width: 46px; height: 46px; flex: none; border-radius: var(--r-s); object-fit: cover; background: var(--surface-2); border: 1px solid var(--line-soft); } .pa-search-item-name { flex: 1; font-size: 14.5px; font-weight: 600; line-height: 1.3; } .pa-search-item-price { flex: none; color: var(--gold); font-weight: 700; font-size: 14px; white-space: nowrap; } .pa-search-item-old { color: var(--muted); font-weight: 500; font-size: 12.5px; margin-right: 7px; } .pa-search-item-pct { font-size: 10px; padding: 3px 6px; margin-right: 8px; vertical-align: 1px; } .pa-search-empty { padding: 16px 12px; color: var(--muted); font-size: 14px; } .pa-search-all { margin-top: 12px; padding: 11px 18px; border-radius: var(--r-s); border: 0; cursor: pointer; background: var(--gold); color: var(--on-accent); font-weight: 700; font-size: 14px; font-family: var(--font-sans); } .pa-search-all:hover { background: var(--gold-hover); } /* Grand écran : la barre de recherche est affichée en clair dans le header (plus besoin de cliquer sur la loupe). En dessous de 1080px, on garde la loupe + le panneau déroulant (gain de place). */ @media (min-width: 1080px) { .pa-search-btn { display: none; } .pa-search-panel { position: relative; display: block; order: -1; z-index: 55; top: auto; left: auto; right: auto; width: clamp(200px, 18vw, 280px); height: 40px; background: transparent; box-shadow: none; border: 0; padding: 0; } /* Au focus, un JS (footer.php) élargit la barre UNIQUEMENT dans l'espace libre mesuré entre la fin du menu et la barre : rien n'est poussé hors écran, rien n'est recouvert. */ .pa-search-panel { transition: width .22s ease; } .pa-search-inner { max-width: none; margin: 0; position: relative; } .pa-search-bar { height: 40px; padding: 0 12px; gap: 8px; border-radius: var(--r-s); background: var(--surface-2); border: 1px solid var(--line-soft); } .pa-search-input { height: 40px; font-size: 14.5px; } .pa-search-x { display: none; } /* Résultats : menu déroulant ancré sous la barre (à droite), plus large que la barre pour lire les noms de produits ; masqué tant qu'il n'y a rien */ .pa-search-drop { position: absolute; top: calc(100% + 8px); left: auto; right: 0; z-index: 60; width: max(100%, min(340px, calc(100vw - 32px))); max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 10px; } .pa-search-drop:not(:has(.pa-search-results:not(:empty))):not(:has(.pa-search-all:not([hidden]))) { display: none; } /* Fermé tant que la recherche n'a pas le focus (classe posée par footer.php) : clic en dehors = résultats fermés + barre repliée, le texte tapé est conservé */ .pa-search-panel:not(.is-open) .pa-search-drop { display: none; } .pa-search-results { margin-top: 0; } .pa-search-all { margin-top: 8px; width: 100%; } } .pa-header-search { position: relative; display: flex; align-items: center; } .pa-header-search-ic { position: absolute; left: 13px; color: var(--muted-2); pointer-events: none; } .pa-header-search input[type="search"] { height: 40px; width: 210px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-s); padding: 0 14px 0 38px; font-family: var(--font-sans); font-size: 13.5px; transition: border-color .15s, width .2s, background .15s; } .pa-header-search input[type="search"]::placeholder { color: var(--muted-2); } .pa-header-search input[type="search"]:focus { outline: none; border-color: var(--gold); width: 250px; } .pa-cart-count { min-width: 20px; height: 20px; padding: 0 6px; background: var(--gold); color: var(--on-accent); font-size: 11px; font-weight: 800; border-radius: var(--r-s); display: inline-grid; place-items: center; } /* Icône panier : masquée sur desktop (on garde le texte « Panier ») */ .pa-cart-ic { display: none; flex: none; } /* ---------------- BOUTONS ---------------- */ .pa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; font-size: 14px; font-weight: 700; letter-spacing: .015em; border-radius: var(--r-s); transition: background .15s, border-color .15s, color .15s; text-decoration: none; cursor: pointer; border: none; font-family: var(--font-sans); } .pa-btn-gold { background: var(--gold); color: var(--on-accent); } .pa-btn-gold:hover { background: var(--gold-hover); color: var(--on-accent); } .pa-btn-ghost { border: 1px solid var(--line); color: var(--text); background: none; } .pa-btn-ghost:hover { background: var(--surface); border-color: var(--gold); } .pa-btn-lg { padding: 16px 26px; font-size: 15px; } .pa-btn-block { width: 100%; } /* WooCommerce button overrides */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; padding: 13px 22px; font-size: 14px; font-weight: 700; letter-spacing: .015em; border-radius: var(--r-s); background: var(--gold); color: var(--on-accent); transition: background .15s; border: none; cursor: pointer; font-family: var(--font-sans); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background: var(--gold-hover); color: var(--on-accent); } .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--gold); color: var(--on-accent); } /* ---------------- HERO ---------------- */ .pa-hero { padding: 44px 0 36px; position: relative; overflow: hidden; } .pa-hero::before { content: none; } .pa-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; position: relative; } /* Sur-titre de section : italique Fraunces, ton éditorial */ .pa-eyebrow { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; font-style: italic; letter-spacing: .01em; text-transform: none; color: var(--gold); margin-bottom: 12px; } .pa-hero-title { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.1; font-weight: 600; letter-spacing: -.01em; font-family: var(--font-display); } .pa-hero-title em { color: var(--gold); font-style: normal; } .pa-hero-sub { margin: 14px 0 22px; color: var(--muted); font-size: 15px; max-width: 32em; line-height: 1.6; } .pa-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } .pa-hero-stats { display: flex; gap: 38px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line-soft); } .pa-hero-stats > div { display: flex; flex-direction: column; } .pa-hero-stats strong { font-size: 26px; font-weight: 700; color: var(--text); font-family: var(--font-display); } .pa-hero-stats span { font-size: 12.5px; color: var(--muted); letter-spacing: .02em; } .pa-hero-media { position: relative; max-width: 310px; width: 100%; justify-self: center; } .pa-hero-img-wrap { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: var(--surface); aspect-ratio: 4/5; overflow: hidden; } .pa-hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r) - 4px); } /* Visuel artwork (PNG transparent) : affiché en entier, juste un halo doré. Pas de cadre ni de fond sombre -> évite les coins arrondis sombres parasites. */ .pa-hero-art { border-color: transparent; display: flex; align-items: center; justify-content: center; background: none; position: relative; } .pa-hero-art img { object-fit: contain; border-radius: 0; } /* Halo doux aux couleurs de l'accent courant derrière le Pokémon */ .pa-hero-art::before { content: ""; position: absolute; inset: 8%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--gold) 20%, transparent), transparent 72%); filter: blur(14px); pointer-events: none; } .pa-hero-art .pa-hero-poke { position: relative; z-index: 1; } /* Ombre au sol : le Pokémon est posé, il ne flotte plus dans le vide */ .pa-hero-art::after { content: ""; position: absolute; left: 50%; bottom: 4%; z-index: 0; width: 46%; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--text) 20%, transparent), transparent 72%); filter: blur(5px); pointer-events: none; } /* Hero rotatif : une cellule de la sprite sheet (Pokémon selon le thème) */ .pa-hero-poke { width: 100%; aspect-ratio: 1; opacity: 1; background-repeat: no-repeat; background-position: 0% center; background-size: 600% 100%; transition: opacity .45s ease; filter: none; } .pa-hero-img-placeholder { width: 100%; height: 100%; min-height: 360px; background: var(--surface); background-image: none; border-radius: calc(var(--r) - 4px); display: grid; place-items: center; } /* ---------------- TRUST BAR ---------------- */ .pa-trust { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--surface); } .pa-trust-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 26px 40px; max-width: var(--shell); margin: 0 auto; } .pa-trust-item { display: flex; gap: 14px; align-items: flex-start; } .pa-trust-ic { width: 20px; height: 20px; color: var(--gold); margin-top: 2px; flex: none; } .pa-trust-ic svg { width: 100%; height: 100%; display: block; } .pa-trust-t { font-size: 14.5px; font-weight: 700; } .pa-trust-d { font-size: 13px; color: var(--muted); } /* ---------------- PANNEAU PANIER (latéral droit) ---------------- */ html.pa-drawer-lock { overflow: hidden; } .pa-drawer-overlay { position: fixed; inset: 0; z-index: 9992; background: color-mix(in oklab, #000 55%, transparent); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .pa-drawer-overlay.is-open { opacity: 1; pointer-events: auto; } .pa-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9993; width: min(480px, 94vw); background: var(--bg); border-left: 1px solid var(--line); display: flex; flex-direction: column; transform: translateX(102%); visibility: hidden; transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility .3s; } .pa-drawer.is-open { transform: none; visibility: visible; } @media (prefers-reduced-motion: reduce) { .pa-drawer, .pa-drawer-overlay { transition: none; } } .pa-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); } .pa-drawer-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; } .pa-drawer-close { display: grid; place-items: center; width: 34px; height: 34px; background: none; border: 1px solid var(--line-soft); border-radius: 50%; color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; } .pa-drawer-close:hover { color: var(--gold); border-color: var(--gold); } .pa-drawer-close svg { width: 16px; height: 16px; } .pa-drawer-body { flex: 1; overflow-y: auto; padding: 4px 22px 22px; } /* Mini-panier WooCommerce habillé aux couleurs du thème */ .pa-drawer ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; } .pa-drawer li.woocommerce-mini-cart-item { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px 30px 14px 0; border-bottom: 1px solid var(--line-soft); } .pa-drawer .woocommerce-mini-cart-item > a:not(.remove) { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; } .pa-drawer .woocommerce-mini-cart-item > a:not(.remove):hover { color: var(--gold); } .pa-drawer .woocommerce-mini-cart-item img { width: 56px; height: 56px; object-fit: cover; flex: none; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-s); } .pa-drawer .woocommerce-mini-cart-item .quantity { width: 100%; padding-left: 68px; font-size: 13px; color: var(--muted); } /* Sélecteur de quantité (− n +) dans le panneau */ .pa-drawer .pa-mini-qty { display: flex; align-items: center; gap: 10px; } .pa-mini-step { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s; } .pa-mini-step:hover { border-color: var(--gold); color: var(--gold); } .pa-mini-qty-val { min-width: 20px; text-align: center; font-size: 14.5px; font-weight: 700; color: var(--text); } .pa-mini-price { margin-left: auto; font-size: 13.5px; } .pa-mini-qty.is-busy, li.is-busy { opacity: .5; pointer-events: none; } /* Fiche produit : produit déjà en panier — même structure, seul le texte du bouton change (il reste cliquable pour ajouter la quantité sélectionnée) ; la poubelle (dans le formulaire) retire l'article. */ .pa-pdp-buy.is-busy { opacity: .55; pointer-events: none; } .pa-pdp-trash { display: grid; place-items: center; width: 52px; flex: none; align-self: stretch; background: none; border: 1px solid var(--line); border-radius: var(--r-s); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; } .pa-pdp-trash:hover { color: #e05c5c; border-color: #e05c5c; } .pa-pdp-trash svg { width: 18px; height: 18px; } .pa-drawer .woocommerce-mini-cart-item a.remove { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--muted); font-size: 18px; font-weight: 600; text-decoration: none; transition: color .15s, background .15s; } .pa-drawer .woocommerce-mini-cart-item a.remove:hover { color: #e05c5c; background: var(--surface-2); } .pa-drawer .woocommerce-mini-cart__empty-message { padding: 42px 0; text-align: center; color: var(--muted); font-size: 14.5px; } .pa-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 0; margin: 0; font-size: 14.5px; color: var(--muted); } .pa-drawer .woocommerce-mini-cart__total .woocommerce-Price-amount { color: var(--text); font-weight: 700; font-size: 18px; } .pa-drawer .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; } .pa-drawer .woocommerce-mini-cart__buttons a.button { display: block; text-align: center; padding: 13px 18px; border-radius: var(--r-s); font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; text-decoration: none; border: 1px solid var(--line); color: var(--text); background: transparent; transition: border-color .15s, background .15s, color .15s; } .pa-drawer .woocommerce-mini-cart__buttons a.button:hover { border-color: var(--gold); color: var(--gold); } .pa-drawer .woocommerce-mini-cart__buttons a.button.checkout { background: var(--gold); border-color: var(--gold); color: var(--on-accent); } .pa-drawer .woocommerce-mini-cart__buttons a.button.checkout:hover { background: var(--gold-hover); color: var(--on-accent); } /* ---------------- INFOBULLE « STOCK MAXIMUM » ---------------- */ .pa-stock-tip { position: absolute; z-index: 10001; pointer-events: none; white-space: nowrap; transform: translate(-50%, -100%) translateY(4px); background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-s); padding: 7px 12px; font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); opacity: 0; transition: opacity .2s ease, transform .2s ease; } .pa-stock-tip.is-in { opacity: 1; transform: translate(-50%, -100%) translateY(0); } /* ---------------- REMONTER EN HAUT ---------------- */ .pa-totop { position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s, border-color .15s, color .15s; } .pa-totop.is-visible { opacity: 1; visibility: visible; transform: none; } .pa-totop:hover { border-color: var(--gold); color: var(--gold); } .pa-totop:active { transform: scale(.9); } .pa-totop svg { width: 20px; height: 20px; } @media (max-width: 620px) { .pa-totop { right: 14px; bottom: 14px; width: 42px; height: 42px; } } /* ---------------- APPARITION AU SCROLL (accueil) ---------------- Une seule chorégraphie : fondu + légère remontée à l'entrée du viewport. Le masquage initial n'existe que si le JS a posé .pa-anim sur (IntersectionObserver dispo + motion non réduite) : sans JS, tout est visible. */ html.pa-anim .pa-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } html.pa-anim .pa-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.pa-anim .pa-reveal { opacity: 1; transform: none; transition: none; } } /* ---------------- SECTIONS ---------------- */ .pa-section { padding: 34px 0; } .pa-section-alt { background: var(--surface); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .pa-section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; } .pa-section-head.center { justify-content: center; text-align: center; } .pa-section-head.inline { justify-content: flex-start; align-items: baseline; gap: 16px; } /* Filet éditorial : un trait fin court du titre jusqu'au lien « Tout voir » */ .pa-section-head.inline::after { content: ""; order: 1; flex: 1; height: 1px; min-width: 40px; background: var(--line-soft); align-self: center; } .pa-section-head.inline .pa-link-arrow { order: 2; } .pa-section-title { font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; font-family: var(--font-display); } .pa-link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 14px; font-weight: 700; text-decoration: none; } .pa-link-arrow svg { width: 15px; height: 15px; flex: none; transition: transform .18s ease; } .pa-link-arrow:hover svg { transform: translateX(3px); } /* ---------------- GRILLE PRODUITS ---------------- */ .pa-grid { display: grid; gap: 22px 18px; } .pa-grid-3 { grid-template-columns: repeat(3, 1fr); } .pa-grid-2 { grid-template-columns: repeat(2, 1fr); } .pa-grid-4 { grid-template-columns: repeat(4, 1fr); } /* Carte produit — style galerie : image encadrée d'un filet fin, texte posé dessous, sans boîte englobante (moins « template », plus catalogue). */ .pa-card { position: relative; text-align: left; display: flex; flex-direction: column; background: transparent; border: 0; border-radius: 0; overflow: visible; text-decoration: none; color: var(--text); } .pa-card-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); transition: border-color .18s; } .pa-card:hover .pa-card-media { border-color: var(--line); } /* Format de référence des images produit : PNG 1600×1000, produit détouré et centré (~39% de la largeur × 60% de la hauteur du canevas — ex. « Display évolution céleste »). contain + scale(2) : le produit remplit la carte, les marges transparentes débordent du cadre (overflow hidden les rogne). Sans rognage tant que le produit reste dans les 50% centraux du canevas. */ .pa-card-media img { width: 100%; height: 100%; object-fit: contain; transform: scale(2); transform-origin: center; transition: transform .3s; } .pa-card:hover .pa-card-media img { transform: scale(2.06); } /* ── Vignette studio derrière le PNG produit ───────────────────────────────── Fond "studio" 100% CSS (aucune image) appliqué sur .pa-card-media. Branché sur :root[data-theme="…"] — le même marqueur que le bouton jour/nuit et la bascule horaire : aucun JS supplémentaire, ça suit le mode global du site. Or de la marque ≈ #C9A227. ───────────────────────────────────────────────── */ /* Autonome : marche sur n'importe quel conteneur (cartes + fiche produit) */ .pokantho-vignette { position: relative; overflow: hidden; } /* Mode SOMBRE (défaut) : studio sombre, lumière chaude dorée en haut → noir */ :root[data-theme="dark"] .pokantho-vignette { background: var(--surface); } /* Mode CLAIR (jour) : studio ivoire/crème doux et lumineux */ :root[data-theme="light"] .pokantho-vignette { background: var(--surface); } /* Petites miniatures (fiche produit + panier) : ombre interne pleine trop lourde → version douce */ :root[data-theme="light"] .pa-pdp-thumb.pokantho-vignette img { filter: none; } :root[data-theme="light"] .pa-cart-thumb.pokantho-vignette img { filter: none; } .pa-card-tags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; } .pa-card-body { padding: 10px 2px 0; display: flex; flex-direction: column; gap: 5px; flex: 1; } .pa-card-serie { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); } .pa-card-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; flex: 1; } .pa-card-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 2px; } .pa-price-wrap { display: flex; flex-direction: column; } .pa-price { font-size: 14px; font-weight: 700; color: var(--text); } .pa-old { font-size: 12.5px; color: var(--muted-2); text-decoration: line-through; } .pa-card-placeholder { width: 100%; height: 100%; background: var(--surface); display: grid; place-items: center; } /* Lien de navigation (sur l'image) + corps de carte cliquable */ .pa-card-link { position: absolute; inset: 0; z-index: 1; } .pa-card-body { color: var(--text); text-decoration: none; } /* Bloc d'achat — base (tactile/mobile) : sous l'image, toujours visible */ .is-hidden { display: none !important; } .pa-card-frame { display: contents; } .pa-card-media { order: 1; } .pa-card-body { order: 2; } .pa-card-buy { order: 3; padding: 10px 0 0; } .pa-card-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: var(--r-s); border: 0; cursor: pointer; background: var(--gold); color: var(--on-accent); font-size: 13px; font-weight: 700; letter-spacing: .01em; text-decoration: none; white-space: nowrap; transition: background .15s ease; } /* Desktop (souris) : bouton révélé AU SURVOL, par-dessus l'image */ @media (hover: hover) { .pa-card-frame { display: block; position: relative; } .pa-card-buy { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; padding: 0; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .pa-card:hover .pa-card-buy, .pa-card:focus-within .pa-card-buy { opacity: 1; transform: none; pointer-events: auto; } .pa-card-add { box-shadow: none; } } .pa-card-add svg { flex: none; } .pa-card-add:hover { background: var(--gold-hover); color: var(--on-accent); } .pa-card-add.loading { opacity: .7; pointer-events: none; } .pa-card-add.added { background: #3fae6b; color: #fff; } /* Lien « Voir le panier » que WooCommerce ajoute après l'ajout — masqué sur les cartes */ .pa-card-buy .added_to_cart { display: none !important; } /* Lien « Voir le panier / Passer à l'achat » inséré par WooCommerce après l'ajout : masqué partout — il doublonnait « Achat rapide », et la fiche a désormais la poubelle + le sélecteur de quantité. */ .woocommerce div.product .added_to_cart.wc-forward, .pa-pdp-buy .added_to_cart.wc-forward { display: none !important; } /* Ajout au panier : « bump » du bouton Panier du header (en haut à droite) */ .pa-cart-btn.pa-cart-bump { animation: paCartBump .6s cubic-bezier(.3, .7, .3, 1); border-color: var(--gold); } @keyframes paCartBump { 0% { transform: scale(1); } 30% { transform: scale(1.16); } 60% { transform: scale(.95); } 100% { transform: scale(1); } } /* Sélecteur de quantité (− n +) */ .pa-card-qty { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px; border-radius: var(--r-s); background: var(--surface-2); border: 1px solid var(--line); } .pa-qty-btn { width: 38px; height: 34px; flex: none; border: 0; border-radius: var(--r-s); cursor: pointer; background: var(--gold); color: var(--on-accent); font-size: 20px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s; } .pa-qty-btn:hover { background: var(--gold-hover); } .pa-qty-val { flex: 1; text-align: center; font-weight: 700; font-size: 15px; color: var(--text); } /* Produits similaires (fiche produit) : bloc d'achat TOUJOURS visible (pas seulement au survol) pour que « Ajouter au panier » + la quantité restent accessibles, et cartes compactes (grille à 4 via .pa-grid-4). */ .pa-pdp-related .pa-card-frame { display: contents; } .pa-pdp-related .pa-card-buy { position: static; left: auto; right: auto; bottom: auto; opacity: 1; transform: none; pointer-events: auto; padding: 10px 0 0; box-shadow: none; } /* Pastille « compteur panier » masquée quand le panier est vide */ .pa-cart-count.is-empty { display: none; } /* Produit épuisé : image atténuée + grand tampon « ÉPUISÉ » bien visible */ .pa-card.is-out .pa-card-media img { filter: grayscale(.65) brightness(.5); } .pa-card-out { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; } .pa-card-out span { font-family: var(--font-mono); font-weight: 700; font-size: clamp(15px, 1.5vw, 21px); letter-spacing: .16em; text-transform: uppercase; color: #fff; background: color-mix(in oklab, #d05a4f 92%, #000); padding: 9px 20px; border-radius: var(--r-s); box-shadow: none; transform: rotate(-7deg); } /* Badges */ .pa-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--r-s); backdrop-filter: blur(4px); } .tone-default { background: rgba(0,0,0,.4); color: var(--text); border: 1px solid var(--line-soft); } .tone-muted { background: color-mix(in oklab, var(--surface) 80%, transparent); color: var(--muted); border: 1px solid var(--line-soft); } .tone-gold { background: color-mix(in oklab, var(--gold) 20%, transparent); color: var(--gold); border: 1px solid var(--line); } .tone-alert { background: color-mix(in oklab, var(--alert) 18%, transparent); color: var(--alert); border: 1px solid color-mix(in oklab, var(--alert) 40%, transparent); } .tone-out { background: color-mix(in oklab, #d05a4f 20%, transparent); color: #e89489; border: 1px solid color-mix(in oklab, #d05a4f 46%, transparent); } /* Trend */ .pa-trend { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 4px; } .pa-trend.up { color: var(--up); } .pa-trend.down { color: var(--alert); } /* Stars (SVG) */ .pa-stars { display: inline-flex; align-items: center; gap: 3px; } .pa-stars > span { display: inline-flex; } .pa-stars svg { width: 15px; height: 15px; display: block; } .pa-stars .on { color: var(--gold); } .pa-stars .off { color: var(--muted-2); } /* WooCommerce shop loop override */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 0; margin: 0; } .woocommerce ul.products li.product { margin: 0; padding: 0; } .woocommerce ul.products li.product a.woocommerce-loop-product__link { text-decoration: none; } /* ---------------- AVIS ---------------- */ .pa-review { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 14px; } .pa-review blockquote { font-size: 15.5px; line-height: 1.6; color: var(--text); flex: 1; font-family: var(--font-display); font-size: 18px; } .pa-review figcaption { display: flex; flex-direction: column; } .pa-review figcaption strong { font-size: 14px; } .pa-review figcaption span { font-size: 12.5px; color: var(--muted); } /* ---------------- PIÈCE DU MOMENT (accueil) ---------------- */ .pa-feature { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; } /* Rupture de grille assumée (la seule de la page) : l'image sort du bandeau alterné par le haut, ~30px au-dessus de son filet, dans le blanc du hero. */ .pa-feature-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--surface); align-self: start; margin-top: -64px; } /* Même calibrage que les cartes (PNG 1600×1000 détouré) : contain + zoom, les marges transparentes débordent du cadre (overflow hidden les rogne). */ .pa-feature-media img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.75); transform-origin: center; transition: transform .4s ease; } .pa-feature-media:hover img { transform: scale(1.82); } .pa-feature-title { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 38px); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; margin-top: 4px; } .pa-feature-title a { color: var(--text); transition: color .15s; } .pa-feature-title a:hover { color: var(--gold); } .pa-feature-desc { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin-top: 14px; max-width: 46em; } .pa-feature-price { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; } .pa-feature-price .pa-price { font-size: 30px; } .pa-feature-price .pa-old { font-size: 15.5px; } .pa-feature-cta { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; } /* ---------------- TUILES CATÉGORIES (accueil) ---------------- */ /* Dé-boîtées : image encadrée d'un filet fin (même langage que les cartes produit galerie), nom + compte posés dessous sur le fond, pas de boîte. auto-fill (et non auto-fit) : une tuile seule ne s'étire pas sur toute la largeur */ .pa-cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 26px 18px; } .pa-cat-tile { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--text); } .pa-cat-tile-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--surface); transition: border-color .18s; } .pa-cat-tile:hover .pa-cat-tile-media { border-color: var(--line); } .pa-cat-tile-media img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.9); transform-origin: center; transition: transform .3s; } .pa-cat-tile:hover .pa-cat-tile-media img { transform: scale(1.96); } .pa-cat-tile-name { margin-top: 12px; font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.15; transition: color .15s; } .pa-cat-tile:hover .pa-cat-tile-name { color: var(--gold); } .pa-cat-tile-count { font-size: 13px; color: var(--muted); } /* ---------------- BANDE DE RÉASSURANCE (accueil, tout en haut) ---------------- Version compacte du bandeau confiance : une seule ligne discrète sous le header. */ /* ---------------- BANDEAU D'ANNONCE (site-wide) ---------------- */ .pa-anno { background: linear-gradient(90deg, color-mix(in oklab, var(--gold) 16%, var(--surface)), var(--surface) 60%); border-bottom: 1px solid var(--line); /* Masqué par défaut : révélé par JS (évite le flash si déjà fermé). */ display: none; } .pa-anno.is-shown { display: block; } .pa-anno.is-closing { opacity: 0; transition: opacity .24s ease; } .pa-anno-in { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 44px 9px 0; position: relative; text-align: center; } .pa-anno-ic { display: inline-flex; flex: none; color: var(--gold); } .pa-anno-ic svg { width: 17px; height: 17px; } .pa-anno-txt { font-size: 13.5px; color: var(--text); line-height: 1.4; } .pa-anno-txt strong { font-weight: 700; } .pa-anno-code { display: inline-block; margin-left: 4px; padding: 2px 9px; background: var(--gold); color: var(--on-accent); border-radius: var(--r-s); font-weight: 700; letter-spacing: .04em; font-size: 12.5px; vertical-align: baseline; } .pa-anno-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; cursor: pointer; background: transparent; color: var(--muted); border-radius: var(--r-s); } .pa-anno-x:hover { color: var(--text); background: var(--line-soft); } .pa-anno-x svg { width: 16px; height: 16px; } @media (max-width: 620px) { .pa-anno-in { gap: 8px; padding: 8px 40px 8px 6px; } .pa-anno-txt { font-size: 12.5px; } .pa-anno-ic { display: none; } } .pa-trustline { background: var(--surface); border-bottom: 1px solid var(--line-soft); } .pa-trustline-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 30px; padding: 9px 0; } .pa-trustline-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); text-decoration: none; } .pa-trustline-item svg { width: 15px; height: 15px; flex: none; color: var(--gold); } .pa-trustline-sales strong { color: var(--gold); font-weight: 700; font-size: 13.5px; } a.pa-trustline-sales:hover { color: var(--text); } @media (max-width: 760px) { .pa-trustline-in { gap: 5px 18px; padding: 8px 0; } } /* ---------------- BANDE DE CONFIANCE (accueil) ---------------- */ .pa-proof { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; } .pa-proof-num { font-family: var(--font-display); font-size: clamp(54px, 6.5vw, 92px); font-weight: 600; line-height: 1; color: var(--gold); } .pa-proof-label { margin-top: 6px; font-size: 16px; color: var(--muted); max-width: 22em; } .pa-proof-label a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .pa-proof-points { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; padding: 0; } .pa-proof-points li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); } .pa-proof-points svg { width: 16px; height: 16px; flex: none; color: var(--gold); } .pa-proof-quote { border-left: 3px solid var(--gold); padding: 6px 0 6px 28px; display: flex; flex-direction: column; gap: 12px; } .pa-proof-quote blockquote { font-family: var(--font-display); font-size: clamp(18px, 1.9vw, 24px); line-height: 1.55; color: var(--text); } .pa-proof-quote figcaption { display: flex; flex-direction: column; } .pa-proof-quote figcaption strong { font-size: 14px; } .pa-proof-quote figcaption span { font-size: 12.5px; color: var(--muted); } /* Pas encore d'avis : le bloc « ventes » occupe seul la bande, centré, chiffre et points côte à côte (pas de colonne vide à droite). */ .pa-proof-solo { grid-template-columns: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 64px; } .pa-proof-solo .pa-proof-fact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 40px; } .pa-proof-solo .pa-proof-num { flex: none; } .pa-proof-solo .pa-proof-label { margin-top: 0; max-width: 13em; } .pa-proof-solo .pa-proof-points { margin-top: 0; flex-basis: auto; } @media (max-width: 980px) { .pa-feature { grid-template-columns: 1fr; gap: 26px; } /* En colonne, la rupture de grille n'a plus de sens : l'image rentre dans le bandeau */ .pa-feature-media { max-width: 440px; align-self: auto; margin-top: 0; } .pa-proof { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 620px) { .pa-cat-tiles { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } .pa-cat-tile-name { font-size: 16px; margin-top: 8px; } } /* ---------------- FICHE PRODUIT (PDP) ---------------- */ .pa-pdp { padding: 32px 0 80px; } .pa-breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 28px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pa-breadcrumb a { color: var(--muted); } .pa-breadcrumb a:hover { color: var(--gold); } .pa-breadcrumb span { color: var(--muted-2); } /* Galerie resserrée : le maximum de largeur va à la colonne titre/infos */ .pa-pdp-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; } .pa-pdp-gallery { position: sticky; top: 96px; } .pa-pdp-main { border: 1px solid var(--line-soft); border-radius: var(--r); padding: 10px; background: var(--surface); } /* Ratio fixe : le bloc image a toujours la même taille quelle que soit la dimension du fichier envoyé à WordPress (contain = jamais rogné) */ /* Les PNG produits (1600x1000 détourés, produit centré ~39%x60%) laissent beaucoup de marge : encadré raccourci (16/10) + léger zoom pour compenser. */ .pa-pdp-main img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; border-radius: calc(var(--r) - 4px); transform: scale(1.35); } .pa-pdp-thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .pa-pdp-thumb { width: 64px; flex: 0 0 auto; border: 1px solid var(--line-soft); border-radius: var(--r-s); padding: 4px; background: var(--surface); cursor: pointer; transition: border-color .15s; } .pa-pdp-thumb:hover, .pa-pdp-thumb.is-active { border-color: var(--gold); } /* Carrousel fiche produit : diapos superposées en fondu + flèches + progression */ .pa-carousel::before { content: ""; display: block; padding-top: 68%; } .pa-carousel .pa-slide { position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; opacity: 0; transition: opacity .45s ease; } .pa-carousel .pa-slide.is-active { opacity: 1; } .pa-car-progress { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 3px; border-radius: 999px; background: var(--line-soft); overflow: hidden; z-index: 2; } .pa-car-progress i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 999px; } /* Loupe photo : clic maintenu = zoom sur la zone visée (suit la souris) */ .pa-pdp-main .pa-slide { cursor: zoom-in; touch-action: none; user-select: none; -webkit-user-select: none; } .pa-pdp-main .pa-slide.is-zoom { cursor: zoom-out; } .pa-car-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--surface); color: inherit; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s, border-color .15s; } .pa-carousel:hover .pa-car-nav, .pa-car-nav:focus-visible { opacity: .95; } .pa-car-nav:hover { border-color: var(--gold); } .pa-car-prev { left: 14px; } .pa-car-next { right: 14px; } .pa-pdp-thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--r-s); } .pa-pdp-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .pa-pdp-serie { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .pa-pdp-title { font-size: clamp(23px, 2.6vw, 32px); line-height: 1.14; font-weight: 600; letter-spacing: -.01em; font-family: var(--font-display); } .pa-pdp-rating { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; color: var(--muted); } .pa-pdp-pricebox { margin: 22px 0; padding: 0 0 20px; border-bottom: 1px solid var(--line-soft); } .pa-pdp-priceline { display: flex; align-items: baseline; gap: 12px; } .pa-pdp-price { font-size: 34px; font-weight: 700; } .pa-pdp-desc { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin-bottom: 26px; } .pa-pdp-buy { display: flex; gap: 14px; align-items: stretch; } .pa-quick-buy { margin-top: 12px; } .pa-pdp-buy .pa-btn { flex: 1; } /* Formulaire WooCommerce (quantité + bouton ajouter au panier) */ .pa-pdp-buy form.cart { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; width: 100%; margin: 0; } .pa-pdp-buy form.cart .quantity { flex: none; margin: 0; } .pa-pdp-buy form.cart .qty { height: 100%; width: 88px; text-align: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-s); padding: 13px 12px; font-family: var(--font-sans); font-size: 16px; } .pa-pdp-buy form.cart .single_add_to_cart_button { flex: 1; min-width: 200px; } /* Spécifications — liste éditoriale compacte : pas de boîte, pas de filets, libellés dans la couleur d'accent */ .pa-specs { display: block; margin-top: 4px; max-width: 420px; } /* Valeur collée au libellé (léger espace), pas d'écartèlement sur la largeur */ .pa-specs > div { padding: 6px 2px; display: flex; justify-content: flex-start; align-items: baseline; gap: 12px; } .pa-specs dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-family: var(--font-mono); flex: none; } .pa-specs dd { font-size: 13px; font-weight: 600; text-align: left; margin: 0; } /* Garanties (fiche produit) : liste avec petites icônes au trait */ .pa-pdp-assure { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; color: var(--muted); } .pa-pdp-assure span { display: inline-flex; align-items: center; gap: 9px; } .pa-pdp-assure svg { width: 15px; height: 15px; flex: none; color: var(--gold); } /* Stock */ .pa-stock-ok { color: var(--up); font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; margin: 16px 0; } .pa-stock-low { color: var(--alert); font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; margin: 16px 0; } .pa-stock-out { color: #e89489; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; margin: 16px 0; } .pa-stock-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .pa-stock-ok .pa-stock-dot { background: var(--up); } .pa-stock-low .pa-stock-dot { background: var(--alert); } .pa-stock-out .pa-stock-dot { background: #d05a4f; } /* WooCommerce PDP overrides */ .woocommerce div.product { padding: 32px 0 80px; } .woocommerce div.product p.price { font-size: 34px; font-weight: 700; color: var(--text); } .woocommerce div.product p.price ins { text-decoration: none; color: var(--text); } .woocommerce div.product p.price del { color: var(--muted-2); font-size: 16px; } .woocommerce div.product .woocommerce-product-rating { margin: 14px 0; } .woocommerce div.product .woocommerce-review-link { color: var(--muted); font-size: 13px; } .woocommerce .star-rating { color: var(--gold); } .woocommerce .star-rating span { color: var(--gold); } .woocommerce div.product form.cart { margin: 26px 0; display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; } .woocommerce div.product form.cart .quantity { flex: none; } .woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; min-width: 200px; } .woocommerce div.product form.cart .qty { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-s); padding: 12px 16px; font-family: var(--font-sans); font-size: 16px; width: 80px; height: 100%; } .woocommerce div.product .woocommerce-tabs { margin-top: 48px; } .woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--line-soft); padding: 0; margin-bottom: 24px; display: flex; gap: 4px; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: none; border-radius: 0; margin: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--muted); font-size: 14px; font-weight: 600; padding: 12px 18px; display: block; border-bottom: 2px solid transparent; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--gold); border-bottom-color: var(--gold); } .woocommerce div.product .woocommerce-tabs .panel { color: var(--muted); line-height: 1.7; } .woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 20px; color: var(--text); margin-bottom: 16px; font-family: var(--font-display); } /* ---------------- PANIER WooCommerce ---------------- */ .woocommerce-cart .woocommerce { padding: 6px 0 60px; } /* Le panier n'est pas un article : on libère toute la largeur (sinon le shortcode reste bridé par le max-width 1040px de .pa-page-content). */ .woocommerce-cart .pa-page-content, .woocommerce-checkout .pa-page-content { max-width: none; } /* En-tête compact : le titre « Panier » ne mange plus la moitié de l'écran */ .woocommerce-cart .pa-page { padding: 24px 0 56px; } .woocommerce-cart .pa-page h1 { font-size: 24px; margin-bottom: 6px; } /* Panier vide : message centré + nouveautés en cartes standard du thème. */ .pa-cart-empty { text-align: center; padding: 30px 0 4px; } .pa-cart-empty-icon { display: flex; justify-content: center; margin-bottom: 14px; color: var(--muted-2); } .pa-cart-empty-title { font-size: 26px; font-family: var(--font-display); margin-bottom: 10px; } .pa-cart-empty-text { color: var(--muted); margin: 0 auto 22px; max-width: 36em; line-height: 1.6; } .pa-cart-new { margin-top: 60px; } .woocommerce table.shop_table { border: none; background: none; border-collapse: collapse; width: 100%; } .woocommerce table.shop_table th { border: none; border-bottom: 1px solid var(--line-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); font-family: var(--font-mono); padding: 12px 0; font-weight: 600; } .woocommerce table.shop_table td { border: none; border-bottom: 1px solid var(--line-soft); padding: 22px 0; vertical-align: middle; color: var(--text); background: none; } .woocommerce table.shop_table td.product-name a { color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; } .woocommerce table.shop_table td.product-name a:hover { color: var(--gold); } .woocommerce table.shop_table td.product-subtotal { font-weight: 700; } .woocommerce table.shop_table a.remove { color: var(--muted) !important; font-size: 18px; } .woocommerce table.shop_table a.remove:hover { color: var(--alert) !important; background: none; } /* ── Lignes du panier : grille « maison » alignée (voir cart/cart.php) ── */ .pa-cart { margin: 0; } .pa-cart-head, .pa-cart-line { display: grid; /* Le nom du produit (1fr) reçoit le maximum de place : colonnes fixes fines */ grid-template-columns: 76px minmax(0, 1fr) 96px 116px 90px 24px; align-items: center; gap: 14px; } .pa-cart-head { padding: 0 0 12px; border-bottom: 1px solid var(--line); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); font-family: var(--font-mono); } .pa-cart-head .pa-cart-col-product { grid-column: 1 / 3; } .pa-cart-head .pa-cart-col-price, .pa-cart-head .pa-cart-col-qty, .pa-cart-head .pa-cart-col-subtotal { text-align: center; } .pa-cart-line { padding: 16px 0; border-bottom: 1px solid var(--line-soft); } .pa-cart-thumb { width: 76px; } .pa-cart-thumb img { width: 76px; height: 76px; object-fit: contain; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); } .pa-cart-name { min-width: 0; } .pa-cart-name a { color: var(--text); font-weight: 600; font-size: 15.5px; text-decoration: none; } .pa-cart-name a:hover { color: var(--gold); } .pa-cart-name .backorder_notification { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; } .pa-cart-price, .pa-cart-subtotal { text-align: center; font-size: 14.5px; color: var(--muted); white-space: nowrap; } .pa-cart-subtotal { font-weight: 700; color: var(--text); } .pa-cart-qty { display: flex; justify-content: center; } .pa-cart-qty-fixed { font-weight: 600; } .pa-cart-remove { text-align: center; } .pa-cart-remove a.remove { color: var(--muted) !important; font-size: 20px; line-height: 1; display: inline-block; text-decoration: none; transition: color .15s; } .pa-cart-remove a.remove:hover { color: var(--alert) !important; background: none; } /* Coupon + mise à jour : barre alignée sous les lignes */ .pa-cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 22px 0 0; margin-top: 4px; } .pa-cart-coupon { display: flex; gap: 10px; flex: 1; min-width: 280px; max-width: 460px; } .pa-cart-coupon .input-text { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text); border-radius: var(--r-s); padding: 12px 14px; font-family: var(--font-sans); font-size: 14.5px; } .pa-cart-coupon .input-text:focus { outline: none; border-color: var(--gold); } .pa-cart-actions button[name="update_cart"] { margin-left: auto; } /* Retour visuel du code promo sur le bouton « Appliquer » */ .pa-cart-coupon button.pa-coupon-ok { background: #3fae6b !important; border-color: #3fae6b !important; color: #fff !important; } .pa-cart-coupon button.pa-coupon-no { background: #c65449 !important; border-color: #c65449 !important; color: #fff !important; animation: paShake .38s ease; } @keyframes paShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } } /* Quantité auto-actualisée en JS : le bouton « Mettre à jour » est masqué en dur (une classe posée en JS sautait quand WooCommerce re-rend le formulaire en AJAX après un ajout depuis le panier). requestSubmit marche bouton caché. */ .woocommerce-cart .pa-cart-actions button[name="update_cart"] { display: none; } /* Panier : 2 colonnes — articles + suggestions à gauche, récap (Valider/GPay) à droite sur toute la hauteur. */ .pa-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px 36px; align-items: start; } .pa-cart-layout > .woocommerce-cart-form { grid-column: 1; grid-row: 1; } .pa-cart-layout > .pa-cart-cross { grid-column: 1; grid-row: 2; } .pa-cart-layout > .cart-collaterals { grid-column: 2; grid-row: 1 / span 2; } .woocommerce-cart .cart-collaterals { width: 100%; max-width: none; margin: 0; } .woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none; position: sticky; top: 96px; } .pa-cart-cross { margin-top: 0; } @media (max-width: 960px) { /* minmax(0,1fr) : sans ça, un contenu trop large (bouton nowrap, prix…) élargit la colonne au-delà de l'écran et tout se fait rogner à droite. */ .pa-cart-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } /* Une colonne : récap (bouton commande) AVANT les suggestions */ .pa-cart-layout > .woocommerce-cart-form, .pa-cart-layout > .pa-cart-cross, .pa-cart-layout > .cart-collaterals { grid-column: 1; grid-row: auto; } .pa-cart-layout > .cart-collaterals { order: 2; } .pa-cart-layout > .pa-cart-cross { order: 3; } .woocommerce-cart .cart-collaterals .cart_totals { position: static; } } .woocommerce .cart_totals { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; } .woocommerce .cart_totals h2 { font-size: 19px; margin-bottom: 20px; font-family: var(--font-display); } .woocommerce .cart_totals table { border: none; } .woocommerce .cart_totals table th, .woocommerce .cart_totals table td { border: none; border-bottom: 1px solid var(--line-soft); padding: 10px 0; font-size: 14.5px; color: var(--muted); background: none; } .woocommerce .cart_totals table .order-total th, .woocommerce .cart_totals table .order-total td { font-size: 17px; color: var(--text); font-weight: 700; border-bottom: none; padding-top: 16px; } .woocommerce .cart_totals .wc-proceed-to-checkout { padding-top: 18px; } /* Modes de livraison (panier + paiement) : logo transporteur + lisibilité. Version compacte : une ligne par mode (radio · logo · nom · prix à droite). */ .woocommerce ul#shipping_method, .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; } .woocommerce ul#shipping_method li, .woocommerce-shipping-methods li { display: flex; align-items: center; gap: 8px; padding: 5px 0; } .woocommerce ul#shipping_method li input[type="radio"], .woocommerce-shipping-methods li input[type="radio"] { flex: none; margin: 0; accent-color: var(--gold); } .woocommerce ul#shipping_method li label, .woocommerce-shipping-methods li label { display: flex; flex: 1; min-width: 0; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-size: 13px; line-height: 1.35; color: var(--muted); } .woocommerce ul#shipping_method li label .woocommerce-Price-amount, .woocommerce-shipping-methods li label .woocommerce-Price-amount { margin-left: auto; white-space: nowrap; font-weight: 700; color: var(--text); } .pa-ship-logo { display: inline-block; height: 18px; width: auto; vertical-align: middle; margin-right: 0; padding: 2px 4px; border-radius: 3px; background: #fff; box-sizing: border-box; flex: none; } /* La rangée « Expédition » du récap est trop étroite pour la liste des modes : libellé au-dessus, liste en pleine largeur en dessous (panier + commande). */ .woocommerce .cart_totals tr.woocommerce-shipping-totals th, .woocommerce .cart_totals tr.woocommerce-shipping-totals td, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { display: block; width: 100%; } .woocommerce .cart_totals tr.woocommerce-shipping-totals th, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th { padding: 12px 0 2px; border-bottom: 0; } .woocommerce .cart_totals tr.woocommerce-shipping-totals td, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { padding: 2px 0 12px; } /* Adresse de livraison + « Modifier l'adresse » : note discrète */ .woocommerce-shipping-destination { font-size: 12.5px; color: var(--muted-2); margin: 6px 0 0; line-height: 1.5; } .woocommerce-shipping-calculator { margin: 4px 0 0; font-size: 12.5px; } .woocommerce-shipping-calculator .shipping-calculator-button { color: var(--muted); text-decoration: underline; } .woocommerce-shipping-calculator .shipping-calculator-button:hover { color: var(--gold); } /* Panier : ligne « Expédition — calculée à la prochaine étape » */ .woocommerce .cart_totals tr.pa-ship-later th { font-weight: 600; } .pa-ship-later .pa-ship-later-txt { color: var(--muted-2); font-size: 13px; font-style: italic; text-align: right; } .woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; padding: 15px 22px; font-size: 15px; } /* Panier sur mobile : la ligne passe en bloc (miniature + détails empilés). */ @media (max-width: 720px) { .pa-cart-head { display: none; } .pa-cart-line { /* 3e colonne auto : le bouton × n'a besoin que de 28px mais le sous-total (« 100,00 € ») partage cette colonne et débordait. */ grid-template-columns: 64px minmax(0, 1fr) minmax(28px, auto); grid-template-areas: "thumb name remove" "thumb price price" "thumb qty subtotal"; gap: 6px 14px; row-gap: 10px; } .pa-cart-thumb { grid-area: thumb; width: 64px; align-self: start; } .pa-cart-thumb img { width: 64px; height: 64px; } .pa-cart-name { grid-area: name; } .pa-cart-price { grid-area: price; text-align: left; } .pa-cart-qty { grid-area: qty; justify-content: flex-start; } .pa-cart-subtotal { grid-area: subtotal; text-align: right; } .pa-cart-remove { grid-area: remove; align-self: start; text-align: right; } /* > direct : le prix promo contient un span .pa-cart-price imbriqué (filtre functions.php) qui affichait un second « : » vide. */ .pa-cart-line > .pa-cart-price::before { content: attr(data-title) " : "; color: var(--muted-2); font-size: 12px; } .pa-cart-price, .pa-cart-subtotal { font-size: 13.5px; } /* Stepper de quantité compact pour tenir dans la colonne */ .pa-cart-line .quantity.pa-stepper { height: 38px; } .pa-cart-line .pa-step { width: 30px; } .pa-cart-line .quantity.pa-stepper input.qty { width: 36px; } .pa-cart-actions { flex-direction: column; align-items: stretch; } /* Champ + bouton empilés pleine largeur : le bouton « Appliquer le code promo » débordait de l'écran quand il restait sur la même ligne. */ .pa-cart-coupon { max-width: none; min-width: 0; flex-direction: column; align-items: stretch; } .pa-cart-coupon button { width: 100%; } .pa-cart-actions button[name="update_cart"] { margin-left: 0; } .woocommerce-cart .cart-collaterals { max-width: none; } } .woocommerce .quantity input.qty { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-s); padding: 8px 12px; font-family: var(--font-sans); font-size: 15px; width: 70px; text-align: center; } /* Sélecteur de quantité +/- : remplace les flèches natives sur les champs WooCommerce (.quantity input.qty) — fiche produit et panier. Les boutons sont injectés par JS (voir footer.php), qui ajoute la classe .pa-stepper. */ .quantity.pa-stepper { display: inline-flex; align-items: stretch; width: auto; height: 46px; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: var(--surface-2); } .quantity.pa-stepper input.qty { width: 46px; height: 100%; border: 0; border-radius: 0; padding: 0; background: transparent; text-align: center; color: var(--text); font-family: var(--font-sans); font-size: 15px; -moz-appearance: textfield; appearance: textfield; } .quantity.pa-stepper input.qty::-webkit-outer-spin-button, .quantity.pa-stepper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pa-step { width: 38px; flex: none; border: 0; background: transparent; cursor: pointer; color: var(--text); font-size: 18px; line-height: 1; font-family: var(--font-sans); display: grid; place-items: center; transition: background .12s, color .12s; } .pa-step:hover { background: var(--surface); color: var(--gold); } .pa-step-minus { border-right: 1px solid var(--line-soft); } .pa-step-plus { border-left: 1px solid var(--line-soft); } /* Validation « Ajouter au panier » : bascule au vert, sans changement de taille */ .single_add_to_cart_button.pa-added { background: #3fae6b !important; color: #fff !important; transition: background .2s ease, color .2s ease; } .single_add_to_cart_button.pa-loading { opacity: .75; pointer-events: none; } /* Achat rapide : overlay plein écran (Élector si PNG, sinon coche verte) */ .pa-qb-fx { position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; pointer-events: none; background: rgba(17, 17, 19, .55); } .pa-qb-poke { width: min(46vw, 320px); height: auto; } .pa-qb-check { width: 120px; height: 120px; border-radius: 50%; background: #3fae6b; display: grid; place-items: center; } .pa-qb-check::before { content: "\2713"; color: #fff; font-size: 64px; font-weight: 800; line-height: 1; } /* Effet éclair (achat rapide avec Élector) */ .pa-qb-electric .pa-qb-poke { position: relative; z-index: 2; } .pa-qb-flash { position: absolute; inset: 0; z-index: 1; background: #fff; opacity: 0; animation: paQbFlash .9s ease both; } .pa-qb-bolts { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; } .pa-qb-bolts polyline { fill: none; stroke: #ffe24a; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; opacity: 0; animation: paQbBolt .9s linear both; } .pa-qb-bolts polyline:nth-child(2) { animation-delay: .06s; } .pa-qb-bolts polyline:nth-child(3) { animation-delay: .12s; } @keyframes paQbFlash { 0% { opacity: 0; } 6% { opacity: .85; } 14% { opacity: 0; } 34% { opacity: .55; } 42% { opacity: 0; } 100% { opacity: 0; } } @keyframes paQbBolt { 0% { opacity: 0; } 18% { opacity: 1; } 26% { opacity: 0; } 44% { opacity: 1; } 52% { opacity: 0; } 66% { opacity: 1; } 74% { opacity: 0; } 100% { opacity: 0; } } /* ── Bandeau cookies (solution maison, voir inc/cookie-consent.php) ── Petite carte compacte en bas à gauche (plus de bandeau pleine largeur). */ .pa-cookie { position: fixed; left: 16px; right: auto; bottom: 16px; z-index: 10000; padding: 0; width: min(340px, calc(100vw - 32px)); } .pa-cookie[hidden] { display: none; } .pa-cookie-box { max-width: none; margin: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .pa-cookie-main { flex: none; min-width: 0; } .pa-cookie-text { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; } .pa-cookie-text a { color: var(--gold); } .pa-cookie-cats { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .pa-cookie-cat { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--r-s); } .pa-cookie-cat span { display: flex; flex-direction: column; gap: 1px; } .pa-cookie-cat strong { font-size: 13px; } .pa-cookie-cat small { color: var(--muted-2); font-size: 11.5px; } .pa-cookie-cat input { width: 17px; height: 17px; flex: none; accent-color: var(--gold); } .pa-cookie-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .pa-cookie-actions .pa-btn { padding: 8px 10px; font-size: 12.5px; flex: 1; } .pa-cookie-actions .pa-cookie-custom { flex-basis: 100%; order: 3; text-align: center; } .pa-cookie-custom { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 12.5px; color: var(--muted); text-decoration: underline; cursor: pointer; } .pa-cookie-custom:hover { color: var(--gold); } .pa-cookie-manage { display: block; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; text-decoration: none; } .pa-cookie-manage:hover { color: var(--gold); } @media (max-width: 720px) { .pa-cookie { left: 8px; bottom: 8px; width: min(340px, calc(100vw - 16px)); } .pa-cookie-box { padding: 12px; gap: 8px; } } /* ---------------- CHECKOUT WooCommerce ---------------- */ .woocommerce-checkout .woocommerce { padding: 40px 0 80px; } .woocommerce-checkout h3 { font-size: 20px; font-family: var(--font-display); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); } .woocommerce form .form-row label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .07em; font-family: var(--font-mono); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea { background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text); border-radius: var(--r-s); padding: 12px 14px; font-family: var(--font-sans); font-size: 15px; width: 100%; transition: border-color .15s; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row select:focus, .woocommerce form .form-row textarea:focus { outline: none; border-color: var(--gold); } .woocommerce-checkout #order_review { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; } .woocommerce-checkout #payment { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin-top: 20px; } .woocommerce-checkout #payment ul.payment_methods { padding: 0; border: none; } .woocommerce-checkout #payment ul.payment_methods li { padding: 14px 0; border-bottom: 1px solid var(--line-soft); } .woocommerce-checkout #payment div.place-order { padding-top: 20px; } /* ---------------- NOTICES WooCommerce ---------------- Discrètes : simple ligne de texte, sans encadré ni fond. */ .woocommerce-message, .woocommerce-info, .woocommerce-error { background: none; border: 0; border-radius: 0; padding: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; margin-bottom: 18px; list-style: none; } .woocommerce-error { color: #dd7a6c; } .woocommerce-error li { margin: 3px 0; } /* Partie mise en avant d'une notice (ex. montant du cashback) */ .woocommerce-message strong, .woocommerce-info strong { color: var(--text); font-weight: 700; } /* Lien « Annuler » de la notif de suppression (« test 2 » supprimé. Annuler) : en gras. */ .woocommerce-message .restore-item, a.restore-item { font-weight: 700; } /* ---------------- FOOTER ---------------- */ .pa-footer { border-top: 1px solid var(--line-soft); background: var(--surface); } .pa-footer-in { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; padding: 60px 40px 40px; max-width: var(--shell); margin: 0 auto; } .pa-footer-brand p { color: var(--muted); font-size: 14px; margin-top: 14px; max-width: 24em; line-height: 1.6; } .pa-footer-cardmarket { display: inline-flex; align-items: center; margin-top: 18px; padding: 12px 22px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--line-soft); transition: border-color .15s; } .pa-footer-cardmarket:hover { border-color: var(--gold); } .pa-footer-cardmarket img { display: block; height: 28px; width: auto; max-width: none; } .pa-footer-mail { display: inline-block; margin-top: 16px; font-size: 15px; color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; } .pa-footer-mail:hover { border-bottom-color: var(--gold); } .pa-footer-pay { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } /* Badges de paiement : chaque logo porte SA couleur de marque (chips autonomes) -> lisibles en thème clair ET sombre, sans tuile blanche commune. */ .pa-pay { height: 28px; min-width: 44px; padding: 0 10px; border-radius: var(--r-s); display: inline-flex; align-items: center; justify-content: center; } .pa-pay svg { display: block; } .pa-pay--cb { background: linear-gradient(120deg, #002277 0 50%, #16A04A 50% 100%); } .pa-pay--visa { background: #1434CB; } .pa-pay--mc { background: #1a1a1a; } .pa-pay--paypal { background: #003087; } .pa-pay--klarna { background: #FFB3C7; } .pa-pay-cb, .pa-pay-visa, .pa-pay-paypal { font-family: Arial, Helvetica, sans-serif; font-style: italic; font-weight: 800; } .pa-pay-cb { color: #fff; font-size: 11px; letter-spacing: .3px; } .pa-pay-visa { color: #fff; font-size: 13px; letter-spacing: .5px; } .pa-pay-paypal { font-size: 12px; } .pa-pay-paypal em { color: #fff; font-style: inherit; } .pa-pay-paypal i { color: #6fc4ee; font-style: inherit; } .pa-pay-klarna-txt { font-family: Arial, Helvetica, sans-serif; font-weight: 800; font-size: 12px; color: #17120F; } .pa-footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .pa-footer-cols h4 { font-size: 16px; text-transform: none; letter-spacing: .01em; color: var(--text); margin-bottom: 14px; font-family: var(--font-display); font-style: italic; font-weight: 600; } .pa-footer-cols a { display: block; font-size: 14px; color: var(--muted); padding: 5px 0; } .pa-footer-cols a:hover { color: var(--text); } .pa-footer-legal { padding: 22px 40px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted-2); max-width: var(--shell); margin: 0 auto; } /* ---------------- PAGES GÉNÉRIQUES ---------------- */ .pa-page { padding: 44px 0 72px; } .pa-page h1 { font-size: clamp(26px, 3vw, 40px); font-family: var(--font-display); font-weight: 600; margin-bottom: 24px; } .pa-page-content { color: var(--muted); font-size: 16px; line-height: 1.8; max-width: 1040px; } /* Pages riches/interactives : ajouter la classe .is-wide pour libérer la largeur. */ .pa-page-content.is-wide { max-width: none; } .pa-page-content h2 { font-size: 24px; color: var(--text); margin: 32px 0 12px; font-family: var(--font-display); } .pa-page-content h3 { font-size: 18px; color: var(--text); margin: 24px 0 10px; font-family: var(--font-display); font-weight: 600; } .pa-page-content p { margin-bottom: 16px; } /* Liens en surbrillance : uniquement dans la prose (paragraphes, listes, titres, tableaux). On évite ainsi de teinter/souligner les liens et boutons des pages WooCommerce rendues via [shortcode] dans .pa-page-content (panier, compte) : noms de produits, « Valider la commande », « Retour à la boutique », etc. */ .pa-page-content :is(p, li, h2, h3, h4, blockquote, dd, figcaption) a { color: var(--gold); text-decoration: underline; } .pa-page-content strong { color: var(--text); font-weight: 600; } .pa-page-content ul, .pa-page-content ol { list-style: revert; padding-left: 22px; margin: 0 0 16px; } .pa-page-content li { margin-top: 8px; } .pa-page-content table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; } .pa-page-content th, .pa-page-content td { text-align: left; padding: 10px 12px; border: 1px solid var(--line-soft, rgba(0,0,0,.12)); vertical-align: top; } .pa-page-content th { color: var(--text); font-weight: 600; } .pa-page-content .pa-legal-note { font-size: 14px; opacity: .85; border-left: 3px solid var(--gold); padding: 12px 16px; margin: 0 0 24px; background: rgba(0,0,0,.02); } .pa-page-content .pa-legal-updated { font-size: 14px; opacity: .7; margin-bottom: 28px; } /* Account */ .woocommerce-account .woocommerce { padding: 40px 0 80px; } /* « Mon compte » n'est pas un article : on libère la largeur (sinon le contenu reste bridé à 72ch via .pa-page-content → grille 2×2 trop étroite). */ .woocommerce-account .pa-page-content { max-width: none; } /* Lien de retour affiché en haut des sous-pages (à la place du menu) */ .pa-account-back { margin: 0 0 26px; } .pa-account-back a { color: var(--muted); font-size: 14px; font-weight: 600; transition: color .15s; } .pa-account-back a:hover { color: var(--gold); } .woocommerce-account .woocommerce-MyAccount-navigation { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 20px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { padding: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 14px; color: var(--muted); font-size: 14px; border-radius: var(--r-s); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--gold); background: var(--surface); } /* Case « utiliser aussi cette adresse comme … » */ .pa-addr-copy-field { margin: 6px 0 22px; } .woocommerce form .pa-addr-copy-field label, .pa-addr-copy-field label { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--text); font-size: 14px; cursor: pointer; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); } .pa-addr-copy-field input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); cursor: pointer; } /* Sélecteur pays / région (select2) au thème sombre */ .select2-container--default .select2-selection--single { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-s); height: 49px; display: flex; align-items: center; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); line-height: 1.4; padding-left: 14px; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted-2); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 47px; right: 10px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--muted-2) transparent transparent; } .select2-container--open.select2-container--default .select2-selection--single { border-color: var(--gold); } .select2-dropdown { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--r); overflow: hidden; } .select2-container--default .select2-results__option { color: var(--text); background: var(--surface-2); font-size: 14px; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted { background: var(--gold); color: var(--on-accent); } .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--surface); color: var(--gold); } .select2-search--dropdown { padding: 8px; } .select2-search--dropdown .select2-search__field { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-s); padding: 8px 10px; } /* Tableau de bord Mon compte (page unique, sans menu) */ .pa-account-dashboard { width: 100%; } /* Tableau de bord en grille : 2 fonctionnalités par ligne (carrés 2×2) */ .pa-account { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; align-items: start; } .pa-account-block { min-width: 0; } .pa-account-logout { grid-column: 1 / -1; margin-top: 6px; } /* Écran trop petit : on repasse en une seule colonne (1 à 1) */ @media (max-width: 760px) { .pa-account { grid-template-columns: 1fr; gap: 36px; } } .pa-account-block-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .pa-account-block-head h2 { font-family: var(--font-display); font-size: 25px; font-weight: 600; } .pa-account-block-head h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; } .pa-account-edit { color: var(--gold); font-size: 13px; font-weight: 700; white-space: nowrap; } .pa-account-edit:hover { text-decoration: underline; } .pa-account-card { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 16px 18px; } .pa-account-name { font-size: 17px; font-weight: 700; } .pa-account-email { color: var(--muted); font-size: 14px; margin-top: 4px; } .pa-account-pwd { display: inline-block; margin-top: 10px; color: var(--gold); font-size: 13px; font-weight: 700; } .pa-account-pwd:hover { text-decoration: underline; } /* Dernières commandes : liste ligne par ligne (sans encadré ni tableau) */ .pa-orders-list { display: flex; flex-direction: column; } .pa-order-row { display: flex; align-items: center; gap: 16px; padding: 15px 4px; border-bottom: 1px solid var(--line-soft); color: var(--text); text-decoration: none; transition: padding-left .15s ease, color .15s ease; } .pa-order-row:last-child { border-bottom: none; } .pa-order-row:hover { padding-left: 8px; } .pa-order-num { font-weight: 700; font-size: 14.5px; min-width: 64px; } .pa-order-date { color: var(--muted); font-size: 14px; } .pa-order-status { margin-left: auto; } .pa-order-total { font-weight: 700; font-size: 14.5px; white-space: nowrap; } .pa-order-arrow { color: var(--gold); font-weight: 700; } .pa-order-row:hover .pa-order-arrow { color: var(--gold); } /* Page « Détail de commande » : pas de surlignage jaune des , juste du gras ; le statut prend une couleur cohérente (thème sombre + clair). */ .woocommerce mark, .woocommerce-account mark { background: transparent; color: inherit; font-weight: 700; } .pa-od-num, .pa-od-date { font-weight: 700; color: var(--text); } .pa-od-status { font-weight: 700; } .pa-od-status.status-completed { color: var(--up); } .pa-od-status.status-processing, .pa-od-status.status-on-hold, .pa-od-status.status-pending { color: var(--gold); } .pa-od-status.status-cancelled, .pa-od-status.status-failed, .pa-od-status.status-refunded { color: #e0796b; } .pa-order-status { display: inline-block; padding: 4px 11px; border-radius: var(--r-s); font-size: 11.5px; font-weight: 700; background: var(--surface); color: var(--muted); } .pa-order-status.status-completed { color: var(--up); } .pa-order-status.status-processing, .pa-order-status.status-on-hold { color: var(--gold); } .pa-order-status.status-cancelled, .pa-order-status.status-failed, .pa-order-status.status-refunded { color: #e0796b; } .pa-account-empty { text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; color: var(--muted); } /* Facturation + livraison côte à côte seulement si chaque carte a ≥ 250px, sinon repli automatique en une colonne (évite le chevauchement titre/lien) */ .pa-account-addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 12px; } .pa-account-address .pa-account-block-head { margin-bottom: 8px; align-items: baseline; } .pa-account-address h3 { line-height: 1.3; } .pa-account-address address { font-style: normal; color: var(--muted); font-size: 13.5px; line-height: 1.6; } .pa-account-logout a { color: var(--muted); font-size: 14px; font-weight: 600; } .pa-account-logout a:hover { color: var(--gold); } /* Bloc cagnotte du tableau de bord */ /* Bloc cagnotte : pas d'encadré, juste le texte + le bouton */ .pa-account-wallet { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: none; border: none; padding: 0; } /* Texte foncé garanti sur le bouton or (un style externe le passait en or). */ .woocommerce-account .pa-account-wallet a.pa-btn-gold { color: var(--on-accent) !important; } /* Une seule ligne : « Ma cagnotte : X € » + bouton à droite */ .pa-account-wallet-line { font-family: var(--font-display); font-size: 25px; font-weight: 600; } .pa-account-wallet-amount { color: var(--gold); font-weight: 700; } .pa-account-wallet .pa-btn { flex: none; } @media (max-width: 460px) { .pa-account-wallet { flex-direction: column; align-items: stretch; } .pa-account-wallet .pa-btn { width: 100%; } } @media (max-width: 620px) { /* Commandes : 2 lignes (n° + statut / date + total) */ .pa-order-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "num status" "date total"; gap: 4px 12px; align-items: center; } .pa-order-row:hover { padding-left: 4px; } .pa-order-num { grid-area: num; min-width: 0; } .pa-order-status { grid-area: status; margin-left: 0; justify-self: end; } .pa-order-date { grid-area: date; } .pa-order-total { grid-area: total; justify-self: end; } .pa-order-arrow { display: none; } } /* ========================================================= CAGNOTTE — TeraWallet (page « Ma cagnotte » de Mon compte) Affichage simplifié : solde + historique, aux couleurs Pok'Antho. Cible la vraie structure du plugin (wc-endpoint-wallet.php + dashboard.php) : .woo-wallet-balance-card et la liste .ww-txn-*. La carte solde et le tableau sont surchargés ; les onglets et les « stat cards » sont masqués (en plus du template surchargé, par sécurité si le cache sert encore l'ancien rendu). ========================================================= */ .woocommerce-account .woo-wallet-my-wallet-container { display: flex; flex-direction: column; gap: 28px; color: var(--text); font-family: var(--font-sans); } /* Éléments retirés dans la version simplifiée */ .woocommerce-account .woo-wallet-nav-tabs, .woocommerce-account .woo-wallet-stats-grid, .woocommerce-account .woo-wallet-header p { display: none !important; } /* ── Cartes solde + économies (côte à côte) ────────────── */ .woocommerce-account .woo-wallet-top-section { display: flex; flex-wrap: wrap; gap: 24px 56px; } .woocommerce-account .woo-wallet-balance-card { background: none !important; border: none !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; } .woocommerce-account .pa-wallet-savings .woo-wallet-price { color: var(--up) !important; } .woocommerce-account .woo-wallet-balance-card h3 { margin: 0; font-family: var(--font-mono); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) !important; } .woocommerce-account .woo-wallet-balance-card .woo-wallet-price { margin: 2px 0 0; color: var(--gold) !important; font-family: var(--font-display); font-weight: 700; line-height: 1.05; font-size: clamp(28px, 3.6vw, 38px); } .woocommerce-account .woo-wallet-balance-card .woo-wallet-balance-note { font-size: 13px; color: var(--muted); } /* ── Historique des transactions ───────────────────────── */ .woocommerce-account .woo-wallet-transactions-list { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 22px 24px; } .woocommerce-account .ww-txn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .woocommerce-account .ww-txn-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 19px; } .woocommerce-account .ww-txn-meta { display: none; } /* « Last 3 » non traduit (ngettext) */ .woocommerce-account .ww-txn-table { display: flex; flex-direction: column; } .woocommerce-account .ww-txn-row { display: grid; grid-template-columns: minmax(96px, auto) 1fr minmax(96px, auto) minmax(88px, auto); gap: 16px; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--line-soft); } .woocommerce-account .ww-txn-row:last-child { border-bottom: none; } .woocommerce-account .ww-txn-row--head { padding-top: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); } .woocommerce-account .ww-txn-row--head .ww-txn-cell { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); } .woocommerce-account .ww-txn-cell { font-size: 14px; } .woocommerce-account .ww-txn-cell--date { color: var(--muted); white-space: nowrap; } .woocommerce-account .ww-txn-cell--desc { color: var(--text); } .woocommerce-account .ww-txn-cell--amount { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .woocommerce-account .ww-txn-cell--amount.credit { color: var(--up); } .woocommerce-account .ww-txn-cell--amount.debit { color: var(--text); } /* Badges de catégorie */ .woocommerce-account .ww-txn-badge { display: inline-block; padding: 4px 10px; border-radius: var(--r-s); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; } .woocommerce-account .ww-txn-badge--success, .woocommerce-account .ww-txn-badge--teal { color: var(--up); background: color-mix(in oklab, var(--up) 16%, transparent); } .woocommerce-account .ww-txn-badge--danger, .woocommerce-account .ww-txn-badge--warning { color: var(--alert); background: color-mix(in oklab, var(--alert) 16%, transparent); } .woocommerce-account .ww-txn-badge--brand, .woocommerce-account .ww-txn-badge--accent, .woocommerce-account .ww-txn-badge--info { color: var(--gold); background: color-mix(in oklab, var(--gold) 18%, transparent); } .woocommerce-account .ww-txn-badge--neutral { color: var(--muted); background: var(--surface); } .woocommerce-account .ww-txn-empty { margin: 0; padding: 8px 2px; color: var(--muted); font-size: 14px; } /* Mobile : 2 colonnes compactes, en-tête masqué */ @media (max-width: 600px) { .woocommerce-account .ww-txn-row { grid-template-columns: 1fr auto; gap: 4px 14px; } .woocommerce-account .ww-txn-row--head { display: none; } .woocommerce-account .ww-txn-cell--desc { grid-column: 1; grid-row: 1; } .woocommerce-account .ww-txn-cell--amount { grid-column: 2; grid-row: 1; } .woocommerce-account .ww-txn-cell--date { grid-column: 1; grid-row: 2; font-size: 12px; } .woocommerce-account .ww-txn-cell--type { grid-column: 2; grid-row: 2; justify-self: end; } } /* ---------------- RESPONSIVE ---------------- */ @media (max-width: 980px) { .pa-shell { padding: 0 24px; } .pa-hero-in { grid-template-columns: 1fr; gap: 40px; } .pa-hero-media { max-width: 420px; } .pa-pdp-grid { grid-template-columns: 1fr; gap: 32px; } .pa-pdp-gallery { position: static; } .pa-grid-3 { grid-template-columns: repeat(2, 1fr); } .pa-grid-4 { grid-template-columns: repeat(3, 1fr); } .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } .pa-trust-in { grid-template-columns: 1fr; gap: 16px; padding: 24px; } .pa-footer-in { grid-template-columns: 1fr; gap: 36px; } } /* En-tête : la nav (7 entrées) + recherche + actions ne tiennent pas sur une ligne en dessous de ~1280px. On bascule alors en menu burger (panier + compte en icônes) pour que le panier reste TOUJOURS visible et ne déborde plus. */ @media (max-width: 1280px) { /* Panier : icône + pastille du nombre (le texte « Panier » débordait) */ .pa-cart-label { display: none; } .pa-cart-ic { display: inline-block; } .pa-cart-btn { position: relative; width: 40px; padding: 0; justify-content: center; } .pa-cart-btn .pa-cart-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; font-size: 10px; box-shadow: none; } /* --- Menu mobile : burger (à gauche, à la place du « P ») + panneau --- */ .pa-burger { display: inline-flex; } .pa-logo-mark { display: none; } /* le burger remplace le « P » */ .pa-header-in { gap: 14px; } .pa-header-actions { gap: 8px; } .pa-account-menu { display: none; } /* menu déroulant -> inutile au tactile (évite un débordement) */ .pa-account-btn { display: none; } /* bouton texte -> icône */ .pa-header-actions .pa-theme-toggle { display: none; } /* toggle thème -> dans le burger */ .pa-account-icon { display: inline-flex; } /* accès compte en haut à droite */ .pa-nav-theme { display: block; } /* toggle thème en haut du burger */ .pa-nav-theme .pa-theme-toggle { width: 100%; height: auto; justify-content: flex-start; gap: 12px; padding: 14px 2px; border: 0; border-radius: 0; color: var(--text); } .pa-nav-theme .pa-theme-toggle svg { width: 20px; height: 20px; } .pa-theme-label { font-size: 16px; } .pa-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px 24px 14px; background: var(--surface); border-bottom: 1px solid var(--line-soft); max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain; } .pa-header.is-open .pa-nav { display: flex; } .pa-nav > li { width: 100%; border-bottom: 1px solid var(--line-soft); } .pa-nav > li:last-child { border-bottom: 0; } .pa-nav a { display: block; padding: 13px 2px; font-size: 16px; color: var(--text); } .pa-nav-mobile-only { display: block; } /* sous-menus repliés par défaut (accordéon) — chevron pour ouvrir */ .pa-nav > li.pa-has-sub { display: flex; flex-wrap: wrap; align-items: center; } .pa-nav > li.pa-has-sub > .pa-nav-link { flex: 1; } .pa-nav .pa-has-sub > .pa-nav-link::after { display: none; } .pa-sub-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 46px; background: none; border: 0; color: var(--muted); cursor: pointer; } .pa-sub-toggle svg { width: 16px; height: 16px; transition: transform .2s; } .pa-has-sub.is-sub-open .pa-sub-toggle svg { transform: rotate(180deg); } .pa-submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; min-width: 0; flex-basis: 100%; padding: 0 0 8px 12px; display: none; } .pa-has-sub.is-sub-open > .pa-submenu { display: block; } .pa-submenu a { padding: 9px 2px; font-size: 14.5px; color: var(--muted); } } /* En-tête intermédiaire (1281–1560px) : la nav horizontale tient encore, mais « Mon compte » et « Panier » passent en icônes et la recherche se resserre, sinon la ligne déborde et le panier sort de l'écran. */ @media (min-width: 1281px) and (max-width: 1560px) { .pa-header-in { gap: 16px; } .pa-nav { gap: 15px; } .pa-search-panel { width: clamp(180px, 15vw, 240px); } .pa-account-menu, .pa-account-btn { display: none; } /* « Mon compte » texte -> icône */ .pa-account-icon { display: inline-flex; } .pa-cart-label { display: none; } /* « Panier » texte -> icône + pastille */ .pa-cart-ic { display: inline-block; } .pa-cart-btn { position: relative; width: 40px; padding: 0; justify-content: center; } .pa-cart-btn .pa-cart-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; font-size: 10px; } } @media (max-width: 760px) { .pa-grid-4 { grid-template-columns: repeat(2, 1fr); } .pa-header-search input[type="search"], .pa-header-search input[type="search"]:focus { width: 150px; } } @media (max-width: 620px) { .pa-grid-3, .pa-grid-2 { grid-template-columns: repeat(2, 1fr); } .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } .pa-shop-results .pa-grid { grid-template-columns: repeat(2, 1fr); } /* catégorie : 2 par ligne */ .pa-footer-cols { grid-template-columns: 1fr; } .pa-header-search { display: none; } /* barre du haut compacte : logo + thème + panier + burger */ .pa-card-buy { padding: 8px 0 0; min-width: 0; } /* « Ajouter au panier » doit tenir dans les petites cartes : icône masquée, police réduite, pas de débordement du rectangle. */ .pa-card-add { font-size: 11.5px; padding: 9px 6px; gap: 5px; min-width: 0; } .pa-card-add svg { display: none; } .pa-qty-btn { width: 34px; height: 32px; } } @media (max-width: 480px) { .pa-shell { padding: 0 16px; } /* Sur très petit écran, la barre devient une icône (l'input se déplie au focus) */ .pa-header-search input[type="search"] { width: 40px; padding-left: 38px; padding-right: 0; } .pa-header-search input[type="search"]:focus { width: 170px; padding-right: 14px; } } /* ========================================================= FILTRES & TRI BOUTIQUE ========================================================= */ /* Form englobant de la boutique */ .pa-shop-form { display: flex; flex-direction: column; gap: 20px; } /* Barre du haut : recherche + tri + effacer — posée sur le fond, sans encadré */ .pa-shop-top { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; } /* Corps : colonne de gauche (filtres) + résultats. Colonne dé-boîtée : les filets des groupes suffisent à la structurer. */ .pa-shop-body { display: flex; align-items: flex-start; gap: 34px; } .pa-shop-aside { flex: none; width: 250px; position: sticky; top: 88px; } .pa-aside-title { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); padding: 12px 4px 4px; } .pa-shop-results { flex: 1; min-width: 0; } .pa-shop-results .pa-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } /* Description de catégorie : placée tout en bas (sous les produits) pour ne pas décaler les filtres/la grille. Texte SEO discret, lisible. */ .pa-shop-desc { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line-soft); max-width: 820px; color: var(--muted); font-size: 14.5px; line-height: 1.7; } .pa-shop-desc h1, .pa-shop-desc h2, .pa-shop-desc h3 { color: var(--text); line-height: 1.3; margin: 1.4em 0 .5em; } .pa-shop-desc h2 { font-size: 19px; } .pa-shop-desc h3 { font-size: 16px; } .pa-shop-desc :first-child { margin-top: 0; } .pa-shop-desc p { margin: 0 0 1em; } .pa-shop-desc a { color: var(--gold); } .pa-shop-desc ul, .pa-shop-desc ol { margin: 0 0 1em; padding-left: 1.3em; } /* Mobile : produits en 2 colonnes (2×2) plutôt qu'en file indienne. (placé après la règle de base pour gagner la cascade) */ @media (max-width: 620px) { .pa-shop-results .pa-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } /* Champ de recherche */ .pa-filter-search { position: relative; display: flex; align-items: center; flex: 1; min-width: 240px; } .pa-filter-search-ic { position: absolute; left: 16px; color: var(--muted-2); pointer-events: none; } .pa-filter-input { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-s); padding: 14px 130px 14px 46px; font-family: var(--font-sans); font-size: 15px; transition: border-color .15s, box-shadow .15s; } .pa-filter-input::placeholder { color: var(--muted-2); } .pa-filter-input:focus { outline: none; border-color: var(--gold); box-shadow: none; } .pa-filter-search-go { position: absolute; right: 6px; top: 6px; bottom: 6px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: none; border-radius: var(--r-s); cursor: pointer; background: var(--gold); color: var(--on-accent); font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; letter-spacing: .01em; transition: background .15s; } .pa-filter-search-go:hover { background: var(--gold-hover); } /* Champ « Trier par » (réutilise le style de select natif) */ .pa-filter-field { display: flex; flex-direction: column; gap: 6px; } .pa-filter-field > span { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-2); } .pa-filter-field select { width: 100%; background-color: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-s); padding: 12px 38px 12px 14px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; color-scheme: dark; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8275' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; transition: border-color .15s; } .pa-filter-field select:focus { outline: none; border-color: var(--gold); } .pa-filter-field select option { background: var(--surface-2); color: var(--text); } .pa-filter-sort { flex: none; width: 210px; } /* Effacer les filtres */ .pa-filter-reset { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; padding-bottom: 12px; } .pa-filter-reset:hover { color: var(--gold); } .pa-filter-reset[aria-disabled] { opacity: .4; pointer-events: none; } /* Masquer/afficher le panneau des filtres (les filtres cochés restent actifs) */ .pa-filter-toggle { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; white-space: nowrap; color: var(--muted); font-family: var(--font-sans); font-size: 13px; font-weight: 600; padding: 0 0 12px; } .pa-filter-toggle:hover { color: var(--gold); } /* Grand écran : les filtres sont toujours ouverts à gauche — le bouton masquer/afficher et l'état « caché » n'existent que sur petit écran. */ @media (min-width: 901px) { .pa-filter-toggle { display: none; } } @media (max-width: 900px) { .pa-shop-form.pa-filters-hidden .pa-shop-aside { display: none; } } /* Sans JS le bouton ne peut rien faire : on le cache */ .pa-shop-form:not(.pa-js) .pa-filter-toggle { display: none; } /* Groupe de filtre (accordéon) dans la colonne de gauche */ .pa-fg { border-top: 1px solid var(--line-soft); } .pa-fg-head { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 4px; font-size: 14.5px; font-weight: 700; color: var(--text); } .pa-fg-head::-webkit-details-marker { display: none; } .pa-fg-body { padding: 0 0 12px; display: flex; flex-direction: column; gap: 2px; } .pa-fg[open] .pa-dd-caret { transform: rotate(-135deg); margin-top: 2px; } .pa-dd-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: var(--r-s); background: var(--gold); color: var(--on-accent); font-style: normal; font-size: 11px; font-weight: 800; } .pa-dd-caret { width: 8px; height: 8px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); margin-top: -3px; flex: none; transition: transform .15s; } .pa-check { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--r-s); font-size: 14px; color: var(--muted); cursor: pointer; } .pa-check:hover { background: var(--surface-2); color: var(--text); } .pa-check input { width: 16px; height: 16px; accent-color: var(--gold); flex: none; } .pa-check.is-hidden { display: none; } .pa-check-all { font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line-soft); border-radius: 0; margin-bottom: 4px; padding-bottom: 9px; } .pa-aside-apply { width: 100%; margin-top: 14px; } /* Auto-application active (JS) : le bouton « Appliquer » devient inutile */ .pa-shop-form.pa-js .pa-aside-apply { display: none; } /* Rafraîchissement transparent de la grille */ .pa-shop-results.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s; } /* Boutique : remonter la zone filtres (plus de gros titre) */ .pa-page.pa-shop { padding-top: 26px; } @media (max-width: 900px) { .pa-shop-body { flex-direction: column; } .pa-shop-aside { width: 100%; position: static; } } @media (max-width: 760px) { .pa-filter-sort { width: 100%; flex: 1 1 100%; } } @media (max-width: 620px) { .pa-filter-search { min-width: 100%; } } /* ========================================================= ACTUALITÉS — Articles / Blog ========================================================= */ .pa-news { padding: 56px 0 90px; } .pa-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; } /* Carte article */ .pa-article-card { display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; text-decoration: none; transition: transform .15s, border-color .15s; } .pa-article-card:hover { transform: translateY(-3px); border-color: var(--line); } .pa-article-card-media { aspect-ratio: 16 / 10; background: var(--surface); overflow: hidden; } .pa-article-card-media img { width: 100%; height: 100%; object-fit: cover; } .pa-article-card-ph { width: 100%; height: 100%; background: var(--surface-2); } .pa-article-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .pa-article-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-sans); font-size: 12.5px; text-transform: none; letter-spacing: .02em; color: var(--muted-2); } .pa-article-cat { color: var(--gold); } .pa-article-card-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.25; } .pa-article-card:hover .pa-article-card-title { color: var(--gold); } .pa-article-card-excerpt { color: var(--muted); font-size: 14px; line-height: 1.6; } .pa-article-readmore { margin-top: auto; padding-top: 8px; color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 6px; } .pa-article-readmore svg { width: 14px; height: 14px; flex: none; transition: transform .18s ease; } .pa-article-card:hover .pa-article-readmore svg { transform: translateX(3px); } /* Accueil — dernières actualités : 1 article mis en avant (image filetée, texte posé sur le fond) + liste éditoriale à filets fins, pas de boîtes. */ .pa-home-news { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; margin-top: 24px; align-items: start; } .pa-news-lead { display: block; text-decoration: none; color: var(--text); } .pa-news-lead-media { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--surface); transition: border-color .18s; } .pa-news-lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .pa-news-lead:hover .pa-news-lead-media { border-color: var(--line); } .pa-news-lead:hover .pa-news-lead-media img { transform: scale(1.03); } .pa-news-lead-body { padding: 16px 2px 0; display: flex; flex-direction: column; gap: 9px; } .pa-news-lead-title { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 27px); font-weight: 600; line-height: 1.2; color: var(--text); transition: color .15s; } .pa-news-lead:hover .pa-news-lead-title { color: var(--gold); } .pa-news-lead-excerpt { color: var(--muted); font-size: 14.5px; line-height: 1.65; } .pa-news-list { display: flex; flex-direction: column; } .pa-news-row { display: flex; flex-direction: column; gap: 6px; padding: 16px 2px; border-top: 1px solid var(--line-soft); text-decoration: none; color: var(--text); } .pa-news-list .pa-news-row:first-child { border-top: 0; padding-top: 4px; } .pa-news-row-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-family: var(--font-display); font-size: 17.5px; font-weight: 600; line-height: 1.3; transition: color .15s; } .pa-news-row-title svg { width: 15px; height: 15px; flex: none; align-self: center; color: var(--gold); transition: transform .18s ease; } .pa-news-row:hover .pa-news-row-title { color: var(--gold); } .pa-news-row:hover .pa-news-row-title svg { transform: translateX(3px); } .pa-news-all .pa-news-row-title { font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--gold); } @media (max-width: 980px) { .pa-home-news { grid-template-columns: 1fr; gap: 28px; } } /* Article seul */ .pa-article { padding: 48px 0 90px; } .pa-article-head { max-width: 760px; margin: 0 auto 36px; text-align: center; } .pa-article-head .pa-article-meta { justify-content: center; margin-bottom: 16px; } .pa-article-title { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; line-height: 1.18; color: var(--text); } .pa-article-cover { max-width: 980px; margin: 0 auto 40px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-soft); } .pa-article-cover img { width: 100%; display: block; } .pa-article-content { max-width: 760px; margin: 0 auto; color: var(--text); font-size: 17px; line-height: 1.8; } .pa-article-content > * + * { margin-top: 22px; } .pa-article-content h2 { font-family: var(--font-display); font-size: 30px; font-weight: 600; margin-top: 44px; } .pa-article-content h3 { font-family: var(--font-display); font-size: 23px; font-weight: 600; margin-top: 32px; } .pa-article-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .pa-article-content img { max-width: 100%; height: auto; border-radius: var(--r-s); } .pa-article-content blockquote { border-left: 3px solid var(--gold); padding: 4px 0 4px 22px; color: var(--muted); font-style: italic; } .pa-article-content ul, .pa-article-content ol { padding-left: 22px; } .pa-article-content li { margin-top: 8px; } .pa-article-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; color: var(--muted); font-size: 13px; font-weight: 600; } .pa-article-back:hover { color: var(--gold); } /* Pagination liste d'articles */ .pa-news-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; } .pa-news-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--r-s); border: 1px solid var(--line); color: var(--muted); font-size: 14px; text-decoration: none; } .pa-news-pagination .page-numbers.current { background: var(--gold); color: var(--on-accent); border-color: var(--gold); font-weight: 700; } .pa-news-pagination a.page-numbers:hover { border-color: var(--gold); color: var(--text); } .pa-news-empty { text-align: center; color: var(--muted); padding: 60px 0; } @media (max-width: 980px) { .pa-news-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .pa-news-grid { grid-template-columns: 1fr; } } /* ---------------- Formulaire de contact ([pa_contact]) ---------------- */ .pa-contact { max-width: 640px; margin: 0 auto; } .pa-contact-form { display: flex; flex-direction: column; gap: 18px; } .pa-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .pa-contact-field { display: flex; flex-direction: column; gap: 8px; } .pa-contact-field > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); } .pa-contact-field > span i { color: var(--gold); font-style: normal; } .pa-contact-field input, .pa-contact-field textarea { width: 100%; padding: 13px 15px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-s); font-family: var(--font-sans); font-size: 15px; transition: border-color .15s, box-shadow .15s; } .pa-contact-field textarea { resize: vertical; min-height: 140px; line-height: 1.6; } .pa-contact-field input::placeholder, .pa-contact-field textarea::placeholder { color: var(--muted-2); } .pa-contact-field input:focus, .pa-contact-field textarea:focus { outline: none; border-color: var(--gold); box-shadow: none; } .pa-contact-form .pa-btn { align-self: flex-start; margin-top: 4px; } /* honeypot : masqué pour les humains, visible pour les bots */ .pa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .pa-contact-alert { padding: 16px 18px; border-radius: var(--r-s); font-size: 14.5px; line-height: 1.5; border: 1px solid var(--line-soft); } .pa-contact-alert.tone-ok { color: var(--text); background: color-mix(in oklab, var(--gold) 12%, var(--surface-2)); border-color: color-mix(in oklab, var(--gold) 35%, transparent); } .pa-contact-alert.tone-err { color: #ffd9d2; background: color-mix(in oklab, #c0392b 22%, var(--surface-2)); border-color: color-mix(in oklab, #c0392b 45%, transparent); } @media (max-width: 560px) { .pa-contact-row { grid-template-columns: 1fr; } } /* ---------------- Bascule thème clair / sombre ---------------- */ .pa-theme-toggle { width: 40px; height: 40px; flex: none; border-radius: var(--r-s); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-soft); color: var(--muted); background: transparent; transition: color .15s, border-color .15s, background .15s; } .pa-theme-toggle:hover { color: var(--gold); border-color: var(--line); } .pa-theme-toggle svg { width: 18px; height: 18px; } .pa-ico-moon { display: none; } :root[data-theme="light"] .pa-ico-sun { display: none; } :root[data-theme="light"] .pa-ico-moon { display: inline; } /* Animation de bascule : balayage diagonal + Pokémon qui traverse */ .pa-fx { position: fixed; inset: 0; z-index: 9998; pointer-events: none; will-change: clip-path, opacity; } .pa-fx-poke { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; width: clamp(150px, 22vw, 300px); aspect-ratio: 1; background-repeat: no-repeat; background-position: 0 center; background-size: 600% 100%; filter: none; will-change: transform, opacity; } /* ---------------- Rails de catégories (accueil) ---------------- */ .pa-rail-wrap { position: relative; } .pa-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .pa-rail::-webkit-scrollbar { height: 8px; } .pa-rail::-webkit-scrollbar-track { background: transparent; } .pa-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-s); } .pa-rail > .pa-card, .pa-rail > .pa-rail-all { flex: 0 0 178px; scroll-snap-align: start; } @media (max-width: 600px) { .pa-rail > .pa-card, .pa-rail > .pa-rail-all { flex-basis: 152px; } } /* Dé-boîtée : pastille dorée + texte posés sur le fond, sans rectangle. Au clic, la pastille se comprime puis ressort (ressort via :active). */ .pa-rail-all { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 100%; padding: 18px; text-align: center; text-decoration: none; color: var(--text); transition: transform .15s; } .pa-rail-all:hover { transform: translateY(-3px); } .pa-rail-all-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--on-accent); font-size: 24px; font-weight: 700; transition: transform .18s cubic-bezier(.34, 1.56, .64, 1); } .pa-rail-all-ic svg { width: 18px; height: 18px; } .pa-rail-all:hover .pa-rail-all-ic { transform: translateX(3px); } .pa-rail-all:active .pa-rail-all-ic { transform: translateX(3px) scale(.85); transition-duration: .07s; } .pa-rail-all-txt { font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; transition: color .15s; } .pa-rail-all:hover .pa-rail-all-txt { color: var(--gold); } .pa-rail-nav { position: absolute; top: 40%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: none; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 24px; line-height: 1; transition: opacity .15s, border-color .15s; } .pa-rail-nav:hover { border-color: var(--gold); } .pa-rail-nav:disabled { opacity: 0; pointer-events: none; } .pa-rail-prev { left: -10px; } .pa-rail-next { right: -10px; } @media (hover: hover) and (min-width: 760px) { .pa-rail-nav { display: inline-flex; } } /* ── Page d'atterrissage (Coffrets Pokémon rares) ── */ .pa-landing-head { margin: 8px 0 18px; } .pa-landing-title { font-family: var(--font-display); font-size: 38px; font-weight: 700; color: var(--text); margin: 6px 0 0; line-height: 1.15; } .pa-landing-intro { max-width: 80ch; margin-bottom: 12px; } @media (min-width: 760px) { .pa-landing-title { font-size: 46px; } } /* pokantho:promo-display — affichage promotions */ .pa-cart-price { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pa-cart-price del { color: var(--muted, #8a8a8a); opacity: .85; text-decoration: line-through; } .pa-cart-price ins { text-decoration: none; font-weight: 700; color: inherit; } .pa-cart-pct { display: inline-block; padding: 1px 7px; border-radius: var(--r-s); background: var(--gold, #caa54a); color: #1a1a1a; font-size: 12px; font-weight: 700; line-height: 1.7; } .pa-cart-saved th, .pa-cart-saved td { color: var(--gold, #caa54a); } /* pokantho:relay-empty-alert — message si aucun point relais trouvé */ .pa-relay-empty-notice { display: block; margin-top: 8px; padding: 8px 10px; background: #fdecec; border: 1px solid #e7b4b4; border-radius: var(--r-s); color: #9a2b2b; font-size: 13px; line-height: 1.4; font-weight: 600; }