/*
Theme Name: Kids' Land
Theme URI: https://example.com/
Author: Kids' Land
Description: Thème WooCommerce sur mesure pour une boutique de vêtements bébé et enfant. Couleurs du logo (bleu, rouge, vert, jaune), fond bleu très pâle, produits sur fond blanc, titre multicolore, compatible RTL (arabe).
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: kids-land
Tags: e-commerce, woocommerce, rtl-language-support, custom-menu, custom-logo
*/

:root{
  --blue:#1870C0; --red:#E41818; --green:#24B46C; --yellow:#FCCC24; --orange:#E96648;
  --navy:#1B2A4A; --muted:#51607D;
  --sky:#EAF4FF; --sky-2:#D3E9FF; --white:#fff;
  --radius:22px; --wrap:1200px;
  --font-title:"Baloo 2","Fredoka","Cairo","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Nunito","Cairo","Segoe UI",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sky);color:var(--navy);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
h1,h2,h3,h4{font-family:var(--font-title);line-height:1.2;margin:0 0 .5em;color:var(--navy)}
.wrap{width:min(100% - 2rem,var(--wrap));margin-inline:auto}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link:focus{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:100;width:auto;height:auto;clip:auto;background:#fff;padding:.6rem 1rem;border-radius:10px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Barre d'annonces */
.announce{background:var(--blue);color:#fff;font-size:.9rem;font-weight:700}
.announce .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.75rem;padding-block:.5rem;text-align:center}
.announce span+span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-inline-end:.6rem}

