/*
Theme Name:   Nina fait du yoga
Theme URI:    https://ninafaitduyoga.fr/
Description:  Thème enfant de Hello Elementor pour ninafaitduyoga.fr. Direction artistique : fond dégradé permanent, typographie ronde géométrique, une seule couleur froide réservée à l'action.
Author:       BELAIR Digital
Author URI:   https://ninafaitduyoga.fr/
Template:     hello-elementor
Version:      3.1.0
Text Domain:  nina-yoga
Tags:         woocommerce, elementor, child-theme
*/

/* ============================================================
   RÈGLES STRUCTURANTES
   1. Le fond n'est jamais un aplat — toujours un dégradé.
   2. --nina-flash est la SEULE couleur froide. Elle ne sert
      qu'à l'action : bouton d'achat, surlignage, focus.
      Ne jamais l'utiliser en décoration.
   ============================================================ */

/* ---------- 1. JETONS ---------- */
:root{
  --nina-beurre:  #FFF3A8;  /* base — À RECALER sur le jaune du logo */
  --nina-peche:   #FFB59B;
  --nina-rose:    #FF8FC4;
  --nina-lilas:   #C9A7FF;
  --nina-flash:   #14E3B0;  /* action, exclusivement */
  --nina-magenta: #FF3D9A;  /* second surlignage */
  --nina-encre:   #050039;  /* prélevé sur le logo — bleu nuit, pas noir */

  --nina-deg-aube:  linear-gradient(135deg, var(--nina-beurre) 0%, var(--nina-peche) 52%, var(--nina-rose) 100%);
  --nina-deg-objet: linear-gradient(155deg, var(--nina-flash) 0%, var(--nina-lilas) 52%, var(--nina-rose) 100%);
  --nina-deg-nuit:  linear-gradient(150deg, var(--nina-lilas) 0%, var(--nina-magenta) 60%, var(--nina-peche) 100%);

  --nina-display: "Unbounded", system-ui, -apple-system, sans-serif;
  /* Alternative humaniste, plus proche du dessin du logo.
     Pour basculer : décommenter la ligne ci-dessous et ajuster
     l'URL Google Fonts dans functions.php.
  --nina-display: "Alegreya Sans", system-ui, sans-serif; */
  --nina-texte:   "Figtree", system-ui, -apple-system, sans-serif;
  --nina-mono:    "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  --nina-marge: clamp(18px, 3.5vw, 52px);
  --nina-bande: clamp(64px, 8vw, 118px);
}

