/* ============================================================ BOUTIQUE PRV CONCEPT — charte de la vitrine posée sur Intrigue Palette : noir chaud · rouge · orange · blanc os Type : Saira Condensed (display) · Archivo (corps) · JetBrains Mono (labels) Chargée EN DERNIER (functions.php) : elle passe après ci_woocommerce.css et colors/default.css, d'où le peu de !important — seulement là où le parent utilise lui-même !important ou un sélecteur plus spécifique. ============================================================ */ :root { --bg: #100E0C; --bg-2: #16120F; --bg-3: #0B0907; --ink: #F2EEE6; --ink-soft: #C2B9AD; --ink-mut: #9C938A; --ink-dim: #8A8178; --orange: #ED7D2B; --red: #E0322A; --line: rgba(242,238,230,.09); --line-soft: rgba(242,238,230,.06); --halo: rgba(237,125,43,.14); --disp: 'Saira Condensed', 'Arial Narrow', Arial, sans-serif; --body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ---------- Base ---------- */ html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink-soft); font-family: var(--body); -webkit-font-smoothing: antialiased; } /* Grain filmique discret, comme la vitrine et le forum */ body::after { content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection { background: var(--orange); color: #0E0C0A; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } /* Le thème peint TOUS les liens en rouge vif (`colors/default.css`) : on revient à l'encre du site, l'orange servant au survol. `a:visited` doit être cité, sinon la règle du parent (plus spécifique) l'emporte sur les liens déjà visités. */ a, a:visited { color: var(--ink); text-shadow: none; } a:hover, a:focus { color: var(--orange); text-shadow: none; } h1, h2, h3, h4, h5 { font-family: var(--disp); text-transform: uppercase; color: var(--ink); letter-spacing: -.2px; } h1 { font-weight: 800; } h2, h3 { font-weight: 700; } p { line-height: 1.6; } hr { border-color: var(--line); } /* ---------- Bandeau de marque : celui de la vitrine (gabarit header.php) ---------- */ #header { background: rgba(16,14,12,.96) !important; background-image: none !important; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 200; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } #header .prv-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0 10px; margin: 0; } /* L'en-tête prend la LARGEUR DE CELUI DU SITE (1240 px, marges de 28 px) au lieu du conteneur d'Intrigue (980 px) : le menu commun y était à l'étroit, et l'entrée réservée « Membre du bureau » le faisait déborder de 131 px à 1331 px, encore 36 px à 1520 (mesuré le 11/09/2026). Même géométrie que le site : le logo ne saute plus d'une surface à l'autre. Au-dessus de 960 px seulement — en dessous, la grille du thème. */ @media (min-width: 960px) { #header > .container { width: auto !important; max-width: 1240px; padding: 0 28px; box-sizing: border-box; } } /* La grille d'Intrigue pose un « clearfix » (::before / ::after, content " ") sur chaque .row. Dans nos rangées FLEX réparties (space-between), ces pseudo-éléments deviennent des éléments à part entière et prennent leur part d'espace : logo décalé, panier du ruban poussé de 109 px à droite, logo centré en mode tablette (relevé le 11/09/2026). */ #header .prv-bar::before, #header .prv-bar::after, #header .prv-ribbon::before, #header .prv-ribbon::after { content: none; display: none; } /* Entrée réservée présente (membre connecté au forum) : écart resserré juste au-dessus du point de bascule en burger, où « Membre du bureau » manquait encore de place. */ @media (min-width: 1331px) and (max-width: 1440px) { .prv-nav:has(.nav-espace) { gap: 12px; } } .prv-brand { display: flex; align-items: center; flex-shrink: 0; } .prv-brand img { height: 34px; width: auto; display: block; } .prv-nav { display: flex; gap: 15px; align-items: center; font-family: var(--disp); font-weight: 600; font-size: 15px; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; } .prv-nav a { position: relative; color: #C9C0B5; transition: color .15s ease; } .prv-nav a:hover, .prv-nav a.current { color: var(--ink); } .prv-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .26s cubic-bezier(.2,.7,.2,1); } .prv-nav a:hover::after, .prv-nav a.current::after { transform: scaleX(1); } .prv-nav a.nav-espace { display: inline-flex; align-items: center; gap: 6px; color: var(--orange); } .prv-nav a.nav-espace:hover { color: var(--orange); } .prv-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .prv-pill { font-family: var(--disp); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .8px; padding: 9px 17px; border-radius: 6px; border: 1px solid transparent; transition: filter .18s ease, transform .18s ease; } .prv-pill:active { transform: scale(.96); } .prv-pill-fb, .prv-pill-ig, .prv-pill-yt { display: inline-flex; align-items: center; justify-content: center; padding: 11px 13px; color: #fff; } .prv-pill-fb { background: #1877F2; } .prv-pill-yt { background: #FF0000; } .prv-pill-ig { background: #C13584; background: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%); } .prv-pill-fb svg, .prv-pill-ig svg, .prv-pill-yt svg { display: block; } .prv-pill-fb:hover, .prv-pill-ig:hover, .prv-pill-yt:hover { filter: brightness(1.08); color: #fff; } .prv-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 38px; height: 38px; padding: 0; background: none; border: 1px solid rgba(242,238,230,.18); border-radius: 6px; cursor: pointer; } .prv-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; } #header.nav-open .prv-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } #header.nav-open .prv-toggle span:nth-child(2) { opacity: 0; } #header.nav-open .prv-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Ruban SOUS le bandeau : panier et recherche (même place que sur le forum) */ #header .prv-ribbon { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; margin: 0; border-top: 1px solid var(--line-soft); } .cart-wrap { position: static !important; background: none !important; border: 0 !important; padding: 0 !important; width: auto !important; } .cart-wrap span { font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-mut); background: none !important; } .cart-wrap a.cart { font-family: var(--disp); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; font-size: 13px; color: var(--bg); background: var(--orange) !important; border: 0; border-radius: 999px; padding: 6px 14px; margin-left: 10px; transition: filter .18s ease; } .cart-wrap a.cart:hover { filter: brightness(1.06); color: var(--bg); } /* Compte client : une entrée sobre à côté du panier, pas un second bouton plein. */ .cart-wrap a.compte { font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-mut); margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--line); } .cart-wrap a.compte:hover { color: var(--orange); } /* Connecté : pseudo + « Se déconnecter », comme le ruban du forum (owner, 11/09/2026). */ .cart-wrap .prv-moi { display: inline-flex; align-items: center; white-space: nowrap; } .cart-wrap .prv-moi a { display: inline-flex; align-items: center; gap: 6px; } .cart-wrap .prv-moi .ic { flex: 0 0 auto; color: var(--orange); } /* Avatar du forum à la place de l'icône (owner, 11/09/2026) : pastille ronde, recadrée. min-width/max-width : Intrigue impose « img { min-width: 100% } » sous 767 px — l'avatar prenait la largeur du lien, s'étirait en bandeau et poussait le pseudo sous « Se déconnecter » (vu par l'owner sur iPhone, 11/09/2026). */ .cart-wrap .prv-moi .ava { width: 18px; height: 18px; min-width: 0; max-width: none; flex: 0 0 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); } /* Pseudo dans la couleur de son GROUPE sur le forum (owner, 11/09/2026 : « même couleur que sur le forum ») — --couleur-pseudo posée par le script du pied depuis la sonde du forum. */ .cart-wrap a.compte-moi { color: var(--couleur-pseudo, var(--ink)); font-weight: 600; } .cart-wrap a.compte-moi:hover { color: var(--couleur-pseudo, var(--ink)); opacity: .8; } .cart-wrap a.compte-sortie { font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-mut); margin-left: 14px; } .cart-wrap a.compte-sortie:hover { color: var(--orange); } .cart-wrap .prv-moi .txt { font: inherit; letter-spacing: inherit; color: inherit; } .nav-search { float: none !important; width: auto !important; margin: 0 !important; } .nav-search .searchform { margin: 0; } .nav-search input.s { background: var(--bg-2) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; color: var(--ink) !important; font-family: var(--body); font-size: 13px; padding: 7px 16px; width: 240px; box-shadow: none !important; } .nav-search input.s:focus { border-color: var(--orange) !important; } /* Fil d'Ariane, sous le ruban — même forme que celui du forum : mono, capitales espacées, petite maison orange en tête. Celui que les gabarits WooCommerce du parent rendent DANS le contenu (`#breadcrumb`) est masqué : il ferait doublon. */ #header .prv-crumbs { padding: 9px 0 7px; margin: 0; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-mut); } .prv-fil { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .prv-fil a { color: var(--ink-mut); } .prv-fil a:hover { color: var(--orange); } .prv-fil > a:first-child { display: inline-flex; align-items: center; gap: 7px; } .prv-fil > a:first-child::before { content: ""; width: 13px; height: 13px; flex: 0 0 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ED7D2B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E") center / contain no-repeat; } .prv-fil .sep { color: var(--ink-dim); } #breadcrumb, .woocommerce-breadcrumb:not(.prv-fil) { display: none; } /* ---------- Contenu ---------- */ #main { background: none; } .main-content { background: none; } .content-hold h1, .content-hold h2 { color: var(--ink); } .page-title, .entry-title, h1.page-title { font-family: var(--disp); text-transform: uppercase; } /* Fil d'Ariane */ .woocommerce-breadcrumb { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-mut); border: 0; } .woocommerce-breadcrumb a { color: var(--ink-mut); } .woocommerce-breadcrumb a:hover { color: var(--orange); } /* ---------- Cartes produits : celles de la vitrine ---------- ⚠️ Intrigue n'utilise PAS `ul.products` de WooCommerce mais SA liste `ul.product-list > li.product > .product-thumbnail + .product-info`. Cibler les classes WooCommerce seules ne touche rien sur les listes (vécu : les prix restaient rouges alors que la fiche produit était déjà orange). */ /* ⚠️ `box-sizing: border-box` OBLIGATOIRE : la grille Skeleton du thème dimensionne les colonnes en `width` avec le modèle de boîte historique. Une bordure de 1 px ajoutée sans lui fait dépasser la largeur disponible et les deux colonnes s'empilent en une seule (vécu à la première passe). */ ul.product-list li.product { box-sizing: border-box; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding-bottom: 16px; overflow: hidden; transition: border-color .18s ease, transform .18s ease; } ul.product-list li.product:hover { border-color: rgba(237,125,43,.35); transform: translateY(-2px); } ul.product-list li.product .product-thumbnail { margin-bottom: 12px; } ul.product-list li.product .product-thumbnail img { display: block; width: 100%; height: auto; } ul.product-list li.product .product-info { padding: 0 16px; } ul.product-list li.product .product-info h2, ul.product-list li.product .product-info h3, ul.product-list li.product .product-info h2 a, ul.product-list li.product .product-info h3 a { font-family: var(--disp); font-weight: 700; text-transform: uppercase; font-size: 20px; line-height: 1.1; color: var(--ink); } ul.product-list li.product .product-info h2 a:hover, ul.product-list li.product .product-info h3 a:hover { color: var(--orange); } ul.product-list li.product .product-info a[rel="tag"], ul.product-list li.product .product-categories a { color: var(--ink-mut); font-size: 13px; } ul.product-list li.product .product-info a[rel="tag"]:hover { color: var(--orange); } ul.product-list li.product .product-desc .excerpt { color: var(--ink-soft); } ul.product-list li.product .read-more a { color: var(--orange); font-family: var(--mono); font-size: 12px; } /* Les PRIX, partout (listes, fiche, panier, widgets) : le rouge criard du thème (`colors/default.css` : `.price { color:#ff0000 }`) passe à l'orange de la charte. */ .price, p.price, span.price, .amount, .woocommerce-Price-amount, ul.product-list li.product p.price, ul.product-list li.product .price { color: var(--orange) !important; font-family: var(--mono); font-variant-numeric: tabular-nums; } .price del, .price del .amount { color: var(--ink-dim) !important; opacity: .75; } .price ins { text-decoration: none; } /* Tri et pagination des listes */ /* Sélecteur de tri (« Tri par popularité ») — owner, 11/09/2026 : fin, natif, posé sur la première carte. Deux causes : le parent le place en `position: absolute; top: 39px; right: 0` dans `.page-content` (style.css), pile sur le haut de la grille ; et rien ne lui donnait de hauteur (19 px, flèche système). On le remet DANS le flux, aligné à droite au-dessus des cartes, et on lui donne le champ du site (sombre, filet fin, rayon 6 px, 44 px de haut, bord orange au focus) avec un chevron dessiné. Le masqué du thème ferme la liste */ .prv-nav a::after { display: none; } #header.nav-open .prv-nav { opacity: 1; transform: none; pointer-events: auto; } #header .prv-bar { position: relative; } /* Menu ouvert : le bandeau passe au-dessus de tout le contenu — sinon le sélecteur de tri des produits, plus bas dans le document, se dessine par-dessus le volet. */ #header.nav-open { z-index: 400; } /* Le script du thème ajoute un