/*
Theme Name: Pantin Fleurs — Blocksy Child
Theme URI: https://pantinfleurs.fr
Description: Thème enfant Blocksy pour Pantin Fleurs, fleuriste artisan à Pantin. Identité visuelle "l'atelier du fleuriste" avec palette papier/feuillage et corrections UX/UI e-commerce.
Author: Pantin Fleurs
Author URI: https://pantinfleurs.fr
Template: blocksy
Version: 4.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pantin-fleurs
Domain Path: /languages
*/

/* ========================================================================
   VARIABLES CSS — Identité Visuelle
   ======================================================================== */

:root {
  /* Palette principale */
  --pf-papier: #fbfaf7;
  --pf-feuillage: #2e5339;
  --pf-kraft: #eadfcc;
  --pf-dahlia: #b23a64;
  --pf-encre: #1f2a20;

  /* Blanc pur réservé aux visuels produit */
  --pf-blanc: #FFFFFF;

  /* Rayons de bordure (UX-03) */
  --pf-radius-sm: 0.625rem;  /* 10px */
  --pf-radius-md: 1rem;      /* 16px */
  --pf-radius-lg: 1.25rem;   /* 20px */
}

/* ========================================================================
   BASE
   ======================================================================== */

body {
  background: var(--pf-papier);
  color: var(--pf-encre);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Text wrapping optimisé (ANALYSE-UX-UI) */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* ========================================================================
   IMAGES — Outlines & Rayons Concentriques (ANALYSE-UX-UI)
   ======================================================================== */

/* Image outlines pour délimitation sur fond cream */
img {
  outline: 1px solid rgba(0, 0, 0, 0.08);
  outline-offset: -1px;
}

@media (prefers-color-scheme: dark) {
  img {
    outline-color: rgba(255, 255, 255, 0.1);
  }
}

/* Rayons concentriques — parent et enfant coordonnés */
.product-card,
.woocommerce ul.products li.product {
  border-radius: var(--pf-radius-md);
  overflow: hidden;
}

.product-card img,
.woocommerce ul.products li.product img {
  border-radius: 0;
}

/* ========================================================================
   PRIX — Tabular Numbers (ANALYSE-UX-UI)
   ======================================================================== */

.price,
.woocommerce-Price-amount,
[data-price],
.cart-total,
.woocommerce-Price-currencySymbol,
.order-total .woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
}

/* ========================================================================
   BOUTONS & INTERACTIONS
   ======================================================================== */

/* Active states (ANALYSE-UX-UI) */
button:active,
.wp-block-button__link:active,
.woocommerce button.button:active,
.woocommerce a.button:active,
.button:active,
input[type="submit"]:active {
  transform: scale(0.96);
  transition-duration: 100ms;
}

/* Loading state pour boutons e-commerce */
.button[data-loading],
.woocommerce button.button[data-loading] {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.button[data-loading]::after,
.woocommerce button.button[data-loading]::after {
  content: "";
  position: absolute;
  right: 1rem;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pf-spin 600ms linear infinite;
}

@keyframes pf-spin {
  to { transform: rotate(360deg); }
}

/* Focus visible amélioré */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid var(--pf-dahlia);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(178, 58, 100, 0.15);
}

/* Hit areas minimum 44×44px (ANALYSE-UX-UI) */
nav a,
.menu a,
.ct-header a {
  padding: 0.75rem 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ========================================================================
   HÉROS D'ACCUEIL — Correction UX-06
   ======================================================================== */

/* Retire le min-height:480px en style inline du bloc importé */
.hero-section,
.ct-hero {
  min-height: clamp(420px, 58vh, 560px) !important;
}

@media (max-width: 767px) {
  .hero-section,
  .ct-hero {
    min-height: clamp(360px, 58vh, 480px) !important;
  }
}

/* ========================================================================
   BANDEAU DE RÉASSURANCE — Visible sur mobile (F21)
   ======================================================================== */

.pf-reassurance-banner {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--pf-kraft);
  font-size: 0.875rem;
}

@media (max-width: 767px) {
  .pf-reassurance-banner {
    font-size: 0.8125rem;
    gap: 0.5rem;
  }
}

/* ========================================================================
   PRODUITS — Cartes & Hover
   ======================================================================== */

.woocommerce ul.products li.product {
  transition: transform 280ms ease-out, box-shadow 280ms ease-out;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(31, 42, 32, 0.08),
    0 12px 32px -8px rgba(31, 42, 32, 0.22);
}

.woocommerce ul.products li.product img {
  transition: transform 280ms ease-out;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.04);
}

/* Révélation progressive — état initial posé par JS uniquement */
.pf-reveal-pending {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}

.pf-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================================
   MESSAGES PERSONNALISÉS
   ======================================================================== */

/* Message disponibilité produit */
.pf-availability-notice {
  padding: 0.75rem 1rem;
  background: var(--pf-kraft);
  border-left: 3px solid var(--pf-feuillage);
  border-radius: var(--pf-radius-sm);
  margin: 1rem 0;
  font-size: 0.9375rem;
}

/* Message hors zone de livraison */
.woocommerce-error .pf-shipping-notice,
.woocommerce-message .pf-shipping-notice {
  display: block;
  margin-top: 0.5rem;
  font-weight: 600;
}

/* Panier vide */
.woocommerce-info.pf-empty-cart {
  background: var(--pf-papier);
  border-left: 3px solid var(--pf-dahlia);
  color: var(--pf-encre);
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 767px) {
  /* Ajustement des rayons sur mobile */
  .product-card,
  .woocommerce ul.products li.product {
    border-radius: var(--pf-radius-sm);
  }

  /* Hit areas adaptées */
  button,
  .button,
  .woocommerce button.button {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
  }
}

/* ========================================================================
   PREFERS-REDUCED-MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Désactive la révélation progressive */
  .pf-reveal-pending {
    opacity: 1;
    transform: none;
  }

  /* Désactive les hover transformations */
  .woocommerce ul.products li.product:hover {
    transform: none;
  }

  .woocommerce ul.products li.product:hover img {
    transform: none;
  }

  /* Fixe la hauteur du héros */
  .hero-section,
  .ct-hero {
    height: auto;
  }
}

/* ========================================================================
   UTILITAIRES
   ======================================================================== */

/* Masquage accessible */
.pf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Signature manuscrite Caveat */
.pf-signature {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  color: var(--pf-feuillage);
}