/*
Theme Name: cNumis Shop
Theme URI: https://cnumis.com
Description: Thème enfant de Twenty Twenty-Five aux couleurs de la marketplace cNumis (navy / or / crème). Reprend l'identité du catalogue cNumis : barre navy, logo emblème + wordmark, accents or, angles nets, Arial.
Author: cNumis
Template: twentytwentyfive
Version: 0.1.4
Requires at least: 6.6
Tested up to: 6.7
*/

/* =========================================================================
   Tokens cNumis (miroir de public/css/layout_cab.css côté CI4)
   ========================================================================= */
:root {
  --cn-navy:       #0f1f3d;
  --cn-navy-mid:   #1a3260;
  --cn-navy-dark:  #1e3d7a;
  --cn-gold:       #c9a84c;
  --cn-gold-light: #e8c97a;
  --cn-cream:      #faf7f2;
  --cn-cream-soft: rgba(250, 247, 242, 0.7);
  --cn-border:     #e8e0d0;
  --cn-text:       #1a1a2e;
  --cn-bg:         #eceff1;
}

/* =========================================================================
   HEADER — barre navy + logo (emblème ⊙ + wordmark + tagline) en CSS pur
   Cible le template-part d'en-tête de TT5 et le bloc « Titre du site ».
   ========================================================================= */
header.wp-block-template-part {
  background: var(--cn-navy);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.30);
}
header.wp-block-template-part > .wp-block-group {
  background: transparent;
  padding-block: 0.55rem;
}

/* Logo : recrée .nav_lgo (emblème + wordmark + tagline) à partir du <a> du titre */
header.wp-block-template-part .wp-block-site-title { margin: 0; }
header.wp-block-template-part .wp-block-site-title a {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-auto-rows: auto;
  align-items: center;
  column-gap: 0.7rem;
  color: var(--cn-cream);
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}
/* Emblème circulaire doré (glyphe ⊙ + double anneau) */
header.wp-block-template-part .wp-block-site-title a::before {
  content: "\229A"; /* ⊙ */
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--cn-gold);
  font-size: 20px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(201, 168, 76, 0.22);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
/* Tagline sous le wordmark */
header.wp-block-template-part .wp-block-site-title a::after {
  content: "Catalogue numismatique";
  grid-column: 2;
  grid-row: 2;
  font-size: 0.56rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cn-cream-soft);
  margin-top: 0.35rem;
}
header.wp-block-template-part .wp-block-site-title a:hover {
  color: var(--cn-cream);
}
header.wp-block-template-part .wp-block-site-title a:hover::before {
  transform: rotate(-12deg);
  border-color: var(--cn-gold);
  box-shadow: 0 0 24px rgba(201, 168, 76, 0.25), inset 0 0 0 4px rgba(201, 168, 76, 0.40);
}

/* Navigation : liens uppercase crème, accent or au survol.
   Compactée (taille + interlettrage + gap réduits) pour tenir sur une ligne.
   NB : le menu contient des entrées de dev (Sample Page, Store List, My Orders,
   Vendor Onboarding) — le nettoyer (Apparence → Menus) reste la solution la plus saine. */
header.wp-block-template-part .wp-block-navigation {
  gap: 0.1rem 0.4rem;
  flex-wrap: nowrap;
}
header.wp-block-template-part .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation-item__content {
  color: var(--cn-cream) !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding-inline: 0.35rem;
}
header.wp-block-template-part .wp-block-navigation-item__content:hover {
  color: #fff !important;
  box-shadow: inset 0 -2px 0 var(--cn-gold);
}
/* Sous-menus déroulants : navy-mid, filet or */
header.wp-block-template-part .wp-block-navigation__submenu-container {
  background: var(--cn-navy-mid);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: 2px solid var(--cn-gold);
}
header.wp-block-template-part .wp-block-navigation__submenu-container a:hover {
  background: rgba(255, 255, 255, 0.07);
}
/* Icônes panier / compte (rendus en items de nav) */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item svg { fill: var(--cn-cream); }

/* =========================================================================
   FOOTER — bandeau navy, liens or
   ========================================================================= */
