/*
Theme Name: RobeFemme
Theme URI: https://robefemme.net
Author: RobeFemme.net
Description: Thème e-commerce sur mesure pour RobeFemme.net — basé sur la charte graphique psychologique (féminité, luxe, impulsion). Léger, sans framework, compatible WooCommerce et Yoast SEO, optimisé Core Web Vitals (zéro police externe, CSS unique < 20 Ko, JS différé).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: robefemme
Tags: e-commerce, woocommerce, two-columns, custom-colors, translation-ready
*/

/* =========================================================
   1. CHARTE AMÉLIORÉE — Design tokens
   Les couleurs de la charte psychologique sont exposées en
   variables SÉMANTIQUES : on décrit le rôle, pas la couleur.
   Correctifs accessibilité :
   - Le rose #E8B4B8 (contraste 1.9:1 sur blanc) est réservé
     au décoratif. Pour du texte rose lisible : --rose-text.
   ========================================================= */
:root {
  /* Palette source (charte) */
  --noir: #1A1A1A;          /* Luxe, autorité */
  --rose: #E8B4B8;          /* Féminité — DÉCORATIF uniquement */
  --rose-text: #A05E66;     /* Rose foncé lisible (4.6:1 sur blanc) */
  --violet: #7B5BA0;        /* Royauté, prix premium */
  --violet-dark: #63467F;
  --rouge: #C62828;         /* Impulsion, CTA, soldes */
  --rouge-dark: #A31F1F;
  --champagne: #F5EDE0;     /* Confort, hero */
  --blanc: #FFFFFF;
  --gris: #9A8E88;          /* Méta — jamais seul */
  --gris-text: #6E635D;     /* Gris lisible (4.9:1) pour descriptions */
  --surface: #FAF7F4;       /* Fond de page */

  /* Tokens sémantiques */
  --color-bg: var(--surface);
  --color-card: var(--blanc);
  --color-text: var(--noir);
  --color-text-soft: var(--gris-text);
  --color-heading: var(--noir);
  --color-link: var(--violet);
  --color-link-hover: var(--rose-text);
  --color-price: var(--violet);
  --color-cta: var(--rouge);
  --color-cta-hover: var(--rouge-dark);
  --color-btn: var(--noir);
  --color-btn-hover: #000000;
  --color-badge-new: var(--rose);
  --color-badge-sale: var(--rouge);
  --color-border: #E9E2DA;
  --color-focus: var(--violet);

  /* Typographie — 100% polices système : 0 requête réseau,
     0 CLS, rendu instantané (Core Web Vitals).
     Display élégant type Didot pour l'esprit "maison de couture". */
  --font-display: "Didot", "Bodoni MT", "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Échelle fluide (clamp = pas de saut de mise en page mobile/desktop) */
  --fs-h1: clamp(2rem, 1.2rem + 3.5vw, 3.4rem);
  --fs-h2: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Espacement */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --radius: 4px;
  --shadow-card: 0 2px 12px rgba(26, 26, 26, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(26, 26, 26, 0.12);
  --container: 1200px;
}

/* =========================================================
   2. Reset minimal & base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
/* Réserve l'espace des images produit = zéro CLS */
.woocommerce ul.products li.product img,
.rf-product-card img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  font-weight: 500;
  letter-spacing: 0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--space-2); }
a { color: var(--color-link); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--color-link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.rf-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-2); }
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; position: absolute !important;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--noir); color: var(--blanc); padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; color: var(--blanc); }

/* =========================================================
   3. Header — Noir Luxe (autorité, Chanel-like)
   ========================================================= */
