/*
Theme Name: Maison Patinée Enfant
Theme URI: https://maisonpatinee.com
Author: Maison Patinée
Author URI: https://maisonpatinee.com
Description: Thème enfant GeneratePress — charte 11ty (palette corten) intégrée à WooCommerce
Version: 2.0.0
Template: generatepress
License: GPL v2 or later
Text Domain: maisonpatinee-enfant
*/

/* ============================================================
   TOKENS — source unique de vérité graphique Maison Patinée
   ============================================================ */
:root {
  --encre: #201512;
  --brou: #33241C;
  --oxyde: #A34E2C;
  --rouille: #C67F45;
  --calcaire: #EDE9E2;
  --pierre: #DFD8CC;
  --eau: #75857E;
  --texte: #2B211C;
  --texte-doux: #6B5D53;

  --filet-oxyde: rgba(163, 78, 44, 0.25);
  --filet-rouille: rgba(198, 127, 69, 0.22);
  --calcaire-voile: rgba(237, 233, 226, 0.65);

  --display: 'Fraunces', Georgia, serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --taille-h1: clamp(2.6rem, 6vw, 4.5rem);
  --taille-h2: clamp(2rem, 4.5vw, 3.2rem);
  --taille-h3: 1.5rem;

  --section-y: 5rem;
  --inner-max: 1200px;
  --rayon: 2px;
  --sortie: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--sans);
  background: var(--calcaire);
  color: var(--texte);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--encre); }
h1 { font-size: var(--taille-h1); }
h2 { font-size: var(--taille-h2); }
h3 { font-size: var(--taille-h3); }
h2 em, h1 em { font-style: italic; font-weight: 300; color: var(--oxyde); }
a { color: var(--oxyde); }
a:hover { color: var(--encre); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--rouille); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.site-content { background: var(--calcaire); }
.entry-title { font-family: var(--display); }

/* ============================================================
   HEADER GENERATEPRESS
   ============================================================ */
.site-header {
  background: var(--encre);
  border-bottom: 1px solid var(--filet-rouille);
}
.site-header .header-widget, .site-header .inside-header { max-width: var(--inner-max); }
.main-navigation .main-nav > ul > li > a {
  color: rgba(237, 233, 226, 0.85);
  font-size: .85rem; font-weight: 500; letter-spacing: .04em;
}
.main-navigation .main-nav > ul > li > a:hover { color: var(--rouille); }
.site-header .site-logo, .site-header .site-title, .site-header .site-description { color: var(--calcaire); }
.main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--rouille); }
.main-navigation.toggled .menu-toggle { color: var(--calcaire); }

/* ============================================================
   CHROME 11TY — header + footer (reproduits de base.css)
   ============================================================ */
header.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 3rem;
  background: var(--encre);
  transition: background .4s, box-shadow .4s, padding .4s;
}
header.site.scrolled {
  background: rgba(32, 21, 18, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: .75rem 3rem;
  box-shadow: 0 1px 0 var(--filet-rouille);
}
.brand { display: flex; flex-direction: column; color: var(--calcaire); line-height: 1.15; }
.brand-name { font-family: var(--display); font-size: 1.25rem; font-weight: 500; letter-spacing: .02em; color: var(--calcaire); }
.brand-name em { font-style: italic; font-weight: 300; color: var(--rouille); }
.brand-sub { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(237, 233, 226, 0.55); }
nav.principale { display: flex; gap: 2.2rem; align-items: center; }
nav.principale a {
  color: rgba(237, 233, 226, 0.85);
  font-size: .85rem; font-weight: 500; letter-spacing: .04em;
  position: relative; padding: .25rem 0; text-decoration: none;
}
nav.principale a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--rouille); transition: width .3s;
}
nav.principale a:hover::after, nav.principale a:focus-visible::after { width: 100%; }
nav.principale a:hover { color: var(--rouille); }
.nav-panier {
  border: 1px solid rgba(198, 127, 69, 0.5);
  padding: .45rem 1.1rem !important; border-radius: 2rem;
  transition: background .3s, border-color .3s;
}
.nav-panier:hover { background: rgba(163, 78, 44, 0.25); border-color: var(--rouille); }
.nav-panier::after { display: none; }
.burger { display: none; background: none; border: none; cursor: pointer; z-index: 110; padding: .4rem; }
.burger span { display: block; width: 26px; height: 2px; background: var(--calcaire); margin: 6px 0; transition: transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
header.site.opaque { background: var(--encre); }

footer.site { background: var(--encre); color: rgba(237, 233, 226, 0.6); border-top: 1px solid var(--filet-rouille); }
.footer-haut {
  max-width: var(--inner-max); margin: 0 auto; padding: 3.5rem 3rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem;
}
.footer-marque .brand-name { font-size: 1.4rem; color: var(--calcaire); }
.footer-marque p { font-size: .9rem; max-width: 22rem; margin-top: .8rem; }
footer.site h4 {
  font-family: var(--sans);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--rouille); font-weight: 600; margin-bottom: 1rem;
}
footer.site ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; margin: 0; }
footer.site ul a { font-size: .9rem; transition: color .3s; color: rgba(237, 233, 226, 0.7); text-decoration: none; }
footer.site ul a:hover { color: var(--calcaire); }
.footer-bas {
  border-top: 1px solid rgba(237, 233, 226, 0.08);
  padding: 1.4rem 3rem; text-align: center;
  font-size: .78rem; color: rgba(237, 233, 226, 0.35);
}

