/*
Theme Name: Blocksy Child — Pantin Fleurs
Theme URI: https://creativethemes.com/blocksy/
Description: Thème enfant Blocksy pour Pantin Fleurs — l'atelier du fleuriste : papier blanc, vert feuillage, carte message manuscrite en signature.
Author: Pantin Fleurs
Template: blocksy
Version: 2.0.0
Text Domain: blocksy-child-pantin-fleurs
*/

/* =========================================================
   1. Jetons de design — « l'atelier du fleuriste »
   papier : blanc cassé propre (pas de crème beige)
   feuillage : vert profond des tiges et feuilles
   dahlia : l'accent floral, rare et précieux
   kraft : le papier d'emballage, réservé aux bandeaux
   ========================================================= */
:root {
  /* Palette Blocksy */
  --theme-palette-color-1: #2e5339;   /* feuillage — primaire */
  --theme-palette-color-2: #1f3a27;   /* feuillage sombre — hover */
  --theme-palette-color-3: #1f2a20;   /* encre — texte */
  --theme-palette-color-4: #5f6a5e;   /* brume — texte secondaire */
  --theme-palette-color-5: #eadfcc;   /* kraft — bandeaux */
  --theme-palette-color-6: #fbfaf7;   /* papier — fond */
  --theme-palette-color-7: #b23a64;   /* dahlia — accent */
  --theme-palette-color-8: #ffffff;   /* surface pure */

  /* Alias Pantin Fleurs */
  --pf-papier: #fbfaf7;
  --pf-surface: #ffffff;
  --pf-kraft: #eadfcc;
  --pf-kraft-clair: #f4eee2;
  --pf-encre: #1f2a20;
  --pf-brume: #5f6a5e;
  --pf-ligne: #e4e1da;
  --pf-feuillage: #2e5339;
  --pf-feuillage-sombre: #1f3a27;
  --pf-dahlia: #b23a64;
  --pf-radius: 14px;
  --pf-ombre: 0 8px 24px rgba(31, 42, 32, .07);

  /* Couleurs fonctionnelles Blocksy */
  --theme-text-color: var(--pf-encre);
  --theme-link-initial-color: var(--pf-feuillage);
  --theme-link-hover-color: var(--pf-feuillage-sombre);
  --theme-button-background-initial-color: var(--pf-feuillage);
  --theme-button-background-hover-color: var(--pf-feuillage-sombre);
  --theme-button-border-radius: 12px;
  --theme-border-radius: var(--pf-radius);
}

body {
  background-color: var(--pf-papier);
  font-family: "Karla", system-ui, sans-serif;
  color: var(--pf-encre);
}

/* =========================================================
   2. Typographie — Fraunces porte la voix, Karla la lecture
   ========================================================= */
h1, h2, h3, h4,
.entry-title,
.woocommerce-loop-product__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.3rem); line-height: 1.08; }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.15; }
h3 { font-size: 1.3rem; }

/* La signature : l'étiquette manuscrite, comme la carte offerte
   avec chaque bouquet. Utilisée avec parcimonie (sur-titres). */
.pf-kicker {
  display: inline-block;
  font-family: "Caveat", cursive;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pf-encre);
  background: var(--pf-kraft);
  padding: 6px 18px 8px;
  border-radius: 3px 14px 4px 12px; /* coins irréguliers, coupé main */
  transform: rotate(-1.2deg);
  box-shadow: 0 3px 8px rgba(31, 42, 32, .12);
}

/* =========================================================
   3. Boutons — nets, artisanaux, sans effet gadget
   ========================================================= */
.wp-block-button__link,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  border-radius: 12px;
  background-color: var(--pf-feuillage);
  color: #fff;
  padding: 12px 22px;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  transition: background-color .18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wp-block-button__link:hover {
  background-color: var(--pf-feuillage-sombre);
  color: #fff;
}

.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1.5px solid var(--pf-ligne);
  color: var(--pf-encre);
}

.is-style-outline .wp-block-button__link:hover {
  border-color: var(--pf-feuillage);
  background: transparent;
  color: var(--pf-feuillage);
}

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--pf-dahlia);
  outline-offset: 2px;
}

/* =========================================================
   4. Cartes produits WooCommerce
   ========================================================= */
.woocommerce ul.products li.product {
  background: var(--pf-surface);
  border: 1px solid var(--pf-ligne);
  border-radius: var(--pf-radius);
  box-shadow: none;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.woocommerce ul.products li.product:hover {
  border-color: transparent;
  box-shadow: var(--pf-ombre);
}

.woocommerce ul.products li.product a img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
  margin-left: 18px;
  margin-right: 18px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.2rem;
  padding-top: 16px;
}

.woocommerce ul.products li.product .price {
  color: var(--pf-encre);
  font-weight: 700;
  font-family: "Karla", sans-serif;
}

.woocommerce ul.products li.product .button {
  margin-bottom: 18px;
}