footer.wp-block-template-part {
  background: var(--cn-navy);
  color: var(--cn-cream);
}
footer.wp-block-template-part > .wp-block-group { background: transparent; }
footer.wp-block-template-part :where(h1, h2, h3, h4, p, li, span) { color: var(--cn-cream); }
footer.wp-block-template-part a { color: var(--cn-gold-light); }
footer.wp-block-template-part a:hover { color: #fff; }

/* =========================================================================
   WooCommerce — passe légère (prix, boutons or, cartes) pour cohérence
   (le gros du restylage produit/panier viendra dans une itération dédiée)
   ========================================================================= */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce-Price-amount {
  color: var(--cn-navy);
  font-weight: 700;
}
.woocommerce span.onsale {
  background: var(--cn-gold);
  color: var(--cn-navy);
  border-radius: 0;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.single_add_to_cart_button {
  background: var(--cn-gold) !important;
  color: var(--cn-navy) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.wc-block-components-button:hover,
.single_add_to_cart_button:hover {
  background: var(--cn-gold-light) !important;
  color: var(--cn-navy) !important;
}
.woocommerce ul.products li.product {
  background: #fff;
  border: 1px solid var(--cn-border);
  border-radius: 0;
  padding-bottom: 1rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
  color: var(--cn-navy);
}

/* =========================================================================
   FICHE PRODUIT (single — template bloc WooCommerce + onglets classiques)
   ========================================================================= */

/* Titre + accent or */
.single-product .wp-block-post-title,
.single-product .product_title {
  color: var(--cn-navy);
  font-weight: 600;
  line-height: 1.12;
  padding-bottom: 0.5rem;
}
.single-product .wp-block-post-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 0.6rem;
  background: var(--cn-gold);
}

/* Prix : navy, plus grand (l'or manque de contraste sur fond clair) */
.single-product .wp-block-woocommerce-product-price .woocommerce-Price-amount,
.single-product p.price .woocommerce-Price-amount,
.single-product .price .woocommerce-Price-amount {
  color: var(--cn-navy);
  font-weight: 700;
  font-size: 1.85rem;
}

/* Galerie : cadre blanc bordé (style cartouche cNumis) */
.single-product .wp-block-woocommerce-product-image-gallery,
.single-product .woocommerce-product-gallery {
  background: #fff;
  border: 1px solid var(--cn-border);
  padding: 12px;
}
.single-product .woocommerce-product-gallery img,
.single-product .wp-block-woocommerce-product-image-gallery img { border-radius: 0; }

/* Fil d'Ariane */
.woocommerce-breadcrumb {
  font-size: 0.8rem;
  color: #6b7280;
  letter-spacing: 0.02em;
}
.woocommerce-breadcrumb a { color: var(--cn-navy-dark); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--cn-gold); }

/* Onglets : sous-nav cNumis (uppercase, soulignement or sur l'actif) */
.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  border-bottom: 1px solid var(--cn-border);
  list-style: none;
}
.woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.7rem 1.1rem;
  color: #6b7280;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--cn-navy);
  border-bottom-color: var(--cn-gold);
}
.woocommerce-tabs .woocommerce-Tabs-panel h2 { color: var(--cn-navy); }

/* Méta produit (catégorie, SKU…) */
.single-product .wp-block-woocommerce-product-meta,
.single-product .product_meta {
  font-size: 0.85rem;
  color: #6b7280;
}
.single-product .wp-block-woocommerce-product-meta a,
.single-product .product_meta a { color: var(--cn-navy-dark); text-decoration: none; }
.single-product .wp-block-woocommerce-product-meta a:hover,
.single-product .product_meta a:hover { color: var(--cn-gold); }

/* Quantité + bouton d'achat (bloc ET classique) */
.single-product .quantity .qty {
  border: 1px solid var(--cn-border);
  border-radius: 0;
  padding: 0.5rem;
  background: #fff;
}
.single-product .single_add_to_cart_button,
.single-product .wc-block-components-product-button__button,
.single-product .wp-element-button {
  background: var(--cn-gold) !important;
  color: var(--cn-navy) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.single-product .single_add_to_cart_button:hover,
.single-product .wc-block-components-product-button__button:hover,
.single-product .wp-element-button:hover {
  background: var(--cn-gold-light) !important;
  color: var(--cn-navy) !important;
}

/* Produits liés / More products */
.related h2,
.wp-block-woocommerce-related-products h2 { color: var(--cn-navy); }

/* Notices WooCommerce (info/succès) aux couleurs cNumis */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  background: #fff;
  border-top: 3px solid var(--cn-gold);
  border-radius: 0;
  color: var(--cn-text);
}
.woocommerce-info::before,
.woocommerce-message::before { color: var(--cn-gold); }

/* Notices par blocs WooCommerce (wc-block-components-notice-banner) */
.wc-block-components-notice-banner {
  background: #fff !important;
  border: 0 !important;
  border-top: 3px solid var(--cn-gold) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cn-text);
}
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-error { background: #fff !important; }
.wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner__icon {
  background-color: var(--cn-gold) !important; /* le rond = background-color du svg */
  fill: var(--cn-navy) !important;             /* le glyphe = fill */
  color: var(--cn-navy) !important;
}