/* Masquer les anciens éléments GP header/footer */
.site-header, .site-footer .inside-navigation, .main-navigation, .header-widget { display: none; }

@media (max-width: 960px) {
  header.site { padding: 1.1rem 1.5rem; }
  header.site.scrolled { padding: .75rem 1.5rem; }
  nav.principale {
    position: fixed; inset: 0;
    background: rgba(32, 21, 18, 0.97);
    flex-direction: column; justify-content: center; gap: 2.4rem;
    opacity: 0; pointer-events: none; transition: opacity .35s;
    z-index: 200;
  }
  nav.principale.ouvert { opacity: 1; pointer-events: auto; }
  nav.principale a { font-size: 1.3rem; }
  .burger { display: block; z-index: 210; }
  .footer-haut { grid-template-columns: 1fr; gap: 2.2rem; padding: 3rem 1.5rem; }
}
body.menu-ouvert { overflow: hidden; }
/* Le backdrop-filter du header scrolled casserait le position:fixed du menu mobile */
body.menu-ouvert header.site,
body.menu-ouvert header.site.scrolled {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--encre);
}

/* ============================================================
   CONTENU PRINCIPAL (décalage header fixe)
   ============================================================ */
.woocommerce .content-area, .woocommerce-page .content-area,
.woocommerce .site-content .content-area, .woocommerce-page .site-content .content-area {
  padding: 8rem 3rem 5rem;
}
@media (max-width: 960px) {
  .woocommerce .content-area, .woocommerce-page .content-area,
  .woocommerce .site-content .content-area, .woocommerce-page .site-content .content-area {
    padding: 7rem 1.5rem 4rem;
  }
}

/* ============================================================
   SUPPRESSION SIDEBARS GP SUR WOOCOMMERCE (pleine largeur)
   ============================================================ */
.woocommerce .sidebar, .woocommerce-page .sidebar,
.woocommerce .widget-area, .woocommerce-page .widget-area { display: none !important; }
.woocommerce .content-area, .woocommerce-page .content-area,
.woocommerce .site-content .content-area, .woocommerce-page .site-content .content-area { width: 100% !important; }

/* ============================================================
   BOUTONS / CTA
   ============================================================ */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .button,
.woocommerce .woocommerce-button,
.woocommerce .wc-block-components-button {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--sans);
  font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--calcaire);
  border: 1px solid rgba(198, 127, 69, 0.6);
  padding: .9rem 1.9rem; border-radius: 3rem;
  background: rgba(163, 78, 44, 0.14);
  transition: background .35s, border-color .35s, transform .35s;
  text-decoration: none;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .button:hover,
.woocommerce .woocommerce-button:hover,
.woocommerce .wc-block-components-button:hover {
  background: var(--oxyde); border-color: var(--oxyde); color: var(--calcaire);
  transform: translateY(-2px);
}