/* En-tête */
.site-header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 3px 0 var(--sky-2)}
.nav{display:flex;align-items:center;gap:1.25rem;padding-block:.6rem}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;direction:ltr;flex-shrink:0}
.brand-logo{width:68px;height:68px;border-radius:50%;object-fit:cover}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-title{font-family:var(--font-title);font-weight:800;font-size:clamp(2rem,4.5vw,2.9rem);letter-spacing:.01em;white-space:nowrap}
.brand-title .l{display:inline-block;-webkit-text-stroke:6px #fff;paint-order:stroke fill;text-shadow:0 2px 0 rgba(24,112,192,.12)}
.brand-title .l:nth-child(odd){transform:rotate(-4deg) translateY(1px)}
.brand-title .l:nth-child(even){transform:rotate(3deg) translateY(-1px)}
.brand-title .sp{display:inline-block;width:.3em}
.c0{color:var(--blue)}.c1{color:var(--red)}.c2{color:var(--green)}.c3{color:var(--yellow)}
.brand-tag{font-size:.78rem;font-weight:800;letter-spacing:.28em;color:var(--navy);margin-top:.15rem;padding-inline-start:.15rem}
.main-nav{flex:1;display:flex;justify-content:center}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .5rem}
.main-nav a{display:block;padding:.45rem .9rem;border-radius:999px;text-decoration:none;color:var(--navy);font-weight:800}
.main-nav a:hover,.main-nav .current-menu-item>a{background:var(--sky);color:var(--blue)}
.actions{display:flex;align-items:center;gap:.4rem;margin-inline-start:auto}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--sky);color:var(--navy);cursor:pointer;position:relative;text-decoration:none}
.icon-btn:hover{background:var(--sky-2)}
.cart-count{position:absolute;inset-block-start:-4px;inset-inline-end:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:.75rem;font-weight:800;display:grid;place-items:center}
.cart-count.is-empty{display:none}
.burger{display:none}
.site-search{border-top:2px solid var(--sky)}
.site-search form{display:flex;gap:.5rem;padding-block:.8rem}
.site-search input[type=search]{flex:1;padding:.7rem 1.1rem;border:2px solid var(--sky-2);border-radius:999px;font:inherit}
.site-search button{padding:.7rem 1.4rem;border:0;border-radius:999px;background:var(--blue);color:#fff;font:inherit;font-weight:800;cursor:pointer}

/* Sous-menus */
.main-nav li{position:relative}
.main-nav .menu-item-has-children>a::after{content:"";display:inline-block;width:.4em;height:.4em;margin-inline-start:.45em;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:translateY(-.15em) rotate(45deg)}
.main-nav .sub-menu{display:none;position:absolute;inset-inline-start:0;top:100%;min-width:210px;flex-direction:column;gap:.1rem;padding:.5rem;background:#fff;border-radius:18px;border-top:4px solid var(--yellow);box-shadow:0 10px 0 var(--sky-2);z-index:60}
.main-nav li:hover>.sub-menu,.main-nav li:focus-within>.sub-menu{display:flex}
.main-nav .sub-menu a{border-radius:12px;white-space:nowrap}
.main-nav .sub-menu .sub-menu{inset-inline-start:100%;top:0}
@media (max-width:900px){
  .main-nav .sub-menu{display:flex;position:static;box-shadow:none;border-top:0;padding:0 0 0 1rem;min-width:0;background:transparent}
  .main-nav .sub-menu a{font-weight:600}
  .main-nav .menu-item-has-children>a::after{display:none}
}

/* Boutons */
.btn,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce #payment #place_order{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.5rem;border:0;border-radius:999px;background:var(--blue);color:#fff;font:800 1rem var(--font-body);text-decoration:none;cursor:pointer;transition:background .15s}
.btn:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce #payment #place_order:hover{background:#125a9e;color:#fff}
.btn-red{background:var(--red)}.btn-red:hover{background:#bd1010}
.btn-yellow{background:var(--yellow);color:var(--navy)}.btn-yellow:hover{background:#f0bd00;color:var(--navy)}
.btn-ghost{background:#fff;color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}.btn-ghost:hover{background:var(--sky);color:var(--blue)}

/* Héros */
.hero{padding-block:clamp(2rem,6vw,4.5rem)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:2rem}
.hero h1{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:800;max-width:15ch}
.hero p{font-size:1.15rem;color:var(--muted);max-width:44ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.hero-visual{position:relative;justify-self:center;width:min(100%,420px)}
.hero-visual img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 10px #fff}
.dot{position:absolute;border-radius:50%}
.dot.d1{width:56px;height:56px;background:var(--yellow);inset-block-start:2%;inset-inline-end:2%}
.dot.d2{width:34px;height:34px;background:var(--red);inset-block-end:10%;inset-inline-start:-2%}
.dot.d3{width:44px;height:44px;background:var(--green);inset-block-end:0;inset-inline-end:12%}

/* Sections */
.section{padding-block:clamp(2rem,5vw,3.5rem)}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:.5rem 1rem;margin-bottom:1.5rem}
.section-head h2{font-size:clamp(1.6rem,3.5vw,2.2rem);margin:0}
.section-head p{margin:0;color:var(--muted)}
.cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem}
.cat{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.1rem 1rem;background:#fff;border-radius:var(--radius);border-bottom:6px solid var(--blue);text-decoration:none;color:var(--navy);font-family:var(--font-title);font-weight:700;font-size:1.15rem;text-align:center;transition:transform .15s}
.cats li:nth-child(4n+2) .cat{border-bottom-color:var(--red)}
.cats li:nth-child(4n+3) .cat{border-bottom-color:var(--green)}
.cats li:nth-child(4n+4) .cat{border-bottom-color:var(--yellow)}
.cat:hover{transform:translateY(-4px)}
.cat img,.cat .ph{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--sky)}
.cat small{font-family:var(--font-body);font-weight:600;color:var(--muted);font-size:.85rem}
.promises{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.promise{display:flex;gap:1rem;align-items:center;background:#fff;border-radius:var(--radius);padding:1.2rem}
.promise .ic{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--blue)}
.promise:nth-child(2) .ic{background:var(--red)}
.promise:nth-child(3) .ic{background:var(--green)}
.promise strong{display:block;font-family:var(--font-title);font-size:1.1rem}
.promise span{color:var(--muted);font-size:.95rem}
.contact{background:var(--blue);color:#fff;border-radius:34px;padding:clamp(1.8rem,5vw,3.2rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.contact h2{color:#fff;font-size:clamp(1.6rem,3.5vw,2.3rem);margin-bottom:.3rem}
.contact p{margin:0;max-width:46ch}

/* WooCommerce : grille produits, fond blanc */
.woocommerce ul.products,.woocommerce-page ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin:0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{float:none;width:auto;margin:0;padding:.7rem .7rem 1rem;background:#fff;border-radius:var(--radius);display:flex;flex-direction:column;position:relative;border:2px solid #fff;transition:border-color .15s,transform .15s}
.woocommerce ul.products li.product:hover{border-color:var(--sky-2);transform:translateY(-3px)}
.woocommerce ul.products li.product a img{margin:0 0 .7rem;border-radius:16px;background:#fff;width:100%;aspect-ratio:3/4;object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--font-title);font-size:1.05rem;padding:0 .3rem;margin:0 0 .3rem;color:var(--navy)}
.woocommerce ul.products li.product .price{color:var(--blue);font-weight:800;font-size:1.1rem;padding:0 .3rem;margin-bottom:.8rem;display:block}
.woocommerce ul.products li.product .price del{color:var(--muted);font-weight:600;opacity:.8;font-size:.9rem}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--red)}
.woocommerce ul.products li.product .button{margin-top:auto;width:100%}
.woocommerce span.onsale{left:auto;right:auto;inset-block-start:1.1rem;inset-inline-start:1.1rem;min-width:0;min-height:0;margin:0;padding:.25rem .8rem;line-height:1.5;border-radius:999px;background:var(--red);color:#fff;font-weight:800;font-size:.85rem}
.woocommerce-result-count,.woocommerce-ordering{margin-block:0 1rem}
.woocommerce-ordering select{padding:.5rem .9rem;border-radius:999px;border:2px solid var(--sky-2);background:#fff;font:inherit}
.woocommerce nav.woocommerce-pagination ul{border:0}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0 .15rem}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border-radius:50%;background:#fff;min-width:42px;padding:.55rem}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--blue);color:#fff}

/* Pages produit, panier, commande */
.page-main,.woo-main{padding-block:2rem 3rem}
.woocommerce div.product,.woocommerce-cart-form,.cart_totals,.woocommerce-checkout #customer_details,.woocommerce-checkout #order_review,.woocommerce-account .woocommerce-MyAccount-content,.entry-card{background:#fff;border-radius:var(--radius);padding:1.4rem}
.woocommerce div.product div.images img{border-radius:16px}
.woocommerce div.product .product_title{font-size:clamp(1.6rem,3vw,2.2rem)}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--blue);font-weight:800;font-size:1.5rem}
.woocommerce div.product form.cart .variations select,.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{padding:.7rem 1rem;border:2px solid var(--sky-2);border-radius:14px;font:inherit;background:#fff}
.woocommerce .quantity .qty{padding:.7rem;border:2px solid var(--sky-2);border-radius:14px}
.woocommerce-message,.woocommerce-info{border-top-color:var(--blue);border-radius:14px;background:#fff}
.woocommerce-message::before,.woocommerce-info::before{color:var(--blue)}
.woocommerce-error{border-radius:14px;background:#fff;border-top-color:var(--red)}
.woocommerce-breadcrumb{color:var(--muted);font-size:.9rem;margin-bottom:1rem}
.entry-title{font-size:clamp(1.8rem,4vw,2.6rem)}

/* Pied de page */
.site-footer{background:#fff;margin-top:3rem;border-top:6px solid var(--yellow)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding-block:2.5rem}
.site-footer h4{font-size:1.1rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.site-footer a{color:var(--navy);text-decoration:none;font-weight:600}
.site-footer a:hover{color:var(--blue);text-decoration:underline}
.site-footer .foot-brand p{color:var(--muted);max-width:36ch}
.foot-bottom{border-top:2px solid var(--sky);padding-block:1rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;color:var(--muted);font-size:.9rem}
.wa-float{position:fixed;inset-block-end:18px;inset-inline-end:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(27,42,74,.25)}

/* Responsive */
@media (max-width:1000px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(3,1fr)}
  .promises{grid-template-columns:1fr}
}
@media (max-width:900px){
  .burger{display:grid}
  .main-nav{display:none;position:absolute;inset-inline:0;top:100%;background:#fff;padding:.8rem 1rem 1.2rem;box-shadow:0 8px 0 var(--sky-2)}
  .nav-open .main-nav{display:block}
  .main-nav ul{flex-direction:column}
  .hero .wrap{grid-template-columns:1fr}
  .hero-visual{order:-1;width:min(70%,300px)}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .brand-logo{width:52px;height:52px}
  .brand-title .l{-webkit-text-stroke-width:4px}
  .brand-tag{letter-spacing:.18em;font-size:.68rem}
  .announce span:nth-child(n+2){display:none}
}