/* ==============================================================
   components.css — Composants réutilisables
   Boutons, badges, cards, décorations, navigation, Woo, etc.
   ==============================================================

   SOMMAIRE
   1) UI de base (boutons / badges / cards)
   2) Navigation (état actif)
   3) Typo & effets texte (stroke)
   4) Dividers & séparateurs (vague)
   5) Animations & effets (logo / zoom)
   6) Fil d’Ariane (Yoast)
   7) WooCommerce (mini-panier, vignettes, bouton panier)
   8) Responsive
   ============================================================== */


/* --------------------------------------------------------------
   1) UI DE BASE — Boutons, badges, cards
-------------------------------------------------------------- */

/* Bouton générique */
.lsdm-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.lsdm-btn:hover {
  background: #333;
  transform: translateY(-1px);
}

.lsdm-btn:active {
  transform: translateY(0);
}

/* Bouton outline */
.lsdm-btn--outline {
  background: transparent;
  border: 2px solid #111;
  color: #111;
}

.lsdm-btn--outline:hover {
  background: #111;
  color: #fff;
}

/* Badge générique */
.lsdm-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.lsdm-badge--primary {
  background: #111;
  color: #fff;
}

.lsdm-badge--success {
  background: #4caf50;
  color: #fff;
}

/* Card */
.lsdm-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}


/* --------------------------------------------------------------
   2) NAVIGATION — Lien actif
-------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: #123254; /* couleur de ton menu actif */
  font-weight: 700;
}


/* --------------------------------------------------------------
   3) TYPO & EFFETS TEXTE — Stroke (détouré)
-------------------------------------------------------------- */

.lsdm-text-stroke {
  color: transparent;              /* On masque la couleur interne */
  -webkit-text-stroke: 0.2px #fff; /* Contour blanc */
  text-stroke: 0.2px #fff;         /* Pour navigateurs compatibles */
  font-weight: 800;                /* Pour un rendu plus propre */
}

/* Variante : texte rempli + contour */
.lsdm-text-stroke-fill {
  color: #ffffff;                  /* Couleur interne */
  -webkit-text-stroke: 0.2px #000; /* Contour noir */
  text-stroke: 0.2px #000;
}


/* --------------------------------------------------------------
   4) DIVIDERS & SÉPARATEURS — Vague / Stackable
-------------------------------------------------------------- */

/* Divider Stackable avec vague 70% */
.wave-hr {
  border: none;
  margin: 40px 0;
  height: 20px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'><path d='M0 10 Q 10 0 20 10 T 40 10 T 60 10 T 80 10 T 100 10 T 120 10' fill='transparent' stroke='%23c87a2a' stroke-width='4' stroke-linecap='round'/></svg>")
    no-repeat center center;
  background-size: 70% 20px; /* longueur contrôlée : 70% */
}

/* Supprimer le hr interne Stackable */
.wave-hr .stk-block-divider__hr {
  display: none;
}

.section-divider .wave {
  display: block;
  width: 80%; /* ou 100 %, 70 %, ce que tu veux */
  margin: 20px auto;
}


/* --------------------------------------------------------------
   5) ANIMATIONS & EFFETS — Logo / Zoom
-------------------------------------------------------------- */

/* Logo : état initial */
.lsdm-logo {
  /* display: inline-block; */
  transition: transform 0.25s ease-out;
}

/* Bounce au hover */
.lsdm-logo:hover {
  animation: logoBounce 0.35s ease-out forwards;
}

@keyframes logoBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1.15); }
}

.footer-lsdm-logo:hover {
  animation: logoBounceSoft 0.35s ease-out forwards;
}

@keyframes logoBounceSoft {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.10); }
  100% { transform: scale(1.08); }
}

/* Préparation : transition douce */
.lsdm-zoom {
  transition: transform 0.25s ease-out;
}

/* Effet zoom au survol */
.lsdm-zoom:hover {
  transform: scale(1.05);
}


/* --------------------------------------------------------------
   6) FIL D’ARIANE — Yoast
-------------------------------------------------------------- */

/* Style global du fil d'Ariane Yoast */
.yoast-breadcrumbs {
  font-size: 14px;
  font-family: inherit;
}

