/*
Theme Name: Fasboa
Theme URI: https://fasboa.com
Description: Thème enfant sur-mesure pour Fasboa — boutique de vêtements en pièces uniques confectionnées à partir de chutes de tissu. Direction « Atelier » : éditorial, tactile, terre cuite sur écru. Mobile-first. Parent : Astra.
Author: Fasboa
Version: 0.1.0
Template: astra
Text Domain: fasboa
*/

/* =========================================================================
   DESIGN TOKENS  —  remplace ces valeurs par ta charte réelle (couleurs, typo)
   ========================================================================= */
:root {
  /* Palette « Route » — van-life & plein air */
  --fb-paper:      #EFE6D3; /* fond sable chaud          */
  --fb-paper-2:    #E5D9BF; /* panneaux, cartes          */
  --fb-paper-3:    #DBCCAC; /* survols doux              */
  --fb-ink:        #221E17; /* encre (texte principal)   */
  --fb-ink-soft:   #5A5044; /* texte secondaire          */
  --fb-clay:       #C6552E; /* accent terre cuite / soleil couchant */
  --fb-clay-deep:  #9E3F1E; /* accent foncé (survol)     */
  --fb-pine:       #2F4A3A; /* vert sapin / outdoor      */
  --fb-pine-soft:  #4A6B56; /* vert clair                */
  --fb-line:       #CDBE9E; /* filets / hairlines        */
  --fb-sold:       #8A8171; /* état « vendu »            */

  /* Typographies */
  --fb-font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --fb-font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* Rythme & rayons */
  --fb-radius:   3px;
  --fb-radius-lg: 6px;
  --fb-gap:      clamp(1rem, 3vw, 2rem);
  --fb-page-x:   clamp(1.1rem, 5vw, 4rem);
  --fb-maxw:     1280px;

  /* Ombres douces, papier */
  --fb-shadow:   0 1px 2px rgba(33,28,22,.05), 0 8px 30px -12px rgba(33,28,22,.18);
  --fb-shadow-lg: 0 20px 60px -24px rgba(33,28,22,.35);

  /* Transitions */
  --fb-ease: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================================
   BASE
   ========================================================================= */
html { scroll-behavior: smooth; }

body {
  background: var(--fb-paper);
  color: var(--fb-ink);
  font-family: var(--fb-font-body);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Grain textile très léger */
  background-image:
    radial-gradient(rgba(33,28,22,.018) 1px, transparent 1px);
  background-size: 3px 3px;
}

h1, h2, h3, .fb-display {
  font-family: var(--fb-font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fb-ink);
}

h1 { font-size: clamp(2.4rem, 8vw, 5rem); }
h2 { font-size: clamp(1.8rem, 5vw, 3rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); }

a { color: var(--fb-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--fb-clay-deep); }

::selection { background: var(--fb-clay); color: var(--fb-paper); }

.fb-eyebrow {
  font-family: var(--fb-font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fb-clay-deep);
}

/* Filet « couture » réutilisable */
.fb-stitch {
  border: 0;
  border-top: 1.5px dashed var(--fb-line);
  margin: var(--fb-gap) 0;
}

/* =========================================================================
   BOUTONS
   ========================================================================= */
.fb-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit {
  font-family: var(--fb-font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: .85em 1.6em;
  border-radius: var(--fb-radius);
  background: var(--fb-ink);
  color: var(--fb-paper) !important;
  border: 1.5px solid var(--fb-ink);
  transition: transform .25s var(--fb-ease), background .25s var(--fb-ease), color .25s var(--fb-ease);
  line-height: 1.1;
}
.fb-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover {
  background: var(--fb-clay);
  border-color: var(--fb-clay);
  color: var(--fb-paper) !important;
  transform: translateY(-2px);
}

.woocommerce div.product form.cart .button.single_add_to_cart_button,
.fb-btn--accent {
  background: var(--fb-clay);
  border-color: var(--fb-clay);
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
  background: var(--fb-clay-deep);
  border-color: var(--fb-clay-deep);
}

.fb-btn--ghost {
  background: transparent;
  color: var(--fb-ink) !important;
  border-color: var(--fb-ink);
}
.fb-btn--ghost:hover { background: var(--fb-ink); color: var(--fb-paper) !important; }

/* =========================================================================
   MARQUAGE « PIÈCE UNIQUE »  (façon étiquette cousue)
   ========================================================================= */
.fb-unique {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--fb-font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fb-clay-deep);
  padding: .4em .7em;
  background: var(--fb-paper);
  border: 1.4px dashed var(--fb-clay);
  border-radius: var(--fb-radius);
}
.fb-unique::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fb-clay);
}

