/*
Theme Name: SkinBeaty Child
Description: Thème enfant Blocksy — surcouche charte graphique SkinBeaty
Author: OffensiveSkills
Template: blocksy
Version: 1.0.0
*/

/* ===== Charte SkinBeaty — Palette ===== */
:root {
  --sk-velvet: #121212;
  --sk-bronze: #7D5545;
  --sk-gold: #E0C078  /* Gold Scintillant */;
  --sk-terracotta: #C56A51;
  --sk-sand: #FFFFFF  /* Blanc pur */;
  --sk-radius-btn: 4px;
  --sk-radius-card: 8px;
}

/* ===== Fond général : Warm Sand (évite le blanc clinique) ===== */
body,
.ct-container,
.ct-header,
.ct-footer {
  background-color: var(--sk-sand);
}

/* ===== Typographie ===== */
body,
p,
.entry-content,
.woocommerce {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.ct-header .site-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--sk-velvet);
}

h1 { font-size: 48px; font-weight: 600; line-height: 1.2; }
h2 { font-size: 32px; font-weight: 500; line-height: 1.2; }
h3 { font-size: 24px; font-weight: 500; line-height: 1.3; }

/* ===== Boutons ===== */
.wp-block-button__link,
.button,
a.button,
button[type="submit"],
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.ct-button,
.single_add_to_cart_button {
  background-color: var(--sk-terracotta) !important;
  color: var(--sk-velvet) !important;
  border-radius: var(--sk-radius-btn) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border: none !important;
  transition: all 0.2s ease-in-out !important;
}

.wp-block-button__link:hover,
.button:hover,
a.button:hover,
button[type="submit"]:hover,
.woocommerce button.button:hover,
.ct-button:hover,
.single_add_to_cart_button:hover {
  background-color: var(--sk-bronze) !important;
  color: var(--sk-sand) !important;
  transform: translateY(-1px);
}

/* Boutons secondaires : Soft Gold */
.wp-block-button.is-style-outline .wp-block-button__link,
.woocommerce a.button.secondary,
button.button-secondary,
.ct-header .ct-button-secondary {
  background-color: transparent !important;
  border: 1px solid var(--sk-gold) !important;
  color: var(--sk-bronze) !important;
}

/* ===== Cartes produits ===== */
.woocommerce ul.products li.product,
.ct-product-card {
  border-radius: var(--sk-radius-card);
  background: #fff;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.woocommerce ul.products li.product:hover,
.ct-product-card:hover {
  box-shadow: 0 12px 32px rgba(18, 18, 18, 0.10);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product img,
.ct-product-card img {
  transition: transform 0.2s ease-in-out;
}

.woocommerce ul.products li.product:hover img,
.ct-product-card:hover img {
  transform: scale(1.03);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  color: var(--sk-terracotta);
  font-weight: 600;
}

/* ===== Header : nom de marque ===== */
.ct-header .site-title a,
.ct-header .site-branding .site-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--sk-velvet);
}

/* ===== Accents dorés ===== */
.ct-header .ct-header-text,
.ct-footer .ct-footer-copyright a {
  color: var(--sk-bronze);
}

a {
  color: var(--sk-bronze);
  text-decoration: none;
}

a:hover {
  color: var(--sk-terracotta);
}

/* Ligne dorée sous les titres de section */
.entry-content h2::after,
.woocommerce-products-header h1::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--sk-gold);
  margin-top: 16px;
}

/* ===== Accessibilité : contraste sur boutons ===== */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled:hover {
  background-color: #d9c9bf !important;
  color: #7a6a60 !important;
}

/* ===== Hero vidéo background (La Kribienne) ===== */
.sk-hero-video {
  position: relative;
  overflow: hidden;
}

.sk-hero-video-el {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
}

/* Overlay léger uniquement pour la lisibilité du texte, l'animation reste visible */
.sk-hero-video .wp-block-cover__background {
  z-index: 1;
  opacity: 0.15 !important;
}

.sk-hero-video .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

.sk-hero-video .wp-block-heading {
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}

/* Petit dégradé bas pour le CTA si nécessaire */
.sk-hero-video::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to top, rgba(18,18,18,0.5), transparent);
  z-index: 1;
  pointer-events: none;
}


/* ===== Hover produit : toutes les infos au survol (La Kribienne) ===== */
.woocommerce ul.products li.product,
.ct-product-card {
  position: relative;
}

.sk-product-hover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(18, 18, 18, 0.92);
  color: var(--sk-sand);
  padding: 16px;
  transform: translateY(100%);
  transition: transform 0.25s ease-in-out;
  z-index: 5;
  max-height: 70%;
  overflow-y: auto;
  border-top: 2px solid var(--sk-gold);
  border-radius: 8px 8px 0 0;
}