/* Liens du fil (Accueil, Menu & Commande, etc.) */
.yoast-breadcrumbs a {
  color: #C87A2A; /* orange */
  font-weight: 600;
  text-decoration: none;
}

/* Dernier élément (page courante) */
.yoast-breadcrumbs .breadcrumb_last {
  color: #123254; /* bleu foncé */
  font-weight: 700;
}

/* Survol des liens */
.yoast-breadcrumbs a:hover {
  text-decoration: underline;
}

/* Légère respiration autour du slash déjà présent dans le HTML */
.yoast-breadcrumbs span {
  word-spacing: 2px;
}


/* ----------------------------------------------------------
   7) WOOCOMMERCE — Mini-panier + vignettes + boutons
---------------------------------------------------------- */

/* MINI-PANIER WooCommerce — Styles personnalisés (FORCÉS)
   BASE commune (override les styles Woo + Blocks)
*/
.wc-block-mini-cart__footer-actions a.wc-block-components-button.wp-element-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 30px !important;
  border-radius: 40px !important;
  border-width: 3px !important;
  border-style: solid !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transform: scale(1) !important;
  transition: all 0.2s ease-in-out !important;
}

/* BOUTON : Voir mon panier */
.wc-block-mini-cart__footer-actions
a.wc-block-mini-cart__footer-cart.wc-block-components-button {
  background-color: #F99B21 !important;
  border-color: #FFCCA3 !important;
  color: #FFFBEF !important;
}

/* Hover */
.wc-block-mini-cart__footer-actions
a.wc-block-mini-cart__footer-cart.wc-block-components-button:hover {
  background-color: #e0891d !important;
  transform: scale(1.04) !important;
  cursor: pointer;
}

/* BOUTON : Valider la commande */
.wc-block-mini-cart__footer-actions
a.wc-block-mini-cart__footer-checkout.wc-block-components-button {
  background-color: #C87A2A !important;
  border-color: #F2C08A !important;
  color: #FFF8E6 !important;
}

/* Hover */
.wc-block-mini-cart__footer-actions
a.wc-block-mini-cart__footer-checkout.wc-block-components-button:hover {
  background-color: #b06b25 !important;
  transform: scale(1.04) !important;
  cursor: pointer;
}

/* Texte interne */
.wc-block-mini-cart__footer-actions .wc-block-components-button__text {
  padding: 0 !important;
  margin: 0 !important;
}

/* MINI-PANIER WooCommerce – VIGNETTES UNIQUEMENT */

/* 1. Supprimer la deuxième image (fallback caché par Woo) */
.wc-block-cart-item__image img[hidden] {
  display: none !important;
}

/* 2. Élargir la colonne de la vignette */
.wc-block-cart-item__image {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
}

/* 3. Agrandir réellement les vignettes + arrondir les angles */
.wc-block-cart-item__image img,
.wc-block-cart-item__image > a > img {
  width: 64px !important;
  height: 64px !important;
  max-width: none !important; /* override Woo max-width */
  max-height: none !important;
  aspect-ratio: 1/1 !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Bouton : Valider la commande (PAGE PANIER) */
.wc-block-cart__submit-button.wc-block-components-button {
  background-color: #C87A2A !important;
  border: 3px solid #F2C08A !important;
  color: #FFF8E6 !important;
  padding: 14px 34px !important;
  border-radius: 40px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
  transform: scale(1) !important;
  transition: all 0.2s ease-in-out !important;
}

/* Hover */
.wc-block-cart__submit-button.wc-block-components-button:hover {
  background-color: #b06b25 !important;
  transform: scale(1.04) !important;
  cursor: pointer;
}

/* Texte interne */
.wc-block-cart__submit-button .wc-block-components-button__text {
  padding: 0 !important;
  margin: 0 !important;
}


/* --------------------------------------------------------------
   8) RESPONSIVE
-------------------------------------------------------------- */

@media (max-width: 768px) {
  .lsdm-logo:hover {
    animation: logoBounceMobile 0.25s ease-out forwards;
  }

  @keyframes logoBounceMobile {
    0%   { transform: scale(1); }
    60%  { transform: scale(1.10); }
    100% { transform: scale(1.05); }
  }
}