.fb-sold {
  color: var(--fb-sold);
  border-color: var(--fb-sold);
}
.fb-sold::before { background: var(--fb-sold); }

/* =========================================================================
   GRILLE CATALOGUE  (galerie de pièces)
   ========================================================================= */
.woocommerce ul.products,
.fb-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 3vw, 2.4rem) clamp(.9rem, 2.5vw, 1.6rem);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
@media (min-width: 720px)  { .woocommerce ul.products, .fb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .woocommerce ul.products, .fb-grid { grid-template-columns: repeat(4, 1fr); } }

.woocommerce ul.products li.product,
.fb-card {
  position: relative;
  margin: 0 !important;
  width: auto !important;
  text-align: left;
}
.woocommerce ul.products li.product a img,
.fb-card__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--fb-radius-lg);
  margin: 0 0 .8rem;
  background: var(--fb-paper-2);
  transition: transform .5s var(--fb-ease), filter .5s var(--fb-ease);
}
.fb-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--fb-radius-lg);
  box-shadow: var(--fb-shadow);
}
.woocommerce ul.products li.product:hover a img,
.fb-card:hover .fb-card__media img { transform: scale(1.04); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.fb-card__title {
  font-family: var(--fb-font-display) !important;
  font-size: 1.12rem !important;
  font-weight: 460 !important;
  padding: 0 !important;
  margin: .1rem 0 .15rem !important;
  color: var(--fb-ink);
}
.woocommerce ul.products li.product .price,
.fb-card__price {
  font-family: var(--fb-font-body) !important;
  color: var(--fb-ink-soft) !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
}
.woocommerce ul.products li.product .price del { color: var(--fb-sold) !important; opacity: .7; }

/* badge posé sur l'image */
.fb-card__media .fb-unique {
  position: absolute;
  top: .7rem; left: .7rem;
  z-index: 2;
  backdrop-filter: blur(2px);
}

/* =========================================================================
   FICHE PRODUIT
   ========================================================================= */
.woocommerce div.product { margin-top: 1rem; }
.woocommerce div.product div.images img { border-radius: var(--fb-radius-lg); }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--fb-clay-deep);
  font-family: var(--fb-font-body);
  font-weight: 700;
  font-size: 1.5rem;
}
.woocommerce div.product .product_title {
  font-size: clamp(2rem, 6vw, 3rem);
  margin-bottom: .3rem;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--fb-ink-soft);
  font-size: 1.05rem;
}

/* Bloc partage social */
.fb-share { margin: 1.6rem 0 0; }
.fb-share__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fb-ink-soft); margin: 0 0 .6rem;
}
.fb-share__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.fb-share__btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .55em .9em;
  border: 1.4px solid var(--fb-line);
  border-radius: var(--fb-radius);
  background: var(--fb-paper);
  color: var(--fb-ink);
  font-size: .85rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .2s var(--fb-ease), background .2s var(--fb-ease), transform .2s var(--fb-ease);
}
.fb-share__btn:hover { border-color: var(--fb-clay); background: var(--fb-paper-2); transform: translateY(-1px); }
.fb-share__btn svg { width: 17px; height: 17px; }
.fb-share__btn--native { background: var(--fb-ink); color: var(--fb-paper); border-color: var(--fb-ink); }
.fb-share__btn--native:hover { background: var(--fb-clay); border-color: var(--fb-clay); }

/* =========================================================================
   HERO / EN-TÊTE ÉDITORIAL  (pour page d'accueil, classes utilitaires)
   ========================================================================= */
.fb-container { max-width: var(--fb-maxw); margin-inline: auto; padding-inline: var(--fb-page-x); }

.fb-hero {
  padding: clamp(2.5rem, 9vw, 6rem) 0 clamp(2rem, 6vw, 4rem);
}
.fb-hero__title { max-width: 14ch; }
.fb-hero__title em {
  font-style: normal;
  color: var(--fb-clay);
}
.fb-hero__lead {
  max-width: 46ch;
  color: var(--fb-ink-soft);
  font-size: 1.1rem;
  margin-top: 1.2rem;
}

/* =========================================================================
   MOBILE-FIRST : confort tactile
   ========================================================================= */
.woocommerce ul.products li.product a { -webkit-tap-highlight-color: transparent; }
@media (max-width: 480px) {
  body { font-size: 16px; }
  .woocommerce ul.products, .fb-grid { gap: 1.3rem .9rem; }
}

/* Respect des préférences de mouvement */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}