/* ---------- 2. BASE ---------- */
body{
  color:var(--nina-encre);
  font-family:var(--nina-texte);
  font-size:16px;
  line-height:1.6;
  background:
    radial-gradient(58vw 46vw at 8% -4%,  rgba(255,143,196,.85), transparent 62%),
    radial-gradient(52vw 40vw at 98% 12%, rgba(201,167,255,.75), transparent 60%),
    radial-gradient(64vw 48vw at 88% 88%, rgba(255,181,155,.80), transparent 62%),
    radial-gradient(48vw 38vw at 4% 72%,  rgba(255,143,196,.55), transparent 60%),
    var(--nina-beurre);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3,
.elementor-heading-title{
  font-family:var(--nina-display);
  font-weight:800;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:-.02em;
}

h4, h5, h6{
  font-family:var(--nina-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Classes utilitaires — champ "Classes CSS" d'Elementor */
.nina-surligne{
  display:inline-block;
  background:var(--nina-flash);
  padding:.04em .22em;
  border-radius:6px;
  transform:rotate(-1.6deg);
}
.nina-surligne-magenta{
  display:inline-block;
  background:var(--nina-magenta);
  color:var(--nina-beurre);
  padding:.04em .22em;
  border-radius:6px;
  transform:rotate(1.4deg);
}
.nina-carte{
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(8px);
  border:2px solid var(--nina-encre);
  border-radius:18px;
  padding:22px;
}

:focus-visible{ outline:3px solid var(--nina-encre); outline-offset:3px; }

/* ---------- 3. EN-TÊTE ----------
   Transparent au repos, verre dépoli au défilement.
   La classe .nina-collee est posée par assets/nina.js.
   Si l'en-tête est construit dans Elementor, le script le détecte
   via [data-elementor-type="header"] : rien à configurer. */
.nina-entete{
  position:sticky;
  top:0;
  z-index:20;
  background:transparent;
  backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .32s ease, backdrop-filter .32s ease,
             border-color .32s ease, padding .32s ease;
}
.nina-entete.nina-collee{
  background:rgba(255,243,168,.62);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:rgba(5,0,57,.14);
}
/* Le logo se rétracte légèrement une fois collé. */
.nina-entete img.nina-logo,
.nina-entete .site-logo img,
.nina-entete .elementor-widget-theme-site-logo img{
  height:44px;
  width:auto;
  transition:height .32s ease;
}
.nina-entete.nina-collee img.nina-logo,
.nina-entete.nina-collee .site-logo img,
.nina-entete.nina-collee .elementor-widget-theme-site-logo img{
  height:34px;
}

/* ---------- 3. BANDEAU DÉFILANT (nina_yoga_ticker) ---------- */
.nina-ticker{
  background:var(--nina-encre);
  color:var(--nina-flash);
  font-family:var(--nina-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:9px 0;
  overflow:hidden;
  white-space:nowrap;
}
.nina-ticker__piste{ display:inline-block; animation:nina-defile 28s linear infinite; }
.nina-ticker__piste span{ padding:0 22px; }
@keyframes nina-defile{ to{ transform:translateX(-50%); } }

/* ---------- 4. CTA ---------- */
.wp-element-button,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background:var(--nina-flash);
  color:var(--nina-encre);
  font-family:var(--nina-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:15px 30px;
  border:2px solid var(--nina-encre);
  border-radius:999px;
  box-shadow:4px 4px 0 var(--nina-encre);
  transition:transform .2s ease, box-shadow .2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.elementor-button:hover{
  background:var(--nina-flash);
  color:var(--nina-encre);
  transform:translate(3px,3px);
  box-shadow:1px 1px 0 var(--nina-encre);
}

/* Classe réutilisable pour Elementor.
   À saisir dans Avancé → Classes CSS du widget Bouton : nina-btn
   Elle reproduit le CTA sans avoir à régler quoi que ce soit,
   et surtout elle apporte le survol (décalage + rétraction de
   l'ombre) qu'Elementor Free ne sait pas produire seul. */
a.nina-btn,
.elementor-button.nina-btn,
.nina-btn{
  display:inline-block;
  background:var(--nina-flash);
  color:var(--nina-encre);
  fill:var(--nina-encre);
  font-family:var(--nina-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none;
  padding:15px 30px;
  border:2px solid var(--nina-encre);
  border-radius:999px;
  box-shadow:4px 4px 0 var(--nina-encre);
  transition:transform .2s ease, box-shadow .2s ease;
}
a.nina-btn:hover,
a.nina-btn:focus-visible,
.elementor-button.nina-btn:hover,
.elementor-button.nina-btn:focus-visible,
.nina-btn:hover,
.nina-btn:focus-visible{
  background:var(--nina-flash);
  color:var(--nina-encre);
  transform:translate(3px,3px);
  box-shadow:1px 1px 0 var(--nina-encre);
}

/* Variante secondaire : même dessin, sans remplissage ni ombre. */
a.nina-btn--fantome,
.elementor-button.nina-btn--fantome,
.nina-btn--fantome{
  background:transparent;
  box-shadow:none;
}
a.nina-btn--fantome:hover,
.elementor-button.nina-btn--fantome:hover,
.nina-btn--fantome:hover{
  background:var(--nina-flash);
  transform:none;
  box-shadow:none;
}

/* ---------- 5. WOOCOMMERCE — grille boutique ---------- */
/* Sélecteurs multiples + !important : au cas où un widget Elementor
   (Products / Archive Products) impose ses propres colonnes en ligne. */
.woocommerce ul.products,
.woocommerce-page ul.products,
.elementor-widget-woocommerce-product-grid ul.products,
.elementor-widget-archive-products ul.products,
.elementor-widget-woocommerce-products ul.products{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:20px;
  margin:0;
  padding:0;
}
@media (max-width:768px){
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .elementor-widget-woocommerce-product-grid ul.products,
  .elementor-widget-archive-products ul.products,
  .elementor-widget-woocommerce-products ul.products{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:14px;
  }
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:100% !important;
  flex-basis:auto !important;
  max-width:none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none; }

.woocommerce ul.products li.product{
  width:100%;
  margin:0;
  float:none;
  text-align:left;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.woocommerce ul.products li.product:hover{ transform:translateY(-7px); }

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  display:block;
  width:100%;
}

.woocommerce ul.products li.product a img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  aspect-ratio:3/4;
  object-fit:cover;
  border:2px solid var(--nina-encre);
  border-radius:20px;
  box-shadow:6px 6px 0 var(--nina-encre);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--nina-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:16px 6px 0;
  margin:0;
}

.woocommerce ul.products li.product .price{
  display:block;
  font-family:var(--nina-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--nina-encre);
  padding:2px 6px 0;
  margin:0;
}
.woocommerce ul.products li.product .price del{ opacity:.5; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }

/* Pastille promo — dégradé + contour, écho des objets 3D */
.woocommerce span.onsale{
  background:var(--nina-deg-nuit);
  color:var(--nina-encre);
  border:2px solid var(--nina-encre);
  font-family:var(--nina-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:-.01em;
  border-radius:999px;
  padding:9px 15px;
  min-width:0;
  min-height:0;
  line-height:1;
  transform:rotate(-7deg);
}

/* ---------- 6. WOOCOMMERCE — fiche produit ---------- */
.woocommerce div.product .product_title{ font-size:clamp(26px, 4.2vw, 54px); }

.woocommerce div.product div.images img{
  border:2px solid var(--nina-encre);
  border-radius:20px;
}

/* ---------- Galerie PDP maison : 1 seule image visible, flèches gauche/droite ---------- */
.woocommerce div.product .woocommerce-product-gallery{ position:relative; }

.woocommerce div.product .woocommerce-product-gallery__wrapper{
  position:relative;
  display:block;
}

/* Toutes les photos sont superposées ; seule celle marquée "active" par le
   script s'affiche. Cela évite de dépendre du slider natif de Woo, dont
   le comportement diffère entre desktop et mobile. */
.woocommerce div.product .woocommerce-product-gallery__image{
  display:none;
  width:100%;
  margin:0;
}
.woocommerce div.product .woocommerce-product-gallery__image.nina-active{
  display:block;
}

/* Icône loupe / déclencheur de zoom natif : neutralisée si présente. */
.woocommerce div.product .woocommerce-product-gallery__trigger{ display:none !important; }
.woocommerce div.product .woocommerce-product-gallery__image a{ cursor:default; }
.woocommerce div.product .woocommerce-product-gallery__image img{ cursor:default; }

.woocommerce div.product .nina-gallery-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  margin:0 12px;
  border:2px solid var(--nina-encre);
  border-radius:999px;
  background:#fff;
  box-shadow:4px 4px 0 var(--nina-encre);
  z-index:2;
  cursor:pointer;
  transition:transform .2s ease;
}
.woocommerce div.product .nina-gallery-arrow:hover{ transform:translateY(-50%) scale(1.08); }

.woocommerce div.product .nina-gallery-arrow::before{
  content:"";
  display:block;
  width:10px;
  height:10px;
  border-top:3px solid var(--nina-encre);
  border-right:3px solid var(--nina-encre);
}
.woocommerce div.product .nina-gallery-arrow--prev{ left:0; }
.woocommerce div.product .nina-gallery-arrow--prev::before{
  transform:rotate(-135deg);
  margin-left:4px;
}
.woocommerce div.product .nina-gallery-arrow--next{ right:0; }
.woocommerce div.product .nina-gallery-arrow--next::before{
  transform:rotate(45deg);
  margin-right:4px;
}
/* Une seule photo : pas besoin de flèches. */
.woocommerce div.product .woocommerce-product-gallery--single-image .nina-gallery-arrow{
  display:none;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--nina-mono);
  font-size:16px;
  letter-spacing:.06em;
  color:var(--nina-encre);
}

.woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border-bottom:2px solid var(--nina-encre); }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;
  border:0;
  border-radius:0;
  margin:0 18px 0 0;
  padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ content:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--nina-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  padding:12px 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  box-shadow:inset 0 -2px 0 var(--nina-encre);
}

/* ---------- 7. WOOCOMMERCE — messages, panier, commande ---------- */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(8px);
  border:2px solid var(--nina-encre);
  border-top-width:2px;
  border-radius:16px;
  color:var(--nina-encre);
  font-family:var(--nina-mono);
  font-size:12px;
  letter-spacing:.04em;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before{ color:var(--nina-encre); }
.woocommerce .woocommerce-error{ background:rgba(255,61,154,.22); }

.woocommerce table.shop_table{
  background:rgba(255,255,255,.42);
  border:2px solid var(--nina-encre);
  border-radius:16px;
  font-family:var(--nina-mono);
  font-size:13px;
}
.woocommerce table.shop_table th{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  background:rgba(255,255,255,.55);
  border:2px solid var(--nina-encre);
  border-radius:12px;
  font-family:var(--nina-mono);
  font-size:13px;
  padding:12px 14px;
}

/* ---------- 8. MOUVEMENT ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}