.rf-header {
  background: var(--noir);
  color: var(--blanc);
  position: sticky; top: 0; z-index: 100;
}
.rf-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding: 0.85rem var(--space-2);
  max-width: var(--container); margin: 0 auto;
}
.rf-logo {
  font-family: var(--font-display);
  font-size: 1.5rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blanc); font-weight: 500;
}
.rf-logo:hover { color: var(--rose); }
.rf-nav ul { list-style: none; display: flex; gap: var(--space-3); margin: 0; padding: 0; }
.rf-nav a {
  color: var(--blanc); font-size: var(--fs-small); letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.4rem 0; position: relative;
}
.rf-nav a:hover, .rf-nav .current-menu-item > a { color: var(--rose); }
.rf-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
  background: var(--rose); transition: width 0.25s ease;
}
.rf-nav a:hover::after { width: 100%; }
.rf-header__tools { display: flex; align-items: center; gap: var(--space-2); }
.rf-cart-link { color: var(--blanc); font-size: var(--fs-small); display: inline-flex; align-items: center; gap: 0.4rem; }
.rf-cart-count {
  background: var(--rouge); color: var(--blanc); border-radius: 999px;
  font-size: 0.7rem; min-width: 1.2rem; height: 1.2rem;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 0.3rem;
}
.rf-menu-toggle {
  display: none; background: none; border: 1px solid rgba(255,255,255,0.4);
  color: var(--blanc); padding: 0.45rem 0.7rem; border-radius: var(--radius);
  cursor: pointer; font-size: var(--fs-small);
}
@media (max-width: 860px) {
  .rf-menu-toggle { display: inline-flex; }
  .rf-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--noir); }
  .rf-nav.is-open { display: block; }
  .rf-nav ul { flex-direction: column; gap: 0; padding: var(--space-2); }
  .rf-nav a { display: block; padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
}

/* Bandeau annonce (urgence maîtrisée) */
.rf-topbar {
  background: var(--rouge); color: var(--blanc); text-align: center;
  font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.45rem var(--space-2);
}

/* =========================================================
   4. Hero — Champagne (confort, confiance)
   ========================================================= */
.rf-hero {
  background: var(--champagne);
  text-align: center;
  padding: clamp(3rem, 8vw, 6.5rem) var(--space-2);
}
.rf-hero__label {
  font-size: var(--fs-label); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--rose-text); margin-bottom: var(--space-2); display: block;
}
.rf-hero h1 { max-width: 18ch; margin-inline: auto; }
.rf-hero p { max-width: 52ch; margin: 0 auto var(--space-3); color: var(--color-text-soft); }

/* =========================================================
   5. Boutons — hiérarchie psychologique
   Noir = action standard · Rouge = impulsion (parcimonie)
   ========================================================= */
.rf-btn, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.wp-block-button__link {
  display: inline-block; font-family: var(--font-body);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: center; cursor: pointer;
  border: none; border-radius: var(--radius);
  padding: 0.85rem 1.8rem; line-height: 1.2;
  background: var(--color-btn); color: var(--blanc);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.rf-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover {
  background: var(--color-btn-hover); color: var(--blanc);
  transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
/* CTA impulsion — rouge, réservé à "Acheter maintenant" / checkout */
.rf-btn--buy, .woocommerce button.button.alt, .woocommerce a.button.alt,
.woocommerce a.checkout-button, .woocommerce #payment #place_order {
  background: var(--color-cta) !important; color: var(--blanc) !important;
}
.rf-btn--buy:hover, .woocommerce button.button.alt:hover,
.woocommerce a.checkout-button:hover, .woocommerce #payment #place_order:hover {
  background: var(--color-cta-hover) !important;
}
/* Secondaire discret */
.rf-btn--ghost {
  background: transparent; color: var(--noir);
  border: 1px solid var(--noir);
}
.rf-btn--ghost:hover { background: var(--noir); color: var(--blanc); }

/* =========================================================
   6. Cartes produit & badges
   ========================================================= */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; }
.woocommerce ul.products li.product,
.rf-product-card {
  background: var(--color-card); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  text-align: left; margin: 0; width: auto; float: none;
  position: relative;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.rf-product-card h3 {
  font-size: var(--fs-h3); padding: var(--space-2) var(--space-2) 0;
}
.woocommerce ul.products li.product .price, .rf-price {
  color: var(--color-price) !important; font-weight: 700;
  font-size: 1.05rem; padding: 0 var(--space-2) var(--space-2);
  display: block;
}
.woocommerce ul.products li.product .price del { color: var(--gris); font-weight: 400; margin-right: 0.5rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button { margin: 0 var(--space-2) var(--space-2); }

/* Badges psychologiques */
.rf-badge {
  display: inline-block; font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px;
}
.rf-badge--new { background: var(--color-badge-new); color: var(--noir); }
.rf-badge--exclusive { background: var(--violet); color: var(--blanc); }
.rf-badge--stock { background: #EAF4EA; color: #2E6B34; }
.woocommerce span.onsale, .rf-badge--sale {
  background: var(--color-badge-sale) !important; color: var(--blanc) !important;
  border-radius: 999px; min-height: 0; min-width: 0; line-height: 1;
  padding: 0.4rem 0.75rem; font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.08em; top: 0.75rem; left: 0.75rem;
}

/* =========================================================
   7. Fiche produit
   ========================================================= */
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--color-price); font-size: 1.5rem; font-weight: 700;
}
.woocommerce div.product .product_title { font-family: var(--font-display); }
.woocommerce div.product form.cart .variations select {
  border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.55rem 0.8rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--violet); }