/* Le badge promo, en dahlia : seul élément vif de la grille */
.woocommerce span.onsale {
  background: var(--pf-dahlia);
  border-radius: 3px 12px 4px 10px;
  padding: 6px 12px;
  font-family: "Caveat", cursive;
  font-size: 1.05rem;
  line-height: 1.3;
  min-height: 0;
  min-width: 0;
  transform: rotate(-2deg);
}

/* =========================================================
   5. Fiche produit, panier, checkout
   ========================================================= */
.woocommerce div.product .summary .price {
  color: var(--pf-encre);
  font-size: 1.4rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty {
  border: 1px solid var(--pf-ligne);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--pf-feuillage);
  border-radius: 12px;
  background: var(--pf-surface);
}

/* =========================================================
   6. Encadrés et rythme des pages
   ========================================================= */
.entry-content .wp-block-columns {
  align-items: stretch;
  gap: 24px;
  margin-bottom: 32px;
}

.entry-content .wp-block-column.pf-card {
  display: flex;
  flex-direction: column;
  padding: 26px;
  margin: 0;
}

.pf-card {
  background: var(--pf-surface);
  border: 1px solid var(--pf-ligne);
  border-radius: var(--pf-radius);
  box-shadow: none;
  padding: 24px;
}

.pf-card > h3,
.pf-card > .wp-block-heading {
  margin-top: 0;
  margin-bottom: 10px;
}

.pf-card > p { margin-top: 0; }
.pf-card > p:last-child { margin-bottom: 0; }

/* Avis clients façon carte message : ajouter la classe
   « pf-avis » à la colonne (Réglages du bloc → Avancé). */
.wp-block-column.pf-card.pf-avis {
  background: var(--pf-kraft-clair);
  border: none;
  border-radius: 4px 16px 5px 14px;
  box-shadow: 0 4px 14px rgba(31, 42, 32, .10);
  transform: rotate(-.8deg);
}

.wp-block-column.pf-card.pf-avis:nth-child(2n) {
  transform: rotate(.7deg);
}

.wp-block-column.pf-card.pf-avis > p:first-child {
  font-family: "Caveat", cursive;
  font-size: 1.35rem;
  line-height: 1.35;
}

/* Images des cartes occasions : format uniforme */
.entry-content .wp-block-column .wp-block-image {
  margin: 0 0 14px;
}

.entry-content .wp-block-column .wp-block-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.entry-content .wp-block-column > h3 a {
  color: var(--pf-encre);
  text-decoration: none;
}

.entry-content .wp-block-column > h3 a:hover {
  color: var(--pf-dahlia);
}

/* Hero : hauteur maîtrisée, texte resserré */
.entry-content .wp-block-cover {
  min-height: clamp(400px, 55vh, 540px);
  border-radius: 0;
}

.entry-content .wp-block-cover .wp-block-cover__inner-container {
  max-width: 720px;
  padding: 24px;
}

.entry-content .wp-block-cover h1 {
  margin: 16px 0 12px;
}

/* Respiration entre sections */
.entry-content > h2 {
  margin-top: 56px;
  margin-bottom: 8px;
}

.entry-content > h2 + p {
  margin-bottom: 26px;
  color: var(--pf-brume);
}

.pf-band {
  background: var(--pf-kraft);
  border: none;
  border-radius: var(--pf-radius);
  padding: 28px;
}

.entry-content .pf-band {
  margin-top: 48px;
  margin-bottom: 24px;
}

.pf-band > h3 { margin-top: 0; }

.entry-content .wp-block-buttons { gap: 10px; }

.wp-block-details {
  background: var(--pf-surface);
  border: 1px solid var(--pf-ligne);
  border-radius: 12px;
  padding: 16px 20px;
}

.wp-block-details summary {
  font-weight: 700;
  font-family: "Karla", sans-serif;
  cursor: pointer;
}

/* Boutique : 3 colonnes aérées sur grand écran */
@media (min-width: 1000px) {
  [data-products] {
    --shop-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 781px) {
  .entry-content .wp-block-columns { gap: 16px; }
  .entry-content .wp-block-column.pf-card { padding: 20px; }
}

/* =========================================================
   7. Bouton d'appel flottant — mobile uniquement
   ========================================================= */
.pf-call-btn {
  display: none;
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  background: var(--pf-feuillage);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 10px 26px rgba(31, 42, 32, .3);
  white-space: nowrap;
}

.pf-call-btn:hover,
.pf-call-btn:focus {
  background: var(--pf-feuillage-sombre);
  color: #fff;
}

@media (max-width: 782px) {
  .pf-call-btn { display: inline-flex; }
  body { padding-bottom: 72px; }
}

/* Carte Google Maps (page Contact) */
.pf-map iframe {
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: var(--pf-radius);
  box-shadow: var(--pf-ombre);
}

/* =========================================================
   8. Accessibilité — mouvement réduit respecté
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .pf-kicker,
  .wp-block-column.pf-card.pf-avis,
  .woocommerce span.onsale {
    transform: none;
  }
}