/* ============================================================
   BOUTIQUE — grille produits
   ============================================================ */
.woocommerce ul.products { gap: 1.8rem; }
.woocommerce ul.products li.product {
  background: var(--pierre);
  border: 1px solid var(--filet-oxyde);
  border-radius: var(--rayon);
  padding-bottom: 1.2rem;
  transition: transform .4s var(--sortie), box-shadow .4s;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(32, 21, 18, 0.4); }
.woocommerce ul.products li.product a img {
  border-radius: var(--rayon) var(--rayon) 0 0;
  transition: transform .8s var(--sortie);
  margin-bottom: 0;
}
.woocommerce ul.products li.product a:hover img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--display); font-size: 1.3rem; font-weight: 400; color: var(--encre);
  padding: .9rem 1.1rem 0;
}
.woocommerce ul.products li.product .price {
  font-family: var(--display); font-size: 1.1rem; color: var(--oxyde);
  padding: .3rem 1.1rem;
}
.woocommerce ul.products li.product .price del { color: var(--texte-doux); }
.woocommerce ul.products li.product .button {
  margin: .5rem 1.1rem .4rem;
  font-size: .75rem; padding: .7rem 1.4rem;
}
.woocommerce ul.products li.product .onsale {
  background: var(--oxyde); color: var(--calcaire);
  border-radius: 50%; padding: .3em .6em; min-width: 2.6em; min-height: 2.6em;
  line-height: 2.4; font-size: .75rem; font-weight: 600; margin: 0;
  top: .8em; right: .8em;
}
.woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--rouille); }

/* ============================================================
   FICHE PRODUIT
   ============================================================ */
.woocommerce div.product div.summary .product_title { font-family: var(--display); font-size: 2.2rem; color: var(--encre); }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-family: var(--display); font-size: 1.5rem; color: var(--oxyde);
}
.woocommerce div.product p.price del { color: var(--texte-doux); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-doux);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--oxyde); }
.woocommerce div.product .quantity .qty {
  border: 1px solid var(--filet-oxyde); border-radius: 3rem;
  padding: .55rem .9rem; background: var(--calcaire); color: var(--texte);
}
.woocommerce div.product form.cart { margin-top: 1.4rem; }
.woocommerce div.product form.cart .button { margin-left: .6rem; }
.woocommerce .product_meta { font-size: .85rem; color: var(--texte-doux); }
.woocommerce .product_meta a { color: var(--oxyde); }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  border: 1px solid var(--filet-oxyde); background: var(--calcaire);
  color: var(--oxyde);
}

/* ============================================================
   PANIER
   ============================================================ */
.woocommerce table.shop_table {
  border: 1px solid var(--filet-oxyde);
  border-radius: var(--rayon);
  border-collapse: separate;
}
.woocommerce table.shop_table th {
  background: var(--encre); color: var(--calcaire);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600;
}
.woocommerce table.shop_table td { border-top: 1px solid var(--filet-oxyde); color: var(--texte); }
.woocommerce table.shop_table td a { color: var(--oxyde); }
.woocommerce table.shop_table td .amount { color: var(--encre); font-weight: 600; }
.woocommerce-cart table.cart img { border-radius: var(--rayon); }
.woocommerce .cart_totals { background: var(--pierre); border: 1px solid var(--filet-oxyde); border-radius: var(--rayon); }
.woocommerce .cart_totals h2 {
  font-family: var(--display); font-size: 1.5rem; color: var(--encre);
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--filet-oxyde);
}
.woocommerce .cart_totals table.shop_table { border: none; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: var(--oxyde); color: var(--calcaire);
  font-size: .85rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 1rem 2rem; border-radius: 3rem;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--encre); }
.woocommerce a.remove { color: var(--oxyde) !important; }
.woocommerce a.remove:hover { background: var(--oxyde); color: var(--calcaire) !important; }