.woocommerce ul.products li.product:hover .sk-product-hover,
.ct-product-card:hover .sk-product-hover {
  transform: translateY(0);
}

.sk-product-hover .sk-ph-price {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--sk-gold);
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.sk-product-hover .sk-ph-desc,
.sk-product-hover .sk-ph-desc-en {
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0 0 8px 0;
  color: #EDEAE3;
}

.sk-product-hover .sk-ph-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: #C9C4BA;
}

.sk-product-hover .sk-ph-origin,
.sk-product-hover .sk-ph-format,
.sk-product-hover .sk-ph-origin-en,
.sk-product-hover .sk-ph-format-en {
  display: block;
}

/* Cache les versions EN par défaut (FR actif) */
.sk-ph-desc-en,
.sk-ph-origin-en,
.sk-ph-format-en {
  display: none;
}

/* Mode EN : cache le FR, affiche l'EN */
html[data-lang="en"] .sk-ph-desc { display: none !important; }
html[data-lang="en"] .sk-ph-origin { display: none !important; }
html[data-lang="en"] .sk-ph-format { display: none !important; }
html[data-lang="en"] .sk-ph-desc-en { display: block !important; }
html[data-lang="en"] .sk-ph-origin-en { display: block !important; }
html[data-lang="en"] .sk-ph-format-en { display: block !important; }

/* Sélecteur de langue dans le header */
.sk-lang-switch {
  display: inline-flex;
  gap: 4px;
  margin-left: 16px;
}