/* =========================================================
   8. Formulaires & newsletter
   ========================================================= */
input[type="text"], input[type="email"], input[type="search"],
input[type="password"], input[type="tel"], input[type="number"], textarea, select {
  font-family: var(--font-body); font-size: var(--fs-body);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.7rem 0.9rem; background: var(--blanc); color: var(--noir);
  width: 100%; max-width: 100%;
  transition: border-color 0.2s ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--violet); }
::placeholder { color: var(--gris); }

.rf-newsletter {
  background: var(--champagne); text-align: center;
  padding: var(--space-5) var(--space-2);
}
.rf-newsletter form { display: flex; gap: var(--space-1); max-width: 460px; margin: var(--space-3) auto 0; }
@media (max-width: 520px) { .rf-newsletter form { flex-direction: column; } }

/* Bannière promo / urgence */
.rf-promo {
  background: var(--noir); color: var(--blanc); text-align: center;
  padding: var(--space-4) var(--space-2); border-radius: var(--radius);
  margin: var(--space-4) auto;
}
.rf-promo strong { color: var(--rose); }
.rf-promo .rf-promo__code {
  display: inline-block; border: 1px dashed var(--rose); color: var(--rose);
  padding: 0.4rem 1rem; margin-top: var(--space-2); letter-spacing: 0.2em;
}

/* Réassurance */
.rf-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-2); color: var(--color-text-soft);
  font-size: var(--fs-small); border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* =========================================================
   9. Sections & contenu
   ========================================================= */
.rf-section { padding: var(--space-5) 0; }
.rf-section__head { text-align: center; max-width: 60ch; margin: 0 auto var(--space-4); }
.rf-section__head .rf-eyebrow {
  font-size: var(--fs-label); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--rose-text); display: block; margin-bottom: var(--space-1);
}
.entry-content { max-width: 72ch; margin-inline: auto; }
.entry-meta { color: var(--gris-text); font-size: var(--fs-small); }

/* Fil d'Ariane Yoast */
.rf-breadcrumbs {
  font-size: var(--fs-small); color: var(--gris-text);
  padding: var(--space-2) 0;
}
.rf-breadcrumbs a { color: var(--gris-text); }
.rf-breadcrumbs a:hover { color: var(--violet); }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul { border: none; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.page-numbers { padding: 0.5rem 0.9rem; border-radius: var(--radius); }
.woocommerce nav.woocommerce-pagination ul li span.current,
.page-numbers.current { background: var(--noir); color: var(--blanc); }

/* Notices WooCommerce */
.woocommerce-message { border-top-color: var(--violet); }
.woocommerce-error { border-top-color: var(--rouge); }

/* =========================================================
   10. Footer — Noir Luxe
   ========================================================= */
.rf-footer {
  background: var(--noir); color: rgba(255,255,255,0.75);
  padding: var(--space-5) 0 var(--space-3); margin-top: var(--space-5);
  font-size: var(--fs-small);
}
.rf-footer a { color: rgba(255,255,255,0.75); }
.rf-footer a:hover { color: var(--rose); }
.rf-footer__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.rf-footer h4 { color: var(--blanc); font-family: var(--font-body); font-size: var(--fs-small); letter-spacing: 0.15em; text-transform: uppercase; }
.rf-footer ul { list-style: none; margin: 0; padding: 0; }
.rf-footer li { margin-bottom: 0.6rem; }
.rf-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--space-2); text-align: center; color: rgba(255,255,255,0.5);
}
.rf-footer .rf-logo { display: inline-block; margin-bottom: var(--space-2); }

/* =========================================================
   11. WordPress core (alignements, images)
   ========================================================= */
.alignwide { max-width: var(--container); margin-inline: auto; }
.alignfull { width: 100%; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--fs-small); color: var(--gris-text); text-align: center; }
.sticky, .bypostauthor { display: revert; }