/* ============================================================
   COMMANDER (checkout)
   ============================================================ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--calcaire);
  border: 1px solid var(--filet-oxyde);
  border-radius: var(--rayon);
  padding: .8rem 1rem;
  color: var(--texte);
  font-family: var(--sans);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: none; border-color: var(--rouille); }
.woocommerce form .form-row label { font-size: .78rem; letter-spacing: .1em; color: var(--texte-doux); font-weight: 600; }
.woocommerce #payment {
  background: var(--pierre); border: 1px solid var(--filet-oxyde); border-radius: var(--rayon);
}
.woocommerce #payment div.payment_box { background: var(--calcaire); color: var(--texte); }
.woocommerce #payment div.payment_box::before { border-bottom-color: var(--calcaire); }
.woocommerce #place_order, .woocommerce-page #place_order {
  background: var(--oxyde) !important; color: var(--calcaire) !important;
  font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 1.1rem 2.4rem; border-radius: 3rem; border: none;
}
.woocommerce #place_order:hover { background: var(--encre) !important; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 3px solid var(--oxyde);
  background: var(--pierre);
  color: var(--texte);
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: var(--oxyde); }

/* ============================================================
   MON COMPTE
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--encre);
  border-radius: var(--rayon);
  padding: .8rem 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  color: rgba(237, 233, 226, 0.8);
  padding: .7rem 1.4rem;
  font-size: .9rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { color: var(--rouille); }
.woocommerce-account .woocommerce-MyAccount-content { background: var(--pierre); border: 1px solid var(--filet-oxyde); border-radius: var(--rayon); padding: 2rem; }
.woocommerce form.login, .woocommerce form.register {
  background: var(--pierre); border: 1px solid var(--filet-oxyde); border-radius: var(--rayon);
}

/* ============================================================
   CATEGORIES / ARCHIVES
   ============================================================ */
.woocommerce-products-header .page-title {
  font-family: var(--display); font-size: var(--taille-h2); color: var(--encre);
}
.woocommerce .term-description { color: var(--texte-doux); max-width: 60ch; }
.woocommerce .woocommerce-breadcrumb { font-size: .8rem; color: var(--texte-doux); }
.woocommerce .woocommerce-breadcrumb a { color: var(--oxyde); }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering select {
  font-size: .85rem; color: var(--texte-doux);
  border: 1px solid var(--filet-oxyde); border-radius: var(--rayon);
  padding: .45rem .8rem; background: var(--calcaire);
}
.woocommerce .woocommerce-pagination ul.page-numbers li a,
.woocommerce .woocommerce-pagination ul.page-numbers li span {
  border: 1px solid var(--filet-oxyde); color: var(--oxyde);
  padding: .5rem .9rem;
}
.woocommerce .woocommerce-pagination ul.page-numbers li span.current { background: var(--oxyde); color: var(--calcaire); border-color: var(--oxyde); }

/* ============================================================
   FOOTER GENERATEPRESS
   ============================================================ */
.site-footer { background: var(--encre); color: rgba(237, 233, 226, 0.6); border-top: 1px solid var(--filet-rouille); }
.site-footer .widget-title, .site-footer h2, .site-footer h3, .site-footer h4 {
  color: var(--rouille); font-family: var(--sans);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
}
.site-footer a { color: rgba(237, 233, 226, 0.75); }
.site-footer a:hover { color: var(--calcaire); }
.site-footer .copyright-bar { color: rgba(237, 233, 226, 0.35); font-size: .78rem; border-top: 1px solid rgba(237, 233, 226, 0.08); }

/* ============================================================
   NOTIFICATIONS & DIVERS
   ============================================================ */
.woocommerce div.product .stock.in-stock { color: var(--eau); }
.woocommerce div.product .stock.out-of-stock { color: var(--oxyde); }
.woocommerce .widget_price_filter .ui-slider .ui-slider-range { background: var(--oxyde); }
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--encre); }
.woocommerce .widget_price_filter .price_slider_amount .button { font-size: .78rem; }
.woocommerce .widget_products .product-title, .woocommerce .widget_recently_viewed_products .product-title { color: var(--encre); }

/* --- Responsive --- */
@media (max-width: 768px) {
  .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product { width: 100%; }
  .woocommerce table.shop_table_responsive tr:nth-child(2n) td { background: var(--pierre); }
}