/*
Theme Name: Astra Child - Leader
Template: astra
Description: Enfant-theme Astra pour le site Leader (jeux educatifs) - reprend les couleurs, typographies et animations de la maquette.
Version: 1.0
Author: Leader
*/

/* ==========================================================
   1) VARIABLES DE MARQUE (copiees de la maquette)
   Modifiables ici en un seul endroit
   ========================================================== */
:root{
  --navy:#212E52;
  --navy-dark:#161d38;
  --navy-soft:#3a4a76;
  --blue:#447AAF;
  --blue-light:#EAF2FB;
  --blue-line:#D7E6F5;
  --gold:#F5D248;
  --gold-deep:#DF9D19;
  --white:#FFFFFF;
  --gray-bg:#F6F7FB;
  --gray-line:#E7E9F2;
  --text-muted:#5B6785;
  --text-soft:#8891A8;
  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --shadow-sm:0 2px 10px rgba(33,46,82,.06);
  --shadow-md:0 14px 34px rgba(33,46,82,.12);
  --shadow-lg:0 28px 64px rgba(33,46,82,.20);
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:40px;--sp-6:48px;--sp-8:64px;--sp-10:80px;--sp-12:96px;--sp-16:128px;
}

/* ==========================================================
   2) TYPOGRAPHIE DE BASE
   ========================================================== */
body{
  font-family:'Poppins',sans-serif;
  color:var(--navy);
}
h1,h2,h3,h4{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  color:var(--navy);
}
.arabic{ font-family:'Cairo',sans-serif; }

/* ==========================================================
   3) BOUTONS (a appliquer via le champ "Classe CSS additionnelle"
   sur les boutons Gutenberg/Spectra/Elementor)
   ========================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:100px;font-weight:700;font-size:.95rem;
  border:2px solid transparent;cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-primary{
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-deep) 100%);
  color:var(--navy-dark);
  box-shadow:0 10px 24px rgba(223,157,25,.35);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(223,157,25,.45); }
.btn-outline-light{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn-outline-navy{ border-color:var(--navy); color:var(--navy); }
.btn-outline-navy:hover{ background:var(--navy); color:#fff; transform:translateY(-2px); }
.btn-sm{ padding:11px 20px; font-size:.85rem; }

/* ==========================================================
   4) EYEBROW (petit label au-dessus des titres de section)
   ========================================================== */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy);
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-deep) 100%);
  padding:9px 22px 9px 18px;
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 50%);
}
.eyebrow.ghost{ background:var(--blue-light); color:var(--blue); }

/* ==========================================================
   5) ANIMATION D'APPARITION AU SCROLL
   Ajoute la classe "reveal" a n'importe quel bloc Gutenberg/
   Spectra/Elementor (champ "Classe CSS additionnelle")
   ========================================================== */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================
   6) CARTES PRODUIT WOOCOMMERCE (survol type maquette)
   ========================================================== */
ul.products li.product{
  transition:box-shadow .25s ease, transform .25s ease;
  border-radius:var(--radius-md);
}
ul.products li.product:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
}

/* ==========================================================
   7) TES AJUSTEMENTS PERSONNELS
   Ajoute tout nouveau style ci-dessous, ne touche pas au-dessus
   ========================================================== */