.sk-lang-switch button {
  background: transparent;
  border: 1px solid var(--sk-gold);
  color: var(--sk-bronze);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.sk-lang-switch button:hover,
.sk-lang-switch button.active {
  background: var(--sk-gold);
  color: var(--sk-velvet);
}


/* ============================================================
   CORRECTIONS APPLE DESIGN (audit 17/08/2026)
   ============================================================ */

/* 1. Header translucide (Materials & depth - principe 12) */
.ct-header,
header.site-header,
.ct-header-sticky {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(212, 178, 111, 0.30);
}

/* ============================================================
   HEADER "GLOSSIER CHIC" (Option A - 17/08/2026)
   Liens noir velours, logo Playfair, Inter 500, hover terracotta
   ============================================================ */
.ct-header nav ul li a,
.ct-header nav a,
header.site-header nav a,
.ct-header a.ct-menu-link,
nav a {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #121212 !important;
  transition: color 0.2s ease !important;
}

.ct-header nav ul li a:hover,
.ct-header nav a:hover,
header.site-header nav a:hover,
.ct-header a.ct-menu-link:hover,
nav a:hover {
  color: #C56A51 !important;
}

/* Logo en Playfair Display (contraste serif/sans élégant) */
.ct-header .site-logo a,
.ct-header a.site-logo,
.ct-header .site-title,
header.site-header .site-title,
.ct-header img + span,
.ct-header .ct-logo-text {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #7D5545 !important;
}

/* Lien actif du menu : trait discret sous le lien (pas de changement de couleur) */
.ct-header nav ul li.current-menu-item a,
.ct-header nav ul li.current_page_item a {
  color: #121212 !important;
  box-shadow: inset 0 -2px 0 #C56A51;
}

/* ============================================================
   LOGO HEADER AGRANDI (17/08/2026)
   ============================================================ */
.ct-header .site-logo-container,
.ct-header .site-logo,
.ct-header .ct-logo,
header.site-header .site-logo-container {
  height: auto !important;
  min-height: 72px;
  display: flex !important;
  align-items: center;
}

.ct-header .site-logo-container img,
.ct-header .site-logo img,
.ct-header .ct-logo img,
header.site-header .site-logo img {
  width: auto !important;
  height: 72px !important;
  max-height: 72px !important;
  max-width: none !important;
}

/* 2a. Reduced motion (principe 14) */
@media (prefers-reduced-motion: reduce) {
  .sk-hero-video-el {
    display: none !important;
  }
  .sk-product-hover {
    transition: opacity 200ms ease !important;
    transform: none !important;
  }
  .woocommerce ul.products li.product img,
  .ct-product-card img {
    transition: none !important;
    transform: none !important;
  }
  .woocommerce ul.products li.product,
  .ct-product-card {
    transition: none !important;
  }
  .wp-block-button__link,
  .button,
  a.button,
  .single_add_to_cart_button {
    transition: none !important;
  }
}

/* 2b. Reduced transparency (principe 14) */
@media (prefers-reduced-transparency: reduce) {
  .ct-header,
  header.site-header {
    background: var(--sk-sand) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* 3. Tracking négatif sur les grands titres (principe 15) */
h1,
h1.wp-block-heading {
  letter-spacing: -0.02em;
}
h2,
h2.wp-block-heading {
  letter-spacing: -0.015em;
}
h3,
h3.wp-block-heading {
  letter-spacing: -0.01em;
}
body {
  letter-spacing: 0;
}

/* 4. Feedback au pointer-down (Response - principe 1) */
.wp-block-button__link:active,
.button:active,
a.button:active,
button[type="submit"]:active,
.woocommerce button.button:active,
.woocommerce a.button:active,
.ct-button:active,
.single_add_to_cart_button:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out !important;
}

/* 5. Contraste : état actif du sélecteur de langue bien visible */
.sk-lang-switch button.active {
  background: var(--sk-terracotta) !important;
  color: var(--sk-sand) !important;
  border-color: var(--sk-terracotta) !important;
}


/* ============================================================
   MOTION LA KRIBIENNE (17/08/2026)
   Reveals au scroll + boutons avec lumière orbitale
   Basé sur guidelines UX : 150-300ms, ease-out, reduced-motion
   ============================================================ */

/* ---------- Reveals au scroll (fade + translateY) ----------
   PROGRESSIVE ENHANCEMENT : visible par défaut (même sans JS),
   animé uniquement si .sk-js est présent (JS actif) */
.sk-reveal {
  opacity: 1;
  transform: none;
}
body.sk-js .sk-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  will-change: opacity, transform;
}
body.sk-js .sk-reveal.sk-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Filet de sécurité : si IO absent ou motion off, tout visible */
body.sk-motion-off .sk-reveal,
body.sk-motion-off ul.products li.product,
body.sk-motion-off .products li.product {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---------- Cartes produits : apparition en cascade ---------- */
ul.products li.product,
.products li.product,
.wc-block-grid__product {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
body.sk-js ul.products li.product,
body.sk-js .products li.product,
body.sk-js .wc-block-grid__product {
  opacity: 0;
  transform: translateY(16px);
}
body.sk-js .sk-grid-revealed li.product,
body.sk-js .sk-grid-revealed .wc-block-grid__product {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ---------- Header : ombre douce au scroll ---------- */
.sk-header-scrolled {
  box-shadow: 0 4px 24px rgba(18, 18, 18, 0.08);
}

/* ---------- Boutons : lumière orbitale (au survol) ---------- */
.wp-block-button__link,
.button,
a.button,
.ct-button,
.single_add_to_cart_button,
.woocommerce button.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.25s ease,
              background-color 0.25s ease,
              color 0.25s ease;
  z-index: 0;
}

/* Halo lumineux interne (comme le glow du coach) */
.wp-block-button__link::before,
.button::before,
a.button::before,
.ct-button::before,
.single_add_to_cart_button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at var(--sk-btn-x, 50%) var(--sk-btn-y, 50%),
              rgba(255, 255, 255, 0.45) 0%,
              rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Lumière qui fait le tour : dégradé conique rotatif sur le bord */
.wp-block-button__link::after,
.button::after,
a.button::after,
.ct-button::after,
.single_add_to_cart_button::after {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -2;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
              transparent 0deg,
              rgba(255, 255, 255, 0.9) 60deg,
              transparent 120deg,
              transparent 180deg,
              rgba(255, 255, 255, 0.5) 240deg,
              transparent 300deg);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  animation: sk-border-spin 2.5s linear infinite;
}

/* Bordure fine qui révèle le passage de la lumière */
.wp-block-button__link::after {
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 2px;
}

/* Hover : activation de la lumière + soulèvement */
.wp-block-button__link:hover,
.button:hover,
a.button:hover,
.ct-button:hover,
.single_add_to_cart_button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(18, 18, 18, 0.16);
}
.wp-block-button__link:hover::after,
.button:hover::after,
a.button:hover::after,
.ct-button:hover::after,
.single_add_to_cart_button:hover::after {
  opacity: 1;
}
.wp-block-button__link:hover::before,
.button:hover::before,
a.button:hover::before,
.ct-button:hover::before,
.single_add_to_cart_button:hover::before {
  opacity: 0.5;
}

/* Pression : retour élastique */
.wp-block-button__link:active,
.button:active,
a.button:active,
.ct-button:active,
.single_add_to_cart_button:active,
.woocommerce button.button:active {
  transform: scale(0.96);
  transition: transform 80ms ease-out;
}

/* ---------- Reduced motion : tout désactiver ---------- */
@media (prefers-reduced-motion: reduce) {
  .sk-reveal,
  body.sk-js .sk-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  ul.products li.product,
  .products li.product,
  .wc-block-grid__product {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .wp-block-button__link::after,
  .button::after,
  a.button::after,
  .ct-button::after,
  .single_add_to_cart_button::after {
    animation: none;
    opacity: 0;
  }
  .wp-block-button__link:hover,
  .button:hover,
  a.button:hover,
  .ct-button:hover,
  .single_add_to_cart_button:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ---------- Keyframes ---------- */
@keyframes sk-border-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ---------- Section Valeurs / Engagement (3 cartes) ---------- */
.sk-values-grid {
  gap: 24px;
  max-width: 1200px;
  margin: 24px auto 0;
}
.sk-value-card {
  background: #FFFFFF;
  border: 1px solid rgba(125, 85, 69, 0.15);
  border-radius: 8px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(18, 18, 18, 0.05);
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.25s ease;
}
.sk-value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(18, 18, 18, 0.10);
}
.sk-value-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  color: #7D5545;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.sk-value-card p {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #121212;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 782px) {
  .sk-values-grid {
    gap: 16px;
  }
  .sk-value-card {
    padding: 24px 16px;
  }
}


/* ============================================================
   ÉVOLUTION DOUCE (17/08/2026) — Blanc pur + Gold scintillant
   Fond blanc, gold renforcé, terracotta CTA conservé, noir conservé
   ============================================================ */

/* Fond général : blanc pur (override Blocksy) */
body,
.ct-container,
.ct-site-inner,
.site-main,
.woocommerce-page,
.woocommerce {
  background-color: #FFFFFF !important;
}

/* Titres du hero sur fond sombre : gold scintillant */
.sk-hero h1,
.sk-hero .wp-block-heading {
  color: #E0C078 !important;
  text-shadow: 0 2px 30px rgba(224, 192, 120, 0.25);
}
.sk-hero .sk-hero-kicker,
.sk-hero p.has-text-align-center[style*="D4B26F"] {
  color: #E0C078 !important;
  letter-spacing: 0.14em;
}

/* Prix produits : gold scintillant */
.woocommerce ul.products li.product .price,
.wc-block-grid__product .wc-block-grid__product-price,
.woocommerce .product .price {
  color: #B8860B !important; /* Dark Goldenrod : AA sur blanc */
  font-weight: 600;
}
.woocommerce ul.products li.product .price .amount,
.wc-block-grid__product .wc-block-grid__product-price .amount {
  color: #B8860B !important;
}

/* Bordures et séparateurs : gold scintillant */
.sk-value-card {
  border-color: rgba(224, 192, 120, 0.45) !important;
  box-shadow: 0 2px 16px rgba(224, 192, 120, 0.10);
}
.sk-value-card h3 {
  color: #B8860B !important;
}

/* Boutons secondaires : gold scintillant (texte noir AA 10.69:1)
   Seulement les boutons NON primaires — les CTA (terracotta) restent terracotta */
.wp-block-button.is-style-outline .wp-block-button__link,
a.button.alt,
.woocommerce a.button.secondary,
.wp-block-button__link[href*="notre-histoire"],
button.button-secondary {
  background-color: #E0C078 !important;
  color: #121212 !important;
}

/* Lien actif du header : trait gold */
.ct-header nav ul li.current-menu-item a,
.ct-header nav ul li.current_page_item a {
  box-shadow: inset 0 -2px 0 #E0C078;
}

/* Section histoire : séparateur gold */
.sk-values-grid + .wp-block-heading,
h2[data-i18n="histoire_title"] {
  position: relative;
}
h2[data-i18n="histoire_title"]::after {
  content: '';
  display: block;
  width: 64px;
  height: 2px;
  background: #E0C078;
  margin: 16px auto 0;
}


/* ============================================================
   LOGO ANIMÉ (Option A - 17/08/2026)
   Monogramme apparaît (0.3s), puis logotype glisse (0.6s)
   Animation UNE FOIS au chargement, pas de boucle
   ============================================================ */
.sk-animated-logo {
  display: flex !important;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

/* Monogramme : fade-in + léger scale */
.sk-logo-mono {
  display: inline-flex;
  animation: sk-logo-mono-in 0.3s ease-out both;
}
.sk-logo-mono img {
  height: 72px !important;
  width: auto !important;
  max-height: 72px !important;
}

/* Logotype : glisse depuis la droite (delay = fin du monogramme) */
.sk-logo-type {
  display: inline-flex;
  opacity: 0;
  transform: translateX(-16px);
  animation: sk-logo-type-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}
.site-logo-container .sk-logo-type img,
.ct-header .site-logo-container .sk-logo-type img,
.sk-animated-logo .sk-logo-type img {
  height: 52px !important;
  width: auto !important;
  max-height: 52px !important;
}

@keyframes sk-logo-mono-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sk-logo-type-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Reduced motion : pas d'animation, tout visible */
@media (prefers-reduced-motion: reduce) {
  .sk-logo-mono,
  .sk-logo-type {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Mobile : logotype plus petit pour ne pas casser le header */
@media (max-width: 782px) {
  .sk-logo-mono img {
    height: 56px !important;
  }
  .site-logo-container .sk-logo-type img,
  .ct-header .site-logo-container .sk-logo-type img,
  .sk-animated-logo .sk-logo-type img {
    height: 40px !important;
    max-height: 40px !important;
  }
}